@proveanything/smartlinks-utils-ui 0.1.7 → 0.1.9

package/dist/{chunk-YVHF5JBL.js → chunk-4EEUXIP3.js}

@@ -443,80 +443,143 @@ var CountryPicker = ({
     if (disabled) return;
     onChange(selected.filter((c) => c !== code));
   };
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
+  const triggerStyle = {
+    minHeight: 38,
+    width: "100%",
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 10px",
+    borderRadius: 6,
+    border: `1px solid ${open ? "#3b82f6" : "#d1d5db"}`,
+    backgroundColor: "transparent",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    outline: open ? "1px solid #3b82f6" : "none",
+    transition: "border-color 0.15s"
+  };
+  const chipStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    padding: "2px 8px",
+    borderRadius: 9999,
+    fontSize: 12,
+    fontWeight: 500,
+    backgroundColor: "#dbeafe",
+    color: "#1d4ed8",
+    border: "1px solid #bfdbfe"
+  };
+  const dropdownStyle = {
+    position: "absolute",
+    zIndex: 50,
+    marginTop: 4,
+    width: "100%",
+    maxHeight: 200,
+    overflowY: "auto",
+    borderRadius: 6,
+    border: "1px solid #e5e7eb",
+    backgroundColor: "#ffffff",
+    boxShadow: "0 4px 12px rgba(0,0,0,0.12)"
+  };
+  const inputStyle2 = {
+    flex: 1,
+    minWidth: 120,
+    fontSize: 14,
+    backgroundColor: "transparent",
+    outline: "none",
+    color: "#111827",
+    border: "none"
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: { position: "relative" }, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn(
-          "min-h-[38px] w-full flex flex-wrap items-center gap-1.5 px-2.5 py-1.5",
-          "rounded-md border border-gray-300 dark:border-gray-600 bg-transparent",
-          "cursor-pointer transition-colors",
-          open && "ring-1 ring-blue-500 border-blue-500",
-          disabled && "opacity-50 cursor-not-allowed"
-        ),
+        style: triggerStyle,
         onClick: () => {
           if (disabled) return;
           setOpen(true);
           setTimeout(() => inputRef.current?.focus(), 0);
         },
         children: [
-          selected.map((code) => /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800",
-              children: [
-                getCountryName(code),
-                " (",
-                code,
-                ")",
-                !disabled && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      remove(code);
-                    },
-                    className: "hover:text-blue-900 dark:hover:text-blue-100",
-                    children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
-                  }
-                )
-              ]
-            },
-            code
-          )),
-          selected.length === 0 && !open && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-400", children: placeholder }),
+          selected.map((code) => /* @__PURE__ */ jsxs("span", { style: chipStyle, children: [
+            getCountryName(code),
+            " (",
+            code,
+            ")",
+            !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  remove(code);
+                },
+                style: { background: "none", border: "none", cursor: "pointer", padding: 0, color: "#1d4ed8", fontSize: 14, lineHeight: 1 },
+                children: "\u2715"
+              }
+            )
+          ] }, code)),
+          selected.length === 0 && !open && /* @__PURE__ */ jsx("span", { style: { fontSize: 14, color: "#9ca3af" }, children: placeholder }),
           open && /* @__PURE__ */ jsx(
             "input",
             {
               ref: inputRef,
               value: search,
               onChange: (e) => setSearch(e.target.value),
-              className: "flex-1 min-w-[120px] text-sm bg-transparent outline-none text-gray-900 dark:text-gray-100 placeholder:text-gray-400",
+              style: inputStyle2,
               placeholder,
               onClick: (e) => e.stopPropagation()
             }
           ),
