@chaibuilder/sdk 1.1.15 → 1.1.16

package/dist/Settings-ou3Owu0B.js

@@ -1,2188 +0,0 @@
-import { j as e } from "./jsx-runtime-NV737rRe.js";
-import * as ae from "react";
-import P, { useState as w, useMemo as N, useEffect as _, useCallback as A, memo as ct, createContext as Me, useContext as re } from "react";
-import { useThrottledCallback as fe } from "@react-hookz/web";
-import { f as pe, L as ne, o as pt, M as ut, c as M, g as u, h as ue, N as xt, O as W, P as te, a as b, d as C, j as gt, l as ve, b as je, s as Ee, k as ht, Q as mt, u as yt, R as bt, S as Ve, e as z, T as ft, p as vt, U as _e, V as jt, n as U, W as Fe, t as me, A as wt } from "./lodash-3gkdNK5u.js";
-import { useTranslation as We } from "react-i18next";
-import { PlusIcon as ke, Cross2Icon as Ye, EyeOpenIcon as Ct, EyeClosedIcon as He, BorderAllIcon as O, WidthIcon as S, HeightIcon as V, ArrowUpIcon as q, ArrowRightIcon as J, ArrowDownIcon as Q, ArrowLeftIcon as ee, ArrowTopLeftIcon as kt, ArrowTopRightIcon as Nt, ArrowBottomRightIcon as Tt, ArrowBottomLeftIcon as Rt, AlignLeftIcon as St, AlignCenterHorizontallyIcon as Vt, AlignRightIcon as Ht, StretchHorizontallyIcon as Bt, FontItalicIcon as At, UnderlineIcon as Dt, OverlineIcon as Pt, LetterCaseUppercaseIcon as It, Cross1Icon as $t, InfoCircledIcon as Ne, MinusIcon as Lt, BoxIcon as Xe, RowSpacingIcon as Ot, TriangleDownIcon as Mt, CrossCircledIcon as Et, TrashIcon as _t, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
-import { b0 as Ft, b1 as Wt, B as xe, b2 as Yt, b3 as Xt, b4 as Zt, b5 as zt, b6 as Ut, b7 as Gt, b8 as Kt, a6 as G, am as qt, an as Jt, ao as Qt, b9 as er, ak as tr, ba as rr, al as sr, aD as Y, aE as X, aG as Z, bb as lr, bc as or, bd as ar, be as nr, bf as ir, bg as dr, p as ze, ac as Ue, i as cr, bh as Ge, bi as ie, bj as de, bk as ce, aj as Te, P as Ke, a3 as qe, j as Je, aI as Re, bl as pr, bm as ur, a4 as ge, W as xr, a9 as Qe, R as Be, ag as gr, ad as hr, bn as mr, aq as yr, ar as br, as as fr, at as vr, au as H, bo as et, ax as jr, ay as wr, az as Ae, aA as De } from "./index-0OqmBgqo.js";
-import { R as Cr } from "./controls-kEuiMMDf.js";
-import { Check as kr, EditIcon as Nr, TrashIcon as Tr } from "lucide-react";
-import { getBlockComponent as tt, getChaiDataProviders as Rr } from "@chaibuilder/runtime";
-import { E as rt, u as st } from "./index-4fMl4eN2.js";
-import Sr from "@rjsf/core";
-import Vr from "@rjsf/validator-ajv8";
-import { useAtom as Hr } from "jotai";
-import Br from "react-autosuggest";
-import Ar from "fuse.js";
-import { A as Dr, C as he, e as Pr } from "./utils-XsPKXMVo.js";
-import { a as Ir } from "./MODIFIERS-MLfpKQY1.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 "flat-to-nested";
-import "redux-undo";
-import "i18next";
-import "clsx";
-import "@floating-ui/react-dom";
-import "react-textarea-autosize";
-import "flagged";
-import "react-dnd";
-import "@minoru/react-dnd-treeview";
-import "react-hotkeys-hook";
-import "sonner";
-import "./html-to-json-Y5M0N8PH.js";
-import "himalaya";
-import "tailwind-merge";
-const $r = P.lazy(() => import("react-json-view"));
-function Lr(t) {
-  const s = [], r = {};
-  function l(o, a) {
-    pe(a, (d, i) => {
-      const n = o ? `${o}.${i}` : i, p = ne(d) ? "list" : typeof d;
-      s.push(n), r[n] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ne(d) && l(n, d);
-    });
-  }
-  return l("", pt(t, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: s, pathsType: r };
-}
-const we = ({ data: t, fullView: s }) => {
-  if (!t)
-    return null;
-  const r = typeof t;
-  return s ? typeof t == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
-    /* @__PURE__ */ e.jsx(rt, { children: /* @__PURE__ */ e.jsx(
-      $r,
-      {
-        style: { maxHeight: "40vh", overflowY: "auto" },
-        name: "Content",
-        enableClipboard: !1,
-        displayObjectSize: !1,
-        displayDataTypes: !1,
-        src: t,
-        collapsed: !0
-      }
-    ) })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: "text-gray-800/50 text-[12px] leading-4 w-full max-h-36 overflow-x-hidden overflow-y-auto", children: [
-    /* @__PURE__ */ e.jsx("span", { className: "font-medium text-gray-800/80", children: "Content: " }),
-    t
-  ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: ut(r === "object" ? JSON.stringify(t) : t, { length: 40 }) });
-}, Pe = ({
-  type: t,
-  value: s = "",
-  setValue: r,
-  data: l,
-  onChange: o,
-  dataType: a,
-  appliedBindings: d
-}) => {
-  const { paths: i, pathsType: n } = Lr(l), p = t === "PROP" ? tt(l == null ? void 0 : l._type) : {}, g = t === "PROP", [c, m] = w(!1), h = N(() => t === "PROP" ? i.filter(
-    (x) => !M(d, x) && u(p, `props.${ue(xt(x, "."))}.binding`)
-  ) : i.filter((x) => a === u(n, x, "")), [t, i, d, a, p]);
-  return _(() => {
-    s && o(s);
-  }, [s, t]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
-      /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: W(te(t)) }),
-      /* @__PURE__ */ e.jsxs(Ft, { open: c, onOpenChange: m, children: [
-        /* @__PURE__ */ e.jsx(Wt, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-          xe,
-          {
-            variant: "outline",
-            size: "sm",
-            className: ` ${b(s) ? "bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white w-44 justify-center" : "min-w-[350px] justify-between items-center"}`,
-            children: s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-              /* @__PURE__ */ e.jsxs("span", { className: "text-sm pr-8", children: [
-                g && /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 mr-2 rounded-full", children: W(a) }),
-                s
-              ] }),
-              /* @__PURE__ */ e.jsx("span", { className: "text-[9px] text-blue-400 underline cursor-pointer hover:text-blue-700", children: "Change" })
-            ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-              "+ Set ",
-              W(te(t))
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ e.jsx(Yt, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Xt, { children: [
-          /* @__PURE__ */ e.jsx(Zt, { placeholder: `Choose ${te(t)}...` }),
-          /* @__PURE__ */ e.jsxs(zt, { children: [
-            /* @__PURE__ */ e.jsx(Ut, { children: "No results found." }),
-            /* @__PURE__ */ e.jsx(Gt, { children: C(h, (x) => /* @__PURE__ */ e.jsxs(
-              Kt,
-              {
-                value: x,
-                className: `cursor-pointer ${g ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
-                onSelect: (f) => {
-                  r(gt(h, (T) => T === f) || null), m(!1);
-                },
-                children: [
-                  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ e.jsx(kr, { className: `w-4 h-4 text-green-500 ${s === x ? "" : "opacity-0"}` }),
-                    x
-                  ] }),
-                  g ? /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 rounded-full", children: W(u(n, x, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(we, { data: u(l, x) }) })
-                ]
-              },
-              x
-            )) })
-          ] })
-        ] }) })
-      ] })
-    ] }),
-    !g && !b(s) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(we, { data: u(l, s, ""), fullView: !0 }) })
-  ] });
-}, Or = ({
-  appliedBindings: t = [],
-  onAddBinding: s,
-  editMode: r,
-  item: l
-}) => {
-  const [o, a] = w(r ? l.key : ""), [d, i] = w(r ? l.value : ""), n = G(), [p] = st(), g = A(
-    (h, x) => {
-      if (b(h))
-        return "";
-      {
-        const f = u(x === "PROP" ? n : p, h, "");
-        if (ne(f))
-          return "list";
-        const T = typeof f;
-        return T === "string" ? "text" : T === "object" ? "model" : T;
-      }
-    },
-    [n, p]
-  ), [c, m] = w(r ? g(l.key, "PROP") : "");
-  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxs(qt, { children: [
-      /* @__PURE__ */ e.jsx(Jt, { children: "Add Data Binding" }),
-      /* @__PURE__ */ e.jsx(Qt, { className: "text-xs", children: "Add prop and path of binding. Click save when you're done." })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 relative", children: [
-      /* @__PURE__ */ e.jsx(
-        Pe,
-        {
-          type: "PROP",
-          isDisabled: !1,
-          placeholder: "Enter prop key",
-          value: o,
-          setValue: a,
-          onChange: (h) => {
-            const x = g(h, "PROP");
-            a(h), c !== x && i(""), m(x);
-          },
-          data: n,
-          dataType: c,
-          appliedBindings: t
-        }
-      ),
-      /* @__PURE__ */ e.jsx("div", { className: "h-2" }),
-      /* @__PURE__ */ e.jsx(
-        Pe,
-        {
-          type: "PATH",
-          isDisabled: b(o),
-          placeholder: "Enter data path",
-          value: d,
-          setValue: i,
-          onChange: (h) => {
-            const x = g(h, "PATH");
-            i(c === x ? h : "");
-          },
-          data: p,
-          dataType: c,
-          appliedBindings: t
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e.jsx(er, { children: /* @__PURE__ */ e.jsx(
-      xe,
-      {
-        type: "submit",
-        className: "mt-4",
-        disabled: b(o) && b(d),
-        onClick: () => s({ key: o, value: d }),
-        children: "Save"
-      }
-    ) })
-  ] });
-}, lt = ({ disabled: t, children: s, onAddBinding: r, appliedBindings: l, editMode: o = !0, item: a = {} }) => {
-  const [d, i] = w(!1);
-  return /* @__PURE__ */ e.jsxs(tr, { children: [
-    /* @__PURE__ */ e.jsx(rr, { disabled: t, asChild: !0, onClick: () => i(!0), children: s }),
-    d && /* @__PURE__ */ e.jsx(sr, { children: /* @__PURE__ */ e.jsx(
-      Or,
-      {
-        item: a,
-        editMode: o,
-        appliedBindings: l,
-        onAddBinding: (n) => {
-          r(n), i(!1);
-        }
-      }
-    ) })
-  ] });
-}, Mr = ({
-  item: t,
-  onAddBinding: s,
-  onRemove: r,
-  selectedBlock: l,
-  dataProvider: o,
-  appliedBindings: a
-}) => {
-  const [d, i] = w("string"), n = (p, g) => {
-    if (b(p))
-      return "";
-    {
-      const c = u(g === "PROP" ? l : o, p, "");
-      if (ne(c))
-        return "list";
-      const m = typeof c;
-      return m === "string" ? "text" : m === "object" ? "model" : m;
-    }
-  };
-  return _(() => i(() => n(t.key, "PROP")), [t.key]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col border border-gray-200 relative rounded-md p-2", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "text-gray-500 font-normal text-sm", children: t.key }),
-    /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: t.value }),
-    /* @__PURE__ */ e.jsx(we, { data: u(o, t.value, "") }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(lt, { editMode: !0, onAddBinding: s, appliedBindings: a, item: t, children: /* @__PURE__ */ e.jsx(Nr, { className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-blue-400 hover:text-white border-blue-400 p-1 text-blue-400 hover:scale-105 duration-200" }) }),
-      /* @__PURE__ */ e.jsx(
-        Tr,
-        {
-          onClick: () => r(),
-          className: "h-6 w-6 mt-1 cursor-pointer rounded border hover:bg-red-400 hover:text-white border-red-400 p-1 text-red-400 hover:scale-105 duration-200"
-        }
-      )
-    ] }),
-    !b(d) && !b(t.key) && /* @__PURE__ */ e.jsx("div", { className: "mt-px absolute right-0 top-1 text-purple-600 text-[10px] flex items-center font-medium h-4 px-2 rounded-full", children: W(d) })
-  ] });
-}, Er = ({ bindingData: t, onChange: s }) => {
-  const r = G(), [l] = st(), o = Rr(), [a, d] = w(
-    C(t, (c, m) => ({ key: m, value: c }))
-  );
-  _(() => {
-    d(C(t, (c, m) => ({ key: m, value: c })));
-  }, [r == null ? void 0 : r._id]);
-  const i = N(() => {
-    if (b(l))
-      return !0;
-    if (b(a))
-      return !1;
-    const c = ve(a);
-    return b(c == null ? void 0 : c.key) || b(c == null ? void 0 : c.value);
-  }, [l, a]), n = (c) => {
-    const m = je(a, (h) => h.key !== c.key);
-    d([...m, c]), g([...m, c]);
-  }, p = (c) => {
-    const m = je(a, (h, x) => c !== x);
-    g([...m]);
-  }, g = A(
-    (c = []) => {
-      if (d(c), b(c)) {
-        s({});
-        return;
-      }
-      const m = {};
-      pe(c, (h) => {
-        !b(h == null ? void 0 : h.key) && !b(h == null ? void 0 : h.value) && Ee(m, h.key, h.value);
-      }), s(m);
-    },
-    [s]
-  );
-  return b(o) ? /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "text-gray-500 mb-1.5 text-xs", 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: [
-    C(a, (c, m) => /* @__PURE__ */ e.jsx(
-      Mr,
-      {
-        item: c,
-        onAddBinding: n,
-        onRemove: () => p(m),
-        selectedBlock: r,
-        dataProvider: l,
-        appliedBindings: C(a, "key")
-      },
-      c.key
-    )),
-    /* @__PURE__ */ e.jsxs(Y, { delayDuration: 200, children: [
-      /* @__PURE__ */ e.jsx(X, { className: "w-full", children: /* @__PURE__ */ e.jsx(
-        lt,
-        {
-          disabled: i,
-          appliedBindings: C(a, "key"),
-          onAddBinding: n,
-          children: /* @__PURE__ */ e.jsx(
-            "span",
-            {
-              className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${i ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
-              children: b(l) ? /* @__PURE__ */ e.jsx("small", { className: "text-gray-500 text-[9.5px]", children: "No data provider has been set up for this page" }) : "+ Add Data Binding"
-            }
-          )
-        }
-      ) }),
-      i && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: b(l) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
-    ] })
-  ] });
-}, _r = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), ye = ct(({ createHistorySnapshot: t, properties: s, formData: r, onChange: l }) => {
-  const o = { type: "object", properties: {} }, a = {};
-  return Object.keys(s).forEach((d) => {
-    const i = s[d];
-    if (M(["slot", "styles"], i.type))
-      return;
-    const n = d;
-    o.properties[n] = lr(i), a[n] = or(i);
-  }), /* @__PURE__ */ e.jsx(
-    Sr,
-    {
-      widgets: {
-        binding: _r,
-        richtext: ar,
-        icon: nr,
-        image: ir
-      },
-      fields: { link: dr },
-      idSeparator: ".",
-      autoComplete: "off",
-      omitExtraData: !1,
-      liveOmit: !1,
-      liveValidate: !0,
-      validator: Vr,
-      uiSchema: a,
-      onBlur: t,
-      schema: o,
-      formData: r,
-      onChange: l
-    }
-  );
-});
-function Fr() {
-  const t = G(), { createSnapshot: s } = ze(), r = Ue(), l = tt(t._type), o = { ...t }, a = cr("dataBindingSupport", !1), d = () => s(), i = ({ formData: c }, m) => {
-    if (m) {
-      const h = m.replace("root.", "");
-      r([t._id], { [h]: u(c, h) });
-    }
-  }, n = {
-    _name: Cr({
-      title: "Name",
-      default: u(t, "_name", t._type)
-    })
-  }, p = ht(u(o, "_bindings", {})), g = N(() => {
-    const c = mt(u(l, "props", {}));
-    return a && pe(p, (m) => delete c[m]), c;
-  }, [l, p, a]);
-  return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ e.jsx(
-      ye,
-      {
-        onChange: i,
-        createHistorySnapshot: d,
-        formData: o,
-        properties: n
-      }
-    ),
-    /* @__PURE__ */ e.jsx("hr", { className: "mt-4" }),
-    a ? /* @__PURE__ */ e.jsxs(Ge, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
-      /* @__PURE__ */ e.jsxs(ie, { value: "BINDING", children: [
-        /* @__PURE__ */ e.jsx(de, { className: "px-3 py-2 text-xs hover:no-underline bg-gray-100 ml-1", 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(u(t, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
-            }
-          ),
-          "Data Binding"
-        ] }) }),
-        /* @__PURE__ */ e.jsx(ce, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
-          Er,
-          {
-            bindingData: u(o, "_bindings", {}),
-            onChange: (c) => {
-              i({ formData: { ...o, _bindings: c } }, "root._bindings");
-            }
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ e.jsxs(ie, { value: "STATIC", children: [
-        /* @__PURE__ */ e.jsx(de, { className: "px-3 py-2 text-xs hover:no-underline bg-gray-100 ml-1", 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(ce, { className: "pt-4", children: [
-          b(p) ? "" : /* @__PURE__ */ e.jsxs("div", { className: "text-xs mx-4 border rounded-sm p-1 mb-1 mt-0 border-orange-500 text-orange-500 bg-orange-100", children: [
-            "Data binding is set for ",
-            /* @__PURE__ */ e.jsx("b", { children: C(p, yt).join(", ") }),
-            " ",
-            p.length === 1 ? "property" : "properties",
-            ". Remove data binding to edit static content."
-          ] }),
-          /* @__PURE__ */ e.jsx(
-            ye,
-            {
-              onChange: i,
-              createHistorySnapshot: d,
-              formData: o,
-              properties: g
-            }
-          )
-        ] })
-      ] })
-    ] }) : /* @__PURE__ */ e.jsx(
-      ye,
-      {
-        onChange: i,
-        createHistorySnapshot: d,
-        formData: o,
-        properties: g
-      }
-    ),
-    /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
-  ] });
-}
-const Ie = new Ar(Dr, {
-  isCaseSensitive: !1,
-  threshold: 0.2,
-  minMatchCharLength: 2,
-  keys: ["name"]
-});
-function Wr() {
-  var D;
-  const [t] = Te(), s = G(), r = Ke(), l = qe(), [o] = Je(), [a, d] = w(""), i = (D = ue(t)) == null ? void 0 : D.prop, n = bt((u(s, i, "").replace(Ir, "").split(",").pop() || "").split(" "), b), p = () => {
-    const j = a.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    r(o, j, !0), d("");
-  }, [g, c] = w([]), m = ({ value: j }) => {
-    const L = j.trim().toLowerCase(), I = L.match(/.+:/g);
-    let k = [];
-    if (I && I.length > 0) {
-      const [$] = I, F = L.replace($, "");
-      k = Ie.search(F).map((y) => ({
-        ...y,
-        item: { ...y.item, name: $ + y.item.name }
-      }));
-    } else
-      k = Ie.search(L);
-    c(C(k, "item"));
-  }, h = () => {
-    c([]);
-  }, x = (j) => j.name, f = (j) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: j.name }), T = {
-    autoComplete: "off",
-    autoCorrect: "off",
-    autoCapitalize: "off",
-    spellCheck: !1,
-    placeholder: "Enter class name",
-    value: a,
-    onKeyDown: (j) => {
-      j.key === "Enter" && a.trim() !== "" && p();
-    },
-    onChange: (j, { newValue: L }) => d(L),
-    className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  };
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: `no-scrollbar flex ${g.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-5 overflow-y-auto bg-gray-100 px-px`,
-      children: [
-        /* @__PURE__ */ e.jsx(Re, { className: "mt-2", children: "Add Tailwind classes" }),
-        /* @__PURE__ */ e.jsxs("div", { className: "relative -mt-4 flex items-center gap-x-3", children: [
-          /* @__PURE__ */ e.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ e.jsx(
-            Br,
-            {
-              suggestions: g,
-              onSuggestionsFetchRequested: m,
-              onSuggestionsClearRequested: h,
-              getSuggestionValue: x,
-              renderSuggestion: f,
-              inputProps: T,
-              containerProps: {
-                className: "relative h-8 w-full gap-y-1 py-1 border-gray-600"
-              },
-              theme: {
-                suggestion: "bg-transparent",
-                suggestionHighlighted: "bg-gray-700 ",
-                suggestionsContainerOpen: "absolute bg-gray-100 z-50 max-h-[230px] overflow-y-auto w-full  border border-gray-600 rounded-md"
-              }
-            }
-          ) }),
-          /* @__PURE__ */ e.jsx(
-            xe,
-            {
-              variant: "outline",
-              className: "h-6 border-gray-700",
-              onClick: p,
-              disabled: a.trim() === "",
-              size: "sm",
-              children: /* @__PURE__ */ e.jsx(ke, {})
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
-          b(n) && /* @__PURE__ */ e.jsx("div", { className: "flex h-10 w-full items-center justify-center text-center text-sm text-gray-400", children: "No class added" }),
-          ae.Children.toArray(
-            n.map((j) => /* @__PURE__ */ e.jsxs(
-              "div",
-              {
-                className: "group relative flex cursor-default items-center gap-x-1 rounded-full border border-blue-600 bg-blue-500 p-px px-1.5 text-[11px] text-white hover:border-blue-900",
-                children: [
-                  j,
-                  /* @__PURE__ */ e.jsx(
-                    Ye,
-                    {
-                      onClick: () => l(o, [j]),
-                      className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
-                    }
-                  )
-                ]
-              },
-              j
-            ))
-          )
-        ] })
-      ]
-    }
-  );
-}
-const B = ["px", "%", "em", "rem", "ch", "vh", "vw"], Yr = {
-  heading: "Flex Child",
-  items: [
-    { type: "arbitrary", label: "Basis", units: B, property: "flexBasis" },
-    { type: "range", label: "Order", property: "order" },
-    { type: "dropdown", label: "Flex", property: "flexGrowShrink" },
-    { type: "dropdown", label: "Grow", property: "flexGrow" },
-    { type: "dropdown", label: "Shrink", property: "flexShrink" }
-  ]
-}, Xr = {
-  heading: "Grid Child",
-  items: [
-    { type: "range", label: "Col Span", property: "gridColSpan" },
-    { type: "range", label: "Col Start", property: "gridColStart" },
-    { type: "range", label: "Col End", property: "gridColEnd" },
-    { type: "range", label: "Row Span", property: "gridRowSpan" },
-    { type: "range", label: "Row Start", property: "gridRowStart" },
-    { type: "range", label: "Row End", property: "gridRowEnd" },
-    { type: "range", label: "Order", property: "order" }
-  ]
-}, Zr = [
-  {
-    heading: "Layout",
-    items: [
-      { type: "arbitrary", label: "Width", units: B.concat("auto"), property: "width" },
-      { type: "arbitrary", label: "Height", units: B.concat("auto"), property: "height" },
-      {
-        styleType: "multiple",
-        label: "Margin",
-        negative: !0,
-        units: [...B, "auto"],
-        options: [
-          { key: "margin", label: "All" },
-          { key: "marginX", label: "Left-Right" },
-          { key: "marginY", label: "Top-Bottom" },
-          { key: "marginTop", label: "Top" },
-          { key: "marginRight", label: "Right" },
-          { key: "marginBottom", label: "Bottom" },
-          { key: "marginLeft", label: "Left" }
-        ]
-      },
-      {
-        styleType: "multiple",
-        label: "Padding",
-        options: [
-          { key: "padding", label: "All" },
-          { key: "paddingX", label: "Left-Right" },
-          { key: "paddingY", label: "Top-Bottom" },
-          { key: "paddingTop", label: "Top" },
-          { key: "paddingRight", label: "Right" },
-          { key: "paddingBottom", label: "Bottom" },
-          { key: "paddingLeft", label: "Left" }
-        ]
-      },
-      {
-        styleType: "multiple",
-        label: "Space Bt.",
-        options: [
-          { key: "spaceX", label: "Left-Right" },
-          { key: "spaceY", label: "Top-Bottom" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "Size",
-    items: [
-      {
-        styleType: "accordion",
-        heading: "Min width & height",
-        items: [
-          { type: "arbitrary", label: "Min Width", units: B.concat("auto"), property: "minWidth" },
-          { type: "arbitrary", label: "Min Height", units: B.concat("auto"), property: "minHeight" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "Max width & height",
-        items: [
-          { type: "arbitrary", label: "Max Width", units: B.concat("auto"), property: "maxWidth" },
-          { type: "arbitrary", label: "Max Height", units: B.concat("auto"), property: "maxHeight" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "Object options & aspect ratio",
-        items: [
-          { type: "dropdown", label: "Aspect", property: "aspectRatio" },
-          { type: "dropdown", label: "Fit", property: "objectFit" },
-          { type: "dropdown", label: "Position", property: "objectPosition" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "Display",
-    items: [
-      { type: "dropdown", label: "Display", property: "display", units: B },
-      {
-        styleType: "accordion",
-        heading: "Flex options",
-        items: [
-          { type: "dropdown", label: "Direction", property: "flexDirection" },
-          { type: "dropdown", label: "Wrap", property: "flexWrap" },
-          { type: "dropdown", label: "Justify", property: "justifyContent" },
-          { type: "dropdown", label: "Content", property: "alignContent" },
-          { type: "dropdown", label: "Items", property: "alignItems" },
-          {
-            styleType: "multiple",
-            label: "Gap",
-            options: [
-              { key: "gap", label: "All" },
-              { key: "gapX", label: "Left-Right" },
-              { key: "gapY", label: "Top-Bottom" }
-            ]
-          }
-        ],
-        conditions: { display: "flex" }
-      },
-      {
-        styleType: "accordion",
-        heading: "Grid options",
-        items: [
-          { type: "range", label: "Columns", property: "gridColumns" },
-          { type: "range", label: "Rows", property: "gridRows" },
-          { type: "dropdown", label: "Auto Flow", property: "gridAutoFlow" },
-          { type: "dropdown", label: "Auto Cols", property: "gridAutoColumns" },
-          { type: "dropdown", label: "Auto Rows", property: "gridAutoRows" },
-          { type: "dropdown", label: "Justify", property: "justifyContent" },
-          { type: "dropdown", label: "Content", property: "alignContent" },
-          { type: "dropdown", label: "Items", property: "alignItems" },
-          {
-            styleType: "multiple",
-            label: "Gap",
-            units: ["px", "rem"],
-            options: [
-              { key: "gap", label: "All" },
-              { key: "gapX", label: "Left-Right" },
-              { key: "gapY", label: "Top-Bottom" }
-            ]
-          }
-        ],
-        conditions: { display: "grid" }
-      },
-      {
-        styleType: "accordion",
-        heading: "Visibility & Opacity",
-        items: [
-          { type: "dropdown", label: "Visibility", property: "visibility", units: B },
-          { type: "arbitrary", label: "Opacity", property: "opacity", units: ["-"] }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "Position",
-    items: [
-      { type: "icons", label: "Position", property: "position" },
-      {
-        styleType: "accordion",
-        heading: "Position options",
-        items: [
-          {
-            styleType: "multiple",
-            label: "Direction",
-            options: [
-              { key: "top", label: "Top" },
-              { key: "right", label: "Right" },
-              { key: "bottom", label: "Bottom" },
-              { key: "left", label: "Left" }
-            ]
-          },
-          {
-            styleType: "multiple",
-            label: "Inset",
-            options: [
-              { key: "inset", label: "All" },
-              { key: "insetX", label: "Left Right" },
-              { key: "insetY", label: "Top Bottom" }
-            ]
-          },
-          { type: "arbitrary", label: "Z-Index", units: ["-", "auto"], property: "zIndex" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "Float & Clear",
-        items: [
-          { type: "icons", label: "Float", property: "float" },
-          { type: "dropdown", label: "Clear", property: "clear" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "Overflow & Overscroll",
-        items: [
-          {
-            styleType: "multiple",
-            type: "dropdown",
-            label: "Overflow",
-            options: [
-              { key: "overflow", label: "All" },
-              { key: "overflowX", label: "Left-Right" },
-              { key: "overflowY", label: "Top-Bottom" }
-            ]
-          },
-          {
-            styleType: "multiple",
-            type: "dropdown",
-            label: "Overscroll",
-            options: [
-              { key: "overscroll", label: "All" },
-              { key: "overscrollX", label: "Left-Right" },
-              { key: "overscrollY", label: "Top-Bottom" }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "Typography",
-    items: [
-      { type: "dropdown", property: "fontFamily", label: "Font" },
-      { type: "arbitrary", property: "fontSize", label: "Size", units: B },
-      { type: "arbitrary", property: "lineHeight", label: "Height", units: B.concat("-") },
-      { type: "range", property: "fontWeight", label: "Weight" },
-      { type: "color", property: "textColor", label: "Color" },
-      {
-        styleType: "accordion",
-        heading: "Alignments",
-        items: [
-          { type: "dropdown", property: "textAlign", label: "Align" },
-          { type: "dropdown", property: "verticalAlign", label: "V. Align" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "Spacing, decoration & more",
-        items: [
-          { type: "dropdown", property: "letterSpacing", label: "Spacing" },
-          { type: "dropdown", property: "textDecoration", label: "Decoration" },
-          { type: "range", property: "textDecorationThickness", label: "Thickness" },
-          { type: "dropdown", property: "textTransform", label: "Transform" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "White space & breaks",
-        items: [
-          { type: "dropdown", property: "whitespace", label: "Whitespace" },
-          { type: "dropdown", property: "wordBreak", label: "Wordbreak" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "Background",
-    items: [
-      { type: "color", label: "Bg. Color", property: "backgroundColor" },
-      {
-        styleType: "accordion",
-        heading: "Position, Size & more",
-        items: [
-          { type: "dropdown", label: "Attachment", property: "backgroundAttachment" },
-          { type: "dropdown", label: "Clipping", property: "backgroundClip" },
-          { type: "dropdown", label: "Origin", property: "backgroundOrigin" },
-          { type: "dropdown", label: "Position", property: "backgroundPosition" },
-          { type: "dropdown", label: "Repeat", property: "backgroundRepeat" },
-          { type: "dropdown", label: "Size", property: "backgroundSize" }
-        ]
-      },
-      { type: "dropdown", label: "Gradient", property: "backgroundGradient" },
-      {
-        styleType: "accordion",
-        heading: "Gradient colors",
-        items: [
-          { type: "color", label: "From", property: "fromColor" },
-          { type: "color", label: "Via", property: "viaColor" },
-          { type: "color", label: "To", property: "toColor" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "Border & Outline",
-    items: [
-      {
-        styleType: "multiple",
-        type: "dropdown",
-        label: "Width",
-        options: [
-          { key: "border", label: "All" },
-          { key: "borderX", label: "Left Right" },
-          { key: "borderY", label: "Top bottom" },
-          { key: "borderTop", label: "Top" },
-          { key: "borderRight", label: "Right" },
-          { key: "borderBottom", label: "Bottom" },
-          { key: "borderLeft", label: "Left" }
-        ]
-      },
-      {
-        styleType: "multiple",
-        type: "dropdown",
-        label: "Corners",
-        options: [
-          { key: "borderRadius", label: "All" },
-          { key: "borderRadiusTop", label: "Top" },
-          { key: "borderRadiusRight", label: "Right" },
-          { key: "borderRadiusBottom", label: "Bottom" },
-          { key: "borderRadiusLeft", label: "Left" },
-          { key: "borderRadiusTopLeft", label: "Top Left" },
-          { key: "borderRadiusTopRight", label: "Top right" },
-          { key: "borderRadiusBottomRight", label: "Bottom right" },
-          { key: "borderRadiusBottomLeft", label: "Bottom left" }
-        ]
-      },
-      { type: "color", label: "Color", property: "borderColor" },
-      { type: "dropdown", label: "Style", property: "borderStyle" },
-      {
-        styleType: "accordion",
-        heading: "Divide options",
-        items: [
-          {
-            styleType: "multiple",
-            type: "range",
-            label: "Width",
-            options: [
-              { key: "divideXWidth", label: "Left Right" },
-              { key: "divideYWidth", label: "Top Bottom" }
-            ]
-          },
-          { type: "color", label: "Color", property: "divideColor" },
-          { type: "dropdown", label: "Style", property: "divideStyle" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "Outline styling",
-        items: [
-          { type: "range", label: "Width", property: "outlineWidth" },
-          { type: "range", label: "Offset", property: "outlineOffset" },
-          { type: "dropdown", label: "Style", property: "outlineStyle" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "Ring options",
-        items: [
-          { type: "range", label: "Width", property: "ringWidth" },
-          { type: "color", label: "Color", property: "ringColor" },
-          { type: "range", label: "Offset", property: "ringOffsetWidth" },
-          { type: "color", label: "Off. color", property: "ringOffsetColor" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "Effect & Animation",
-    items: [
-      { type: "range", label: "Shadow", property: "boxShadow" },
-      { type: "color", label: "Color", property: "boxShadowColor" },
-      { type: "dropdown", label: "Cursor", property: "cursor" },
-      {
-        styleType: "accordion",
-        heading: "Blend & Cursor",
-        items: [
-          { type: "dropdown", label: "Mix Blend", property: "mixBlendMode" },
-          { type: "dropdown", label: "Bg. Blend", property: "bgBlendMode" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "Transform",
-        items: [
-          { type: "dropdown", label: "Origin", property: "transformOrigin" },
-          {
-            styleType: "multiple",
-            label: "Scale",
-            units: ["-"],
-            options: [
-              { key: "scale", label: "All" },
-              { key: "scaleX", label: "Left-Right" },
-              { key: "scaleY", label: "Top-Bottom" }
-            ]
-          },
-          {
-            styleType: "multiple",
-            label: "Skew",
-            units: ["deg"],
-            options: [
-              { key: "skewX", label: "Left-Right" },
-              { key: "skewY", label: "Top-Bottom" }
-            ]
-          },
-          {
-            styleType: "multiple",
-            label: "Translate",
-            negative: !0,
-            options: [
-              { key: "translateX", label: "Left-Right" },
-              { key: "translateY", label: "Top-Bottom" }
-            ]
-          },
-          { type: "arbitrary", units: ["deg"], negative: !0, label: "Rotate", property: "rotate" }
-        ]
-      },
-      {
-        styleType: "accordion",
-        heading: "Animation",
-        items: [
-          { type: "dropdown", label: "Animation", property: "animation" },
-          { type: "dropdown", label: "Transition", property: "transition" },
-          { type: "dropdown", label: "Easing", property: "transitionEase" },
-          { type: "arbitrary", units: ["ms"], label: "Duration", property: "duration" },
-          { type: "arbitrary", units: ["ms"], label: "Delay", property: "delay" }
-        ]
-      }
-    ]
-  },
-  {
-    heading: "Classes",
-    items: [{ component: Wr }]
-  }
-], ot = {
-  "not-italic": () => /* @__PURE__ */ e.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
-  // visibility
-  visible: Ct,
-  invisible: He,
-  // display
-  hidden: He,
-  gap: O,
-  gapX: S,
-  gapY: V,
-  spaceX: S,
-  spaceY: V,
-  overscroll: O,
-  overscrollX: S,
-  overscrollY: V,
-  overflow: O,
-  overflowX: S,
-  overflowY: V,
-  top: q,
-  right: J,
-  bottom: Q,
-  left: ee,
-  inset: O,
-  insetX: S,
-  insetY: V,
-  border: O,
-  borderX: S,
-  borderY: V,
-  borderTop: q,
-  borderRight: J,
-  borderBottom: Q,
-  borderLeft: ee,
-  borderRadius: O,
-  borderRadiusX: S,
-  borderRadiusY: V,
-  borderRadiusTop: q,
-  borderRadiusRight: J,
-  borderRadiusBottom: Q,
-  borderRadiusLeft: ee,
-  borderRadiusTopLeft: kt,
-  borderRadiusTopRight: Nt,
-  borderRadiusBottomRight: Tt,
-  borderRadiusBottomLeft: Rt,
-  divideXWidth: S,
-  divideYWidth: V,
-  scale: O,
-  scaleX: S,
-  scaleY: V,
-  skewX: S,
-  skewY: V,
-  translateX: S,
-  translateY: V,
-  // padding
-  padding: O,
-  paddingX: S,
-  paddingY: V,
-  paddingTop: q,
-  paddingRight: J,
-  paddingBottom: Q,
-  paddingLeft: ee,
-  // margin
-  margin: O,
-  marginX: S,
-  marginY: V,
-  marginTop: q,
-  marginRight: J,
-  marginBottom: Q,
-  marginLeft: ee,
-  // text-align
-  textLeft: St,
-  textCenter: Vt,
-  textRight: Ht,
-  textJustify: Bt,
-  // font style
-  italic: At,
-  // "not-italic": "",
-  // decoration
-  underline: Dt,
-  overline: Pt,
-  // transform
-  uppercase: It,
-  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": Ye,
-  // 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: $t
-}, se = Me({ canReset: !1, canChange: !0 }), zr = ({ children: t, canReset: s = !1, canChange: r = !0 }) => (
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ e.jsx(se.Provider, { value: { canReset: s, canChange: r }, children: t })
-), at = ({ label: t, property: s, onChange: r }) => {
-  const l = N(() => u(he, `${s}.classes`, [""]), [s]), o = le(s), a = N(() => u(o, "cls", ""), [o]), { canChange: d } = re(se), i = /\[.*\]/g.test(a);
-  return /* @__PURE__ */ e.jsx("div", { className: t ? "w-full rounded " : "grow", children: i ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ e.jsx(pr, { className: "w-[70%] rounded py-1", readOnly: !0, value: a }),
-    /* @__PURE__ */ e.jsxs(Y, { delayDuration: 100, children: [
-      /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Ne, {}) }) }),
-      /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
-    ] })
-  ] }) : /* @__PURE__ */ e.jsx(
-    Ce,
-    {
-      rounded: t,
-      onChange: (n) => r(n, s),
-      selected: a,
-      options: l,
-      disabled: !d
-    }
-  ) });
-};
-function Ce({ selected: t, onChange: s, rounded: r = !1, options: l, disabled: o = !1 }) {
-  const a = t.replace(/.*:/g, "").trim(), { undo: d, redo: i } = ze();
-  return /* @__PURE__ */ e.jsxs(
-    "select",
-    {
-      disabled: !l.length || o,
-      className: `${r ? "rounded-md border border-border" : "border-0"} w-full disable:bg-gray-500 h-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (n) => s(n.target.value),
-      onKeyDown: (n) => {
-        n.ctrlKey && (n.key === "z" && d(), n.key === "y" && i());
-      },
-      value: a,
-      children: [
-        /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
-        P.Children.toArray(
-          l.map((n) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: n, children: n }))
-        )
-      ]
-    }
-  );
-}
-const Ur = ({ property: t, onChange: s }) => {
-  const { canReset: r, canChange: l } = re(se), o = le(t), a = N(() => u(o, "cls", ""), [o]), d = N(() => u(he, `${t}.classes`, [""]), [t]), i = d.indexOf(a) > -1 ? d.indexOf(a) : 0, n = /\[.*\]/g.test(a);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: n ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: a }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(
-      "button",
-      {
-        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 && (!r || i - 1 < 0),
-        onClick: () => s(Ve(d, i - 1), t),
-        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          Lt,
-          {
-            className: !l && (!r || i - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
-          }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(at, { label: !1, property: t, onChange: s }) }),
-    /* @__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 && (!r || i + 1 >= d.length),
-        onClick: () => s(Ve(d, i + 1), t),
-        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
-          ke,
-          {
-            className: !l && (!r || i + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
-          }
-        ) })
-      }
-    )
-  ] }) });
-}, Gr = ({ property: t, onChange: s }) => {
-  const r = N(() => u(he, `${t}.classes`, [""]), [t]), { canChange: l } = re(se), o = le(t), a = N(() => u(o, "cls", ""), [o]);
-  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(r, (d) => /* @__PURE__ */ e.jsxs(Y, { children: [
-    /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-      "button",
-      {
-        type: "button",
-        disabled: !l,
-        onClick: () => s(d, t),
-        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${a === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: P.createElement(u(ot, d, Xe))
-      }
-    ) }),
-    /* @__PURE__ */ e.jsx(Z, { children: W(te(d)) })
-  ] })) });
-}, Kr = {
-  backgroundColor: "bg",
-  textColor: "text",
-  borderColor: "border",
-  boxShadowColor: "shadow",
-  outlineColor: "outline",
-  divideColor: "divide",
-  fromColor: "from",
-  viaColor: "via",
-  toColor: "to",
-  ringColor: "ring",
-  ringOffsetColor: "ring-offset"
-}, qr = ({ property: t, onChange: s }) => {
-  const r = le(t), l = N(() => u(r, "cls", ""), [r]), { canChange: o } = re(se), [a, d] = w([]), [i, n] = w({ color: "", shade: "" }), p = l.split("-"), g = u(p, "1", ""), c = u(p, "2", ""), m = A(
-    // eslint-disable-next-line no-shadow
-    (x) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (d([]), n({ color: x })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), n((f) => ({ ...f, color: x, shade: f.shade ? f.shade : "500" })));
-    },
-    [d, n]
-  );
-  _(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(g))
-      return d([]);
-    d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [g]);
-  const h = A(
-    // eslint-disable-next-line no-shadow
-    (x) => {
-      n({ color: g, shade: x });
-    },
-    [g]
-  );
-  return _(() => {
-    n({ color: "", shade: "" });
-  }, [r]), _(() => {
-    const f = `${u(Kr, t, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
-    f.match(new RegExp(u(he, `${t}.regExp`, ""))) && s(f, t);
-  }, [i, s, t]), /* @__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: g,
-        onChange: m,
-        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: c, disabled: !g || !o, onChange: h, options: a }) })
-  ] });
-}, $e = (t, s) => {
-  t = t.toLowerCase();
-  let r = t.trim().replace(/ |\+/g, "");
-  if ((r === "auto" || r === "none") && s.includes(r))
-    return { value: "", unit: r };
-  const l = s.length ? new RegExp(s.join("|"), "g") : /XXXXXX/g;
-  r = r.replace(l, "");
-  const o = t.match(l), a = o && o.length > 1, d = !b(r) && Number.isNaN(Number(r));
-  return a || d ? { error: "Invalid value" } : o && (o[0] === "auto" || o[0] === "none") ? { value: o[0], unit: "" } : { value: r, unit: o ? o[0] : "" };
-};
-const Jr = (t) => {
-  const s = t.startsWith("-") ? "-" : "", r = t.split("-").pop();
-  if (["auto", "none"].includes(r))
-    return { value: "", unit: r };
-  if (r === "px")
-    return { value: "1", unit: "px" };
-  if (r === "screen")
-    return { value: "100", unit: t.indexOf("w-") !== -1 ? "vw" : "vh" };
-  if (r === "full")
-    return { value: "100", unit: "%" };
-  if (M(t, "skew-"))
-    return { value: `${s}${r}`, unit: "deg" };
-  if (M(t, "rotate-"))
-    return { value: `${s}${r}`, unit: "deg" };
-  if (M(t, "opacity-"))
-    return { value: `${r / 100}`, unit: "-" };
-  if (M(t, "duration-") || M(t, "delay-"))
-    return { value: `${r}`, unit: "ms" };
-  if (M(t, "translate-") && !r.includes("/"))
-    return { value: `${s}${`${r / 4}`}`, unit: "rem" };
-  if (M(t, "scale-"))
-    return { value: `${s}${`${r / 100}`}`, unit: "-" };
-  if (z(t, "border")) {
-    const l = t.match(/border-?(x|y|t|r|b|l)?\d+/g);
-    if (l)
-      return { value: l[0].split("-").pop(), unit: "px" };
-    if (t.match(/border-?(x|y|t|r|b|l)?/g))
-      return { value: "1", unit: "px" };
-  }
-  if (z(t, "max-w-")) {
-    if (t === "max-w-screen-sm")
-      return { value: "640", unit: "px" };
-    if (t === "max-w-screen-md")
-      return { value: "768", unit: "px" };
-    if (t === "max-w-screen-lg")
-      return { value: "1024", unit: "px" };
-    if (t === "max-w-screen-xl")
-      return { value: "1280", unit: "px" };
-    if (t === "max-w-screen-2xl")
-      return { value: "1536", unit: "px" };
-    if (r === "xs")
-      return { value: "320", unit: "px" };
-    if (r === "sm")
-      return { value: "384", unit: "px" };
-    if (r === "md")
-      return { value: "448", unit: "px" };
-    if (r === "lg")
-      return { value: "512", unit: "px" };
-    if (r === "xl")
-      return { value: "576", unit: "px" };
-    if (r === "2xl")
-      return { value: "672", unit: "px" };
-    if (r === "3xl")
-      return { value: "768", unit: "px" };
-    if (r === "4xl")
-      return { value: "896", unit: "px" };
-    if (r === "5xl")
-      return { value: "1024", unit: "px" };
-    if (r === "6xl")
-      return { value: "1152", unit: "px" };
-    if (r === "7xl")
-      return { value: "1280", unit: "px" };
-    if (r === "prose")
-      return { value: "65", unit: "ch" };
-  }
-  if (z(t, "text-")) {
-    if (r === "xs")
-      return { value: "12", unit: "px" };
-    if (r === "sm")
-      return { value: "14", unit: "px" };
-    if (r === "base")
-      return { value: "16", unit: "px" };
-    if (r === "lg")
-      return { value: "18", unit: "px" };
-    if (r === "xl")
-      return { value: "20", unit: "px" };
-    if (r === "2xl")
-      return { value: "24", unit: "px" };
-    if (r === "3xl")
-      return { value: "30", unit: "px" };
-    if (r === "4xl")
-      return { value: "36", unit: "px" };
-    if (r === "5xl")
-      return { value: "48", unit: "px" };
-    if (r === "6xl")
-      return { value: "60", unit: "px" };
-    if (r === "7xl")
-      return { value: "72", unit: "px" };
-    if (r === "8xl")
-      return { value: "96", unit: "px" };
-    if (r === "9xl")
-      return { value: "128", unit: "px" };
-  }
-  if (z(t, "leading-")) {
-    if (r === "none")
-      return { value: "1", unit: "-" };
-    if (r === "tight")
-      return { value: "1.25", unit: "-" };
-    if (r === "snug")
-      return { value: "1.375", unit: "-" };
-    if (r === "normal")
-      return { value: "1.5", unit: "-" };
-    if (r === "relaxed")
-      return { value: "1.625", unit: "-" };
-    if (r === "loose")
-      return { value: "2", unit: "-" };
-  }
-  if (z(t, "tracking-")) {
-    if (r === "tighter")
-      return { value: "-0.05", unit: "em" };
-    if (r === "tight")
-      return { value: "-0.025", unit: "em" };
-    if (r === "normal")
-      return { value: "0", unit: "em" };
-    if (r === "wide")
-      return { value: "0.025", unit: "em" };
-    if (r === "wider")
-      return { value: "0.05", unit: "em" };
-    if (r === "widest")
-      return { value: "0.1", unit: "em" };
-  }
-  if (["max", "min", "fit"].includes(r))
-    return { value: t, unit: "class" };
-  if (r.includes("/")) {
-    const [l, o] = C(r.split("/"), (a) => parseInt(a, 10));
-    return { value: s + (l / o * 100).toFixed(2).replace(".00", ""), unit: "%" };
-  }
-  return ft(parseFloat(r)) ? { value: `${s + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
-};
-const Qr = (t) => {
-  if (b(t))
-    return { value: "", unit: "" };
-  const s = t.match(/\[.*\]/g);
-  if (s === null)
-    return es(t);
-  const r = u(s, "0", "").replace(/\[|\]/g, ""), l = t.startsWith("-") ? "-" : "", o = ue(r.match(/\d+.\d+|\d+/g));
-  return { value: `${l}${o}`, unit: r.replace(o, "") };
-}, es = (t) => b(t) ? { value: "", unit: "" } : Jr(t), nt = P.createContext({
-  setDragData: () => {
-  }
-}), ts = ({
-  unit: t,
-  currentValue: s,
-  onDrag: r,
-  onDragEnd: l,
-  onDragStart: o,
-  negative: a,
-  cssProperty: d
-}) => {
-  const { setDragData: i } = re(nt);
-  return /* @__PURE__ */ e.jsx(
-    "button",
-    {
-      type: "button",
-      onMouseDown: (n) => {
-        const p = {
-          onDrag: r,
-          onDragEnd: l,
-          dragging: !0,
-          dragStartY: n.pageY,
-          dragStartValue: `${s}`,
-          dragUnit: t,
-          negative: a,
-          cssProperty: d
-        };
-        o(p), i(p);
-      },
-      color: void 0,
-      className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
-      children: /* @__PURE__ */ e.jsx(Ot, {})
-    }
-  );
-}, rs = ({ onSelect: t, current: s, units: r }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: r.map((l) => /* @__PURE__ */ e.jsx(
-  xe,
-  {
-    className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
-    color: s === l ? "primary" : void 0,
-    size: "sm",
-    onClick: (o) => {
-      o.stopPropagation(), t(l);
-    },
-    children: l
-  },
-  l
-)) }), Le = 50, ss = (t) => {
-  const [s, r] = w(!1), [l, o] = w(""), { currentClass: a, onChange: d, classPrefix: i, cssProperty: n, units: p, negative: g } = t, [c, m] = w(n != null && n.toLowerCase().includes("width") ? "%" : p[0]), [h, x] = w(!1), [f, T] = w(""), [D, j] = w(!1), [L, I] = w(!1);
-  _(() => {
-    const { value: y, unit: v } = Qr(a);
-    if (v === "") {
-      o(y), m(n != null && n.toLowerCase().includes("width") ? "%" : ue(p));
-      return;
-    }
-    m(v), o(v === "class" || b(y) ? "" : y);
-  }, [a, n, p]);
-  const k = fe((y) => d(y), [d], Le), $ = fe((y) => d(y, !1), [d], Le), F = A(
-    (y = !1) => {
-      const v = $e(`${l}`, p);
-      if (u(v, "error", !1)) {
-        x(!0);
-        return;
-      }
-      const R = u(v, "unit") !== "" ? u(v, "unit") : c;
-      if (R === "auto" || R === "none") {
-        k(`${i}${R}`);
-        return;
-      }
-      if (u(v, "value") === "")
-        return;
-      const K = `${u(v, "value", "").startsWith("-") ? "-" : ""}${i}[${u(v, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
-      y ? $(K) : k(K);
-    },
-    [k, $, l, c, i, p]
-  ), oe = A(
-    (y) => {
-      const v = $e(`${l}`, p);
-      if (u(v, "error", !1)) {
-        x(!0);
-        return;
-      }
-      if (y === "auto" || y === "none") {
-        k(`${i}${y}`);
-        return;
-      }
-      if (u(v, "value") === "")
-        return;
-      const R = u(v, "unit") !== "" ? u(v, "unit") : y, K = `${u(v, "value", "").startsWith("-") ? "-" : ""}${i}[${u(v, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
-      k(K);
-    },
-    [k, l, i, p]
-  );
-  return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: c === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: a }),
-    /* @__PURE__ */ e.jsxs(Y, { children: [
-      /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ e.jsx(Ne, {}) }) }),
-      /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind preset class." })
-    ] })
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${D ? "z-auto" : ""}`, children: [
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(c) !== -1 ? null : /* @__PURE__ */ e.jsx(
-        "input",
-        {
-          readOnly: c === "class",
-          onKeyPress: (y) => {
-            y.key === "Enter" && F();
-          },
-          onKeyDown: (y) => {
-            if (y.keyCode !== 38 && y.keyCode !== 40)
-              return;
-            y.preventDefault(), I(!0);
-            const v = vt(y.target.value);
-            let R = _e(v) ? 0 : v;
-            y.keyCode === 38 && (R += 1), y.keyCode === 40 && (R -= 1);
-            const E = `${R}`, dt = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${c === "-" ? "" : c}]`;
-            $(dt);
-          },
-          onKeyUp: (y) => {
-            L && (y.preventDefault(), I(!1));
-          },
-          onBlur: () => F(),
-          onChange: (y) => {
-            x(!1), o(y.target.value);
-          },
-          onClick: (y) => {
-            var v;
-            (v = y == null ? void 0 : y.target) == null || v.select(), r(!1);
-          },
-          value: D ? f : l,
-          className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
-            " ",
-            h ? "border-red-500 text-red-500" : "border-foreground/20"
-          )
-        }
-      ),
-      /* @__PURE__ */ e.jsxs(Y, { open: s, delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => r(!s),
-            className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
-            children: [
-              /* @__PURE__ */ e.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: c }),
-              p.length > 1 ? /* @__PURE__ */ e.jsx(Mt, {}) : null
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
-          rs,
-          {
-            units: p,
-            current: c,
-            onSelect: (y) => {
-              r(!1), m(y), oe(y);
-            }
-          }
-        ) }) })
-      ] })
-    ] }),
-    ["none", "auto"].indexOf(c) !== -1 || D ? null : /* @__PURE__ */ e.jsx(
-      ts,
-      {
-        onDragStart: () => j(!0),
-        onDragEnd: (y) => {
-          if (T(() => ""), j(!1), b(y))
-            return;
-          const v = `${y}`, E = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
-          k(E);
-        },
-        onDrag: (y) => {
-          if (b(y))
-            return;
-          T(y);
-          const v = `${y}`, E = `${v.startsWith("-") ? "-" : ""}${i}[${v.replace("-", "")}${c === "-" ? "" : c}]`;
-          $(E);
-        },
-        currentValue: l,
-        unit: c,
-        negative: g,
-        cssProperty: n
-      }
-    )
-  ] }) }) });
-}, le = (t) => {
-  const s = ge();
-  return jt(s, { property: t });
-}, ls = (t, s) => {
-  const r = {
-    xs: 0,
-    sm: 1,
-    md: 2,
-    lg: 3,
-    xl: 4,
-    "2xl": 5
-  };
-  return r[u(t, "mq", "xs")] <= r[s];
-}, os = {
-  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-"
-}, Oe = {
-  xs: "",
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  "2xl": "1536px"
-}, as = (t) => `${t.toUpperCase()} ${Oe[t] ? `(${Oe[t]} & up)` : ""}`, Se = (t) => {
-  const { type: s = "icons", label: r, property: l, onEmitChange: o = () => {
-  }, units: a, negative: d = !1 } = t, [i] = xr(), [n] = Qe(), [, p] = Be(), g = le(l), c = Ke(), m = qe(), [h] = Je(), x = N(() => u(g, "fullCls", ""), [g]), f = A(
-    (k, $ = !0) => {
-      const F = { dark: i, mq: p, mod: n, cls: k, property: l, fullCls: "" };
-      (i || n !== "") && (F.mq = "xs");
-      const oe = Pr(F);
-      c(h, [oe], $);
-    },
-    [h, i, p, n, l, c]
-  ), T = A(() => {
-    m(h, [x]);
-  }, [h, x, m]), D = N(() => ls(g, p), [g, p]);
-  _(() => {
-    o(D, g);
-  }, [D, o, g]);
-  const [, , j] = Be(), L = A(
-    (k) => {
-      j({
-        xs: 400,
-        sm: 640,
-        md: 800,
-        lg: 1024,
-        xl: 1420,
-        "2xl": 1920
-      }[k]);
-    },
-    [j]
-  ), I = u(g, "dark", null) === i && u(g, "mod", null) === n && u(g, "mq", null) === p;
-  return /* @__PURE__ */ e.jsx(zr, { canChange: D, canReset: g && I, 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] ${g && !I ? "text-foreground" : ""}`, children: r }) }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
-      /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
-        s === "arbitrary" ? /* @__PURE__ */ e.jsx(
-          ss,
-          {
-            currentClass: u(g, "cls", ""),
-            classPrefix: u(os, l, ""),
-            units: a || [],
-            onChange: f,
-            negative: d,
-            cssProperty: l
-          }
-        ) : null,
-        s === "icons" && /* @__PURE__ */ e.jsx(Gr, { property: l, onChange: f }),
-        s === "range" && /* @__PURE__ */ e.jsx(Ur, { property: l, onChange: f }),
-        s === "color" && /* @__PURE__ */ e.jsx(qr, { property: l, onChange: f }),
-        s === "dropdown" && /* @__PURE__ */ e.jsx(at, { label: r, property: l, onChange: f })
-      ] }),
-      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${x ? "visible" : "invisible"}`, children: I ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => T(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Et, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : D && g ? /* @__PURE__ */ e.jsxs(Y, { delayDuration: 100, children: [
-        /* @__PURE__ */ e.jsx(X, { 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(Z, { 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: [
-            as(u(g, "mq")),
-            i && !g.dark ? "(Light mode)" : ""
-          ] }),
-          /* @__PURE__ */ e.jsx("br", {}),
-          /* @__PURE__ */ e.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => L(u(g, "mq")),
-              className: "block w-full cursor-default text-right font-semibold text-blue-500",
-              children: [
-                "Switch to ",
-                u(g, "mq").toUpperCase()
-              ]
-            }
-          )
-        ] }) }) })
-      ] }) : null })
-    ] })
-  ] }) });
-}, ns = ["px", "%", "em", "rem", "ch", "vh", "vw"], it = ({
-  label: t,
-  options: s,
-  borderB: r = !1,
-  borderT: l = !1,
-  type: o = "arbitrary",
-  units: a = ns,
-  negative: d = !1
-}) => {
-  const [i, n] = w(s[0].key), p = ge(), g = A((c) => C(p, "property").includes(c), [p]);
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${r ? "border-b" : ""} ${l ? "border-t" : ""}`,
-      children: [
-        /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
-          t && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: t }),
-          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: P.Children.toArray(
-            s.map(({ label: c, key: m }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(Y, { children: [
-              /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => n(m),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${m === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
-                  children: [
-                    P.createElement("div", {
-                      className: g(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
-                    }),
-                    P.createElement(u(ot, m, Xe), { className: "text-inherit w-3 h-3" })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ e.jsx(Z, { children: W(te(c)) })
-            ] }) }))
-          ) })
-        ] }),
-        /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
-          Se,
-          {
-            type: o,
-            units: [...a],
-            label: "",
-            property: i,
-            negative: d
-          }
-        ) })
-      ]
-    }
-  );
-}, is = ({ heading: t, items: s }) => {
-  const r = ge(), l = N(() => {
-    const o = (i) => U(
-      i.map((n) => n.styleType === "multiple" ? C(n.options, "key") : n.property)
-    ), a = U(
-      s.map((i) => i.styleType === "accordion" ? o(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
-    ), d = C(r, "property");
-    return Fe(a, d).length > 0;
-  }, [r, s]);
-  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,
-      l ? /* @__PURE__ */ e.jsx(
-        "span",
-        {
-          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}`
-        }
-      ) : null
-    ] }) }),
-    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: s.map((o) => o.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...o }, o.label) : /* @__PURE__ */ e.jsx(Se, { ...o }, o.label)) })
-  ] });
-}, ds = Me({}), be = ({ section: t }) => {
-  const s = ge(), r = A(
-    (a = []) => {
-      const d = {};
-      for (let n = 0; n < s.length; n++)
-        d[s[n].property] = s[n].cls;
-      let i = !0;
-      for (const n in a)
-        if (!me(d, n) || d[n] !== a[n]) {
-          i = !1;
-          break;
-        }
-      return i;
-    },
-    [s]
-  ), l = N(() => {
-    if (s.length > 0 && t.heading === "Classes")
-      return !0;
-    const a = (n) => U(
-      n.map((p) => p.styleType === "multiple" ? U(C(p.options, "key")) : p.property)
-    ), d = U(
-      t.items.map((n) => n.styleType === "accordion" ? a(n.items) : n.styleType === "multiple" ? U(C(n.options, "key")) : n.property)
-    ), i = C(s, "property");
-    return Fe(d, i).length > 0;
-  }, [s, t.heading, t.items]), o = N(() => ({}), []);
-  return /* @__PURE__ */ e.jsx(ds.Provider, { value: o, children: /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
-    /* @__PURE__ */ e.jsx(de, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ e.jsx("div", { className: `h-[8px] w-[8px] rounded-full ${l ? "bg-blue-500" : "bg-gray-300"}` }),
-      t.heading
-    ] }) }),
-    /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: P.Children.toArray(
-      t.items.map((a) => me(a, "component") ? P.createElement(a.component, { key: a.label }) : me(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...a }, a.label) : a.styleType === "accordion" && r(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(is, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Se, { ...a }, a.label))
-    ) })
-  ] }) });
-}, cs = ({
-  item: t,
-  index: s,
-  canDelete: r,
-  onChange: l,
-  onRemove: o
-}) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-1 border-gray-400 py-2 ${r ? "border-b" : ""}`, children: [
-  /* @__PURE__ */ e.jsx(
-    "input",
-    {
-      name: "key",
-      onChange: (a) => l(a, s),
-      value: t.key,
-      placeholder: "Key",
-      className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
-      autoComplete: "off",
-      autoCapitalize: "off"
-    }
-  ),
-  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-1.5", children: [
-    /* @__PURE__ */ e.jsx(
-      "input",
-      {
-        name: "value",
-        onChange: (a) => b(t.key) ? {} : l(a, s),
-        value: t.value,
-        placeholder: "Value",
-        className: "w-full rounded border-gray-300 bg-background p-0.5 pl-2 text-sm focus-visible:outline-0",
-        autoComplete: "off",
-        autoCapitalize: "off"
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      _t,
-      {
-        onClick: o,
-        className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
-      }
-    )
-  ] })
-] }), ps = ({ section: t }) => {
-  var m;
-  const { setSyncState: s } = gr(), r = G(), [l, o] = w([]), [a] = Te(), d = Ue(), i = `${u(a, "0.prop")}_attrs`;
-  ae.useEffect(() => {
-    const h = C(u(r, i), (x, f) => ({ key: f, value: x }));
-    b(h) ? o([]) : o(h);
-  }, [u(r, i)]);
-  const n = () => o([...l, { key: "", value: "" }]), p = (h) => {
-    const x = je(l, (f, T) => h !== T);
-    c(x);
-  }, g = (h, x) => {
-    const f = [...l];
-    f[x][h.target.name] = h.target.value, c(f);
-  }, c = ae.useCallback(
-    (h = []) => {
-      const x = {};
-      pe(h, (f) => {
-        b(f.key) || Ee(x, f.key, f.value);
-      }), d([u(r, "_id")], { [i]: x }), s("UNSAVED");
-    },
-    [r, s, d, i]
-  );
-  return /* @__PURE__ */ e.jsxs(ie, { value: t.heading, children: [
-    /* @__PURE__ */ e.jsx(de, { className: "px-3 py-2 text-xs hover:no-underline", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ e.jsx(
-        "div",
-        {
-          className: `h-[8px] w-[8px] rounded-full ${b(u(r, i)) ? "bg-gray-300" : "bg-blue-500"}`
-        }
-      ),
-      "Attributes"
-    ] }) }),
-    /* @__PURE__ */ e.jsx(ce, { className: "bg-gray-100 px-3.5 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "no-scrollbar flex min-h-max flex-col gap-y-2 overflow-y-auto bg-gray-100 p-px", children: [
-      /* @__PURE__ */ e.jsxs(Re, { className: "mt-2 flex w-full items-center justify-between", children: [
-        "Add Custom attributes",
-        /* @__PURE__ */ e.jsxs(
-          "div",
-          {
-            className: `flex h-6 w-max items-center justify-center gap-x-0.5 rounded-full border p-1 px-2 text-xs ${!b(l) && b((m = ve(l)) == null ? void 0 : m.key) ? "cursor-not-allowed border-gray-400 text-gray-400" : "cursor-pointer border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white"}`,
-            onClick: () => {
-              var h;
-              !b(l) && b((h = ve(l)) == null ? void 0 : h.key) || n();
-            },
-            children: [
-              /* @__PURE__ */ e.jsx(ke, { width: 12, height: 12 }),
-              " Add"
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
-        b(l) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
-        ae.Children.toArray(
-          C(l, (h, x) => {
-            const f = l.length > 0 && x < l.length - 1;
-            return /* @__PURE__ */ e.jsx(
-              cs,
-              {
-                item: h,
-                index: x,
-                canDelete: f,
-                onChange: g,
-                onRemove: () => p(x)
-              }
-            );
-          })
-        )
-      ] })
-    ] }) })
-  ] });
-};
-function us() {
-  const [t, s] = Qe(), { flexChild: r, gridChild: l } = hr(), [, o] = Hr(mr), { t: a } = We(), [d] = Te();
-  return b(d) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
-    /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: a("no_styling_block_selected") }),
-    /* @__PURE__ */ e.jsxs("p", { className: "text-xs ", children: [
-      "Hint: Styling allowed blocks are highlighted with",
-      " ",
-      /* @__PURE__ */ e.jsx("span", { className: "border border-orange-500 p-px", children: "orange" }),
-      " border"
-    ] })
-  ] }) }) : (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ e.jsxs("div", { onClick: () => o(!1), className: "flex h-full flex-col", children: [
-      /* @__PURE__ */ e.jsx("div", { className: "flex flex-col space-x-4 space-y-3 border-b h-12 border-border px-4 py-1", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-1.5", children: [
-        /* @__PURE__ */ e.jsx(Re, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
-        /* @__PURE__ */ e.jsxs(yr, { defaultValue: t, onValueChange: (i) => s(i), children: [
-          /* @__PURE__ */ e.jsx(br, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(fr, { placeholder: "State" }) }),
-          /* @__PURE__ */ e.jsxs(vr, { children: [
-            /* @__PURE__ */ e.jsx(H, { value: "", children: "Normal" }),
-            /* @__PURE__ */ e.jsx(H, { value: "hover", children: "Hover" }),
-            /* @__PURE__ */ e.jsx(H, { value: "active", children: "Active" }),
-            /* @__PURE__ */ e.jsx(H, { value: "focus", children: "Focus" }),
-            /* @__PURE__ */ e.jsx(H, { value: "before", children: "Before" }),
-            /* @__PURE__ */ e.jsx(H, { value: "after", children: "After" }),
-            /* @__PURE__ */ e.jsx(H, { value: "only", children: "Only" }),
-            /* @__PURE__ */ e.jsx(H, { value: "first", children: "First" }),
-            /* @__PURE__ */ e.jsx(H, { value: "last", children: "Last" }),
-            /* @__PURE__ */ e.jsx(H, { value: "first-letter", children: "First Letter" }),
-            /* @__PURE__ */ e.jsx(H, { value: "first-line", children: "First Line" }),
-            /* @__PURE__ */ e.jsx(H, { value: "disabled", children: "Disabled" })
-          ] })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ e.jsx(et, { className: "no-scrollbar -mx-1 flex-1 max-h-full overflow-y-hidden overflow-x-hidden", children: /* @__PURE__ */ e.jsxs(Ge, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
-        r && /* @__PURE__ */ e.jsx(be, { section: Yr }),
-        l ? /* @__PURE__ */ e.jsx(be, { section: Xr }) : null,
-        Zr.map((i) => /* @__PURE__ */ e.jsx(be, { section: i }, i.heading)),
-        /* @__PURE__ */ e.jsx(ps, { section: { heading: "Attributes" } })
-      ] }) })
-    ] })
-  );
-}
-const xs = {
-  px: 1,
-  "%": 1,
-  em: 100,
-  rem: 100,
-  ch: 1,
-  vw: 1,
-  vh: 1,
-  "-": 1,
-  deg: 1,
-  ms: 0.1
-}, hl = () => {
-  const t = G(), { t: s } = We(), [r, l] = P.useState(""), [o, a] = P.useState({
-    onDrag: (n) => n,
-    onDragEnd: (n) => n,
-    dragStartY: 0,
-    dragging: !1,
-    dragStartValue: 0,
-    dragUnit: "",
-    negative: !1,
-    cssProperty: ""
-  }), d = fe(
-    (n) => {
-      const p = !u(o, "negative", !1), g = u(o, "cssProperty", "");
-      let c = parseFloat(o.dragStartValue);
-      c = _e(c) ? 0 : c;
-      let m = xs[o.dragUnit];
-      (z(g, "scale") || g === "opacity") && (m = 10);
-      let x = (o.dragStartY - n.pageY) / m + c;
-      p && x < 0 && (x = 0), g === "opacity" && x > 1 && (x = 1), o.onDrag(`${x}`), l(`${x}`);
-    },
-    [o],
-    50
-  ), i = A(() => {
-    setTimeout(() => o.onDragEnd(`${r}`), 100), a({
-      onDrag: (n) => n,
-      onDragEnd: (n) => n,
-      dragStartY: 0,
-      dragging: !1,
-      dragStartValue: 0,
-      dragUnit: "",
-      negative: !1,
-      cssProperty: ""
-    });
-  }, [o, r, a]);
-  return wt(t) ? /* @__PURE__ */ e.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-4 rounded-xl p-4", children: [
-    /* @__PURE__ */ e.jsx(Ze, { className: "mx-auto text-3xl" }),
-    /* @__PURE__ */ e.jsx("h1", { children: s("no_block_selected_for_styling") })
-  ] }) }) : /* @__PURE__ */ e.jsx(rt, { children: /* @__PURE__ */ e.jsxs(nt.Provider, { value: { setDragData: a }, children: [
-    o.dragging ? /* @__PURE__ */ e.jsx(
-      "div",
-      {
-        onMouseMove: d,
-        onMouseUp: () => i(),
-        className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10 "
-      }
-    ) : null,
-    /* @__PURE__ */ e.jsxs(jr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
-      /* @__PURE__ */ e.jsxs(wr, { className: "mx-1 grid grid-cols-2", children: [
-        /* @__PURE__ */ e.jsx(Ae, { value: "settings", children: "Settings" }),
-        /* @__PURE__ */ e.jsx(Ae, { value: "styling", children: "Styling" })
-      ] }),
-      /* @__PURE__ */ e.jsx(
-        De,
-        {
-          value: "settings",
-          className: "no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",
-          children: /* @__PURE__ */ e.jsx(et, { className: "no-scrollbar -mx-1 pb-5 flex-1 max-h-full overflow-y-hidden overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Fr, {}) })
-        }
-      ),
-      /* @__PURE__ */ e.jsx(De, { value: "styling", className: "flex-1 h-full overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(us, {}) })
-    ] })
-  ] }) });
-};
-export {
-  hl as default
-};