@janbox/storefront-builder 1.0.8 → 2.0.0

package/dist/anchor-target-BlOvysAr.js

@@ -0,0 +1,2329 @@
+import { jsx as e, jsxs as u, Fragment as P } from "@emotion/react/jsx-runtime";
+import { useState as L, useRef as J, useEffect as Ve, Fragment as Be } from "react";
+import { useQueryParams as Te } from "@janbox/storefront-ui/hooks";
+import { screens as ye, paletteVars as Ie } from "@janbox/storefront-ui/theme";
+import { getResponsiveProp as Ze, getColorShadesByVariant as Re } from "@janbox/storefront-ui/utils";
+import { p as I, l as f, W as m, o as Z, n as R, c as x, m as je, C as T, d as X, e as ae, P as ce, q as E, s as U, r as q, M as Ae, w as de, y as le } from "./dialog-header-DPLOS7TT.js";
+import { e as j, c as N, d as Se, a as V, A as G, g as A, l as We, j as ze, h as se, i as Pe, k as ie, f as Q, b as Oe } from "./dropzone-Dbfed3jK.js";
+import "@floating-ui/react";
+import { isFunction as Fe, merge as De, set as ue, parseInt as Ee, isNil as y, trimStart as Ue, get as we, isString as Y, isNumber as he } from "lodash-es";
+import "clsx";
+import "tailwind-merge";
+import { useUpdateEffect as pe, useToggle as qe } from "react-use";
+import "react-colorful";
+import "overlayscrollbars-react";
+import "@tanstack/react-virtual";
+import Ge from "react-dropzone";
+import "react-datepicker/dist/react-datepicker.css";
+import "react-datepicker";
+import { u as K, f as ge, I as Je, C as ee, a as _e, i as $e } from "./color-picker-popover-B3AVFuei.js";
+import "@tiptap/extension-text-style";
+import "@tiptap/react";
+import "@tiptap/react/menus";
+import "@tiptap/starter-kit";
+import "react-frame-component";
+import { useNode as Ce } from "@craftjs/core";
+import { flatten as ve } from "flat";
+import "@emotion/react";
+import { Draggable as Xe, DragDropContext as Qe, Droppable as Ye } from "@hello-pangea/dnd";
+import { W as Ke } from "./tooltip-KbIHELP2.js";
+const et = (t = {}) => {
+  const { id: n } = Ce(), o = t?.nodeId ?? n, { nodeProps: l, actions: r } = K((a) => ({
+    nodeProps: a.nodes[o ?? n]?.data.props ?? {}
+  })), i = (a, c) => Fe(a) ? r.setProp(o, a) : r.setProp(o, (h) => {
+    if (c?.merge) {
+      De(h, a);
+      return;
+    }
+    const C = ve(a);
+    Object.keys(C).forEach((w) => {
+      ue(h, w, C[w]);
+    });
+  }), s = (a, c, h) => i(
+    c === "xs" ? a : {
+      [c]: a
+    },
+    h
+  );
+  return {
+    id: o,
+    nodeProps: t?.transform?.(l) ?? l,
+    setNodeProps: i,
+    setNodeResponsiveProps: s
+  };
+}, f1 = () => {
+  const {
+    queryParams: { screen: t }
+  } = me();
+  return { getResponsiveProp: (o, l, r, i) => Ze(o, l, r ?? t, i), currentScreen: t };
+}, me = () => Te({
+  mode: {
+    parser(t) {
+      return ["full", "compact"].find((n) => n === t) ?? "full";
+    }
+  },
+  screen: {
+    parser(t) {
+      return ye.find((n) => n === t) ?? "xs";
+    }
+  },
+  action: {
+    parser(t) {
+      return t ?? void 0;
+    }
+  }
+}), tt = `<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>
+`, ot = `<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>
+`, rt = `<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>
+`, lt = [
+  {
+    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"
+  }
+], b1 = {
+  xs: 390,
+  sm: 768,
+  md: 1280,
+  lg: 1680
+}, _ = [
+  {
+    icon: ot,
+    size: "xs",
+    name: "Mobile"
+  },
+  {
+    icon: tt,
+    size: "sm",
+    name: "Tablet"
+  },
+  {
+    icon: nt,
+    size: "md",
+    name: "Laptop"
+  },
+  {
+    icon: rt,
+    size: "lg",
+    name: "Desktop"
+  }
+], st = "px", it = () => {
+  const {
+    queryParams: { screen: t },
+    setQueryParams: n
+  } = me(), o = (l) => {
+    n({
+      screen: l.currentTarget.getAttribute("value")
+    });
+  };
+  return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ u(j, { children: [
+    /* @__PURE__ */ u(I, { children: [
+      /* @__PURE__ */ e("div", { className: "tw:text-shadow-red-50" }),
+      /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(m, { source: _.find((l) => l.size === t)?.icon ?? "" }) })
+    ] }),
+    /* @__PURE__ */ e(Z, { children: _.map((l) => /* @__PURE__ */ e(R, { isActive: l.size === t, value: l.size, onClick: o, children: /* @__PURE__ */ e(m, { source: l.icon }) }, l.size)) })
+  ] }) });
+}, at = (t) => {
+  const n = Ee(t ?? "");
+  return isNaN(n) ? void 0 : n;
+}, fe = ({
+  units: t = ["px", "%"],
+  size: n = "32",
+  value: o,
+  onChange: l,
+  defaultValue: r = {},
+  ...i
+}) => {
+  const s = t.find((g) => o?.toString().trim().endsWith(g)) ?? t.at(0), [a, c] = L(s);
+  pe(() => {
+    c(s);
+  }, [s]);
+  const h = ({ value: g, unit: k }) => {
+    if (y(g) || y(k) || k === st) {
+      l?.(g);
+      return;
+    }
+    l?.(`${g}${k}`);
+  }, C = at(o?.toString()), w = (g) => {
+    g.stopPropagation();
+    const k = g.currentTarget.value;
+    k !== a && (c(g.currentTarget.value), h({ value: r[k], unit: k }));
+  }, p = (g) => {
+    g.target.select(), i.onFocus?.(g);
+  }, d = (g) => {
+    const k = isNaN(g.target.valueAsNumber) ? void 0 : g.target.valueAsNumber;
+    h({
+      unit: a,
+      value: k
+    });
+  };
+  return /* @__PURE__ */ e(
+    N,
+    {
+      size: n,
+      suffix: /* @__PURE__ */ e("div", { className: "tw:inline-flex tw:items-center tw:gap-1", children: t.map((g) => /* @__PURE__ */ e(
+        f,
+        {
+          onClick: w,
+          value: g,
+          className: x("tw:text-ic-white-3s tw:hover:text-ic-white-4s", {
+            "tw:text-ic-white-6s tw:hover:text-ic-white-6s": a === g
+          }),
+          size: "20",
+          children: /* @__PURE__ */ e("span", { className: "tw:text-xs", children: g }, g)
+        },
+        g
+      )) }),
+      ...i,
+      value: C ?? "",
+      onFocus: p,
+      onChange: d,
+      mode: "onBlur"
+    }
+  );
+}, be = `<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: n, previewStyle: o }) => {
+  const [l, r] = L(t ?? ""), [i, s] = L(!1), { handlers: a } = ge(), { upload: c } = a;
+  return pe(() => {
+    r(t ?? "");
+  }, [t]), /* @__PURE__ */ u("div", { className: "tw:rounded-lg tw:p-4 tw:bg-ic-white-1s tw:flex tw:flex-col tw:gap-2", children: [
+    /* @__PURE__ */ e(Se, { isLoading: i, children: /* @__PURE__ */ e(
+      Ge,
+      {
+        accept: {
+          "image/png": [".png"],
+          "image/jpeg": [".jpeg", ".jpg"],
+          "image/webp": [".webp"]
+        },
+        multiple: !1,
+        onDrop: async (p) => {
+          const d = p.at(0);
+          if (d) {
+            s(!0);
+            try {
+              const g = await c(d);
+              n?.(g);
+            } finally {
+              s(!1);
+            }
+          }
+        },
+        children: ({ getInputProps: p, getRootProps: d }) => /* @__PURE__ */ u(
+          "div",
+          {
+            className: x(
+              "tw:aspect-video tw:bg-ic-white-1s tw:rounded-lg tw:overflow-hidden tw:flex tw:items-center tw:justify-center tw:relative",
+              {
+                group: !!t,
+                "tw:cursor-pointer": !0
+              }
+            ),
+            ...d(),
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "tw:absolute tw:inset-0 tw:rounded-lg tw:pointer-events-none",
+                  style: {
+                    backgroundImage: t ? `url(${t})` : void 0,
+                    backgroundSize: "cover",
+                    backgroundRepeat: "no-repeat",
+                    backgroundPosition: "center",
+                    ...o
+                  }
+                }
+              ),
+              /* @__PURE__ */ u(
+                "div",
+                {
+                  className: x(
+                    "tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:absolute tw:inset-0 tw:bg-black tw:bg-opacity-0 tw:transition-all",
+                    "tw:group-hover:bg-opacity-40 tw:group-hover:opacity-100",
+                    {
+                      "tw:opacity-0": !!t
+                    }
+                  ),
+                  children: [
+                    /* @__PURE__ */ e(m, { size: 32, source: be }),
+                    /* @__PURE__ */ e("span", { className: "tw:text-xs", children: "PNG, JPEG, JPG, WEBP" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e("input", { ...p() })
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      je,
+      {
+        onChange: (p) => {
+          p.target.value = Ue(p.target.value), r(p.target.value);
+        },
+        title: l,
+        value: l,
+        size: "32",
+        onBlur: (p) => {
+          p.currentTarget.value !== (t ?? "") && n?.(l);
+        },
+        placeholder: "https://example.com/image.jpg"
+      }
+    )
+  ] });
+}, b = ({ name: t, responsive: n, children: o, direction: l = "horizontal", guide: r }) => /* @__PURE__ */ u(
+  "div",
+  {
+    className: x("tw:flex", {
+      "tw:flex-col tw:gap-2": l === "vertical",
+      "tw:gap-4 tw:items-center tw:justify-between": l === "horizontal"
+    }),
+    children: [
+      /* @__PURE__ */ u("div", { className: "tw:flex tw:items-center tw:gap-1", children: [
+        /* @__PURE__ */ u("div", { className: "tw:text-xs tw:flex tw:items-center tw:gap-2 tw:text-ic-white-5s", children: [
+          t,
+          !!r && /* @__PURE__ */ e(Ke, { placement: "top-start", content: r, children: /* @__PURE__ */ e(m, { className: "tw:cursor-pointer", size: 16, source: Je }) })
+        ] }),
+        !!n && /* @__PURE__ */ e(it, {})
+      ] }),
+      o
+    ]
+  }
+), dt = `<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>
+`, ut = `<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>
+`, wt = `<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>
+`, ht = '<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>', pt = '<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>', 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="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>', 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.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>', x1 = ({ value: t, onChange: n, label: o }) => /* @__PURE__ */ e(b, { name: o ?? "Text align", responsive: !0, children: /* @__PURE__ */ e(V, { onSelectionChange: n, value: t, children: [
+  {
+    icon: gt,
+    value: "left"
+  },
+  {
+    icon: ht,
+    value: "center"
+  },
+  {
+    icon: Ct,
+    value: "right"
+  },
+  {
+    icon: pt,
+    value: "justify"
+  }
+].map((r) => /* @__PURE__ */ e(f, { value: r.value, children: /* @__PURE__ */ e(m, { source: r.icon }) }, r.value)) }) }), k1 = ({ value: t, onChange: n, name: o, responsive: l }) => {
+  const r = () => {
+    n?.({
+      ...t,
+      fontWeight: t?.fontWeight === 700 ? void 0 : 700
+    });
+  }, i = () => {
+    n?.({
+      ...t,
+      fontStyle: t?.fontStyle === "italic" ? void 0 : "italic"
+    });
+  }, s = () => {
+    n?.({
+      ...t,
+      textDecorationLine: t?.textDecorationLine === "underline" ? void 0 : "underline"
+    });
+  };
+  return /* @__PURE__ */ e(b, { name: o ?? "Text Style", responsive: l, children: /* @__PURE__ */ u("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
+    /* @__PURE__ */ e(
+      f,
+      {
+        onClick: r,
+        size: "28",
+        className: x({
+          "tw:bg-ic-white-2s": t?.fontWeight === 700
+        }),
+        children: /* @__PURE__ */ e(m, { source: ut })
+      }
+    ),
+    /* @__PURE__ */ e(
+      f,
+      {
+        onClick: i,
+        size: "28",
+        className: x({
+          "tw:bg-ic-white-2s": t?.fontStyle === "italic"
+        }),
+        children: /* @__PURE__ */ e(m, { source: dt })
+      }
+    ),
+    /* @__PURE__ */ e(
+      f,
+      {
+        onClick: s,
+        size: "28",
+        className: x({
+          "tw:bg-ic-white-2s": t?.textDecorationLine === "underline"
+        }),
+        children: /* @__PURE__ */ e(m, { source: wt })
+      }
+    )
+  ] }) });
+}, 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>', N1 = ({ value: t, onChange: n, name: o, responsive: l }) => {
+  const r = [
+    {
+      icon: te,
+      value: "none"
+    },
+    {
+      value: "uppercase",
+      example: "AA"
+    },
+    {
+      value: "capitalize",
+      example: "Aa"
+    },
+    {
+      value: "lowercase",
+      example: "aa"
+    }
+  ];
+  return /* @__PURE__ */ e(b, { name: o ?? "Text Transform", responsive: l, children: /* @__PURE__ */ e(V, { onSelectionChange: (s) => {
+    n?.({
+      textTransform: s === "none" ? void 0 : s
+    });
+  }, value: t?.textTransform, children: r.map((s) => /* @__PURE__ */ e(f, { value: s.value, children: s.icon ? /* @__PURE__ */ e(m, { source: s.icon }) : /* @__PURE__ */ e("span", { className: "tw:text-sm tw:leading-none", children: s.example }) }, s.value)) }) });
+}, L1 = ({ name: t, value: n, onChange: o, responsive: l = !0, menu: r }) => {
+  const i = J(null), [s, a] = L(!1), c = (v) => {
+    o?.({
+      width: v
+    });
+  }, h = (v) => {
+    a(!0);
+  }, C = () => {
+    setTimeout(() => {
+      a(!1);
+    }, 100);
+  }, w = [
+    {
+      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
+    }
+  ], p = w.filter((v) => v.visible), d = w.find((v) => v.value === n?.width)?.label?.toString(), g = (v) => {
+    const M = v.currentTarget.getAttribute("value");
+    y(M) || c(M);
+  }, k = (v) => {
+    v.stopPropagation(), c(void 0);
+  };
+  return /* @__PURE__ */ e(b, { name: t ?? "Width", responsive: l, children: /* @__PURE__ */ u("div", { className: "tw:relative tw:w-1/2", children: [
+    /* @__PURE__ */ e(
+      fe,
+      {
+        fullWidth: !0,
+        wrapRef: i,
+        placeholder: d,
+        value: n?.width,
+        onChange: c,
+        defaultValue: {
+          "%": 100
+        },
+        onFocus: h,
+        onBlur: C
+      }
+    ),
+    !!p.length && /* @__PURE__ */ u(j, { open: s, placement: "bottom-start", children: [
+      /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-x-0 tw:top-full" }) }),
+      /* @__PURE__ */ e(Z, { children: p.map((v) => /* @__PURE__ */ u(
+        R,
+        {
+          className: "tw:justify-between",
+          isActive: n?.width === v.value,
+          onClick: g,
+          value: v.value,
+          children: [
+            v.label,
+            v.clearable && n?.width === v.value && /* @__PURE__ */ e(f, { onClick: k, size: "20", children: /* @__PURE__ */ e(m, { size: 16, source: T }) })
+          ]
+        },
+        v.value
+      )) })
+    ] })
+  ] }) });
+}, M1 = ({
+  name: t,
+  value: n,
+  onChange: o,
+  responsive: l = !0,
+  units: r = ["px", "%"],
+  menu: i
+}) => {
+  const [s, a] = L(!1), c = [
+    {
+      value: "auto",
+      label: "Auto",
+      visible: i?.autoOption?.visible ?? !0,
+      clearable: i?.autoOption?.clearable ?? !1
+    },
+    {
+      value: "fit-content",
+      label: "Fit content",
+      visible: i?.fitContentOption?.visible ?? !1,
+      clearable: i?.fitContentOption?.clearable ?? !1
+    }
+  ], h = c.filter((v) => v.visible), C = (v) => {
+    o?.({
+      height: v
+    });
+  }, w = (v) => {
+    a(!0);
+  }, p = () => {
+    setTimeout(() => {
+      a(!1);
+    }, 100);
+  }, d = c.find((v) => v.value === n?.height)?.label, g = (v) => {
+    const M = v.currentTarget.getAttribute("value");
+    y(M) || C(M);
+  }, k = (v) => {
+    v.stopPropagation(), C(void 0);
+  };
+  return /* @__PURE__ */ e(b, { name: t ?? "Height", responsive: l, children: /* @__PURE__ */ u("div", { className: "tw:relative tw:w-1/2", children: [
+    /* @__PURE__ */ e(
+      fe,
+      {
+        fullWidth: !0,
+        units: r,
+        placeholder: d,
+        value: n?.height,
+        onChange: C,
+        onFocus: w,
+        onBlur: p
+      }
+    ),
+    !!h.length && /* @__PURE__ */ u(j, { open: s, placement: "bottom-start", children: [
+      /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-x-0 tw:top-full" }) }),
+      /* @__PURE__ */ e(Z, { children: h.map((v) => /* @__PURE__ */ u(
+        R,
+        {
+          className: "tw:justify-between",
+          isActive: n?.height === v.value,
+          onClick: g,
+          value: v.value,
+          children: [
+            v.label,
+            v.clearable && n?.height === v.value && /* @__PURE__ */ e(f, { onClick: k, size: "20", children: /* @__PURE__ */ e(m, { size: 16, source: T }) })
+          ]
+        },
+        v.value
+      )) })
+    ] })
+  ] }) });
+}, H1 = ({ name: t, responsive: n, value: o, onChange: l }) => {
+  const r = (i) => {
+    l?.({
+      color: i
+    });
+  };
+  return /* @__PURE__ */ e(b, { name: t ?? "Color", responsive: n, children: /* @__PURE__ */ e(ee, { color: o?.color, onChange: r }) });
+}, vt = ({ value: t, onChange: n }) => {
+  const o = ge(), l = ve(Ie), r = (() => {
+    const s = Object.keys(l).find((a) => l[a] === t?.backgroundColor);
+    return s ? we(o.theme.palette, s) : t?.backgroundColor;
+  })();
+  return /* @__PURE__ */ e(b, { name: "Color", children: /* @__PURE__ */ e(ee, { color: r, onChange: (s) => {
+    n?.({ ...t, backgroundColor: s });
+  } }) });
+}, mt = '<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>', ft = `<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>`, bt = '<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>', xt = [
+  {
+    value: "no-repeat",
+    icon: te
+  },
+  {
+    value: "repeat-x",
+    icon: mt
+  },
+  {
+    value: "repeat-y",
+    icon: ft
+  },
+  {
+    value: "repeat",
+    icon: bt
+  }
+], kt = [
+  "left top",
+  "top",
+  "right top",
+  "left",
+  "center",
+  "right",
+  "left bottom",
+  "bottom",
+  "right bottom"
+], Nt = ["cover", "contain", "auto"], Lt = [
+  {
+    value: "scroll",
+    label: "Scroll"
+  },
+  {
+    value: "fixed",
+    label: "Fixed"
+  },
+  {
+    value: "local",
+    label: "Local"
+  }
+], Mt = `<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>`, xe = `<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: n }) => {
+  const [o, l] = qe(!1), r = n?.backgroundPosition ?? "center", i = n?.backgroundRepeat ?? "no-repeat", s = n?.backgroundSize ?? "cover", a = n?.backgroundAttachment ?? "scroll", c = (d) => {
+    t?.({
+      backgroundImage: d ? `url(${d})` : void 0,
+      backgroundPosition: r,
+      backgroundRepeat: i,
+      backgroundSize: s
+    });
+  }, h = (d) => {
+    t?.({
+      ...n,
+      backgroundRepeat: d
+    });
+  }, C = (d) => {
+    t?.({
+      ...n,
+      backgroundPosition: d.currentTarget.value
+    });
+  }, w = (d) => {
+    t?.({
+      ...n,
+      backgroundSize: d.currentTarget.value
+    });
+  }, p = (d) => {
+    t?.({
+      ...n,
+      backgroundAttachment: d
+    });
+  };
+  return /* @__PURE__ */ u("div", { className: "tw:flex tw:flex-col tw:gap-3", children: [
+    /* @__PURE__ */ e(
+      ct,
+      {
+        previewStyle: {
+          backgroundPosition: r,
+          backgroundRepeat: i,
+          backgroundSize: s,
+          backgroundAttachment: a
+        },
+        source: Ht(n?.backgroundImage),
+        onChange: c
+      }
+    ),
+    /* @__PURE__ */ e(
+      X,
+      {
+        suffix: /* @__PURE__ */ e(
+          m,
+          {
+            className: x("tw:transition-transform", {
+              "tw:-rotate-180": o
+            }),
+            source: G
+          }
+        ),
+        onClick: l,
+        children: o ? "Show less" : "Show more"
+      }
+    ),
+    /* @__PURE__ */ e(ae, { open: o, children: /* @__PURE__ */ u("div", { className: "tw:flex tw:flex-col tw:gap-3", children: [
+      /* @__PURE__ */ e(b, { name: "Scale", children: /* @__PURE__ */ e("div", { className: "tw:flex tw:items-center tw:gap-2", children: Nt.map((d) => {
+        const g = s === d;
+        return /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: w,
+            value: d,
+            className: x("tw:p-1.5 tw:border tw:rounded tw:border-ic-white-2s tw:text-ic-white-4s", {
+              "tw:text-ic-white-6s tw:border-ic-white-5s": g
+            }),
+            children: /* @__PURE__ */ u("div", { className: "tw:h-8 tw:w-12 tw:rounded tw:overflow-hidden tw:relative tw:flex tw:justify-center tw:items-center", children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: x("tw:bg-ic-white-1s tw:flex tw:items-center tw:justify-center", {
+                    "tw:w-8 tw:h-8": d === "contain",
+                    "tw:w-full tw:h-full": d === "cover",
+                    "tw:w-6 tw:h-6 tw:rounded-sm": d === "auto"
+                  }),
+                  children: /* @__PURE__ */ e(m, { source: xe })
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: x(
+                    "tw:absolute tw:inset-0 tw:border tw:rounded tw:pointer-events-none tw:border-ic-white-1s",
+                    {
+                      "tw:border-ic-white-2s": g
+                    }
+                  )
+                }
+              )
+            ] })
+          },
+          d
+        );
+      }) }) }),
+      /* @__PURE__ */ e(b, { name: "Position", children: /* @__PURE__ */ e("div", { className: "tw:grid tw:grid-cols-3 tw:bg-ic-white-1s tw:p-2 tw:gap-0.5 tw:rounded-xl", children: kt.map((d) => {
+        const g = r === d;
+        return /* @__PURE__ */ u(
+          f,
+          {
+            className: x("tw:relative", {
+              "tw:bg-ic-black-7s": g
+            }),
+            onClick: C,
+            value: d,
+            size: "20",
+            children: [
+              /* @__PURE__ */ e(m, { source: Mt }),
+              g && /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-3 tw:h-3 tw:border-2 tw:rounded-full tw:pointer-events-none" })
+            ]
+          },
+          d
+        );
+      }) }) }),
+      /* @__PURE__ */ e(b, { name: "Repeat", children: /* @__PURE__ */ e(V, { value: i, onSelectionChange: h, children: xt.map((d) => /* @__PURE__ */ e(f, { value: d.value, children: /* @__PURE__ */ e(m, { source: d.icon }) }, d.value)) }) }),
+      /* @__PURE__ */ e(b, { name: "Attachment", children: /* @__PURE__ */ e(
+        A,
+        {
+          onChange: p,
+          className: "tw:w-1/2",
+          value: a,
+          options: Lt
+        }
+      ) })
+    ] }) })
+  ] });
+}, V1 = ({ value: t, onChange: n }) => /* @__PURE__ */ u(We, { defaultIndex: t?.backgroundImage ? 1 : 0, children: [
+  /* @__PURE__ */ u(ze, { children: [
+    /* @__PURE__ */ e(se, { className: "tw:text-xs", children: "Color" }),
+    /* @__PURE__ */ e(se, { className: "tw:text-xs", children: "Image" })
+  ] }),
+  /* @__PURE__ */ u(Pe, { className: "tw:pt-2", children: [
+    /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ e(vt, { onChange: n, value: t }) }),
+    /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ e(Vt, { onChange: n, value: t }) })
+  ] })
+] }), B = ({ name: t, value: n, onChange: o }) => {
+  const [l, r] = L(!1), i = "auto", s = [
+    {
+      label: "Auto",
+      value: i
+    }
+  ], a = () => {
+    setTimeout(() => {
+      r(!1);
+    }, 100);
+  }, c = (p) => {
+    r(!0), p.target.select();
+  }, h = (p) => {
+    const d = isNaN(p.target.valueAsNumber) ? void 0 : p.target.valueAsNumber;
+    o?.(t, d);
+  }, C = (p) => {
+    o?.(t, p.currentTarget.getAttribute("value") ?? void 0);
+  }, w = (p) => {
+    p.stopPropagation(), o?.(t);
+  };
+  return /* @__PURE__ */ u("div", { className: "tw:relative tw:w-11 tw:h-fit", children: [
+    /* @__PURE__ */ e(
+      N,
+      {
+        mode: "onBlur",
+        onFocus: c,
+        className: "tw:text-center",
+        size: "28",
+        autoComplete: "off",
+        fullWidth: !0,
+        placeholder: n === i ? "Auto" : void 0,
+        value: n ?? 0,
+        onBlur: a,
+        name: t,
+        onChange: h
+      }
+    ),
+    t.startsWith("margin") && /* @__PURE__ */ u(j, { open: l, placement: "bottom-start", children: [
+      /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-x-0 tw:top-full" }) }),
+      /* @__PURE__ */ e(Z, { children: s.map((p) => {
+        const d = p.value === n;
+        return /* @__PURE__ */ u(
+          R,
+          {
+            onClick: C,
+            className: "tw:justify-between",
+            isActive: d,
+            value: p.value,
+            children: [
+              p.label,
+              d && /* @__PURE__ */ e(f, { size: "20", onClick: w, children: /* @__PURE__ */ e(m, { size: 16, source: T }) })
+            ]
+          },
+          p.value
+        );
+      }) })
+    ] })
+  ] });
+}, B1 = ({ value: t, onChange: n }) => {
+  const o = J(null), l = J(null), [r, i] = L(0), [s, a] = L(0);
+  Ve(() => {
+    const h = new ResizeObserver((C) => {
+      const w = C.at(0)?.target;
+      if (w) {
+        const { width: d } = w.getBoundingClientRect();
+        i(Math.floor(Math.sqrt(Math.pow(d, 2) / 2)));
+      }
+      const p = C.at(1)?.target;
+      if (p) {
+        const { width: d } = p.getBoundingClientRect();
+        a(Math.floor(Math.sqrt(Math.pow(d, 2) / 2)));
+      }
+    });
+    return o.current && h.observe(o.current), l.current && h.observe(l.current), () => h.disconnect();
+  }, []);
+  const c = (h, C) => {
+    n?.({
+      ...t,
+      [h]: C
+    });
+  };
+  return /* @__PURE__ */ u("div", { ref: o, className: "tw:aspect-square tw:relative tw:overflow-hidden tw:rounded", children: [
+    /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:translate-y-1/2 tw:grid tw:place-items-center tw:pointer-events-none", children: /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          width: r
+        },
+        className: "tw:bg-ic-white-1s tw:aspect-square tw:relative tw:pointer-events-auto",
+        children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-full tw:h-full tw:flex tw:justify-center tw:-rotate-45 tw:z-10", children: /* @__PURE__ */ e("div", { className: "tw:z-10 tw:h-1/2 tw:relative tw:flex tw:items-end tw:pb-3", children: /* @__PURE__ */ e(B, { name: "marginBottom", value: t?.marginBottom, onChange: c }) }) })
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:-translate-y-1/2 tw:grid tw:place-items-center tw:pointer-events-none", children: /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          width: r
+        },
+        className: "tw:bg-ic-white-1s tw:aspect-square tw:relative tw:pointer-events-auto",
+        children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-full tw:h-full tw:flex tw:justify-center tw:-rotate-45 tw:z-10 tw:items-end", children: /* @__PURE__ */ e("div", { className: "tw:z-10 tw:h-1/2 tw:relative tw:flex tw:pt-3", children: /* @__PURE__ */ e(B, { name: "marginTop", value: t?.marginTop, onChange: c }) }) })
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:grid tw:place-items-center tw:translate-x-1/2 tw:pointer-events-none", children: /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          width: r
+        },
+        className: "tw:bg-ic-white-1s tw:aspect-square tw:relative tw:pointer-events-auto",
+        children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:flex tw:-rotate-45 tw:z-10 tw:items-center", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2 tw:flex tw:justify-end tw:pr-1.5", children: /* @__PURE__ */ e(B, { name: "marginRight", value: t?.marginRight, onChange: c }) }) })
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:grid tw:place-items-center tw:-translate-x-1/2 tw:pointer-events-none", children: /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          width: r
+        },
+        className: "tw:bg-ic-white-1s tw:aspect-square tw:relative tw:pointer-events-auto",
+        children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:flex tw:-rotate-45 tw:z-10 tw:items-center tw:justify-end", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2 tw:flex tw:pl-1.5", children: /* @__PURE__ */ e("div", { className: "tw:w-10", children: /* @__PURE__ */ e(B, { name: "marginLeft", value: t?.marginLeft, onChange: c }) }) }) })
+      }
+    ) }),
+    /* @__PURE__ */ u("div", { className: "tw:absolute tw:w-3/5 tw:h-3/5 tw:left-1/2 tw:top-1/2 tw:-translate-x-1/2 tw:-translate-y-1/2 tw:bg-ic-white-1s tw:rounded tw:overflow-hidden", children: [
+      /* @__PURE__ */ e("div", { ref: l, className: "tw:w-full tw:h-full tw:relative", children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:translate-y-1/2 tw:grid tw:place-items-center tw:pointer-events-none", children: /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            width: s
+          },
+          className: "tw:aspect-square tw:relative tw:pointer-events-auto",
+          children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-full tw:h-full tw:flex tw:justify-center tw:-rotate-45 tw:z-10", children: /* @__PURE__ */ e("div", { className: "tw:z-10 tw:w-10 tw:h-1/2 tw:relative tw:flex tw:items-end tw:pb-4", children: /* @__PURE__ */ e(B, { name: "paddingBottom", value: t?.paddingBottom, onChange: c }) }) })
+        }
+      ) }) }),
+      /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:-translate-y-1/2 tw:grid tw:place-items-center tw:pointer-events-none", children: /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            width: s
+          },
+          className: "tw:aspect-square tw:relative tw:pointer-events-auto",
+          children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:w-full tw:h-full tw:flex tw:justify-center tw:-rotate-45 tw:z-10 tw:items-end", children: /* @__PURE__ */ e("div", { className: "tw:z-10 tw:h-1/2 tw:relative tw:flex tw:pt-4", children: /* @__PURE__ */ e(B, { name: "paddingTop", value: t?.paddingTop, onChange: c }) }) })
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:grid tw:place-items-center tw:translate-x-1/2 tw:pointer-events-none", children: /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            width: s
+          },
+          className: "tw:aspect-square tw:relative tw:pointer-events-auto",
+          children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:flex tw:-rotate-45 tw:z-10 tw:items-center", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2 tw:flex tw:justify-end tw:pr-3", children: /* @__PURE__ */ e(B, { name: "paddingRight", value: t?.paddingRight, onChange: c }) }) })
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:rotate-45 tw:grid tw:place-items-center tw:-translate-x-1/2 tw:pointer-events-none", children: /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            width: s
+          },
+          className: "tw:aspect-square tw:relative tw:pointer-events-auto",
+          children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-0 tw:flex tw:-rotate-45 tw:z-10 tw:items-center tw:justify-end", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2 tw:flex tw:pl-3", children: /* @__PURE__ */ e(B, { name: "paddingLeft", value: t?.paddingLeft, onChange: c }) }) })
+        }
+      ) })
+    ] })
+  ] });
+}, 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>`, Tt = `<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>
+`, yt = `<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>
+`, It = ({ node: t, nodeIndex: n }) => {
+  const [o, l] = L(!1), { actions: r } = K(), i = (C) => {
+    C.stopPropagation(), r.delete(t.id);
+  }, s = (C) => {
+    C.stopPropagation();
+    const w = r.duplicate(t.id);
+    r.selectNode(w.id);
+  }, a = () => {
+    l(!0);
+  }, c = () => {
+    l(!1);
+  }, h = () => {
+    $e(t) && r.selectNode(t.id);
+  };
+  return /* @__PURE__ */ e(Xe, { index: n, draggableId: t.id, children: (C, w) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: C.innerRef,
+      ...C.draggableProps,
+      ...C.dragHandleProps,
+      children: /* @__PURE__ */ u(
+        "div",
+        {
+          className: x(
+            "tw:flex tw:items-center tw:gap-1 tw:text-xs tw:px-2 tw:py-1.5 tw:bg-ic-white-1s tw:rounded-lg tw:hover:bg-ic-white-2s tw:cursor-grab",
+            {
+              "tw:bg-ic-white-3s": w.isDragging
+            }
+          ),
+          onMouseEnter: a,
+          onMouseLeave: c,
+          "aria-hidden": !0,
+          onClick: h,
+          children: [
+            /* @__PURE__ */ e(m, { size: 16, source: Bt }),
+            /* @__PURE__ */ e("span", { className: "tw:flex-1 tw:truncate", children: _e(t) }),
+            /* @__PURE__ */ e(ae, { open: o, orientation: "horizontal", children: /* @__PURE__ */ u("div", { className: "tw:flex tw:items-center tw:gap-1", children: [
+              /* @__PURE__ */ e(f, { tooltip: { content: "Duplicate" }, onClick: s, children: /* @__PURE__ */ e(m, { size: 16, source: Tt }) }),
+              /* @__PURE__ */ e(
+                f,
+                {
+                  tooltip: {
+                    content: "Delete"
+                  },
+                  onClick: i,
+                  children: /* @__PURE__ */ e(m, { size: 16, source: yt })
+                }
+              )
+            ] }) })
+          ]
+        }
+      )
+    }
+  ) });
+}, T1 = ({ getNewNodeElement: t }) => {
+  const { query: n, actions: o } = K(), { id: l } = Ce(), r = n.node(l).childNodes().map((a) => n.node(a).get());
+  return /* @__PURE__ */ u("div", { children: [
+    /* @__PURE__ */ e(Qe, { onDragEnd: (a) => {
+      const { source: c, destination: h } = a;
+      if (!h || c.index === h.index) return;
+      const C = r.at(c.index);
+      C && o.move({ nodeId: C.id, sourceIndex: c.index, destinationIndex: h.index });
+    }, children: /* @__PURE__ */ e(Ye, { droppableId: l, children: (a) => /* @__PURE__ */ u("div", { ref: a.innerRef, ...a.droppableProps, className: "tw:flex tw:flex-col tw:gap-2", children: [
+      r.map((c, h) => /* @__PURE__ */ e(It, { node: c, nodeIndex: h }, c.id)),
+      a.placeholder
+    ] }) }) }),
+    /* @__PURE__ */ e(X, { className: "tw:mt-2", onClick: () => {
+      const a = n.parseReactElement(t()).toNodeTree();
+      o.addNodeTree(a, l);
+    }, fullWidth: !0, prefix: /* @__PURE__ */ e(m, { 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>', Rt = '<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>', At = [
+  {
+    value: "none",
+    icon: te
+  },
+  {
+    value: "solid",
+    icon: jt
+  },
+  {
+    value: "dashed",
+    icon: Zt
+  },
+  {
+    value: "dotted",
+    icon: Rt
+  }
+], y1 = ({ responsive: t = !0, value: n, onChange: o }) => {
+  const l = n?.borderBottomWidth ?? 0, r = n?.borderTopWidth ?? 0, i = n?.borderLeftWidth ?? 0, s = n?.borderRightWidth ?? 0, a = (d = "none") => {
+    o?.(
+      d === "none" ? {
+        borderStyle: void 0,
+        borderColor: void 0,
+        borderTopWidth: void 0,
+        borderRightWidth: void 0,
+        borderBottomWidth: void 0,
+        borderLeftWidth: void 0
+      } : {
+        ...n,
+        borderStyle: d,
+        borderBottomWidth: n?.borderBottomWidth ?? 1,
+        borderLeftWidth: n?.borderLeftWidth ?? 1,
+        borderRightWidth: n?.borderRightWidth ?? 1,
+        borderTopWidth: n?.borderTopWidth ?? 1
+      }
+    );
+  }, c = n?.borderStyle ?? "none", h = /* @__PURE__ */ e("span", { className: "tw:text-xs tw:text-ic-white-3s", children: "|" }), C = (d) => {
+    d.target.select();
+  }, w = (d) => {
+    const g = isNaN(d.target.valueAsNumber) ? void 0 : d.target.valueAsNumber;
+    o?.({
+      ...n,
+      [d.target.name]: g
+    });
+  };
+  return /* @__PURE__ */ u("div", { className: "tw:flex tw:flex-col tw:gap-2", children: [
+    /* @__PURE__ */ e(b, { responsive: t, name: "Border", children: /* @__PURE__ */ u("div", { className: "tw:flex tw:items-center tw:gap-2", children: [
+      c !== "none" && /* @__PURE__ */ e(ee, { onChange: (d) => {
+        o?.({
+          ...n,
+          borderColor: d
+        });
+      }, color: n?.borderColor }),
+      /* @__PURE__ */ e(V, { value: c, onSelectionChange: a, children: At.map((d) => /* @__PURE__ */ e(f, { value: d.value, children: /* @__PURE__ */ e(m, { source: d.icon }) }, d.value)) })
+    ] }) }),
+    c !== "none" && /* @__PURE__ */ e("div", { className: "tw:flex tw:justify-end", children: /* @__PURE__ */ e("div", { className: "tw:flex tw:items-center tw:gap-1", children: /* @__PURE__ */ u("div", { className: "tw:flex-1 tw:flex tw:items-center tw:gap-0.5 tw:py-0.5 tw:bg-ic-white-1s tw:rounded-lg tw:px-2", children: [
+      /* @__PURE__ */ e(
+        N,
+        {
+          value: r,
+          onChange: w,
+          name: "borderTopWidth",
+          onFocus: C,
+          classes: {
+            main: "bg-transparent px-1"
+          },
+          size: "28",
+          placeholder: "Top",
+          className: "tw:text-center"
+        }
+      ),
+      h,
+      /* @__PURE__ */ e(
+        N,
+        {
+          value: s,
+          name: "borderRightWidth",
+          placeholder: "Right",
+          onChange: w,
+          onFocus: C,
+          classes: {
+            main: "bg-transparent px-1"
+          },
+          size: "28",
+          className: "tw:text-center"
+        }
+      ),
+      h,
+      /* @__PURE__ */ e(
+        N,
+        {
+          value: l,
+          name: "borderBottomWidth",
+          onChange: w,
+          placeholder: "Bottom",
+          onFocus: C,
+          classes: {
+            main: "bg-transparent px-1"
+          },
+          size: "28",
+          className: "tw:text-center"
+        }
+      ),
+      h,
+      /* @__PURE__ */ e(
+        N,
+        {
+          value: i,
+          name: "borderLeftWidth",
+          onChange: w,
+          onFocus: C,
+          placeholder: "Left",
+          classes: {
+            main: "bg-transparent px-1"
+          },
+          size: "28",
+          className: "tw:text-center"
+        }
+      )
+    ] }) }) })
+  ] });
+}, ne = `<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>', St = '<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>', Wt = `<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>
+`, zt = '<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>', H = 9999, I1 = ({ value: t, onChange: n, name: o, responsive: l = !0 }) => {
+  const [r, i] = L(!1), s = Object.values(t ?? {}).every((w) => (w ?? 0) === 0), a = Object.values(t ?? {}).every((w) => (w ?? 0) === H), c = !s && !a, h = (w) => {
+    const p = isNaN(w.target.valueAsNumber) ? void 0 : w.target.valueAsNumber;
+    n?.({
+      ...t,
+      [w.target.name]: p
+    });
+  }, C = (w) => {
+    n?.({
+      borderBottomLeftRadius: void 0,
+      borderBottomRightRadius: void 0,
+      borderTopLeftRadius: void 0,
+      borderTopRightRadius: void 0,
+      ...JSON.parse(w.currentTarget.value)
+    });
+  };
+  return /* @__PURE__ */ e(b, { name: o ?? "Corner", responsive: l, children: /* @__PURE__ */ u(E, { open: r, onOpenChange: i, placement: "right", children: [
+    /* @__PURE__ */ e(U, { children: /* @__PURE__ */ u(
+      "div",
+      {
+        className: x(
+          "tw:h-8 tw:bg-ic-white-1s tw:w-1/2 tw:rounded-lg tw:px-2 tw:flex tw:items-center tw:gap-2 tw:cursor-pointer",
+          {
+            "tw:bg-ic-black-7s": r
+          }
+        ),
+        children: [
+          /* @__PURE__ */ u("span", { className: "tw:text-xs tw:flex-1 tw:truncate", children: [
+            a && /* @__PURE__ */ e(P, { children: "Full" }),
+            c && /* @__PURE__ */ e(P, { children: [
+              t?.borderTopLeftRadius ?? "-",
+              t?.borderTopRightRadius ?? "-",
+              t?.borderBottomLeftRadius ?? "-",
+              t?.borderBottomRightRadius ?? "-"
+            ].join(", ") }),
+            s && /* @__PURE__ */ e(P, { children: "None" })
+          ] }),
+          /* @__PURE__ */ e(
+            m,
+            {
+              className: x("tw:transition-transform", {
+                "tw:-rotate-180": r
+              }),
+              source: G
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(q, { children: /* @__PURE__ */ u("div", { children: [
+      /* @__PURE__ */ u("div", { className: "tw:flex tw:items-center tw:justify-between tw:gap-2", children: [
+        /* @__PURE__ */ e("span", { className: "tw:font-medium", children: "Corner" }),
+        /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(m, { source: T }) }) })
+      ] }),
+      /* @__PURE__ */ e("hr", { className: "tw:border-ic-white-1s tw:my-2" }),
+      /* @__PURE__ */ u("div", { style: { maxWidth: 256 }, className: "tw:flex tw:gap-2", children: [
+        /* @__PURE__ */ u("div", { className: "tw:grid tw:grid-cols-12 tw:bg-ic-white-1s tw:p-4 tw:gap-x-4 tw:gap-y-1 tw:rounded-lg tw:relative tw:flex-1", children: [
+          /* @__PURE__ */ e(
+            m,
+            {
+              className: "tw:rotate-90 tw:absolute tw:top-1 tw:left-1",
+              size: 16,
+              source: W
+            }
+          ),
+          /* @__PURE__ */ e(
+            m,
+            {
+              className: "tw:rotate-180 tw:absolute tw:top-1 tw:right-1",
+              size: 16,
+              source: W
+            }
+          ),
+          /* @__PURE__ */ e(
+            m,
+            {
+              className: "tw:-rotate-90 tw:absolute tw:bottom-1 tw:right-1",
+              size: 16,
+              source: W
+            }
+          ),
+          /* @__PURE__ */ e(
+            m,
+            {
+              className: "tw:rotate-0 tw:absolute tw:bottom-1 tw:left-1",
+              size: 16,
+              source: W
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "tw:col-span-6", children: /* @__PURE__ */ e(
+            N,
+            {
+              onChange: h,
+              selectOnFocus: !0,
+              name: "borderTopLeftRadius",
+              mode: "onBlur",
+              max: H,
+              className: "tw:text-center",
+              value: t?.borderTopLeftRadius ?? 0
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "tw:col-span-6", children: /* @__PURE__ */ e(
+            N,
+            {
+              onChange: h,
+              name: "borderTopRightRadius",
+              selectOnFocus: !0,
+              mode: "onBlur",
+              max: H,
+              className: "tw:text-center",
+              value: t?.borderTopRightRadius ?? 0
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "tw:col-span-12 tw:flex tw:justify-center", children: /* @__PURE__ */ e("div", { className: "tw:bg-ic-black-7s tw:p-1 tw:rounded-lg", children: /* @__PURE__ */ e(m, { size: 16, source: ne }) }) }),
+          /* @__PURE__ */ e("div", { className: "tw:col-span-6", children: /* @__PURE__ */ e(
+            N,
+            {
+              onChange: h,
+              name: "borderBottomLeftRadius",
+              selectOnFocus: !0,
+              mode: "onBlur",
+              max: H,
+              className: "tw:text-center",
+              value: t?.borderBottomLeftRadius ?? 0
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "tw:col-span-6", children: /* @__PURE__ */ e(
+            N,
+            {
+              onChange: h,
+              name: "borderBottomRightRadius",
+              selectOnFocus: !0,
+              mode: "onBlur",
+              max: H,
+              className: "tw:text-center",
+              value: t?.borderBottomRightRadius ?? 0
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ u("div", { className: "tw:flex tw:flex-col tw:justify-between", children: [
+          /* @__PURE__ */ e(
+            f,
+            {
+              onClick: C,
+              disabled: s,
+              value: JSON.stringify({}),
+              children: /* @__PURE__ */ e(
+                m,
+                {
+                  className: x("tw:text-ic-white-3s", {
+                    "tw:text-ic-white-6s": s
+                  }),
+                  source: Wt
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            f,
+            {
+              onClick: C,
+              disabled: c,
+              value: JSON.stringify({
+                borderBottomLeftRadius: 8,
+                borderBottomRightRadius: 8,
+                borderTopLeftRadius: 8,
+                borderTopRightRadius: 8
+              }),
+              children: /* @__PURE__ */ e(
+                m,
+                {
+                  className: x("tw:text-ic-white-3s", {
+                    "tw:text-ic-white-6s": c
+                  }),
+                  source: zt
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            f,
+            {
+              onClick: C,
+              disabled: a,
+              value: JSON.stringify({
+                borderBottomLeftRadius: H,
+                borderBottomRightRadius: H,
+                borderTopLeftRadius: H,
+                borderTopRightRadius: H
+              }),
+              children: /* @__PURE__ */ e(
+                m,
+                {
+                  className: x("tw:text-ic-white-3s", {
+                    "tw:text-ic-white-6s": a
+                  }),
+                  source: St
+                }
+              )
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] }) });
+}, 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"
+  }
+], Z1 = ({ value: t, onChange: n, responsive: o = !0 }) => /* @__PURE__ */ e(Be, { children: /* @__PURE__ */ e(b, { responsive: o, name: "Variant", children: /* @__PURE__ */ e(
+  A,
+  {
+    placement: "bottom-end",
+    onChange: (r) => {
+      n?.(r === "auto" ? void 0 : r);
+    },
+    className: "tw:w-1/2",
+    listProps: {
+      style: {
+        height: "auto"
+      }
+    },
+    value: t ?? "auto",
+    options: Pt
+  }
+) }) }), Ot = [
+  {
+    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"
+  }
+], R1 = ({ value: t, responsive: n, name: o, onChange: l }) => /* @__PURE__ */ e(b, { responsive: n, name: o ?? "Font weight", children: /* @__PURE__ */ e(
+  A,
+  {
+    onChange: (i) => {
+      l?.({
+        fontWeight: i === "auto" ? void 0 : i
+      });
+    },
+    value: t?.fontWeight ?? "auto",
+    options: Ot,
+    className: "tw:w-1/2",
+    listProps: {
+      style: {
+        height: "auto"
+      }
+    }
+  }
+) }), j1 = ({ value: t, name: n, onChange: o, availableTags: l }) => {
+  const r = l.map((i) => ({
+    value: i,
+    label: i
+  }));
+  return /* @__PURE__ */ e(b, { name: n ?? "HTML tag", children: /* @__PURE__ */ e(
+    A,
+    {
+      onChange: o,
+      value: t ?? null,
+      options: r,
+      className: "tw:w-1/2",
+      listProps: {
+        style: {
+          height: "auto"
+        }
+      }
+    }
+  ) });
+}, Ft = ["cover", "contain"], A1 = ({ name: t, responsive: n = !1, value: o, onChange: l }) => {
+  const r = (i) => {
+    l?.({
+      objectFit: i.currentTarget.value
+    });
+  };
+  return /* @__PURE__ */ e(b, { responsive: n, name: t ?? "Image scale", children: /* @__PURE__ */ e("div", { className: "tw:flex tw:items-center tw:gap-2", children: Ft.map((i) => {
+    const s = o?.objectFit === i;
+    return /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: r,
+        value: i,
+        className: x("tw:p-1.5 tw:border tw:rounded tw:border-ic-white-2s tw:text-ic-white-4s", {
+          "tw:text-ic-white-6s tw:border-ic-white-5s": s
+        }),
+        children: /* @__PURE__ */ u("div", { className: "tw:h-8 tw:w-12 tw:rounded tw:overflow-hidden tw:relative tw:flex tw:justify-center tw:items-center", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: x("tw:bg-ic-white-1s tw:flex tw:items-center tw:justify-center", {
+                "tw:w-8 tw:h-8": i === "contain",
+                "tw:w-full tw:h-full": i === "cover",
+                "tw:w-6 tw:h-6 tw:rounded-sm": i === "fill"
+              }),
+              children: /* @__PURE__ */ e(m, { source: xe })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: x(
+                "tw:absolute tw:inset-0 tw:border tw:rounded tw:pointer-events-none tw:border-ic-white-1s",
+                {
+                  "tw:border-ic-white-2s": s
+                }
+              )
+            }
+          )
+        ] })
+      },
+      i
+    );
+  }) }) });
+}, ke = ({
+  name: t,
+  responsive: n,
+  onChange: o,
+  value: l,
+  min: r = 0,
+  max: i = Number.MAX_SAFE_INTEGER,
+  adjustment: s
+}) => {
+  const a = Y(l) ? Number(l) : l, c = s?.minimumUnit ?? 1, h = s?.fallback ?? 0, C = (d) => {
+    const g = isNaN(d.target.valueAsNumber) ? void 0 : d.target.valueAsNumber;
+    o?.(g);
+  }, w = (d) => {
+    d.stopPropagation(), o?.(Math.min((a ?? h) + c, i));
+  }, p = (d) => {
+    d.stopPropagation(), o?.(Math.max((a ?? h) - c, r));
+  };
+  return /* @__PURE__ */ e(b, { responsive: n, name: t, children: /* @__PURE__ */ e(
+    N,
+    {
+      onChange: C,
+      mode: "onBlur",
+      className: "tw:text-center",
+      classes: { container: "tw:w-1/2" },
+      value: l ?? "",
+      prefix: /* @__PURE__ */ e(f, { disabled: he(l) && l <= r, onClick: p, children: /* @__PURE__ */ e(m, { source: Ae }) }),
+      suffix: /* @__PURE__ */ e(f, { onClick: w, children: /* @__PURE__ */ e(m, { source: ce }) })
+    }
+  ) });
+}, S1 = ({ name: t, responsive: n = !0, value: o, onChange: l }) => {
+  const r = (i) => {
+    l?.({
+      ...o,
+      columnGap: i
+    });
+  };
+  return /* @__PURE__ */ e(
+    ke,
+    {
+      name: t ?? "Column gap",
+      adjustment: {
+        minimumUnit: 2
+      },
+      responsive: n,
+      value: o?.columnGap,
+      onChange: r
+    }
+  );
+}, W1 = ({ name: t, responsive: n = !0, value: o, onChange: l }) => {
+  const r = (i) => {
+    l?.({
+      ...o,
+      rowGap: i
+    });
+  };
+  return /* @__PURE__ */ e(
+    ke,
+    {
+      adjustment: {
+        minimumUnit: 2
+      },
+      name: t ?? "Row gap",
+      responsive: n,
+      value: o?.rowGap,
+      onChange: r
+    }
+  );
+}, Dt = ({ onChange: t }) => /* @__PURE__ */ e(
+  Oe,
+  {
+    accept: {
+      svg: [".svg"]
+    },
+    multiple: !1,
+    onDrop: (o) => {
+      const l = o.at(0);
+      if (!l) return;
+      const r = new FileReader();
+      r.onload = (i) => {
+        const s = i.target?.result;
+        Y(s) && t?.(s);
+      }, r.readAsText(l);
+    },
+    children: () => /* @__PURE__ */ u("div", { className: "tw:aspect-video tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:border tw:border-ic-white-1s tw:hover:border-ic-white-2s tw:cursor-pointer tw:rounded-md", children: [
+      /* @__PURE__ */ e(m, { size: 40, source: be }),
+      /* @__PURE__ */ e("p", { className: "tw:text-xs", children: "Upload SVG file" })
+    ] })
+  }
+), z1 = ({ source: t, onChange: n, name: o }) => /* @__PURE__ */ e(b, { name: o ?? "Choose icon", children: /* @__PURE__ */ u(E, { placement: "right-start", children: [
+  /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(f, { className: "tw:bg-ic-white-1s", size: "28", children: /* @__PURE__ */ e(m, { size: 20, source: t ?? "" }) }) }),
+  /* @__PURE__ */ e(q, { children: /* @__PURE__ */ u("div", { className: "tw:flex tw:flex-col tw:gap-3", children: [
+    /* @__PURE__ */ e("h6", { className: "tw:text-sm tw:font-medium", children: "Choose icon" }),
+    /* @__PURE__ */ e("div", { className: "tw:w-80", children: /* @__PURE__ */ e(Dt, { onChange: n }) })
+  ] }) })
+] }) }), Ne = `<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>`, Le = `<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>`, O = '<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>', oe = `<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>`, Me = `<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>`, P1 = ({
+  name: t,
+  responsive: n = !0,
+  value: o,
+  onChange: l,
+  blacklist: r,
+  flexDirection: i = "row"
+}) => {
+  const s = (() => {
+    let c = [];
+    switch (i) {
+      case "row":
+        c = [
+          {
+            label: "Top",
+            value: "flex-start",
+            icon: Me
+          },
+          {
+            label: "Center",
+            value: "center",
+            icon: Le
+          },
+          {
+            label: "Bottom",
+            value: "flex-end",
+            icon: Ne
+          },
+          {
+            label: "Stretch",
+            value: "stretch",
+            icon: re
+          }
+        ];
+        break;
+      case "column":
+        c = [
+          {
+            label: "Left",
+            value: "flex-start",
+            icon: F
+          },
+          {
+            label: "Center",
+            value: "center",
+            icon: O
+          },
+          {
+            label: "Right",
+            value: "flex-end",
+            icon: D
+          },
+          {
+            label: "Stretch",
+            value: "stretch",
+            icon: oe
+          }
+        ];
+        break;
+    }
+    return r?.length && (c = c.filter((h) => !r.includes(h.value))), c;
+  })(), a = (c) => {
+    l?.({
+      alignItems: c
+    });
+  };
+  return /* @__PURE__ */ e(b, { responsive: n, name: t ?? "Align items", children: /* @__PURE__ */ e(V, { value: o?.alignItems, onSelectionChange: a, children: s.map((c) => /* @__PURE__ */ e(f, { value: c.value, children: /* @__PURE__ */ e(m, { source: c.icon }) }, c.value)) }) });
+}, O1 = ({
+  name: t,
+  responsive: n = !0,
+  value: o,
+  onChange: l,
+  direction: r = "row"
+}) => {
+  const i = (() => {
+    switch (r) {
+      case "row":
+        return [
+          {
+            label: "Top",
+            value: "flex-start",
+            icon: F
+          },
+          {
+            label: "Center",
+            value: "center",
+            icon: O
+          },
+          {
+            label: "Bottom",
+            value: "flex-end",
+            icon: D
+          },
+          {
+            label: "Space between",
+            value: "space-between",
+            icon: oe
+          }
+        ];
+      case "column":
+        return [
+          {
+            label: "Left",
+            value: "flex-start",
+            icon: F
+          },
+          {
+            label: "Center",
+            value: "center",
+            icon: O
+          },
+          {
+            label: "Right",
+            value: "flex-end",
+            icon: D
+          },
+          {
+            label: "Space between",
+            value: "space-between",
+            icon: re
+          }
+        ];
+      default:
+        return [];
+    }
+  })(), s = (a) => {
+    l?.({
+      justifyContent: a
+    });
+  };
+  return /* @__PURE__ */ e(b, { responsive: n, name: t ?? "Justify content", children: /* @__PURE__ */ e(V, { value: o?.justifyContent, onSelectionChange: s, children: i.map((a) => /* @__PURE__ */ e(f, { value: a.value, children: /* @__PURE__ */ e(m, { source: a.icon }) }, a.value)) }) });
+}, Et = (t) => {
+  const { main: n } = Re(t.value);
+  return /* @__PURE__ */ u("div", { className: "tw:flex tw:items-center tw:gap-2 tw:justify-between", children: [
+    t.label,
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "tw:rounded-full tw:w-4 tw:h-4",
+        style: {
+          backgroundColor: n
+        }
+      }
+    )
+  ] });
+}, F1 = (t) => /* @__PURE__ */ e(b, { name: "Color", children: /* @__PURE__ */ e(
+  A,
+  {
+    checkedIcon: /* @__PURE__ */ e(P, {}),
+    placement: "bottom-end",
+    optionLabel: Et,
+    options: lt,
+    className: "tw:w-1/2",
+    ...t
+  }
+) }), D1 = ({
+  value: t,
+  options: n,
+  onChange: o,
+  className: l
+}) => {
+  const [r, i] = L(!1), s = (g) => {
+    i(!0);
+  }, a = () => {
+    setTimeout(() => {
+      i(!1);
+    }, 100);
+  }, c = (g) => {
+    o?.(g);
+  }, h = (g) => {
+    const k = isNaN(g.target.valueAsNumber) ? void 0 : g.target.valueAsNumber;
+    c(k);
+  }, C = (g) => {
+    c(g.currentTarget.getAttribute("value"));
+  }, w = (g) => {
+    g.stopPropagation(), c(void 0);
+  }, p = he(t) ? t : void 0, d = Y(t) ? n?.find((g) => g.value === t)?.label ?? t : void 0;
+  return /* @__PURE__ */ u("div", { className: x("tw:relative", l), children: [
+    /* @__PURE__ */ e(
+      N,
+      {
+        classes: {
+          input: "text-center"
+        },
+        onFocus: s,
+        onBlur: a,
+        mode: "onBlur",
+        placeholder: d,
+        value: p ?? "",
+        onChange: h
+      }
+    ),
+    !!n?.length && /* @__PURE__ */ u(j, { open: r, placement: "bottom-start", children: [
+      /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-x-0 tw:top-full" }) }),
+      /* @__PURE__ */ e(Z, { children: n.map((g) => {
+        const k = g.value === t;
+        return /* @__PURE__ */ u(
+          R,
+          {
+            className: "tw:justify-between",
+            isActive: k,
+            onClick: C,
+            value: g.value,
+            children: [
+              g.label,
+              k && (g.closeable ?? !1) && /* @__PURE__ */ e(f, { onClick: w, size: "20", children: /* @__PURE__ */ e(m, { size: 16, source: T }) })
+            ]
+          },
+          g.value
+        );
+      }) })
+    ] })
+  ] });
+}, E1 = ({ propertyPath: t }) => {
+  const { nodeProps: n, setNodeProps: o } = et(), l = t ? we(n, t) : null, r = (i) => {
+    const s = {
+      ...l,
+      [i.target.name]: i.target.checked ? void 0 : !1
+    };
+    if (!t) {
+      o({});
+      return;
+    }
+    const a = {};
+    ue(a, t, s), o(a);
+  };
+  return /* @__PURE__ */ e("div", { className: "tw:flex tw:flex-col tw:gap-3", children: _.map((i) => /* @__PURE__ */ u("div", { className: "tw:flex tw:items-center tw:justify-between tw:gap-2", children: [
+    /* @__PURE__ */ e("p", { className: "tw:text-xs tw:text-ic-white-5s", children: i.name }),
+    /* @__PURE__ */ e(
+      de,
+      {
+        onChange: r,
+        name: i.size,
+        checked: l?.[i.size] ?? !0
+      }
+    )
+  ] }, i.size)) });
+}, U1 = ({ name: t, responsive: n = !0, value: o, onChange: l }) => {
+  const r = [
+    {
+      label: "Top",
+      value: "start",
+      icon: F
+    },
+    {
+      label: "Center",
+      value: "center",
+      icon: O
+    },
+    {
+      label: "Bottom",
+      value: "end",
+      icon: D
+    },
+    {
+      label: "Space between",
+      value: "stretch",
+      icon: oe
+    }
+  ], i = (s) => {
+    l?.({
+      justifyItems: s === "stretch" ? void 0 : s
+    });
+  };
+  return /* @__PURE__ */ e(b, { responsive: n, name: t ?? "Justify items", children: /* @__PURE__ */ e(V, { value: o?.justifyItems ?? "stretch", onSelectionChange: i, children: r.map((s) => /* @__PURE__ */ e(f, { value: s.value, children: /* @__PURE__ */ e(m, { source: s.icon }) }, s.value)) }) });
+}, q1 = ({ name: t, responsive: n = !0, value: o, onChange: l }) => {
+  const r = [
+    {
+      label: "Top",
+      value: "start",
+      icon: Me
+    },
+    {
+      label: "Center",
+      value: "center",
+      icon: Le
+    },
+    {
+      label: "Bottom",
+      value: "end",
+      icon: Ne
+    },
+    {
+      label: "Stretch",
+      value: "stretch",
+      icon: re
+    }
+  ], i = (s) => {
+    l?.({
+      alignItems: s
+    });
+  };
+  return /* @__PURE__ */ e(b, { responsive: n, name: t ?? "Align items", children: /* @__PURE__ */ e(V, { value: o?.alignItems ?? "stretch", onSelectionChange: i, children: r.map((s) => /* @__PURE__ */ e(f, { value: s.value, children: /* @__PURE__ */ e(m, { source: s.icon }) }, s.value)) }) });
+}, G1 = ({
+  suggestOptions: t,
+  responsive: n = !0,
+  name: o,
+  value: l,
+  onChange: r
+}) => {
+  const i = [
+    {
+      label: "Original",
+      value: "auto"
+      /* Auto */
+    },
+    ...t ?? [],
+    {
+      label: "Custom",
+      value: "custom"
+      /* Custom */
+    }
+  ], s = y(l?.aspectRatio) ? "auto" : i.find((v) => v.value === l?.aspectRatio)?.value ?? "custom", [a, c] = L(
+    s === "custom"
+    /* Custom */
+  ), h = (v) => {
+    v.target.select();
+  }, C = (v = "auto") => {
+    r?.({ aspectRatio: v === "auto" ? void 0 : v });
+  }, w = (v) => {
+    if (v === "custom") {
+      c(!0);
+      return;
+    }
+    c(!1), C(v);
+  }, p = l?.aspectRatio?.toString().split("/") ?? [], d = le(p.at(0)), g = le(p.at(1)), k = (v) => {
+    const M = isNaN(v.target.valueAsNumber) ? void 0 : v.target.valueAsNumber, S = {
+      x: d ?? M,
+      y: g ?? M,
+      [v.target.name]: M
+    }, He = y(S.x) || y(S.y) ? void 0 : `${S.x} / ${S.y}`;
+    C(He);
+  };
+  return /* @__PURE__ */ u("div", { className: "tw:flex tw:flex-col tw:gap-2", children: [
+    /* @__PURE__ */ e(b, { responsive: n, name: o ?? "Proportion", children: /* @__PURE__ */ e(
+      A,
+      {
+        value: a ? "custom" : s,
+        onChange: w,
+        options: i,
+        className: "tw:w-1/2"
+      }
+    ) }),
+    (s === "custom" || a) && /* @__PURE__ */ e("div", { className: "tw:flex tw:justify-end", children: /* @__PURE__ */ u("div", { className: "tw:flex tw:items-center tw:gap-0.5 tw:py-0.5 tw:bg-ic-white-1s tw:rounded-lg tw:px-2 tw:w-1/2", children: [
+      /* @__PURE__ */ e(
+        N,
+        {
+          name: "x",
+          onFocus: h,
+          classes: {
+            main: "bg-transparent px-1"
+          },
+          size: "28",
+          value: d,
+          onChange: k,
+          mode: "onBlur",
+          placeholder: "X",
+          className: "tw:text-center"
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: "tw:text-xs tw:text-ic-white-3s", children: "/" }),
+      /* @__PURE__ */ e(
+        N,
+        {
+          name: "y",
+          placeholder: "Y",
+          value: g,
+          mode: "onBlur",
+          onChange: k,
+          onFocus: h,
+          classes: {
+            main: "bg-transparent px-1"
+          },
+          size: "28",
+          className: "tw:text-center"
+        }
+      )
+    ] }) })
+  ] });
+}, J1 = ({ name: t, responsive: n = !0, value: o, onChange: l }) => {
+  const [r, i] = L(!1), s = (p) => {
+    const d = isNaN(p.target.valueAsNumber) ? void 0 : p.target.valueAsNumber;
+    l?.({
+      ...o,
+      [p.target.name]: d
+    });
+  }, a = (p) => {
+    p.target.select();
+  }, c = o?.paddingTop ?? 0, h = o?.paddingLeft ?? 0, C = o?.paddingRight ?? 0, w = o?.paddingBottom ?? 0;
+  return /* @__PURE__ */ e(b, { responsive: n, name: t ?? "Padding (px)", children: /* @__PURE__ */ u(E, { open: r, onOpenChange: i, placement: "right-start", children: [
+    /* @__PURE__ */ e(U, { children: /* @__PURE__ */ u(
+      "div",
+      {
+        className: x(
+          "tw:h-8 tw:bg-ic-white-1s tw:w-1/2 tw:rounded-lg tw:px-2 tw:flex tw:items-center tw:gap-2 tw:cursor-pointer",
+          {
+            "tw:bg-ic-black-7s": r
+          }
+        ),
+        children: [
+          /* @__PURE__ */ e("span", { className: "tw:text-xs tw:flex-1 tw:truncate", children: [c, h, C, w].join(", ") }),
+          /* @__PURE__ */ e(
+            m,
+            {
+              className: x("tw:transition-transform", {
+                "tw:-rotate-180": r
+              }),
+              source: G
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ u(q, { children: [
+      /* @__PURE__ */ u("div", { className: "tw:flex tw:items-center tw:justify-between tw:gap-2", children: [
+        /* @__PURE__ */ e("span", { className: "tw:font-medium", children: "Padding" }),
+        /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(m, { source: T }) }) })
+      ] }),
+      /* @__PURE__ */ e("hr", { className: "tw:border-ic-white-1s tw:my-3" }),
+      /* @__PURE__ */ u("div", { className: "tw:grid tw:grid-cols-3 tw:gap-2", style: { maxWidth: 256 }, children: [
+        /* @__PURE__ */ e("div", { className: "tw:col-start-2", children: /* @__PURE__ */ e(
+          N,
+          {
+            onFocus: a,
+            onChange: s,
+            mode: "onBlur",
+            autoComplete: "off",
+            name: "paddingTop",
+            value: c,
+            placeholder: "Top",
+            className: "tw:text-center"
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "tw:col-start-1", children: /* @__PURE__ */ e(
+          N,
+          {
+            onFocus: a,
+            onChange: s,
+            mode: "onBlur",
+            autoComplete: "off",
+            name: "paddingLeft",
+            value: h,
+            className: "tw:text-center",
+            placeholder: "Left"
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "tw:flex tw:items-center tw:justify-center", children: /* @__PURE__ */ e(m, { source: ne }) }),
+        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+          N,
+          {
+            onFocus: a,
+            onChange: s,
+            mode: "onBlur",
+            autoComplete: "off",
+            name: "paddingRight",
+            value: C,
+            className: "tw:text-center",
+            placeholder: "Right"
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "tw:col-start-2", children: /* @__PURE__ */ e(
+          N,
+          {
+            onFocus: a,
+            mode: "onBlur",
+            autoComplete: "off",
+            name: "paddingBottom",
+            value: w,
+            onChange: s,
+            className: "tw:text-center",
+            placeholder: "Bottom"
+          }
+        ) })
+      ] })
+    ] })
+  ] }) });
+}, _1 = ({ name: t, responsive: n = !0, value: o, onChange: l }) => /* @__PURE__ */ e(b, { responsive: n, name: t ?? "Order", children: /* @__PURE__ */ e("div", { className: "tw:w-1/2", children: /* @__PURE__ */ e(
+  N,
+  {
+    step: 1,
+    onFocus: (s) => {
+      s.target.select();
+    },
+    onChange: (s) => {
+      const a = isNaN(s.target.valueAsNumber) ? void 0 : s.target.valueAsNumber;
+      l?.({
+        order: a ?? 0
+      });
+    },
+    value: o?.order ?? 0,
+    className: "tw:text-center",
+    mode: "onBlur",
+    size: "32",
+    min: 0
+  }
+) }) }), $ = "auto", z = ({
+  name: t,
+  value: n,
+  onChange: o
+}) => {
+  const [l, r] = L(!1), i = [
+    {
+      label: "Auto",
+      value: $
+    }
+  ], s = () => {
+    setTimeout(() => {
+      r(!1);
+    }, 100);
+  }, a = (w) => {
+    r(!0), w.target.select();
+  }, c = (w) => {
+    const p = isNaN(w.target.valueAsNumber) ? void 0 : w.target.valueAsNumber;
+    o?.(t, p);
+  }, h = (w) => {
+    o?.(t, w.currentTarget.getAttribute("value") ?? void 0);
+  }, C = (w) => {
+    w.stopPropagation(), o?.(t);
+  };
+  return /* @__PURE__ */ u("div", { className: "tw:relative", children: [
+    /* @__PURE__ */ e(
+      N,
+      {
+        mode: "onBlur",
+        onFocus: a,
+        className: "tw:text-center",
+        autoComplete: "off",
+        fullWidth: !0,
+        placeholder: n === $ ? "Auto" : void 0,
+        value: n ?? 0,
+        onBlur: s,
+        name: t,
+        onChange: c
+      }
+    ),
+    /* @__PURE__ */ u(j, { open: l, placement: "bottom-start", children: [
+      /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e("div", { className: "tw:absolute tw:inset-x-0 tw:top-full" }) }),
+      /* @__PURE__ */ e(Z, { children: i.map((w) => {
+        const p = w.value === n;
+        return /* @__PURE__ */ u(
+          R,
+          {
+            onClick: h,
+            className: "tw:justify-between",
+            isActive: p,
+            value: w.value,
+            children: [
+              w.label,
+              p && /* @__PURE__ */ e(f, { size: "20", onClick: C, children: /* @__PURE__ */ e(m, { size: 16, source: T }) })
+            ]
+          },
+          w.value
+        );
+      }) })
+    ] })
+  ] });
+}, $1 = ({ name: t, responsive: n = !0, value: o, onChange: l }) => {
+  const [r, i] = L(!1), s = (w, p) => {
+    l?.({
+      ...o,
+      [w]: p
+    });
+  }, a = o?.marginTop ?? 0, c = o?.marginLeft ?? 0, h = o?.marginRight ?? 0, C = o?.marginBottom ?? 0;
+  return /* @__PURE__ */ e(b, { responsive: n, name: t ?? "Margin (px)", children: /* @__PURE__ */ u(E, { open: r, onOpenChange: i, placement: "right-start", children: [
+    /* @__PURE__ */ e(U, { children: /* @__PURE__ */ u(
+      "div",
+      {
+        className: x(
+          "tw:h-8 tw:bg-ic-white-1s tw:w-1/2 tw:rounded-lg tw:px-2 tw:flex tw:items-center tw:gap-2 tw:cursor-pointer",
+          {
+            "tw:bg-ic-black-7s": r
+          }
+        ),
+        children: [
+          /* @__PURE__ */ e("span", { className: "tw:text-xs tw:flex-1 tw:truncate", children: [a, c, h, C].map((w) => w === $ ? "Auto" : w).join(", ") }),
+          /* @__PURE__ */ e(
+            m,
+            {
+              className: x("tw:transition-transform", {
+                "tw:-rotate-180": r
+              }),
+              source: G
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ u(q, { children: [
+      /* @__PURE__ */ u("div", { className: "tw:flex tw:items-center tw:justify-between tw:gap-2", children: [
+        /* @__PURE__ */ e("span", { className: "tw:font-medium", children: "Margin" }),
+        /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(m, { source: T }) }) })
+      ] }),
+      /* @__PURE__ */ e("hr", { className: "tw:border-ic-white-1s tw:my-3" }),
+      /* @__PURE__ */ u("div", { className: "tw:grid tw:grid-cols-3 tw:gap-2", style: { maxWidth: 256 }, children: [
+        /* @__PURE__ */ e("div", { className: "tw:col-start-2", children: /* @__PURE__ */ e(z, { onChange: s, name: "marginTop", value: a }) }),
+        /* @__PURE__ */ e("div", { className: "tw:col-start-1", children: /* @__PURE__ */ e(z, { onChange: s, name: "marginLeft", value: c }) }),
+        /* @__PURE__ */ e("div", { className: "tw:flex tw:items-center tw:justify-center", children: /* @__PURE__ */ e(m, { source: ne }) }),
+        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(z, { onChange: s, name: "marginRight", value: h }) }),
+        /* @__PURE__ */ e("div", { className: "tw:col-start-2", children: /* @__PURE__ */ e(z, { onChange: s, name: "marginBottom", value: C }) })
+      ] })
+    ] })
+  ] }) });
+}, X1 = ({ name: t, responsive: n = !0, value: o, onChange: l }) => /* @__PURE__ */ e(b, { name: t ?? "Wrap", responsive: n, children: /* @__PURE__ */ e(de, { onChange: (i) => {
+  l?.({
+    flexWrap: i.target.checked ? "wrap" : void 0
+  });
+}, checked: o?.flexWrap === "wrap" }) }), Q1 = `<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>
+`, Y1 = ({ value: t, onChange: n, name: o }) => /* @__PURE__ */ e(b, { name: o ?? "Open in", children: /* @__PURE__ */ e(V, { value: t ?? "_self", onSelectionChange: n, children: [
+  {
+    label: "Current",
+    value: "_self"
+  },
+  {
+    label: "New tab",
+    value: "_blank"
+  }
+].map((r) => /* @__PURE__ */ e(X, { value: r.value, size: "28", children: r.label }, r.value)) }) });
+export {
+  Y1 as A,
+  V1 as B,
+  fe as C,
+  E1 as D,
+  f1 as E,
+  R1 as F,
+  q1 as G,
+  M1 as H,
+  dt as I,
+  O1 as J,
+  it as K,
+  Bt as L,
+  $1 as M,
+  ke as N,
+  A1 as O,
+  J1 as P,
+  ct as Q,
+  W1 as R,
+  B1 as S,
+  b as T,
+  wt as U,
+  L1 as W,
+  Q1 as a,
+  Z1 as b,
+  H1 as c,
+  k1 as d,
+  N1 as e,
+  G1 as f,
+  I1 as g,
+  y1 as h,
+  T1 as i,
+  F1 as j,
+  S1 as k,
+  P1 as l,
+  X1 as m,
+  U1 as n,
+  D1 as o,
+  _1 as p,
+  z1 as q,
+  j1 as r,
+  x1 as s,
+  Pt as t,
+  ut as u,
+  et as v,
+  me as w,
+  _ as x,
+  yt as y,
+  b1 as z
+};