-          /* @__PURE__ */ jsx(ChevronDown, { className: cn("w-4 h-4 text-gray-400 ml-auto flex-shrink-0 transition-transform", open && "rotate-180") })
+          /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto", flexShrink: 0, fontSize: 12, color: "#9ca3af", transition: "transform 0.15s", transform: open ? "rotate(180deg)" : "none" }, children: "\u25BC" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 w-full max-h-[200px] overflow-y-auto rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg", children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-gray-400", children: "No countries found" }) : filtered.map((country) => {
+    open && /* @__PURE__ */ jsx("div", { style: dropdownStyle, children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "8px 12px", fontSize: 14, color: "#9ca3af" }, children: "No countries found" }) : filtered.map((country) => {
       const isSelected = selected.includes(country.code);
       return /* @__PURE__ */ jsxs(
         "button",
         {
+          type: "button",
           onClick: () => toggle(country.code),
-          className: cn(
-            "w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors",
-            isSelected ? "bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300" : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
-          ),
+          style: {
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "6px 12px",
+            fontSize: 14,
+            textAlign: "left",
+            border: "none",
+            cursor: "pointer",
+            transition: "background-color 0.1s",
+            backgroundColor: isSelected ? "#eff6ff" : "transparent",
+            color: isSelected ? "#1d4ed8" : "#374151"
+          },
+          onMouseEnter: (e) => {
+            if (!isSelected) e.currentTarget.style.backgroundColor = "#f9fafb";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = isSelected ? "#eff6ff" : "transparent";
+          },
           children: [
-            /* @__PURE__ */ jsx("span", { className: cn(
-              "w-4 h-4 rounded border flex items-center justify-center flex-shrink-0 transition-colors",
-              isSelected ? "bg-blue-500 border-blue-500 text-white" : "border-gray-300 dark:border-gray-600"
-            ), children: isSelected && /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M2 6l3 3 5-5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
-            /* @__PURE__ */ jsx("span", { className: "flex-1", children: country.name }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 font-mono", children: country.code })
+            /* @__PURE__ */ jsx("span", { style: {
+              width: 16,
+              height: 16,
+              borderRadius: 3,
+              border: `1px solid ${isSelected ? "#3b82f6" : "#d1d5db"}`,
+              backgroundColor: isSelected ? "#3b82f6" : "transparent",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              color: "#ffffff",
+              fontSize: 10
+            }, children: isSelected && "\u2713" }),
+            /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: country.name }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#9ca3af", fontFamily: "monospace" }, children: country.code })
           ]
         },
         country.code
@@ -524,40 +587,120 @@ var CountryPicker = ({
     }) })
   ] });
 };
-var ContainsToggle = ({ value = true, onChange, trueLabel = "Is One Of", falseLabel = "Is Not One Of", disabled }) => /* @__PURE__ */ jsx("div", { className: "flex gap-1 bg-gray-100 dark:bg-gray-800 rounded-md p-1 w-fit", children: [{ v: true, label: trueLabel }, { v: false, label: falseLabel }].map((opt) => /* @__PURE__ */ jsx(
+var ContainsToggle = ({ value = true, onChange, trueLabel = "Is One Of", falseLabel = "Is Not One Of", disabled }) => /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4, backgroundColor: "#f3f4f6", borderRadius: 6, padding: 4, width: "fit-content" }, children: [{ v: true, label: trueLabel }, { v: false, label: falseLabel }].map((opt) => /* @__PURE__ */ jsx(
   "button",
   {
+    type: "button",
     onClick: () => onChange(opt.v),
     disabled,
-    className: cn(
-      "px-3 py-1.5 text-xs font-semibold rounded transition-all",
-      value === opt.v ? "bg-blue-500 text-white shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"
-    ),
+    style: {
+      padding: "6px 12px",
+      fontSize: 12,
+      fontWeight: 600,
+      borderRadius: 4,
+      border: "none",
+      cursor: disabled ? "default" : "pointer",
+      transition: "all 0.15s",
+      ...value === opt.v ? { backgroundColor: "#3b82f6", color: "#ffffff", boxShadow: "0 1px 2px rgba(0,0,0,0.1)" } : { backgroundColor: "transparent", color: "#6b7280" }
+    },
     children: opt.label
   },
   String(opt.v)
 )) });
-var ChipSelect = ({ options, selected, onChange, disabled }) => /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: options.map((opt) => {
+var ToggleSwitch = ({ checked, onChange, label, disabled }) => /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 12, fontWeight: 500, color: "#4b5563", cursor: "pointer", userSelect: "none" }, children: [
+  /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onChange(!checked),
+      disabled,
+      style: {
+        width: 36,
+        height: 20,
+        borderRadius: 10,
+        border: "none",
+        cursor: disabled ? "default" : "pointer",
+        position: "relative",
+        flexShrink: 0,
+        transition: "background-color 0.2s",
+        backgroundColor: checked ? "#3b82f6" : "#d1d5db"
+      },
+      children: /* @__PURE__ */ jsx("span", { style: {
+        position: "absolute",
+        top: 2,
+        width: 16,
+        height: 16,
+        borderRadius: "50%",
+        backgroundColor: "#ffffff",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
+        transition: "transform 0.2s",
+        transform: checked ? "translateX(18px)" : "translateX(2px)"
+      } })
+    }
+  ),
+  label
+] });
+var ChipSelect = ({ options, selected, onChange, disabled }) => /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: options.map((opt) => {
   const isSelected = selected.includes(opt.value);
   return /* @__PURE__ */ jsx(
     "button",
     {
+      type: "button",
       onClick: () => {
         if (disabled) return;
         onChange(isSelected ? selected.filter((v) => v !== opt.value) : [...selected, opt.value]);
       },
       disabled,
       title: opt.description,
-      className: cn(
-        "px-2.5 py-1 text-xs rounded-full border transition-colors",
-        isSelected ? "bg-blue-100 dark:bg-blue-900/40 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300" : "border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600"
-      ),
+      style: {
+        padding: "4px 10px",
+        fontSize: 12,
+        borderRadius: 9999,
+        border: "1px solid",
+        cursor: disabled ? "default" : "pointer",
+        transition: "all 0.15s",
+        ...isSelected ? { backgroundColor: "#dbeafe", borderColor: "#93c5fd", color: "#1d4ed8" } : { backgroundColor: "transparent", borderColor: "#e5e7eb", color: "#6b7280" }
+      },
       children: opt.title
     },
     opt.value
   );
 }) });
