@chaibuilder/sdk 1.1.14 → 1.1.16

package/dist/Settings-iLeODb_n.js

@@ -0,0 +1,2188 @@
+import { j as e } from "./jsx-runtime-NV737rRe.js";
+import * as ne from "react";
+import $, { useState as j, useMemo as _, useEffect as M, useCallback as B, memo as ct, createContext as Oe, useContext as le } from "react";
+import { useThrottledCallback as ve } from "@react-hookz/web";
+import { f as ue, L as ie, o as pt, M as ut, c as A, g, h as ge, N as gt, O as Y, P as se, a as m, d as C, j as xt, l as we, b as je, s as Me, k as yt, Q as ht, u as bt, R as mt, S as Ve, e as W, T as ft, p as vt, U as ze, V as wt, n as U, W as Ye, t as be, A as jt } from "./lodash-3gkdNK5u.js";
+import { useTranslation as K } from "react-i18next";
+import { PlusIcon as Ne, Cross2Icon as Xe, EyeOpenIcon as Ct, EyeClosedIcon as He, BorderAllIcon as P, WidthIcon as T, HeightIcon as R, ArrowUpIcon as Q, ArrowRightIcon as ee, ArrowDownIcon as te, ArrowLeftIcon as re, ArrowTopLeftIcon as kt, ArrowTopRightIcon as Nt, ArrowBottomRightIcon as _t, ArrowBottomLeftIcon as St, AlignLeftIcon as Tt, AlignCenterHorizontallyIcon as Rt, AlignRightIcon as Vt, StretchHorizontallyIcon as Ht, FontItalicIcon as Bt, UnderlineIcon as Dt, OverlineIcon as $t, LetterCaseUppercaseIcon as It, Cross1Icon as Pt, InfoCircledIcon as _e, MinusIcon as At, BoxIcon as Fe, RowSpacingIcon as Lt, TriangleDownIcon as Et, CrossCircledIcon as Ot, TrashIcon as Mt, MixerHorizontalIcon as Ze } from "@radix-ui/react-icons";
+import { b0 as zt, b1 as Yt, B as xe, b2 as Xt, b3 as Ft, b4 as Zt, b5 as Wt, b6 as Ut, b7 as Kt, b8 as qt, a6 as q, am as Gt, an as Jt, ao as Qt, b9 as er, ak as tr, ba as rr, al as sr, aD as X, aE as F, aG as Z, bb as lr, bc as or, bd as ar, be as nr, bf as ir, bg as dr, p as We, ac as Ue, i as cr, bh as Ke, bi as de, bj as ce, bk as pe, aj as Se, P as qe, a3 as Ge, j as Je, aI as Te, bl as pr, bm as ur, a4 as ye, W as gr, a9 as Qe, R as Be, ag as xr, ad as yr, bn as hr, aq as br, ar as mr, as as fr, at as vr, au as V, bo as et, ax as wr, ay as jr, az as De, aA as $e } from "./index-0OqmBgqo.js";
+import { R as Cr } from "./controls-kEuiMMDf.js";
+import { Check as kr, EditIcon as Nr, TrashIcon as _r } from "lucide-react";
+import { getBlockComponent as tt, getChaiDataProviders as Sr } from "@chaibuilder/runtime";
+import { E as rt, u as st } from "./index-TWBwhGkh.js";
+import Tr from "@rjsf/core";
+import Rr from "@rjsf/validator-ajv8";
+import { useAtom as Vr } from "jotai";
+import Hr from "react-autosuggest";
+import Br from "fuse.js";
+import { A as Dr, C as he, e as $r } 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 Pr = $.lazy(() => import("react-json-view"));
+function Ar(r) {
+  const l = [], t = {};
+  function o(s, d) {
+    ue(d, (a, c) => {
+      const i = s ? `${s}.${c}` : c, p = ie(a) ? "list" : typeof a;
+      l.push(i), t[i] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !ie(a) && o(i, a);
+    });
+  }
+  return o("", pt(r, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: l, pathsType: t };
+}
+const Ce = ({ data: r, fullView: l }) => {
+  if (!r)
+    return null;
+  const t = typeof r;
+  return l ? typeof r == "object" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx("div", { className: "h-3" }),
+    /* @__PURE__ */ e.jsx(rt, { children: /* @__PURE__ */ e.jsx(
+      Pr,
+      {
+        style: { maxHeight: "40vh", overflowY: "auto" },
+        name: "Content",
+        enableClipboard: !1,
+        displayObjectSize: !1,
+        displayDataTypes: !1,
+        src: r,
+        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: " }),
+    r
+  ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-[10px] text-gray-800/50 leading-3 whitespace-nowrap overflow-hidden w-full", children: ut(t === "object" ? JSON.stringify(r) : r, { length: 40 }) });
+}, Ie = ({
+  type: r,
+  value: l = "",
+  setValue: t,
+  data: o,
+  onChange: s,
+  dataType: d,
+  appliedBindings: a
+}) => {
+  const { paths: c, pathsType: i } = Ar(o), p = r === "PROP" ? tt(o == null ? void 0 : o._type) : {}, h = r === "PROP", [n, y] = j(!1), x = _(() => r === "PROP" ? c.filter(
+    (u) => !A(a, u) && g(p, `props.${ge(gt(u, "."))}.binding`)
+  ) : c.filter((u) => d === g(i, u, "")), [r, c, a, d, p]);
+  return M(() => {
+    l && s(l);
+  }, [l, 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(se(r)) }),
+      /* @__PURE__ */ e.jsxs(zt, { open: n, onOpenChange: y, children: [
+        /* @__PURE__ */ e.jsx(Yt, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+          xe,
+          {
+            variant: "outline",
+            size: "sm",
+            className: ` ${m(l) ? "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: l ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              /* @__PURE__ */ e.jsxs("span", { className: "text-sm pr-8", children: [
+                h && /* @__PURE__ */ e.jsx("span", { className: "text-[10px] text-purple-500 bg-purple-100 px-2 py-0.5 mr-2 rounded-full", children: Y(d) }),
+                l
+              ] }),
+              /* @__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 ",
+              Y(se(r))
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ e.jsx(Xt, { className: "p-0 z-[999] min-w-[300px]", side: "right", align: "start", children: /* @__PURE__ */ e.jsxs(Ft, { children: [
+          /* @__PURE__ */ e.jsx(Zt, { placeholder: `Choose ${se(r)}...` }),
+          /* @__PURE__ */ e.jsxs(Wt, { children: [
+            /* @__PURE__ */ e.jsx(Ut, { children: "No results found." }),
+            /* @__PURE__ */ e.jsx(Kt, { children: C(x, (u) => /* @__PURE__ */ e.jsxs(
+              qt,
+              {
+                value: u,
+                className: `cursor-pointer ${h ? "flex justify-between items-center" : "flex flex-col items-start justify-start"}`,
+                onSelect: (f) => {
+                  t(xt(x, (k) => k === f) || null), y(!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 ${l === u ? "" : "opacity-0"}` }),
+                    u
+                  ] }),
+                  h ? /* @__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: Y(g(i, u, "")) }) }) : /* @__PURE__ */ e.jsx("div", { className: "pl-6", children: /* @__PURE__ */ e.jsx(Ce, { data: g(o, u) }) })
+                ]
+              },
+              u
+            )) })
+          ] })
+        ] }) })
+      ] })
+    ] }),
+    !h && !m(l) && /* @__PURE__ */ e.jsx("div", { className: "pt-2", children: /* @__PURE__ */ e.jsx(Ce, { data: g(o, l, ""), fullView: !0 }) })
+  ] });
+}, Lr = ({
+  appliedBindings: r = [],
+  onAddBinding: l,
+  editMode: t,
+  item: o
+}) => {
+  const [s, d] = j(t ? o.key : ""), [a, c] = j(t ? o.value : ""), i = q(), [p] = st(), h = B(
+    (x, u) => {
+      if (m(x))
+        return "";
+      {
+        const f = g(u === "PROP" ? i : p, x, "");
+        if (ie(f))
+          return "list";
+        const k = typeof f;
+        return k === "string" ? "text" : k === "object" ? "model" : k;
+      }
+    },
+    [i, p]
+  ), [n, y] = j(t ? h(o.key, "PROP") : "");
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs(Gt, { 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(
+        Ie,
+        {
+          type: "PROP",
+          isDisabled: !1,
+          placeholder: "Enter prop key",
+          value: s,
+          setValue: d,
+          onChange: (x) => {
+            const u = h(x, "PROP");
+            d(x), n !== u && c(""), y(u);
+          },
+          data: i,
+          dataType: n,
+          appliedBindings: r
+        }
+      ),
+      /* @__PURE__ */ e.jsx("div", { className: "h-2" }),
+      /* @__PURE__ */ e.jsx(
+        Ie,
+        {
+          type: "PATH",
+          isDisabled: m(s),
+          placeholder: "Enter data path",
+          value: a,
+          setValue: c,
+          onChange: (x) => {
+            const u = h(x, "PATH");
+            c(n === u ? x : "");
+          },
+          data: p,
+          dataType: n,
+          appliedBindings: r
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e.jsx(er, { children: /* @__PURE__ */ e.jsx(
+      xe,
+      {
+        type: "submit",
+        className: "mt-4",
+        disabled: m(s) && m(a),
+        onClick: () => l({ key: s, value: a }),
+        children: "Save"
+      }
+    ) })
+  ] });
+}, lt = ({ disabled: r, children: l, onAddBinding: t, appliedBindings: o, editMode: s = !0, item: d = {} }) => {
+  const [a, c] = j(!1);
+  return /* @__PURE__ */ e.jsxs(tr, { children: [
+    /* @__PURE__ */ e.jsx(rr, { disabled: r, asChild: !0, onClick: () => c(!0), children: l }),
+    a && /* @__PURE__ */ e.jsx(sr, { children: /* @__PURE__ */ e.jsx(
+      Lr,
+      {
+        item: d,
+        editMode: s,
+        appliedBindings: o,
+        onAddBinding: (i) => {
+          t(i), c(!1);
+        }
+      }
+    ) })
+  ] });
+}, Er = ({
+  item: r,
+  onAddBinding: l,
+  onRemove: t,
+  selectedBlock: o,
+  dataProvider: s,
+  appliedBindings: d
+}) => {
+  const [a, c] = j("string"), i = (p, h) => {
+    if (m(p))
+      return "";
+    {
+      const n = g(h === "PROP" ? o : s, p, "");
+      if (ie(n))
+        return "list";
+      const y = typeof n;
+      return y === "string" ? "text" : y === "object" ? "model" : y;
+    }
+  };
+  return M(() => c(() => i(r.key, "PROP")), [r.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: r.key }),
+    /* @__PURE__ */ e.jsx("div", { className: "font-medium leading-5", children: r.value }),
+    /* @__PURE__ */ e.jsx(Ce, { data: g(s, r.value, "") }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ e.jsx(lt, { editMode: !0, onAddBinding: l, appliedBindings: d, item: r, 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(
+        _r,
+        {
+          onClick: () => t(),
+          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"
+        }
+      )
+    ] }),
+    !m(a) && !m(r.key) && /* @__PURE__ */ e.jsx("div", { className: "mt-px absolute right-0 top-1 text-purple-600 text-[10px] flex items-center font-medium h-4 px-2 rounded-full", children: Y(a) })
+  ] });
+}, Or = ({ bindingData: r, onChange: l }) => {
+  const t = q(), [o] = st(), s = Sr(), [d, a] = j(
+    C(r, (n, y) => ({ key: y, value: n }))
+  );
+  M(() => {
+    a(C(r, (n, y) => ({ key: y, value: n })));
+  }, [t == null ? void 0 : t._id]);
+  const c = _(() => {
+    if (m(o))
+      return !0;
+    if (m(d))
+      return !1;
+    const n = we(d);
+    return m(n == null ? void 0 : n.key) || m(n == null ? void 0 : n.value);
+  }, [o, d]), i = (n) => {
+    const y = je(d, (x) => x.key !== n.key);
+    a([...y, n]), h([...y, n]);
+  }, p = (n) => {
+    const y = je(d, (x, u) => n !== u);
+    h([...y]);
+  }, h = B(
+    (n = []) => {
+      if (a(n), m(n)) {
+        l({});
+        return;
+      }
+      const y = {};
+      ue(n, (x) => {
+        !m(x == null ? void 0 : x.key) && !m(x == null ? void 0 : x.value) && Me(y, x.key, x.value);
+      }), l(y);
+    },
+    [l]
+  );
+  return m(s) ? /* @__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(d, (n, y) => /* @__PURE__ */ e.jsx(
+      Er,
+      {
+        item: n,
+        onAddBinding: i,
+        onRemove: () => p(y),
+        selectedBlock: t,
+        dataProvider: o,
+        appliedBindings: C(d, "key")
+      },
+      n.key
+    )),
+    /* @__PURE__ */ e.jsxs(X, { delayDuration: 200, children: [
+      /* @__PURE__ */ e.jsx(F, { className: "w-full", children: /* @__PURE__ */ e.jsx(
+        lt,
+        {
+          disabled: c,
+          appliedBindings: C(d, "key"),
+          onAddBinding: i,
+          children: /* @__PURE__ */ e.jsx(
+            "span",
+            {
+              className: `w-full px-5 py-1.5 text-xs rounded-md font-medium duration-200 ${c ? "cursor-not-allowed bg-gray-200 text-gray-400" : "bg-blue-700/20 text-blue-800 hover:bg-blue-700/30"}`,
+              children: m(o) ? /* @__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"
+            }
+          )
+        }
+      ) }),
+      c && /* @__PURE__ */ e.jsx(Z, { sideOffset: -55, className: "text-[11px]", children: m(o) ? "No data provider has been set up for this page." : "Complete last added data binding to add more" })
+    ] })
+  ] });
+}, Mr = () => /* @__PURE__ */ e.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), me = ct(({ createHistorySnapshot: r, properties: l, formData: t, onChange: o }) => {
+  const s = { type: "object", properties: {} }, d = {};
+  return Object.keys(l).forEach((a) => {
+    const c = l[a];
+    if (A(["slot", "styles"], c.type))
+      return;
+    const i = a;
+    s.properties[i] = lr(c), d[i] = or(c);
+  }), /* @__PURE__ */ e.jsx(
+    Tr,
+    {
+      widgets: {
+        binding: Mr,
+        richtext: ar,
+        icon: nr,
+        image: ir
+      },
+      fields: { link: dr },
+      idSeparator: ".",
+      autoComplete: "off",
+      omitExtraData: !1,
+      liveOmit: !1,
+      liveValidate: !0,
+      validator: Rr,
+      uiSchema: d,
+      onBlur: r,
+      schema: s,
+      formData: t,
+      onChange: o
+    }
+  );
+});
+function zr() {
+  const r = q(), { createSnapshot: l } = We(), t = Ue(), o = tt(r._type), s = { ...r }, d = cr("dataBindingSupport", !1), a = () => l(), c = ({ formData: n }, y) => {
+    if (y) {
+      const x = y.replace("root.", "");
+      t([r._id], { [x]: g(n, x) });
+    }
+  }, i = {
+    _name: Cr({
+      title: "Name",
+      default: g(r, "_name", r._type)
+    })
+  }, p = yt(g(s, "_bindings", {})), h = _(() => {
+    const n = ht(g(o, "props", {}));
+    return d && ue(p, (y) => delete n[y]), n;
+  }, [o, p, d]);
+  return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-hidden", children: [
+    /* @__PURE__ */ e.jsx(
+      me,
+      {
+        onChange: c,
+        createHistorySnapshot: a,
+        formData: s,
+        properties: i
+      }
+    ),
+    /* @__PURE__ */ e.jsx("hr", { className: "mt-4" }),
+    d ? /* @__PURE__ */ e.jsxs(Ke, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "h-full w-full", children: [
+      /* @__PURE__ */ e.jsxs(de, { value: "BINDING", children: [
+        /* @__PURE__ */ e.jsx(ce, { 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 ${m(g(r, "_bindings", {})) ? "bg-gray-300" : "bg-blue-500"}`
+            }
+          ),
+          "Data Binding"
+        ] }) }),
+        /* @__PURE__ */ e.jsx(pe, { className: "pt-4 px-4", children: /* @__PURE__ */ e.jsx(
+          Or,
+          {
+            bindingData: g(s, "_bindings", {}),
+            onChange: (n) => {
+              c({ formData: { ...s, _bindings: n } }, "root._bindings");
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ e.jsxs(de, { value: "STATIC", children: [
+        /* @__PURE__ */ e.jsx(ce, { 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(pe, { className: "pt-4", children: [
+          m(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, bt).join(", ") }),
+            " ",
+            p.length === 1 ? "property" : "properties",
+            ". Remove data binding to edit static content."
+          ] }),
+          /* @__PURE__ */ e.jsx(
+            me,
+            {
+              onChange: c,
+              createHistorySnapshot: a,
+              formData: s,
+              properties: h
+            }
+          )
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ e.jsx(
+      me,
+      {
+        onChange: c,
+        createHistorySnapshot: a,
+        formData: s,
+        properties: h
+      }
+    ),
+    /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
+  ] });
+}
+const Pe = new Br(Dr, {
+  isCaseSensitive: !1,
+  threshold: 0.2,
+  minMatchCharLength: 2,
+  keys: ["name"]
+});
+function Yr() {
+  var L;
+  const [r] = Se(), l = q(), t = qe(), o = Ge(), [s] = Je(), [d, a] = j(""), c = (L = ge(r)) == null ? void 0 : L.prop, i = mt((g(l, c, "").replace(Ir, "").split(",").pop() || "").split(" "), m), p = () => {
+    const w = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    t(s, w, !0), a("");
+  }, [h, n] = j([]), y = ({ value: w }) => {
+    const I = w.trim().toLowerCase(), E = I.match(/.+:/g);
+    let N = [];
+    if (E && E.length > 0) {
+      const [D] = E, z = I.replace(D, "");
+      N = Pe.search(z).map((b) => ({
+        ...b,
+        item: { ...b.item, name: D + b.item.name }
+      }));
+    } else
+      N = Pe.search(I);
+    n(C(N, "item"));
+  }, x = () => {
+    n([]);
+  }, u = (w) => w.name, f = (w) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: w.name }), k = {
+    autoComplete: "off",
+    autoCorrect: "off",
+    autoCapitalize: "off",
+    spellCheck: !1,
+    placeholder: "Enter class name",
+    value: d,
+    onKeyDown: (w) => {
+      w.key === "Enter" && d.trim() !== "" && p();
+    },
+    onChange: (w, { newValue: I }) => a(I),
+    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 ${h.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(Te, { 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(
+            Hr,
+            {
+              suggestions: h,
+              onSuggestionsFetchRequested: y,
+              onSuggestionsClearRequested: x,
+              getSuggestionValue: u,
+              renderSuggestion: f,
+              inputProps: k,
+              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: d.trim() === "",
+              size: "sm",
+              children: /* @__PURE__ */ e.jsx(Ne, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
+          m(i) && /* @__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" }),
+          ne.Children.toArray(
+            i.map((w) => /* @__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: [
+                  w,
+                  /* @__PURE__ */ e.jsx(
+                    Xe,
+                    {
+                      onClick: () => o(s, [w]),
+                      className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
+                    }
+                  )
+                ]
+              },
+              w
+            ))
+          )
+        ] })
+      ]
+    }
+  );
+}
+const H = ["px", "%", "em", "rem", "ch", "vh", "vw"], Xr = {
+  heading: "flex.heading",
+  items: [
+    { type: "arbitrary", label: "flex.basis", units: H, 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" }
+  ]
+}, Fr = {
+  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" }
+  ]
+}, Zr = [
+  {
+    heading: "layout.heading",
+    items: [
+      { type: "arbitrary", label: "layout.width", units: H.concat("auto"), property: "width" },
+      { type: "arbitrary", label: "layout.height", units: H.concat("auto"), property: "height" },
+      {
+        styleType: "multiple",
+        label: "layout.margin",
+        negative: !0,
+        units: [...H, "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: H.concat("auto"), property: "minWidth" },
+          { type: "arbitrary", label: "size.min_height", units: H.concat("auto"), property: "minHeight" }
+        ]
+      },
+      {
+        styleType: "accordion",
+        heading: "size.max_width_height",
+        items: [
+          { type: "arbitrary", label: "size.max_width", units: H.concat("auto"), property: "maxWidth" },
+          { type: "arbitrary", label: "size.max_height", units: H.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: H },
+      {
+        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: H },
+          { 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: "typography.font", label: "typography.font" },
+      { type: "arbitrary", property: "typography.size", label: "typography.size", units: H },
+      { type: "arbitrary", property: "typography.height", label: "typography.height", units: H.concat("-") },
+      { type: "range", property: "typography.weight", label: "typography.weight" },
+      { type: "color", property: "typography.color", label: "typography.color" },
+      {
+        styleType: "accordion",
+        heading: "typography.alignments",
+        items: [
+          { type: "dropdown", property: "typography.align", label: "typography.align" },
+          { type: "dropdown", property: "typography.valign", label: "typography.valign" }
+        ]
+      },
+      {
+        styleType: "accordion",
+        heading: "typography.spacing_decoration_more",
+        items: [
+          { type: "dropdown", property: "typography.spacing", label: "typography.spacing" },
+          { type: "dropdown", property: "typography.decoration", label: "typography.decoration" },
+          { type: "range", property: "typography.thickness", label: "typography.thickness" },
+          { type: "dropdown", property: "typography.transform", label: "typography.transform" }
+        ]
+      },
+      {
+        styleType: "accordion",
+        heading: "typography.whitespace_breaks",
+        items: [
+          { type: "dropdown", property: "typography.whitespace", label: "typography.whitespace" },
+          { type: "dropdown", property: "typography.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: Yr }]
+  }
+], 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: P,
+  gapX: T,
+  gapY: R,
+  spaceX: T,
+  spaceY: R,
+  overscroll: P,
+  overscrollX: T,
+  overscrollY: R,
+  overflow: P,
+  overflowX: T,
+  overflowY: R,
+  top: Q,
+  right: ee,
+  bottom: te,
+  left: re,
+  inset: P,
+  insetX: T,
+  insetY: R,
+  border: P,
+  borderX: T,
+  borderY: R,
+  borderTop: Q,
+  borderRight: ee,
+  borderBottom: te,
+  borderLeft: re,
+  borderRadius: P,
+  borderRadiusX: T,
+  borderRadiusY: R,
+  borderRadiusTop: Q,
+  borderRadiusRight: ee,
+  borderRadiusBottom: te,
+  borderRadiusLeft: re,
+  borderRadiusTopLeft: kt,
+  borderRadiusTopRight: Nt,
+  borderRadiusBottomRight: _t,
+  borderRadiusBottomLeft: St,
+  divideXWidth: T,
+  divideYWidth: R,
+  scale: P,
+  scaleX: T,
+  scaleY: R,
+  skewX: T,
+  skewY: R,
+  translateX: T,
+  translateY: R,
+  // padding
+  padding: P,
+  paddingX: T,
+  paddingY: R,
+  paddingTop: Q,
+  paddingRight: ee,
+  paddingBottom: te,
+  paddingLeft: re,
+  // margin
+  margin: P,
+  marginX: T,
+  marginY: R,
+  marginTop: Q,
+  marginRight: ee,
+  marginBottom: te,
+  marginLeft: re,
+  // text-align
+  textLeft: Tt,
+  textCenter: Rt,
+  textRight: Vt,
+  textJustify: Ht,
+  // font style
+  italic: Bt,
+  // "not-italic": "",
+  // decoration
+  underline: Dt,
+  overline: $t,
+  // 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": Xe,
+  // 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: Pt
+}, oe = Oe({ canReset: !1, canChange: !0 }), Wr = ({ children: r, canReset: l = !1, canChange: t = !0 }) => (
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  /* @__PURE__ */ e.jsx(oe.Provider, { value: { canReset: l, canChange: t }, children: r })
+), at = ({ label: r, property: l, onChange: t }) => {
+  const o = _(() => g(he, `${l}.classes`, [""]), [l]), s = ae(l), d = _(() => g(s, "cls", ""), [s]), { canChange: a } = le(oe), c = /\[.*\]/g.test(d);
+  return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded " : "grow", children: c ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ e.jsx(pr, { className: "w-[70%] rounded py-1", readOnly: !0, value: d }),
+    /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx(F, { 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(_e, {}) }) }),
+      /* @__PURE__ */ e.jsx(Z, { children: "Current value is using a Tailwind arbitrary value." })
+    ] })
+  ] }) : /* @__PURE__ */ e.jsx(
+    ke,
+    {
+      rounded: r,
+      onChange: (i) => t(i, l),
+      selected: d,
+      options: o,
+      disabled: !a
+    }
+  ) });
+};
+function ke({ selected: r, onChange: l, rounded: t = !1, options: o, disabled: s = !1 }) {
+  const d = r.replace(/.*:/g, "").trim(), { undo: a, redo: c } = We();
+  return /* @__PURE__ */ e.jsxs(
+    "select",
+    {
+      disabled: !o.length || s,
+      className: `${t ? "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: (i) => l(i.target.value),
+      onKeyDown: (i) => {
+        i.ctrlKey && (i.key === "z" && a(), i.key === "y" && c());
+      },
+      value: d,
+      children: [
+        /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
+        $.Children.toArray(
+          o.map((i) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: i, children: i }))
+        )
+      ]
+    }
+  );
+}
+const Ur = ({ property: r, onChange: l }) => {
+  const { canReset: t, canChange: o } = le(oe), s = ae(r), d = _(() => g(s, "cls", ""), [s]), a = _(() => g(he, `${r}.classes`, [""]), [r]), c = a.indexOf(d) > -1 ? a.indexOf(d) : 0, i = /\[.*\]/g.test(d);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: i ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: d }) : /* @__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: !o && (!t || c - 1 < 0),
+        onClick: () => l(Ve(a, c - 1), r),
+        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
+          At,
+          {
+            className: !o && (!t || c - 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: r, onChange: l }) }),
+    /* @__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: !o && (!t || c + 1 >= a.length),
+        onClick: () => l(Ve(a, c + 1), r),
+        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
+          Ne,
+          {
+            className: !o && (!t || c + 1 >= a.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+          }
+        ) })
+      }
+    )
+  ] }) });
+}, Kr = ({ property: r, onChange: l }) => {
+  const t = _(() => g(he, `${r}.classes`, [""]), [r]), { canChange: o } = le(oe), s = ae(r), d = _(() => g(s, "cls", ""), [s]);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: C(t, (a) => /* @__PURE__ */ e.jsxs(X, { children: [
+    /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        type: "button",
+        disabled: !o,
+        onClick: () => l(a, r),
+        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${d === a ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: $.createElement(g(ot, a, Fe))
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(Z, { children: Y(se(a)) })
+  ] })) });
+}, qr = {
+  backgroundColor: "bg",
+  textColor: "text",
+  borderColor: "border",
+  boxShadowColor: "shadow",
+  outlineColor: "outline",
+  divideColor: "divide",
+  fromColor: "from",
+  viaColor: "via",
+  toColor: "to",
+  ringColor: "ring",
+  ringOffsetColor: "ring-offset"
+}, Gr = ({ property: r, onChange: l }) => {
+  const t = ae(r), o = _(() => g(t, "cls", ""), [t]), { canChange: s } = le(oe), [d, a] = j([]), [c, i] = j({ color: "", shade: "" }), p = o.split("-"), h = g(p, "1", ""), n = g(p, "2", ""), y = B(
+    // eslint-disable-next-line no-shadow
+    (u) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(u) ? (a([]), i({ color: u })) : (a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), i((f) => ({ ...f, color: u, shade: f.shade ? f.shade : "500" })));
+    },
+    [a, i]
+  );
+  M(() => {
+    if (["current", "inherit", "transparent", "black", "white"].includes(h))
+      return a([]);
+    a(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
+  }, [h]);
+  const x = B(
+    // eslint-disable-next-line no-shadow
+    (u) => {
+      i({ color: h, shade: u });
+    },
+    [h]
+  );
+  return M(() => {
+    i({ color: "", shade: "" });
+  }, [t]), M(() => {
+    const f = `${g(qr, r, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
+    f.match(new RegExp(g(he, `${r}.regExp`, ""))) && l(f, r);
+  }, [c, l, 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(
+      ke,
+      {
+        disabled: !s,
+        rounded: !0,
+        selected: h,
+        onChange: y,
+        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(ke, { rounded: !0, selected: n, disabled: !h || !s, onChange: x, options: d }) })
+  ] });
+}, Ae = (r, l) => {
+  r = r.toLowerCase();
+  let t = r.trim().replace(/ |\+/g, "");
+  if ((t === "auto" || t === "none") && l.includes(t))
+    return { value: "", unit: t };
+  const o = l.length ? new RegExp(l.join("|"), "g") : /XXXXXX/g;
+  t = t.replace(o, "");
+  const s = r.match(o), d = s && s.length > 1, a = !m(t) && Number.isNaN(Number(t));
+  return d || a ? { error: "Invalid value" } : s && (s[0] === "auto" || s[0] === "none") ? { value: s[0], unit: "" } : { value: t, unit: s ? s[0] : "" };
+};
+const Jr = (r) => {
+  const l = 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 (A(r, "skew-"))
+    return { value: `${l}${t}`, unit: "deg" };
+  if (A(r, "rotate-"))
+    return { value: `${l}${t}`, unit: "deg" };
+  if (A(r, "opacity-"))
+    return { value: `${t / 100}`, unit: "-" };
+  if (A(r, "duration-") || A(r, "delay-"))
+    return { value: `${t}`, unit: "ms" };
+  if (A(r, "translate-") && !t.includes("/"))
+    return { value: `${l}${`${t / 4}`}`, unit: "rem" };
+  if (A(r, "scale-"))
+    return { value: `${l}${`${t / 100}`}`, unit: "-" };
+  if (W(r, "border")) {
+    const o = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
+    if (o)
+      return { value: o[0].split("-").pop(), unit: "px" };
+    if (r.match(/border-?(x|y|t|r|b|l)?/g))
+      return { value: "1", unit: "px" };
+  }
+  if (W(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 (W(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 (W(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 (W(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 [o, s] = C(t.split("/"), (d) => parseInt(d, 10));
+    return { value: l + (o / s * 100).toFixed(2).replace(".00", ""), unit: "%" };
+  }
+  return ft(parseFloat(t)) ? { value: `${l + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+};
+const Qr = (r) => {
+  if (m(r))
+    return { value: "", unit: "" };
+  const l = r.match(/\[.*\]/g);
+  if (l === null)
+    return es(r);
+  const t = g(l, "0", "").replace(/\[|\]/g, ""), o = r.startsWith("-") ? "-" : "", s = ge(t.match(/\d+.\d+|\d+/g));
+  return { value: `${o}${s}`, unit: t.replace(s, "") };
+}, es = (r) => m(r) ? { value: "", unit: "" } : Jr(r), nt = $.createContext({
+  setDragData: () => {
+  }
+}), ts = ({
+  unit: r,
+  currentValue: l,
+  onDrag: t,
+  onDragEnd: o,
+  onDragStart: s,
+  negative: d,
+  cssProperty: a
+}) => {
+  const { setDragData: c } = le(nt);
+  return /* @__PURE__ */ e.jsx(
+    "button",
+    {
+      type: "button",
+      onMouseDown: (i) => {
+        const p = {
+          onDrag: t,
+          onDragEnd: o,
+          dragging: !0,
+          dragStartY: i.pageY,
+          dragStartValue: `${l}`,
+          dragUnit: r,
+          negative: d,
+          cssProperty: a
+        };
+        s(p), c(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(Lt, {})
+    }
+  );
+}, rs = ({ onSelect: r, current: l, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((o) => /* @__PURE__ */ e.jsx(
+  xe,
+  {
+    className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
+    color: l === o ? "primary" : void 0,
+    size: "sm",
+    onClick: (s) => {
+      s.stopPropagation(), r(o);
+    },
+    children: o
+  },
+  o
+)) }), Le = 50, ss = (r) => {
+  const [l, t] = j(!1), [o, s] = j(""), { currentClass: d, onChange: a, classPrefix: c, cssProperty: i, units: p, negative: h } = r, [n, y] = j(i != null && i.toLowerCase().includes("width") ? "%" : p[0]), [x, u] = j(!1), [f, k] = j(""), [L, w] = j(!1), [I, E] = j(!1);
+  M(() => {
+    const { value: b, unit: v } = Qr(d);
+    if (v === "") {
+      s(b), y(i != null && i.toLowerCase().includes("width") ? "%" : ge(p));
+      return;
+    }
+    y(v), s(v === "class" || m(b) ? "" : b);
+  }, [d, i, p]);
+  const N = ve((b) => a(b), [a], Le), D = ve((b) => a(b, !1), [a], Le), z = B(
+    (b = !1) => {
+      const v = Ae(`${o}`, p);
+      if (g(v, "error", !1)) {
+        u(!0);
+        return;
+      }
+      const S = g(v, "unit") !== "" ? g(v, "unit") : n;
+      if (S === "auto" || S === "none") {
+        N(`${c}${S}`);
+        return;
+      }
+      if (g(v, "value") === "")
+        return;
+      const J = `${g(v, "value", "").startsWith("-") ? "-" : ""}${c}[${g(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      b ? D(J) : N(J);
+    },
+    [N, D, o, n, c, p]
+  ), G = B(
+    (b) => {
+      const v = Ae(`${o}`, p);
+      if (g(v, "error", !1)) {
+        u(!0);
+        return;
+      }
+      if (b === "auto" || b === "none") {
+        N(`${c}${b}`);
+        return;
+      }
+      if (g(v, "value") === "")
+        return;
+      const S = g(v, "unit") !== "" ? g(v, "unit") : b, J = `${g(v, "value", "").startsWith("-") ? "-" : ""}${c}[${g(v, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
+      N(J);
+    },
+    [N, o, c, p]
+  );
+  return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: n === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: d }),
+    /* @__PURE__ */ e.jsxs(X, { children: [
+      /* @__PURE__ */ e.jsx(F, { 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(_e, {}) }) }),
+      /* @__PURE__ */ e.jsx(Z, { 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(n) !== -1 ? null : /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          readOnly: n === "class",
+          onKeyPress: (b) => {
+            b.key === "Enter" && z();
+          },
+          onKeyDown: (b) => {
+            if (b.keyCode !== 38 && b.keyCode !== 40)
+              return;
+            b.preventDefault(), E(!0);
+            const v = vt(b.target.value);
+            let S = ze(v) ? 0 : v;
+            b.keyCode === 38 && (S += 1), b.keyCode === 40 && (S -= 1);
+            const O = `${S}`, dt = `${O.startsWith("-") ? "-" : ""}${c}[${O.replace("-", "")}${n === "-" ? "" : n}]`;
+            D(dt);
+          },
+          onKeyUp: (b) => {
+            I && (b.preventDefault(), E(!1));
+          },
+          onBlur: () => z(),
+          onChange: (b) => {
+            u(!1), s(b.target.value);
+          },
+          onClick: (b) => {
+            var v;
+            (v = b == null ? void 0 : b.target) == null || v.select(), t(!1);
+          },
+          value: L ? f : o,
+          className: "h-6 w-14 rounded rounded-r-none bg-background pl-2 text-sm focus-visible:outline-0 ".concat(
+            " ",
+            x ? "border-red-500 text-red-500" : "border-foreground/20"
+          )
+        }
+      ),
+      /* @__PURE__ */ e.jsxs(X, { open: l, delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => t(!l),
+            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: n }),
+              p.length > 1 ? /* @__PURE__ */ e.jsx(Et, {}) : null
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e.jsx(ur, { children: /* @__PURE__ */ e.jsx(Z, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          rs,
+          {
+            units: p,
+            current: n,
+            onSelect: (b) => {
+              t(!1), y(b), G(b);
+            }
+          }
+        ) }) })
+      ] })
+    ] }),
+    ["none", "auto"].indexOf(n) !== -1 || L ? null : /* @__PURE__ */ e.jsx(
+      ts,
+      {
+        onDragStart: () => w(!0),
+        onDragEnd: (b) => {
+          if (k(() => ""), w(!1), m(b))
+            return;
+          const v = `${b}`, O = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${n === "-" ? "" : n}]`;
+          N(O);
+        },
+        onDrag: (b) => {
+          if (m(b))
+            return;
+          k(b);
+          const v = `${b}`, O = `${v.startsWith("-") ? "-" : ""}${c}[${v.replace("-", "")}${n === "-" ? "" : n}]`;
+          D(O);
+        },
+        currentValue: o,
+        unit: n,
+        negative: h,
+        cssProperty: i
+      }
+    )
+  ] }) }) });
+}, ae = (r) => {
+  const l = ye();
+  return wt(l, { property: r });
+}, ls = (r, l) => {
+  const t = {
+    xs: 0,
+    sm: 1,
+    md: 2,
+    lg: 3,
+    xl: 4,
+    "2xl": 5
+  };
+  return t[g(r, "mq", "xs")] <= t[l];
+}, 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-"
+}, Ee = {
+  xs: "",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+}, as = (r) => `${r.toUpperCase()} ${Ee[r] ? `(${Ee[r]} & up)` : ""}`, Re = (r) => {
+  const { t: l } = K(), { type: t = "icons", label: o, property: s, onEmitChange: d = () => {
+  }, units: a, negative: c = !1 } = r, [i] = gr(), [p] = Qe(), [, h] = Be(), n = ae(s), y = qe(), x = Ge(), [u] = Je(), f = _(() => g(n, "fullCls", ""), [n]), k = B(
+    (D, z = !0) => {
+      const G = { dark: i, mq: h, mod: p, cls: D, property: s, fullCls: "" };
+      (i || p !== "") && (G.mq = "xs");
+      const b = $r(G);
+      y(u, [b], z);
+    },
+    [u, i, h, p, s, y]
+  ), L = B(() => {
+    x(u, [f]);
+  }, [u, f, x]), w = _(() => ls(n, h), [n, h]);
+  M(() => {
+    d(w, n);
+  }, [w, d, n]);
+  const [, , I] = Be(), E = B(
+    (D) => {
+      I({
+        xs: 400,
+        sm: 640,
+        md: 800,
+        lg: 1024,
+        xl: 1420,
+        "2xl": 1920
+      }[D]);
+    },
+    [I]
+  ), N = g(n, "dark", null) === i && g(n, "mod", null) === p && g(n, "mq", null) === h;
+  return /* @__PURE__ */ e.jsx(Wr, { canChange: w, canReset: n && 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] ${n && !N ? "text-foreground" : ""}`, children: l(o) }) }),
+    /* @__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(n, "cls", ""),
+            classPrefix: g(os, s, ""),
+            units: a || [],
+            onChange: k,
+            negative: c,
+            cssProperty: s
+          }
+        ) : null,
+        t === "icons" && /* @__PURE__ */ e.jsx(Kr, { property: s, onChange: k }),
+        t === "range" && /* @__PURE__ */ e.jsx(Ur, { property: s, onChange: k }),
+        t === "color" && /* @__PURE__ */ e.jsx(Gr, { property: s, onChange: k }),
+        t === "dropdown" && /* @__PURE__ */ e.jsx(at, { label: o, property: s, onChange: k })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "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(Ot, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && n ? /* @__PURE__ */ e.jsxs(X, { delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(F, { 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(_e, {})
+          }
+        ) }),
+        /* @__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(g(n, "mq")),
+            i && !n.dark ? "(Light mode)" : ""
+          ] }),
+          /* @__PURE__ */ e.jsx("br", {}),
+          /* @__PURE__ */ e.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => E(g(n, "mq")),
+              className: "block w-full cursor-default text-right font-semibold text-blue-500",
+              children: [
+                "Switch to ",
+                g(n, "mq").toUpperCase()
+              ]
+            }
+          )
+        ] }) }) })
+      ] }) : null })
+    ] })
+  ] }) });
+}, ns = ["px", "%", "em", "rem", "ch", "vh", "vw"], it = ({
+  label: r,
+  options: l,
+  borderB: t = !1,
+  borderT: o = !1,
+  type: s = "arbitrary",
+  units: d = ns,
+  negative: a = !1
+}) => {
+  const { t: c } = K(), [i, p] = j(l[0].key), h = ye(), n = B((y) => C(h, "property").includes(y), [h]);
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${o ? "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: c(r) }),
+          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: $.Children.toArray(
+            l.map(({ label: y, key: x }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(X, { children: [
+              /* @__PURE__ */ e.jsx(F, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => p(x),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === i ? " bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  children: [
+                    $.createElement("div", {
+                      className: n(x) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    }),
+                    $.createElement(g(ot, x, Fe), { className: "text-inherit w-3 h-3" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ e.jsx(Z, { children: Y(se(y)) })
+            ] }) }))
+          ) })
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
+          Re,
+          {
+            type: s,
+            units: [...d],
+            label: "",
+            property: i,
+            negative: a
+          }
+        ) })
+      ]
+    }
+  );
+}, is = ({ heading: r, items: l }) => {
+  const { t } = K(), o = ye(), s = _(() => {
+    const d = (i) => U(
+      i.map((p) => p.styleType === "multiple" ? C(p.options, "key") : p.property)
+    ), a = U(
+      l.map((i) => i.styleType === "accordion" ? d(i.items) : i.styleType === "multiple" ? C(i.options, "key") : i.property)
+    ), c = C(o, "property");
+    return Ye(a, c).length > 0;
+  }, [o, l]);
+  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),
+      s ? /* @__PURE__ */ e.jsx(
+        "span",
+        {
+          className: `ml-1 mr-2 inline-block h-[8px] w-[8px] rounded-full ${s ? "bg-blue-500" : "bg-gray-300"}`
+        }
+      ) : null
+    ] }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "p-2", children: l.map((d) => d.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...d }, d.label) : /* @__PURE__ */ e.jsx(Re, { ...d }, d.label)) })
+  ] });
+}, ds = Oe({}), fe = ({ section: r }) => {
+  const { t: l } = K(), t = ye(), o = B(
+    (a = []) => {
+      const c = {};
+      for (let p = 0; p < t.length; p++)
+        c[t[p].property] = t[p].cls;
+      let i = !0;
+      for (const p in a)
+        if (!be(c, p) || c[p] !== a[p]) {
+          i = !1;
+          break;
+        }
+      return i;
+    },
+    [t]
+  ), s = _(() => {
+    if (t.length > 0 && r.heading === "classes.heading")
+      return !0;
+    const a = (p) => U(
+      p.map((h) => h.styleType === "multiple" ? U(C(h.options, "key")) : h.property)
+    ), c = U(
+      r.items.map((p) => p.styleType === "accordion" ? a(p.items) : p.styleType === "multiple" ? U(C(p.options, "key")) : p.property)
+    ), i = C(t, "property");
+    return Ye(c, i).length > 0;
+  }, [t, r.heading, r.items]), d = _(() => ({}), []);
+  return /* @__PURE__ */ e.jsx(ds.Provider, { value: d, children: /* @__PURE__ */ e.jsxs(de, { value: r.heading, children: [
+    /* @__PURE__ */ e.jsx(ce, { 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 ${s ? "bg-blue-500" : "bg-gray-300"}` }),
+      l(r.heading)
+    ] }) }),
+    /* @__PURE__ */ e.jsx(pe, { className: "bg-gray-100 px-3.5 py-2", children: $.Children.toArray(
+      r.items.map((a) => be(a, "component") ? $.createElement(a.component, { key: a.label }) : be(a, "styleType") ? a.styleType === "multiple" ? /* @__PURE__ */ e.jsx(it, { ...a }, a.label) : a.styleType === "accordion" && o(a == null ? void 0 : a.conditions) ? /* @__PURE__ */ e.jsx(is, { ...a }, a.label) : null : /* @__PURE__ */ e.jsx(Re, { ...a }, a.label))
+    ) })
+  ] }) });
+}, cs = ({
+  item: r,
+  index: l,
+  canDelete: t,
+  onChange: o,
+  onRemove: s
+}) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-1 border-gray-400 py-2 ${t ? "border-b" : ""}`, children: [
+  /* @__PURE__ */ e.jsx(
+    "input",
+    {
+      name: "key",
+      onChange: (d) => o(d, l),
+      value: r.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: (d) => m(r.key) ? {} : o(d, l),
+        value: r.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(
+      Mt,
+      {
+        onClick: s,
+        className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
+      }
+    )
+  ] })
+] }), ps = ({ section: r }) => {
+  var y;
+  const { setSyncState: l } = xr(), t = q(), [o, s] = j([]), [d] = Se(), a = Ue(), c = `${g(d, "0.prop")}_attrs`;
+  ne.useEffect(() => {
+    const x = C(g(t, c), (u, f) => ({ key: f, value: u }));
+    m(x) ? s([]) : s(x);
+  }, [g(t, c)]);
+  const i = () => s([...o, { key: "", value: "" }]), p = (x) => {
+    const u = je(o, (f, k) => x !== k);
+    n(u);
+  }, h = (x, u) => {
+    const f = [...o];
+    f[u][x.target.name] = x.target.value, n(f);
+  }, n = ne.useCallback(
+    (x = []) => {
+      const u = {};
+      ue(x, (f) => {
+        m(f.key) || Me(u, f.key, f.value);
+      }), a([g(t, "_id")], { [c]: u }), l("UNSAVED");
+    },
+    [t, l, a, c]
+  );
+  return /* @__PURE__ */ e.jsxs(de, { value: r.heading, children: [
+    /* @__PURE__ */ e.jsx(ce, { 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 ${m(g(t, c)) ? "bg-gray-300" : "bg-blue-500"}`
+        }
+      ),
+      "Attributes"
+    ] }) }),
+    /* @__PURE__ */ e.jsx(pe, { 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(Te, { 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 ${!m(o) && m((y = we(o)) == null ? void 0 : y.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 x;
+              !m(o) && m((x = we(o)) == null ? void 0 : x.key) || i();
+            },
+            children: [
+              /* @__PURE__ */ e.jsx(Ne, { width: 12, height: 12 }),
+              " Add"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
+        m(o) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
+        ne.Children.toArray(
+          C(o, (x, u) => {
+            const f = o.length > 0 && u < o.length - 1;
+            return /* @__PURE__ */ e.jsx(
+              cs,
+              {
+                item: x,
+                index: u,
+                canDelete: f,
+                onChange: h,
+                onRemove: () => p(u)
+              }
+            );
+          })
+        )
+      ] })
+    ] }) })
+  ] });
+};
+function us() {
+  const [r, l] = Qe(), { flexChild: t, gridChild: o } = yr(), [, s] = Vr(hr), { t: d } = K(), [a] = Se();
+  return m(a) ? /* @__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: d("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: () => s(!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(Te, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
+        /* @__PURE__ */ e.jsxs(br, { defaultValue: r, onValueChange: (c) => l(c), children: [
+          /* @__PURE__ */ e.jsx(mr, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(fr, { placeholder: "State" }) }),
+          /* @__PURE__ */ e.jsxs(vr, { children: [
+            /* @__PURE__ */ e.jsx(V, { value: "", children: "Normal" }),
+            /* @__PURE__ */ e.jsx(V, { value: "hover", children: "Hover" }),
+            /* @__PURE__ */ e.jsx(V, { value: "active", children: "Active" }),
+            /* @__PURE__ */ e.jsx(V, { value: "focus", children: "Focus" }),
+            /* @__PURE__ */ e.jsx(V, { value: "before", children: "Before" }),
+            /* @__PURE__ */ e.jsx(V, { value: "after", children: "After" }),
+            /* @__PURE__ */ e.jsx(V, { value: "only", children: "Only" }),
+            /* @__PURE__ */ e.jsx(V, { value: "first", children: "First" }),
+            /* @__PURE__ */ e.jsx(V, { value: "last", children: "Last" }),
+            /* @__PURE__ */ e.jsx(V, { value: "first-letter", children: "First Letter" }),
+            /* @__PURE__ */ e.jsx(V, { value: "first-line", children: "First Line" }),
+            /* @__PURE__ */ e.jsx(V, { 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(Ke, { defaultValue: ["Layout"], type: "multiple", className: "w-full", children: [
+        t && /* @__PURE__ */ e.jsx(fe, { section: Xr }),
+        o ? /* @__PURE__ */ e.jsx(fe, { section: Fr }) : null,
+        Zr.map((c) => /* @__PURE__ */ e.jsx(fe, { section: c }, c.heading)),
+        /* @__PURE__ */ e.jsx(ps, { section: { heading: "Attributes" } })
+      ] }) })
+    ] })
+  );
+}
+const gs = {
+  px: 1,
+  "%": 1,
+  em: 100,
+  rem: 100,
+  ch: 1,
+  vw: 1,
+  vh: 1,
+  "-": 1,
+  deg: 1,
+  ms: 0.1
+}, yl = () => {
+  const r = q(), { t: l } = K(), [t, o] = $.useState(""), [s, d] = $.useState({
+    onDrag: (i) => i,
+    onDragEnd: (i) => i,
+    dragStartY: 0,
+    dragging: !1,
+    dragStartValue: 0,
+    dragUnit: "",
+    negative: !1,
+    cssProperty: ""
+  }), a = ve(
+    (i) => {
+      const p = !g(s, "negative", !1), h = g(s, "cssProperty", "");
+      let n = parseFloat(s.dragStartValue);
+      n = ze(n) ? 0 : n;
+      let y = gs[s.dragUnit];
+      (W(h, "scale") || h === "opacity") && (y = 10);
+      let u = (s.dragStartY - i.pageY) / y + n;
+      p && u < 0 && (u = 0), h === "opacity" && u > 1 && (u = 1), s.onDrag(`${u}`), o(`${u}`);
+    },
+    [s],
+    50
+  ), c = B(() => {
+    setTimeout(() => s.onDragEnd(`${t}`), 100), d({
+      onDrag: (i) => i,
+      onDragEnd: (i) => i,
+      dragStartY: 0,
+      dragging: !1,
+      dragStartValue: 0,
+      dragUnit: "",
+      negative: !1,
+      cssProperty: ""
+    });
+  }, [s, t, d]);
+  return jt(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(Ze, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ e.jsx("h1", { children: l("no_block_selected_for_styling") })
+  ] }) }) : /* @__PURE__ */ e.jsx(rt, { children: /* @__PURE__ */ e.jsxs(nt.Provider, { value: { setDragData: d }, children: [
+    s.dragging ? /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        onMouseMove: a,
+        onMouseUp: () => c(),
+        className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10 "
+      }
+    ) : null,
+    /* @__PURE__ */ e.jsxs(wr, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
+      /* @__PURE__ */ e.jsxs(jr, { className: "mx-1 grid grid-cols-2", children: [
+        /* @__PURE__ */ e.jsx(De, { value: "settings", children: l("settings") }),
+        /* @__PURE__ */ e.jsx(De, { value: "styling", children: l("styling") })
+      ] }),
+      /* @__PURE__ */ e.jsx(
+        $e,
+        {
+          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(zr, {}) })
+        }
+      ),
+      /* @__PURE__ */ e.jsx($e, { value: "styling", className: "flex-1 h-full overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(us, {}) })
+    ] })
+  ] }) });
+};
+export {
+  yl as default
+};