@chaibuilder/sdk 1.2.63 → 1.2.65

package/dist/Settings-dbB2VPAj.js

@@ -1,2378 +0,0 @@
-import { j as e } from "./jsx-runtime-WbnYoNE9.js";
-import * as ie from "react";
-import $, { useState as j, useMemo as T, useEffect as I, useCallback as B, memo as bt, useRef as ye, createContext as We, useContext as se } from "react";
-import { useThrottledCallback as ce } from "@react-hookz/web";
-import { forEach as ke, isArray as pe, omit as ft, truncate as vt, includes as X, get as g, first as oe, split as wt, startCase as Y, toLower as re, isEmpty as b, map as R, find as jt, last as Ct, filter as Ve, set as Ue, debounce as kt, keys as he, cloneDeep as Nt, each as _t, capitalize as me, reject as St, nth as He, startsWith as q, isNumber as Tt, parseInt as Rt, isNaN as Ke, findLast as Vt, flatten as De, intersection as Ht, has as de, isNull as Dt } from "lodash-es";
-import { useTranslation as E } from "react-i18next";
-import { CopyIcon as Bt, PlusIcon as Ge, Cross2Icon as qe, EyeOpenIcon as At, EyeClosedIcon as Be, BorderAllIcon as F, WidthIcon as H, HeightIcon as D, ArrowUpIcon as J, ArrowRightIcon as Q, ArrowDownIcon as ee, ArrowLeftIcon as te, ArrowTopLeftIcon as It, ArrowTopRightIcon as Pt, ArrowBottomRightIcon as $t, ArrowBottomLeftIcon as Et, AlignLeftIcon as Mt, AlignCenterHorizontallyIcon as Lt, AlignRightIcon as Ot, StretchHorizontallyIcon as zt, FontItalicIcon as Ft, UnderlineIcon as Xt, OverlineIcon as Yt, LetterCaseUppercaseIcon as Zt, Cross1Icon as Wt, InfoCircledIcon as Ne, MinusIcon as Ut, BoxIcon as Je, RowSpacingIcon as Kt, TriangleDownIcon as Gt, CrossCircledIcon as qt, CaretDownIcon as Jt, MixerHorizontalIcon as Qt } from "@radix-ui/react-icons";
-import { aM as Qe, aN as et, B as P, aO as tt, aP as er, aQ as tr, aR as rr, aS as sr, aT as or, aU as lr, l as M, aV as ar, aW as nr, aX as ir, aY as dr, aZ as cr, a_ as pr, a$ as ur, T as U, v as K, w as G, am as gr, b0 as xr, b1 as yr, b2 as hr, b3 as mr, b4 as br, b5 as fr, b6 as vr, j as _e, b7 as wr, b8 as be, aH as rt, y as st, h as ot, b9 as jr, a8 as lt, a9 as fe, aa as ve, ab as we, a6 as at, $ as Cr, z as le, aq as Se, aB as nt, a7 as kr, ba as it, F as Nr, bb as _r, aC as ue, aw as Sr, aG as Tr, J as Ae, L as Rr, M as Vr, N as Hr, bc as Dr, O as Ie, P as Pe, bd as $e, a5 as Ee, be as Me, aI as Br } from "./index-bscJUvUx.js";
-import { Check as Ar, EditIcon as Ir, TrashIcon as Pr, Loader as $r, SparklesIcon as Er, Edit2 as Mr, X as Lr } from "lucide-react";
-import { getBlockComponent as Te, getChaiDataProviders as Or, useGlobalStylingPresets as zr } from "@chaibuilder/runtime";
-import { E as dt, u as ct, a as Fr, F as Xr } from "./index-EEcKvBh3.js";
-import { J as Yr, a as Zr, d as Wr } from "./index-e0c8PmRQ.js";
-import Ur from "@rjsf/core";
-import Kr from "@rjsf/validator-ajv8";
-import { useAtom as Gr } from "jotai";
-import qr from "react-autosuggest";
-import Jr from "fuse.js";
-import { A as Qr, C as ge, g as es } from "./utils-VpVqnC9m.js";
-import { a as ts } from "./MODIFIERS-fd5XOmum.js";
-import { get as Le, isEmpty as rs } from "lodash";
-import "./_commonjsHelpers-UyOWmZb0.js";
-import "@radix-ui/react-toggle";
-import "class-variance-authority";
-import "@radix-ui/react-switch";
-import "@radix-ui/react-slot";
-import "@radix-ui/react-accordion";
-import "@radix-ui/react-alert-dialog";
-import "@radix-ui/react-dialog";
-import "@radix-ui/react-label";
-import "@radix-ui/react-scroll-area";
-import "@radix-ui/react-tabs";
-import "@radix-ui/react-tooltip";
-import "@radix-ui/react-popover";
-import "@radix-ui/react-menubar";
-import "@radix-ui/react-hover-card";
-import "@radix-ui/react-select";
-import "@radix-ui/react-dropdown-menu";
-import "@radix-ui/react-separator";
-import "@radix-ui/react-toast";
-import "cmdk";
-import "@radix-ui/react-context-menu";
-import "react-icons-picker";
-import "react-dom";
-import "react-quill";
-import "./Functions-7jnEwJyw.js";
-import "clsx";
-import "tailwind-merge";
-import "tree-model";
-import "i18next";
-import "react-arborist";
-import "./index-VBXQixVm.js";
-import "@floating-ui/react-dom";
-import "flagged";
-import "react-hotkeys-hook";
-function ss(r) {
-  const a = [], t = {};
-  function l(o, n) {
-    ke(n, (c, p) => {
-      const s = o ? `${o}.${p}` : p, d = pe(c) ? "list" : typeof c;
-      a.push(s), t[s] = d === "string" ? "text" : d === "object" ? "model" : d, d === "object" && !pe(c) && l(s, c);
-    });
-  }
-  return l("", ft(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: a, pathsType: t };
-}
-const je = ({ data: r, fullView: a }) => {
-  if (!r)
-    return null;
-  const t = typeof r;
-  return a ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
-    /* @__PURE__ */ e.jsx(dt, { children: /* @__PURE__ */ e.jsx(
-      Yr,
-      {
-        data: r,
-        shouldExpandNode: Zr,
-        style: {
-          ...Wr,
-          container: "max-h-[40vh] overflow-y-auto text-[12px] leading-[1.5] tracking-wide font-mono",
-          stringValue: "text-orange-600",
-          label: "text-green-900 font-semibold pr-1 tracking-wider"
-        }
-      }
-    ) })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: "max-h-36 w-full overflow-y-auto overflow-x-hidden text-[12px] leading-4 text-gray-800/50", children: [
-    /* @__PURE__ */ e.jsx("span", { className: "font-medium text-gray-800/80", children: "Content: " }),
-    r
-  ] }) : /* @__PURE__ */ e.jsx("div", { className: "w-full overflow-hidden whitespace-nowrap text-[10px] leading-3 text-gray-800/50", children: vt(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
-}, Oe = ({
-  type: r,
-  value: a = "",
-  setValue: t,
-  data: l,
-  onChange: o,
-  dataType: n,
-  appliedBindings: c
-}) => {
-  const { paths: p, pathsType: s } = ss(l), d = r === "PROP" ? Te(l == null ? void 0 : l._type) : {}, u = r === "PROP", [i, h] = j(!1), y = T(() => r === "PROP" ? p.filter(
-    (x) => !X(c, x) && g(d, `props.${oe(wt(x, "."))}.binding`)
-  ) : p.filter((x) => n === g(s, x, "")), [r, p, c, n, d]);
-  return I(() => {
-    a && o(a);
-  }, [a, r]), /* @__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(re(r)) }),
-      /* @__PURE__ */ e.jsxs(Qe, { open: i, onOpenChange: h, children: [
-        /* @__PURE__ */ e.jsx(et, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-          P,
-          {
-            variant: "outline",
-            size: "sm",
-            className: ` ${b(a) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
-            children: a ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-              /* @__PURE__ */ e.jsxs("span", { className: "pr-8 text-sm", children: [
-                u && /* @__PURE__ */ e.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: Y(n) }),
-                a
-              ] }),
-              /* @__PURE__ */ e.jsx("span", { className: "cursor-pointer text-[9px] text-blue-400 underline hover:text-blue-700", children: "Change" })
-            ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-              "+ Set ",
-              Y(re(r))
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ e.jsx(tt, { className: "z-[999] min-w-[300px] p-0", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(er, { children: [
-          /* @__PURE__ */ e.jsx(tr, { placeholder: `Choose ${re(r)}...` }),
-          /* @__PURE__ */ e.jsxs(rr, { children: [
-            /* @__PURE__ */ e.jsx(sr, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(or, { children: R(y, (x) => /* @__PURE__ */ e.jsxs(
-              lr,
-              {
-                value: x,
-                className: `cursor-pointer ${u ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
-                onSelect: (v) => {
-                  t(jt(y, (k) => k === v) || null), h(!1);
-                },
-                children: [
-                  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(Ar, { className: `h-4 w-4 text-green-500 ${a === x ? "" : "opacity-0"}` }),
-                    x
-                  ] }),
-                  u ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: Y(g(s, x, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(je, { data: g(l, x) }) })
-                ]
-              },
-              x
-            )) })
-          ] })
-        ] }) })
-      ] })
-    ] }),
-    !u && !b(a) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(je, { data: g(l, a, ""), fullView: !0 }) })
-  ] });
-}, os = ({
-  appliedBindings: r = [],
-  onAddBinding: a,
-  editMode: t,
-  item: l
-}) => {
-  const [o, n] = j(t ? l.key : ""), [c, p] = j(t ? l.value : ""), s = M(), [d] = ct(), u = B(
-    (y, x) => {
-      if (b(y))
-        return "";
-      {
-        const v = g(x === "PROP" ? s : d, y, "");
-        if (pe(v))
-          return "list";
-        const k = typeof v;
-        return k === "string" ? "text" : k === "object" ? "model" : k;
-      }
-    },
-    [s, d]
-  ), [i, h] = j(t ? u(l.key, "PROP") : "");
-  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(ar, { children: [
-      /* @__PURE__ */ e.jsx(nr, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(ir, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col gap-1", children: [
-      /* @__PURE__ */ e.jsx(
-        Oe,
-        {
-          type: "PROP",
-          isDisabled: !1,
-          placeholder: "Enter prop key",
-          value: o,
-          setValue: n,
-          onChange: (y) => {
-            const x = u(y, "PROP");
-            n(y), i !== x && p(""), h(x);
-          },
-          data: s,
-          dataType: i,
-          appliedBindings: r
-        }
-      ),
-      /* @__PURE__ */ e.jsx("div", { className: "h-2" }),
-      /* @__PURE__ */ e.jsx(
-        Oe,
-        {
-          type: "PATH",
-          isDisabled: b(o),
-          placeholder: "Enter data path",
-          value: c,
-          setValue: p,
-          onChange: (y) => {
-            const x = u(y, "PATH");
-            p(i === x ? y : "");
-          },
-          data: d,
-          dataType: i,
-          appliedBindings: r
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e.jsx(dr, { children: /* @__PURE__ */ e.jsx(
-      P,
-      {
-        type: "submit",
-        className: "mt-4",
-        disabled: b(o) && b(c),
-        onClick: () => a({ key: o, value: c }),
-        children: "Save"
-      }
-    ) })
-  ] });
-}, pt = ({ disabled: r, children: a, onAddBinding: t, appliedBindings: l, editMode: o = !0, item: n = {} }) => {
-  const [c, p] = j(!1);
-  return /* @__PURE__ */ e.jsxs(cr, { children: [
-    /* @__PURE__ */ e.jsx(pr, { disabled: r, asChild: !0, onClick: () => p(!0), children: a }),
-    c && /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(
-      os,
-      {
-        item: n,
-        editMode: o,
-        appliedBindings: l,
-        onAddBinding: (s) => {
-          t(s), p(!1);
-        }
-      }
-    ) })
-  ] });
-}, ls = ({
-  item: r,
-  onAddBinding: a,
-  onRemove: t,
-  selectedBlock: l,
-  dataProvider: o,
-  appliedBindings: n
-}) => {
-  const [c, p] = j("string"), s = (d, u) => {
-    if (b(d))
-      return "";
-    {
-      const i = g(u === "PROP" ? l : o, d, "");
-      if (pe(i))
-        return "list";
-      const h = typeof i;
-      return h === "string" ? "text" : h === "object" ? "model" : h;
-    }
-  };
-  return I(() => p(() => s(r.key, "PROP")), [r.key]), /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col rounded-md border border-gray-200 p-2", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "text-sm font-normal text-gray-500", children: r.key }),
-    /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: r.value }),
-    /* @__PURE__ */ e.jsx(je, { data: g(o, r.value, "") }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(pt, { editMode: !0, onAddBinding: a, appliedBindings: n, item: r, children: /* @__PURE__ */ e.jsx(Ir, { className: "mt-1 h-6 w-6 cursor-pointer rounded border border-blue-400 p-1 text-blue-400 duration-200 hover:scale-105 hover:bg-blue-400 hover:text-white" }) }),
-      /* @__PURE__ */ e.jsx(
-        Pr,
-        {
-          onClick: () => t(),
-          className: "mt-1 h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 duration-200 hover:scale-105 hover:bg-red-400 hover:text-white"
-        }
-      )
-    ] }),
-    !b(c) && !b(r.key) && /* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-1 mt-px flex h-4 items-center rounded-full px-2 text-[10px] font-medium text-purple-600", children: Y(c) })
-  ] });
-}, as = ({ bindingData: r, onChange: a }) => {
-  const t = M(), [l] = ct(), o = Or(), [n, c] = j(
-    R(r, (i, h) => ({ key: h, value: i }))
-  );
-  I(() => {
-    c(R(r, (i, h) => ({ key: h, value: i })));
-  }, [t == null ? void 0 : t._id, r]);
-  const p = T(() => {
-    if (b(l))
-      return !0;
-    if (b(n))
-      return !1;
-    const i = Ct(n);
-    return b(i == null ? void 0 : i.key) || b(i == null ? void 0 : i.value);
-  }, [l, n]), s = (i) => {
-    const h = Ve(n, (y) => y.key !== i.key);
-    c([...h, i]), u([...h, i]);
-  }, d = (i) => {
-    const h = Ve(n, (y, x) => i !== x);
-    u([...h]);
-  }, u = B(
-    (i = []) => {
-      if (c(i), b(i)) {
-        a({});
-        return;
-      }
-      const h = {};
-      ke(i, (y) => {
-        !b(y == null ? void 0 : y.key) && !b(y == null ? void 0 : y.value) && Ue(h, y.key, y.value);
-      }), a(h);
-    },
-    [a]
-  );
-  return b(o) ? /* @__PURE__ */ e.jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "mb-1.5 text-xs text-gray-500", children: [
-    "You have no data providers registered. Please add a data provider to your project. ",
-    /* @__PURE__ */ e.jsx("br", {}),
-    /* @__PURE__ */ e.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
-  ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
-    R(n, (i, h) => /* @__PURE__ */ e.jsx(
-      ls,
-      {
-        item: i,
-        onAddBinding: s,
-        onRemove: () => d(h),
-        selectedBlock: t,
-        dataProvider: l,
-        appliedBindings: R(n, "key")
-      },
-      i.key
-    )),
-    /* @__PURE__ */ e.jsxs(U, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(K, { disabled: b(l), className: "w-full", children: /* @__PURE__ */ e.jsx(
-        pt,
-        {
-          disabled: p,
-          appliedBindings: R(n, "key"),
-          onAddBinding: s,
-          children: /* @__PURE__ */ e.jsx(
-            "span",
-            {
-              className: `w-full rounded-md px-5 py-1.5 text-xs font-medium duration-200 ${p ? "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-[9.5px] text-gray-500", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
-            }
-          )
-        }
-      ) }),
-      p && /* @__PURE__ */ e.jsx(G, { 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" })
-    ] })
-  ] });
-}, ns = () => /* @__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" }), is = ({ id: r, placeholder: a }) => {
-  const { t } = E(), [, l] = gr(), o = M();
-  if (typeof window > "u")
-    return null;
-  const n = r.replace("root.", ""), c = g(o, n, ""), p = () => {
-    const s = o == null ? void 0 : o._id;
-    l({ blockId: s, blockProp: n, placeholder: a, initialCode: g(o, n, c) });
-  };
-  return /* @__PURE__ */ e.jsxs("div", { className: "mt-2 flex flex-col gap-y-1", children: [
-    /* @__PURE__ */ e.jsx(
-      "button",
-      {
-        onClick: p,
-        className: "text-pretty w-[90%] max-w-full cursor-default truncate rounded border bg-white p-2 text-left text-[10px]",
-        children: c.trim().length > 0 ? c.substring(0, 46) : a || "Eg: <script>console.log('Hello, world!');<\/script>"
-      }
-    ),
-    /* @__PURE__ */ e.jsx(P, { onClick: p, size: "sm", variant: "outline", className: "w-fit", children: t("Open code editor") })
-  ] });
-}, ze = bt(({ id: r, properties: a, formData: t, onChange: l }) => {
-  const [o, n] = j(t), c = { type: "object", properties: {} }, p = {};
-  Object.keys(a).forEach((d) => {
-    const u = a[d];
-    if (X(["slot", "styles"], u.type))
-      return;
-    const i = d;
-    c.properties[i] = xr(u), p[i] = yr(u);
-  }), I(() => {
-    n(t);
-  }, [r]);
-  const s = ce(
-    async ({ formData: d }, u) => {
-      l({ formData: d }, u);
-    },
-    [l],
-    1e3
-    // save only every 5 seconds
-  );
-  return /* @__PURE__ */ e.jsx(
-    Ur,
-    {
-      widgets: {
-        binding: ns,
-        richtext: hr,
-        icon: mr,
-        image: br,
-        code: is
-      },
-      fields: { link: fr },
-      idSeparator: ".",
-      autoComplete: "off",
-      omitExtraData: !1,
-      liveOmit: !1,
-      liveValidate: !1,
-      validator: Kr,
-      uiSchema: p,
-      schema: c,
-      formData: o,
-      onChange: ({ formData: d }, u) => {
-        u && (n(d), s({ formData: d }, u));
-      }
-    }
-  );
-}), ds = () => {
-  const [r, a] = Gr(vr), t = M(), [, l] = _e(), { t: o } = E(), n = T(() => (t ? JSON.stringify(t) : "").includes('"x-show"'), [t]);
-  if (!t || !n)
-    return null;
-  const c = r.includes(t._id);
-  return /* @__PURE__ */ e.jsxs("div", { className: "py-2 text-xs hover:no-underline", children: [
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2 border-b border-border bg-gray-200 px-4 py-2 font-normal", children: [
-      t._name || t._type,
-      "  ",
-      o("visibility settings")
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-2 px-2 pt-2", children: [
-      /* @__PURE__ */ e.jsx(
-        wr,
-        {
-          id: "show-on-canvas",
-          checked: c,
-          onCheckedChange: (p) => {
-            p ? (a((s) => [...s, t._id]), l([t._id])) : a((s) => s.filter((d) => d !== t._id));
-          }
-        }
-      ),
-      /* @__PURE__ */ e.jsx(be, { htmlFor: "show-on-canvas", children: o("Show on canvas") })
-    ] })
-  ] });
-};
-function cs() {
-  const r = M(), a = rt(), t = st(), l = Te(r._type), o = { ...r }, [n, c] = j(o), p = ot("dataBindingSupport", !1), s = ({ formData: y }, x, v) => {
-    if (x && (n == null ? void 0 : n._id) === r._id) {
-      const k = x.replace("root.", "");
-      t([r._id], { [k]: g(y, k) }, v);
-    }
-  }, d = B(
-    kt(({ formData: y }, x, v) => {
-      s({ formData: y }, x, v), c(y);
-    }, 1500),
-    [r == null ? void 0 : r._id]
-  ), u = ({ formData: y }, x) => {
-    if (x) {
-      const v = x.replace("root.", "");
-      a(
-        [r._id],
-        jr(v, g(y, v.split(".")))
-      ), d({ formData: y }, x, { [v]: g(n, v) });
-    }
-  }, i = he(g(o, "_bindings", {})), h = T(() => {
-    const y = Nt(g(l, "props", {}));
-    return p && _t(i, (x) => delete y[x]), y;
-  }, [l, i, p]);
-  return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
-    p ? /* @__PURE__ */ e.jsxs(lt, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
-      /* @__PURE__ */ e.jsxs(fe, { value: "BINDING", children: [
-        /* @__PURE__ */ e.jsx(ve, { className: "bg-gray-100 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 ${b(g(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
-            }
-          ),
-          "Data Binding"
-        ] }) }),
-        /* @__PURE__ */ e.jsx(we, { className: "px-4 pt-4", children: /* @__PURE__ */ e.jsx(
-          as,
-          {
-            bindingData: g(r, "_bindings", {}),
-            onChange: (y) => {
-              s({ formData: { _bindings: y } }, "root._bindings");
-            }
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ e.jsxs(fe, { value: "STATIC", children: [
-        /* @__PURE__ */ e.jsx(ve, { className: "bg-gray-100 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 bg-blue-500" }),
-          "Static Content"
-        ] }) }),
-        /* @__PURE__ */ e.jsxs(we, { className: "pt-4", children: [
-          b(i) ? null : /* @__PURE__ */ e.jsxs("div", { className: "mx-4 mb-1 mt-0 rounded-sm border border-orange-500 bg-orange-100 p-1 text-xs text-orange-500", children: [
-            "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: R(i, me).join(", ") }),
-            " ",
-            i.length === 1 ? "property" : "properties",
-            ". Remove data binding to edit static content."
-          ] }),
-          /* @__PURE__ */ e.jsx(
-            ze,
-            {
-              id: r == null ? void 0 : r._id,
-              onChange: u,
-              formData: o,
-              properties: h
-            }
-          )
-        ] })
-      ] })
-    ] }) : /* @__PURE__ */ e.jsx(
-      ze,
-      {
-        id: r == null ? void 0 : r._id,
-        onChange: u,
-        formData: o,
-        properties: h
-      }
-    ),
-    /* @__PURE__ */ e.jsx(ds, {})
-  ] });
-}
-const ps = ({ blockId: r }) => {
-  const { t: a } = E(), { askAi: t, loading: l, error: o } = Fr(), [n, c] = j(""), p = ye(null);
-  I(() => {
-    var d;
-    (d = p.current) == null || d.focus();
-  }, []);
-  const s = () => {
-    o || c("");
-  };
-  return /* @__PURE__ */ e.jsxs("div", { className: "", children: [
-    /* @__PURE__ */ e.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: a("Ask AI") }),
-    /* @__PURE__ */ e.jsx(
-      at,
-      {
-        ref: p,
-        value: n,
-        onChange: (d) => c(d.target.value),
-        placeholder: a("Ask AI to edit styles"),
-        className: "w-full border border-gray-400 focus:border-0",
-        rows: 3,
-        onKeyDown: (d) => {
-          d.key === "Enter" && (d.preventDefault(), t("styles", r, n, s));
-        }
-      }
-    ),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 my-2", children: [
-      l ? null : /* @__PURE__ */ e.jsx(
-        P,
-        {
-          disabled: n.trim().length < 5 || l,
-          onClick: () => t("styles", r, n, s),
-          variant: "default",
-          className: "w-fit",
-          size: "sm",
-          children: l ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-            /* @__PURE__ */ e.jsx($r, { className: "w-5 h-5 animate-spin" }),
-            a("Generating... Please wait")
-          ] }) : a("Edit with AI")
-        }
-      ),
-      l ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ e.jsxs(Cr, { className: "flex items-center w-full px-4 py-1 pl-2 space-x-1", children: [
-          /* @__PURE__ */ e.jsx(Xr, { className: "w-4 h-4 text-gray-500 animate-spin" }),
-          /* @__PURE__ */ e.jsx("p", { className: "text-xs", children: a("Generating... Please wait") })
-        ] }),
-        /* @__PURE__ */ e.jsx(P, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: a("Stop") })
-      ] }) : null
-    ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "max-w-full", children: o && /* @__PURE__ */ e.jsx("p", { className: "p-1 text-xs text-red-500 break-words bg-red-100 border border-red-500 rounded", children: o.message }) })
-  ] });
-}, Fe = new Jr(Qr, {
-  isCaseSensitive: !1,
-  threshold: 0.2,
-  minMatchCharLength: 2,
-  keys: ["name"]
-});
-function ut() {
-  var N;
-  const { t: r } = E(), [a] = le(), t = M(), l = Se(), o = nt(), [n] = _e(), c = ot("askAiCallBack", null), [p, s] = j(""), { toast: d } = kr(), u = (N = oe(a)) == null ? void 0 : N.prop, i = St((g(t, u, "").replace(ts, "").split(",").pop() || "").split(" "), b), h = () => {
-    const C = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    l(n, C, !0), s("");
-  }, [y, x] = j([]), v = ({ value: C }) => {
-    const V = C.trim().toLowerCase(), W = V.match(/.+:/g);
-    let m = [];
-    if (W && W.length > 0) {
-      const [f] = W, S = V.replace(f, "");
-      m = Fe.search(S).map((z) => ({
-        ...z,
-        item: { ...z.item, name: f + z.item.name }
-      }));
-    } else
-      m = Fe.search(V);
-    return x(R(m, "item"));
-  }, k = () => {
-    x([]);
-  }, L = (C) => C.name, A = (C) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: C.name }), Z = {
-    autoComplete: "off",
-    autoCorrect: "off",
-    autoCapitalize: "off",
-    spellCheck: !1,
-    placeholder: r("Enter classes separated by space"),
-    value: p,
-    onKeyDown: (C) => {
-      C.key === "Enter" && p.trim() !== "" && h();
-    },
-    onChange: (C, { newValue: V }) => s(V),
-    className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, w = () => {
-    if (navigator.clipboard === void 0) {
-      d({
-        title: "Clipboard not supported",
-        description: "Please use Chrome, Firefox or Safari",
-        variant: "destructive"
-      });
-      return;
-    }
-    navigator.clipboard.writeText(i.join(" ")), d({
-      title: "Copied",
-      description: "Classes copied to clipboard"
-    });
-  };
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: `flex ${y.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto border-b-2 bg-gray-100 pb-4`,
-      children: [
-        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
-          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-            /* @__PURE__ */ e.jsx("span", { children: r("Classes") }),
-            /* @__PURE__ */ e.jsxs(U, { children: [
-              /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(Bt, { onClick: w, className: "cursor-pointer" }) }),
-              /* @__PURE__ */ e.jsx(G, { children: /* @__PURE__ */ e.jsx("p", { children: r("Copy classes to clipboard") }) })
-            ] })
-          ] }),
-          c ? /* @__PURE__ */ e.jsxs(Qe, { children: [
-            /* @__PURE__ */ e.jsx(et, { asChild: !0, children: /* @__PURE__ */ e.jsxs(P, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
-              /* @__PURE__ */ e.jsx(Er, { className: "h-4 w-4" }),
-              /* @__PURE__ */ e.jsx("span", { className: "ml-2", children: r("Ask AI") })
-            ] }) }),
-            /* @__PURE__ */ e.jsx(tt, { side: "left", className: "p-2", children: /* @__PURE__ */ e.jsx(ps, { blockId: t == null ? void 0 : t._id }) })
-          ] }) : null
-        ] }),
-        /* @__PURE__ */ e.jsxs("div", { className: "relative 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(
-            qr,
-            {
-              suggestions: y,
-              onSuggestionsFetchRequested: v,
-              onSuggestionsClearRequested: k,
-              getSuggestionValue: L,
-              renderSuggestion: A,
-              inputProps: Z,
-              containerProps: {
-                className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
-              },
-              theme: {
-                suggestion: "bg-transparent",
-                suggestionHighlighted: "!bg-gray-300 ",
-                suggestionsContainerOpen: "absolute bg-gray-100 z-50 max-h-[230px] overflow-y-auto w-full  border border-gray-600 rounded-md"
-              }
-            }
-          ) }),
-          /* @__PURE__ */ e.jsx(
-            P,
-            {
-              variant: "outline",
-              className: "h-6 border-gray-700",
-              onClick: h,
-              disabled: p.trim() === "",
-              size: "sm",
-              children: /* @__PURE__ */ e.jsx(Ge, {})
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: ie.Children.toArray(
-          i.map((C) => /* @__PURE__ */ e.jsxs(
-            "div",
-            {
-              className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate rounded border border-gray-300 bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300",
-              children: [
-                C,
-                /* @__PURE__ */ e.jsx(
-                  qe,
-                  {
-                    onClick: () => o(n, [C]),
-                    className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
-                  }
-                )
-              ]
-            },
-            C
-          ))
-        ) })
-      ]
-    }
-  );
-}
-const us = $.memo(function({ preloadedAttributes: a = [], onAttributesChange: t }) {
-  const [l, o] = j([]), [n, c] = j(""), [p, s] = j(""), [d, u] = j(null), [i, h] = j(""), y = ye(null), x = ye(null);
-  I(() => {
-    y.current && y.current.focus();
-  }, [l]), I(() => {
-    o(a);
-  }, [a]);
-  const v = () => {
-    if (n.startsWith("@")) {
-      h("Attribute keys cannot start with '@'");
-      return;
-    }
-    if (n) {
-      const w = [...l, { key: n, value: p }];
-      t(w), o(l), c(""), s(""), h("");
-    }
-  }, k = (w) => {
-    const N = l.filter((C, V) => V !== w);
-    t(N), o(N);
-  }, L = (w) => {
-    u(w), c(l[w].key), s(l[w].value);
-  }, A = () => {
-    if (n.startsWith("@")) {
-      h("Attribute keys cannot start with '@'");
-      return;
-    }
-    if (d !== null && n) {
-      const w = [...l];
-      w[d] = { key: n, value: p }, t(w), o(w), u(null), c(""), s(""), h("");
-    }
-  }, Z = (w) => {
-    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), d !== null ? A() : v());
-  };
-  return /* @__PURE__ */ e.jsxs("div", { className: "px-1", children: [
-    /* @__PURE__ */ e.jsxs(
-      "form",
-      {
-        onSubmit: (w) => {
-          w.preventDefault(), d !== null ? A() : v();
-        },
-        className: "space-y-3",
-        children: [
-          /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
-              /* @__PURE__ */ e.jsx(be, { htmlFor: "attrKey", className: "text-xs", children: "Key" }),
-              /* @__PURE__ */ e.jsx(
-                it,
-                {
-                  autoCapitalize: "off",
-                  autoCorrect: "off",
-                  spellCheck: "false",
-                  id: "attrKey",
-                  ref: y,
-                  value: n,
-                  onChange: (w) => c(w.target.value),
-                  placeholder: "Key",
-                  className: "h-8 text-sm"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
-              /* @__PURE__ */ e.jsx(be, { htmlFor: "attrValue", className: "text-xs", children: "Value" }),
-              /* @__PURE__ */ e.jsx(
-                at,
-                {
-                  autoCapitalize: "off",
-                  autoCorrect: "off",
-                  spellCheck: "false",
-                  id: "attrValue",
-                  rows: 2,
-                  ref: x,
-                  value: p,
-                  onChange: (w) => s(w.target.value),
-                  onKeyDown: Z,
-                  placeholder: "Value",
-                  className: "bg-background text-sm"
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ e.jsx(P, { type: "submit", className: "h-8 w-full text-sm", children: d !== null ? "Save" : "Add" }),
-          i && /* @__PURE__ */ e.jsx("p", { className: "text-xs text-red-500", children: i })
-        ]
-      }
-    ),
-    /* @__PURE__ */ e.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: l.map((w, N) => /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between rounded bg-muted p-1.5 text-sm", children: [
-      /* @__PURE__ */ e.jsxs("div", { className: "mr-2 flex flex-col", children: [
-        /* @__PURE__ */ e.jsx("span", { className: "truncate font-semibold", children: w.key }),
-        /* @__PURE__ */ e.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: w.value.toString() })
-      ] }),
-      /* @__PURE__ */ e.jsxs("div", { className: "flex-shrink-0", children: [
-        /* @__PURE__ */ e.jsxs(P, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => L(N), children: [
-          /* @__PURE__ */ e.jsx(Mr, { className: "h-3 w-3" }),
-          /* @__PURE__ */ e.jsx("span", { className: "sr-only", children: "Edit attribute" })
-        ] }),
-        /* @__PURE__ */ e.jsxs(P, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(N), children: [
-          /* @__PURE__ */ e.jsx(Lr, { className: "h-3 w-3" }),
-          /* @__PURE__ */ e.jsx("span", { className: "sr-only", children: "Remove attribute" })
-        ] })
-      ] })
-    ] }, N)) })
-  ] });
-}), gs = ie.memo(() => {
-  const r = M(), [a, t] = j([]), [l] = le(), o = rt(), n = st(), c = `${g(l, "0.prop")}_attrs`;
-  ie.useEffect(() => {
-    const s = R(g(r, c), (d, u) => ({ key: u, value: d }));
-    b(s) ? t([]) : t(s);
-  }, [g(r, c)]);
-  const p = ie.useCallback(
-    (s = []) => {
-      const d = {};
-      ke(s, (u) => {
-        b(u.key) || Ue(d, u.key, u.value);
-      }), n([g(r, "_id")], { [c]: d });
-    },
-    [r, o, c]
-  );
-  return /* @__PURE__ */ e.jsx("div", { className: "mb-20 flex min-h-max flex-col gap-y-2 overflow-y-auto", children: /* @__PURE__ */ e.jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(us, { preloadedAttributes: a, onAttributesChange: p }) }) }) });
-}), _ = ["px", "%", "em", "rem", "ch", "vh", "vw"], xs = {
-  heading: "flex.heading",
-  items: [
-    { type: "arbitrary", label: "flex.basis", units: _, property: "flexBasis" },
-    { type: "range", label: "flex.order", property: "order" },
-    { type: "dropdown", label: "flex.flex", property: "flexGrowShrink" },
-    { type: "dropdown", label: "flex.grow", property: "flexGrow" },
-    { type: "dropdown", label: "flex.shrink", property: "flexShrink" }
-  ]
-}, ys = {
-  heading: "grid.heading",
-  items: [
-    { type: "range", label: "grid.col_span", property: "gridColSpan" },
-    { type: "range", label: "grid.col_start", property: "gridColStart" },
-    { type: "range", label: "grid.col_end", property: "gridColEnd" },
-    { type: "range", label: "grid.row_span", property: "gridRowSpan" },
-    { type: "range", label: "grid.row_start", property: "gridRowStart" },
-    { type: "range", label: "grid.row_end", property: "gridRowEnd" },
-    { type: "range", label: "grid.order", property: "order" }
-  ]
-}, hs = [
-  {
-    heading: "Styles",
-    items: [
-      { component: ut },
-      { type: "arbitrary", label: "layout.width", units: _.concat("auto"), property: "width" },
-      { type: "arbitrary", label: "layout.height", units: _.concat("auto"), property: "height" },
-      {
-        styleType: "multiple",
-        label: "layout.margin",
-        negative: !0,
-        units: [..._, "auto"],
-        options: [
-          { key: "margin", label: "layout.margin_all" },
-          { key: "marginX", label: "layout.margin_lr" },
-          { key: "marginY", label: "layout.margin_tb" },
-          { key: "marginTop", label: "layout.margin_top" },
-          { key: "marginRight", label: "layout.margin_right" },
-          { key: "marginBottom", label: "layout.margin_bottom" },
-          { key: "marginLeft", label: "layout.margin_left" }
-        ]
-      },
-      {
-        styleType: "multiple",
-        label: "layout.padding",
-        options: [
-          { key: "padding", label: "layout.padding_all" },
-          { key: "paddingX", label: "layout.padding_lr" },
-          { key: "paddingY", label: "layout.padding_tb" },
-          { key: "paddingTop", label: "layout.padding_top" },
-          { key: "paddingRight", label: "layout.padding_right" },
-          { key: "paddingBottom", label: "layout.padding_bottom" },
-          { key: "paddingLeft", label: "layout.padding_left" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "Typography",
-        items: [
-          { type: "dropdown", property: "textAlign", label: "typography.align" },
-          { type: "dropdown", property: "fontFamily", label: "typography.font" },
-          { type: "arbitrary", property: "fontSize", label: "typography.size", units: _ },
-          { type: "arbitrary", property: "lineHeight", label: "typography.height", units: _.concat("-") },
-          { type: "range", property: "fontWeight", label: "typography.weight" },
-          { type: "color", property: "textColor", label: "typography.color" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "Background",
-        items: [
-          { type: "color", label: "background.bgcolor", property: "backgroundColor" },
-          { type: "dropdown", label: "background.attachment", property: "backgroundAttachment" },
-          { type: "dropdown", label: "background.clipping", property: "backgroundClip" },
-          { type: "dropdown", label: "background.origin", property: "backgroundOrigin" },
-          { type: "dropdown", label: "background.position", property: "backgroundPosition" },
-          { type: "dropdown", label: "background.repeat", property: "backgroundRepeat" },
-          { type: "dropdown", label: "background.size", property: "backgroundSize" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "Attributes",
-    items: [{ component: gs }]
-  }
-], $o = [
-  {
-    heading: "layout.heading",
-    items: [
-      { type: "arbitrary", label: "layout.width", units: _.concat("auto"), property: "width" },
-      { type: "arbitrary", label: "layout.height", units: _.concat("auto"), property: "height" },
-      {
-        styleType: "multiple",
-        label: "layout.margin",
-        negative: !0,
-        units: [..._, "auto"],
-        options: [
-          { key: "margin", label: "layout.margin_all" },
-          { key: "marginX", label: "layout.margin_lr" },
-          { key: "marginY", label: "layout.margin_tb" },
-          { key: "marginTop", label: "layout.margin_top" },
-          { key: "marginRight", label: "layout.margin_right" },
-          { key: "marginBottom", label: "layout.margin_bottom" },
-          { key: "marginLeft", label: "layout.margin_left" }
-        ]
-      },
-      {
-        styleType: "multiple",
-        label: "layout.padding",
-        options: [
-          { key: "padding", label: "layout.padding_all" },
-          { key: "paddingX", label: "layout.padding_lr" },
-          { key: "paddingY", label: "layout.padding_tb" },
-          { key: "paddingTop", label: "layout.padding_top" },
-          { key: "paddingRight", label: "layout.padding_right" },
-          { key: "paddingBottom", label: "layout.padding_bottom" },
-          { key: "paddingLeft", label: "layout.padding_left" }
-        ]
-      },
-      {
-        styleType: "multiple",
-        label: "layout.space_bt",
-        options: [
-          { key: "spaceX", label: "layout.space_lr" },
-          { key: "spaceY", label: "layout.space_tb" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "size.heading",
-    items: [
-      {
-        styleType: "accordion",
-        heading: "size.min_width_height",
-        items: [
-          { type: "arbitrary", label: "size.min_width", units: _.concat("auto"), property: "minWidth" },
-          { type: "arbitrary", label: "size.min_height", units: _.concat("auto"), property: "minHeight" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "size.max_width_height",
-        items: [
-          { type: "arbitrary", label: "size.max_width", units: _.concat("auto"), property: "maxWidth" },
-          { type: "arbitrary", label: "size.max_height", units: _.concat("auto"), property: "maxHeight" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "size.object_options_aspect_ratio",
-        items: [
-          { type: "dropdown", label: "size.aspect", property: "aspectRatio" },
-          { type: "dropdown", label: "size.fit", property: "objectFit" },
-          { type: "dropdown", label: "size.position", property: "objectPosition" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "display.heading",
-    items: [
-      { type: "dropdown", label: "display.display", property: "display", units: _ },
-      {
-        styleType: "accordion",
-        heading: "display.flex_options",
-        items: [
-          { type: "dropdown", label: "display.flex_direction", property: "flexDirection" },
-          { type: "dropdown", label: "display.flex_wrap", property: "flexWrap" },
-          { type: "dropdown", label: "display.justify_content", property: "justifyContent" },
-          { type: "dropdown", label: "display.align_content", property: "alignContent" },
-          { type: "dropdown", label: "display.align_items", property: "alignItems" },
-          {
-            styleType: "multiple",
-            label: "display.gap",
-            options: [
-              { key: "gap", label: "display.gap_all" },
-              { key: "gapX", label: "display.gap_lr" },
-              { key: "gapY", label: "display.gap_tb" }
-            ]
-          }
-        ],
-        conditions: { display: "flex" }
-      },
-      {
-        styleType: "accordion",
-        heading: "display.grid_options",
-        items: [
-          { type: "range", label: "display.grid_columns", property: "gridColumns" },
-          { type: "range", label: "display.grid_rows", property: "gridRows" },
-          { type: "dropdown", label: "display.grid_auto_flow", property: "gridAutoFlow" },
-          { type: "dropdown", label: "display.grid_auto_cols", property: "gridAutoColumns" },
-          { type: "dropdown", label: "display.grid_auto_rows", property: "gridAutoRows" },
-          { type: "dropdown", label: "display.justify_content", property: "justifyContent" },
-          { type: "dropdown", label: "display.align_content", property: "alignContent" },
-          { type: "dropdown", label: "display.align_items", property: "alignItems" },
-          {
-            styleType: "multiple",
-            label: "display.gap",
-            units: ["px", "rem"],
-            options: [
-              { key: "gap", label: "display.gap_all" },
-              { key: "gapX", label: "display.gap_lr" },
-              { key: "gapY", label: "display.gap_tb" }
-            ]
-          }
-        ],
-        conditions: { display: "grid" }
-      },
-      {
-        styleType: "accordion",
-        heading: "display.visibility_opacity",
-        items: [
-          { type: "dropdown", label: "display.visibility", property: "visibility", units: _ },
-          { type: "arbitrary", label: "display.opacity", property: "opacity", units: ["-"] }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "position.heading",
-    items: [
-      { type: "icons", label: "position.position", property: "position" },
-      {
-        styleType: "accordion",
-        heading: "position.options",
-        items: [
-          {
-            styleType: "multiple",
-            label: "position.direction",
-            options: [
-              { key: "top", label: "position.top" },
-              { key: "right", label: "position.right" },
-              { key: "bottom", label: "position.bottom" },
-              { key: "left", label: "position.left" }
-            ]
-          },
-          {
-            styleType: "multiple",
-            label: "position.inset",
-            options: [
-              { key: "inset", label: "position.all" },
-              { key: "insetX", label: "position.lr" },
-              { key: "insetY", label: "position.tb" }
-            ]
-          },
-          { type: "arbitrary", label: "position.z_index", units: ["-", "auto"], property: "zIndex" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "position.float_clear",
-        items: [
-          { type: "icons", label: "position.float", property: "float" },
-          { type: "dropdown", label: "position.clear", property: "clear" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "position.overflow_overscroll",
-        items: [
-          {
-            styleType: "multiple",
-            type: "dropdown",
-            label: "position.overflow",
-            options: [
-              { key: "overflow", label: "position.all" },
-              { key: "overflowX", label: "position.lr" },
-              { key: "overflowY", label: "position.tb" }
-            ]
-          },
-          {
-            styleType: "multiple",
-            type: "dropdown",
-            label: "position.overscroll",
-            options: [
-              { key: "overscroll", label: "position.all" },
-              { key: "overscrollX", label: "position.lr" },
-              { key: "overscrollY", label: "position.tb" }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "typography.heading",
-    items: [
-      { type: "dropdown", property: "fontFamily", label: "typography.font" },
-      { type: "arbitrary", property: "fontSize", label: "typography.size", units: _ },
-      { type: "arbitrary", property: "lineHeight", label: "typography.height", units: _.concat("-") },
-      { type: "range", property: "fontWeight", label: "typography.weight" },
-      { type: "color", property: "textColor", label: "typography.color" },
-      {
-        styleType: "accordion",
-        heading: "typography.alignments",
-        items: [
-          { type: "dropdown", property: "textAlign", label: "typography.align" },
-          { type: "dropdown", property: "verticalAlign", label: "typography.valign" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "typography.spacing_decoration_more",
-        items: [
-          { type: "dropdown", property: "letterSpacing", label: "typography.spacing" },
-          { type: "dropdown", property: "textDecoration", label: "typography.decoration" },
-          { type: "range", property: "textDecorationThickness", label: "typography.thickness" },
-          { type: "dropdown", property: "textTransform", label: "typography.transform" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "typography.whitespace_breaks",
-        items: [
-          { type: "dropdown", property: "whitespace", label: "typography.whitespace" },
-          { type: "dropdown", property: "wordbreak", label: "typography.wordbreak" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "background.heading",
-    items: [
-      { type: "color", label: "background.bgcolor", property: "backgroundColor" },
-      {
-        styleType: "accordion",
-        heading: "background.position_size_more",
-        items: [
-          { type: "dropdown", label: "background.attachment", property: "backgroundAttachment" },
-          { type: "dropdown", label: "background.clipping", property: "backgroundClip" },
-          { type: "dropdown", label: "background.origin", property: "backgroundOrigin" },
-          { type: "dropdown", label: "background.position", property: "backgroundPosition" },
-          { type: "dropdown", label: "background.repeat", property: "backgroundRepeat" },
-          { type: "dropdown", label: "background.size", property: "backgroundSize" }
-        ]
-      },
-      { type: "dropdown", label: "background.gradient", property: "backgroundGradient" },
-      {
-        styleType: "accordion",
-        heading: "background.gradient_colors",
-        items: [
-          { type: "color", label: "background.from_color", property: "fromColor" },
-          { type: "color", label: "background.via_color", property: "viaColor" },
-          { type: "color", label: "background.to_color", property: "toColor" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "border.heading",
-    items: [
-      {
-        styleType: "multiple",
-        type: "dropdown",
-        label: "border.width",
-        options: [
-          { key: "border", label: "border.all" },
-          { key: "borderX", label: "border.lr" },
-          { key: "borderY", label: "border.tb" },
-          { key: "borderTop", label: "border.top" },
-          { key: "borderRight", label: "border.right" },
-          { key: "borderBottom", label: "border.bottom" },
-          { key: "borderLeft", label: "border.left" }
-        ]
-      },
-      {
-        styleType: "multiple",
-        type: "dropdown",
-        label: "border.corners",
-        options: [
-          { key: "borderRadius", label: "border.all" },
-          { key: "borderRadiusTop", label: "border.top" },
-          { key: "borderRadiusRight", label: "border.right" },
-          { key: "borderRadiusBottom", label: "border.bottom" },
-          { key: "borderRadiusLeft", label: "border.left" },
-          { key: "borderRadiusTopLeft", label: "border.top_left" },
-          { key: "borderRadiusTopRight", label: "border.top_right" },
-          { key: "borderRadiusBottomRight", label: "border.bottom_right" },
-          { key: "borderRadiusBottomLeft", label: "border.bottom_left" }
-        ]
-      },
-      { type: "color", label: "border.color", property: "borderColor" },
-      { type: "dropdown", label: "border.style", property: "borderStyle" },
-      {
-        styleType: "accordion",
-        heading: "border.divide_options",
-        items: [
-          {
-            styleType: "multiple",
-            type: "range",
-            label: "border.width",
-            options: [
-              { key: "divideXWidth", label: "border.lr" },
-              { key: "divideYWidth", label: "border.tb" }
-            ]
-          },
-          { type: "color", label: "border.divide_color", property: "divideColor" },
-          { type: "dropdown", label: "border.divide_style", property: "divideStyle" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "border.outline_styling",
-        items: [
-          { type: "range", label: "border.outline_width", property: "outlineWidth" },
-          { type: "range", label: "border.outline_offset", property: "outlineOffset" },
-          { type: "dropdown", label: "border.outline_style", property: "outlineStyle" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "border.ring_options",
-        items: [
-          { type: "range", label: "border.ring_width", property: "ringWidth" },
-          { type: "color", label: "border.ring_color", property: "ringColor" },
-          { type: "range", label: "border.ring_offset_width", property: "ringOffsetWidth" },
-          { type: "color", label: "border.ring_offset_color", property: "ringOffsetColor" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "effect.heading",
-    items: [
-      { type: "range", label: "effect.shadow", property: "boxShadow" },
-      { type: "color", label: "effect.color", property: "boxShadowColor" },
-      { type: "dropdown", label: "effect.cursor", property: "cursor" },
-      {
-        styleType: "accordion",
-        heading: "effect.blend_cursor",
-        items: [
-          { type: "dropdown", label: "effect.mix_blend", property: "mixBlendMode" },
-          { type: "dropdown", label: "effect.bg_blend", property: "bgBlendMode" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "effect.transform",
-        items: [
-          { type: "dropdown", label: "effect.origin", property: "transformOrigin" },
-          {
-            styleType: "multiple",
-            label: "effect.scale",
-            units: ["-"],
-            options: [
-              { key: "scale", label: "effect.all" },
-              { key: "scaleX", label: "effect.lr" },
-              { key: "scaleY", label: "effect.tb" }
-            ]
-          },
-          {
-            styleType: "multiple",
-            label: "effect.skew",
-            units: ["deg"],
-            options: [
-              { key: "skewX", label: "effect.lr" },
-              { key: "skewY", label: "effect.tb" }
-            ]
-          },
-          {
-            styleType: "multiple",
-            label: "effect.translate",
-            negative: !0,
-            options: [
-              { key: "translateX", label: "effect.lr" },
-              { key: "translateY", label: "effect.tb" }
-            ]
-          },
-          { type: "arbitrary", units: ["deg"], negative: !0, label: "effect.rotate", property: "rotate" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "effect.animation",
-        items: [
-          { type: "dropdown", label: "effect.animation", property: "animation" },
-          { type: "dropdown", label: "effect.transition", property: "transition" },
-          { type: "dropdown", label: "effect.easing", property: "transitionEase" },
-          { type: "arbitrary", units: ["ms"], label: "effect.duration", property: "duration" },
-          { type: "arbitrary", units: ["ms"], label: "effect.delay", property: "delay" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "classes.heading",
-    items: [{ component: ut }]
-  }
-], gt = {
-  "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: At,
-  invisible: Be,
-  // display
-  hidden: Be,
-  gap: F,
-  gapX: H,
-  gapY: D,
-  spaceX: H,
-  spaceY: D,
-  overscroll: F,
-  overscrollX: H,
-  overscrollY: D,
-  overflow: F,
-  overflowX: H,
-  overflowY: D,
-  top: J,
-  right: Q,
-  bottom: ee,
-  left: te,
-  inset: F,
-  insetX: H,
-  insetY: D,
-  border: F,
-  borderX: H,
-  borderY: D,
-  borderTop: J,
-  borderRight: Q,
-  borderBottom: ee,
-  borderLeft: te,
-  borderRadius: F,
-  borderRadiusX: H,
-  borderRadiusY: D,
-  borderRadiusTop: J,
-  borderRadiusRight: Q,
-  borderRadiusBottom: ee,
-  borderRadiusLeft: te,
-  borderRadiusTopLeft: It,
-  borderRadiusTopRight: Pt,
-  borderRadiusBottomRight: $t,
-  borderRadiusBottomLeft: Et,
-  divideXWidth: H,
-  divideYWidth: D,
-  scale: F,
-  scaleX: H,
-  scaleY: D,
-  skewX: H,
-  skewY: D,
-  translateX: H,
-  translateY: D,
-  // padding
-  padding: F,
-  paddingX: H,
-  paddingY: D,
-  paddingTop: J,
-  paddingRight: Q,
-  paddingBottom: ee,
-  paddingLeft: te,
-  // margin
-  margin: F,
-  marginX: H,
-  marginY: D,
-  marginTop: J,
-  marginRight: Q,
-  marginBottom: ee,
-  marginLeft: te,
-  // text-align
-  textLeft: Mt,
-  textCenter: Lt,
-  textRight: Ot,
-  textJustify: zt,
-  // font style
-  italic: Ft,
-  // "not-italic": "",
-  // decoration
-  underline: Xt,
-  overline: Yt,
-  // transform
-  uppercase: Zt,
-  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",
-      {
-        opacity: "0.6",
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M2 2H14V14H2V2ZM1 1H15V15H1V1Z",
-        fill: "currentColor"
-      }
-    ),
-    /* @__PURE__ */ e.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7 4H4V12H7V4ZM9 4H12V12H9V4Z", fill: "currentColor" })
-  ] }),
-  // floats
-  "float-right": () => /* @__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", { d: "M8 4H16V12H8V4Z", fill: "currentColor" }),
-    /* @__PURE__ */ e.jsx(
-      "path",
-      {
-        opacity: "0.6",
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M0 4H6V6H0V4ZM0 7H6V9H0V7ZM4 10H0V12H4V10Z",
-        fill: "currentColor"
-      }
-    )
-  ] }),
-  "float-left": () => /* @__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", { d: "M0 4H8V12H0V4Z", fill: "currentColor" }),
-    /* @__PURE__ */ e.jsx(
-      "path",
-      {
-        opacity: "0.6",
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M10 4H16V6H10V4ZM10 7H16V9H10V7ZM14 10H10V12H14V10Z",
-        fill: "currentColor"
-      }
-    )
-  ] }),
-  "float-none": qe,
-  // position
-  fixed: () => /* @__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",
-      {
-        opacity: "0.6",
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M15 2H14V4H13V5H14V6H15V2ZM10 5V4H9V2H1V8H2V5H10ZM7 4V3H5V4H7ZM4 4V3H2V4H4ZM1 13H7V14H1V13Z",
-        fill: "currentColor"
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M11 2H10V3H11V6H12V3H13V2H11ZM2 9H1V12H2V11H7V10H2V9ZM15 7H8V14H15V7Z",
-        fill: "currentColor"
-      }
-    )
-  ] }),
-  absolute: () => /* @__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",
-      {
-        opacity: "0.6",
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M14 2H15V6H14V2ZM9 3V2H1V8H2V3H9ZM7 13H1V14H7V13Z",
-        fill: "currentColor"
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M11 2H10V3H11V6H12V3H13V2H11ZM2 9H1V12H2V11H7V10H2V9ZM15 7H8V14H15V7Z",
-        fill: "currentColor"
-      }
-    )
-  ] }),
-  relative: () => /* @__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: "M11 2H9V3H11V6H12V3H14V2H11ZM2 8H1V13H2V11H7V10H2V8ZM15 7H8V14H15V7Z",
-      fill: "currentColor"
-    }
-  ) }),
-  sticky: () => /* @__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",
-      {
-        d: "M12.9998 7C13.6558 7 14.2937 6.78498 14.8158 6.38787C15.338 5.99076 15.7156 5.43345 15.8908 4.80128C16.066 4.16912 16.0292 3.49694 15.7859 2.8877C15.5427 2.27846 15.1065 1.76573 14.5441 1.42804C13.9817 1.09034 13.3241 0.946293 12.672 1.01795C12.02 1.08961 11.4094 1.37303 10.9337 1.8248C10.4581 2.27658 10.1436 2.8718 10.0385 3.51932C9.93341 4.16685 10.0434 4.83097 10.3518 5.41L6.88176 8.88C6.80034 8.96122 6.73572 9.05769 6.69158 9.16388C6.64744 9.27008 6.62465 9.38393 6.62451 9.49894C6.62437 9.61395 6.64689 9.72785 6.69077 9.83416C6.73465 9.94046 6.79904 10.0371 6.88026 10.1185C6.96149 10.1999 7.05795 10.2645 7.16415 10.3087C7.27035 10.3528 7.3842 10.3756 7.4992 10.3758C7.61421 10.3759 7.72812 10.3534 7.83442 10.3095C7.94072 10.2656 8.03734 10.2012 8.11876 10.12L11.5888 6.648C12.0088 6.873 12.4888 7 12.9988 7H12.9998Z",
-        fill: "currentColor"
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      "path",
-      {
-        opacity: "0.6",
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M9.535 2H1V14H15V7.465C14.69 7.645 14.355 7.783 14 7.875V13H2V5H9.126C8.86504 3.98486 9.01223 2.90789 9.536 2H9.535ZM7 3V4H5V3H7ZM4 3V4H2V3H4Z",
-        fill: "currentColor"
-      }
-    )
-  ] }),
-  static: Wt
-}, ae = We({ canReset: !1, canChange: !0 }), ms = ({ children: r, canReset: a = !1, canChange: t = !0 }) => (
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ e.jsx(ae.Provider, { value: { canReset: a, canChange: t }, children: r })
-), xt = ({ label: r, property: a, onChange: t }) => {
-  const l = T(() => g(ge, `${a}.classes`, [""]), [a]), o = ne(a), n = T(() => g(o, "cls", ""), [o]), { canChange: c } = se(ae), p = /\[.*\]/g.test(n);
-  return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded" : "grow", children: p ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(it, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
-    /* @__PURE__ */ e.jsxs(U, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(K, { 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(G, { children: "Current value is using a Tailwind arbitrary value." })
-    ] })
-  ] }) : /* @__PURE__ */ e.jsx(
-    Ce,
-    {
-      rounded: r,
-      onChange: (s) => t(s, a),
-      selected: n,
-      options: l,
-      disabled: !c
-    }
-  ) });
-};
-function Ce({ selected: r, onChange: a, rounded: t = !1, options: l, disabled: o = !1 }) {
-  const n = r.replace(/.*:/g, "").trim(), { undo: c, redo: p } = Nr();
-  return /* @__PURE__ */ e.jsxs(
-    "select",
-    {
-      disabled: !l.length || o,
-      className: `${t ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (s) => a(s.target.value),
-      onKeyDown: (s) => {
-        s.ctrlKey && (s.key === "z" && c(), s.key === "y" && p());
-      },
-      value: n,
-      children: [
-        /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        $.Children.toArray(
-          l.map((s) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: s, children: s }))
-        )
-      ]
-    }
-  );
-}
-const bs = ({ property: r, onChange: a }) => {
-  const { canReset: t, canChange: l } = se(ae), o = ne(r), n = T(() => g(o, "cls", ""), [o]), c = T(() => g(ge, `${r}.classes`, [""]), [r]), p = c.indexOf(n) > -1 ? c.indexOf(n) : 0, s = /\[.*\]/g.test(n);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: s ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: n }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(
-      "button",
-      {
-        type: "button",
-        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 && (!t || p - 1 < 0),
-        onClick: () => a(He(c, p - 1), r),
-        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Ut,
-          {
-            className: !l && (!t || p - 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(xt, { label: !1, property: r, onChange: a }) }),
-    /* @__PURE__ */ e.jsx(
-      "button",
-      {
-        type: "button",
-        className: "w-2/12 rounded-tr rounded-br bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !l && (!t || p + 1 >= c.length),
-        onClick: () => a(He(c, p + 1), r),
-        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Ge,
-          {
-            className: !l && (!t || p + 1 >= c.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
-          }
-        ) })
-      }
-    )
-  ] }) });
-}, fs = ({ property: r, onChange: a }) => {
-  const t = T(() => g(ge, `${r}.classes`, [""]), [r]), { canChange: l } = se(ae), o = ne(r), n = T(() => g(o, "cls", ""), [o]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: R(t, (c) => /* @__PURE__ */ e.jsxs(U, { children: [
-    /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-      "button",
-      {
-        type: "button",
-        disabled: !l,
-        onClick: () => a(c, r),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === c ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: $.createElement(g(gt, c, Je))
-      }
-    ) }),
-    /* @__PURE__ */ e.jsx(G, { children: Y(re(c)) })
-  ] })) });
-}, vs = {
-  backgroundColor: "bg",
-  textColor: "text",
-  borderColor: "border",
-  boxShadowColor: "shadow",
-  outlineColor: "outline",
-  divideColor: "divide",
-  fromColor: "from",
-  viaColor: "via",
-  toColor: "to",
-  ringColor: "ring",
-  ringOffsetColor: "ring-offset"
-}, ws = ({ property: r, onChange: a }) => {
-  const t = ne(r), l = T(() => g(t, "cls", ""), [t]), { canChange: o } = se(ae), [n, c] = j([]), [p, s] = j({ color: "", shade: "" }), d = l.split("-"), u = g(d, "1", ""), i = g(d, "2", ""), h = B(
-    // eslint-disable-next-line no-shadow
-    (x) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (c([]), s({ color: x })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), s((v) => ({ ...v, color: x, shade: v.shade ? v.shade : "500" })));
-    },
-    [c, s]
-  );
-  I(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(u))
-      return c([]);
-    c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [u]);
-  const y = B(
-    // eslint-disable-next-line no-shadow
-    (x) => {
-      s({ color: u, shade: x });
-    },
-    [u]
-  );
-  return I(() => {
-    s({ color: "", shade: "" });
-  }, [t]), I(() => {
-    const v = `${g(vs, r, "")}-${p.color}${p.shade ? `-${p.shade}` : ""}`;
-    v.match(new RegExp(g(ge, `${r}.regExp`, ""))) && a(v, r);
-  }, [p, a, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
-      Ce,
-      {
-        disabled: !o,
-        rounded: !0,
-        selected: u,
-        onChange: h,
-        options: [
-          "current",
-          "transparent",
-          "primary",
-          "secondary",
-          "black",
-          "white",
-          "slate",
-          "gray",
-          "zinc",
-          "neutral",
-          "stone",
-          "red",
-          "orange",
-          "amber",
-          "yellow",
-          "lime",
-          "green",
-          "emerald",
-          "teal",
-          "cyan",
-          "sky",
-          "blue",
-          "indigo",
-          "violet",
-          "purple",
-          "fuchsia",
-          "pink",
-          "rose"
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ e.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ e.jsx(Ce, { rounded: !0, selected: i, disabled: !u || !o, onChange: y, options: n }) })
-  ] });
-}, Xe = (r, a) => {
-  r = r.toLowerCase();
-  let t = r.trim().replace(/ |\+/g, "");
-  if ((t === "auto" || t === "none") && a.includes(t))
-    return { value: "", unit: t };
-  const l = a.length ? new RegExp(a.join("|"), "g") : /XXXXXX/g;
-  t = t.replace(l, "");
-  const o = r.match(l), n = o && o.length > 1, c = !b(t) && Number.isNaN(Number(t));
-  return n || c ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: t, unit: o ? o[0] : "" };
-};
-const js = (r) => {
-  const a = r.startsWith("-") ? "-" : "", t = r.split("-").pop();
-  if (["auto", "none"].includes(t))
-    return { value: "", unit: t };
-  if (t === "px")
-    return { value: "1", unit: "px" };
-  if (t === "screen")
-    return { value: "100", unit: r.indexOf("w-") !== -1 ? "vw" : "vh" };
-  if (t === "full")
-    return { value: "100", unit: "%" };
-  if (X(r, "skew-"))
-    return { value: `${a}${t}`, unit: "deg" };
-  if (X(r, "rotate-"))
-    return { value: `${a}${t}`, unit: "deg" };
-  if (X(r, "opacity-"))
-    return { value: `${t / 100}`, unit: "-" };
-  if (X(r, "duration-") || X(r, "delay-"))
-    return { value: `${t}`, unit: "ms" };
-  if (X(r, "translate-") && !t.includes("/"))
-    return { value: `${a}${`${t / 4}`}`, unit: "rem" };
-  if (X(r, "scale-"))
-    return { value: `${a}${`${t / 100}`}`, unit: "-" };
-  if (q(r, "border")) {
-    const l = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (l)
-      return { value: l[0].split("-").pop(), unit: "px" };
-    if (r.match(/border-?(x|y|t|r|b|l)?/g))
-      return { value: "1", unit: "px" };
-  }
-  if (q(r, "max-w-")) {
-    if (r === "max-w-screen-sm")
-      return { value: "640", unit: "px" };
-    if (r === "max-w-screen-md")
-      return { value: "768", unit: "px" };
-    if (r === "max-w-screen-lg")
-      return { value: "1024", unit: "px" };
-    if (r === "max-w-screen-xl")
-      return { value: "1280", unit: "px" };
-    if (r === "max-w-screen-2xl")
-      return { value: "1536", unit: "px" };
-    if (t === "xs")
-      return { value: "320", unit: "px" };
-    if (t === "sm")
-      return { value: "384", unit: "px" };
-    if (t === "md")
-      return { value: "448", unit: "px" };
-    if (t === "lg")
-      return { value: "512", unit: "px" };
-    if (t === "xl")
-      return { value: "576", unit: "px" };
-    if (t === "2xl")
-      return { value: "672", unit: "px" };
-    if (t === "3xl")
-      return { value: "768", unit: "px" };
-    if (t === "4xl")
-      return { value: "896", unit: "px" };
-    if (t === "5xl")
-      return { value: "1024", unit: "px" };
-    if (t === "6xl")
-      return { value: "1152", unit: "px" };
-    if (t === "7xl")
-      return { value: "1280", unit: "px" };
-    if (t === "prose")
-      return { value: "65", unit: "ch" };
-  }
-  if (q(r, "text-")) {
-    if (t === "xs")
-      return { value: "12", unit: "px" };
-    if (t === "sm")
-      return { value: "14", unit: "px" };
-    if (t === "base")
-      return { value: "16", unit: "px" };
-    if (t === "lg")
-      return { value: "18", unit: "px" };
-    if (t === "xl")
-      return { value: "20", unit: "px" };
-    if (t === "2xl")
-      return { value: "24", unit: "px" };
-    if (t === "3xl")
-      return { value: "30", unit: "px" };
-    if (t === "4xl")
-      return { value: "36", unit: "px" };
-    if (t === "5xl")
-      return { value: "48", unit: "px" };
-    if (t === "6xl")
-      return { value: "60", unit: "px" };
-    if (t === "7xl")
-      return { value: "72", unit: "px" };
-    if (t === "8xl")
-      return { value: "96", unit: "px" };
-    if (t === "9xl")
-      return { value: "128", unit: "px" };
-  }
-  if (q(r, "leading-")) {
-    if (t === "none")
-      return { value: "1", unit: "-" };
-    if (t === "tight")
-      return { value: "1.25", unit: "-" };
-    if (t === "snug")
-      return { value: "1.375", unit: "-" };
-    if (t === "normal")
-      return { value: "1.5", unit: "-" };
-    if (t === "relaxed")
-      return { value: "1.625", unit: "-" };
-    if (t === "loose")
-      return { value: "2", unit: "-" };
-  }
-  if (q(r, "tracking-")) {
-    if (t === "tighter")
-      return { value: "-0.05", unit: "em" };
-    if (t === "tight")
-      return { value: "-0.025", unit: "em" };
-    if (t === "normal")
-      return { value: "0", unit: "em" };
-    if (t === "wide")
-      return { value: "0.025", unit: "em" };
-    if (t === "wider")
-      return { value: "0.05", unit: "em" };
-    if (t === "widest")
-      return { value: "0.1", unit: "em" };
-  }
-  if (["max", "min", "fit"].includes(t))
-    return { value: r, unit: "class" };
-  if (t.includes("/")) {
-    const [l, o] = R(t.split("/"), (n) => parseInt(n, 10));
-    return { value: a + (l / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
-  }
-  return Tt(parseFloat(t)) ? { value: `${a + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
-};
-const Cs = (r) => {
-  if (b(r))
-    return { value: "", unit: "" };
-  const a = r.match(/\[.*\]/g);
-  if (a === null)
-    return ks(r);
-  const t = g(a, "0", "").replace(/\[|\]/g, ""), l = r.startsWith("-") ? "-" : "", o = oe(t.match(/\d+.\d+|\d+/g));
-  return { value: `${l}${o}`, unit: t.replace(o, "") };
-}, ks = (r) => b(r) ? { value: "", unit: "" } : js(r), yt = $.createContext({
-  setDragData: () => {
-  }
-}), Ns = ({
-  unit: r,
-  currentValue: a,
-  onDrag: t,
-  onDragEnd: l,
-  onDragStart: o,
-  negative: n,
-  cssProperty: c
-}) => {
-  const { setDragData: p } = se(yt);
-  return /* @__PURE__ */ e.jsx(
-    "button",
-    {
-      type: "button",
-      onMouseDown: (s) => {
-        const d = {
-          onDrag: t,
-          onDragEnd: l,
-          dragging: !0,
-          dragStartY: s.pageY,
-          dragStartValue: `${a}`,
-          dragUnit: r,
-          negative: n,
-          cssProperty: c
-        };
-        o(d), p(d);
-      },
-      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(Kt, {})
-    }
-  );
-}, _s = ({ onSelect: r, current: a, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((l) => /* @__PURE__ */ e.jsx(
-  P,
-  {
-    className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: a === l ? "primary" : void 0,
-    size: "sm",
-    onClick: (o) => {
-      o.stopPropagation(), r(l);
-    },
-    children: l
-  },
-  l
-)) }), Ye = 50, Ss = (r) => {
-  const [a, t] = j(!1), [l, o] = j(""), { currentClass: n, onChange: c, classPrefix: p, cssProperty: s, units: d, negative: u } = r, [i, h] = j(s != null && s.toLowerCase().includes("width") ? "%" : d[0]), [y, x] = j(!1), [v, k] = j(""), [L, A] = j(!1), [Z, w] = j(!1);
-  I(() => {
-    const { value: m, unit: f } = Cs(n);
-    if (f === "") {
-      o(m), h(s != null && s.toLowerCase().includes("width") ? "%" : oe(d));
-      return;
-    }
-    h(f), o(f === "class" || b(m) ? "" : m);
-  }, [n, s, d]);
-  const N = ce((m) => c(m), [c], Ye), C = ce((m) => c(m, !1), [c], Ye), V = B(
-    (m = !1) => {
-      const f = Xe(`${l}`, d);
-      if (g(f, "error", !1)) {
-        x(!0);
-        return;
-      }
-      const S = g(f, "unit") !== "" ? g(f, "unit") : i;
-      if (S === "auto" || S === "none") {
-        N(`${p}${S}`);
-        return;
-      }
-      if (g(f, "value") === "")
-        return;
-      const z = `${g(f, "value", "").startsWith("-") ? "-" : ""}${p}[${g(f, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
-      m ? C(z) : N(z);
-    },
-    [N, C, l, i, p, d]
-  ), W = B(
-    (m) => {
-      const f = Xe(`${l}`, d);
-      if (g(f, "error", !1)) {
-        x(!0);
-        return;
-      }
-      if (m === "auto" || m === "none") {
-        N(`${p}${m}`);
-        return;
-      }
-      if (g(f, "value") === "")
-        return;
-      const S = g(f, "unit") !== "" ? g(f, "unit") : m, z = `${g(f, "value", "").startsWith("-") ? "-" : ""}${p}[${g(f, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
-      N(z);
-    },
-    [N, l, p, d]
-  );
-  return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: i === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: n }),
-    /* @__PURE__ */ e.jsxs(U, { children: [
-      /* @__PURE__ */ e.jsx(K, { 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(G, { children: "Current value is using a Tailwind preset class." })
-    ] })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${L ? "z-auto" : ""}`, children: [
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(i) !== -1 ? null : /* @__PURE__ */ e.jsx(
-        "input",
-        {
-          readOnly: i === "class",
-          onKeyPress: (m) => {
-            m.key === "Enter" && V();
-          },
-          onKeyDown: (m) => {
-            if (m.keyCode !== 38 && m.keyCode !== 40)
-              return;
-            m.preventDefault(), w(!0);
-            const f = Rt(m.target.value);
-            let S = Ke(f) ? 0 : f;
-            m.keyCode === 38 && (S += 1), m.keyCode === 40 && (S -= 1);
-            const O = `${S}`, mt = `${O.startsWith("-") ? "-" : ""}${p}[${O.replace("-", "")}${i === "-" ? "" : i}]`;
-            C(mt);
-          },
-          onKeyUp: (m) => {
-            Z && (m.preventDefault(), w(!1));
-          },
-          onBlur: () => V(),
-          onChange: (m) => {
-            x(!1), o(m.target.value);
-          },
-          onClick: (m) => {
-            var f;
-            (f = m == null ? void 0 : m.target) == null || f.select(), t(!1);
-          },
-          value: L ? v : l,
-          className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
-            " ",
-            y ? "border-red-500 text-red-500" : "border-foreground/20"
-          )
-        }
-      ),
-      /* @__PURE__ */ e.jsxs(U, { open: a, delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => t(!a),
-            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 ${d.length === 1 ? "px-2 font-semibold" : ""}`, children: i }),
-              d.length > 1 ? /* @__PURE__ */ e.jsx(Gt, {}) : null
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ e.jsx(_r, { children: /* @__PURE__ */ e.jsx(G, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          _s,
-          {
-            units: d,
-            current: i,
-            onSelect: (m) => {
-              t(!1), h(m), W(m);
-            }
-          }
-        ) }) })
-      ] })
-    ] }),
-    ["none", "auto"].indexOf(i) !== -1 || L ? null : /* @__PURE__ */ e.jsx(
-      Ns,
-      {
-        onDragStart: () => A(!0),
-        onDragEnd: (m) => {
-          if (k(() => ""), A(!1), b(m))
-            return;
-          const f = `${m}`, O = `${f.startsWith("-") ? "-" : ""}${p}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
-          N(O);
-        },
-        onDrag: (m) => {
-          if (b(m))
-            return;
-          k(m);
-          const f = `${m}`, O = `${f.startsWith("-") ? "-" : ""}${p}[${f.replace("-", "")}${i === "-" ? "" : i}]`;
-          C(O);
-        },
-        currentValue: l,
-        unit: i,
-        negative: u,
-        cssProperty: s
-      }
-    )
-  ] }) }) });
-}, ne = (r) => {
-  const a = ue();
-  return Vt(a, { property: r });
-}, Ts = (r, a) => {
-  const t = {
-    xs: 0,
-    sm: 1,
-    md: 2,
-    lg: 3,
-    xl: 4,
-    "2xl": 5
-  };
-  return t[g(r, "mq", "xs")] <= t[a];
-}, Rs = {
-  width: "w-",
-  height: "h-",
-  minWidth: "min-w-",
-  minHeight: "min-h-",
-  maxWidth: "max-w-",
-  maxHeight: "max-h-",
-  zIndex: "z-",
-  gap: "gap-",
-  gapX: "gap-x-",
-  gapY: "gap-y-",
-  margin: "m-",
-  marginX: "mx-",
-  marginY: "my-",
-  marginTop: "mt-",
-  marginBottom: "mb-",
-  marginLeft: "ml-",
-  marginRight: "mr-",
-  padding: "p-",
-  paddingX: "px-",
-  paddingY: "py-",
-  paddingTop: "pt-",
-  paddingBottom: "pb-",
-  paddingLeft: "pl-",
-  paddingRight: "pr-",
-  spaceX: "space-x-",
-  spaceY: "space-y-",
-  border: "border-",
-  borderTop: "border-t-",
-  borderBottom: "border-b-",
-  borderLeft: "border-l-",
-  borderRight: "border-r-",
-  borderX: "border-x-",
-  borderY: "border-y-",
-  borderRadius: "rounded-",
-  borderRadiusTop: "rounded-t-",
-  borderRadiusRight: "rounded-r-",
-  borderRadiusBottom: "rounded-b-",
-  borderRadiusLeft: "rounded-l-",
-  borderRadiusTopLeft: "rounded-tl-",
-  borderRadiusTopRight: "rounded-tr-",
-  borderRadiusBottomRight: "rounded-br-",
-  borderRadiusBottomLeft: "rounded-bl-",
-  fontSize: "text-",
-  lineHeight: "leading-",
-  letterSpacing: "tracking-",
-  textIndent: "indent-",
-  rotate: "rotate-",
-  duration: "duration-",
-  transitionDelay: "delay-",
-  scale: "scale-",
-  scaleX: "scale-x-",
-  scaleY: "scale-y-",
-  translateX: "translate-x-",
-  translateY: "translate-y-",
-  skewX: "skew-x-",
-  skewY: "skew-y-",
-  top: "top-",
-  bottom: "bottom-",
-  left: "left-",
-  right: "right-",
-  inset: "inset-",
-  insetX: "inset-x-",
-  insetY: "inset-y-",
-  opacity: "opacity-",
-  flexBasis: "basis-"
-}, Ze = {
-  xs: "",
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  "2xl": "1536px"
-}, Vs = (r) => `${r.toUpperCase()} ${Ze[r] ? `(${Ze[r]} & up)` : ""}`, Re = (r) => {
-  const { t: a } = E(), { type: t = "icons", label: l, property: o, onEmitChange: n = () => {
-  }, units: c, negative: p = !1 } = r, [s] = Sr(), [d] = Tr(), [, u] = Ae(), i = ne(o), h = Se(), y = nt(), [x] = _e(), v = T(() => g(i, "fullCls", ""), [i]), k = B(
-    (C, V = !0) => {
-      const W = { dark: s, mq: u, mod: d, cls: C, property: o, fullCls: "" };
-      (s || d !== "") && (W.mq = "xs");
-      const m = es(W);
-      h(x, [m], V);
-    },
-    [x, s, u, d, o, h]
-  ), L = B(() => {
-    y(x, [v]);
-  }, [x, v, y]), A = T(() => Ts(i, u), [i, u]);
-  I(() => {
-    n(A, i);
-  }, [A, n, i]);
-  const [, , Z] = Ae(), w = B(
-    (C) => {
-      Z({
-        xs: 400,
-        sm: 640,
-        md: 800,
-        lg: 1024,
-        xl: 1420,
-        "2xl": 1920
-      }[C]);
-    },
-    [Z]
-  ), N = g(i, "dark", null) === s && g(i, "mod", null) === d && g(i, "mq", null) === u;
-  return /* @__PURE__ */ e.jsx(ms, { canChange: A, canReset: i && N, 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] ${i && !N ? "text-foreground" : ""}`, children: a(l) }) }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
-      /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
-        t === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          Ss,
-          {
-            currentClass: g(i, "cls", ""),
-            classPrefix: g(Rs, o, ""),
-            units: c || [],
-            onChange: k,
-            negative: p,
-            cssProperty: o
-          }
-        ) : null,
-        t === "icons" && /* @__PURE__ */ e.jsx(fs, { property: o, onChange: k }),
-        t === "range" && /* @__PURE__ */ e.jsx(bs, { property: o, onChange: k }),
-        t === "color" && /* @__PURE__ */ e.jsx(ws, { property: o, onChange: k }),
-        t === "dropdown" && /* @__PURE__ */ e.jsx(xt, { label: l, property: o, onChange: k })
-      ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${v ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => L(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(qt, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : A && i ? /* @__PURE__ */ e.jsxs(U, { delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(K, { 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(Ne, {})
-          }
-        ) }),
-        /* @__PURE__ */ e.jsx(G, { children: /* @__PURE__ */ e.jsx("div", { className: "text-right", children: /* @__PURE__ */ e.jsxs("div", { children: [
-          "Current style is set at  ",
-          /* @__PURE__ */ e.jsxs("span", { className: "font-bold", children: [
-            Vs(g(i, "mq")),
-            s && !i.dark ? "(Light mode)" : ""
-          ] }),
-          /* @__PURE__ */ e.jsx("br", {}),
-          /* @__PURE__ */ e.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => w(g(i, "mq")),
-              className: "block w-full cursor-default text-right font-semibold text-blue-500",
-              children: [
-                "Switch to ",
-                g(i, "mq").toUpperCase()
-              ]
-            }
-          )
-        ] }) }) })
-      ] }) : null })
-    ] })
-  ] }) });
-}, Hs = ["px", "%", "em", "rem", "ch", "vh", "vw"], ht = ({
-  label: r,
-  options: a,
-  borderB: t = !1,
-  borderT: l = !1,
-  type: o = "arbitrary",
-  units: n = Hs,
-  negative: c = !1
-}) => {
-  const { t: p } = E(), [s, d] = j(a[0].key), u = ue(), i = B((h) => R(u, "property").includes(h), [u]);
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${l ? "border-t" : ""}`,
-      children: [
-        /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
-          r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: p(r) }),
-          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: $.Children.toArray(
-            a.map(({ label: h, key: y }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(U, { children: [
-              /* @__PURE__ */ e.jsx(K, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => d(y),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${y === s ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
-                  children: [
-                    $.createElement("div", {
-                      className: i(y) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
-                    }),
-                    $.createElement(g(gt, y, Je), { className: "text-inherit w-3 h-3" })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ e.jsx(G, { children: Y(re(h)) })
-            ] }) }))
-          ) })
-        ] }),
-        /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
-          Re,
-          {
-            type: o,
-            units: [...n],
-            label: "",
-            property: s,
-            negative: c
-          }
-        ) })
-      ]
-    }
-  );
-}, Ds = ({ heading: r, items: a }) => {
-  const { t } = E(), l = ue(), o = T(() => {
-    const n = (s) => De(
-      s.map((d) => d.styleType === "multiple" ? R(d.options, "key") : d.property)
-    ), c = De(
-      a.map((s) => s.styleType === "accordion" ? n(s.items) : s.styleType === "multiple" ? R(s.options, "key") : s.property)
-    ), p = R(l, "property");
-    return Ht(c, p).length > 0;
-  }, [l, a]);
-  return /* @__PURE__ */ e.jsxs("details", { children: [
-    /* @__PURE__ */ e.jsx("summary", { className: "my-px cursor-default rounded-md bg-background p-px px-2 text-[11px] text-foreground", children: /* @__PURE__ */ e.jsxs("div", { className: "inline", children: [
-      t(r),
-      o ? /* @__PURE__ */ e.jsx(
-        "span",
-        {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${o ? "bg-blue-500" : "bg-gray-300"}`
-        }
-      ) : null
-    ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: a.map((n) => n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...n }, n.label) : /* @__PURE__ */ e.jsx(Re, { ...n }, n.label)) })
-  ] });
-}, Bs = We({}), xe = ({ section: r }) => {
-  const { t: a } = E(), t = ue(), l = M(), o = B(
-    (s = []) => {
-      const d = {};
-      for (let i = 0; i < t.length; i++)
-        d[t[i].property] = t[i].cls;
-      let u = !0;
-      for (const i in s)
-        if (!de(d, i) || d[i] !== s[i]) {
-          u = !1;
-          break;
-        }
-      return u;
-    },
-    [t]
-  ), n = T(() => ({}), []), [c] = le(), p = T(() => {
-    const s = `${Le(c, "0.prop")}_attrs`;
-    return !rs(Le(l, s, {}));
-  }, [c]);
-  return /* @__PURE__ */ e.jsx(Bs.Provider, { value: n, children: /* @__PURE__ */ e.jsxs(fe, { value: r.heading, children: [
-    /* @__PURE__ */ e.jsx(ve, { className: "border-b border-gray-300 bg-gray-200 px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-      r.heading === "Attributes" && p ? /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-block h-[8px] w-[8px] rounded-full bg-blue-600" }) : null,
-      /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-x-2", children: a(r.heading) })
-    ] }) }),
-    /* @__PURE__ */ e.jsx(we, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
-      r.items.map((s) => de(s, "component") ? $.createElement(s.component, { key: s.label }) : de(s, "styleType") ? s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(ht, { ...s }, s.label) : s.styleType === "accordion" && o(s == null ? void 0 : s.conditions) ? /* @__PURE__ */ e.jsx(Ds, { ...s }, s.label) : null : /* @__PURE__ */ e.jsx(Re, { ...s }, s.label))
-    ) })
-  ] }) });
-}, As = () => {
-  const r = M(), [a] = le(), { t } = E(), l = zr(), o = Se(), n = Te(r._type), c = g(oe(a), "prop"), p = g(n.props, `${c}.presets`, {});
-  if (b(l) && (!de(n, "props") || b(p)))
-    return null;
-  const s = (d) => {
-    const u = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    o([r._id], u, !0);
-  };
-  return /* @__PURE__ */ e.jsx("div", { className: "h-10", children: /* @__PURE__ */ e.jsxs(Rr, { children: [
-    /* @__PURE__ */ e.jsx(Vr, { asChild: !0, children: /* @__PURE__ */ e.jsx("div", { className: "px-4", children: /* @__PURE__ */ e.jsxs(P, { variant: "default", className: "w-full", size: "sm", children: [
-      t("Apply Presets"),
-      /* @__PURE__ */ e.jsx(Jt, {})
-    ] }) }) }),
-    /* @__PURE__ */ e.jsx(Hr, { className: "max-h-80 w-56", children: /* @__PURE__ */ e.jsxs(Dr, { className: "no-scrollbar h-full", children: [
-      b(p) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsxs(Ie, { children: [
-          n.type,
-          " ",
-          t("presets")
-        ] }),
-        /* @__PURE__ */ e.jsx(Pe, {}),
-        /* @__PURE__ */ e.jsx($e, { children: he(p).map((d) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => s(p[d]), children: [
-          me(Y(t(d))),
-          /* @__PURE__ */ e.jsx(Me, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
-        ] })) })
-      ] }),
-      b(l) ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx(Ie, { children: t("Global presets") }),
-        /* @__PURE__ */ e.jsx(Pe, {}),
-        /* @__PURE__ */ e.jsx($e, { children: he(l).map((d) => /* @__PURE__ */ e.jsxs(Ee, { className: "group text-xs", onClick: () => s(l[d]), children: [
-          me(Y(t(d))),
-          /* @__PURE__ */ e.jsx(Me, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: t("apply") })
-        ] })) })
-      ] })
-    ] }) })
-  ] }) });
-};
-function Is() {
-  const { flexChild: r, gridChild: a } = Br(), [t] = le();
-  return b(t) ? null : /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
-    /* @__PURE__ */ e.jsx(As, {}),
-    /* @__PURE__ */ e.jsxs(lt, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
-      r && /* @__PURE__ */ e.jsx(xe, { section: xs }),
-      a ? /* @__PURE__ */ e.jsx(xe, { section: ys }) : null,
-      hs.map((l) => /* @__PURE__ */ e.jsx(xe, { section: l }, l.heading))
-    ] })
-  ] });
-}
-const Ps = {
-  px: 1,
-  "%": 1,
-  em: 100,
-  rem: 100,
-  ch: 1,
-  vw: 1,
-  vh: 1,
-  "-": 1,
-  deg: 1,
-  ms: 0.1
-}, Eo = () => {
-  const r = M(), { t: a } = E(), [t, l] = $.useState(""), [o, n] = $.useState({
-    onDrag: (s) => s,
-    onDragEnd: (s) => s,
-    dragStartY: 0,
-    dragging: !1,
-    dragStartValue: 0,
-    dragUnit: "",
-    negative: !1,
-    cssProperty: ""
-  }), c = ce(
-    (s) => {
-      const d = !g(o, "negative", !1), u = g(o, "cssProperty", "");
-      let i = parseFloat(o.dragStartValue);
-      i = Ke(i) ? 0 : i;
-      let h = Ps[o.dragUnit];
-      (q(u, "scale") || u === "opacity") && (h = 10);
-      let x = (o.dragStartY - s.pageY) / h + i;
-      d && x < 0 && (x = 0), u === "opacity" && x > 1 && (x = 1), o.onDrag(`${x}`), l(`${x}`);
-    },
-    [o],
-    50
-  ), p = B(() => {
-    setTimeout(() => o.onDragEnd(`${t}`), 100), n({
-      onDrag: (s) => s,
-      onDragEnd: (s) => s,
-      dragStartY: 0,
-      dragging: !1,
-      dragStartValue: 0,
-      dragUnit: "",
-      negative: !1,
-      cssProperty: ""
-    });
-  }, [o, t, n]);
-  return Dt(r) ? /* @__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(Qt, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: a("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(dt, { children: /* @__PURE__ */ e.jsxs(yt.Provider, { value: { setDragData: n }, children: [
-    o.dragging ? /* @__PURE__ */ e.jsx(
-      "div",
-      {
-        onMouseMove: c,
-        onMouseUp: () => p(),
-        className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
-      }
-    ) : null,
-    /* @__PURE__ */ e.jsx(cs, {}),
-    /* @__PURE__ */ e.jsx(Is, {}),
-    /* @__PURE__ */ e.jsx("br", {}),
-    /* @__PURE__ */ e.jsx("br", {}),
-    /* @__PURE__ */ e.jsx("br", {})
-  ] }) });
-};
-export {
-  Eo as default
-};