-var inputClass = "w-full px-2.5 py-1.5 text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-500";
+var inputStyle = {
+  width: "100%",
+  padding: "6px 10px",
+  fontSize: 14,
+  borderRadius: 6,
+  border: "1px solid #d1d5db",
+  backgroundColor: "transparent",
+  outline: "none"
+};
+var labelStyle = {
+  fontSize: 10,
+  color: "#9ca3af",
+  marginBottom: 2,
+  display: "block"
+};
+var PillGroup = ({ options, selected, onChange, disabled }) => /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4, backgroundColor: "#f3f4f6", borderRadius: 6, padding: 4, width: "fit-content" }, children: options.map((opt) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    onClick: () => onChange(opt.value),
+    disabled,
+    style: {
+      padding: "6px 12px",
+      fontSize: 12,
+      fontWeight: 600,
+      borderRadius: 4,
+      border: "none",
+      cursor: disabled ? "default" : "pointer",
+      transition: "all 0.15s",
+      ...selected === opt.value ? { backgroundColor: "#3b82f6", color: "#ffffff", boxShadow: "0 1px 2px rgba(0,0,0,0.1)" } : { backgroundColor: "transparent", color: "#6b7280" }
+    },
+    children: opt.label
+  },
+  opt.value
+)) });
 var ConditionConfig = ({
   condition: cond,
   onChange,
@@ -568,7 +711,7 @@ var ConditionConfig = ({
   switch (cond.type) {
     // ─── VERSION ──────────────────────────────────
     case "version":
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
         /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), disabled: readOnly }),
         editorProps.versions?.length ? /* @__PURE__ */ jsx(
           ChipSelect,
@@ -578,30 +721,21 @@ var ConditionConfig = ({
             onChange: (vals) => update({ versions: vals.map((v) => ({ value: v, title: editorProps.versions?.find((o) => o.value === v)?.title || v })) }),
             disabled: readOnly
           }
-        ) : /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 italic", children: "No versions available" })
+        ) : /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "#9ca3af", fontStyle: "italic" }, children: "No versions available" })
       ] });
     // ─── COUNTRY ──────────────────────────────────
     case "country":
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
         /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), disabled: readOnly }),
