@pagehub/sdk 0.1.5 → 0.1.7

package/dist/chunks/index-B-GJd039.js

@@ -0,0 +1,2875 @@
+import { jsxs as O, Fragment as Qe, jsx as t } from "react/jsx-runtime";
+import yt, { useState as z, useMemo as X, useRef as ee, useCallback as ie, useEffect as oe, useLayoutEffect as et } from "react";
+import { r as wt, a1 as Nt, b as kt, a2 as St, a3 as ue, a4 as Ct, P as ze, a5 as Tt, G as tt, W as at, C as rt, a6 as Lt, a7 as nt, a8 as st, f as De, a9 as He, aa as Ot, D as Pt, ab as Ue, ac as Ve, ad as At, ae as Mt, af as Et, ag as Be, ah as It, ai as zt, aj as Ht, ak as Dt, al as Ft, am as _t, an as $t, l as Rt, ao as Gt, ap as Wt, aq as Ut, ar as Vt, as as Bt, at as lt, au as Yt, av as Xt, aw as qt, ax as jt, o as ce, ay as it, az as Zt, aA as Kt, aB as Jt, u as Oe, V as Qt, E as ea, M as ta, g as aa, aC as ra, J as na, c as Ye } from "./index-C66dAl3Q.js";
+import { F as ot, u as ct } from "./FloatingPanel-DJP5Vhua.js";
+import ut from "react-dom";
+import { u as dt, A as Xe, a as sa, S as la } from "./AnchoredPopover-CckPTxXu.js";
+import { useEditor as Fe, useNode as ia } from "@craftjs/core";
+import { ROOT_NODE as Se } from "@craftjs/utils";
+const ye = {
+  // ── Typography (sourced from theme.typography[] Heading/Body via orchestrator) ──
+  headingFontFamily: { label: "Heading Font Family", category: "typography", type: "text" },
+  bodyFontFamily: { label: "Body Font Family", category: "typography", type: "text" },
+  headingFontWeight: { label: "Heading Font Weight", category: "typography", type: "text" },
+  bodyFontWeight: { label: "Body Font Weight", category: "typography", type: "text" },
+  // ── Spacing & Layout ──
+  contentWidth: {
+    label: "Content Width",
+    category: "spacing",
+    type: "dimension",
+    quickPicks: [
+      { value: "48rem", label: "Narrow" },
+      { value: "64rem", label: "XL" },
+      { value: "80rem", label: "2XL" },
+      { value: "96rem", label: "3XL" },
+      { value: "120rem", label: "4XL" },
+      { value: "100%", label: "Full" }
+    ]
+  },
+  containerPadding: {
+    label: "Page Gutter",
+    category: "spacing",
+    type: "text",
+    quickPicks: [
+      { value: "0.5rem 0.5rem", label: "Tight" },
+      { value: "1rem 1rem", label: "Small" },
+      { value: "1.5rem 1.5rem", label: "Medium" },
+      { value: "2rem 2rem", label: "Large" },
+      { value: "3rem 3rem", label: "XL" }
+    ]
+  },
+  sectionGap: {
+    label: "Section Gap",
+    category: "spacing",
+    type: "dimension",
+    quickPicks: [
+      { value: "0", label: "None" },
+      { value: "2rem", label: "Small" },
+      { value: "3rem", label: "Medium" },
+      { value: "4rem", label: "Large" },
+      { value: "6rem", label: "XL" },
+      { value: "8rem", label: "2XL" }
+    ]
+  },
+  containerGap: {
+    label: "Container Gap",
+    category: "spacing",
+    type: "dimension",
+    quickPicks: [
+      { value: "0.5rem", label: "Tight" },
+      { value: "1rem", label: "Small" },
+      { value: "1.5rem", label: "Medium" },
+      { value: "2rem", label: "Large" }
+    ]
+  },
+  buttonPadding: {
+    label: "Button Padding",
+    category: "spacing",
+    type: "text",
+    quickPicks: [
+      { value: "1rem 0.5rem", label: "Small" },
+      { value: "1.25rem 0.625rem", label: "Medium" },
+      { value: "1.5rem 0.75rem", label: "Large" },
+      { value: "2rem 1rem", label: "XL" }
+    ]
+  },
+  // ── Spatial Scale (clamp() values — text editor) ──
+  spaceXs: {
+    label: "Space XS",
+    category: "spacing",
+    type: "text",
+    quickPicks: [
+      { value: "clamp(0.25rem, 0.125rem + 0.4vw, 0.375rem)", label: "Tight" },
+      { value: "clamp(0.375rem, 0.25rem + 0.39vw, 0.5rem)", label: "Default" },
+      { value: "clamp(0.5rem, 0.375rem + 0.4vw, 0.625rem)", label: "Loose" }
+    ]
+  },
+  spaceSm: {
+    label: "Space SM",
+    category: "spacing",
+    type: "text",
+    quickPicks: [
+      { value: "clamp(0.5rem, 0.25rem + 0.75vw, 0.75rem)", label: "Tight" },
+      { value: "clamp(0.75rem, 0.5rem + 0.75vw, 1rem)", label: "Default" },
+      { value: "clamp(1rem, 0.75rem + 0.75vw, 1.25rem)", label: "Loose" }
+    ]
+  },
+  spaceMd: {
+    label: "Space MD",
+    category: "spacing",
+    type: "text",
+    quickPicks: [
+      { value: "clamp(1rem, 0.5rem + 1.5vw, 1.5rem)", label: "Tight" },
+      { value: "clamp(1.5rem, 1rem + 1.5vw, 2rem)", label: "Default" },
+      { value: "clamp(2rem, 1.5rem + 1.5vw, 2.5rem)", label: "Loose" }
+    ]
+  },
+  spaceLg: {
+    label: "Space LG",
+    category: "spacing",
+    type: "text",
+    quickPicks: [
+      { value: "clamp(2rem, 1rem + 3vw, 3rem)", label: "Tight" },
+      { value: "clamp(2.5rem, 1.25rem + 3.75vw, 4rem)", label: "Default" },
+      { value: "clamp(3rem, 1.5rem + 4.5vw, 5rem)", label: "Loose" }
+    ]
+  },
+  spaceXl: {
+    label: "Space XL",
+    category: "spacing",
+    type: "text",
+    quickPicks: [
+      { value: "clamp(2.5rem, 1.25rem + 3.75vw, 4rem)", label: "Tight" },
+      { value: "clamp(3.5rem, 1.75rem + 5.25vw, 6rem)", label: "Default" },
+      { value: "clamp(4.5rem, 2.25rem + 6.75vw, 8rem)", label: "Loose" }
+    ]
+  },
+  // ── Effects & Borders ──
+  radiusBox: {
+    label: "Radius Box",
+    category: "other",
+    type: "dimension",
+    quickPicks: [
+      { value: "0", label: "Square" },
+      { value: "0.25rem", label: "Small" },
+      { value: "0.5rem", label: "Default" },
+      { value: "0.75rem", label: "Medium" },
+      { value: "1rem", label: "Large" },
+      { value: "1.5rem", label: "XL" },
+      { value: "2rem", label: "2XL" },
+      { value: "9999px", label: "Full" }
+    ]
+  },
+  radiusField: {
+    label: "Radius Field",
+    category: "other",
+    type: "dimension",
+    quickPicks: [
+      { value: "0", label: "Square" },
+      { value: "0.25rem", label: "Small" },
+      { value: "0.375rem", label: "Default" },
+      { value: "0.5rem", label: "Medium" },
+      { value: "0.75rem", label: "Large" },
+      { value: "1rem", label: "XL" },
+      { value: "9999px", label: "Full" }
+    ]
+  },
+  radiusSelector: {
+    label: "Radius Selector",
+    category: "other",
+    type: "dimension",
+    quickPicks: [
+      { value: "0", label: "Square" },
+      { value: "0.25rem", label: "Small" },
+      { value: "0.5rem", label: "Default" },
+      { value: "0.75rem", label: "Medium" },
+      { value: "1rem", label: "Large" },
+      { value: "1.5rem", label: "XL" },
+      { value: "9999px", label: "Full" }
+    ]
+  },
+  border: {
+    label: "Border Width",
+    category: "other",
+    type: "dimension",
+    quickPicks: [
+      { value: "0", label: "None" },
+      { value: "1px", label: "Default" },
+      { value: "2px", label: "Medium" },
+      { value: "4px", label: "Thick" }
+    ]
+  },
+  shadowStyle: {
+    label: "Shadow Style",
+    category: "other",
+    type: "text",
+    quickPicks: [
+      { value: "none", label: "None" },
+      { value: "0 1px 2px 0 rgb(0 0 0 / 0.05)", label: "Small" },
+      { value: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", label: "Default" },
+      {
+        value: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        label: "Medium"
+      },
+      {
+        value: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+        label: "Large"
+      },
+      {
+        value: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+        label: "XL"
+      },
+      { value: "0 25px 50px -12px rgb(0 0 0 / 0.25)", label: "2XL" }
+    ]
+  },
+  depth: {
+    label: "Depth",
+    category: "other",
+    type: "number",
+    quickPicks: [
+      { value: "0", label: "Flat" },
+      { value: "1", label: "Raised" },
+      { value: "2", label: "Elevated" }
+    ]
+  },
+  noise: {
+    label: "Noise Texture",
+    category: "other",
+    type: "number",
+    quickPicks: [
+      { value: "0", label: "Off" },
+      { value: "1", label: "On" }
+    ]
+  },
+  // ── Sizing ──
+  sizeField: {
+    label: "Field Size",
+    category: "other",
+    type: "dimension",
+    quickPicks: [
+      { value: "0.2rem", label: "Small" },
+      { value: "0.25rem", label: "Default" },
+      { value: "0.3rem", label: "Medium" },
+      { value: "0.35rem", label: "Large" }
+    ]
+  },
+  sizeSelector: {
+    label: "Selector Size",
+    category: "other",
+    type: "dimension",
+    quickPicks: [
+      { value: "0.2rem", label: "Small" },
+      { value: "0.25rem", label: "Default" },
+      { value: "0.3rem", label: "Medium" },
+      { value: "0.35rem", label: "Large" }
+    ]
+  },
+  // ── Form Inputs ──
+  inputPadding: {
+    label: "Input Padding",
+    category: "spacing",
+    type: "text",
+    quickPicks: [
+      { value: "0.5rem 0.25rem", label: "Small" },
+      { value: "0.75rem 0.5rem", label: "Medium" },
+      { value: "1rem 0.5rem", label: "Large" },
+      { value: "1rem 0.75rem", label: "XL" }
+    ]
+  },
+  inputBorderColor: { label: "Input Border", category: "colors", type: "color" },
+  inputBgColor: { label: "Input Background", category: "colors", type: "color" },
+  inputTextColor: { label: "Input Text", category: "colors", type: "color" },
+  inputPlaceholderColor: { label: "Input Placeholder", category: "colors", type: "color" },
+  inputFocusRing: {
+    label: "Input Focus Ring",
+    category: "other",
+    type: "dimension",
+    quickPicks: [
+      { value: "0", label: "None" },
+      { value: "1px", label: "1px" },
+      { value: "2px", label: "2px" },
+      { value: "3px", label: "3px" },
+      { value: "4px", label: "4px" }
+    ]
+  },
+  inputFocusRingColor: { label: "Input Focus Ring Color", category: "colors", type: "color" },
+  // ── Links ──
+  linkColor: { label: "Link Color", category: "colors", type: "color" },
+  linkHoverColor: { label: "Link Hover Color", category: "colors", type: "color" },
+  linkUnderline: {
+    label: "Link Underline",
+    category: "other",
+    type: "text",
+    quickPicks: [
+      { value: "no-underline", label: "None" },
+      { value: "underline", label: "Always" },
+      { value: "hover:underline", label: "On Hover" }
+    ]
+  },
+  linkUnderlineOffset: {
+    label: "Underline Offset",
+    category: "other",
+    type: "text",
+    quickPicks: [
+      { value: "underline-offset-auto", label: "Auto" },
+      { value: "underline-offset-1", label: "1px" },
+      { value: "underline-offset-2", label: "2px" },
+      { value: "underline-offset-4", label: "4px" },
+      { value: "underline-offset-8", label: "8px" }
+    ]
+  }
+}, oa = /* @__PURE__ */ new Set(["spacingDensity"]);
+function mt(e) {
+  if (!e) return "text";
+  const a = e.trim();
+  return /^(#|oklch\(|rgba?\(|hsla?\(|hsl\()/i.test(a) ? "color" : /^-?\d+(\.\d+)?$/.test(a) ? "number" : /^-?\d+(\.\d+)?(px|rem|em|%|vh|vw|vmin|vmax)$/.test(a) ? "dimension" : "text";
+}
+function ca(e) {
+  switch (e) {
+    case "color":
+      return "colors";
+    case "dimension":
+      return "spacing";
+    case "number":
+    case "text":
+      return "other";
+  }
+}
+function qe(e) {
+  return `--${e.replace(/([A-Z])/g, "-$1").replace(/\s+/g, "-").toLowerCase().replace(/^-/, "")}`;
+}
+const je = {
+  100: "font-thin",
+  200: "font-extralight",
+  300: "font-light",
+  400: "font-normal",
+  500: "font-medium",
+  600: "font-semibold",
+  700: "font-bold",
+  800: "font-extrabold",
+  900: "font-black"
+};
+function Ze(e) {
+  return e.replace(/([A-Z])/g, "-$1").replace(/\s+/g, "-").toLowerCase().replace(/^-/, "");
+}
+function _e() {
+  const e = Fe((a) => {
+    var c;
+    const s = a.nodes[Se], l = wt(((c = s == null ? void 0 : s.data) == null ? void 0 : c.props) || {}), i = l.palette, d = l.typography || [], u = l.styleGuide, o = l.styleGuideMeta || {}, n = [];
+    (i.length > 0 ? i : Nt).forEach((r) => {
+      if (r != null && r.name && (r != null && r.color)) {
+        const b = Ze(r.name);
+        n.push({
+          name: r.name,
+          varName: `--${b}`,
+          value: kt(r.color, "").backgroundColor || r.color,
+          category: "palette",
+          label: `${r.name} (Palette)`,
+          key: r.name,
+          source: "palette"
+        });
+      }
+    }), d.forEach((r) => {
+      if (!(r != null && r.name)) return;
+      const b = Ze(r.name);
+      n.push({
+        name: `${r.name} Font Family`,
+        varName: `--${b}-font-family`,
+        value: r.fontFamily || "Inter",
+        category: "typography",
+        label: `${r.name} Font Family`,
+        key: r.name,
+        source: "typography"
+      }), n.push({
+        name: `${r.name} Font Size`,
+        varName: `--${b}-font-size`,
+        value: r.fontSize || "1rem",
+        category: "typography",
+        label: `${r.name} Font Size`,
+        key: r.name,
+        source: "typography"
+      });
+      let h = r.fontWeight || "font-normal";
+      je[h] && (h = je[h]), n.push({
+        name: `${r.name} Font Weight`,
+        varName: `--${b}-font-weight`,
+        value: h,
+        category: "typography",
+        label: `${r.name} Font Weight`,
+        key: r.name,
+        source: "typography"
+      }), n.push({
+        name: `${r.name} Line Height`,
+        varName: `--${b}-line-height`,
+        value: r.lineHeight || "1.5",
+        category: "typography",
+        label: `${r.name} Line Height`,
+        key: r.name,
+        source: "typography"
+      }), n.push({
+        name: `${r.name} Letter Spacing`,
+        varName: `--${b}-letter-spacing`,
+        value: r.letterSpacing || "normal",
+        category: "typography",
+        label: `${r.name} Letter Spacing`,
+        key: r.name,
+        source: "typography"
+      }), n.push({
+        name: `${r.name} Text Transform`,
+        varName: `--${b}-text-transform`,
+        value: r.textTransform || "none",
+        category: "typography",
+        label: `${r.name} Text Transform`,
+        key: r.name,
+        source: "typography"
+      });
+    });
+    const p = { ...St, ...u };
+    return Object.entries(p).forEach(([r, b]) => {
+      var P;
+      if (b == null || b === "" || oa.has(r)) return;
+      const h = ye[r], S = o[r];
+      if (!h || (S == null || S.custom), h)
+        n.push({
+          name: r,
+          varName: qe(r),
+          value: String(b),
+          category: h.category,
+          label: h.label,
+          custom: (S == null ? void 0 : S.custom) === !0,
+          key: r,
+          source: "styleGuide"
+        });
+      else {
+        const I = mt(String(b)), L = ((P = S == null ? void 0 : S.appliesTo) == null ? void 0 : P[0]) ?? ca(I), H = r.replace(/([A-Z])/g, " $1").replace(/^./, (W) => W.toUpperCase()).trim();
+        n.push({
+          name: r,
+          varName: qe(r),
+          value: String(b),
+          category: L,
+          label: `${H} (Custom)`,
+          custom: !0,
+          key: r,
+          source: "styleGuide"
+        });
+      }
+    }), n;
+  });
+  return Array.isArray(e) ? e : e && typeof e == "object" ? Object.keys(e).filter((a) => !isNaN(Number(a))).map((a) => e[a]).filter((a) => a && typeof a == "object" && "varName" in a) : [];
+}
+function ua({
+  designVars: e,
+  relevantCategories: a,
+  tailwindKey: s,
+  currentValue: l,
+  onSelect: i,
+  onEdit: d,
+  onCreate: u
+}) {
+  const [o, n] = z(""), g = X(() => e.filter((c) => {
+    if (a && !a.includes(c.category)) return !1;
+    if (!o) return !0;
+    const r = o.toLowerCase();
+    return c.label.toLowerCase().includes(r) || c.varName.toLowerCase().includes(r) || c.name.toLowerCase().includes(r);
+  }), [e, a, o]), p = (c) => s === "fontFamily" ? `font-(${c.varName})` : `var(${c.varName})`;
+  return /* @__PURE__ */ O(Qe, { children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        role: "presentation",
+        className: "border-base-300 bg-base-200 shrink-0 border-b p-2",
+        onMouseDown: (c) => c.stopPropagation(),
+        children: /* @__PURE__ */ t(
+          "input",
+          {
+            type: "text",
+            value: o,
+            onChange: (c) => n(c.target.value),
+            placeholder: "Search variables…",
+            className: "input-plain w-full cursor-text py-0 text-xs",
+            autoFocus: !0,
+            ...ue
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(Ct, { className: "ph-select-item-host min-h-0 flex-1", children: g.length === 0 ? /* @__PURE__ */ t("div", { className: "text-neutral-content px-3 py-6 text-center text-xs", children: "No variables found" }) : g.map((c) => {
+      const r = p(c), b = l === r, h = c.source === "styleGuide";
+      return /* @__PURE__ */ O(
+        "div",
+        {
+          className: `group ph-select-item gap-2 text-xs ${b ? "bg-primary text-primary-content font-semibold" : ""}`,
+          children: [
+            /* @__PURE__ */ O(
+              "button",
+              {
+                type: "button",
+                onClick: () => i(r),
+                className: "flex min-w-0 flex-1 items-center gap-2 text-left",
+                children: [
+                  /* @__PURE__ */ t(
+                    "div",
+                    {
+                      className: "border-base-300 size-3 shrink-0 rounded border",
+                      style: {
+                        backgroundColor: c.category === "palette" ? c.value : "transparent"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ t("span", { className: "flex-1 truncate font-medium", children: c.label })
+                ]
+              }
+            ),
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: `text-neutral-content shrink-0 ${h ? "group-hover:hidden" : ""}`,
+                children: c.varName
+              }
+            ),
+            h && /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => d(c),
+                "data-tooltip-id": ze,
+                "data-tooltip-content": "Edit token",
+                className: "text-neutral-content hover:text-base-content hidden size-5 shrink-0 items-center justify-center rounded transition-colors group-hover:flex",
+                "aria-label": `Edit ${c.label}`,
+                children: /* @__PURE__ */ t(Tt, { className: "size-3.5", "aria-hidden": !0 })
+              }
+            )
+          ]
+        },
+        c.varName
+      );
+    }) }),
+    /* @__PURE__ */ t("div", { className: "border-base-300 bg-base-200 shrink-0 border-t p-2", children: /* @__PURE__ */ O(
+      "button",
+      {
+        type: "button",
+        onClick: u,
+        className: "bg-primary text-primary-content hover:bg-primary/90 flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+        children: [
+          /* @__PURE__ */ t(tt, { className: "size-3.5", "aria-hidden": !0 }),
+          "New Token"
+        ]
+      }
+    ) })
+  ] });
+}
+const da = 320, ma = [
+  { id: "calc", label: "calc()", example: "calc(100% - 20px)" },
+  { id: "clamp", label: "clamp()", example: "clamp(1rem, 5vw, 3rem)" },
+  { id: "min", label: "min()", example: "min(50vw, 500px)" },
+  { id: "max", label: "max()", example: "max(50vw, 300px)" },
+  { id: "var", label: "var()", example: "var(--primary)" }
+];
+function pa(e) {
+  return e.startsWith("clamp(") ? "clamp" : e.startsWith("min(") ? "min" : e.startsWith("max(") ? "max" : e.startsWith("var(") ? "var" : "calc";
+}
+function Pe(e) {
+  const a = e.match(/^(?:clamp|min|max)\((.+)\)$/);
+  return a ? a[1].split(",").map((s) => s.trim()) : [];
+}
+function ha(e, a) {
+  if (typeof window > "u" || !e) return;
+  const s = e.getBoundingClientRect(), l = Math.min(Math.max(8, s.left), Math.max(8, window.innerWidth - a - 8)), i = Math.max(8, s.bottom + 6);
+  return { x: l, y: i };
+}
+function fa({ value: e, onSave: a, onClose: s, anchorEl: l }) {
+  const [i, d] = z(() => pa(e)), [u, o] = z(e), n = X(() => Pe(e), [e]), g = e.startsWith("clamp(") && n.length === 3, p = (e.startsWith("min(") || e.startsWith("max(")) && n.length === 2, [c, r] = z(
+    g || p ? n[0] : ""
+  ), [b, h] = z(g ? n[1] : ""), [S, P] = z(
+    g ? n[2] : p ? n[1] : ""
+  ), I = X(
+    () => ha(l, da),
+    [l]
+  ), L = (k, N) => {
+    if (d(k), k === "clamp") {
+      const x = Pe(u);
+      x.length === 3 ? (r(x[0]), h(x[1]), P(x[2])) : !c && !b && !S && (r("1rem"), h("5vw"), P("3rem"));
+    } else if (k === "min" || k === "max") {
+      const x = Pe(u);
+      x.length === 2 ? (r(x[0]), P(x[1])) : !c && !S && (r("50vw"), P(k === "min" ? "500px" : "300px"));
+    } else u || o(N);
+  }, H = () => i === "clamp" ? `clamp(${c}, ${b}, ${S})` : i === "min" || i === "max" ? `${i}(${c}, ${S})` : u, W = () => a(H()), T = H();
+  return /* @__PURE__ */ t(
+    ot,
+    {
+      isOpen: !0,
+      onClose: s,
+      title: "CSS Function",
+      storageKey: "calc-dialog",
+      minWidth: 280,
+      maxWidth: 520,
+      maxHeight: Math.round(typeof window < "u" ? window.innerHeight * 0.8 : 520),
+      initialPosition: I,
+      zIndex: at,
+      scrollable: !0,
+      children: /* @__PURE__ */ O("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ t("div", { className: "bg-neutral flex gap-0.5 rounded-md p-0.5", children: ma.map((k) => /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => L(k.id, k.example),
+            className: `flex-1 rounded px-2 py-1 font-mono text-[11px] transition-colors ${i === k.id ? "bg-base-100 text-base-content shadow-sm" : "text-neutral-content hover:text-base-content"}`,
+            children: k.label
+          },
+          k.id
+        )) }),
+        i === "clamp" ? /* @__PURE__ */ O("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ t(
+            ge,
+            {
+              label: "Min",
+              value: c,
+              onChange: r,
+              placeholder: "1rem",
+              autoFocus: !0
+            }
+          ),
+          /* @__PURE__ */ t(
+            ge,
+            {
+              label: "Preferred",
+              value: b,
+              onChange: h,
+              placeholder: "5vw"
+            }
+          ),
+          /* @__PURE__ */ t(ge, { label: "Max", value: S, onChange: P, placeholder: "3rem" })
+        ] }) : i === "min" || i === "max" ? /* @__PURE__ */ O("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ t(
+            ge,
+            {
+              label: "Value A",
+              value: c,
+              onChange: r,
+              placeholder: "50vw",
+              autoFocus: !0
+            }
+          ),
+          /* @__PURE__ */ t(
+            ge,
+            {
+              label: "Value B",
+              value: S,
+              onChange: P,
+              placeholder: i === "min" ? "500px" : "300px"
+            }
+          )
+        ] }) : /* @__PURE__ */ O("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ t(
+            "textarea",
+            {
+              value: u,
+              onChange: (k) => o(k.target.value),
+              placeholder: i === "var" ? "e.g. var(--primary)" : "e.g. calc(100% - 20px)",
+              className: "border-base-300 bg-base-200 text-base-content placeholder:text-neutral-content focus:border-primary w-full rounded-md border px-2 py-1.5 font-mono text-xs outline-none focus:ring-0",
+              rows: 4,
+              autoFocus: !0,
+              ...ue
+            }
+          ),
+          /* @__PURE__ */ t("p", { className: "text-neutral-content text-[10px] leading-snug", children: "Examples: calc(100% - 20px), clamp(1rem, 5vw, 3rem), min(50vw, 500px)" })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "bg-neutral text-neutral-content overflow-x-auto rounded-md px-2 py-1.5 font-mono text-[11px]", children: T || "—" }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: W,
+            className: "btn btn-primary btn-sm w-full font-semibold",
+            children: "Apply"
+          }
+        )
+      ] })
+    }
+  );
+}
+function ge({
+  label: e,
+  value: a,
+  onChange: s,
+  placeholder: l,
+  autoFocus: i
+}) {
+  return /* @__PURE__ */ t(rt, { label: e, children: /* @__PURE__ */ t(
+    "input",
+    {
+      type: "text",
+      value: a,
+      onChange: (d) => s(d.target.value),
+      placeholder: l,
+      autoFocus: i,
+      className: "h-full w-full bg-transparent px-1 font-mono text-xs outline-none",
+      ...ue
+    }
+  ) });
+}
+function ba(e) {
+  switch (e) {
+    case "calc":
+      return "Formula (calc)";
+    case "var":
+      return "Design token / variable";
+    case "tailwind":
+      return "Tailwind class";
+    case "px":
+      return "Pixels (px)";
+    case "em":
+      return "Relative to font size (em)";
+    case "rem":
+      return "Relative to root font size (rem)";
+    case "%":
+      return "Percentage (%)";
+    case "vh":
+      return "Viewport height (vh)";
+    case "vw":
+      return "Viewport width (vw)";
+    case "vmin":
+      return "Viewport minimum (vmin)";
+    case "vmax":
+      return "Viewport maximum (vmax)";
+    default:
+      return String(e);
+  }
+}
+function ga(e) {
+  const a = e % 3;
+  return a === 0 ? "left" : a === 2 ? "right" : "bottom";
+}
+const pt = yt.forwardRef(
+  ({ types: e, selectedType: a, onTypeChange: s, onOpenChange: l }, i) => {
+    var W;
+    const [d, u] = z(!1), o = ct(), n = o != null ? Math.max(nt, o + 10) : Lt, g = ee(null), p = ee(null), c = ie(() => {
+      g.current && (clearTimeout(g.current), g.current = null);
+    }, []), r = ie(() => {
+      p.current && (clearTimeout(p.current), p.current = null);
+    }, []), b = ie(() => {
+      r(), c(), g.current = setTimeout(() => {
+        u(!0), g.current = null;
+      }, 400);
+    }, [r, c]), h = ie(() => {
+      c(), r(), p.current = setTimeout(() => {
+        u(!1), p.current = null;
+      }, 280);
+    }, [r, c]);
+    oe(
+      () => () => {
+        c(), r();
+      },
+      [c, r]
+    ), oe(() => {
+      l == null || l(d);
+    }, [d, l]);
+    const S = ee(null), P = ie(
+      (T) => {
+        S.current = T, typeof i == "function" ? i(T) : i && (i.current = T);
+      },
+      [i]
+    ), I = dt({
+      open: d,
+      placement: "bottom-end",
+      mainAxisOffset: 4,
+      maxHeightCeiling: 300,
+      maxHeightMin: 0,
+      dismiss: {
+        onDismiss: () => u(!1)
+      }
+    }), L = ie(
+      (T) => {
+        P(T), I.refs.setReference(T);
+      },
+      [P, I.refs]
+    );
+    et(() => {
+      d && I.update();
+    }, [d]);
+    const H = ((W = e.find((T) => T.id === a)) == null ? void 0 : W.label) || "?";
+    return /* @__PURE__ */ O(Qe, { children: [
+      /* @__PURE__ */ t(
+        "div",
+        {
+          ref: L,
+          className: "relative",
+          onMouseEnter: b,
+          onMouseLeave: h,
+          children: /* @__PURE__ */ t("div", { className: "bg-base-200 flex h-5 items-center gap-0 rounded-md", children: /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: (T) => {
+                T.stopPropagation(), u(!d);
+              },
+              className: "text-neutral-content hover:text-base-content flex min-w-5 items-center justify-center p-0 text-[9px] font-medium",
+              ...d ? {} : {
+                "data-tooltip-id": ze,
+                "data-tooltip-content": "Change type",
+                "data-tooltip-place": "bottom"
+              },
+              children: H
+            }
+          ) })
+        }
+      ),
+      d && ut.createPortal(
+        /* @__PURE__ */ t(
+          "div",
+          {
+            "data-type-selector-dropdown": !0,
+            ref: I.refs.setFloating,
+            style: {
+              ...I.floatingStyles,
+              zIndex: n
+            },
+            className: "pagehub-sdk-root scrollbar-light ph-panel-soft pointer-events-auto grid min-w-32 grid-cols-3 gap-1 overflow-hidden p-0.5",
+            onMouseEnter: b,
+            onMouseLeave: h,
+            children: e.map((T, k) => /* @__PURE__ */ t(
+              "button",
+              {
+                onClick: () => {
+                  s(T.id), u(!1);
+                },
+                className: `hover:bg-neutral flex w-full items-center justify-center rounded-md px-3 py-1.5 text-xs ${a === T.id ? "bg-neutral font-semibold" : ""}`,
+                "data-tooltip-id": ze,
+                "data-tooltip-content": ba(T.id),
+                "data-tooltip-place": ga(k),
+                children: T.label
+              },
+              T.id
+            ))
+          }
+        ),
+        document.querySelector(".pagehub-sdk-root") || document.body
+      )
+    ] });
+  }
+);
+pt.displayName = "TypeSelector";
+const xa = [
+  "w-auto shrink-0 min-w-14",
+  "w-auto shrink-0 min-w-14",
+  "min-w-0 flex-1"
+], xe = {
+  layout: "left-right",
+  columns: {
+    count: 3,
+    widths: [...xa]
+  },
+  leftSection: {
+    title: "",
+    groups: ["named"],
+    showHints: !0,
+    hintType: "pixel"
+  },
+  middleSection: {
+    title: "",
+    groups: ["numeric"],
+    showHints: !0,
+    hintType: "pixel"
+  },
+  rightSection: {
+    title: "",
+    groups: ["fractions"],
+    showHints: !0,
+    hintType: "percentage"
+  }
+}, se = ["w-auto shrink-0 min-w-11", "min-w-0 flex-1"], V = {
+  layout: "left-right",
+  columns: {
+    count: 2,
+    widths: [...se]
+  },
+  leftSection: {
+    title: "",
+    groups: ["numeric"],
+    showHints: !1,
+    disableSubgroups: !0
+  },
+  rightSection: {
+    title: "",
+    groups: ["named", "fractions", "other"],
+    showHints: !1
+  }
+}, Ae = {
+  layout: "left-right",
+  columns: {
+    count: 2,
+    widths: [...se]
+  },
+  leftSection: {
+    title: "",
+    groups: ["numeric"],
+    showHints: !1
+  },
+  rightSection: {
+    title: "",
+    groups: ["named", "fractions", "other"],
+    showHints: !1
+  }
+}, pe = {
+  layout: "left-right",
+  columns: {
+    count: 2,
+    widths: [...se]
+  },
+  leftSection: {
+    title: "",
+    groups: ["named"],
+    showHints: !1
+  },
+  rightSection: {
+    title: "",
+    groups: ["other"],
+    showHints: !1
+  }
+}, ve = {
+  layout: "left-right",
+  columns: {
+    count: 2,
+    widths: [...se]
+  },
+  leftSection: {
+    title: "",
+    groups: ["tokens", "named"],
+    showHints: !0,
+    hintType: "pixel"
+  },
+  rightSection: {
+    title: "",
+    groups: ["numeric"],
+    showHints: !0,
+    hintType: "pixel"
+  }
+}, Me = {
+  layout: "stacked",
+  stackedOrder: ["named"],
+  columns: {
+    count: 2,
+    widths: ["w-full", "w-0"]
+  },
+  leftSection: {
+    title: "",
+    groups: ["named"],
+    showHints: !1
+  }
+}, Ke = {
+  layout: "left-right",
+  columns: {
+    count: 2,
+    widths: [...se]
+  },
+  leftSection: {
+    title: "",
+    groups: ["numeric"],
+    showHints: !0,
+    hintType: "ms",
+    disableSubgroups: !0
+  },
+  rightSection: {
+    title: "",
+    groups: ["named", "other"],
+    showHints: !1
+  }
+}, K = {
+  layout: "left-right",
+  columns: {
+    count: 2,
+    widths: ["w-full", "w-0"]
+  },
+  leftSection: {
+    title: "",
+    groups: ["named", "other"],
+    showHints: !1
+  }
+}, Ee = {
+  layout: "left-right",
+  columns: {
+    count: 2,
+    widths: [...se]
+  },
+  leftSection: {
+    title: "",
+    groups: ["named", "other"],
+    showHints: !1
+  },
+  rightSection: {
+    title: "",
+    groups: ["numeric"],
+    showHints: !0,
+    hintType: "pixel"
+  }
+}, Ne = {
+  // ========== SIZING PROPERTIES (with fractions) ==========
+  width: xe,
+  height: xe,
+  maxWidth: xe,
+  minHeight: xe,
+  size: xe,
+  // ========== SPACING PROPERTIES (no fractions) ==========
+  margin: ve,
+  padding: ve,
+  gap: ve,
+  gapX: ve,
+  gapY: ve,
+  ringWidth: Ee,
+  ringOffsetWidth: Ee,
+  outlineWidth: Ee,
+  // ========== BORDER & SHADOW PROPERTIES ==========
+  radius: {
+    layout: "left-right",
+    columns: {
+      count: 2,
+      widths: [...se]
+    },
+    leftSection: {
+      title: "",
+      groups: ["named"],
+      showHints: !1
+    },
+    rightSection: {
+      title: "",
+      // sm/md/lg/xl/2xl/3xl land in "other" (not the numeric bucket); include both columns
+      groups: ["numeric", "other"],
+      showHints: !1
+    }
+  },
+  border: {
+    layout: "left-right",
+    columns: {
+      count: 2,
+      widths: [...se]
+    },
+    leftSection: {
+      title: "",
+      groups: ["named"],
+      showHints: !1
+    },
+    rightSection: {
+      title: "",
+      groups: ["numeric"],
+      showHints: !0,
+      hintType: "pixel"
+    }
+  },
+  shadow: {
+    layout: "left-right",
+    columns: {
+      count: 2,
+      widths: ["w-full", "w-0"]
+    },
+    leftSection: {
+      title: "",
+      groups: ["named", "other"],
+      showHints: !1,
+      showPreview: "shadow"
+    }
+  },
+  borderStyle: K,
+  // ========== OPACITY ==========
+  opacity: {
+    layout: "left-right",
+    columns: {
+      count: 2,
+      widths: ["w-full", "w-0"]
+    },
+    leftSection: {
+      title: "",
+      groups: ["numeric"],
+      showHints: !0,
+      hintType: "percentage",
+      disableSubgroups: !0
+    }
+  },
+  bgOpacity: {
+    layout: "left-right",
+    columns: {
+      count: 2,
+      widths: [...se]
+    },
+    leftSection: {
+      title: "",
+      groups: ["named"],
+      showHints: !0,
+      hintType: "percentage"
+    },
+    rightSection: {
+      title: "",
+      groups: ["numeric"],
+      showHints: !0,
+      hintType: "percentage",
+      disableSubgroups: !0
+    }
+  },
+  // ========== LAYOUT & DISPLAY ==========
+  display: K,
+  position: K,
+  cursor: {
+    layout: "left-right",
+    columns: {
+      count: 2,
+      widths: [...se]
+    },
+    leftSection: {
+      title: "",
+      groups: ["named"],
+      showHints: !1,
+      showPreview: "cursor"
+    },
+    rightSection: {
+      title: "",
+      groups: ["other"],
+      showHints: !1,
+      showPreview: "cursor"
+    }
+  },
+  // Like shadow: most overflow-* utilities bucket to "other" (hidden, scroll, x/y); only a few
+  // keywords match "named" (e.g. auto). COMMON_NAMED_ONLY_LAYOUT hid the whole "other" column.
+  overflow: {
+    layout: "left-right",
+    columns: {
+      count: 2,
+      widths: ["w-full", "w-0"]
+    },
+    leftSection: {
+      title: "",
+      groups: ["named", "other"],
+      showHints: !1
+    }
+  },
+  scrollBehavior: K,
+  scrollSnapType: pe,
+  scrollSnapAlign: pe,
+  scrollSnapStop: pe,
+  overscrollBehavior: pe,
+  overscrollBehaviorX: pe,
+  overscrollBehaviorY: pe,
+  // ========== FLEXBOX ==========
+  flexDirection: Me,
+  alignItems: Me,
+  justifyContent: Me,
+  // ========== TYPOGRAPHY ==========
+  // Most typography scale values (text-xs / text-sm / text-base / font-bold / …)
+  // bucket into `other` after the prefix is stripped, so we need both groups.
+  fontSize: K,
+  fontWeight: K,
+  textAlign: K,
+  // ========== CLASS EFFECTS (Tailwind transition / transform / filter / backdrop) ==========
+  transitionProperty: K,
+  duration: Ke,
+  delay: Ke,
+  ease: K,
+  twAnimate: K,
+  scale: V,
+  scaleX: V,
+  scaleY: V,
+  rotate: Ae,
+  translateX: Ae,
+  translateY: Ae,
+  skewX: V,
+  skewY: V,
+  transformOrigin: K,
+  twTransform: K,
+  blur: V,
+  brightness: V,
+  contrast: V,
+  grayscale: V,
+  hueRotate: V,
+  invert: V,
+  saturate: V,
+  sepia: V,
+  willChange: K,
+  backdropBlur: V,
+  backdropOpacity: V,
+  backdropBrightness: V,
+  backdropContrast: V,
+  backdropGrayscale: V,
+  backdropHueRotate: V,
+  backdropInvert: V,
+  backdropSaturate: V,
+  backdropSepia: V
+}, va = {
+  // Width & Height
+  w: "width",
+  h: "height",
+  size: "size",
+  // Margin
+  m: "margin",
+  mt: "margin",
+  mb: "margin",
+  ml: "margin",
+  mr: "margin",
+  mx: "margin",
+  my: "margin",
+  // Padding
+  p: "padding",
+  pt: "padding",
+  pb: "padding",
+  pl: "padding",
+  pr: "padding",
+  px: "padding",
+  py: "padding",
+  // Border & Radius
+  rounded: "radius",
+  "rounded-t": "radius",
+  "rounded-b": "radius",
+  "rounded-l": "radius",
+  "rounded-r": "radius",
+  "rounded-tl": "radius",
+  "rounded-tr": "radius",
+  "rounded-bl": "radius",
+  "rounded-br": "radius",
+  border: "border",
+  "border-t": "border",
+  "border-b": "border",
+  "border-l": "border",
+  "border-r": "border",
+  // Max/Min sizing
+  "max-w": "maxWidth",
+  "min-h": "minHeight",
+  // Other
+  gap: "gap",
+  "gap-x": "gap",
+  "gap-y": "gap",
+  shadow: "shadow",
+  opacity: "opacity",
+  "bg-opacity": "bgOpacity",
+  cursor: "cursor",
+  overflow: "overflow",
+  transition: "transitionProperty",
+  duration: "duration",
+  delay: "delay",
+  ease: "ease",
+  animate: "twAnimate",
+  scale: "scale",
+  "scale-x": "scaleX",
+  "scale-y": "scaleY",
+  rotate: "rotate",
+  "translate-x": "translateX",
+  "translate-y": "translateY",
+  "skew-x": "skewX",
+  "skew-y": "skewY",
+  origin: "transformOrigin",
+  blur: "blur",
+  brightness: "brightness",
+  contrast: "contrast",
+  grayscale: "grayscale",
+  "hue-rotate": "hueRotate",
+  invert: "invert",
+  saturate: "saturate",
+  sepia: "sepia",
+  "will-change": "willChange",
+  "backdrop-blur": "backdropBlur",
+  "backdrop-opacity": "backdropOpacity",
+  "backdrop-brightness": "backdropBrightness",
+  "backdrop-contrast": "backdropContrast",
+  "backdrop-grayscale": "backdropGrayscale",
+  "backdrop-hue-rotate": "backdropHueRotate",
+  "backdrop-invert": "backdropInvert",
+  "backdrop-saturate": "backdropSaturate",
+  "backdrop-sepia": "backdropSepia"
+}, ya = (e, a) => {
+  if (e) {
+    const s = va[e];
+    if (s && Ne[s])
+      return Ne[s];
+  }
+  return a && Ne[a] ? Ne[a] : K;
+}, wa = (e) => {
+  const a = {};
+  return e.forEach((s) => {
+    const l = s.match(/(\w+)-(\d+)\/(\d+)$/);
+    if (l) {
+      const [, i, d, u] = l, o = `${u}ths`;
+      a[o] || (a[o] = []), a[o].push(s);
+    }
+  }), a;
+}, le = {
+  SMALL: "S",
+  MEDIUM: "M",
+  LARGE: "L",
+  XLARGE: "XL"
+}, Na = (e) => {
+  const a = {
+    [le.SMALL]: [],
+    [le.MEDIUM]: [],
+    [le.LARGE]: [],
+    [le.XLARGE]: []
+  };
+  return e.forEach((s) => {
+    const l = s.match(/(\w+)-(\d+(?:\.\d+)?)$/);
+    if (l) {
+      const [, , i] = l, d = parseFloat(i);
+      d <= 3 ? a[le.SMALL].push(s) : d <= 8 ? a[le.MEDIUM].push(s) : d <= 24 ? a[le.LARGE].push(s) : a[le.XLARGE].push(s);
+    } else (s.includes("-0") || s.includes("-px")) && a[le.SMALL].push(s);
+  }), a;
+}, ka = 4;
+function Sa({
+  isVisible: e,
+  anchorElement: a,
+  options: s,
+  onSelect: l,
+  onMouseEnter: i,
+  onMouseLeave: d,
+  propTag: u
+}) {
+  const o = (p) => De(p, u), n = dt({
+    open: e,
+    placement: "right-start",
+    mainAxisOffset: ka,
+    shiftPadding: 8,
+    boundary: [],
+    rootBoundary: "viewport"
+  });
+  if (et(() => {
+    n.refs.setReference(a), e && n.update();
+  }, [a, e]), !e || !a) return null;
+  const g = {
+    ...n.floatingStyles,
+    zIndex: st + 1
+  };
+  return ut.createPortal(
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ref: n.refs.setFloating,
+        role: "presentation",
+        style: g,
+        className: "border-base-300 bg-base-200 max-w-[350px] min-w-[200px] rounded-md border p-0.5 shadow-xl",
+        onMouseEnter: i,
+        onMouseLeave: d,
+        children: /* @__PURE__ */ t("div", { className: "scrollbar grid max-h-40 grid-cols-6 flex-row gap-1 overflow-y-auto", children: s.map((p) => /* @__PURE__ */ t(
+          "button",
+          {
+            className: "border-base-300/50 hover:border-accent hover:bg-accent hover:text-accent-content rounded border px-2 py-1.5 text-left text-xs transition-colors",
+            onClick: () => l(p),
+            children: /* @__PURE__ */ t("span", { className: "text-xs", children: o(p) })
+          },
+          p
+        )) })
+      }
+    ),
+    document.body
+  );
+}
+function Ca({ subgroupName: e, options: a, onSelect: s, propTag: l }) {
+  const [i, d] = z(!1), [u, o] = z(null), n = ee(null), g = () => {
+    n.current && (clearTimeout(n.current), n.current = null), d(!0);
+  }, p = () => {
+    n.current = setTimeout(() => {
+      d(!1);
+    }, 150);
+  }, c = () => {
+    n.current && (clearTimeout(n.current), n.current = null), d(!0);
+  }, r = () => {
+    d(!1);
+  };
+  oe(() => () => {
+    n.current && clearTimeout(n.current);
+  }, []);
+  const b = () => {
+    a.length > 0 && s(a[0]);
+  };
+  return /* @__PURE__ */ O("div", { className: "relative", children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ref: o,
+        role: "button",
+        tabIndex: 0,
+        className: "text-neutral-content hover:bg-neutral w-full cursor-pointer rounded px-2 py-1 text-left text-xs font-medium transition-colors",
+        onMouseEnter: g,
+        onMouseLeave: p,
+        onClick: b,
+        onKeyDown: (h) => {
+          (h.key === "Enter" || h.key === " ") && (h.preventDefault(), b());
+        },
+        children: e
+      }
+    ),
+    /* @__PURE__ */ t(
+      Sa,
+      {
+        isVisible: i,
+        anchorElement: u,
+        options: a,
+        onSelect: s,
+        onMouseEnter: c,
+        onMouseLeave: r,
+        propTag: l
+      }
+    )
+  ] });
+}
+function Ta({
+  options: e,
+  filteredOptions: a,
+  selectedIndex: s,
+  onSelect: l,
+  inputRef: i,
+  showVarSelector: d,
+  propTag: u,
+  tailwindKey: o,
+  currentValue: n,
+  selectedType: g,
+  highlightedOption: p
+}) {
+  const c = ya(u, o), r = ct(), b = r != null ? Math.max(nt, r + 10) : st, S = !!(e && (e.named.length > 0 || e.numeric.length > 0 || e.fractions.length > 0 || e.tokens.length > 0 || e.other.length > 0)), P = typeof window < "u" ? window.innerWidth : 1536, L = { width: "fit-content", maxWidth: Math.min(P - 16, 320) }, H = (N) => De(N, u), W = (N, x) => {
+    if (!x) return null;
+    switch (x) {
+      case "cursor": {
+        const f = N.replace("cursor-", "");
+        return /* @__PURE__ */ t(
+          "div",
+          {
+            className: "border-base-300 bg-neutral flex size-4 shrink-0 items-center justify-center rounded border",
+            style: { cursor: f },
+            children: (() => {
+              switch (f) {
+                case "pointer":
+                  return /* @__PURE__ */ t(Vt, { className: "size-3" });
+                case "default":
+                case "auto":
+                  return /* @__PURE__ */ t(Be, { className: "size-3" });
+                case "text":
+                case "vertical-text":
+                  return /* @__PURE__ */ t(Ut, { className: "size-3" });
+                case "move":
+                case "all-scroll":
+                  return /* @__PURE__ */ t(Wt, { className: "size-3" });
+                case "grab":
+                case "grabbing":
+                  return /* @__PURE__ */ t(Gt, { className: "size-3" });
+                case "not-allowed":
+                case "no-drop":
+                  return /* @__PURE__ */ t(Rt, { className: "size-3" });
+                case "wait":
+                case "progress":
+                  return /* @__PURE__ */ t($t, { className: "size-3" });
+                case "help":
+                case "context-menu":
+                  return /* @__PURE__ */ t(_t, { className: "size-3" });
+                case "crosshair":
+                case "cell":
+                  return /* @__PURE__ */ t(tt, { className: "size-3" });
+                case "copy":
+                case "alias":
+                  return /* @__PURE__ */ t(Ft, { className: "size-3" });
+                case "zoom-in":
+                  return /* @__PURE__ */ t(Dt, { className: "size-3" });
+                case "zoom-out":
+                  return /* @__PURE__ */ t(Ht, { className: "size-3" });
+                case "col-resize":
+                case "ew-resize":
+                  return /* @__PURE__ */ t(zt, { className: "size-3" });
+                case "row-resize":
+                case "ns-resize":
+                  return /* @__PURE__ */ t(It, { className: "size-3" });
+                case "n-resize":
+                  return /* @__PURE__ */ t(Be, { className: "size-3" });
+                case "s-resize":
+                  return /* @__PURE__ */ t(Et, { className: "size-3" });
+                case "e-resize":
+                  return /* @__PURE__ */ t(Mt, { className: "size-3" });
+                case "w-resize":
+                  return /* @__PURE__ */ t(At, { className: "size-3" });
+                case "ne-resize":
+                case "nesw-resize":
+                  return /* @__PURE__ */ t(Ve, { className: "size-3 rotate-45" });
+                case "nw-resize":
+                case "nwse-resize":
+                  return /* @__PURE__ */ t(Ue, { className: "size-3 rotate-45" });
+                case "se-resize":
+                  return /* @__PURE__ */ t(Ve, { className: "size-3 -rotate-45" });
+                case "sw-resize":
+                  return /* @__PURE__ */ t(Ue, { className: "size-3 -rotate-45" });
+                case "none":
+                  return /* @__PURE__ */ t(Pt, { className: "size-3 opacity-30" });
+                default:
+                  return /* @__PURE__ */ t(Ot, { className: "size-3" });
+              }
+            })()
+          }
+        );
+      }
+      case "shadow": {
+        const f = He(N);
+        return /* @__PURE__ */ O("div", { className: "flex size-9 shrink-0 items-center justify-center gap-1", children: [
+          f ? /* @__PURE__ */ t(
+            "span",
+            {
+              className: "border-base-300 size-3 shrink-0 rounded-sm border",
+              style: { backgroundColor: f },
+              "aria-hidden": !0
+            }
+          ) : null,
+          /* @__PURE__ */ t("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ t("div", { className: `bg-base-100 size-7 rounded ${N}` }) })
+        ] });
+      }
+      default:
+        return null;
+    }
+  }, T = (N, x, f = !1, w = "custom", v = !1, B) => {
+    const D = (e == null ? void 0 : e[N]) || [];
+    if (D.length === 0) return null;
+    if (v && (N === "numeric" || N === "fractions")) {
+      let m = {};
+      return N === "numeric" ? m = Na(D) : N === "fractions" && (m = wa(D)), /* @__PURE__ */ t("div", { className: "p-2", children: /* @__PURE__ */ t("div", { className: "space-y-1", children: Object.entries(m).filter(([, A]) => A.length > 0).map(([A, U]) => /* @__PURE__ */ t(
+        Ca,
+        {
+          subgroupName: A,
+          options: U,
+          showHints: !1,
+          hintType: w,
+          onSelect: l,
+          propTag: u
+        },
+        A
+      )) }) }, N);
+    }
+    return /* @__PURE__ */ t("div", { className: "p-2", children: /* @__PURE__ */ t("div", { className: "ph-select-item-host overflow-y-auto", children: D.map((m) => {
+      const A = W(m, B), U = n === m;
+      return /* @__PURE__ */ O(
+        "button",
+        {
+          type: "button",
+          className: `ph-select-item text-base-content text-xs ${U ? "bg-primary text-primary-content font-semibold" : !U && p === m ? "bg-primary/10 text-primary font-semibold" : ""}`,
+          onClick: () => l(m),
+          children: [
+            A,
+            /* @__PURE__ */ t("span", { className: "flex-1", children: H(m) })
+          ]
+        },
+        m
+      );
+    }) }) }, N);
+  };
+  return a ? /* @__PURE__ */ t(
+    Xe,
+    {
+      open: S,
+      onOpenChange: () => {
+      },
+      anchor: i,
+      placement: "bottom-start",
+      mainAxisOffset: 4,
+      maxHeightCeiling: 400,
+      matchAnchorWidth: { min: 120, max: 200 },
+      boundary: [],
+      zIndex: b,
+      disableDismiss: !0,
+      style: L,
+      className: "pagehub-sdk-root ph-panel text-base-content flex w-fit flex-col",
+      children: /* @__PURE__ */ O("div", { "data-unified-dropdown": !0, className: "ph-select-item-host flex flex-1 flex-col", children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => l(""),
+            className: "ph-select-item border-base-300 text-neutral-content shrink-0 rounded-none border-b",
+            children: "None"
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "scrollbar-light flex-1 overflow-y-auto", children: a.length === 0 ? /* @__PURE__ */ t("div", { className: "text-neutral-content px-3 py-6 text-center text-xs", children: "No matches found" }) : a.map((N, x) => {
+          const f = x === s, w = u === "shadow" ? He(N) : null;
+          return /* @__PURE__ */ O(
+            "button",
+            {
+              type: "button",
+              onClick: () => l(N),
+              className: `ph-select-item text-base-content flex items-center gap-2 ${f ? "bg-primary/10 text-primary font-semibold" : ""}`,
+              children: [
+                w ? /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: "border-base-300 size-3 shrink-0 rounded-sm border",
+                    style: { backgroundColor: w },
+                    "aria-hidden": !0
+                  }
+                ) : null,
+                /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", children: H(N) })
+              ]
+            },
+            N
+          );
+        }) })
+      ] })
+    }
+  ) : /* @__PURE__ */ t(
+    Xe,
+    {
+      open: S,
+      onOpenChange: () => {
+      },
+      anchor: i,
+      placement: "bottom-start",
+      mainAxisOffset: 4,
+      maxHeightCeiling: 400,
+      matchAnchorWidth: { min: 120, max: 200 },
+      boundary: [],
+      zIndex: b,
+      disableDismiss: !0,
+      style: L,
+      className: "pagehub-sdk-root ph-panel text-base-content flex w-fit flex-col overflow-hidden",
+      children: /* @__PURE__ */ O(
+        "div",
+        {
+          "data-unified-dropdown": !0,
+          className: "ph-select-item-host flex min-h-0 flex-1 flex-col overflow-hidden",
+          children: [
+            (() => {
+              const N = c.columns || { count: 3, widths: ["w-2/5", "w-1/5", "w-2/5"] }, x = [];
+              N.count === 3 ? x.push(
+                { section: c.leftSection, width: N.widths[0], key: "left" },
+                { section: c.middleSection, width: N.widths[1], key: "middle" },
+                { section: c.rightSection, width: N.widths[2], key: "right" }
+              ) : N.count === 2 && x.push(
+                { section: c.leftSection, width: N.widths[0], key: "left" },
+                { section: c.rightSection, width: N.widths[1], key: "right" }
+              );
+              const f = x.filter(
+                (m) => m.section != null
+              ), w = (m) => e != null && m.groups.some((A) => {
+                var U;
+                return (((U = e[A]) == null ? void 0 : U.length) ?? 0) > 0;
+              }), v = f.filter((m) => w(m.section)), B = v.length > 0 && v.length < f.length, D = v.length > 0 ? v : f;
+              return /* @__PURE__ */ t("div", { className: "flex h-full flex-col", children: /* @__PURE__ */ t("div", { className: "flex h-full", children: D.map((m, A) => {
+                if (!m.section) return null;
+                const q = A === D.length - 1 ? "" : "border-r border-base-300", te = B && v.length > 0 && D.length === 1 ? "w-max min-w-0 max-w-full shrink-0" : m.width;
+                return /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: `scrollbar-light ${te} overflow-y-auto ${q}`,
+                    children: m.section.groups.map((F, y) => {
+                      var E, _, J, j, ae, Q, de, me, fe, R, $, Z, G, Y, re, ne;
+                      const M = "flex-1";
+                      return F === "named" ? /* @__PURE__ */ t("div", { className: M, children: T(
+                        "named",
+                        m.section.title,
+                        ((E = m.section) == null ? void 0 : E.showHints) || !1,
+                        ((_ = m.section) == null ? void 0 : _.hintType) || "custom",
+                        !1,
+                        (J = m.section) == null ? void 0 : J.showPreview
+                      ) }, "named") : F === "numeric" ? /* @__PURE__ */ t("div", { className: M, children: T(
+                        "numeric",
+                        m.section.title,
+                        ((j = m.section) == null ? void 0 : j.showHints) || !1,
+                        ((ae = m.section) == null ? void 0 : ae.hintType) || "pixel",
+                        !((Q = m.section) != null && Q.disableSubgroups),
+                        // Enable subgroups unless disabled
+                        (de = m.section) == null ? void 0 : de.showPreview
+                      ) }, "numeric") : F === "fractions" ? /* @__PURE__ */ t("div", { className: M, children: T(
+                        "fractions",
+                        "Fractions",
+                        (me = m.section) == null ? void 0 : me.showHints,
+                        ((fe = m.section) == null ? void 0 : fe.hintType) || "percentage",
+                        !((R = m.section) != null && R.disableSubgroups),
+                        // Enable subgroups unless disabled
+                        ($ = m.section) == null ? void 0 : $.showPreview
+                      ) }, "fractions") : F === "tokens" ? /* @__PURE__ */ t("div", { className: M, children: T(
+                        "tokens",
+                        m.section.title,
+                        !1,
+                        ((Z = m.section) == null ? void 0 : Z.hintType) || "custom",
+                        !1,
+                        (G = m.section) == null ? void 0 : G.showPreview
+                      ) }, "tokens") : F === "other" ? /* @__PURE__ */ t("div", { className: M, children: T(
+                        "other",
+                        "Other",
+                        ((Y = m.section) == null ? void 0 : Y.showHints) || !1,
+                        ((re = m.section) == null ? void 0 : re.hintType) || "custom",
+                        !1,
+                        (ne = m.section) == null ? void 0 : ne.showPreview
+                      ) }, "other") : null;
+                    })
+                  },
+                  m.key
+                );
+              }) }) });
+            })(),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => l(""),
+                className: "ph-select-item border-base-300 bg-base-200 text-neutral-content sticky top-0 z-10 shrink-0 rounded-none border-t",
+                children: "Reset to Default"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+const he = ["px", "em", "rem", "%", "vh", "vw", "vmin", "vmax"];
+function ht({
+  label: e,
+  labelPrefix: a,
+  labelSuffix: s,
+  labelHide: l = !1,
+  labelWidth: i = "",
+  inputWidth: d = "",
+  placeholder: u = "Enter value",
+  showVarSelector: o = !0,
+  allowedTypes: n,
+  wrap: g = "",
+  index: p = null,
+  propItemKey: c,
+  propType: r = "class",
+  propKey: b,
+  propTag: h,
+  tailwindKey: S,
+  hideTypeSelector: P = !1,
+  renderBreakpointPills: I = !0,
+  state: L,
+  handlers: H,
+  designVars: W
+}) {
+  const {
+    showAutocomplete: T,
+    setShowAutocomplete: k,
+    showCalcDialog: N,
+    setShowCalcDialog: x,
+    inputValue: f,
+    setInputValue: w,
+    selectedType: v,
+    setSelectedType: B,
+    inputRef: D,
+    typeSelectorRef: m,
+    currentValue: A,
+    organizedOptions: U,
+    filteredOptions: q,
+    selectedIndex: te,
+    availableTailwindOptions: F,
+    kbdNavActive: y,
+    handleChange: M,
+    parsed: E,
+    isEditing: _,
+    setIsEditing: J,
+    isTypeSelectorOpen: j,
+    setIsTypeSelectorOpen: ae
+  } = L, {
+    handleInputChange: Q,
+    handleInputFocus: de,
+    handleInputBlur: me,
+    handleKeyDown: fe,
+    handleAutocompleteSelect: R
+  } = H, $ = q || !y ? void 0 : F[te], Z = X(() => {
+    const C = [];
+    return (!n || n.includes("calc")) && C.push({ id: "calc", label: /* @__PURE__ */ t(Bt, { className: "size-3" }) }), C.push({ id: "var", label: /* @__PURE__ */ t(lt, { className: "size-3" }) }), C.push({ id: "tailwind", label: /* @__PURE__ */ t(Yt, { className: "size-3" }) }), (!n || n.includes("em")) && C.push({ id: "em", label: "em" }), (!n || n.includes("px")) && C.push({ id: "px", label: "px" }), (!n || n.includes("rem")) && C.push({ id: "rem", label: "rem" }), (!n || n.includes("%")) && C.push({ id: "%", label: "%" }), (!n || n.includes("vh")) && C.push({ id: "vh", label: "vh" }), (!n || n.includes("vw")) && C.push({ id: "vw", label: "vw" }), (!n || n.includes("vmin")) && C.push({ id: "vmin", label: "vmin" }), (!n || n.includes("vmax")) && C.push({ id: "vmax", label: "vmax" }), C;
+  }, [n]), G = X(() => {
+    if (_ || !f) return f;
+    if (r === "class" && v === "tailwind")
+      return De(f, h);
+    if (v === "var") {
+      const C = f.match(/^(?:var|font)\s*\(\s*(--[\w-]+)\s*\)$/), be = C == null ? void 0 : C[1];
+      if (be) {
+        const we = W.find((Te) => Te.varName === be);
+        if (we) return we.label;
+      }
+    }
+    return f;
+  }, [_, f, v, r, h, W]), Y = X(
+    () => [D, m],
+    [D, m]
+  ), re = X(() => h !== "shadow" ? null : He(f || A), [h, f, A]), ne = X(() => {
+    const C = ["%", "vh", "vw", "vmin", "vmax"];
+    return v === "calc" ? "" : C.includes(v) ? ` (${v})` : he.includes(v) ? ` (${v})` : v === "tailwind" ? "" : u;
+  }, [v, u]), Ce = (C) => {
+    var We;
+    const be = v;
+    if (k(!1), C === "calc") {
+      B("calc"), x(!0);
+      return;
+    }
+    B(C), J(C === "tailwind" || C === "var"), (C === "tailwind" || C === "var") && k(!0);
+    const we = he.includes(be), Te = he.includes(C);
+    if (C !== be)
+      if (we && Te) {
+        const Le = ((We = E.numeric) == null ? void 0 : We.toString()) || "";
+        Le ? (w(Le), M(Le, C)) : w("");
+      } else
+        w("");
+  }, $e = /* @__PURE__ */ O("div", { className: "relative min-w-0 flex-1", children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        id: b ? `input-${b}` : void 0,
+        ref: D,
+        type: "text",
+        value: G,
+        onChange: Q,
+        onBlur: me,
+        onKeyDown: fe,
+        onFocus: de,
+        placeholder: ne,
+        className: "input-plain h-8 w-full",
+        "aria-label": e || b,
+        ...ue
+      }
+    ),
+    T && !j && v !== "var" && /* @__PURE__ */ t(
+      Ta,
+      {
+        options: U,
+        filteredOptions: q,
+        selectedIndex: te,
+        onSelect: R,
+        inputRef: D,
+        showVarSelector: o,
+        propTag: h,
+        tailwindKey: S,
+        currentValue: A,
+        selectedType: v,
+        highlightedOption: $
+      }
+    ),
+    o && v === "var" && T && !j && /* @__PURE__ */ t(
+      Ga,
+      {
+        open: !0,
+        onOpenChange: (C) => {
+          C || (k(!1), J(!1));
+        },
+        anchor: m,
+        ignoreOutsideClicks: Y,
+        onSelect: R,
+        currentValue: A,
+        propTag: h,
+        tailwindKey: S
+      }
+    )
+  ] }), Re = P ? null : /* @__PURE__ */ t(
+    pt,
+    {
+      ref: m,
+      types: Z,
+      selectedType: v,
+      onCalcClick: () => x(!0),
+      onOpenChange: (C) => {
+        ae(C), C && k(!1);
+      },
+      onTypeChange: Ce
+    }
+  ), Ge = A ? /* @__PURE__ */ t(
+    qt,
+    {
+      onClick: (C) => {
+        C.preventDefault(), w(""), J(!1), k(!1), M("", v);
+      },
+      tooltip: "Clear"
+    }
+  ) : null, vt = g ? /* @__PURE__ */ O("div", { className: "flex w-full min-w-0 items-center gap-1.5", children: [
+    $e,
+    Re,
+    Ge
+  ] }) : /* @__PURE__ */ O(rt, { trailing: Ge, children: [
+    re ? /* @__PURE__ */ t(
+      "span",
+      {
+        className: "border-base-300 ml-0.5 size-3.5 shrink-0 self-center rounded-sm border",
+        style: { backgroundColor: re },
+        "aria-hidden": !0
+      }
+    ) : null,
+    $e,
+    Re
+  ] });
+  return /* @__PURE__ */ O("div", { className: "flex w-full flex-col", children: [
+    /* @__PURE__ */ O("div", { className: "flex w-full items-center gap-0.5", children: [
+      e && !l && /* @__PURE__ */ O("div", { className: `flex flex-col items-start gap-0.5 ${i || "w-20"}`, children: [
+        /* @__PURE__ */ t(
+          "label",
+          {
+            htmlFor: b ? `input-${b}` : void 0,
+            className: "w-full cursor-pointer truncate text-xs whitespace-nowrap",
+            children: e
+          }
+        ),
+        I && r === "class" && /* @__PURE__ */ t(
+          Xt,
+          {
+            propKey: b,
+            propType: r,
+            index: p,
+            propItemKey: c,
+            label: b
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: `flex min-w-0 items-center gap-0.5 ${d || "flex-1"}`, children: vt })
+    ] }),
+    N && /* @__PURE__ */ t(
+      fa,
+      {
+        value: v === "calc" ? f : "",
+        onSave: (C) => {
+          M(C, "calc"), B("calc"), w(C), x(!1), setTimeout(() => J(!1), 100);
+        },
+        onClose: () => x(!1),
+        anchorEl: m.current
+      }
+    )
+  ] });
+}
+const Je = /* @__PURE__ */ new Set([
+  "space-3xs",
+  "space-2xs",
+  "space-xs",
+  "space-sm",
+  "space-md",
+  "space-lg",
+  "space-xl",
+  "container",
+  "container-x",
+  "container-y",
+  "section",
+  "density"
+]);
+function ft(e, a) {
+  if (!a) return Je.has(e);
+  const s = `${a}-`;
+  return e.startsWith(s) ? Je.has(e.slice(s.length)) : !1;
+}
+function bt(e, a) {
+  var n, g, p;
+  if (!e || typeof e != "string")
+    return { type: "custom", value: "" };
+  if (e.match(/^var\(/i))
+    return {
+      type: "var",
+      value: e
+    };
+  const l = e.match(/^(\w+)-\[var\([^\]]+\)\]$/i);
+  if (l)
+    return {
+      type: "var",
+      value: ((n = e.match(/\[(.*)\]/)) == null ? void 0 : n[1]) || e,
+      prefix: l[1]
+    };
+  if (e.match(/^(calc|clamp|max|min)\(/i))
+    return {
+      type: "calc",
+      value: e
+    };
+  const d = e.match(/^(\w+)-\[(calc|clamp|max|min)\([^\]]+\)\]$/i);
+  if (d)
+    return {
+      type: "calc",
+      value: ((g = e.match(/\[(.*)\]/)) == null ? void 0 : g[1]) || e,
+      prefix: d[1]
+    };
+  const u = e.match(/^(\w+)-\[([0-9.]+)(px|em|rem|%|vh|vw|vmin|vmax)\]$/);
+  if (u)
+    return {
+      type: u[3],
+      numeric: parseFloat(u[2]),
+      value: u[2],
+      unit: u[3],
+      prefix: u[1]
+    };
+  const o = e.match(/^([0-9.]+)(px|em|rem|%|vh|vw|vmin|vmax)$/);
+  if (o)
+    return {
+      type: o[2],
+      numeric: parseFloat(o[1]),
+      value: o[1],
+      unit: o[2]
+    };
+  if (jt(e))
+    return {
+      type: "tailwind",
+      value: e
+    };
+  if (a) {
+    const c = Object.keys(ce).find((r) => {
+      const b = ce[r];
+      return Array.isArray(b) && b.some((h) => typeof h == "string" && h.startsWith(`${a}-`));
+    });
+    if (c && ((p = ce[c]) != null && p.includes(e)))
+      return {
+        type: "tailwind",
+        value: e,
+        prefix: a
+      };
+  }
+  return {
+    type: "custom",
+    value: e
+  };
+}
+function gt(e, a, s) {
+  switch (a) {
+    case "tailwind":
+      return e;
+    case "var":
+      return s ? `${s}-[${e}]` : e;
+    case "calc":
+      return s ? `${s}-[${e}]` : e;
+    case "px":
+    case "em":
+    case "rem":
+    case "%":
+    case "vh":
+    case "vw":
+    case "vmin":
+    case "vmax":
+      return s ? `${s}-[${e}${a}]` : `${e}${a}`;
+    default:
+      return e;
+  }
+}
+const La = (e) => {
+  const {
+    value: a,
+    onChange: s,
+    propTag: l = "",
+    tailwindKey: i,
+    tailwindOptions: d,
+    allowedTypes: u,
+    overrideType: o
+  } = e, [n, g] = z(!1), [p, c] = z(!1), [r, b] = z(""), [h, S] = z(!1), [P, I] = z(0), [L, H] = z(!1), [W, T] = z(!1), k = ee(null), N = ee(null), x = ee(!1), f = ee(!1), w = a || "", v = X(() => bt(w, l), [w, l]), B = !u || u.includes("tailwind") ? "tailwind" : u[0] || "px", [D, m] = z(B);
+  oe(() => {
+    o && !w && m(o);
+  }, [o]), oe(() => {
+    w ? m(v.type) : o && m(o);
+  }, [v.type, w, o]), oe(() => {
+    var y;
+    const F = document.activeElement === k.current;
+    if (f.current && w && (f.current = !1), !(h || F || f.current))
+      switch (v.type) {
+        case "tailwind":
+        case "var":
+        case "calc":
+          b(v.value);
+          break;
+        case "px":
+        case "em":
+        case "rem":
+        case "%":
+        case "vh":
+        case "vw":
+        case "vmin":
+        case "vmax":
+          b(((y = v.numeric) == null ? void 0 : y.toString()) || v.value);
+          break;
+        default:
+          b(w || "");
+      }
+  }, [w, v, h]);
+  const A = X(() => d || (i && ce[i] ? ce[i] : l ? it.filter(
+    (F) => typeof F == "string" && F.startsWith(`${l}-`)
+  ) : []), [d, i, l]), U = X(() => {
+    var M;
+    if (!A.length) return null;
+    const F = l || ((M = A[0]) == null ? void 0 : M.split("-")[0]) || "", y = {
+      named: [],
+      numeric: [],
+      fractions: [],
+      tokens: [],
+      other: []
+    };
+    return A.forEach((E) => {
+      const _ = E.replace(`${F}-`, ""), J = _ === E;
+      ft(E, F) ? y.tokens.push(E) : J || ["full", "screen", "auto", "min", "max", "fit", "none"].includes(_) ? y.named.push(E) : _.includes("/") ? y.fractions.push(E) : /^[\d.]+$/.test(_) || _ === "px" ? y.numeric.push(E) : y.other.push(E);
+    }), y;
+  }, [A, l]), q = X(() => {
+    if (!r || !h || r === w || r === v.value)
+      return null;
+    const F = r.toLowerCase();
+    return A.filter((y) => y.toLowerCase().includes(F));
+  }, [r, A, h, w, v.value]);
+  return {
+    showAutocomplete: n,
+    setShowAutocomplete: g,
+    showCalcDialog: p,
+    setShowCalcDialog: c,
+    inputValue: r,
+    setInputValue: b,
+    isEditing: h,
+    setIsEditing: S,
+    selectedIndex: P,
+    setSelectedIndex: I,
+    kbdNavActive: L,
+    setKbdNavActive: H,
+    isTypeSelectorOpen: W,
+    setIsTypeSelectorOpen: T,
+    selectedType: D,
+    setSelectedType: m,
+    inputRef: k,
+    typeSelectorRef: N,
+    skipBlurCommitRef: x,
+    pendingUpdateRef: f,
+    currentValue: w,
+    parsed: v,
+    availableTailwindOptions: A,
+    organizedOptions: U,
+    filteredOptions: q,
+    handleChange: (F, y) => {
+      const M = y || D;
+      let E = M, _ = F;
+      if (!y && F && M !== "calc" && M !== "tailwind") {
+        if (F.endsWith("%"))
+          E = "%", _ = F.slice(0, -1);
+        else
+          for (const j of he)
+            if (j !== "%" && F.endsWith(j)) {
+              E = j, _ = F.slice(0, -j.length);
+              break;
+            }
+      }
+      E !== D && m(E);
+      const J = gt(_, E, l);
+      f.current = !0, s(J), setTimeout(() => {
+        f.current && (f.current = !1);
+      }, 500);
+    }
+  };
+}, xt = (e) => {
+  const {
+    inputValue: a,
+    setInputValue: s,
+    selectedType: l,
+    setSelectedType: i,
+    setIsEditing: d,
+    setShowAutocomplete: u,
+    setSelectedIndex: o,
+    setKbdNavActive: n,
+    skipBlurCommitRef: g,
+    currentValue: p,
+    parsed: c,
+    availableTailwindOptions: r,
+    showVarSelector: b,
+    showAutocomplete: h,
+    filteredOptions: S,
+    selectedIndex: P,
+    handleChange: I,
+    inputRef: L
+  } = e, H = (x) => {
+    const f = x.target.value, w = he.includes(l), v = f.match(/^(-?[0-9.]+)(px|em|rem|%|vh|vw|vmin|vmax)$/);
+    if (v) {
+      const [, m, A] = v;
+      i(A), s(m), d(!0), u(!1);
+      return;
+    }
+    if (w && f !== "") {
+      const m = f.match(/^(-?[0-9.]+)([a-z%]*)$/i);
+      if (m) {
+        const [, U, q] = m;
+        if (!(q === "" || q === "%" || ["px", "em", "rem", "%", "vh", "vw", "vmin", "vmax"].some((y) => y.startsWith(q.toLowerCase())))) if (f.match(/^[a-z]+-/i)) {
+          i("tailwind"), s(f), d(!0), u(!0), o(0);
+          return;
+        } else
+          return;
+      } else
+        return;
+      if (["%", "vh", "vw", "vmin", "vmax"].includes(l)) {
+        const U = parseFloat(f);
+        if (!isNaN(U) && (U < -200 || U > 1e3))
+          return;
+      }
+    }
+    s(f), d(!0);
+    const B = f.match(/^[a-z]+-/i), D = /^-?\d+\.?\d*$/.test(f);
+    B && l !== "tailwind" && l !== "calc" ? (i("tailwind"), u(!0), o(0)) : l === "tailwind" ? (u(!0), o(0)) : D && u(!1);
+  }, W = () => {
+    d(!0), n(!1), (r.length > 0 || b) && u(!0);
+  }, T = (x) => {
+    const f = x.relatedTarget;
+    f && (f.closest("[data-unified-dropdown]") || f.closest("[data-type-selector-dropdown]") || f.closest('[role="dialog"]')) || setTimeout(() => {
+      if (g.current) {
+        g.current = !1, d(!1), u(!1);
+        return;
+      }
+      a !== p && I(a, l), d(!1), u(!1);
+    }, 200);
+  }, k = (x) => {
+    var v;
+    g.current = !0;
+    const f = x.startsWith("var(");
+    s(x);
+    let w = l;
+    x === "" ? w = l : f ? (w = "var", i("var")) : (w = "tailwind", i("tailwind")), I(x, w), u(!1), d(!1), (v = L.current) == null || v.blur();
+  };
+  return {
+    handleInputChange: H,
+    handleInputFocus: W,
+    handleInputBlur: T,
+    handleAutocompleteSelect: k,
+    handleKeyDown: (x) => {
+      var w, v, B;
+      if (!h && x.key !== "Enter") return;
+      const f = S || r;
+      switch (x.key) {
+        case "ArrowDown":
+          x.preventDefault(), n(!0), o(Math.min(P + 1, f.length - 1));
+          break;
+        case "ArrowUp":
+          x.preventDefault(), n(!0), o(Math.max(P - 1, 0));
+          break;
+        case "Enter":
+          x.preventDefault(), h && f[P] ? k(f[P]) : (I(a || "", l), d(!1), u(!1), (w = L.current) == null || w.blur());
+          break;
+        case "Escape":
+          x.preventDefault(), u(!1), d(!1), s(((v = c.numeric) == null ? void 0 : v.toString()) || c.value || p || ""), (B = L.current) == null || B.blur();
+          break;
+      }
+    }
+  };
+};
+function Oa(e) {
+  const {
+    value: a,
+    onChange: s,
+    label: l,
+    labelHide: i = !1,
+    labelWidth: d = "",
+    inputWidth: u = "",
+    placeholder: o = "Enter value",
+    showVarSelector: n = !0,
+    allowedTypes: g,
+    wrap: p = "",
+    inline: c = !0,
+    propTag: r,
+    tailwindKey: b,
+    tailwindOptions: h,
+    overrideType: S,
+    hideTypeSelector: P = !1
+  } = e, I = La({
+    value: a,
+    onChange: s,
+    propTag: r,
+    tailwindKey: b,
+    tailwindOptions: h,
+    allowedTypes: g,
+    overrideType: S
+  }), L = xt({ ...I, showVarSelector: n }), H = _e();
+  return /* @__PURE__ */ t(
+    ht,
+    {
+      label: l,
+      labelHide: i,
+      labelWidth: d,
+      inputWidth: u,
+      placeholder: o,
+      showVarSelector: n,
+      allowedTypes: g,
+      wrap: p,
+      inline: c,
+      propType: "controlled",
+      propTag: r,
+      tailwindKey: b,
+      hideTypeSelector: P,
+      renderBreakpointPills: !1,
+      state: I,
+      handlers: L,
+      designVars: H
+    }
+  );
+}
+function Pa() {
+  const { actions: e } = Fe(), a = ie(
+    ({ key: i, value: d, meta: u }) => {
+      e.setProp(Se, (o) => {
+        o.theme || (o.theme = {}), o.theme.styleGuide || (o.theme.styleGuide = {}), o.theme.styleGuide[i] = d, u && (o.theme.styleGuideMeta || (o.theme.styleGuideMeta = {}), o.theme.styleGuideMeta[i] = {
+          ...o.theme.styleGuideMeta[i] || {},
+          ...u
+        });
+      });
+    },
+    [e]
+  ), s = ie(
+    (i) => {
+      ye[i] || e.setProp(Se, (d) => {
+        var u, o;
+        (u = d.theme) != null && u.styleGuide && delete d.theme.styleGuide[i], (o = d.theme) != null && o.styleGuideMeta && delete d.theme.styleGuideMeta[i];
+      });
+    },
+    [e]
+  ), l = ie(
+    ({ oldKey: i, newKey: d }) => {
+      ye[i] || i !== d && e.setProp(Se, (u) => {
+        var g, p;
+        const o = (g = u.theme) == null ? void 0 : g.styleGuide, n = (p = u.theme) == null ? void 0 : p.styleGuideMeta;
+        !o || !(i in o) || (o[d] = o[i], delete o[i], n && i in n && (n[d] = n[i], delete n[i]));
+      });
+    },
+    [e]
+  );
+  return { upsertToken: a, deleteToken: s, renameToken: l };
+}
+const Aa = [
+  { value: "spacing", label: "Spacing" },
+  { value: "colors", label: "Colors" },
+  { value: "typography", label: "Typography" },
+  { value: "other", label: "Other" }
+], Ma = [
+  { value: "color", label: "Color" },
+  { value: "dimension", label: "Dimension" },
+  { value: "number", label: "Number" },
+  { value: "text", label: "Text" }
+], Ea = ["px", "em", "rem", "%", "vh", "vw"];
+function ke(e) {
+  return e.trim().replace(/[^a-zA-Z0-9 _-]/g, "").split(/[\s_-]+/).filter(Boolean).map((a, s) => {
+    const l = a.toLowerCase();
+    return s === 0 ? l : l.charAt(0).toUpperCase() + l.slice(1);
+  }).join("");
+}
+function Ia({ mode: e, token: a, onBack: s }) {
+  const { upsertToken: l, deleteToken: i, renameToken: d } = Pa(), u = sa(a == null ? void 0 : a.varName), o = u.count > 0, n = e === "edit" && !!a, g = a == null ? void 0 : a.key, p = g ? ye[g] : void 0, c = !!p && !(a != null && a.custom), r = n ? (p == null ? void 0 : p.label) ?? a.label.replace(/\s*\(Custom\)$/, "") : "", b = n ? (p == null ? void 0 : p.type) ?? mt(a.value) : "color", h = n ? (p == null ? void 0 : p.category) ?? a.category : "colors", S = n ? a.value : "", [P, I] = z(r), [L, H] = z(b), [W, T] = z([h]), [k, N] = z(S), x = p == null ? void 0 : p.quickPicks, f = c || n && o, w = n, v = c, B = n && !c && !o, D = P.trim(), m = n ? g : ke(D), A = !n && m in ye, U = X(() => !(!D || A || !k && L !== "text"), [D, A, k, L]), q = (y) => {
+    T((M) => M.includes(y) ? M.filter((E) => E !== y) : [...M, y]);
+  }, te = () => {
+    if (U) {
+      if (n) {
+        const y = !c && D && ke(D) !== g;
+        y && d({ oldKey: g, newKey: ke(D) });
+        const M = y ? ke(D) : g;
+        l({
+          key: M,
+          value: k,
+          meta: c ? void 0 : { custom: !0, appliesTo: W }
+        });
+      } else
+        l({
+          key: m,
+          value: k,
+          meta: { custom: !0, appliesTo: W }
+        });
+      s();
+    }
+  }, F = () => {
+    B && (i(g), s());
+  };
+  return /* @__PURE__ */ O("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ O("div", { className: "border-base-300 bg-base-200 flex shrink-0 items-center gap-2 border-b p-2", children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: s,
+          className: "text-neutral-content hover:text-base-content flex size-6 items-center justify-center rounded",
+          "aria-label": "Back to list",
+          children: /* @__PURE__ */ t(Zt, { className: "size-3.5", "aria-hidden": !0 })
+        }
+      ),
+      /* @__PURE__ */ t("span", { className: "text-base-content text-xs font-semibold", children: n ? c ? "Edit Built-in Token" : "Edit Custom Token" : "New Token" })
+    ] }),
+    /* @__PURE__ */ O("div", { className: "scrollbar-light flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3", children: [
+      n && o && /* @__PURE__ */ O("div", { className: "border-warning bg-warning/10 text-warning rounded-md border px-2 py-1.5 text-[11px]", children: [
+        "Used by ",
+        u.count,
+        " node",
+        u.count === 1 ? "" : "s",
+        ". Remove references in the canvas before renaming or deleting."
+      ] }),
+      /* @__PURE__ */ O("label", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ t("span", { className: "text-neutral-content text-[11px] tracking-wide uppercase", children: "Name" }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "text",
+            value: P,
+            onChange: (y) => I(y.target.value),
+            placeholder: "e.g. Hero Gap",
+            disabled: f,
+            className: "border-base-300 bg-base-100 text-base-content placeholder:text-neutral-content focus:border-ring focus:ring-ring rounded-md border px-2 py-1.5 text-xs outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+            ...ue
+          }
+        ),
+        A && /* @__PURE__ */ t("span", { className: "text-error text-[11px]", children: "Name conflicts with a built-in token. Choose another." })
+      ] }),
+      /* @__PURE__ */ O("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ t("span", { className: "text-neutral-content text-[11px] tracking-wide uppercase", children: "Type" }),
+        /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: Ma.map((y) => /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => !w && H(y.value),
+            disabled: w,
+            className: `rounded-md px-2 py-1 text-[11px] transition-colors disabled:cursor-not-allowed ${L === y.value ? "bg-primary text-primary-content" : "bg-base-200 text-base-content hover:bg-base-300"} ${w && L !== y.value ? "opacity-30" : ""}`,
+            children: y.label
+          },
+          y.value
+        )) })
+      ] }),
+      /* @__PURE__ */ O("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ t("span", { className: "text-neutral-content text-[11px] tracking-wide uppercase", children: "Applies To" }),
+        /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: Aa.map((y) => {
+          const M = W.includes(y.value);
+          return /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: () => !v && q(y.value),
+              disabled: v,
+              className: `rounded-md px-2 py-1 text-[11px] transition-colors disabled:cursor-not-allowed ${M ? "bg-primary text-primary-content" : "bg-base-200 text-base-content hover:bg-base-300"} ${v && !M ? "opacity-30" : ""}`,
+              children: y.label
+            },
+            y.value
+          );
+        }) })
+      ] }),
+      x && x.length > 0 && /* @__PURE__ */ O("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ t("span", { className: "text-neutral-content text-[11px] tracking-wide uppercase", children: "Presets" }),
+        /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: x.map((y) => /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => N(y.value),
+            className: `rounded-md px-2 py-1 text-[11px] transition-colors ${k === y.value ? "bg-primary text-primary-content" : "bg-base-200 text-base-content hover:bg-base-300"}`,
+            children: y.label
+          },
+          y.value
+        )) })
+      ] }),
+      /* @__PURE__ */ O("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ t("span", { className: "text-neutral-content text-[11px] tracking-wide uppercase", children: "Value" }),
+        L === "color" ? /* @__PURE__ */ t(za, { value: k, onChange: N }) : L === "dimension" ? /* @__PURE__ */ t(
+          Oa,
+          {
+            value: k,
+            onChange: N,
+            allowedTypes: Ea,
+            placeholder: "e.g. 1rem",
+            labelHide: !0
+          }
+        ) : L === "number" ? /* @__PURE__ */ t(
+          "input",
+          {
+            type: "number",
+            value: k,
+            onChange: (y) => N(y.target.value),
+            placeholder: "0",
+            className: "border-base-300 bg-base-100 text-base-content focus:border-ring focus:ring-ring rounded-md border px-2 py-1.5 text-xs outline-none focus:ring-1"
+          }
+        ) : /* @__PURE__ */ t(
+          "input",
+          {
+            type: "text",
+            value: k,
+            onChange: (y) => N(y.target.value),
+            placeholder: "Enter value…",
+            className: "border-base-300 bg-base-100 text-base-content focus:border-ring focus:ring-ring rounded-md border px-2 py-1.5 text-xs outline-none focus:ring-1",
+            ...ue
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ O("div", { className: "border-base-300 bg-base-200 flex shrink-0 items-center gap-2 border-t p-2", children: [
+      /* @__PURE__ */ O(
+        "button",
+        {
+          type: "button",
+          onClick: te,
+          disabled: !U,
+          className: "bg-primary text-primary-content hover:bg-primary/90 flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50",
+          children: [
+            /* @__PURE__ */ t(Kt, { className: "size-3", "aria-hidden": !0 }),
+            n ? "Save" : "Create Token"
+          ]
+        }
+      ),
+      n && !c && /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: F,
+          disabled: !B,
+          className: "border-base-300 text-neutral-content hover:border-error hover:text-error flex size-8 shrink-0 items-center justify-center rounded-md border transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-label": o ? "Cannot delete — token is in use" : "Delete token",
+          children: /* @__PURE__ */ t(Jt, { className: "size-3.5", "aria-hidden": !0 })
+        }
+      )
+    ] })
+  ] });
+}
+function za({ value: e, onChange: a }) {
+  return /* @__PURE__ */ O("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ O("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: "border-base-300 size-8 shrink-0 rounded-md border-2",
+          style: { backgroundColor: e || "transparent" }
+        }
+      ),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          type: "text",
+          value: e,
+          onChange: (s) => a(s.target.value),
+          placeholder: "#3b82f6",
+          className: "border-base-300 bg-base-100 text-base-content focus:border-ring focus:ring-ring flex-1 rounded-md border px-2 py-1.5 text-xs outline-none focus:ring-1",
+          ...ue
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { className: "overflow-hidden rounded-md", children: /* @__PURE__ */ t(
+      la,
+      {
+        width: "100%",
+        presetColors: [],
+        styles: {
+          picker: {},
+          saturation: {
+            width: "100%",
+            height: "80px",
+            paddingBottom: "",
+            position: "relative",
+            overflow: "hidden"
+          }
+        },
+        color: e || "#000000",
+        onChangeComplete: (s) => a(s.hex)
+      }
+    ) })
+  ] });
+}
+const Ie = 360, Ha = 480, Da = /* @__PURE__ */ new Set([
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "lineHeight",
+  "tracking",
+  "letterSpacing",
+  "indent"
+]), Fa = /* @__PURE__ */ new Set([
+  "textColor",
+  "backgroundColor",
+  "borderColor",
+  "ringColor",
+  "ringOffsetColor",
+  "outlineColor",
+  "divideColor",
+  "fill",
+  "stroke",
+  "accentColor",
+  "caretColor"
+]), _a = /* @__PURE__ */ new Set([
+  "padding",
+  "margin",
+  "gap",
+  "gapX",
+  "gapY",
+  "spaceX",
+  "spaceY",
+  "width",
+  "height",
+  "maxWidth",
+  "maxHeight",
+  "minWidth",
+  "minHeight",
+  "inset",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "translate",
+  "translateX",
+  "translateY"
+]), $a = /* @__PURE__ */ new Set([
+  "w",
+  "h",
+  "m",
+  "p",
+  "mt",
+  "mb",
+  "ml",
+  "mr",
+  "mx",
+  "my",
+  "pt",
+  "pb",
+  "pl",
+  "pr",
+  "px",
+  "py",
+  "gap"
+]);
+function Ra(e, a) {
+  return a && Da.has(a) ? ["typography"] : a && Fa.has(a) ? ["palette", "colors"] : a && _a.has(a) ? ["spacing", "other"] : e && $a.has(e) ? ["spacing", "other"] : e && (e === "bg" || e === "border") ? ["palette", "colors"] : e === "font" ? ["typography"] : null;
+}
+function Ga({
+  open: e,
+  onOpenChange: a,
+  anchor: s,
+  ignoreOutsideClicks: l,
+  onSelect: i,
+  currentValue: d,
+  propTag: u,
+  tailwindKey: o
+}) {
+  const [n, g] = z({ mode: "list" }), p = _e(), [c] = z(() => {
+    var H;
+    const h = (H = s == null ? void 0 : s.current) == null ? void 0 : H.getBoundingClientRect();
+    if (!h) return;
+    const S = typeof window < "u" ? window.innerWidth : 1200, I = h.right + 8 + Ie <= S ? h.right + 8 : Math.max(8, h.left - Ie - 8), L = Math.max(8, h.top);
+    return { x: I, y: L };
+  });
+  if (!e) return null;
+  const r = Ra(u, o), b = n.mode === "list" ? "Design Variables" : n.mode === "create" ? "New Token" : "Edit Token";
+  return /* @__PURE__ */ t(
+    ot,
+    {
+      isOpen: e,
+      onClose: () => a(!1),
+      title: b,
+      icon: /* @__PURE__ */ t(lt, { className: "size-3.5", "aria-hidden": !0 }),
+      storageKey: "universal-input-var-picker",
+      defaultWidth: Ie,
+      defaultHeight: Ha,
+      minWidth: 300,
+      maxWidth: 520,
+      minHeight: 280,
+      maxHeight: 680,
+      initialPosition: c,
+      zIndex: at,
+      autoSize: !1,
+      persistSize: !1,
+      scrollable: !1,
+      ignoreOutsideClicks: l,
+      children: n.mode === "list" ? /* @__PURE__ */ t(
+        ua,
+        {
+          designVars: p,
+          relevantCategories: r,
+          tailwindKey: o,
+          currentValue: d,
+          onSelect: (h) => {
+            i == null || i(h), a(!1);
+          },
+          onEdit: (h) => g({ mode: "edit", token: h }),
+          onCreate: () => g({ mode: "create" })
+        }
+      ) : /* @__PURE__ */ t(
+        Ia,
+        {
+          mode: n.mode,
+          token: n.mode === "edit" ? n.token : void 0,
+          onBack: () => g({ mode: "list" })
+        }
+      )
+    }
+  );
+}
+const Wa = (e) => {
+  const {
+    propKey: a,
+    propType: s = "class",
+    propTag: l = "",
+    allowedTypes: i,
+    tailwindOptions: d,
+    tailwindKey: u,
+    index: o = null,
+    propItemKey: n,
+    onChange: g = null,
+    overrideType: p
+  } = e, c = Oe(Qt), r = Oe(ea), b = Oe(ta), h = r.dark ?? !1, {
+    actions: { setProp: S },
+    propValue: P,
+    id: I
+  } = ia((R) => {
+    var G;
+    let $;
+    const Z = ((G = R.data) == null ? void 0 : G.props) || {};
+    return s === "class" ? $ = aa(
+      { propKey: a, propType: s, propItemKey: n, index: o },
+      c,
+      Z,
+      h
+    ).value : $ = ra({ propKey: a, propType: s, propItemKey: n, index: o }, c, Z), {
+      propValue: $,
+      id: R.id
+    };
+  }), { query: L, actions: H } = Fe(), [W, T] = z(!1), [k, N] = z(!1), [x, f] = z(""), [w, v] = z(!1), [B, D] = z(0), [m, A] = z(!1), [U, q] = z(!1), te = ee(null), F = ee(null), y = ee(!1), M = ee(!1), E = P || "", _ = X(() => bt(E, l), [E, l]), J = !i || i.includes("tailwind") ? "tailwind" : i[0] || "px", [j, ae] = z(J);
+  oe(() => {
+    p && !E && ae(p);
+  }, [p]), oe(() => {
+    E ? ae(_.type) : p && ae(p);
+  }, [_.type, E, p]), oe(() => {
+    var $;
+    const R = document.activeElement === te.current;
+    if (M.current && E && (M.current = !1), !(w || R || M.current))
+      switch (_.type) {
+        case "tailwind":
+          f(_.value);
+          break;
+        case "var":
+          f(_.value);
+          break;
+        case "calc":
+          f(_.value);
+          break;
+        case "px":
+        case "em":
+        case "rem":
+        case "%":
+        case "vh":
+        case "vw":
+        case "vmin":
+        case "vmax":
+          f((($ = _.numeric) == null ? void 0 : $.toString()) || _.value);
+          break;
+        default:
+          f(E || "");
+      }
+  }, [E, _, w]);
+  const Q = X(() => d || (u && ce[u] ? ce[u] : l ? it.filter(
+    (R) => typeof R == "string" && R.startsWith(`${l}-`)
+  ) : []), [d, u, l]), de = X(() => {
+    var Z;
+    if (!Q.length) return null;
+    const R = l || ((Z = Q[0]) == null ? void 0 : Z.split("-")[0]) || "", $ = {
+      named: [],
+      numeric: [],
+      fractions: [],
+      tokens: [],
+      other: []
+    };
+    if (l === "cursor" || a === "cursor") {
+      const G = [
+        "cursor-auto",
+        "cursor-default",
+        "cursor-pointer",
+        "cursor-wait",
+        "cursor-text",
+        "cursor-move",
+        "cursor-not-allowed",
+        "cursor-grab",
+        "cursor-grabbing"
+      ];
+      return Q.forEach((Y) => {
+        G.includes(Y) ? $.named.push(Y) : $.other.push(Y);
+      }), $;
+    }
+    return Q.forEach((G) => {
+      const Y = G.replace(`${R}-`, ""), re = Y === G;
+      ft(G, R) ? $.tokens.push(G) : re || ["full", "screen", "auto", "min", "max", "fit", "none"].includes(Y) ? $.named.push(G) : Y.includes("/") ? $.fractions.push(G) : /^[\d.]+$/.test(Y) || Y === "px" ? $.numeric.push(G) : $.other.push(G);
+    }), $;
+  }, [Q, l, a]), me = X(() => {
+    if (!x || !w || x === E || x === _.value)
+      return null;
+    const R = x.toLowerCase();
+    return Q.filter(($) => $.toLowerCase().includes(R));
+  }, [x, Q, w, E, _.value]);
+  return {
+    // State
+    showAutocomplete: W,
+    setShowAutocomplete: T,
+    showCalcDialog: k,
+    setShowCalcDialog: N,
+    inputValue: x,
+    setInputValue: f,
+    isEditing: w,
+    setIsEditing: v,
+    selectedIndex: B,
+    setSelectedIndex: D,
+    kbdNavActive: m,
+    setKbdNavActive: A,
+    isTypeSelectorOpen: U,
+    setIsTypeSelectorOpen: q,
+    selectedType: j,
+    setSelectedType: ae,
+    // Refs
+    inputRef: te,
+    typeSelectorRef: F,
+    skipBlurCommitRef: y,
+    pendingUpdateRef: M,
+    // Computed values
+    currentValue: E,
+    parsed: _,
+    availableTailwindOptions: Q,
+    organizedOptions: de,
+    filteredOptions: me,
+    // Handlers
+    handleChange: (R, $) => {
+      const Z = $ || j;
+      let G = Z, Y = R;
+      if (!$ && R && Z !== "calc" && Z !== "tailwind") {
+        if (R.endsWith("%"))
+          G = "%", Y = R.slice(0, -1);
+        else
+          for (const ne of he)
+            if (ne !== "%" && R.endsWith(ne)) {
+              G = ne, Y = R.slice(0, -ne.length);
+              break;
+            }
+      }
+      G !== j && ae(G);
+      const re = gt(Y, G, l);
+      M.current = !0, s === "class" ? na(r, c, b).forEach((Ce) => {
+        Ye({
+          setProp: S,
+          propKey: a,
+          value: re,
+          propType: s,
+          view: Ce,
+          index: o,
+          propItemKey: n,
+          onChange: g,
+          query: L,
+          actions: H,
+          nodeId: I,
+          classDark: h
+        });
+      }) : Ye({
+        setProp: S,
+        propKey: a,
+        value: re,
+        propType: s,
+        view: c,
+        index: o,
+        propItemKey: n,
+        onChange: g,
+        query: L,
+        actions: H,
+        nodeId: I
+      }), setTimeout(() => {
+        M.current && (M.current = !1);
+      }, 500);
+    },
+    // CraftJS data
+    id: I,
+    view: c,
+    modifiers: r,
+    multiScope: b,
+    query: L,
+    actions: H
+  };
+};
+function Ka(e) {
+  const {
+    label: a,
+    labelPrefix: s,
+    labelSuffix: l,
+    labelHide: i = !1,
+    labelWidth: d = "",
+    inputWidth: u = "",
+    placeholder: o = "Enter value",
+    showVarSelector: n = !0,
+    allowedTypes: g,
+    wrap: p = "",
+    index: c = null,
+    propItemKey: r,
+    inline: b = !0,
+    propType: h = "class",
+    propKey: S,
+    propTag: P,
+    tailwindKey: I,
+    hideTypeSelector: L = !1
+  } = e, H = Wa(e), W = xt({ ...H, showVarSelector: n }), T = _e();
+  return /* @__PURE__ */ t(
+    ht,
+    {
+      label: a,
+      labelPrefix: s,
+      labelSuffix: l,
+      labelHide: i,
+      labelWidth: d,
+      inputWidth: u,
+      placeholder: o,
+      showVarSelector: n,
+      allowedTypes: g,
+      wrap: p,
+      index: c,
+      propItemKey: r,
+      inline: b,
+      propType: h,
+      propKey: S,
+      propTag: P,
+      tailwindKey: I,
+      hideTypeSelector: L,
+      renderBreakpointPills: !0,
+      state: H,
+      handlers: W,
+      designVars: T
+    }
+  );
+}
+export {
+  Ka as U
+};