@janbox/storefront-builder 2.0.0 → 2.0.2

package/dist/anchor-target-CtXzdkBu.js

@@ -0,0 +1,2918 @@
+import { jsx as e, jsxs as p, Fragment as O } from "@emotion/react/jsx-runtime";
+import { useState as M, useRef as _, useEffect as Ve, Fragment as Be } from "react";
+import { useQueryParams as Re } from "@janbox/storefront-ui/hooks";
+import { screens as Te, paletteVars as Ae } from "@janbox/storefront-ui/theme";
+import { getResponsiveProp as Ze, getColorShadesByVariant as Se } from "@janbox/storefront-ui/utils";
+import { p as T, k as b, W as w, o as A, n as Z, t as u, z as ae, m as je, l as Ne, C as B, c as Y, d as de, P as ce, q as E, s as U, r as G, M as We, x as ue, A as le } from "./dialog-header-Bh3Dkw2q.js";
+import { d as S, c as L, a as H, A as J, f as j, k as ze, i as Oe, g as ie, h as Pe, j as se, e as q, b as Fe } from "./dropzone-CF4CWXth.js";
+import "@floating-ui/react";
+import { isFunction as De, merge as Ee, set as he, parseInt as Ue, isNil as R, trimStart as Ge, get as pe, isString as Q, isNumber as ge } from "lodash-es";
+import { useUpdateEffect as Ce, useToggle as Je } from "react-use";
+import "react-colorful";
+import "overlayscrollbars-react";
+import "@tanstack/react-virtual";
+import _e from "react-dropzone";
+import "react-datepicker/dist/react-datepicker.css";
+import "react-datepicker";
+import { u as K, f as ve, I as Xe, C as ee, a as $e, i as Ye } from "./color-picker-popover-XeaVfYS8.js";
+import "@tiptap/extension-text-style";
+import "@tiptap/react";
+import "@tiptap/react/menus";
+import "@tiptap/starter-kit";
+import "react-frame-component";
+import { useNode as me } from "@craftjs/core";
+import { flatten as fe } from "flat";
+import "@emotion/react";
+import { Draggable as qe, DragDropContext as Qe, Droppable as Ke } from "@hello-pangea/dnd";
+import { W as et } from "./tooltip-CXOlTkGg.js";
+const tt = (t = {}) => {
+  const { id: o } = me(), n = t?.nodeId ?? o, { nodeProps: l, actions: r } = K((a) => ({
+    nodeProps: a.nodes[n ?? o]?.data.props ?? {}
+  })), s = (a, d) => De(a) ? r.setProp(n, a) : r.setProp(n, (g) => {
+    if (d?.merge) {
+      Ee(g, a);
+      return;
+    }
+    const m = fe(a);
+    Object.keys(m).forEach((h) => {
+      he(g, h, m[h]);
+    });
+  }), i = (a, d, g) => s(
+    d === "xs" ? a : {
+      [d]: a
+    },
+    g
+  );
+  return {
+    id: n,
+    nodeProps: t?.transform?.(l) ?? l,
+    setNodeProps: s,
+    setNodeResponsiveProps: i
+  };
+}, wo = () => {
+  const {
+    queryParams: { screen: t }
+  } = we();
+  return { getResponsiveProp: (n, l, r, s) => Ze(n, l, r ?? t, s), currentScreen: t };
+}, we = () => Re({
+  mode: {
+    parser(t) {
+      return ["full", "compact"].find((o) => o === t) ?? "full";
+    }
+  },
+  screen: {
+    parser(t) {
+      return Te.find((o) => o === t) ?? "xs";
+    }
+  },
+  action: {
+    parser(t) {
+      return t ?? void 0;
+    }
+  }
+}), ot = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.99707" y="2.99609" width="14.0058" height="18.0075" rx="2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.4989 18.5031H14.501" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, nt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0025 14.0007H5.99754C4.89208 14.0007 3.9967 13.1053 3.9967 11.9998V4.99693C3.9967 3.89147 4.89208 2.99609 5.99754 2.99609H18.0025C19.108 2.99609 20.0034 3.89147 20.0034 4.99693V11.9998C20.0034 13.1053 19.108 14.0007 18.0025 14.0007Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1446 14.001H5.85546C4.96209 14.001 4.17676 14.5932 3.93166 15.4526L3.0743 18.4538C2.70915 19.7314 3.66855 21.0039 4.9981 21.0039H19.0019C20.3315 21.0039 21.2909 19.7314 20.9257 18.4538L20.0684 15.4526C19.8223 14.5932 19.0379 14.001 18.1446 14.001Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.99915 18.0022H14.0008" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, rt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 4V5.8C10 6.131 10.224 6.4 10.5 6.4H13.5C13.776 6.4 14 6.131 14 5.8V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.88 17.5H13.12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 4H15C16.105 4 17 4.895 17 6V18C17 19.105 16.105 20 15 20H9C7.895 20 7 19.105 7 18V6C7 4.895 7.895 4 9 4Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, lt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.4316 17.0019H5.56829C4.14777 17.0019 2.99622 15.8504 2.99622 14.4299V5.56817C2.99622 4.14765 4.14777 2.99609 5.56829 2.99609H18.4306C19.113 2.99583 19.7674 3.2667 20.25 3.74908C20.7326 4.23147 21.0037 4.88584 21.0037 5.56817V14.4289C21.004 15.1112 20.7331 15.7657 20.2507 16.2482C19.7683 16.7308 19.114 17.0019 18.4316 17.0019Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.0037 13.0002H2.99622" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.0008 17.002L14.501 21.0036" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.99921 17.002L9.49901 21.0036" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.14136 21.0041H15.8586" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, it = [
+  {
+    value: "primary",
+    label: "Primary"
+  },
+  {
+    value: "secondary",
+    label: "Secondary"
+  },
+  {
+    value: "green",
+    label: "Green"
+  },
+  {
+    value: "red",
+    label: "Red"
+  },
+  {
+    value: "orange",
+    label: "Orange"
+  },
+  {
+    value: "blue",
+    label: "Blue"
+  },
+  {
+    value: "neutral",
+    label: "Neutral"
+  }
+], bo = {
+  xs: 390,
+  sm: 768,
+  md: 1280,
+  lg: 1680
+}, X = [
+  {
+    icon: rt,
+    size: "xs",
+    name: "Mobile"
+  },
+  {
+    icon: ot,
+    size: "sm",
+    name: "Tablet"
+  },
+  {
+    icon: nt,
+    size: "md",
+    name: "Laptop"
+  },
+  {
+    icon: lt,
+    size: "lg",
+    name: "Desktop"
+  }
+], st = "px", at = () => {
+  const {
+    queryParams: { screen: t },
+    setQueryParams: o
+  } = we(), n = (l) => {
+    o({
+      screen: l.currentTarget.getAttribute("value")
+    });
+  };
+  return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ p(S, { children: [
+    /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(w, { source: X.find((l) => l.size === t)?.icon ?? "" }) }) }),
+    /* @__PURE__ */ e(A, { children: X.map((l) => /* @__PURE__ */ e(Z, { isActive: l.size === t, value: l.size, onClick: n, children: /* @__PURE__ */ e(w, { source: l.icon }) }, l.size)) })
+  ] }) });
+}, dt = (t) => {
+  const o = Ue(t ?? "");
+  return isNaN(o) ? void 0 : o;
+}, be = ({
+  units: t = ["px", "%"],
+  size: o = "32",
+  value: n,
+  onChange: l,
+  defaultValue: r = {},
+  ...s
+}) => {
+  const i = t.find((v) => n?.toString().trim().endsWith(v)) ?? t.at(0), [a, d] = M(i);
+  Ce(() => {
+    d(i);
+  }, [i]);
+  const g = ({ value: v, unit: k }) => {
+    if (R(v) || R(k) || k === st) {
+      l?.(v);
+      return;
+    }
+    l?.(`${v}${k}`);
+  }, m = dt(n?.toString()), h = (v) => {
+    v.stopPropagation();
+    const k = v.currentTarget.value;
+    k !== a && (d(v.currentTarget.value), g({ value: r[k], unit: k }));
+  }, C = (v) => {
+    v.target.select(), s.onFocus?.(v);
+  }, c = (v) => {
+    const k = isNaN(v.target.valueAsNumber) ? void 0 : v.target.valueAsNumber;
+    g({
+      unit: a,
+      value: k
+    });
+  };
+  return /* @__PURE__ */ e(
+    L,
+    {
+      size: o,
+      suffix: /* @__PURE__ */ e("div", { css: { display: "inline-flex", alignItems: "center", gap: 4 }, children: t.map((v) => /* @__PURE__ */ e(
+        b,
+        {
+          onClick: h,
+          value: v,
+          css: [
+            { color: u.palette.white["3s"], "&:hover": { color: u.palette.white["4s"] } },
+            a === v && { color: u.palette.white["6s"], "&:hover": { color: u.palette.white["6s"] } }
+          ],
+          size: "20",
+          children: /* @__PURE__ */ e(
+            "span",
+            {
+              css: {
+                ...ae.xs
+              },
+              children: v
+            },
+            v
+          )
+        },
+        v
+      )) }),
+      ...s,
+      value: m ?? "",
+      onFocus: C,
+      onChange: c,
+      mode: "onBlur"
+    }
+  );
+}, xe = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 16V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V16C21 15.4477 20.5523 15 20 15H16.6175C16.2388 15 15.8925 15.214 15.7231 15.5528L15.2759 16.4472C15.1065 16.786 14.7602 17 14.3815 17H9.61753C9.2386 17 8.89222 16.7858 8.72291 16.4468L8.27659 15.5532C8.10728 15.2142 7.76092 15 7.382 15H4C3.44772 15 3 15.4477 3 16Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 9L12 7L10 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 7V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 12V5C20 3.89543 19.1046 3 18 3H6C4.89543 3 4 3.89543 4 5V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, ct = ({ source: t, onChange: o, previewStyle: n }) => {
+  const [l, r] = M(t ?? ""), [s, i] = M(!1), { handlers: a } = ve(), { upload: d } = a;
+  Ce(() => {
+    r(t ?? "");
+  }, [t]);
+  const g = async (C) => {
+    const c = C.at(0);
+    if (c) {
+      i(!0);
+      try {
+        const v = await d(c);
+        o?.(v);
+      } finally {
+        i(!1);
+      }
+    }
+  }, m = (C) => {
+    C.target.value = Ge(C.target.value), r(C.target.value);
+  }, h = (C) => {
+    C.currentTarget.value !== (t ?? "") && o?.(l);
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      css: {
+        padding: 16,
+        display: "flex",
+        borderRadius: 8,
+        flexDirection: "column",
+        gap: 8,
+        backgroundColor: u.palette.white["1s"]
+      },
+      children: [
+        /* @__PURE__ */ e(je, { isLoading: s, children: /* @__PURE__ */ e(
+          _e,
+          {
+            accept: {
+              "image/png": [".png"],
+              "image/jpeg": [".jpeg", ".jpg"],
+              "image/webp": [".webp"]
+            },
+            multiple: !1,
+            onDrop: g,
+            children: ({ getInputProps: C, getRootProps: c }) => /* @__PURE__ */ p(
+              "div",
+              {
+                css: [
+                  {
+                    display: "flex",
+                    position: "relative",
+                    cursor: "pointer",
+                    borderRadius: 8,
+                    overflow: "hidden",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: u.palette.white["1s"],
+                    aspectRatio: "16 / 9"
+                  },
+                  !!t && {
+                    "&:hover .overlay": {
+                      backgroundColor: "rgba(0, 0, 0, 0.4)",
+                      opacity: 1
+                    }
+                  }
+                ],
+                ...c(),
+                children: [
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      css: { position: "absolute", inset: 0, borderRadius: 8, pointerEvents: "none" },
+                      style: {
+                        backgroundImage: t ? `url(${t})` : void 0,
+                        backgroundSize: "cover",
+                        backgroundRepeat: "no-repeat",
+                        backgroundPosition: "center",
+                        ...n
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ p(
+                    "div",
+                    {
+                      className: "overlay",
+                      css: [
+                        {
+                          display: "flex",
+                          position: "absolute",
+                          inset: 0,
+                          flexDirection: "column",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          gap: 8,
+                          backgroundColor: "rgba(0, 0, 0, 0)",
+                          transition: "all"
+                        },
+                        !!t && { opacity: 0 }
+                      ],
+                      children: [
+                        /* @__PURE__ */ e(w, { size: 32, source: xe }),
+                        /* @__PURE__ */ e(
+                          "span",
+                          {
+                            css: {
+                              ...ae.xs
+                            },
+                            children: "PNG, JPEG, JPG, WEBP"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ e("input", { ...C() })
+                ]
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          Ne,
+          {
+            onChange: m,
+            title: l,
+            value: l,
+            size: "32",
+            onBlur: h,
+            placeholder: "https://example.com/image.jpg"
+          }
+        )
+      ]
+    }
+  );
+}, x = ({ name: t, responsive: o, children: n, direction: l = "horizontal", guide: r }) => /* @__PURE__ */ p(
+  "div",
+  {
+    css: [
+      { display: "flex" },
+      l === "vertical" && { flexDirection: "column", gap: 8 },
+      l === "horizontal" && { gap: 16, alignItems: "center", justifyContent: "space-between" }
+    ],
+    children: [
+      /* @__PURE__ */ p("div", { css: { display: "flex", alignItems: "center", gap: 4 }, children: [
+        /* @__PURE__ */ p(
+          "div",
+          {
+            css: { display: "flex", alignItems: "center", gap: 8, ...u.text.xs, color: u.palette.white["5s"] },
+            children: [
+              t,
+              !!r && /* @__PURE__ */ e(et, { placement: "top-start", content: r, children: /* @__PURE__ */ e(w, { css: { cursor: "pointer" }, size: 16, source: Xe }) })
+            ]
+          }
+        ),
+        !!o && /* @__PURE__ */ e(at, {})
+      ] }),
+      n
+    ]
+  }
+), ut = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.182 18H5.45499H9.43499L14.565 6H18.545H9.81799" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, ht = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 6H12.875C14.5319 6 15.875 7.34315 15.875 9V9C15.875 10.6569 14.5319 12 12.875 12H7V6Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 12H14C15.6569 12 17 13.3431 17 15V15C17 16.6569 15.6569 18 14 18H7V12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, pt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 6V12C16 14.2091 14.2091 16 12 16V16C9.79086 16 8 14.2091 8 12V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 19H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, gt = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.49995 2.99936L14.4999 2.99805C14.7761 2.99802 15 3.22185 15 3.49799C15 3.77413 14.7762 3.99802 14.5001 3.99805L2.50005 3.99936C2.22391 3.99939 2.00003 3.77556 2 3.49942C1.99997 3.22327 2.2238 2.99939 2.49995 2.99936Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.97492 6.00077L12.025 6C12.3012 5.99997 12.5251 6.2238 12.5251 6.49994C12.5251 6.77609 12.3013 6.99997 12.0251 7L4.97503 7.00077C4.69889 7.0008 4.47501 6.77697 4.47498 6.50083C4.47495 6.22468 4.69878 6.0008 4.97492 6.00077Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.97492 12.0027L12.025 12.002C12.3012 12.0019 12.5251 12.2258 12.5251 12.5019C12.5251 12.778 12.3013 13.0019 12.0251 13.002L4.97503 13.0027C4.69889 13.0028 4.47501 12.7789 4.47498 12.5028C4.47495 12.2266 4.69878 12.0028 4.97492 12.0027Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3.52704 9.00109L13.4728 9C13.749 8.99997 13.9729 9.2238 13.9729 9.49994C13.9729 9.77609 13.7491 9.99997 13.473 10L3.52715 10.0011C3.25101 10.0011 3.02713 9.77729 3.0271 9.50114C3.02707 9.225 3.2509 9.00112 3.52704 9.00109Z" fill="currentColor"></path></svg></svg>', Ct = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.49995 2.99741L14.4999 2.99609C14.7761 2.99606 15 3.2199 15 3.49604C15 3.77218 14.7762 3.99606 14.5001 3.99609L2.50005 3.99741C2.22391 3.99744 2.00003 3.77361 2 3.49746C1.99997 3.22132 2.2238 2.99744 2.49995 2.99741Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2.49995 5.99936L14.4999 5.99805C14.7761 5.99802 15 6.22185 15 6.49799C15 6.77413 14.7762 6.99802 14.5001 6.99805L2.50005 6.99936C2.22391 6.99939 2.00003 6.77556 2 6.49942C1.99997 6.22327 2.2238 5.99939 2.49995 5.99936Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2.49995 12.0029L11.5045 12.002C11.7806 12.0019 12.0045 12.2258 12.0045 12.5019C12.0045 12.778 11.7807 13.0019 11.5046 13.002L2.50005 13.0029C2.22391 13.003 2.00003 12.7791 2 12.503C1.99997 12.2269 2.2238 12.003 2.49995 12.0029Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2.49995 9.00131L14.4999 9C14.7761 8.99997 15 9.2238 15 9.49995C15 9.77609 14.7762 9.99997 14.5001 10L2.50005 10.0013C2.22391 10.0013 2.00003 9.77751 2 9.50137C1.99997 9.22523 2.2238 9.00134 2.49995 9.00131Z" fill="currentColor"></path></svg></svg>', vt = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.49995 2.99936L14.4999 2.99805C14.7761 2.99802 15 3.22185 15 3.49799C15 3.77413 14.7762 3.99802 14.5001 3.99805L2.50005 3.99936C2.22391 3.99939 2.00003 3.77556 2 3.49942C1.99997 3.22327 2.2238 2.99939 2.49995 2.99936Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2.49995 6.00077L9.55005 6C9.8262 5.99997 10.0501 6.2238 10.0501 6.49994C10.0501 6.77609 9.82631 6.99997 9.55016 7L2.50005 7.00077C2.22391 7.0008 2.00003 6.77697 2 6.50083C1.99997 6.22468 2.2238 6.0008 2.49995 6.00077Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2.49995 12.0027L9.55005 12.002C9.8262 12.0019 10.0501 12.2258 10.0501 12.5019C10.0501 12.778 9.82631 13.0019 9.55016 13.002L2.50005 13.0027C2.22391 13.0028 2.00003 12.7789 2 12.5028C1.99997 12.2266 2.2238 12.0028 2.49995 12.0027Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2.49995 9.00109L12.4457 9C12.7219 8.99997 12.9458 9.2238 12.9458 9.49994C12.9458 9.77609 12.722 9.99997 12.4459 10L2.50005 10.0011C2.22391 10.0011 2.00003 9.77729 2 9.50114C1.99997 9.225 2.2238 9.00112 2.49995 9.00109Z" fill="currentColor"></path></svg></svg>', mt = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.49995 2.99936L14.4999 2.99805C14.7761 2.99802 15 3.22185 15 3.49799C15 3.77413 14.7762 3.99802 14.5001 3.99805L2.50005 3.99936C2.22391 3.99939 2.00003 3.77556 2 3.49942C1.99997 3.22327 2.2238 2.99939 2.49995 2.99936Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M7.4499 6.00077L14.5 6C14.7761 5.99997 15 6.2238 15.0001 6.49994C15.0001 6.77609 14.7763 6.99997 14.5001 7L7.45001 7.00077C7.17386 7.0008 6.94998 6.77697 6.94995 6.50083C6.94992 6.22468 7.17375 6.0008 7.4499 6.00077Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M7.4499 12.0027L14.5 12.002C14.7761 12.0019 15 12.2258 15.0001 12.5019C15.0001 12.778 14.7763 13.0019 14.5001 13.002L7.45001 13.0027C7.17386 13.0028 6.94998 12.7789 6.94995 12.5028C6.94992 12.2266 7.17375 12.0028 7.4499 12.0027Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.55414 9.00109L14.4999 9C14.7761 8.99997 15 9.2238 15 9.49994C15 9.77609 14.7762 9.99997 14.5001 10L4.55425 10.0011C4.27811 10.0011 4.05423 9.77729 4.0542 9.50114C4.05417 9.225 4.278 9.00112 4.55414 9.00109Z" fill="currentColor"></path></svg></svg>', xo = ({ value: t, onChange: o, label: n }) => /* @__PURE__ */ e(x, { name: n ?? "Text align", responsive: !0, children: /* @__PURE__ */ e(H, { onSelectionChange: o, value: t, children: [
+  {
+    icon: vt,
+    value: "left"
+  },
+  {
+    icon: gt,
+    value: "center"
+  },
+  {
+    icon: mt,
+    value: "right"
+  },
+  {
+    icon: Ct,
+    value: "justify"
+  }
+].map((r) => /* @__PURE__ */ e(b, { value: r.value, children: /* @__PURE__ */ e(w, { source: r.icon }) }, r.value)) }) }), ko = ({ value: t, onChange: o, name: n, responsive: l }) => {
+  const r = () => {
+    o?.({
+      ...t,
+      fontWeight: t?.fontWeight === 700 ? void 0 : 700
+    });
+  }, s = () => {
+    o?.({
+      ...t,
+      fontStyle: t?.fontStyle === "italic" ? void 0 : "italic"
+    });
+  }, i = () => {
+    o?.({
+      ...t,
+      textDecorationLine: t?.textDecorationLine === "underline" ? void 0 : "underline"
+    });
+  };
+  return /* @__PURE__ */ e(x, { name: n ?? "Text Style", responsive: l, children: /* @__PURE__ */ p("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ e(
+      b,
+      {
+        onClick: r,
+        size: "28",
+        css: [t?.fontWeight === 700 && { backgroundColor: u.palette.white["2s"] }],
+        children: /* @__PURE__ */ e(w, { source: ht })
+      }
+    ),
+    /* @__PURE__ */ e(
+      b,
+      {
+        onClick: s,
+        size: "28",
+        css: [t?.fontStyle === "italic" && { backgroundColor: u.palette.white["2s"] }],
+        children: /* @__PURE__ */ e(w, { source: ut })
+      }
+    ),
+    /* @__PURE__ */ e(
+      b,
+      {
+        onClick: i,
+        size: "28",
+        css: [t?.textDecorationLine === "underline" && { backgroundColor: u.palette.white["2s"] }],
+        children: /* @__PURE__ */ e(w, { source: pt })
+      }
+    )
+  ] }) });
+}, te = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path fill-rule="evenodd" clip-rule="evenodd" d="M3.81282 3.81282C7.22991 0.395728 12.7701 0.395728 16.1872 3.81282C19.6043 7.22991 19.6043 12.7701 16.1872 16.1872C12.7701 19.6043 7.22991 19.6043 3.81282 16.1872C0.395728 12.7701 0.395728 7.22991 3.81282 3.81282ZM14.8432 4.27291C11.8965 1.77533 7.47681 1.91659 4.6967 4.6967C1.91659 7.47681 1.77533 11.8965 4.27291 14.8432L14.8432 4.27291ZM5.15679 15.7271C8.10352 18.2247 12.5232 18.0834 15.3033 15.3033C18.0834 12.5232 18.2247 8.10352 15.7271 5.15679L5.15679 15.7271Z" fill="currentColor"></path></svg>', Lo = ({ value: t, onChange: o, name: n, responsive: l }) => {
+  const r = [
+    {
+      icon: te,
+      value: "none"
+    },
+    {
+      value: "uppercase",
+      example: "AA"
+    },
+    {
+      value: "capitalize",
+      example: "Aa"
+    },
+    {
+      value: "lowercase",
+      example: "aa"
+    }
+  ];
+  return /* @__PURE__ */ e(x, { name: n ?? "Text Transform", responsive: l, children: /* @__PURE__ */ e(H, { onSelectionChange: (i) => {
+    o?.({
+      textTransform: i === "none" ? void 0 : i
+    });
+  }, value: t?.textTransform, children: r.map((i) => /* @__PURE__ */ e(b, { value: i.value, children: i.icon ? /* @__PURE__ */ e(w, { source: i.icon }) : /* @__PURE__ */ e(
+    "span",
+    {
+      css: {
+        ...u.text.sm,
+        lineHeight: 1
+      },
+      children: i.example
+    }
+  ) }, i.value)) }) });
+}, Mo = ({ name: t, value: o, onChange: n, responsive: l = !0, menu: r }) => {
+  const s = _(null), [i, a] = M(!1), d = (f) => {
+    n?.({
+      width: f
+    });
+  }, g = (f) => {
+    a(!0);
+  }, m = () => {
+    setTimeout(() => {
+      a(!1);
+    }, 100);
+  }, h = [
+    {
+      value: "auto",
+      label: "Auto",
+      visible: r?.autoOption?.visible ?? !0,
+      clearable: r?.autoOption?.clearable
+    },
+    {
+      value: "fit-content",
+      label: "Fit content",
+      visible: r?.fitContentOption?.visible ?? !1,
+      clearable: r?.fitContentOption?.clearable
+    }
+  ], C = h.filter((f) => f.visible), c = h.find((f) => f.value === o?.width)?.label?.toString(), v = (f) => {
+    const y = f.currentTarget.getAttribute("value");
+    R(y) || d(y);
+  }, k = (f) => {
+    f.stopPropagation(), d(void 0);
+  };
+  return /* @__PURE__ */ e(x, { name: t ?? "Width", responsive: l, children: /* @__PURE__ */ p("div", { css: { position: "relative", width: "50%" }, children: [
+    /* @__PURE__ */ e(
+      be,
+      {
+        fullWidth: !0,
+        wrapRef: s,
+        placeholder: c,
+        value: o?.width,
+        onChange: d,
+        defaultValue: {
+          "%": 100
+        },
+        onFocus: g,
+        onBlur: m
+      }
+    ),
+    !!C.length && /* @__PURE__ */ p(S, { open: i, placement: "bottom-start", children: [
+      /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e("div", { css: { position: "absolute", inset: "0 0 auto 0", top: "100%" } }) }),
+      /* @__PURE__ */ e(A, { children: C.map((f) => /* @__PURE__ */ p(
+        Z,
+        {
+          css: { justifyContent: "space-between" },
+          isActive: o?.width === f.value,
+          onClick: v,
+          value: f.value,
+          children: [
+            f.label,
+            f.clearable && o?.width === f.value && /* @__PURE__ */ e(b, { onClick: k, size: "20", children: /* @__PURE__ */ e(w, { size: 16, source: B }) })
+          ]
+        },
+        f.value
+      )) })
+    ] })
+  ] }) });
+}, yo = ({
+  name: t,
+  value: o,
+  onChange: n,
+  responsive: l = !0,
+  units: r = ["px", "%"],
+  menu: s
+}) => {
+  const [i, a] = M(!1), d = [
+    {
+      value: "auto",
+      label: "Auto",
+      visible: s?.autoOption?.visible ?? !0,
+      clearable: s?.autoOption?.clearable ?? !1
+    },
+    {
+      value: "fit-content",
+      label: "Fit content",
+      visible: s?.fitContentOption?.visible ?? !1,
+      clearable: s?.fitContentOption?.clearable ?? !1
+    }
+  ], g = d.filter((f) => f.visible), m = (f) => {
+    n?.({
+      height: f
+    });
+  }, h = (f) => {
+    a(!0);
+  }, C = () => {
+    setTimeout(() => {
+      a(!1);
+    }, 100);
+  }, c = d.find((f) => f.value === o?.height)?.label, v = (f) => {
+    const y = f.currentTarget.getAttribute("value");
+    R(y) || m(y);
+  }, k = (f) => {
+    f.stopPropagation(), m(void 0);
+  };
+  return /* @__PURE__ */ e(x, { name: t ?? "Height", responsive: l, children: /* @__PURE__ */ p("div", { css: { position: "relative", width: "50%" }, children: [
+    /* @__PURE__ */ e(
+      be,
+      {
+        fullWidth: !0,
+        units: r,
+        placeholder: c,
+        value: o?.height,
+        onChange: m,
+        onFocus: h,
+        onBlur: C
+      }
+    ),
+    !!g.length && /* @__PURE__ */ p(S, { open: i, placement: "bottom-start", children: [
+      /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e("div", { css: { position: "absolute", inset: "0 0 auto 0", top: "100%" } }) }),
+      /* @__PURE__ */ e(A, { children: g.map((f) => /* @__PURE__ */ p(
+        Z,
+        {
+          css: { justifyContent: "space-between" },
+          isActive: o?.height === f.value,
+          onClick: v,
+          value: f.value,
+          children: [
+            f.label,
+            f.clearable && o?.height === f.value && /* @__PURE__ */ e(b, { onClick: k, size: "20", children: /* @__PURE__ */ e(w, { size: 16, source: B }) })
+          ]
+        },
+        f.value
+      )) })
+    ] })
+  ] }) });
+}, Io = ({ name: t, responsive: o, value: n, onChange: l }) => {
+  const r = (s) => {
+    l?.({
+      color: s
+    });
+  };
+  return /* @__PURE__ */ e(x, { name: t ?? "Color", responsive: o, children: /* @__PURE__ */ e(ee, { color: n?.color, onChange: r }) });
+}, ft = ({ value: t, onChange: o }) => {
+  const n = ve(), l = fe(Ae), r = (() => {
+    const i = Object.keys(l).find((a) => l[a] === t?.backgroundColor);
+    return i ? pe(n.theme.palette, i) : t?.backgroundColor;
+  })();
+  return /* @__PURE__ */ e(x, { name: "Color", children: /* @__PURE__ */ e(ee, { color: r, onChange: (i) => {
+    o?.({ ...t, backgroundColor: i });
+  } }) });
+}, wt = '<svg width="16" height="16" viewBox="0 0 15 4" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0.5C0.5 0.223858 0.723858 0 1 0H4C4.27614 0 4.5 0.223858 4.5 0.5V3.5C4.5 3.77614 4.27614 4 4 4H1C0.723858 4 0.5 3.77614 0.5 3.5V0.5ZM1.5 1V3H3.5V1H1.5Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 0.5C5.5 0.223858 5.72386 0 6 0H9C9.27614 0 9.5 0.223858 9.5 0.5V3.5C9.5 3.77614 9.27614 4 9 4H6C5.72386 4 5.5 3.77614 5.5 3.5V0.5ZM6.5 1V3H8.5V1H6.5Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C10.7239 0 10.5 0.223858 10.5 0.5V3.5C10.5 3.77614 10.7239 4 11 4H14C14.2761 4 14.5 3.77614 14.5 3.5V0.5C14.5 0.223858 14.2761 0 14 0H11ZM11.5 3V1H13.5V3H11.5Z" fill="currentColor"></path> </svg>', bt = `<svg width="16" height="16" viewBox="0 0 5 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0.5C0.5 0.223858 0.723858 0 1 0H4C4.27614 0 4.5 0.223858 4.5 0.5V3.5C4.5 3.77614 4.27614 4 4 4H1C0.723858 4 0.5 3.77614 0.5 3.5V0.5ZM1.5 1V3H3.5V1H1.5Z" fill="currentColor"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 5.5C0.5 5.22386 0.723858 5 1 5H4C4.27614 5 4.5 5.22386 4.5 5.5V8.5C4.5 8.77614 4.27614 9 4 9H1C0.723858 9 0.5 8.77614 0.5 8.5V5.5ZM1.5 6V8H3.5V6H1.5Z" fill="currentColor"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1 10C0.723858 10 0.5 10.2239 0.5 10.5V13.5C0.5 13.7761 0.723858 14 1 14H4C4.27614 14 4.5 13.7761 4.5 13.5V10.5C4.5 10.2239 4.27614 10 4 10H1ZM1.5 13V11H3.5V13H1.5Z" fill="currentColor"></path>
+</svg>`, xt = '<svg width="16" height="16" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0.5C0.5 0.223858 0.723858 0 1 0H4C4.27614 0 4.5 0.223858 4.5 0.5V3.5C4.5 3.77614 4.27614 4 4 4H1C0.723858 4 0.5 3.77614 0.5 3.5V0.5ZM1.5 1V3H3.5V1H1.5Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 5.5C0.5 5.22386 0.723858 5 1 5H4C4.27614 5 4.5 5.22386 4.5 5.5V8.5C4.5 8.77614 4.27614 9 4 9H1C0.723858 9 0.5 8.77614 0.5 8.5V5.5ZM1.5 6V8H3.5V6H1.5Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 10C0.723858 10 0.5 10.2239 0.5 10.5V13.5C0.5 13.7761 0.723858 14 1 14H4C4.27614 14 4.5 13.7761 4.5 13.5V10.5C4.5 10.2239 4.27614 10 4 10H1ZM1.5 13V11H3.5V13H1.5Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 0.5C5.5 0.223858 5.72386 0 6 0H9C9.27614 0 9.5 0.223858 9.5 0.5V3.5C9.5 3.77614 9.27614 4 9 4H6C5.72386 4 5.5 3.77614 5.5 3.5V0.5ZM6.5 1V3H8.5V1H6.5Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C5.72386 5 5.5 5.22386 5.5 5.5V8.5C5.5 8.77614 5.72386 9 6 9H9C9.27614 9 9.5 8.77614 9.5 8.5V5.5C9.5 5.22386 9.27614 5 9 5H6ZM6.5 8V6H8.5V8H6.5Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 10.5C5.5 10.2239 5.72386 10 6 10H9C9.27614 10 9.5 10.2239 9.5 10.5V13.5C9.5 13.7761 9.27614 14 9 14H6C5.72386 14 5.5 13.7761 5.5 13.5V10.5ZM6.5 11V13H8.5V11H6.5Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C10.7239 0 10.5 0.223858 10.5 0.5V3.5C10.5 3.77614 10.7239 4 11 4H14C14.2761 4 14.5 3.77614 14.5 3.5V0.5C14.5 0.223858 14.2761 0 14 0H11ZM11.5 3V1H13.5V3H11.5Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 5.5C10.5 5.22386 10.7239 5 11 5H14C14.2761 5 14.5 5.22386 14.5 5.5V8.5C14.5 8.77614 14.2761 9 14 9H11C10.7239 9 10.5 8.77614 10.5 8.5V5.5ZM11.5 6V8H13.5V6H11.5Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 10C10.7239 10 10.5 10.2239 10.5 10.5V13.5C10.5 13.7761 10.7239 14 11 14H14C14.2761 14 14.5 13.7761 14.5 13.5V10.5C14.5 10.2239 14.2761 10 14 10H11ZM11.5 13V11H13.5V13H11.5Z" fill="currentColor"></path> </svg>', kt = [
+  {
+    value: "no-repeat",
+    icon: te
+  },
+  {
+    value: "repeat-x",
+    icon: wt
+  },
+  {
+    value: "repeat-y",
+    icon: bt
+  },
+  {
+    value: "repeat",
+    icon: xt
+  }
+], Lt = [
+  "left top",
+  "top",
+  "right top",
+  "left",
+  "center",
+  "right",
+  "left bottom",
+  "bottom",
+  "right bottom"
+], Mt = ["cover", "contain", "auto"], yt = [
+  {
+    value: "scroll",
+    label: "Scroll"
+  },
+  {
+    value: "fixed",
+    label: "Fixed"
+  },
+  {
+    value: "local",
+    label: "Local"
+  }
+], It = `<svg width="24" height="24" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.5" cy="12.5" r="1.5" fill="currentColor" stroke="currentColor" stroke-width="1.2"/>
+</svg>`, ke = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 21L15.3833 8.53125C15.2099 8.20436 14.8701 8 14.5 8C14.1299 8 13.7901 8.20436 13.6167 8.53125L7 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.0803 13.6136L16.2902 14.6136" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5 13.6136L16.2902 14.6136" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.7098 14.6136L14.5 13.6136" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.9197 13.6136L12.7098 14.6136" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23 21H1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.43506 4.51868C9.35978 4.6148 10.0468 5.41892 9.99748 6.34731C9.94813 7.27571 9.1797 8.00245 8.25 8H4.5C3.67157 8 3 7.32843 3 6.5C3 5.67157 3.67157 5 4.5 5C4.49826 3.98978 5.25139 3.13744 6.25414 3.01479C7.2569 2.89214 8.19325 3.53782 8.43506 4.51868Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.95966 15.4228L8.378 12.5214C8.20283 12.2 7.86604 12 7.5 12C7.13396 12 6.79717 12.2 6.622 12.5214L2 21.0001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, Ht = (t) => t?.match(/url\((['"]?)(https?:\/\/[^'")]+)\1\)/)?.at(2), Vt = ({ onChange: t, value: o }) => {
+  const [n, l] = Je(!1), r = o?.backgroundPosition ?? "center", s = o?.backgroundRepeat ?? "no-repeat", i = o?.backgroundSize ?? "cover", a = o?.backgroundAttachment ?? "scroll", d = (c) => {
+    t?.({
+      backgroundImage: c ? `url(${c})` : void 0,
+      backgroundPosition: r,
+      backgroundRepeat: s,
+      backgroundSize: i
+    });
+  }, g = (c) => {
+    t?.({
+      ...o,
+      backgroundRepeat: c
+    });
+  }, m = (c) => {
+    t?.({
+      ...o,
+      backgroundPosition: c.currentTarget.value
+    });
+  }, h = (c) => {
+    t?.({
+      ...o,
+      backgroundSize: c.currentTarget.value
+    });
+  }, C = (c) => {
+    t?.({
+      ...o,
+      backgroundAttachment: c
+    });
+  };
+  return /* @__PURE__ */ p("div", { css: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ e(
+      ct,
+      {
+        previewStyle: {
+          backgroundPosition: r,
+          backgroundRepeat: s,
+          backgroundSize: i,
+          backgroundAttachment: a
+        },
+        source: Ht(o?.backgroundImage),
+        onChange: d
+      }
+    ),
+    /* @__PURE__ */ e(
+      Y,
+      {
+        suffix: /* @__PURE__ */ e(
+          w,
+          {
+            css: [{ transition: "transform" }, n && { transform: "rotate(-180deg)" }],
+            source: J
+          }
+        ),
+        onClick: l,
+        children: n ? "Show less" : "Show more"
+      }
+    ),
+    /* @__PURE__ */ e(de, { open: n, children: /* @__PURE__ */ p("div", { css: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+      /* @__PURE__ */ e(x, { name: "Scale", children: /* @__PURE__ */ e("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: Mt.map((c) => {
+        const v = i === c;
+        return /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: h,
+            value: c,
+            css: [
+              {
+                padding: 6,
+                borderRadius: 4,
+                borderWidth: 1,
+                borderStyle: "solid",
+                borderColor: u.palette.white["2s"]
+              },
+              { color: u.palette.white["4s"] },
+              v && { color: u.palette.white["6s"], borderColor: u.palette.white["5s"] }
+            ],
+            children: /* @__PURE__ */ p(
+              "div",
+              {
+                css: {
+                  position: "relative",
+                  display: "flex",
+                  borderRadius: 4,
+                  overflow: "hidden",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: 32,
+                  width: 48
+                },
+                children: [
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      css: [
+                        {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          backgroundColor: u.palette.white["1s"]
+                        },
+                        c === "auto" && { borderRadius: 2 },
+                        c === "contain" && { width: 32, height: 32 },
+                        c === "cover" && { width: "100%", height: "100%" },
+                        c === "auto" && { width: 24, height: 24 }
+                      ],
+                      children: /* @__PURE__ */ e(w, { source: ke })
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      css: [
+                        {
+                          position: "absolute",
+                          inset: 0,
+                          borderRadius: 4,
+                          pointerEvents: "none",
+                          borderWidth: 1,
+                          borderStyle: "solid",
+                          borderColor: u.palette.white["1s"]
+                        },
+                        v && { borderColor: u.palette.white["2s"] }
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          c
+        );
+      }) }) }),
+      /* @__PURE__ */ e(x, { name: "Position", children: /* @__PURE__ */ e(
+        "div",
+        {
+          css: {
+            display: "grid",
+            padding: 8,
+            gap: 2,
+            borderRadius: 12,
+            backgroundColor: u.palette.white["1s"],
+            gridTemplateColumns: "repeat(3, minmax(0, 1fr))"
+          },
+          children: Lt.map((c) => {
+            const v = r === c;
+            return /* @__PURE__ */ p(
+              b,
+              {
+                css: [
+                  { position: "relative" },
+                  v && {
+                    backgroundColor: u.palette.black["7s"]
+                  }
+                ],
+                onClick: m,
+                value: c,
+                size: "20",
+                children: [
+                  /* @__PURE__ */ e(w, { source: It }),
+                  v && /* @__PURE__ */ e(
+                    "div",
+                    {
+                      css: {
+                        position: "absolute",
+                        borderRadius: 9999,
+                        pointerEvents: "none",
+                        width: 12,
+                        height: 12,
+                        borderStyle: "solid",
+                        borderWidth: 2
+                      }
+                    }
+                  )
+                ]
+              },
+              c
+            );
+          })
+        }
+      ) }),
+      /* @__PURE__ */ e(x, { name: "Repeat", children: /* @__PURE__ */ e(H, { value: s, onSelectionChange: g, children: kt.map((c) => /* @__PURE__ */ e(b, { value: c.value, children: /* @__PURE__ */ e(w, { source: c.icon }) }, c.value)) }) }),
+      /* @__PURE__ */ e(x, { name: "Attachment", children: /* @__PURE__ */ e(
+        j,
+        {
+          onChange: C,
+          css: {
+            width: "50%"
+          },
+          value: a,
+          options: yt
+        }
+      ) })
+    ] }) })
+  ] });
+}, Ho = ({ value: t, onChange: o }) => /* @__PURE__ */ p(ze, { defaultIndex: t?.backgroundImage ? 1 : 0, children: [
+  /* @__PURE__ */ p(Oe, { children: [
+    /* @__PURE__ */ e(
+      ie,
+      {
+        css: {
+          ...u.text.xs
+        },
+        children: "Color"
+      }
+    ),
+    /* @__PURE__ */ e(
+      ie,
+      {
+        css: {
+          ...u.text.xs
+        },
+        children: "Image"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ p(
+    Pe,
+    {
+      css: {
+        paddingTop: 2
+      },
+      children: [
+        /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(ft, { onChange: o, value: t }) }),
+        /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(Vt, { onChange: o, value: t }) })
+      ]
+    }
+  )
+] }), V = ({ name: t, value: o, onChange: n }) => {
+  const [l, r] = M(!1), s = "auto", i = [
+    {
+      label: "Auto",
+      value: s
+    }
+  ], a = () => {
+    setTimeout(() => {
+      r(!1);
+    }, 100);
+  }, d = (C) => {
+    r(!0), C.target.select();
+  }, g = (C) => {
+    const c = isNaN(C.target.valueAsNumber) ? void 0 : C.target.valueAsNumber;
+    n?.(t, c);
+  }, m = (C) => {
+    n?.(t, C.currentTarget.getAttribute("value") ?? void 0);
+  }, h = (C) => {
+    C.stopPropagation(), n?.(t);
+  };
+  return /* @__PURE__ */ p("div", { css: { position: "relative", width: 44, height: "fit-content" }, children: [
+    /* @__PURE__ */ e(
+      L,
+      {
+        mode: "onBlur",
+        onFocus: d,
+        css: { textAlign: "center" },
+        size: "28",
+        autoComplete: "off",
+        fullWidth: !0,
+        placeholder: o === s ? "Auto" : void 0,
+        value: o ?? 0,
+        onBlur: a,
+        name: t,
+        onChange: g
+      }
+    ),
+    t.startsWith("margin") && /* @__PURE__ */ p(S, { open: l, placement: "bottom-start", children: [
+      /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e("div", { css: { position: "absolute", inset: "0 0 auto 0", top: "100%" } }) }),
+      /* @__PURE__ */ e(A, { children: i.map((C) => {
+        const c = C.value === o;
+        return /* @__PURE__ */ p(
+          Z,
+          {
+            onClick: m,
+            css: { justifyContent: "space-between" },
+            isActive: c,
+            value: C.value,
+            children: [
+              C.label,
+              c && /* @__PURE__ */ e(b, { size: "20", onClick: h, children: /* @__PURE__ */ e(w, { size: 16, source: B }) })
+            ]
+          },
+          C.value
+        );
+      }) })
+    ] })
+  ] });
+}, Vo = ({ value: t, onChange: o }) => {
+  const n = _(null), l = _(null), [r, s] = M(0), [i, a] = M(0);
+  Ve(() => {
+    const g = new ResizeObserver((m) => {
+      const h = m.at(0)?.target;
+      if (h) {
+        const { width: c } = h.getBoundingClientRect();
+        s(Math.floor(Math.sqrt(Math.pow(c, 2) / 2)));
+      }
+      const C = m.at(1)?.target;
+      if (C) {
+        const { width: c } = C.getBoundingClientRect();
+        a(Math.floor(Math.sqrt(Math.pow(c, 2) / 2)));
+      }
+    });
+    return n.current && g.observe(n.current), l.current && g.observe(l.current), () => g.disconnect();
+  }, []);
+  const d = (g, m) => {
+    o?.({
+      ...t,
+      [g]: m
+    });
+  };
+  return /* @__PURE__ */ p("div", { ref: n, css: { position: "relative", overflow: "hidden", borderRadius: 4, aspectRatio: 1 }, children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        css: { position: "absolute", inset: 0, display: "grid", transform: "rotate(45deg) translateY(50%)", placeItems: "center" },
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              width: r
+            },
+            css: {
+              position: "relative",
+              pointerEvents: "auto",
+              backgroundColor: u.palette.white["1s"],
+              aspectRatio: 1
+            },
+            children: /* @__PURE__ */ e(
+              "div",
+              {
+                css: {
+                  position: "absolute",
+                  display: "flex",
+                  justifyContent: "center",
+                  width: "100%",
+                  height: "100%",
+                  zIndex: 10,
+                  transform: "rotate(-45deg)"
+                },
+                children: /* @__PURE__ */ e(
+                  "div",
+                  {
+                    css: {
+                      position: "relative",
+                      display: "flex",
+                      paddingBottom: 12,
+                      alignItems: "flex-end",
+                      zIndex: 10,
+                      height: "50%"
+                    },
+                    children: /* @__PURE__ */ e(V, { name: "marginBottom", value: t?.marginBottom, onChange: d })
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        css: { position: "absolute", inset: 0, display: "grid", transform: "rotate(45deg) translateY(-50%)", placeItems: "center" },
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              width: r
+            },
+            css: {
+              position: "relative",
+              pointerEvents: "auto",
+              backgroundColor: u.palette.white["1s"],
+              aspectRatio: 1
+            },
+            children: /* @__PURE__ */ e(
+              "div",
+              {
+                css: { position: "absolute", display: "flex", width: "100%", height: "100%", zIndex: 10, transform: "rotate(-45deg)" },
+                children: /* @__PURE__ */ e("div", { css: { position: "relative", display: "flex", paddingTop: 12, zIndex: 10, height: "50%" }, children: /* @__PURE__ */ e(V, { name: "marginTop", value: t?.marginTop, onChange: d }) })
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        css: { position: "absolute", inset: 0, display: "grid", transform: "rotate(45deg) translateX(50%)", placeItems: "center" },
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              width: r
+            },
+            css: {
+              position: "relative",
+              pointerEvents: "auto",
+              aspectRatio: 1,
+              backgroundColor: u.palette.white["1s"]
+            },
+            children: /* @__PURE__ */ e(
+              "div",
+              {
+                css: { position: "absolute", inset: 0, display: "flex", alignItems: "center", zIndex: 10, transform: "rotate(-45deg)" },
+                children: /* @__PURE__ */ e("div", { css: { display: "flex", paddingRight: 6, justifyContent: "flex-end", width: "50%" }, children: /* @__PURE__ */ e(V, { name: "marginRight", value: t?.marginRight, onChange: d }) })
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        css: { position: "absolute", inset: 0, display: "grid", transform: "rotate(45deg) translateX(-50%)", placeItems: "center" },
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              width: r
+            },
+            css: {
+              position: "relative",
+              pointerEvents: "auto",
+              aspectRatio: 1,
+              backgroundColor: u.palette.white["1s"]
+            },
+            children: /* @__PURE__ */ e(
+              "div",
+              {
+                css: {
+                  position: "absolute",
+                  inset: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "flex-end",
+                  zIndex: 10,
+                  transform: "rotate(-45deg)"
+                },
+                children: /* @__PURE__ */ e("div", { css: { display: "flex", paddingLeft: 6, width: "50%" }, children: /* @__PURE__ */ e("div", { css: { width: 40 }, children: /* @__PURE__ */ e(V, { name: "marginLeft", value: t?.marginLeft, onChange: d }) }) })
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ p(
+      "div",
+      {
+        css: {
+          position: "absolute",
+          left: "50%",
+          top: "50%",
+          borderRadius: 4,
+          overflow: "hidden",
+          width: "60%",
+          height: "60%",
+          backgroundColor: u.palette.white["1s"],
+          transform: "translate(-50%, -50%)"
+        },
+        children: [
+          /* @__PURE__ */ e("div", { ref: l, css: { position: "relative", width: "100%", height: "100%" }, children: /* @__PURE__ */ e(
+            "div",
+            {
+              css: { position: "absolute", inset: 0, display: "grid", transform: "rotate(45deg) translateY(50%)", placeItems: "center" },
+              children: /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    width: i
+                  },
+                  css: { position: "relative", pointerEvents: "auto", aspectRatio: 1 },
+                  children: /* @__PURE__ */ e(
+                    "div",
+                    {
+                      css: {
+                        position: "absolute",
+                        display: "flex",
+                        justifyContent: "center",
+                        width: "100%",
+                        height: "100%",
+                        zIndex: 10,
+                        transform: "rotate(-45deg)"
+                      },
+                      children: /* @__PURE__ */ e(
+                        "div",
+                        {
+                          css: {
+                            position: "relative",
+                            display: "flex",
+                            paddingBottom: 16,
+                            alignItems: "flex-end",
+                            zIndex: 10,
+                            width: 40,
+                            height: "50%"
+                          },
+                          children: /* @__PURE__ */ e(V, { name: "paddingBottom", value: t?.paddingBottom, onChange: d })
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              css: { position: "absolute", inset: 0, display: "grid", transform: "rotate(45deg) translateY(-50%)", placeItems: "center" },
+              children: /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    width: i
+                  },
+                  css: { position: "relative", pointerEvents: "auto", aspectRatio: 1 },
+                  children: /* @__PURE__ */ e(
+                    "div",
+                    {
+                      css: {
+                        position: "absolute",
+                        display: "flex",
+                        justifyContent: "center",
+                        width: "100%",
+                        height: "100%",
+                        zIndex: 10,
+                        transform: "rotate(-45deg)"
+                      },
+                      children: /* @__PURE__ */ e("div", { css: { position: "relative", display: "flex", paddingTop: 16, zIndex: 10, height: "50%" }, children: /* @__PURE__ */ e(V, { name: "paddingTop", value: t?.paddingTop, onChange: d }) })
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              css: { position: "absolute", inset: 0, display: "grid", transform: "rotate(45deg) translateX(50%)", placeItems: "center" },
+              children: /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    width: i
+                  },
+                  css: { position: "relative", pointerEvents: "auto", aspectRatio: 1 },
+                  children: /* @__PURE__ */ e(
+                    "div",
+                    {
+                      css: { position: "absolute", inset: 0, display: "flex", alignItems: "center", zIndex: 10, transform: "rotate(-45deg)" },
+                      children: /* @__PURE__ */ e("div", { css: { display: "flex", paddingRight: 12, justifyContent: "flex-end", width: "50%" }, children: /* @__PURE__ */ e(V, { name: "paddingRight", value: t?.paddingRight, onChange: d }) })
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              css: { position: "absolute", inset: 0, display: "grid", transform: "rotate(45deg) translateX(-50%)", placeItems: "center" },
+              children: /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    width: i
+                  },
+                  css: { position: "relative", pointerEvents: "auto", aspectRatio: 1 },
+                  children: /* @__PURE__ */ e(
+                    "div",
+                    {
+                      css: {
+                        position: "absolute",
+                        inset: 0,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "flex-end",
+                        zIndex: 10,
+                        transform: "rotate(-45deg)"
+                      },
+                      children: /* @__PURE__ */ e("div", { css: { display: "flex", paddingLeft: 12, width: "50%" }, children: /* @__PURE__ */ e(V, { name: "paddingLeft", value: t?.paddingLeft, onChange: d }) })
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, Bt = `<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" fill="white" fill-opacity="0.01"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 10.3075C19 12.6865 17.2091 14.615 15 14.615C12.7909 14.615 11 12.6865 11 10.3075C11 7.92854 12.7909 6 15 6C17.2091 6 19 7.92854 19 10.3075ZM15 28.615C17.2091 28.615 19 26.6865 19 24.3075C19 21.9285 17.2091 20 15 20C12.7909 20 11 21.9285 11 24.3075C11 26.6865 12.7909 28.615 15 28.615ZM15 42.615C17.2091 42.615 19 40.6865 19 38.3075C19 35.9285 17.2091 34 15 34C12.7909 34 11 35.9285 11 38.3075C11 40.6865 12.7909 42.615 15 42.615Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37 10.3075C37 12.6865 35.2091 14.615 33 14.615C30.7909 14.615 29 12.6865 29 10.3075C29 7.92854 30.7909 6 33 6C35.2091 6 37 7.92854 37 10.3075ZM33 28.615C35.2091 28.615 37 26.6865 37 24.3075C37 21.9285 35.2091 20 33 20C30.7909 20 29 21.9285 29 24.3075C29 26.6865 30.7909 28.615 33 28.615ZM33 42.615C35.2091 42.615 37 40.6865 37 38.3075C37 35.9285 35.2091 34 33 34C30.7909 34 29 35.9285 29 38.3075C29 40.6865 30.7909 42.615 33 42.615Z" fill="currentColor"/>
+</svg>`, Rt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 18H18C19.1046 18 20 17.1046 20 16V5C20 3.89543 19.1046 3 18 3H9C7.89543 3 7 3.89543 7 5V7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3593 9.47041L13.5296 7.6407C13.1194 7.23047 12.563 7 11.9828 7H6C4.89543 7 4 7.89543 4 9V19C4 20.1046 4.89543 21 6 21H14C15.1046 21 16 20.1046 16 19V11.0172C16 10.437 15.7695 9.88065 15.3593 9.47041Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 11.5H13C12.1716 11.5 11.5 10.8284 11.5 10V7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, Tt = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.138 21H7.858C6.811 21 5.941 20.192 5.863 19.147L4.966 7H19L18.133 19.142C18.058 20.189 17.187 21 16.138 21V21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 11V17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 7H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 7L15.987 4.298C15.694 3.517 14.948 3 14.114 3H9.886C9.052 3 8.306 3.517 8.013 4.298L7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.43 11L15 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.56997 11L8.99997 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, At = ({ node: t, nodeIndex: o }) => {
+  const [n, l] = M(!1), { actions: r } = K(), s = (m) => {
+    m.stopPropagation(), r.delete(t.id);
+  }, i = (m) => {
+    m.stopPropagation();
+    const h = r.duplicate(t.id);
+    r.selectNode(h.id);
+  }, a = () => {
+    l(!0);
+  }, d = () => {
+    l(!1);
+  }, g = () => {
+    Ye(t) && r.selectNode(t.id);
+  };
+  return /* @__PURE__ */ e(qe, { index: o, draggableId: t.id, children: (m, h) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: m.innerRef,
+      ...m.draggableProps,
+      ...m.dragHandleProps,
+      children: /* @__PURE__ */ p(
+        "div",
+        {
+          css: [
+            {
+              display: "flex",
+              paddingInline: 8,
+              paddingBlock: 6,
+              alignItems: "center",
+              gap: 4,
+              borderRadius: 8,
+              backgroundColor: u.palette.white["1s"],
+              ...u.text.xs,
+              cursor: "grab",
+              ":hover": {
+                backgroundColor: u.palette.white["2s"]
+              }
+            },
+            h.isDragging && { backgroundColor: u.palette.white["3s"] }
+          ],
+          onMouseEnter: a,
+          onMouseLeave: d,
+          "aria-hidden": !0,
+          onClick: g,
+          children: [
+            /* @__PURE__ */ e(w, { size: 16, source: Bt }),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                css: {
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  flex: 1
+                },
+                children: $e(t)
+              }
+            ),
+            /* @__PURE__ */ e(de, { open: n, orientation: "horizontal", children: /* @__PURE__ */ p("div", { css: { display: "flex", alignItems: "center", gap: 4 }, children: [
+              /* @__PURE__ */ e(b, { tooltip: { content: "Duplicate" }, onClick: i, children: /* @__PURE__ */ e(w, { size: 16, source: Rt }) }),
+              /* @__PURE__ */ e(
+                b,
+                {
+                  tooltip: {
+                    content: "Delete"
+                  },
+                  onClick: s,
+                  children: /* @__PURE__ */ e(w, { size: 16, source: Tt })
+                }
+              )
+            ] }) })
+          ]
+        }
+      )
+    }
+  ) });
+}, Bo = ({ getNewNodeElement: t }) => {
+  const { query: o, actions: n } = K(), { id: l } = me(), r = o.node(l).childNodes().map((a) => o.node(a).get());
+  return /* @__PURE__ */ p("div", { children: [
+    /* @__PURE__ */ e(Qe, { onDragEnd: (a) => {
+      const { source: d, destination: g } = a;
+      if (!g || d.index === g.index) return;
+      const m = r.at(d.index);
+      m && n.move({ nodeId: m.id, sourceIndex: d.index, destinationIndex: g.index });
+    }, children: /* @__PURE__ */ e(Ke, { droppableId: l, children: (a) => /* @__PURE__ */ p(
+      "div",
+      {
+        ref: a.innerRef,
+        ...a.droppableProps,
+        css: { display: "flex", flexDirection: "column", gap: 8 },
+        children: [
+          r.map((d, g) => /* @__PURE__ */ e(At, { node: d, nodeIndex: g }, d.id)),
+          a.placeholder
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ e(
+      Y,
+      {
+        css: { marginTop: 8 },
+        onClick: () => {
+          const a = o.parseReactElement(t()).toNodeTree();
+          n.addNodeTree(a, l);
+        },
+        fullWidth: !0,
+        prefix: /* @__PURE__ */ e(w, { size: 16, source: ce }),
+        children: "Add more"
+      }
+    )
+  ] });
+}, Zt = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path d="M1.25 8.96875C1.25 8.69261 1.47386 8.46875 1.75 8.46875H5.5C5.77614 8.46875 6 8.69261 6 8.96875V10.9688C6 11.2449 5.77614 11.4688 5.5 11.4688H1.75C1.47386 11.4688 1.25 11.2449 1.25 10.9688V8.96875Z" fill="currentColor"></path><path d="M7.62512 9.03125C7.62512 8.75511 7.84898 8.53125 8.12512 8.53125H11.8751C12.1513 8.53125 12.3751 8.75511 12.3751 9.03125V11.0312C12.3751 11.3074 12.1513 11.5312 11.8751 11.5312H8.12512C7.84898 11.5312 7.62512 11.3074 7.62512 11.0312V9.03125Z" fill="currentColor"></path><path d="M14 8.96875C14 8.69261 14.2239 8.46875 14.5 8.46875H18.25C18.5261 8.46875 18.75 8.69261 18.75 8.96875V10.9688C18.75 11.2449 18.5261 11.4688 18.25 11.4688H14.5C14.2239 11.4688 14 11.2449 14 10.9688V8.96875Z" fill="currentColor"></path></svg>', St = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path d="M1.25 10C1.25 9.17157 1.92157 8.5 2.75 8.5C3.57843 8.5 4.25 9.17157 4.25 10C4.25 10.8284 3.57843 11.5 2.75 11.5C1.92157 11.5 1.25 10.8284 1.25 10Z" fill="currentColor"></path><path d="M6.08333 10C6.08333 9.17157 6.75491 8.5 7.58333 8.5C8.41176 8.5 9.08333 9.17157 9.08333 10C9.08333 10.8284 8.41176 11.5 7.58333 11.5C6.75491 11.5 6.08333 10.8284 6.08333 10Z" fill="currentColor"></path><path d="M10.9167 10C10.9167 9.17157 11.5883 8.5 12.4167 8.5C13.2451 8.5 13.9167 9.17157 13.9167 10C13.9167 10.8284 13.2451 11.5 12.4167 11.5C11.5883 11.5 10.9167 10.8284 10.9167 10Z" fill="currentColor"></path><path d="M15.75 10C15.75 9.17157 16.4216 8.5 17.25 8.5C18.0784 8.5 18.75 9.17157 18.75 10C18.75 10.8284 18.0784 11.5 17.25 11.5C16.4216 11.5 15.75 10.8284 15.75 10Z" fill="currentColor"></path></svg>', jt = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path d="M1.10547 9C1.10547 8.72386 1.32933 8.5 1.60547 8.5H18.1064C18.3826 8.5 18.6064 8.72386 18.6064 9V11C18.6064 11.2761 18.3826 11.5 18.1064 11.5H1.60547C1.32933 11.5 1.10547 11.2761 1.10547 11V9Z" fill="#currentColor"></path></svg>', Nt = [
+  {
+    value: "none",
+    icon: te
+  },
+  {
+    value: "solid",
+    icon: jt
+  },
+  {
+    value: "dashed",
+    icon: Zt
+  },
+  {
+    value: "dotted",
+    icon: St
+  }
+], Ro = ({ responsive: t = !0, value: o, onChange: n }) => {
+  const l = o?.borderBottomWidth ?? 0, r = o?.borderTopWidth ?? 0, s = o?.borderLeftWidth ?? 0, i = o?.borderRightWidth ?? 0, a = (c = "none") => {
+    n?.(
+      c === "none" ? {
+        borderStyle: void 0,
+        borderColor: void 0,
+        borderTopWidth: void 0,
+        borderRightWidth: void 0,
+        borderBottomWidth: void 0,
+        borderLeftWidth: void 0
+      } : {
+        ...o,
+        borderStyle: c,
+        borderBottomWidth: o?.borderBottomWidth ?? 1,
+        borderLeftWidth: o?.borderLeftWidth ?? 1,
+        borderRightWidth: o?.borderRightWidth ?? 1,
+        borderTopWidth: o?.borderTopWidth ?? 1
+      }
+    );
+  }, d = o?.borderStyle ?? "none", g = /* @__PURE__ */ e("span", { css: { color: u.palette.white["3s"], ...u.text.xs }, children: "|" }), m = (c) => {
+    c.target.select();
+  }, h = (c) => {
+    const v = isNaN(c.target.valueAsNumber) ? void 0 : c.target.valueAsNumber;
+    n?.({
+      ...o,
+      [c.target.name]: v
+    });
+  };
+  return /* @__PURE__ */ p("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ e(x, { responsive: t, name: "Border", children: /* @__PURE__ */ p("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      d !== "none" && /* @__PURE__ */ e(ee, { onChange: (c) => {
+        n?.({
+          ...o,
+          borderColor: c
+        });
+      }, color: o?.borderColor }),
+      /* @__PURE__ */ e(H, { value: d, onSelectionChange: a, children: Nt.map((c) => /* @__PURE__ */ e(b, { value: c.value, children: /* @__PURE__ */ e(w, { source: c.icon }) }, c.value)) })
+    ] }) }),
+    d !== "none" && /* @__PURE__ */ e("div", { css: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ e("div", { css: { display: "flex", alignItems: "center", gap: 4 }, children: /* @__PURE__ */ p(
+      "div",
+      {
+        css: {
+          display: "flex",
+          paddingInline: 8,
+          paddingBlock: "0.125rem",
+          alignItems: "center",
+          gap: 2,
+          borderRadius: 8,
+          backgroundColor: u.palette.white["1s"],
+          flex: 1
+        },
+        children: [
+          /* @__PURE__ */ e(
+            L,
+            {
+              value: r,
+              onChange: h,
+              name: "borderTopWidth",
+              onFocus: m,
+              classes: {
+                main: "bg-transparent px-1"
+              },
+              size: "28",
+              placeholder: "Top",
+              css: { textAlign: "center" }
+            }
+          ),
+          g,
+          /* @__PURE__ */ e(
+            L,
+            {
+              value: i,
+              name: "borderRightWidth",
+              placeholder: "Right",
+              onChange: h,
+              onFocus: m,
+              classes: {
+                main: "bg-transparent px-1"
+              },
+              size: "28",
+              css: { textAlign: "center" }
+            }
+          ),
+          g,
+          /* @__PURE__ */ e(
+            L,
+            {
+              value: l,
+              name: "borderBottomWidth",
+              onChange: h,
+              placeholder: "Bottom",
+              onFocus: m,
+              classes: {
+                main: "bg-transparent px-1"
+              },
+              size: "28",
+              css: { textAlign: "center" }
+            }
+          ),
+          g,
+          /* @__PURE__ */ e(
+            L,
+            {
+              value: s,
+              name: "borderLeftWidth",
+              onChange: h,
+              onFocus: m,
+              placeholder: "Left",
+              classes: {
+                main: "bg-transparent px-1"
+              },
+              size: "28",
+              css: { textAlign: "center" }
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] });
+}, oe = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.78 4L10.22 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 8L22 12L18 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 16L2 12L6 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, W = '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="text-dark-150 rotate-90"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.125 16.25C7.94733 16.25 3.75 12.0527 3.75 6.875L3.75 3.125C3.75 2.77982 3.47018 2.5 3.125 2.5C2.77982 2.5 2.5 2.77982 2.5 3.125L2.5 6.875C2.5 12.743 7.25698 17.5 13.125 17.5L16.875 17.5C17.2202 17.5 17.5 17.2202 17.5 16.875C17.5 16.5298 17.2202 16.25 16.875 16.25L13.125 16.25Z" fill="currentColor" stroke="currentColor" stroke-width="0.25" stroke-linecap="round"></path></svg>', Wt = '<svg width="16" height="16" viewBox="0 0 17 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path fill-rule="evenodd" clip-rule="evenodd" d="M2.1665 8C2.1665 11.5899 5.07665 14.5 8.6665 14.5C12.2564 14.5 15.1665 11.5899 15.1665 8C15.1665 4.41015 12.2564 1.5 8.6665 1.5C5.07665 1.5 2.1665 4.41015 2.1665 8ZM8.6665 0C4.24823 0 0.666504 3.58172 0.666504 8C0.666504 12.4183 4.24823 16 8.6665 16C13.0848 16 16.6665 12.4183 16.6665 8C16.6665 3.58172 13.0848 0 8.6665 0Z" fill="currentColor"></path></svg>', zt = `<svg width="24" height="24" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M36,416H476a20.023,20.023,0,0,0,20-20V116a20.023,20.023,0,0,0-20-20H36a20.023,20.023,0,0,0-20,20V396A20.023,20.023,0,0,0,36,416ZM48,128H464V384H48Z" />
+</svg>
+`, Ot = '<svg width="22" height="14" viewBox="0 0 24 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path fill-rule="evenodd" clip-rule="evenodd" d="M18.3335 1.5H4.3335C2.95278 1.5 1.8335 2.61929 1.8335 4V10C1.8335 11.3807 2.95278 12.5 4.3335 12.5H18.3335C19.7142 12.5 20.8335 11.3807 20.8335 10V4C20.8335 2.61929 19.7142 1.5 18.3335 1.5ZM4.3335 0C2.12436 0 0.333496 1.79086 0.333496 4V10C0.333496 12.2091 2.12436 14 4.3335 14H18.3335C20.5426 14 22.3335 12.2091 22.3335 10V4C22.3335 1.79086 20.5426 0 18.3335 0H4.3335Z" fill="currentColor"></path></svg>', I = 9999, To = ({ value: t, onChange: o, name: n, responsive: l = !0 }) => {
+  const [r, s] = M(!1), i = Object.values(t ?? {}).every((h) => (h ?? 0) === 0), a = Object.values(t ?? {}).every((h) => (h ?? 0) === I), d = !i && !a, g = (h) => {
+    const C = isNaN(h.target.valueAsNumber) ? void 0 : h.target.valueAsNumber;
+    o?.({
+      ...t,
+      [h.target.name]: C
+    });
+  }, m = (h) => {
+    o?.({
+      borderBottomLeftRadius: void 0,
+      borderBottomRightRadius: void 0,
+      borderTopLeftRadius: void 0,
+      borderTopRightRadius: void 0,
+      ...JSON.parse(h.currentTarget.value)
+    });
+  };
+  return /* @__PURE__ */ e(x, { name: n ?? "Corner", responsive: l, children: /* @__PURE__ */ p(E, { open: r, onOpenChange: s, placement: "right", children: [
+    /* @__PURE__ */ e(U, { children: /* @__PURE__ */ p(
+      "div",
+      {
+        css: [
+          {
+            display: "flex",
+            paddingInline: 8,
+            alignItems: "center",
+            gap: 8,
+            borderRadius: 8,
+            height: 32,
+            width: "50%",
+            backgroundColor: u.palette.white["1s"],
+            cursor: "pointer"
+          },
+          r && { backgroundColor: u.palette.black["7s"] }
+        ],
+        children: [
+          /* @__PURE__ */ p(
+            "span",
+            {
+              css: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                flex: 1,
+                ...u.text.xs
+              },
+              children: [
+                a && /* @__PURE__ */ e(O, { children: "Full" }),
+                d && /* @__PURE__ */ e(O, { children: [
+                  t?.borderTopLeftRadius ?? "-",
+                  t?.borderTopRightRadius ?? "-",
+                  t?.borderBottomLeftRadius ?? "-",
+                  t?.borderBottomRightRadius ?? "-"
+                ].join(", ") }),
+                i && /* @__PURE__ */ e(O, { children: "None" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            w,
+            {
+              css: [{ transition: "transform" }, r && { transform: "rotate(-180deg)" }],
+              source: J
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(G, { children: /* @__PURE__ */ p("div", { children: [
+      /* @__PURE__ */ p("div", { css: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
+        /* @__PURE__ */ e("span", { css: { fontWeight: 500 }, children: "Corner" }),
+        /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(w, { source: B }) }) })
+      ] }),
+      /* @__PURE__ */ e("hr", { css: { marginBlock: 8, borderColor: u.palette.white["1s"] } }),
+      /* @__PURE__ */ p("div", { style: { maxWidth: 256 }, css: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ p(
+          "div",
+          {
+            css: {
+              display: "grid",
+              padding: 16,
+              position: "relative",
+              columnGap: 16,
+              rowGap: 4,
+              borderRadius: 8,
+              backgroundColor: u.palette.white["1s"],
+              gridTemplateColumns: "repeat(12, minmax(0, 1fr))",
+              flex: 1
+            },
+            children: [
+              /* @__PURE__ */ e(
+                w,
+                {
+                  css: { position: "absolute", top: 4, left: 4, rotate: "90deg" },
+                  size: 16,
+                  source: W
+                }
+              ),
+              /* @__PURE__ */ e(
+                w,
+                {
+                  css: { position: "absolute", top: 4, right: 4, transform: "rotate(180deg)" },
+                  size: 16,
+                  source: W
+                }
+              ),
+              /* @__PURE__ */ e(
+                w,
+                {
+                  css: { position: "absolute", bottom: 4, right: 4, transform: "rotate(-90deg)" },
+                  size: 16,
+                  source: W
+                }
+              ),
+              /* @__PURE__ */ e(w, { css: { position: "absolute", bottom: 4, left: 4 }, size: 16, source: W }),
+              /* @__PURE__ */ e("div", { css: { gridColumn: "span 6" }, children: /* @__PURE__ */ e(
+                L,
+                {
+                  onChange: g,
+                  selectOnFocus: !0,
+                  name: "borderTopLeftRadius",
+                  mode: "onBlur",
+                  max: I,
+                  css: { textAlign: "center" },
+                  value: t?.borderTopLeftRadius ?? 0
+                }
+              ) }),
+              /* @__PURE__ */ e("div", { css: { gridColumn: "span 6" }, children: /* @__PURE__ */ e(
+                L,
+                {
+                  onChange: g,
+                  name: "borderTopRightRadius",
+                  selectOnFocus: !0,
+                  mode: "onBlur",
+                  max: I,
+                  css: { textAlign: "center" },
+                  value: t?.borderTopRightRadius ?? 0
+                }
+              ) }),
+              /* @__PURE__ */ e("div", { css: { display: "flex", padding: 4, justifyContent: "center", gridColumn: "span 12" }, children: /* @__PURE__ */ e("div", { css: { padding: 4, borderRadius: 8, backgroundColor: u.palette.black["7s"] }, children: /* @__PURE__ */ e(w, { size: 16, source: oe }) }) }),
+              /* @__PURE__ */ e("div", { css: { gridColumn: "span 6" }, children: /* @__PURE__ */ e(
+                L,
+                {
+                  onChange: g,
+                  name: "borderBottomLeftRadius",
+                  selectOnFocus: !0,
+                  mode: "onBlur",
+                  max: I,
+                  css: { textAlign: "center" },
+                  value: t?.borderBottomLeftRadius ?? 0
+                }
+              ) }),
+              /* @__PURE__ */ e("div", { css: { gridColumn: "span 6" }, children: /* @__PURE__ */ e(
+                L,
+                {
+                  onChange: g,
+                  name: "borderBottomRightRadius",
+                  selectOnFocus: !0,
+                  mode: "onBlur",
+                  max: I,
+                  css: { textAlign: "center" },
+                  value: t?.borderBottomRightRadius ?? 0
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ p("div", { css: { display: "flex", flexDirection: "column", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ e(
+            b,
+            {
+              onClick: m,
+              disabled: i,
+              value: JSON.stringify({}),
+              children: /* @__PURE__ */ e(
+                w,
+                {
+                  css: [{ color: u.palette.white["3s"] }, i && { color: u.palette.white["6s"] }],
+                  source: zt
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            b,
+            {
+              onClick: m,
+              disabled: d,
+              value: JSON.stringify({
+                borderBottomLeftRadius: 8,
+                borderBottomRightRadius: 8,
+                borderTopLeftRadius: 8,
+                borderTopRightRadius: 8
+              }),
+              children: /* @__PURE__ */ e(
+                w,
+                {
+                  css: [
+                    { color: u.palette.white["3s"] },
+                    d && { color: u.palette.white["6s"] }
+                  ],
+                  source: Ot
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            b,
+            {
+              onClick: m,
+              disabled: a,
+              value: JSON.stringify({
+                borderBottomLeftRadius: I,
+                borderBottomRightRadius: I,
+                borderTopLeftRadius: I,
+                borderTopRightRadius: I
+              }),
+              children: /* @__PURE__ */ e(
+                w,
+                {
+                  css: [{ color: u.palette.white["3s"] }, a && { color: u.palette.white["6s"] }],
+                  source: Wt
+                }
+              )
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] }) });
+}, Pt = [
+  {
+    value: "6xl",
+    label: "Heading 1"
+  },
+  {
+    value: "5xl",
+    label: "Heading 2"
+  },
+  {
+    value: "4xl",
+    label: "Heading 3"
+  },
+  {
+    value: "3xl",
+    label: "Heading 4"
+  },
+  {
+    value: "2xl",
+    label: "Heading 5"
+  },
+  {
+    value: "xl",
+    label: "Heading 6"
+  },
+  {
+    value: "lg",
+    label: "Large"
+  },
+  {
+    value: "base",
+    label: "Base"
+  },
+  {
+    value: "sm",
+    label: "Small"
+  },
+  {
+    value: "xs",
+    label: "Extra Small"
+  },
+  {
+    value: "auto",
+    label: "Auto"
+  }
+], Ao = ({ value: t, onChange: o, responsive: n = !0 }) => /* @__PURE__ */ e(Be, { children: /* @__PURE__ */ e(x, { responsive: n, name: "Variant", children: /* @__PURE__ */ e(
+  j,
+  {
+    placement: "bottom-end",
+    onChange: (r) => {
+      o?.(r === "auto" ? void 0 : r);
+    },
+    css: {
+      width: "50%"
+    },
+    listProps: {
+      style: {
+        height: "auto"
+      }
+    },
+    value: t ?? "auto",
+    options: Pt
+  }
+) }) }), Ft = [
+  {
+    label: "Extra light",
+    value: 200
+  },
+  {
+    label: "Light",
+    value: 300
+  },
+  {
+    label: "Normal",
+    value: 400
+  },
+  {
+    label: "Medium",
+    value: 500
+  },
+  {
+    label: "Semi bold",
+    value: 600
+  },
+  {
+    label: "Bold",
+    value: 700
+  },
+  {
+    label: "Extra bold",
+    value: 800
+  },
+  {
+    label: "Auto",
+    value: "auto"
+  }
+], Zo = ({ value: t, responsive: o, name: n, onChange: l }) => /* @__PURE__ */ e(x, { responsive: o, name: n ?? "Font weight", children: /* @__PURE__ */ e(
+  j,
+  {
+    onChange: (s) => {
+      l?.({
+        fontWeight: s === "auto" ? void 0 : s
+      });
+    },
+    value: t?.fontWeight ?? "auto",
+    options: Ft,
+    css: {
+      width: "50%"
+    },
+    listProps: {
+      style: {
+        height: "auto"
+      }
+    }
+  }
+) }), So = ({ value: t, name: o, onChange: n, availableTags: l }) => {
+  const r = l.map((s) => ({
+    value: s,
+    label: s
+  }));
+  return /* @__PURE__ */ e(x, { name: o ?? "HTML tag", children: /* @__PURE__ */ e(
+    j,
+    {
+      onChange: n,
+      value: t ?? null,
+      options: r,
+      css: {
+        width: "50%"
+      },
+      listProps: {
+        style: {
+          height: "auto"
+        }
+      }
+    }
+  ) });
+}, Dt = ["cover", "contain"], jo = ({ name: t, responsive: o = !1, value: n, onChange: l }) => {
+  const r = (s) => {
+    l?.({
+      objectFit: s.currentTarget.value
+    });
+  };
+  return /* @__PURE__ */ e(x, { responsive: o, name: t ?? "Image scale", children: /* @__PURE__ */ e("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: Dt.map((s) => {
+    const i = n?.objectFit === s;
+    return /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: r,
+        value: s,
+        css: [
+          {
+            padding: 6,
+            borderRadius: 4,
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: u.palette.white["2s"]
+          },
+          { color: u.palette.white["4s"] },
+          i && { color: u.palette.white["6s"], borderColor: u.palette.white["5s"] }
+        ],
+        children: /* @__PURE__ */ p(
+          "div",
+          {
+            css: {
+              position: "relative",
+              display: "flex",
+              borderRadius: 4,
+              overflow: "hidden",
+              justifyContent: "center",
+              alignItems: "center",
+              height: 32,
+              width: 48
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  css: [
+                    {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      backgroundColor: u.palette.white["1s"]
+                    },
+                    s === "fill" && { borderRadius: 2 },
+                    s === "contain" && { width: 32, height: 32 },
+                    s === "cover" && { width: "100%", height: "100%" },
+                    s === "fill" && { width: 24, height: 24 }
+                  ],
+                  children: /* @__PURE__ */ e(w, { source: ke })
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  css: [
+                    {
+                      position: "absolute",
+                      inset: 0,
+                      borderRadius: 4,
+                      pointerEvents: "none",
+                      borderWidth: 1,
+                      borderStyle: "solid",
+                      borderColor: u.palette.white["1s"]
+                    },
+                    i && { borderColor: u.palette.white["2s"] }
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      },
+      s
+    );
+  }) }) });
+}, Le = ({
+  name: t,
+  responsive: o,
+  onChange: n,
+  value: l,
+  min: r = 0,
+  max: s = Number.MAX_SAFE_INTEGER,
+  adjustment: i
+}) => {
+  const a = Q(l) ? Number(l) : l, d = i?.minimumUnit ?? 1, g = i?.fallback ?? 0, m = (c) => {
+    const v = isNaN(c.target.valueAsNumber) ? void 0 : c.target.valueAsNumber;
+    n?.(v);
+  }, h = (c) => {
+    c.stopPropagation(), n?.(Math.min((a ?? g) + d, s));
+  }, C = (c) => {
+    c.stopPropagation(), n?.(Math.max((a ?? g) - d, r));
+  };
+  return /* @__PURE__ */ e(x, { responsive: o, name: t, children: /* @__PURE__ */ e("div", { css: { width: "50%" }, children: /* @__PURE__ */ e(
+    L,
+    {
+      onChange: m,
+      mode: "onBlur",
+      css: { textAlign: "center" },
+      value: l ?? "",
+      prefix: /* @__PURE__ */ e(b, { disabled: ge(l) && l <= r, onClick: C, children: /* @__PURE__ */ e(w, { source: We }) }),
+      suffix: /* @__PURE__ */ e(b, { onClick: h, children: /* @__PURE__ */ e(w, { source: ce }) })
+    }
+  ) }) });
+}, No = ({ name: t, responsive: o = !0, value: n, onChange: l }) => {
+  const r = (s) => {
+    l?.({
+      ...n,
+      columnGap: s
+    });
+  };
+  return /* @__PURE__ */ e(
+    Le,
+    {
+      name: t ?? "Column gap",
+      adjustment: {
+        minimumUnit: 2
+      },
+      responsive: o,
+      value: n?.columnGap,
+      onChange: r
+    }
+  );
+}, Wo = ({ name: t, responsive: o = !0, value: n, onChange: l }) => {
+  const r = (s) => {
+    l?.({
+      ...n,
+      rowGap: s
+    });
+  };
+  return /* @__PURE__ */ e(
+    Le,
+    {
+      adjustment: {
+        minimumUnit: 2
+      },
+      name: t ?? "Row gap",
+      responsive: o,
+      value: n?.rowGap,
+      onChange: r
+    }
+  );
+}, Et = ({ onChange: t }) => /* @__PURE__ */ e(
+  Fe,
+  {
+    accept: {
+      svg: [".svg"]
+    },
+    multiple: !1,
+    onDrop: (n) => {
+      const l = n.at(0);
+      if (!l) return;
+      const r = new FileReader();
+      r.onload = (s) => {
+        const i = s.target?.result;
+        Q(i) && t?.(i);
+      }, r.readAsText(l);
+    },
+    children: () => /* @__PURE__ */ p(
+      "div",
+      {
+        css: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 8,
+          borderRadius: 6,
+          aspectRatio: "16 / 9",
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: u.palette.white["1s"],
+          cursor: "pointer",
+          ":hover": {
+            borderColor: u.palette.white["2s"]
+          }
+        },
+        children: [
+          /* @__PURE__ */ e(w, { size: 40, source: xe }),
+          /* @__PURE__ */ e(
+            "p",
+            {
+              css: {
+                ...u.text.xs
+              },
+              children: "Upload SVG file"
+            }
+          )
+        ]
+      }
+    )
+  }
+), zo = ({ source: t, onChange: o, name: n }) => /* @__PURE__ */ e(x, { name: n ?? "Choose icon", children: /* @__PURE__ */ p(E, { placement: "right-start", children: [
+  /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(
+    b,
+    {
+      css: {
+        backgroundColor: u.palette.white["1s"]
+      },
+      size: "28",
+      children: /* @__PURE__ */ e(w, { size: 20, source: t ?? "" })
+    }
+  ) }),
+  /* @__PURE__ */ e(G, { children: /* @__PURE__ */ p("div", { css: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ e(
+      "h6",
+      {
+        css: {
+          ...u.text.sm,
+          fontWeight: 500
+        },
+        children: "Choose icon"
+      }
+    ),
+    /* @__PURE__ */ e("div", { css: { width: 320 }, children: /* @__PURE__ */ e(Et, { onChange: o }) })
+  ] }) })
+] }) }), Me = `<svg width="20" height="20" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M1.5 14.5C1.5 14.2239 1.72386 14 2 14L15 14C15.2761 14 15.5 14.2239 15.5 14.5C15.5 14.7761 15.2761 15 15 15L2 15C1.72386 15 1.5 14.7761 1.5 14.5Z" fill="currentColor"></path>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 13.5C4.67157 13.5 4 12.8284 4 12L4 7C4 6.17157 4.67157 5.5 5.5 5.5L6.5 5.5C7.32843 5.5 8 6.17157 8 7L8 12C8 12.8284 7.32843 13.5 6.5 13.5L5.5 13.5ZM5 12C5 12.2761 5.22386 12.5 5.5 12.5L6.5 12.5C6.77614 12.5 7 12.2761 7 12L7 7C7 6.72386 6.77614 6.5 6.5 6.5L5.5 6.5C5.22386 6.5 5 6.72386 5 7L5 12Z" fill="currentColor"></path>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 12.8284 9.67157 13.5 10.5 13.5L11.5 13.5C12.3284 13.5 13 12.8284 13 12L13 4C13 3.17157 12.3284 2.5 11.5 2.5L10.5 2.5C9.67157 2.5 9 3.17157 9 4L9 12ZM10.5 12.5C10.2239 12.5 10 12.2761 10 12L10 4C10 3.72386 10.2239 3.5 10.5 3.5L11.5 3.5C11.7761 3.5 12 3.72386 12 4L12 12C12 12.2761 11.7761 12.5 11.5 12.5L10.5 12.5Z" fill="currentColor"></path>
+              </svg>`, ye = `<svg width="20" height="20" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 8.5C14.5 8.77614 14.2921 9 14.0357 9L12.1786 9L12.1786 11C12.1786 11.8284 11.555 12.5 10.7857 12.5L9.85714 12.5C9.08789 12.5 8.46429 11.8284 8.46429 11L8.46429 9L7.53571 9L7.53571 12.5C7.53571 13.3284 6.91211 14 6.14286 14L5.21429 14C4.44503 14 3.82143 13.3284 3.82143 12.5L3.82143 9L1.96429 9C1.70787 9 1.5 8.77614 1.5 8.5C1.5 8.22386 1.70787 8 1.96429 8L3.82143 8L3.82143 4.5C3.82143 3.67157 4.44503 3 5.21429 3L6.14286 3C6.91211 3 7.53572 3.67157 7.53572 4.5L7.53571 8L8.46429 8L8.46429 6C8.46429 5.17157 9.08789 4.5 9.85714 4.5L10.7857 4.5C11.555 4.5 12.1786 5.17157 12.1786 6L12.1786 8L14.0357 8C14.2921 8 14.5 8.22386 14.5 8.5ZM4.75 12.5C4.75 12.7761 4.95787 13 5.21429 13L6.14286 13C6.39928 13 6.60714 12.7761 6.60714 12.5L6.60714 4.5C6.60714 4.22386 6.39928 4 6.14286 4L5.21429 4C4.95787 4 4.75 4.22386 4.75 4.5L4.75 12.5ZM9.39286 11L9.39286 6C9.39286 5.72386 9.60073 5.5 9.85714 5.5L10.7857 5.5C11.0421 5.5 11.25 5.72386 11.25 6L11.25 11C11.25 11.2761 11.0421 11.5 10.7857 11.5L9.85714 11.5C9.60073 11.5 9.39286 11.2761 9.39286 11Z" fill="currentColor"></path>
+              </svg>`, P = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.25C10.3452 1.25 10.625 1.52982 10.625 1.875V4.375H13.125C14.1605 4.375 15 5.21447 15 6.25V7.5C15 8.53553 14.1605 9.375 13.125 9.375H10.625V10.625H15C16.0355 10.625 16.875 11.4645 16.875 12.5V13.75C16.875 14.7855 16.0355 15.625 15 15.625H10.625V18.125C10.625 18.4702 10.3452 18.75 10 18.75C9.65482 18.75 9.375 18.4702 9.375 18.125V15.625H5C3.96447 15.625 3.125 14.7855 3.125 13.75V12.5C3.125 11.4645 3.96447 10.625 5 10.625H9.375V9.375H6.875C5.83947 9.375 5 8.53553 5 7.5V6.25C5 5.21447 5.83947 4.375 6.875 4.375H9.375V1.875C9.375 1.52982 9.65482 1.25 10 1.25ZM15 14.375C15.3452 14.375 15.625 14.0952 15.625 13.75V12.5C15.625 12.1548 15.3452 11.875 15 11.875H5C4.65482 11.875 4.375 12.1548 4.375 12.5V13.75C4.375 14.0952 4.65482 14.375 5 14.375H15ZM13.125 8.125H6.875C6.52982 8.125 6.25 7.84518 6.25 7.5V6.25C6.25 5.90482 6.52982 5.625 6.875 5.625H13.125C13.4702 5.625 13.75 5.90482 13.75 6.25V7.5C13.75 7.84518 13.4702 8.125 13.125 8.125Z"></path></svg></svg>', F = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><svg width="21" height="20" viewBox="0 0 21 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M3.47852 1.25C3.82369 1.25 4.10352 1.52982 4.10352 1.875L4.10352 18.125C4.10352 18.4702 3.82369 18.75 3.47852 18.75C3.13334 18.75 2.85352 18.4702 2.85352 18.125L2.85352 1.875C2.85352 1.52982 3.13334 1.25 3.47852 1.25Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.72852 6.25C4.72852 5.21447 5.56798 4.375 6.60352 4.375H12.8535C13.889 4.375 14.7285 5.21447 14.7285 6.25V7.5C14.7285 8.53553 13.889 9.375 12.8535 9.375H6.60352C5.56798 9.375 4.72852 8.53553 4.72852 7.5V6.25ZM6.60352 5.625C6.25834 5.625 5.97852 5.90482 5.97852 6.25V7.5C5.97852 7.84518 6.25834 8.125 6.60352 8.125H12.8535C13.1987 8.125 13.4785 7.84518 13.4785 7.5V6.25C13.4785 5.90482 13.1987 5.625 12.8535 5.625H6.60352Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6.60352 10.625C5.56798 10.625 4.72852 11.4645 4.72852 12.5V13.75C4.72852 14.7855 5.56798 15.625 6.60352 15.625H16.6035C17.639 15.625 18.4785 14.7855 18.4785 13.75V12.5C18.4785 11.4645 17.639 10.625 16.6035 10.625H6.60352ZM5.97852 12.5C5.97852 12.1548 6.25834 11.875 6.60352 11.875H16.6035C16.9487 11.875 17.2285 12.1548 17.2285 12.5V13.75C17.2285 14.0952 16.9487 14.375 16.6035 14.375H6.60352C6.25834 14.375 5.97852 14.0952 5.97852 13.75V12.5Z"></path></svg></svg>', D = '<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><svg width="21" height="20" viewBox="0 0 21 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M17.5195 18.75C17.8647 18.75 18.1445 18.4702 18.1445 18.125V1.875C18.1445 1.52982 17.8647 1.25 17.5195 1.25C17.1744 1.25 16.8945 1.52982 16.8945 1.875V18.125C16.8945 18.4702 17.1744 18.75 17.5195 18.75Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6.26953 7.5C6.26953 8.53553 7.109 9.375 8.14453 9.375H14.3945C15.4301 9.375 16.2695 8.53553 16.2695 7.5V6.25C16.2695 5.21447 15.4301 4.375 14.3945 4.375H8.14453C7.109 4.375 6.26953 5.21447 6.26953 6.25V7.5ZM8.14453 8.125C7.79935 8.125 7.51953 7.84518 7.51953 7.5V6.25C7.51953 5.90482 7.79935 5.625 8.14453 5.625H14.3945C14.7397 5.625 15.0195 5.90482 15.0195 6.25V7.5C15.0195 7.84518 14.7397 8.125 14.3945 8.125H8.14453Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.39453 15.625C3.359 15.625 2.51953 14.7855 2.51953 13.75V12.5C2.51953 11.4645 3.359 10.625 4.39453 10.625H14.3945C15.4301 10.625 16.2695 11.4645 16.2695 12.5V13.75C16.2695 14.7855 15.4301 15.625 14.3945 15.625H4.39453ZM3.76953 13.75C3.76953 14.0952 4.04935 14.375 4.39453 14.375H14.3945C14.7397 14.375 15.0195 14.0952 15.0195 13.75V12.5C15.0195 12.1548 14.7397 11.875 14.3945 11.875H4.39453C4.04935 11.875 3.76953 12.1548 3.76953 12.5V13.75Z"></path></svg></svg>', ne = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.8071 1.84668C18.8071 1.5015 18.5273 1.22168 18.1821 1.22168C17.837 1.22168 17.5571 1.5015 17.5571 1.84668L17.5571 18.0976C17.5571 18.4428 17.8369 18.7226 18.1821 18.7226C18.5273 18.7226 18.8071 18.4428 18.8071 18.0976L18.8071 1.84668Z" fill="currentColor"></path>
+<path d="M2.50708 1.9021C2.50708 1.55692 2.22726 1.2771 1.88208 1.2771C1.5369 1.2771 1.25708 1.55692 1.25708 1.9021L1.25708 18.153C1.25708 18.4982 1.5369 18.778 1.88208 18.778C2.22726 18.778 2.50708 18.4982 2.50708 18.153L2.50708 1.9021Z" fill="currentColor"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.657 2.84277C14.6925 2.84277 15.532 3.68224 15.532 4.71777L15.532 15.2178C15.532 16.2533 14.6925 17.0928 13.657 17.0928L13.157 17.0928C12.1214 17.0928 11.282 16.2533 11.282 15.2178L11.282 4.71777C11.282 3.68224 12.1214 2.84277 13.157 2.84277L13.657 2.84277ZM14.282 4.71777C14.282 4.3726 14.0022 4.09277 13.657 4.09277L13.157 4.09277C12.8118 4.09277 12.532 4.3726 12.532 4.71777L12.532 15.2178C12.532 15.563 12.8118 15.8428 13.157 15.8428L13.657 15.8428C14.0022 15.8428 14.282 15.563 14.282 15.2178L14.282 4.71777Z" fill="currentColor"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.78198 4.71777C8.78198 3.68224 7.94252 2.84277 6.90698 2.84277L6.40698 2.84277C5.37145 2.84277 4.53198 3.68224 4.53198 4.71777L4.53198 15.2178C4.53198 16.2533 5.37145 17.0928 6.40698 17.0928L6.90698 17.0928C7.94252 17.0928 8.78198 16.2533 8.78198 15.2178L8.78198 4.71777ZM6.90698 4.09277C7.25216 4.09277 7.53198 4.3726 7.53198 4.71777L7.53198 15.2178C7.53198 15.563 7.25216 15.8428 6.90698 15.8428L6.40698 15.8428C6.0618 15.8428 5.78198 15.563 5.78198 15.2178L5.78198 4.71777C5.78198 4.37259 6.0618 4.09277 6.40698 4.09277L6.90698 4.09277Z" fill="currentColor"></path>
+</svg>`, re = `<svg width="20" height="20" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M2.00293 14.498L15.0037 14.498" stroke="currentColor" stroke-linecap="round"></path>
+              <path d="M2.00293 1.49805L15.0037 1.49805" stroke="currentColor" stroke-linecap="round"></path>
+              <rect x="2.5" y="6" width="3" height="12" rx="1" transform="rotate(-90 2.5 6)" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></rect>
+              <rect x="2.5" y="13" width="3" height="12" rx="1" transform="rotate(-90 2.5 13)" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></rect>
+              </svg>`, Ie = `<svg width="20" height="20" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M15.5 2.25C15.5 2.52614 15.2761 2.75 15 2.75L2 2.75C1.72386 2.75 1.5 2.52614 1.5 2.25C1.5 1.97386 1.72386 1.75 2 1.75L15 1.75C15.2761 1.75 15.5 1.97386 15.5 2.25Z" fill="currentColor"></path>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 3.25C12.3284 3.25 13 3.92157 13 4.75L13 9.75C13 10.5784 12.3284 11.25 11.5 11.25L10.5 11.25C9.67157 11.25 9 10.5784 9 9.75L9 4.75C9 3.92157 9.67157 3.25 10.5 3.25L11.5 3.25ZM12 4.75C12 4.47386 11.7761 4.25 11.5 4.25L10.5 4.25C10.2239 4.25 10 4.47386 10 4.75L10 9.75C10 10.0261 10.2239 10.25 10.5 10.25L11.5 10.25C11.7761 10.25 12 10.0261 12 9.75L12 4.75Z" fill="currentColor"></path>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4.75C8 3.92157 7.32843 3.25 6.5 3.25L5.5 3.25C4.67157 3.25 4 3.92157 4 4.75L4 12.75C4 13.5784 4.67157 14.25 5.5 14.25L6.5 14.25C7.32843 14.25 8 13.5784 8 12.75L8 4.75ZM6.5 4.25C6.77614 4.25 7 4.47386 7 4.75L7 12.75C7 13.0261 6.77614 13.25 6.5 13.25L5.5 13.25C5.22386 13.25 5 13.0261 5 12.75L5 4.75C5 4.47386 5.22386 4.25 5.5 4.25L6.5 4.25Z" fill="currentColor"></path>
+              </svg>`, Oo = ({
+  name: t,
+  responsive: o = !0,
+  value: n,
+  onChange: l,
+  blacklist: r,
+  flexDirection: s = "row"
+}) => {
+  const i = (() => {
+    let d = [];
+    switch (s) {
+      case "row":
+        d = [
+          {
+            label: "Top",
+            value: "flex-start",
+            icon: Ie
+          },
+          {
+            label: "Center",
+            value: "center",
+            icon: ye
+          },
+          {
+            label: "Bottom",
+            value: "flex-end",
+            icon: Me
+          },
+          {
+            label: "Stretch",
+            value: "stretch",
+            icon: re
+          }
+        ];
+        break;
+      case "column":
+        d = [
+          {
+            label: "Left",
+            value: "flex-start",
+            icon: F
+          },
+          {
+            label: "Center",
+            value: "center",
+            icon: P
+          },
+          {
+            label: "Right",
+            value: "flex-end",
+            icon: D
+          },
+          {
+            label: "Stretch",
+            value: "stretch",
+            icon: ne
+          }
+        ];
+        break;
+    }
+    return r?.length && (d = d.filter((g) => !r.includes(g.value))), d;
+  })(), a = (d) => {
+    l?.({
+      alignItems: d
+    });
+  };
+  return /* @__PURE__ */ e(x, { responsive: o, name: t ?? "Align items", children: /* @__PURE__ */ e(H, { value: n?.alignItems, onSelectionChange: a, children: i.map((d) => /* @__PURE__ */ e(b, { value: d.value, children: /* @__PURE__ */ e(w, { source: d.icon }) }, d.value)) }) });
+}, Po = ({
+  name: t,
+  responsive: o = !0,
+  value: n,
+  onChange: l,
+  direction: r = "row"
+}) => {
+  const s = (() => {
+    switch (r) {
+      case "row":
+        return [
+          {
+            label: "Top",
+            value: "flex-start",
+            icon: F
+          },
+          {
+            label: "Center",
+            value: "center",
+            icon: P
+          },
+          {
+            label: "Bottom",
+            value: "flex-end",
+            icon: D
+          },
+          {
+            label: "Space between",
+            value: "space-between",
+            icon: ne
+          }
+        ];
+      case "column":
+        return [
+          {
+            label: "Left",
+            value: "flex-start",
+            icon: F
+          },
+          {
+            label: "Center",
+            value: "center",
+            icon: P
+          },
+          {
+            label: "Right",
+            value: "flex-end",
+            icon: D
+          },
+          {
+            label: "Space between",
+            value: "space-between",
+            icon: re
+          }
+        ];
+      default:
+        return [];
+    }
+  })(), i = (a) => {
+    l?.({
+      justifyContent: a
+    });
+  };
+  return /* @__PURE__ */ e(x, { responsive: o, name: t ?? "Justify content", children: /* @__PURE__ */ e(H, { value: n?.justifyContent, onSelectionChange: i, children: s.map((a) => /* @__PURE__ */ e(b, { value: a.value, children: /* @__PURE__ */ e(w, { source: a.icon }) }, a.value)) }) });
+}, Ut = (t) => {
+  const { main: o } = Se(t.value);
+  return /* @__PURE__ */ p("div", { css: { display: "flex", alignItems: "center", gap: 8, justifyContent: "space-between" }, children: [
+    t.label,
+    /* @__PURE__ */ e(
+      "div",
+      {
+        css: { borderRadius: 9999, width: 16, height: 16 },
+        style: {
+          backgroundColor: o
+        }
+      }
+    )
+  ] });
+}, Fo = (t) => /* @__PURE__ */ e(x, { name: "Color", children: /* @__PURE__ */ e(
+  j,
+  {
+    checkedIcon: /* @__PURE__ */ e(O, {}),
+    placement: "bottom-end",
+    optionLabel: Ut,
+    options: it,
+    css: {
+      width: "50%"
+    },
+    ...t
+  }
+) }), Do = ({
+  value: t,
+  options: o,
+  onChange: n,
+  className: l
+}) => {
+  const [r, s] = M(!1), i = (v) => {
+    s(!0);
+  }, a = () => {
+    setTimeout(() => {
+      s(!1);
+    }, 100);
+  }, d = (v) => {
+    n?.(v);
+  }, g = (v) => {
+    const k = isNaN(v.target.valueAsNumber) ? void 0 : v.target.valueAsNumber;
+    d(k);
+  }, m = (v) => {
+    d(v.currentTarget.getAttribute("value"));
+  }, h = (v) => {
+    v.stopPropagation(), d(void 0);
+  }, C = ge(t) ? t : void 0, c = Q(t) ? o?.find((v) => v.value === t)?.label ?? t : void 0;
+  return /* @__PURE__ */ p("div", { css: { position: "relative" }, className: l, children: [
+    /* @__PURE__ */ e(
+      L,
+      {
+        classes: {
+          input: "text-center"
+        },
+        onFocus: i,
+        onBlur: a,
+        mode: "onBlur",
+        placeholder: c,
+        value: C ?? "",
+        onChange: g
+      }
+    ),
+    !!o?.length && /* @__PURE__ */ p(S, { open: r, placement: "bottom-start", children: [
+      /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e("div", { css: { position: "absolute", inset: "0 0 auto 0", top: "100%" } }) }),
+      /* @__PURE__ */ e(A, { children: o.map((v) => {
+        const k = v.value === t;
+        return /* @__PURE__ */ p(
+          Z,
+          {
+            css: { justifyContent: "space-between" },
+            isActive: k,
+            onClick: m,
+            value: v.value,
+            children: [
+              v.label,
+              k && (v.closeable ?? !1) && /* @__PURE__ */ e(b, { onClick: h, size: "20", children: /* @__PURE__ */ e(w, { size: 16, source: B }) })
+            ]
+          },
+          v.value
+        );
+      }) })
+    ] })
+  ] });
+}, Eo = ({ propertyPath: t }) => {
+  const { nodeProps: o, setNodeProps: n } = tt(), l = t ? pe(o, t) : null, r = (s) => {
+    const i = {
+      ...l,
+      [s.target.name]: s.target.checked ? void 0 : !1
+    };
+    if (!t) {
+      n({});
+      return;
+    }
+    const a = {};
+    he(a, t, i), n(a);
+  };
+  return /* @__PURE__ */ e("div", { css: { display: "flex", flexDirection: "column", gap: 12 }, children: X.map((s) => /* @__PURE__ */ p(
+    "div",
+    {
+      css: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 },
+      children: [
+        /* @__PURE__ */ e("p", { css: { color: u.palette.white["5s"], ...u.text.xs }, children: s.name }),
+        /* @__PURE__ */ e(
+          ue,
+          {
+            onChange: r,
+            name: s.size,
+            checked: l?.[s.size] ?? !0
+          }
+        )
+      ]
+    },
+    s.size
+  )) });
+}, Uo = ({ name: t, responsive: o = !0, value: n, onChange: l }) => {
+  const r = [
+    {
+      label: "Top",
+      value: "start",
+      icon: F
+    },
+    {
+      label: "Center",
+      value: "center",
+      icon: P
+    },
+    {
+      label: "Bottom",
+      value: "end",
+      icon: D
+    },
+    {
+      label: "Space between",
+      value: "stretch",
+      icon: ne
+    }
+  ], s = (i) => {
+    l?.({
+      justifyItems: i === "stretch" ? void 0 : i
+    });
+  };
+  return /* @__PURE__ */ e(x, { responsive: o, name: t ?? "Justify items", children: /* @__PURE__ */ e(H, { value: n?.justifyItems ?? "stretch", onSelectionChange: s, children: r.map((i) => /* @__PURE__ */ e(b, { value: i.value, children: /* @__PURE__ */ e(w, { source: i.icon }) }, i.value)) }) });
+}, Go = ({ name: t, responsive: o = !0, value: n, onChange: l }) => {
+  const r = [
+    {
+      label: "Top",
+      value: "start",
+      icon: Ie
+    },
+    {
+      label: "Center",
+      value: "center",
+      icon: ye
+    },
+    {
+      label: "Bottom",
+      value: "end",
+      icon: Me
+    },
+    {
+      label: "Stretch",
+      value: "stretch",
+      icon: re
+    }
+  ], s = (i) => {
+    l?.({
+      alignItems: i
+    });
+  };
+  return /* @__PURE__ */ e(x, { responsive: o, name: t ?? "Align items", children: /* @__PURE__ */ e(H, { value: n?.alignItems ?? "stretch", onSelectionChange: s, children: r.map((i) => /* @__PURE__ */ e(b, { value: i.value, children: /* @__PURE__ */ e(w, { source: i.icon }) }, i.value)) }) });
+}, Jo = ({
+  suggestOptions: t,
+  responsive: o = !0,
+  name: n,
+  value: l,
+  onChange: r
+}) => {
+  const s = [
+    {
+      label: "Original",
+      value: "auto"
+      /* Auto */
+    },
+    ...t ?? [],
+    {
+      label: "Custom",
+      value: "custom"
+      /* Custom */
+    }
+  ], i = R(l?.aspectRatio) ? "auto" : s.find((f) => f.value === l?.aspectRatio)?.value ?? "custom", [a, d] = M(
+    i === "custom"
+    /* Custom */
+  ), g = (f) => {
+    f.target.select();
+  }, m = (f = "auto") => {
+    r?.({ aspectRatio: f === "auto" ? void 0 : f });
+  }, h = (f) => {
+    if (f === "custom") {
+      d(!0);
+      return;
+    }
+    d(!1), m(f);
+  }, C = l?.aspectRatio?.toString().split("/") ?? [], c = le(C.at(0)), v = le(C.at(1)), k = (f) => {
+    const y = isNaN(f.target.valueAsNumber) ? void 0 : f.target.valueAsNumber, N = {
+      x: c ?? y,
+      y: v ?? y,
+      [f.target.name]: y
+    }, He = R(N.x) || R(N.y) ? void 0 : `${N.x} / ${N.y}`;
+    m(He);
+  };
+  return /* @__PURE__ */ p("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ e(x, { responsive: o, name: n ?? "Proportion", children: /* @__PURE__ */ e(
+      j,
+      {
+        value: a ? "custom" : i,
+        onChange: h,
+        options: s,
+        css: {
+          width: "50%"
+        }
+      }
+    ) }),
+    (i === "custom" || a) && /* @__PURE__ */ e("div", { css: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ p(
+      "div",
+      {
+        css: {
+          display: "flex",
+          paddingInline: 8,
+          paddingBlock: "0.125rem",
+          alignItems: "center",
+          gap: 2,
+          borderRadius: 8,
+          width: "50%",
+          backgroundColor: u.palette.white["1s"]
+        },
+        children: [
+          /* @__PURE__ */ e(
+            L,
+            {
+              name: "x",
+              onFocus: g,
+              classes: {
+                main: "bg-transparent px-1"
+              },
+              size: "28",
+              value: c,
+              onChange: k,
+              mode: "onBlur",
+              placeholder: "X",
+              css: { textAlign: "center" }
+            }
+          ),
+          /* @__PURE__ */ e("span", { css: { color: u.palette.white["3s"], ...u.text.xs }, children: "/" }),
+          /* @__PURE__ */ e(
+            L,
+            {
+              name: "y",
+              placeholder: "Y",
+              value: v,
+              mode: "onBlur",
+              onChange: k,
+              onFocus: g,
+              classes: {
+                main: "bg-transparent px-1"
+              },
+              size: "28",
+              css: { textAlign: "center" }
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}, _o = ({ name: t, responsive: o = !0, value: n, onChange: l }) => {
+  const [r, s] = M(!1), i = (C) => {
+    const c = isNaN(C.target.valueAsNumber) ? void 0 : C.target.valueAsNumber;
+    l?.({
+      ...n,
+      [C.target.name]: c
+    });
+  }, a = (C) => {
+    C.target.select();
+  }, d = n?.paddingTop ?? 0, g = n?.paddingLeft ?? 0, m = n?.paddingRight ?? 0, h = n?.paddingBottom ?? 0;
+  return /* @__PURE__ */ e(x, { responsive: o, name: t ?? "Padding (px)", children: /* @__PURE__ */ p(E, { open: r, onOpenChange: s, placement: "right-start", children: [
+    /* @__PURE__ */ e(U, { children: /* @__PURE__ */ p(
+      "div",
+      {
+        css: [
+          {
+            display: "flex",
+            paddingInline: 8,
+            alignItems: "center",
+            gap: 8,
+            borderRadius: 8,
+            height: 32,
+            width: "50%",
+            backgroundColor: u.palette.white["1s"],
+            cursor: "pointer"
+          },
+          r && { backgroundColor: u.palette.black["7s"] }
+        ],
+        children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              css: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                flex: 1,
+                ...u.text.xs
+              },
+              children: [d, g, m, h].join(", ")
+            }
+          ),
+          /* @__PURE__ */ e(
+            w,
+            {
+              css: [{ transition: "transform" }, r && { transform: "rotate(-180deg)" }],
+              source: J
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ p(G, { children: [
+      /* @__PURE__ */ p("div", { css: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
+        /* @__PURE__ */ e("span", { css: { fontWeight: 500 }, children: "Padding" }),
+        /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(w, { source: B }) }) })
+      ] }),
+      /* @__PURE__ */ e("hr", { css: { marginBlock: 12, borderColor: u.palette.white["1s"] } }),
+      /* @__PURE__ */ p("div", { css: { display: "grid", gap: 8, gridTemplateColumns: "repeat(3, minmax(0, 1fr))" }, style: { maxWidth: 256 }, children: [
+        /* @__PURE__ */ e("div", { css: { gridColumnStart: 2 }, children: /* @__PURE__ */ e(
+          L,
+          {
+            onFocus: a,
+            onChange: i,
+            mode: "onBlur",
+            autoComplete: "off",
+            name: "paddingTop",
+            value: d,
+            placeholder: "Top",
+            css: { textAlign: "center" }
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { css: { gridColumnStart: 1 }, children: /* @__PURE__ */ e(
+          L,
+          {
+            onFocus: a,
+            onChange: i,
+            mode: "onBlur",
+            autoComplete: "off",
+            name: "paddingLeft",
+            value: g,
+            css: { textAlign: "center" },
+            placeholder: "Left"
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { css: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ e(w, { source: oe }) }),
+        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+          L,
+          {
+            onFocus: a,
+            onChange: i,
+            mode: "onBlur",
+            autoComplete: "off",
+            name: "paddingRight",
+            value: m,
+            css: { textAlign: "center" },
+            placeholder: "Right"
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { css: { gridColumnStart: 2 }, children: /* @__PURE__ */ e(
+          L,
+          {
+            onFocus: a,
+            mode: "onBlur",
+            autoComplete: "off",
+            name: "paddingBottom",
+            value: h,
+            onChange: i,
+            css: { textAlign: "center" },
+            placeholder: "Bottom"
+          }
+        ) })
+      ] })
+    ] })
+  ] }) });
+}, Xo = ({ name: t, responsive: o = !0, value: n, onChange: l }) => /* @__PURE__ */ e(x, { responsive: o, name: t ?? "Order", children: /* @__PURE__ */ e(
+  "div",
+  {
+    css: {
+      width: "50%"
+    },
+    children: /* @__PURE__ */ e(
+      L,
+      {
+        step: 1,
+        onFocus: (i) => {
+          i.target.select();
+        },
+        onChange: (i) => {
+          const a = isNaN(i.target.valueAsNumber) ? void 0 : i.target.valueAsNumber;
+          l?.({
+            order: a ?? 0
+          });
+        },
+        value: n?.order ?? 0,
+        css: { textAlign: "center" },
+        mode: "onBlur",
+        size: "32",
+        min: 0
+      }
+    )
+  }
+) }), $ = "auto", z = ({
+  name: t,
+  value: o,
+  onChange: n
+}) => {
+  const [l, r] = M(!1), s = [
+    {
+      label: "Auto",
+      value: $
+    }
+  ], i = () => {
+    setTimeout(() => {
+      r(!1);
+    }, 100);
+  }, a = (h) => {
+    r(!0), h.target.select();
+  }, d = (h) => {
+    const C = isNaN(h.target.valueAsNumber) ? void 0 : h.target.valueAsNumber;
+    n?.(t, C);
+  }, g = (h) => {
+    n?.(t, h.currentTarget.getAttribute("value") ?? void 0);
+  }, m = (h) => {
+    h.stopPropagation(), n?.(t);
+  };
+  return /* @__PURE__ */ p("div", { css: { position: "relative" }, children: [
+    /* @__PURE__ */ e(
+      L,
+      {
+        mode: "onBlur",
+        onFocus: a,
+        css: { textAlign: "center" },
+        autoComplete: "off",
+        fullWidth: !0,
+        placeholder: o === $ ? "Auto" : void 0,
+        value: o ?? 0,
+        onBlur: i,
+        name: t,
+        onChange: d
+      }
+    ),
+    /* @__PURE__ */ p(S, { open: l, placement: "bottom-start", children: [
+      /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e("div", { css: { position: "absolute", inset: "0 0 auto 0", top: "100%" } }) }),
+      /* @__PURE__ */ e(A, { children: s.map((h) => {
+        const C = h.value === o;
+        return /* @__PURE__ */ p(
+          Z,
+          {
+            onClick: g,
+            css: { justifyContent: "space-between" },
+            isActive: C,
+            value: h.value,
+            children: [
+              h.label,
+              C && /* @__PURE__ */ e(b, { size: "20", onClick: m, children: /* @__PURE__ */ e(w, { size: 16, source: B }) })
+            ]
+          },
+          h.value
+        );
+      }) })
+    ] })
+  ] });
+}, $o = ({ name: t, responsive: o = !0, value: n, onChange: l }) => {
+  const [r, s] = M(!1), i = (h, C) => {
+    l?.({
+      ...n,
+      [h]: C
+    });
+  }, a = n?.marginTop ?? 0, d = n?.marginLeft ?? 0, g = n?.marginRight ?? 0, m = n?.marginBottom ?? 0;
+  return /* @__PURE__ */ e(x, { responsive: o, name: t ?? "Margin (px)", children: /* @__PURE__ */ p(E, { open: r, onOpenChange: s, placement: "right-start", children: [
+    /* @__PURE__ */ e(U, { children: /* @__PURE__ */ p(
+      "div",
+      {
+        css: [
+          {
+            display: "flex",
+            paddingInline: 8,
+            alignItems: "center",
+            gap: 8,
+            borderRadius: 8,
+            height: 32,
+            width: "50%",
+            backgroundColor: u.palette.white["1s"],
+            cursor: "pointer"
+          },
+          r && { backgroundColor: u.palette.black["7s"] }
+        ],
+        children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              css: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                flex: 1,
+                ...u.text.xs
+              },
+              children: [a, d, g, m].map((h) => h === $ ? "Auto" : h).join(", ")
+            }
+          ),
+          /* @__PURE__ */ e(
+            w,
+            {
+              css: [{ transition: "transform" }, r && { transform: "rotate(-180deg)" }],
+              source: J
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ p(G, { children: [
+      /* @__PURE__ */ p("div", { css: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
+        /* @__PURE__ */ e("span", { css: { fontWeight: 500 }, children: "Margin" }),
+        /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(w, { source: B }) }) })
+      ] }),
+      /* @__PURE__ */ e("hr", { css: { marginBlock: "0.75rem", borderColor: u.palette.white["1s"] } }),
+      /* @__PURE__ */ p(
+        "div",
+        {
+          css: { display: "grid", gap: 8, gridTemplateColumns: "repeat(3, minmax(0, 1fr))" },
+          style: { maxWidth: 256 },
+          children: [
+            /* @__PURE__ */ e("div", { css: { gridColumnStart: 2 }, children: /* @__PURE__ */ e(z, { onChange: i, name: "marginTop", value: a }) }),
+            /* @__PURE__ */ e("div", { css: { gridColumnStart: 1 }, children: /* @__PURE__ */ e(z, { onChange: i, name: "marginLeft", value: d }) }),
+            /* @__PURE__ */ e("div", { css: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ e(w, { source: oe }) }),
+            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(z, { onChange: i, name: "marginRight", value: g }) }),
+            /* @__PURE__ */ e("div", { css: { gridColumnStart: 2 }, children: /* @__PURE__ */ e(z, { onChange: i, name: "marginBottom", value: m }) })
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}, Yo = ({ name: t, responsive: o = !0, value: n, onChange: l }) => /* @__PURE__ */ e(x, { name: t ?? "Wrap", responsive: o, children: /* @__PURE__ */ e(ue, { onChange: (s) => {
+  l?.({
+    flexWrap: s.target.checked ? "wrap" : void 0
+  });
+}, checked: n?.flexWrap === "wrap" }) }), qo = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.95 5H20.12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 17V5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 17V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 10H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, Qo = ({ value: t, onChange: o, name: n }) => /* @__PURE__ */ e(x, { name: n ?? "Open in", children: /* @__PURE__ */ e(H, { value: t ?? "_self", onSelectionChange: o, children: [
+  {
+    label: "Current",
+    value: "_self"
+  },
+  {
+    label: "New tab",
+    value: "_blank"
+  }
+].map((r) => /* @__PURE__ */ e(Y, { value: r.value, size: "28", children: r.label }, r.value)) }) });
+export {
+  Qo as A,
+  Ho as B,
+  be as C,
+  Eo as D,
+  wo as E,
+  Zo as F,
+  Go as G,
+  yo as H,
+  ut as I,
+  Po as J,
+  at as K,
+  Bt as L,
+  $o as M,
+  Le as N,
+  jo as O,
+  _o as P,
+  ct as Q,
+  Wo as R,
+  Vo as S,
+  x as T,
+  pt as U,
+  Mo as W,
+  qo as a,
+  Ao as b,
+  Io as c,
+  ko as d,
+  Lo as e,
+  Jo as f,
+  To as g,
+  Ro as h,
+  Bo as i,
+  Fo as j,
+  No as k,
+  Oo as l,
+  Yo as m,
+  Uo as n,
+  Do as o,
+  Xo as p,
+  zo as q,
+  So as r,
+  xo as s,
+  Pt as t,
+  ht as u,
+  tt as v,
+  we as w,
+  X as x,
+  Tt as y,
+  bo as z
+};