-        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 cursor-pointer select-none", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => update({ useRegions: !cond.useRegions }),
-              disabled: readOnly,
-              className: cn(
-                "w-9 h-5 rounded-full transition-colors relative flex-shrink-0",
-                cond.useRegions ? "bg-blue-500" : "bg-gray-300 dark:bg-gray-600"
-              ),
-              children: /* @__PURE__ */ jsx("span", { className: cn(
-                "absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform",
-                cond.useRegions ? "translate-x-4" : "translate-x-0.5"
-              ) })
-            }
-          ),
-          "Use regions"
-        ] }),
+        /* @__PURE__ */ jsx(
+          ToggleSwitch,
+          {
+            checked: !!cond.useRegions,
+            onChange: (v) => update({ useRegions: v }),
+            label: "Use regions",
+            disabled: readOnly
+          }
+        ),
         cond.useRegions ? /* @__PURE__ */ jsx(
           ChipSelect,
           {
@@ -621,31 +755,31 @@ var ConditionConfig = ({
       ] });
     // ─── VALUE ────────────────────────────────────
     case "value":
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }, children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: "Field Name" }),
-            /* @__PURE__ */ jsx("input", { className: inputClass, value: cond.field || "", onChange: (e) => update({ field: e.target.value }), placeholder: "field_name", disabled: readOnly })
+            /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Field Name" }),
+            /* @__PURE__ */ jsx("input", { style: inputStyle, value: cond.field || "", onChange: (e) => update({ field: e.target.value }), placeholder: "field_name", disabled: readOnly })
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: "Field Type" }),
-            /* @__PURE__ */ jsx("select", { className: inputClass, value: cond.fieldType || "text", onChange: (e) => update({ fieldType: e.target.value }), disabled: readOnly, children: FIELD_TYPES.map((ft) => /* @__PURE__ */ jsx("option", { value: ft.value, children: ft.title }, ft.value)) })
+            /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Field Type" }),
+            /* @__PURE__ */ jsx("select", { style: inputStyle, value: cond.fieldType || "text", onChange: (e) => update({ fieldType: e.target.value }), disabled: readOnly, children: FIELD_TYPES.map((ft) => /* @__PURE__ */ jsx("option", { value: ft.value, children: ft.title }, ft.value)) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }, children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: "Operator" }),
-            /* @__PURE__ */ jsx("select", { className: inputClass, value: cond.validationType || "equal", onChange: (e) => update({ validationType: e.target.value }), disabled: readOnly, children: VALUE_OPERATORS.map((op) => /* @__PURE__ */ jsx("option", { value: op.value, children: op.title }, op.value)) })
+            /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Operator" }),
+            /* @__PURE__ */ jsx("select", { style: inputStyle, value: cond.validationType || "equal", onChange: (e) => update({ validationType: e.target.value }), disabled: readOnly, children: VALUE_OPERATORS.map((op) => /* @__PURE__ */ jsx("option", { value: op.value, children: op.title }, op.value)) })
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: "Value" }),
-            /* @__PURE__ */ jsx("input", { className: inputClass, value: String(cond.value ?? ""), onChange: (e) => update({ value: e.target.value }), placeholder: "value", disabled: readOnly })
+            /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Value" }),
+            /* @__PURE__ */ jsx("input", { style: inputStyle, value: String(cond.value ?? ""), onChange: (e) => update({ value: e.target.value }), placeholder: "value", disabled: readOnly })
           ] })
         ] })
       ] });
     // ─── USER ─────────────────────────────────────
     case "user":
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
         /* @__PURE__ */ jsx(
           ChipSelect,
           {
@@ -667,35 +801,32 @@ var ConditionConfig = ({
       ] });
     // ─── DATE ─────────────────────────────────────
     case "date":
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex gap-1 bg-gray-100 dark:bg-gray-800 rounded-md p-1 w-fit", children: ["before", "after", "between"].map((dt) => /* @__PURE__ */ jsxs(
-          "button",
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+        /* @__PURE__ */ jsx(
+          PillGroup,
           {
-            onClick: () => update({ dateTest: dt }),
-            disabled: readOnly,
-            className: cn(
-              "px-3 py-1.5 text-xs font-semibold rounded transition-all capitalize",
-              cond.dateTest === dt ? "bg-blue-500 text-white shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"
-            ),
-            children: [
-              "Is ",
-              dt
-            ]
-          },
-          dt
-        )) }),
+            options: [
+              { value: "before", label: "Is Before" },
+              { value: "after", label: "Is After" },
+              { value: "between", label: "Is Between" }
+            ],
+            selected: cond.dateTest,
+            onChange: (v) => update({ dateTest: v }),
+            disabled: readOnly
+          }
+        ),
         (cond.dateTest === "before" || cond.dateTest === "between") && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: cond.dateTest === "between" ? "Start Date" : "Before Date" }),
-          /* @__PURE__ */ jsx("input", { type: "date", className: inputClass, value: cond.beforeDate || "", onChange: (e) => update({ beforeDate: e.target.value }), disabled: readOnly })
+          /* @__PURE__ */ jsx("label", { style: labelStyle, children: cond.dateTest === "between" ? "Start Date" : "Before Date" }),
+          /* @__PURE__ */ jsx("input", { type: "date", style: inputStyle, value: cond.beforeDate || "", onChange: (e) => update({ beforeDate: e.target.value }), disabled: readOnly })
         ] }),
         (cond.dateTest === "after" || cond.dateTest === "between") && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: cond.dateTest === "between" ? "End Date" : "After Date" }),
