@chaibuilder/sdk 0.1.0

package/dist/Settings-b1afcefe.js

@@ -0,0 +1,1845 @@
+import { j as e } from "./jsx-runtime-944c88e2.js";
+import * as le from "react";
+import L, { useState as S, createContext as Ne, useMemo as H, useContext as Q, useCallback as I, useEffect as J } from "react";
+import { useThrottledCallback as de } from "@react-hookz/web";
+import { get as c, includes as P, first as Se, reject as qe, isEmpty as w, map as V, nth as he, startCase as Re, toLower as Te, startsWith as X, isNumber as Je, parseInt as Qe, isNaN as Ve, findLast as et, has as ne, flatten as Y, intersection as He, forEach as tt, set as rt, last as me, filter as lt, isNull as ot } from "lodash";
+import { useTranslation as Be } from "react-i18next";
+import { PlusIcon as pe, Cross2Icon as Ae, EyeOpenIcon as st, EyeClosedIcon as be, BorderAllIcon as M, WidthIcon as k, HeightIcon as N, ArrowUpIcon as U, ArrowRightIcon as G, ArrowDownIcon as K, ArrowLeftIcon as q, ArrowTopLeftIcon as at, ArrowTopRightIcon as nt, ArrowBottomRightIcon as it, ArrowBottomLeftIcon as dt, AlignLeftIcon as ct, AlignCenterHorizontallyIcon as pt, AlignRightIcon as ut, StretchHorizontallyIcon as gt, FontItalicIcon as xt, UnderlineIcon as yt, OverlineIcon as ht, LetterCaseUppercaseIcon as mt, Cross1Icon as bt, InfoCircledIcon as ue, MinusIcon as ft, BoxIcon as $e, TriangleDownIcon as vt, RowSpacingIcon as wt, TrashIcon as Le, MixerHorizontalIcon as Ie } from "@radix-ui/react-icons";
+import { T as Ct, a as jt, b as fe, c as ve } from "./tabs-85caa1e8.js";
+import kt from "@rjsf/core";
+import Nt from "@rjsf/validator-ajv8";
+import { A as oe, c as De, C as Me, D as St, F as Rt, G as Tt, i as ge, H as Oe, I as Ee, h as Pe, d as Vt, J as Fe, e as we, K as se, u as Ht, L as Bt, M as At } from "./index-cdd49c4c.js";
+import { R as $t, a as Lt, b as It, L as Dt, I as Mt } from "./link-8594fd8f.js";
+import { getBlockComponent as Ot } from "chaibuilder-blocks";
+import { useAtom as Et } from "jotai";
+import Pt from "react-autosuggest";
+import Ft from "fuse.js";
+import { A as Xt, C as ae, b as Yt } from "./Class-e6b07b79.js";
+import { B as Xe, d as W, e as Z, f as _, g as Wt } from "./useBuilderProp-81a14920.js";
+import { L as xe } from "./label-e770a087.js";
+import { S as Zt } from "./CONTROLS-442caee5.js";
+import { a as Ye, b as We, c as Ze, A as _t } from "./accordion-c0176dc5.js";
+import { S as zt } from "./scroll-area-9f64a082.js";
+import { S as Ut, c as Gt, b as Kt, d as qt, f as R } from "./select-7fddd7c3.js";
+import "@radix-ui/react-tabs";
+import "./utils-ac68b2c8.js";
+import "clsx";
+import "tailwind-merge";
+import "i18next";
+import "flagged";
+import "react-dnd";
+import "@minoru/react-dnd-treeview";
+import "react-hotkeys-hook";
+import "flat-to-nested";
+import "redux-undo";
+import "react-icons-picker";
+import "react-dom";
+import "./dialog-3d4e82ed.js";
+import "@radix-ui/react-dialog";
+import "./ImagesPanel-815d5e6f.js";
+import "react-quill";
+import "@radix-ui/react-slot";
+import "class-variance-authority";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-toast";
+import "@radix-ui/react-label";
+import "@radix-ui/react-accordion";
+import "@radix-ui/react-scroll-area";
+import "@radix-ui/react-select";
+function Jt() {
+  const r = oe(), { createSnapshot: o } = De(), t = Me(), [l] = St(), s = Ot(r._type), n = c(s, "props", {}), d = {
+    type: "object",
+    properties: {
+      _name: {
+        title: "Name",
+        type: "string",
+        default: c(r, "_name", r._type)
+      }
+    }
+  }, i = {};
+  Object.keys(n).forEach((u) => {
+    const m = n[u];
+    if (P(["slot", "styles"], m.type))
+      return;
+    const h = c(m, "i18n", !1) ? `${u}-${l}` : u;
+    d.properties[h] = Rt(m, l), i[h] = Tt(m, l);
+  });
+  const a = { ...r }, x = ({ formData: u }, m) => {
+    if (m) {
+      const h = m.replace("root.", "");
+      t([r._id], { [h]: c(u, h) });
+    }
+  }, g = () => {
+    o();
+  };
+  return /* @__PURE__ */ e.jsxs("div", { children: [
+    /* @__PURE__ */ e.jsx(
+      kt,
+      {
+        widgets: {
+          richtext: $t,
+          icon: Lt,
+          image: It
+        },
+        fields: {
+          link: Dt
+        },
+        idSeparator: ".",
+        autoComplete: "off",
+        omitExtraData: !1,
+        liveOmit: !1,
+        liveValidate: !0,
+        uiSchema: i,
+        onBlur: g,
+        schema: d,
+        formData: a,
+        validator: Nt,
+        onChange: x
+      }
+    ),
+    /* @__PURE__ */ e.jsx("div", { className: "pb-60" })
+  ] });
+}
+const Ce = new Ft(Xt, {
+  isCaseSensitive: !1,
+  threshold: 0.2,
+  minMatchCharLength: 2,
+  keys: ["name"]
+});
+function Qt() {
+  var B;
+  const [r] = ge(), o = oe(), t = Oe(), l = Ee(), [s] = Pe(), [n, d] = S(""), i = (B = Se(r)) == null ? void 0 : B.prop, a = qe((c(o, i, "").replace(Zt, "").split(",").pop() || "").split(" "), w), x = () => {
+    const v = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    t(s, v, !0), d("");
+  }, [g, u] = S([]), m = ({ value: v }) => {
+    const D = v.trim().toLowerCase(), A = D.match(/.+:/g);
+    let C = [];
+    if (A && A.length > 0) {
+      const [$] = A, F = D.replace($, "");
+      C = Ce.search(F).map((p) => ({
+        ...p,
+        item: { ...p.item, name: $ + p.item.name }
+      }));
+    } else
+      C = Ce.search(D);
+    u(V(C, "item"));
+  }, h = () => {
+    u([]);
+  }, y = (v) => v.name, f = (v) => /* @__PURE__ */ e.jsx("div", { className: "rounded-md p-1", children: v.name }), O = {
+    autoComplete: "off",
+    autoCorrect: "off",
+    autoCapitalize: "off",
+    spellCheck: !1,
+    placeholder: "Enter class name",
+    value: n,
+    onKeyDown: (v) => {
+      v.key === "Enter" && n.trim() !== "" && x();
+    },
+    onChange: (v, { newValue: D }) => d(D),
+    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(xe, { 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(
+            Pt,
+            {
+              suggestions: g,
+              onSuggestionsFetchRequested: m,
+              onSuggestionsClearRequested: h,
+              getSuggestionValue: y,
+              renderSuggestion: f,
+              inputProps: O,
+              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: x,
+              disabled: n.trim() === "",
+              size: "sm",
+              children: /* @__PURE__ */ e.jsx(pe, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
+          w(a) && /* @__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" }),
+          le.Children.toArray(
+            a.map((v) => /* @__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: [
+                  v,
+                  /* @__PURE__ */ e.jsx(
+                    Ae,
+                    {
+                      onClick: () => l(s, [v]),
+                      className: "invisible absolute right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
+                    }
+                  )
+                ]
+              },
+              v
+            ))
+          )
+        ] })
+      ]
+    }
+  );
+}
+const T = ["px", "%", "em", "rem", "ch", "vh", "vw"], er = {
+  heading: "Flex Child",
+  items: [
+    { type: "arbitrary", label: "Basis", units: T, 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" }
+  ]
+}, tr = {
+  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" }
+  ]
+}, rr = [
+  {
+    heading: "Display",
+    items: [
+      { type: "dropdown", label: "Display", property: "display", units: T },
+      {
+        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: T },
+          { type: "arbitrary", label: "Opacity", property: "opacity", units: ["-"] }
+        ]
+      }
+    ]
+  },
+  {
+    heading: "Spacing",
+    items: [
+      {
+        styleType: "multiple",
+        label: "Margin",
+        negative: !0,
+        units: [...T, "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 Between",
+        options: [
+          { key: "spaceX", label: "Left-Right" },
+          { key: "spaceY", label: "Top-Bottom" }
+        ]
+      }
+    ]
+  },
+  {
+    heading: "Size",
+    items: [
+      { type: "arbitrary", label: "Width", units: T.concat("auto"), property: "width" },
+      { type: "arbitrary", label: "Height", units: T.concat("auto"), property: "height" },
+      {
+        styleType: "accordion",
+        heading: "Min width & height",
+        items: [
+          { type: "arbitrary", label: "Min Width", units: T.concat("auto"), property: "minWidth" },
+          { type: "arbitrary", label: "Min Height", units: T.concat("auto"), property: "minHeight" }
+        ]
+      },
+      {
+        styleType: "accordion",
+        heading: "Max width & height",
+        items: [
+          { type: "arbitrary", label: "Max Width", units: T.concat("auto"), property: "maxWidth" },
+          { type: "arbitrary", label: "Max Height", units: T.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: "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-Chai", 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: T },
+      { type: "arbitrary", property: "lineHeight", label: "Height", units: T.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: Qt }]
+  }
+], _e = {
+  "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: st,
+  invisible: be,
+  // display
+  hidden: be,
+  gap: M,
+  gapX: k,
+  gapY: N,
+  spaceX: k,
+  spaceY: N,
+  overscroll: M,
+  overscrollX: k,
+  overscrollY: N,
+  overflow: M,
+  overflowX: k,
+  overflowY: N,
+  top: U,
+  right: G,
+  bottom: K,
+  left: q,
+  inset: M,
+  insetX: k,
+  insetY: N,
+  border: M,
+  borderX: k,
+  borderY: N,
+  borderTop: U,
+  borderRight: G,
+  borderBottom: K,
+  borderLeft: q,
+  borderRadius: M,
+  borderRadiusX: k,
+  borderRadiusY: N,
+  borderRadiusTop: U,
+  borderRadiusRight: G,
+  borderRadiusBottom: K,
+  borderRadiusLeft: q,
+  borderRadiusTopLeft: at,
+  borderRadiusTopRight: nt,
+  borderRadiusBottomRight: it,
+  borderRadiusBottomLeft: dt,
+  divideXWidth: k,
+  divideYWidth: N,
+  scale: M,
+  scaleX: k,
+  scaleY: N,
+  skewX: k,
+  skewY: N,
+  translateX: k,
+  translateY: N,
+  // padding
+  padding: M,
+  paddingX: k,
+  paddingY: N,
+  paddingTop: U,
+  paddingRight: G,
+  paddingBottom: K,
+  paddingLeft: q,
+  // margin
+  margin: M,
+  marginX: k,
+  marginY: N,
+  marginTop: U,
+  marginRight: G,
+  marginBottom: K,
+  marginLeft: q,
+  // text-align
+  textLeft: ct,
+  textCenter: pt,
+  textRight: ut,
+  textJustify: gt,
+  // font style
+  italic: xt,
+  // "not-italic": "",
+  // decoration
+  underline: yt,
+  overline: ht,
+  // transform
+  uppercase: mt,
+  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": Ae,
+  // 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: bt
+}, ee = Ne({ canReset: !1, canChange: !0 }), lr = ({ children: r, canReset: o = !1, canChange: t = !0 }) => (
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  /* @__PURE__ */ e.jsx(ee.Provider, { value: { canReset: o, canChange: t }, children: r })
+), ze = ({ label: r, property: o, onChange: t }) => {
+  const l = H(() => c(ae, `${o}.classes`, [""]), [o]), s = te(o), n = H(() => c(s, "cls", ""), [s]), { canChange: d } = Q(ee), i = /\[.*\]/g.test(n);
+  return /* @__PURE__ */ e.jsx("div", { className: r ? "w-full rounded " : "grow", children: i ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ e.jsx(Mt, { className: "w-[70%] rounded py-1", readOnly: !0, value: n }),
+    /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
+      /* @__PURE__ */ e.jsx(Z, { 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(ue, {}) }) }),
+      /* @__PURE__ */ e.jsx(_, { children: "Current value is using a Tailwind arbitrary value." })
+    ] })
+  ] }) : /* @__PURE__ */ e.jsx(
+    ce,
+    {
+      rounded: r,
+      onChange: (a) => t(a, o),
+      selected: n,
+      options: l,
+      disabled: !d
+    }
+  ) });
+};
+function ce({ selected: r, onChange: o, rounded: t = !1, options: l, disabled: s = !1 }) {
+  const n = r.replace(/.*:/g, "").trim(), { undo: d, redo: i } = De();
+  return /* @__PURE__ */ e.jsxs(
+    "select",
+    {
+      disabled: !l.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: (a) => o(a.target.value),
+      onKeyDown: (a) => {
+        a.ctrlKey && (a.key === "z" && d(), a.key === "y" && i());
+      },
+      value: n,
+      children: [
+        /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: "" }),
+        L.Children.toArray(
+          l.map((a) => /* @__PURE__ */ e.jsx("option", { className: "bg-transparent", value: a, children: a }))
+        )
+      ]
+    }
+  );
+}
+const or = ({ property: r, onChange: o }) => {
+  const { canReset: t, canChange: l } = Q(ee), s = te(r), n = H(() => c(s, "cls", ""), [s]), d = H(() => c(ae, `${r}.classes`, [""]), [r]), i = d.indexOf(n) > -1 ? d.indexOf(n) : 0, a = /\[.*\]/g.test(n);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: a ? /* @__PURE__ */ e.jsx("div", { className: "py-[5px] px-2", children: n }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        type: "button",
+        className: "box-border w-2/12 rounded-tl rounded-bl bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
+        disabled: !l && (!t || i - 1 < 0),
+        onClick: () => o(he(d, i - 1), r),
+        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(ft, { className: !l && (!t || i - 1 < 0) ? "text-gray-500" : "text-white/60" }) })
+      }
+    ),
+    /* @__PURE__ */ e.jsx("div", { className: "w-8/12 text-center", children: /* @__PURE__ */ e.jsx(ze, { label: !1, property: r, onChange: o }) }),
+    /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        type: "button",
+        className: "w-2/12 rounded-tr rounded-br bg-background px-1 text-center hover:bg-bg-gray-700 disabled:cursor-not-allowed disabled:bg-gray-600",
+        disabled: !l && (!t || i + 1 >= d.length),
+        onClick: () => o(he(d, i + 1), r),
+        children: /* @__PURE__ */ e.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
+          pe,
+          {
+            className: !l && (!t || i + 1 >= d.length) ? "text-gray-500" : "text-white/60"
+          }
+        ) })
+      }
+    )
+  ] }) });
+}, sr = ({ property: r, onChange: o }) => {
+  const t = H(() => c(ae, `${r}.classes`, [""]), [r]), { canChange: l } = Q(ee), s = te(r), n = H(() => c(s, "cls", ""), [s]);
+  return /* @__PURE__ */ e.jsx("div", { className: "flex grow flex-wrap gap-1", children: V(t, (d) => /* @__PURE__ */ e.jsxs(W, { children: [
+    /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        type: "button",
+        disabled: !l,
+        onClick: () => o(d, r),
+        className: `cursor-pointer rounded border border-gray-600 p-1 disabled:cursor-not-allowed  ${n === d ? " bg-blue-500 text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: L.createElement(c(_e, d, $e))
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(_, { children: Re(Te(d)) })
+  ] })) });
+}, ar = {
+  backgroundColor: "bg",
+  textColor: "text",
+  borderColor: "border",
+  boxShadowColor: "shadow",
+  outlineColor: "outline",
+  divideColor: "divide",
+  fromColor: "from",
+  viaColor: "via",
+  toColor: "to",
+  ringColor: "ring",
+  ringOffsetColor: "ring-offset"
+}, nr = ({ property: r, onChange: o }) => {
+  const t = te(r), l = H(() => c(t, "cls", ""), [t]), { canChange: s } = Q(ee), [n, d] = S([]), [i, a] = S({ color: "", shade: "" }), x = l.split("-"), g = c(x, "1", ""), u = c(x, "2", ""), m = I(
+    // eslint-disable-next-line no-shadow
+    (y) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(y) ? (d([]), a({ color: y })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), a((f) => ({ ...f, color: y, shade: f.shade ? f.shade : "500" })));
+    },
+    [d, a]
+  );
+  J(() => {
+    if (["current", "inherit", "transparent", "black", "white"].includes(g))
+      return d([]);
+    d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
+  }, [g]);
+  const h = I(
+    // eslint-disable-next-line no-shadow
+    (y) => {
+      a({ color: g, shade: y });
+    },
+    [g]
+  );
+  return J(() => {
+    a({ color: "", shade: "" });
+  }, [t]), J(() => {
+    const f = `${c(ar, r, "")}-${i.color}${i.shade ? `-${i.shade}` : ""}`;
+    f.match(new RegExp(c(ae, `${r}.regExp`, ""))) && o(f, r);
+  }, [i, o, r]), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-border text-xs", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ e.jsx(
+      ce,
+      {
+        disabled: !s,
+        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: u, disabled: !g || !s, onChange: h, options: n }) })
+  ] });
+}, je = (r, o) => {
+  r = r.toLowerCase();
+  let t = r.trim().replace(/ |\+/g, "");
+  if ((t === "auto" || t === "none") && o.includes(t))
+    return { value: "", unit: t };
+  const l = o.length ? new RegExp(o.join("|"), "g") : /XXXXXX/g;
+  t = t.replace(l, "");
+  const s = r.match(l), n = s && s.length > 1, d = !w(t) && Number.isNaN(Number(t));
+  return n || d ? { error: "Invalid value" } : s && (s[0] === "auto" || s[0] === "none") ? { value: s[0], unit: "" } : { value: t, unit: s ? s[0] : "" };
+}, ir = (r) => {
+  const o = 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 (P(r, "skew-"))
+    return { value: `${o}${t}`, unit: "deg" };
+  if (P(r, "rotate-"))
+    return { value: `${o}${t}`, unit: "deg" };
+  if (P(r, "opacity-"))
+    return { value: `${t / 100}`, unit: "-" };
+  if (P(r, "duration-") || P(r, "delay-"))
+    return { value: `${t}`, unit: "ms" };
+  if (P(r, "translate-") && !t.includes("/"))
+    return { value: `${o}${`${t / 4}`}`, unit: "rem" };
+  if (P(r, "scale-"))
+    return { value: `${o}${`${t / 100}`}`, unit: "-" };
+  if (X(r, "border")) {
+    const l = r.match(/border-?(x|y|t|r|b|l)?\d+/g);
+    if (l)
+      return { value: l[0].split("-").pop(), unit: "px" };
+    if (r.match(/border-?(x|y|t|r|b|l)?/g))
+      return { value: "1", unit: "px" };
+  }
+  if (X(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 (X(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 (X(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 (X(r, "tracking-")) {
+    if (t === "tighter")
+      return { value: "-0.05", unit: "em" };
+    if (t === "tight")
+      return { value: "-0.025", unit: "em" };
+    if (t === "normal")
+      return { value: "0", unit: "em" };
+    if (t === "wide")
+      return { value: "0.025", unit: "em" };
+    if (t === "wider")
+      return { value: "0.05", unit: "em" };
+    if (t === "widest")
+      return { value: "0.1", unit: "em" };
+  }
+  if (["max", "min", "fit"].includes(t))
+    return { value: r, unit: "class" };
+  if (t.includes("/")) {
+    const [l, s] = V(t.split("/"), (n) => parseInt(n, 10));
+    return { value: o + (l / s * 100).toFixed(2).replace(".00", ""), unit: "%" };
+  }
+  return Je(parseFloat(t)) ? { value: `${o + parseFloat(t) * 4}`, unit: "px" } : { value: t, unit: "class" };
+}, dr = (r) => {
+  if (w(r))
+    return { value: "", unit: "" };
+  const o = r.match(/\[.*\]/g);
+  if (o === null)
+    return cr(r);
+  const t = c(o, "0", "").replace(/\[|\]/g, ""), l = r.startsWith("-") ? "-" : "", s = Se(t.match(/\d+.\d+|\d+/g));
+  return { value: `${l}${s}`, unit: t.replace(s, "") };
+}, cr = (r) => w(r) ? { value: "", unit: "" } : ir(r), Ue = L.createContext({
+  setDragData: () => {
+  }
+}), pr = ({
+  unit: r,
+  currentValue: o,
+  onDrag: t,
+  onDragEnd: l,
+  onDragStart: s,
+  negative: n,
+  cssProperty: d
+}) => {
+  const { setDragData: i } = Q(Ue);
+  return /* @__PURE__ */ e.jsx(
+    "button",
+    {
+      type: "button",
+      onMouseDown: (a) => {
+        const x = {
+          onDrag: t,
+          onDragEnd: l,
+          dragging: !0,
+          dragStartY: a.pageY,
+          dragStartValue: `${o}`,
+          dragUnit: r,
+          negative: n,
+          cssProperty: d
+        };
+        s(x), i(x);
+      },
+      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(wt, {})
+    }
+  );
+}, ur = ({ onSelect: r, current: o, units: t }) => /* @__PURE__ */ e.jsx("div", { "data-theme": "light", className: "-m-[7px] -mx-[13px] flex w-9 flex-col", children: t.map((l) => /* @__PURE__ */ e.jsx(
+  Xe,
+  {
+    className: "h-max rounded-none px-1 py-1 text-right text-[11px] hover:bg-blue-400",
+    color: o === l ? "primary" : void 0,
+    size: "sm",
+    onClick: (s) => {
+      s.stopPropagation(), r(l);
+    },
+    children: l
+  },
+  l
+)) }), gr = (r) => {
+  const [o, t] = S(!1), [l, s] = S(""), { currentClass: n, onChange: d, classPrefix: i, cssProperty: a, units: x, negative: g } = r, [u, m] = S(a != null && a.toLowerCase().includes("width") ? "%" : x[0]), [h, y] = S(!1), [f, O] = S(""), [B, v] = S(!1), [D, A] = S(!1);
+  J(() => {
+    const { value: p, unit: b } = dr(n);
+    if (b === "") {
+      s(p), m(a != null && a.toLowerCase().includes("width") ? "%" : x[0]);
+      return;
+    }
+    m(b), s(b === "class" || w(p) ? "" : p);
+  }, [n, a, x]);
+  const C = de(
+    (p) => {
+      d(p);
+    },
+    [d],
+    200
+  ), $ = de(
+    (p) => {
+      d(p, !1);
+    },
+    [d],
+    200
+  ), F = I(
+    (p = !1) => {
+      const b = je(`${l}`, x);
+      if (c(b, "error", !1)) {
+        y(!0);
+        return;
+      }
+      const j = c(b, "unit") !== "" ? c(b, "unit") : u;
+      if (j === "auto" || j === "none") {
+        C(`${i}${j}`);
+        return;
+      }
+      if (c(b, "value") === "")
+        return;
+      const z = `${c(b, "value", "").startsWith("-") ? "-" : ""}${i}[${c(b, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      p ? $(z) : C(z);
+    },
+    [C, $, l, u, i, x]
+  ), re = I(
+    (p) => {
+      const b = je(`${l}`, x);
+      if (c(b, "error", !1)) {
+        y(!0);
+        return;
+      }
+      if (p === "auto" || p === "none") {
+        C(`${i}${p}`);
+        return;
+      }
+      if (c(b, "value") === "")
+        return;
+      const j = c(b, "unit") !== "" ? c(b, "unit") : p, z = `${c(b, "value", "").startsWith("-") ? "-" : ""}${i}[${c(b, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      C(z);
+    },
+    [C, l, i, x]
+  );
+  return /* @__PURE__ */ e.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-start", children: u === "class" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: n }),
+    /* @__PURE__ */ e.jsxs(W, { children: [
+      /* @__PURE__ */ e.jsx(Z, { 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(ue, {}) }) }),
+      /* @__PURE__ */ e.jsx(_, { children: "Current value is using a Tailwind preset class." })
+    ] })
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `group relative  flex items-center ${B ? "z-auto" : ""}`, children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
+      ["none", "auto"].indexOf(u) !== -1 ? null : /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          readOnly: u === "class",
+          onKeyPress: (p) => {
+            p.key === "Enter" && F();
+          },
+          onKeyDown: (p) => {
+            if (p.keyCode !== 38 && p.keyCode !== 40)
+              return;
+            p.preventDefault(), A(!0);
+            const b = Qe(p.target.value);
+            let j = Ve(b) ? 0 : b;
+            p.keyCode === 38 && (j += 1), p.keyCode === 40 && (j -= 1);
+            const E = `${j}`, Ke = `${E.startsWith("-") ? "-" : ""}${i}[${E.replace("-", "")}${u === "-" ? "" : u}]`;
+            $(Ke);
+          },
+          onKeyUp: (p) => {
+            D && (p.preventDefault(), A(!1));
+          },
+          onBlur: () => F(),
+          onChange: (p) => {
+            y(!1), s(p.target.value);
+          },
+          onClick: (p) => {
+            var b;
+            (b = p == null ? void 0 : p.target) == null || b.select(), t(!1);
+          },
+          value: B ? 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(W, { open: o, delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => t(!o),
+            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 ${x.length === 1 ? "px-2 font-semibold" : ""}`, children: u }),
+              x.length > 1 ? /* @__PURE__ */ e.jsx(vt, {}) : null
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e.jsx(Wt, { children: /* @__PURE__ */ e.jsx(_, { className: "bg-background", children: /* @__PURE__ */ e.jsx(
+          ur,
+          {
+            units: x,
+            current: u,
+            onSelect: (p) => {
+              t(!1), m(p), re(p);
+            }
+          }
+        ) }) })
+      ] })
+    ] }),
+    ["none", "auto"].indexOf(u) !== -1 || B ? null : /* @__PURE__ */ e.jsx(
+      pr,
+      {
+        onDragStart: () => v(!0),
+        onDragEnd: (p) => {
+          if (O(() => ""), v(!1), w(p))
+            return;
+          const b = `${p}`, E = `${b.startsWith("-") ? "-" : ""}${i}[${b.replace("-", "")}${u === "-" ? "" : u}]`;
+          C(E);
+        },
+        onDrag: (p) => {
+          if (w(p))
+            return;
+          O(p);
+          const b = `${p}`, E = `${b.startsWith("-") ? "-" : ""}${i}[${b.replace("-", "")}${u === "-" ? "" : u}]`;
+          $(E);
+        },
+        currentValue: l,
+        unit: u,
+        negative: g,
+        cssProperty: a
+      }
+    )
+  ] }) }) });
+}, te = (r) => {
+  const o = se();
+  return et(o, { property: r });
+}, xr = (r, o) => {
+  const t = {
+    xs: 0,
+    sm: 1,
+    md: 2,
+    lg: 3,
+    xl: 4,
+    "2xl": 5
+  };
+  return t[c(r, "mq", "xs")] <= t[o];
+}, yr = {
+  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-"
+}, ke = {
+  xs: "",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+}, hr = (r) => `${r.toUpperCase()} ${ke[r] ? `(${ke[r]} & up)` : ""}`, ye = (r) => {
+  const { type: o = "icons", label: t, property: l, onEmitChange: s = () => {
+  }, units: n, negative: d = !1 } = r, [i] = Vt(), [a] = Fe(), [, x] = we(), g = te(l), u = Oe(), m = Ee(), [h] = Pe(), y = H(() => c(g, "fullCls", ""), [g]), f = I(
+    (C, $ = !0) => {
+      const F = { dark: i, mq: x, mod: a, cls: C, property: l, fullCls: "" };
+      (i || a !== "") && (F.mq = "xs");
+      const re = Yt(F);
+      u(h, [re], $);
+    },
+    [h, i, x, a, l, u]
+  ), O = I(() => {
+    m(h, [y]);
+  }, [h, y, m]), B = H(() => xr(g, x), [g, x]);
+  J(() => {
+    s(B, g);
+  }, [B, s, g]);
+  const [, , v] = we(), D = I(
+    (C) => {
+      v({
+        xs: 400,
+        sm: 640,
+        md: 800,
+        lg: 1024,
+        xl: 1420,
+        "2xl": 1920
+      }[C]);
+    },
+    [v]
+  ), A = c(g, "dark", null) === i && c(g, "mod", null) === a && c(g, "mq", null) === x;
+  return /* @__PURE__ */ e.jsx(lr, { canChange: B, canReset: g && A, 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 && !A ? "text-foreground" : ""}`, children: t }) }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "w-[150px]", children: [
+        o === "arbitrary" ? /* @__PURE__ */ e.jsx(
+          gr,
+          {
+            currentClass: c(g, "cls", ""),
+            classPrefix: c(yr, l, ""),
+            units: n || [],
+            onChange: f,
+            negative: d,
+            cssProperty: l
+          }
+        ) : null,
+        o === "icons" && /* @__PURE__ */ e.jsx(sr, { property: l, onChange: f }),
+        o === "range" && /* @__PURE__ */ e.jsx(or, { property: l, onChange: f }),
+        o === "color" && /* @__PURE__ */ e.jsx(nr, { property: l, onChange: f }),
+        o === "dropdown" && /* @__PURE__ */ e.jsx(ze, { label: t, property: l, onChange: f })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ e.jsx("button", { type: "button", onClick: () => O(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ e.jsx(Le, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && g ? /* @__PURE__ */ e.jsxs(W, { delayDuration: 100, children: [
+        /* @__PURE__ */ e.jsx(Z, { 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(ue, {})
+          }
+        ) }),
+        /* @__PURE__ */ e.jsx(_, { 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: [
+            hr(c(g, "mq")),
+            i && !g.dark ? "(Light mode)" : ""
+          ] }),
+          /* @__PURE__ */ e.jsx("br", {}),
+          /* @__PURE__ */ e.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => D(c(g, "mq")),
+              className: "block w-full cursor-default text-right font-semibold text-blue-500",
+              children: [
+                "Switch to ",
+                c(g, "mq").toUpperCase()
+              ]
+            }
+          )
+        ] }) }) })
+      ] }) : null })
+    ] })
+  ] }) });
+}, mr = ["px", "%", "em", "rem", "ch", "vh", "vw"], Ge = ({
+  label: r,
+  options: o,
+  borderB: t = !1,
+  borderT: l = !1,
+  type: s = "arbitrary",
+  units: n = mr,
+  negative: d = !1
+}) => {
+  const [i, a] = S(o[0].key), x = se(), g = I((u) => V(x, "property").includes(u), [x]);
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: `mb-2 border-gray-800 py-2 first:pt-0 last:pb-0 ${t ? "border-b" : ""} ${l ? "border-t" : ""}`,
+      children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row text-xs", children: [
+          r && /* @__PURE__ */ e.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: r }),
+          /* @__PURE__ */ e.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: L.Children.toArray(
+            o.map(({ label: u, key: m }) => /* @__PURE__ */ e.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ e.jsxs(W, { children: [
+              /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => a(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: [
+                    L.createElement("div", {
+                      className: g(m) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    }),
+                    L.createElement(c(_e, m, $e), { className: "text-inherit w-3 h-3" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ e.jsx(_, { children: Re(Te(u)) })
+            ] }) }))
+          ) })
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ e.jsx(
+          ye,
+          {
+            type: s,
+            units: [...n],
+            label: "",
+            property: i,
+            negative: d
+          }
+        ) })
+      ]
+    }
+  );
+}, br = ({ heading: r, items: o }) => {
+  const t = se(), l = H(() => {
+    const s = (i) => Y(
+      i.map((a) => a.styleType === "multiple" ? V(a.options, "key") : a.property)
+    ), n = Y(
+      o.map((i) => i.styleType === "accordion" ? s(i.items) : i.styleType === "multiple" ? V(i.options, "key") : i.property)
+    ), d = V(t, "property");
+    return He(n, d).length > 0;
+  }, [t, o]);
+  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: [
+      r,
+      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: o.map((s) => s.styleType === "multiple" ? /* @__PURE__ */ e.jsx(Ge, { ...s }, s.label) : /* @__PURE__ */ e.jsx(ye, { ...s }, s.label)) })
+  ] });
+}, fr = Ne({}), ie = ({ section: r }) => {
+  const o = se(), t = I(
+    (n = []) => {
+      const d = {};
+      for (let a = 0; a < o.length; a++)
+        d[o[a].property] = o[a].cls;
+      let i = !0;
+      for (const a in n)
+        if (!ne(d, a) || d[a] !== n[a]) {
+          i = !1;
+          break;
+        }
+      return i;
+    },
+    [o]
+  ), l = H(() => {
+    if (o.length > 0 && r.heading === "Classes")
+      return !0;
+    const n = (a) => Y(
+      a.map((x) => x.styleType === "multiple" ? Y(V(x.options, "key")) : x.property)
+    ), d = Y(
+      r.items.map((a) => a.styleType === "accordion" ? n(a.items) : a.styleType === "multiple" ? Y(V(a.options, "key")) : a.property)
+    ), i = V(o, "property");
+    return He(d, i).length > 0;
+  }, [o, r.heading, r.items]), s = H(() => ({}), []);
+  return /* @__PURE__ */ e.jsx(fr.Provider, { value: s, children: /* @__PURE__ */ e.jsxs(Ye, { value: r.heading, children: [
+    /* @__PURE__ */ e.jsx(We, { 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"}` }),
+      r.heading
+    ] }) }),
+    /* @__PURE__ */ e.jsx(Ze, { className: "bg-gray-100 px-3.5 py-2", children: L.Children.toArray(
+      r.items.map((n) => ne(n, "component") ? L.createElement(n.component, { key: n.label }) : ne(n, "styleType") ? n.styleType === "multiple" ? /* @__PURE__ */ e.jsx(Ge, { ...n }, n.label) : n.styleType === "accordion" && t(n == null ? void 0 : n.conditions) ? /* @__PURE__ */ e.jsx(br, { ...n }, n.label) : null : /* @__PURE__ */ e.jsx(ye, { ...n }, n.label))
+    ) })
+  ] }) });
+}, vr = ({
+  item: r,
+  index: o,
+  canDelete: t,
+  onChange: l,
+  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: (n) => l(n, o),
+      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: (n) => w(r.key) ? {} : l(n, o),
+        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(
+      Le,
+      {
+        onClick: s,
+        className: "h-6 w-6 cursor-pointer rounded border border-red-400 p-1 text-red-400 hover:opacity-80"
+      }
+    )
+  ] })
+] }), wr = ({ section: r }) => {
+  var m;
+  const { setSyncState: o } = Ht(), t = oe(), [l, s] = S([]), [n] = ge(), d = Me(), i = `${c(n, "0.prop")}_attrs`;
+  le.useEffect(() => {
+    const h = V(c(t, i), (y, f) => ({ key: f, value: y }));
+    w(h) ? s([]) : s(h);
+  }, [c(t, i)]);
+  const a = () => s([...l, { key: "", value: "" }]), x = (h) => {
+    const y = lt(l, (f, O) => h !== O);
+    u(y);
+  }, g = (h, y) => {
+    const f = [...l];
+    f[y][h.target.name] = h.target.value, u(f);
+  }, u = le.useCallback(
+    (h = []) => {
+      const y = {};
+      tt(h, (f) => {
+        w(f.key) || rt(y, f.key, f.value);
+      }), d([c(t, "_id")], { [i]: y }), o("UNSAVED");
+    },
+    [t, o, d, i]
+  );
+  return /* @__PURE__ */ e.jsxs(Ye, { value: r.heading, children: [
+    /* @__PURE__ */ e.jsx(We, { 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 ${w(c(t, i)) ? "bg-gray-300" : "bg-blue-500"}`
+        }
+      ),
+      "Attributes"
+    ] }) }),
+    /* @__PURE__ */ e.jsx(Ze, { 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(xe, { 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 ${!w(l) && w((m = me(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;
+              !w(l) && w((h = me(l)) == null ? void 0 : h.key) || a();
+            },
+            children: [
+              /* @__PURE__ */ e.jsx(pe, { width: 12, height: 12 }),
+              " Add"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
+        w(l) && /* @__PURE__ */ e.jsx("div", { className: "flex h-12 items-center justify-center text-sm text-gray-400", children: "Click + Add to add attributes" }),
+        le.Children.toArray(
+          V(l, (h, y) => {
+            const f = l.length > 0 && y < l.length - 1;
+            return /* @__PURE__ */ e.jsx(
+              vr,
+              {
+                item: h,
+                index: y,
+                canDelete: f,
+                onChange: g,
+                onRemove: () => x(y)
+              }
+            );
+          })
+        )
+      ] })
+    ] }) })
+  ] });
+};
+function Cr() {
+  const [r, o] = Fe(), { flexChild: t, gridChild: l } = Bt(), [, s] = Et(At), { t: n } = Be(), [d] = ge();
+  return w(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(Ie, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ e.jsx("h1", { children: n("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 border-border px-4 py-2", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-x-1.5", children: [
+        /* @__PURE__ */ e.jsx(xe, { htmlFor: "", className: "flex gap-x-1.5 text-xs italic", children: "State" }),
+        /* @__PURE__ */ e.jsxs(Ut, { defaultValue: r, onValueChange: (i) => o(i), children: [
+          /* @__PURE__ */ e.jsx(Gt, { className: "h-auto w-fit p-1 px-3", children: /* @__PURE__ */ e.jsx(Kt, { placeholder: "State" }) }),
+          /* @__PURE__ */ e.jsxs(qt, { children: [
+            /* @__PURE__ */ e.jsx(R, { value: "", children: "Normal" }),
+            /* @__PURE__ */ e.jsx(R, { value: "hover", children: "Hover" }),
+            /* @__PURE__ */ e.jsx(R, { value: "active", children: "Active" }),
+            /* @__PURE__ */ e.jsx(R, { value: "focus", children: "Focus" }),
+            /* @__PURE__ */ e.jsx(R, { value: "before", children: "Before" }),
+            /* @__PURE__ */ e.jsx(R, { value: "after", children: "After" }),
+            /* @__PURE__ */ e.jsx(R, { value: "only", children: "Only" }),
+            /* @__PURE__ */ e.jsx(R, { value: "first", children: "First" }),
+            /* @__PURE__ */ e.jsx(R, { value: "last", children: "Last" }),
+            /* @__PURE__ */ e.jsx(R, { value: "first-letter", children: "First Letter" }),
+            /* @__PURE__ */ e.jsx(R, { value: "first-line", children: "First Line" }),
+            /* @__PURE__ */ e.jsx(R, { value: "disabled", children: "Disabled" })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e.jsxs(zt, { className: "no-scrollbar -mx-1 h-full overflow-x-hidden", children: [
+        /* @__PURE__ */ e.jsxs(_t, { type: "multiple", className: "h-full w-full", children: [
+          t && /* @__PURE__ */ e.jsx(ie, { section: er }),
+          l ? /* @__PURE__ */ e.jsx(ie, { section: tr }) : null,
+          rr.map((i) => /* @__PURE__ */ e.jsx(ie, { section: i }, i.heading)),
+          /* @__PURE__ */ e.jsx(wr, { section: { heading: "Attributes" } })
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { className: "h-60" })
+      ] })
+    ] })
+  );
+}
+const jr = {
+  px: 1,
+  "%": 1,
+  em: 100,
+  rem: 100,
+  ch: 1,
+  vw: 1,
+  vh: 1,
+  "-": 1,
+  deg: 1,
+  ms: 0.1
+}, ml = () => {
+  const r = oe(), { t: o } = Be(), [t, l] = L.useState(""), [s, n] = L.useState({
+    onDrag: (a) => a,
+    onDragEnd: (a) => a,
+    dragStartY: 0,
+    dragging: !1,
+    dragStartValue: 0,
+    dragUnit: "",
+    negative: !1,
+    cssProperty: ""
+  }), d = de(
+    (a) => {
+      const x = !c(s, "negative", !1), g = c(s, "cssProperty", "");
+      let u = parseFloat(s.dragStartValue);
+      u = Ve(u) ? 0 : u;
+      let m = jr[s.dragUnit];
+      (X(g, "scale") || g === "opacity") && (m = 10);
+      let y = (s.dragStartY - a.pageY) / m + u;
+      x && y < 0 && (y = 0), g === "opacity" && y > 1 && (y = 1), s.onDrag(`${y}`), l(`${y}`);
+    },
+    [s],
+    50
+  ), i = I(() => {
+    setTimeout(() => s.onDragEnd(`${t}`), 100), n({
+      onDrag: (a) => a,
+      onDragEnd: (a) => a,
+      dragStartY: 0,
+      dragging: !1,
+      dragStartValue: 0,
+      dragUnit: "",
+      negative: !1,
+      cssProperty: ""
+    });
+  }, [s, t, n]);
+  return ot(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(Ie, { className: "mx-auto text-3xl" }),
+    /* @__PURE__ */ e.jsx("h1", { children: o("no_block_selected_for_styling") })
+  ] }) }) : (
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    /* @__PURE__ */ e.jsxs(Ue.Provider, { value: { setDragData: n }, children: [
+      s.dragging ? (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        /* @__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(Ct, { defaultValue: "settings", className: "flex h-full w-full flex-col py-1", children: [
+        /* @__PURE__ */ e.jsxs(jt, { className: "mx-1 grid grid-cols-2", children: [
+          /* @__PURE__ */ e.jsx(fe, { value: "settings", children: "Settings" }),
+          /* @__PURE__ */ e.jsx(fe, { value: "styling", children: "Styling" })
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          ve,
+          {
+            value: "settings",
+            className: "no-scrollbar -mx-1 -mr-2 h-full flex-1 overflow-y-auto overflow-x-hidden",
+            children: /* @__PURE__ */ e.jsx(Jt, {})
+          }
+        ),
+        /* @__PURE__ */ e.jsx(ve, { value: "styling", className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ e.jsx(Cr, {}) })
+      ] })
+    ] })
+  );
+};
+export {
+  ml as default
+};