@proveanything/smartlinks-utils-ui 0.1.6 → 0.1.8

package/dist/{chunk-IVUFK6SS.js → chunk-ILQNQN27.js}

@@ -1,5 +1,5 @@
 import { cn } from './chunk-L7FQ52F5.js';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useMemo, useEffect } from 'react';
 import { GitBranch, Plus, Filter, ChevronRight, X, RefreshCw, Trash2, ChevronDown, ToggleLeft, Package, MapPin, Tag, Monitor, Calendar, User, Hash, Globe, Tags } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -202,40 +202,442 @@ var ConditionTypePicker = ({ onSelect }) => {
     }) })
   ] });
 };
-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-0.5 w-fit", children: [{ v: true, label: trueLabel }, { v: false, label: falseLabel }].map((opt) => /* @__PURE__ */ jsx(
+
+// src/components/ConditionsEditor/countries.ts
+var COUNTRIES = [
+  { code: "AF", name: "Afghanistan" },
+  { code: "AL", name: "Albania" },
+  { code: "DZ", name: "Algeria" },
+  { code: "AD", name: "Andorra" },
+  { code: "AO", name: "Angola" },
+  { code: "AG", name: "Antigua and Barbuda" },
+  { code: "AR", name: "Argentina" },
+  { code: "AM", name: "Armenia" },
+  { code: "AU", name: "Australia" },
+  { code: "AT", name: "Austria" },
+  { code: "AZ", name: "Azerbaijan" },
+  { code: "BS", name: "Bahamas" },
+  { code: "BH", name: "Bahrain" },
+  { code: "BD", name: "Bangladesh" },
+  { code: "BB", name: "Barbados" },
+  { code: "BY", name: "Belarus" },
+  { code: "BE", name: "Belgium" },
+  { code: "BZ", name: "Belize" },
+  { code: "BJ", name: "Benin" },
+  { code: "BT", name: "Bhutan" },
+  { code: "BO", name: "Bolivia" },
+  { code: "BA", name: "Bosnia and Herzegovina" },
+  { code: "BW", name: "Botswana" },
+  { code: "BR", name: "Brazil" },
+  { code: "BN", name: "Brunei" },
+  { code: "BG", name: "Bulgaria" },
+  { code: "BF", name: "Burkina Faso" },
+  { code: "BI", name: "Burundi" },
+  { code: "CV", name: "Cabo Verde" },
+  { code: "KH", name: "Cambodia" },
+  { code: "CM", name: "Cameroon" },
+  { code: "CA", name: "Canada" },
+  { code: "CF", name: "Central African Republic" },
+  { code: "TD", name: "Chad" },
+  { code: "CL", name: "Chile" },
+  { code: "CN", name: "China" },
+  { code: "CO", name: "Colombia" },
+  { code: "KM", name: "Comoros" },
+  { code: "CG", name: "Congo" },
+  { code: "CD", name: "Congo (DRC)" },
+  { code: "CR", name: "Costa Rica" },
+  { code: "CI", name: "C\xF4te d'Ivoire" },
+  { code: "HR", name: "Croatia" },
+  { code: "CU", name: "Cuba" },
+  { code: "CY", name: "Cyprus" },
+  { code: "CZ", name: "Czechia" },
+  { code: "DK", name: "Denmark" },
+  { code: "DJ", name: "Djibouti" },
+  { code: "DM", name: "Dominica" },
+  { code: "DO", name: "Dominican Republic" },
+  { code: "EC", name: "Ecuador" },
+  { code: "EG", name: "Egypt" },
+  { code: "SV", name: "El Salvador" },
+  { code: "GQ", name: "Equatorial Guinea" },
+  { code: "ER", name: "Eritrea" },
+  { code: "EE", name: "Estonia" },
+  { code: "SZ", name: "Eswatini" },
+  { code: "ET", name: "Ethiopia" },
+  { code: "FJ", name: "Fiji" },
+  { code: "FI", name: "Finland" },
+  { code: "FR", name: "France" },
+  { code: "GA", name: "Gabon" },
+  { code: "GM", name: "Gambia" },
+  { code: "GE", name: "Georgia" },
+  { code: "DE", name: "Germany" },
+  { code: "GH", name: "Ghana" },
+  { code: "GR", name: "Greece" },
+  { code: "GD", name: "Grenada" },
+  { code: "GT", name: "Guatemala" },
+  { code: "GN", name: "Guinea" },
+  { code: "GW", name: "Guinea-Bissau" },
+  { code: "GY", name: "Guyana" },
+  { code: "HT", name: "Haiti" },
+  { code: "HN", name: "Honduras" },
+  { code: "HU", name: "Hungary" },
+  { code: "IS", name: "Iceland" },
+  { code: "IN", name: "India" },
+  { code: "ID", name: "Indonesia" },
+  { code: "IR", name: "Iran" },
+  { code: "IQ", name: "Iraq" },
+  { code: "IE", name: "Ireland" },
+  { code: "IL", name: "Israel" },
+  { code: "IT", name: "Italy" },
+  { code: "JM", name: "Jamaica" },
+  { code: "JP", name: "Japan" },
+  { code: "JO", name: "Jordan" },
+  { code: "KZ", name: "Kazakhstan" },
+  { code: "KE", name: "Kenya" },
+  { code: "KI", name: "Kiribati" },
+  { code: "KP", name: "North Korea" },
+  { code: "KR", name: "South Korea" },
+  { code: "KW", name: "Kuwait" },
+  { code: "KG", name: "Kyrgyzstan" },
+  { code: "LA", name: "Laos" },
+  { code: "LV", name: "Latvia" },
+  { code: "LB", name: "Lebanon" },
+  { code: "LS", name: "Lesotho" },
+  { code: "LR", name: "Liberia" },
+  { code: "LY", name: "Libya" },
+  { code: "LI", name: "Liechtenstein" },
+  { code: "LT", name: "Lithuania" },
+  { code: "LU", name: "Luxembourg" },
+  { code: "MG", name: "Madagascar" },
+  { code: "MW", name: "Malawi" },
+  { code: "MY", name: "Malaysia" },
+  { code: "MV", name: "Maldives" },
+  { code: "ML", name: "Mali" },
+  { code: "MT", name: "Malta" },
+  { code: "MH", name: "Marshall Islands" },
+  { code: "MR", name: "Mauritania" },
+  { code: "MU", name: "Mauritius" },
+  { code: "MX", name: "Mexico" },
+  { code: "FM", name: "Micronesia" },
+  { code: "MD", name: "Moldova" },
+  { code: "MC", name: "Monaco" },
+  { code: "MN", name: "Mongolia" },
+  { code: "ME", name: "Montenegro" },
+  { code: "MA", name: "Morocco" },
+  { code: "MZ", name: "Mozambique" },
+  { code: "MM", name: "Myanmar" },
+  { code: "NA", name: "Namibia" },
+  { code: "NR", name: "Nauru" },
+  { code: "NP", name: "Nepal" },
+  { code: "NL", name: "Netherlands" },
+  { code: "NZ", name: "New Zealand" },
+  { code: "NI", name: "Nicaragua" },
+  { code: "NE", name: "Niger" },
+  { code: "NG", name: "Nigeria" },
+  { code: "MK", name: "North Macedonia" },
+  { code: "NO", name: "Norway" },
+  { code: "OM", name: "Oman" },
+  { code: "PK", name: "Pakistan" },
+  { code: "PW", name: "Palau" },
+  { code: "PS", name: "Palestine" },
+  { code: "PA", name: "Panama" },
+  { code: "PG", name: "Papua New Guinea" },
+  { code: "PY", name: "Paraguay" },
+  { code: "PE", name: "Peru" },
+  { code: "PH", name: "Philippines" },
+  { code: "PL", name: "Poland" },
+  { code: "PT", name: "Portugal" },
+  { code: "QA", name: "Qatar" },
+  { code: "RO", name: "Romania" },
+  { code: "RU", name: "Russia" },
+  { code: "RW", name: "Rwanda" },
+  { code: "KN", name: "Saint Kitts and Nevis" },
+  { code: "LC", name: "Saint Lucia" },
+  { code: "VC", name: "Saint Vincent and the Grenadines" },
+  { code: "WS", name: "Samoa" },
+  { code: "SM", name: "San Marino" },
+  { code: "ST", name: "S\xE3o Tom\xE9 and Pr\xEDncipe" },
+  { code: "SA", name: "Saudi Arabia" },
+  { code: "SN", name: "Senegal" },
+  { code: "RS", name: "Serbia" },
+  { code: "SC", name: "Seychelles" },
+  { code: "SL", name: "Sierra Leone" },
+  { code: "SG", name: "Singapore" },
+  { code: "SK", name: "Slovakia" },
+  { code: "SI", name: "Slovenia" },
+  { code: "SB", name: "Solomon Islands" },
+  { code: "SO", name: "Somalia" },
+  { code: "ZA", name: "South Africa" },
+  { code: "SS", name: "South Sudan" },
+  { code: "ES", name: "Spain" },
+  { code: "LK", name: "Sri Lanka" },
+  { code: "SD", name: "Sudan" },
+  { code: "SR", name: "Suriname" },
+  { code: "SE", name: "Sweden" },
+  { code: "CH", name: "Switzerland" },
+  { code: "SY", name: "Syria" },
+  { code: "TW", name: "Taiwan" },
+  { code: "TJ", name: "Tajikistan" },
+  { code: "TZ", name: "Tanzania" },
+  { code: "TH", name: "Thailand" },
+  { code: "TL", name: "Timor-Leste" },
+  { code: "TG", name: "Togo" },
+  { code: "TO", name: "Tonga" },
+  { code: "TT", name: "Trinidad and Tobago" },
+  { code: "TN", name: "Tunisia" },
+  { code: "TR", name: "Turkey" },
+  { code: "TM", name: "Turkmenistan" },
+  { code: "TV", name: "Tuvalu" },
+  { code: "UG", name: "Uganda" },
+  { code: "UA", name: "Ukraine" },
+  { code: "AE", name: "United Arab Emirates" },
+  { code: "GB", name: "United Kingdom" },
+  { code: "US", name: "United States" },
+  { code: "UY", name: "Uruguay" },
+  { code: "UZ", name: "Uzbekistan" },
+  { code: "VU", name: "Vanuatu" },
+  { code: "VA", name: "Vatican City" },
+  { code: "VE", name: "Venezuela" },
+  { code: "VN", name: "Vietnam" },
+  { code: "YE", name: "Yemen" },
+  { code: "ZM", name: "Zambia" },
+  { code: "ZW", name: "Zimbabwe" }
+];
+function getCountryName(code) {
+  return COUNTRIES.find((c) => c.code === code.toUpperCase())?.name || code;
+}
+var CountryPicker = ({
+  selected,
+  onChange,
+  disabled,
+  placeholder = "Search countries\u2026"
+}) => {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+  const filtered = useMemo(() => {
+    if (!search) return COUNTRIES;
+    const q = search.toLowerCase();
+    return COUNTRIES.filter(
+      (c) => c.name.toLowerCase().includes(q) || c.code.toLowerCase().includes(q)
+    );
+  }, [search]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+        setSearch("");
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  const toggle = (code) => {
+    if (disabled) return;
+    onChange(
+      selected.includes(code) ? selected.filter((c) => c !== code) : [...selected, code]
+    );
+  };
+  const remove = (code) => {
+    if (disabled) return;
+    onChange(selected.filter((c) => c !== code));
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "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"
+        ),
+        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 }),
+          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",
+              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") })
+        ]
+      }
+    ),
+    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) => {
+      const isSelected = selected.includes(country.code);
+      return /* @__PURE__ */ jsxs(
+        "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"
+          ),
+          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 })
+          ]
+        },
+        country.code
+      );
+    }) })
+  ] });
+};
+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-2.5 py-1 text-xs font-medium rounded transition-colors",
-      value === opt.v ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-    ),
+    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,
@@ -246,7 +648,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,
@@ -256,30 +658,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("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("label", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Use regions" }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => update({ useRegions: !cond.useRegions }),
-              disabled: readOnly,
-              className: cn(
-                "w-8 h-5 rounded-full transition-colors relative",
-                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-3.5" : "translate-x-0.5"
-              ) })
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsx(
+          ToggleSwitch,
+          {
+            checked: !!cond.useRegions,
+            onChange: (v) => update({ useRegions: v }),
+            label: "Use regions",
+            disabled: readOnly
+          }
+        ),
         cond.useRegions ? /* @__PURE__ */ jsx(
           ChipSelect,
           {
@@ -289,43 +682,41 @@ var ConditionConfig = ({
             disabled: readOnly
           }
         ) : /* @__PURE__ */ jsx(
-          "input",
+          CountryPicker,
           {
-            className: inputClass,
-            value: (cond.countries || []).join(", "),
-            onChange: (e) => update({ countries: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) }),
-            placeholder: "US, GB, DE, \u2026",
+            selected: cond.countries || [],
+            onChange: (codes) => update({ countries: codes }),
             disabled: readOnly
           }
         )
       ] });
     // ─── 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,
           {
@@ -347,35 +738,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-0.5 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-2.5 py-1 text-xs font-medium rounded transition-colors capitalize",
-              cond.dateTest === dt ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm" : "text-gray-500 dark:text-gray-400"
-            ),
-            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,
@@ -389,7 +777,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,
@@ -399,25 +787,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
@@ -427,7 +815,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,
@@ -437,7 +825,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":
@@ -452,27 +840,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-0.5 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-2.5 py-1 text-xs font-medium rounded transition-colors",
-              cond.passes === opt.v ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm" : "text-gray-500 dark:text-gray-400"
-            ),
-            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 = ({
@@ -686,37 +1073,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-0.5", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => toggleLogic("and"),
-            disabled: readOnly,
-            className: cn(
-              "flex-1 px-3 py-2 text-sm font-medium rounded transition-colors",
-              value.type === "and" ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-            ),
-            children: "Match ALL (AND)"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => toggleLogic("or"),
-            disabled: readOnly,
-            className: cn(
-              "flex-1 px-3 py-2 text-sm font-medium rounded transition-colors",
-              value.type === "or" ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-            ),
-            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" }),
@@ -776,5 +1158,5 @@ var ConditionsEditor = (props) => {
 };
 
 export { ConditionsEditor };
-//# sourceMappingURL=chunk-IVUFK6SS.js.map
-//# sourceMappingURL=chunk-IVUFK6SS.js.map
+//# sourceMappingURL=chunk-ILQNQN27.js.map
+//# sourceMappingURL=chunk-ILQNQN27.js.map