-          /* @__PURE__ */ jsx("input", { type: "date", className: inputClass, value: cond.afterDate || "", onChange: (e) => update({ afterDate: e.target.value }), disabled: readOnly })
+          /* @__PURE__ */ jsx("label", { style: labelStyle, children: cond.dateTest === "between" ? "End Date" : "After Date" }),
+          /* @__PURE__ */ jsx("input", { type: "date", style: inputStyle, value: cond.afterDate || "", onChange: (e) => update({ afterDate: e.target.value }), disabled: readOnly })
         ] })
       ] });
     // ─── DEVICE ───────────────────────────────────
     case "device":
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
         /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), disabled: readOnly }),
         /* @__PURE__ */ jsx(
           ChipSelect,
@@ -709,7 +840,7 @@ var ConditionConfig = ({
       ] });
     // ─── TAG ──────────────────────────────────────
     case "tag":
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
         /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), disabled: readOnly }),
         editorProps.tags?.length ? /* @__PURE__ */ jsx(
           ChipSelect,
@@ -719,25 +850,25 @@ var ConditionConfig = ({
             onChange: (vals) => update({ tags: vals }),
             disabled: readOnly
           }
-        ) : /* @__PURE__ */ jsx("input", { className: inputClass, value: (cond.tags || []).join(", "), onChange: (e) => update({ tags: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) }), placeholder: "tag1, tag2, \u2026", disabled: readOnly })
+        ) : /* @__PURE__ */ jsx("input", { style: inputStyle, value: (cond.tags || []).join(", "), onChange: (e) => update({ tags: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) }), placeholder: "tag1, tag2, \u2026", disabled: readOnly })
       ] });
     // ─── GEOFENCE ─────────────────────────────────
     case "geofence":
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
         /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), trueLabel: "Is Inside Of", falseLabel: "Is Outside Of", disabled: readOnly }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }, children: [
           { label: "Latitude 1 (NW)", key: "lat1" },
           { label: "Longitude 1 (NW)", key: "lng1" },
           { label: "Latitude 2 (SE)", key: "lat2" },
           { label: "Longitude 2 (SE)", key: "lng2" }
         ].map((f) => /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-400 mb-0.5 block", children: f.label }),
+          /* @__PURE__ */ jsx("label", { style: labelStyle, children: f.label }),
           /* @__PURE__ */ jsx(
             "input",
             {
               type: "number",
               step: "any",
-              className: inputClass,
+              style: inputStyle,
               value: cond[f.key] ?? "",
               onChange: (e) => update({ [f.key]: e.target.value ? parseFloat(e.target.value) : void 0 }),
               disabled: readOnly
@@ -747,7 +878,7 @@ var ConditionConfig = ({
       ] });
     // ─── PRODUCT ──────────────────────────────────
     case "product":
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
         /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), disabled: readOnly }),
         editorProps.products?.length ? /* @__PURE__ */ jsx(
           ChipSelect,
@@ -757,7 +888,7 @@ var ConditionConfig = ({
             onChange: (vals) => update({ productIds: vals }),
             disabled: readOnly
           }
-        ) : /* @__PURE__ */ jsx("input", { className: inputClass, value: (cond.productIds || []).join(", "), onChange: (e) => update({ productIds: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) }), placeholder: "product-id-1, product-id-2, \u2026", disabled: readOnly })
+        ) : /* @__PURE__ */ jsx("input", { style: inputStyle, value: (cond.productIds || []).join(", "), onChange: (e) => update({ productIds: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) }), placeholder: "product-id-1, product-id-2, \u2026", disabled: readOnly })
       ] });
     // ─── ITEM STATUS ──────────────────────────────
     case "itemStatus":
@@ -772,27 +903,26 @@ var ConditionConfig = ({
       );
     // ─── CONDITION REFERENCE ──────────────────────
     case "condition":
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        editorProps.savedConditions?.length ? /* @__PURE__ */ jsxs("select", { className: inputClass, value: cond.conditionId || "", onChange: (e) => update({ conditionId: e.target.value }), disabled: readOnly, children: [
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+        editorProps.savedConditions?.length ? /* @__PURE__ */ jsxs("select", { style: inputStyle, value: cond.conditionId || "", onChange: (e) => update({ conditionId: e.target.value }), disabled: readOnly, children: [
           /* @__PURE__ */ jsx("option", { value: "", children: "Select a condition\u2026" }),
           editorProps.savedConditions.map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.title }, c.value))
-        ] }) : /* @__PURE__ */ jsx("input", { className: inputClass, value: cond.conditionId || "", onChange: (e) => update({ conditionId: e.target.value }), placeholder: "Condition ID", disabled: readOnly }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-1 bg-gray-100 dark:bg-gray-800 rounded-md p-1 w-fit", children: [{ v: true, l: "Passes" }, { v: false, l: "Fails" }].map((opt) => /* @__PURE__ */ jsx(
-          "button",
+        ] }) : /* @__PURE__ */ jsx("input", { style: inputStyle, value: cond.conditionId || "", onChange: (e) => update({ conditionId: e.target.value }), placeholder: "Condition ID", disabled: readOnly }),
+        /* @__PURE__ */ jsx(
+          PillGroup,
           {
-            onClick: () => update({ passes: opt.v }),
-            disabled: readOnly,
-            className: cn(
-              "px-3 py-1.5 text-xs font-semibold rounded transition-all",
-              cond.passes === opt.v ? "bg-blue-500 text-white shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"
-            ),
-            children: opt.l
-          },
-          String(opt.v)
-        )) })
+            options: [
+              { value: "true", label: "Passes" },
+              { value: "false", label: "Fails" }
+            ],
+            selected: cond.passes === true ? "true" : cond.passes === false ? "false" : void 0,
+            onChange: (v) => update({ passes: v === "true" }),
+            disabled: readOnly
+          }
+        )
       ] });
     default:
-      return /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 italic", children: "Unknown condition type" });
+      return /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "#9ca3af", fontStyle: "italic" }, children: "Unknown condition type" });
   }
 };
 var ConditionCard = ({
@@ -811,7 +941,7 @@ var ConditionCard = ({
     onChange({ ...condition, type });
     setExpanded(true);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden shadow-sm transition-shadow hover:shadow-md", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm transition-shadow hover:shadow-md", children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1006,37 +1136,32 @@ var ConditionsEditorContent = ({
         "Disabled / Hidden"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-gray-200 dark:border-gray-700 p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 mb-3", children: [
+    /* @__PURE__ */ jsxs("div", { style: { borderRadius: 8, border: "1px solid #e5e7eb", padding: 16 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 500, color: "#6b7280", marginBottom: 12 }, children: [
         /* @__PURE__ */ jsx(GitBranch, { className: "w-3.5 h-3.5" }),
         "Logic Type"
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-1 bg-gray-100 dark:bg-gray-800 rounded-md p-1", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => toggleLogic("and"),
-            disabled: readOnly,
-            className: cn(
-              "flex-1 px-3 py-2 text-sm font-semibold rounded transition-all",
-              value.type === "and" ? "bg-blue-500 text-white shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"
-            ),
-            children: "Match ALL (AND)"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => toggleLogic("or"),
-            disabled: readOnly,
-            className: cn(
-              "flex-1 px-3 py-2 text-sm font-semibold rounded transition-all",
-              value.type === "or" ? "bg-blue-500 text-white shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"
-            ),
-            children: "Match ANY (OR)"
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4, backgroundColor: "#f3f4f6", borderRadius: 6, padding: 4 }, children: [{ v: "and", l: "Match ALL (AND)" }, { v: "or", l: "Match ANY (OR)" }].map((opt) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => toggleLogic(opt.v),
+          disabled: readOnly,
+          style: {
+            flex: 1,
+            padding: "8px 12px",
+            fontSize: 14,
+            fontWeight: 600,
+            borderRadius: 4,
+            border: "none",
+            cursor: readOnly ? "default" : "pointer",
+            transition: "all 0.15s",
+            ...value.type === opt.v ? { backgroundColor: "#3b82f6", color: "#ffffff", boxShadow: "0 1px 2px rgba(0,0,0,0.1)" } : { backgroundColor: "transparent", color: "#6b7280" }
+          },
+          children: opt.l
+        },
+        opt.v
+      )) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-gray-700 dark:text-gray-300", children: "Conditions" }),
@@ -1096,5 +1221,5 @@ var ConditionsEditor = (props) => {
 };
 
 export { ConditionsEditor };
-//# sourceMappingURL=chunk-YVHF5JBL.js.map
-//# sourceMappingURL=chunk-YVHF5JBL.js.map
+//# sourceMappingURL=chunk-4EEUXIP3.js.map
+//# sourceMappingURL=chunk-4EEUXIP3.js.map