@proveanything/smartlinks-utils-ui 0.1.7 → 0.1.8

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

@@ -524,40 +524,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 +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,
@@ -578,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("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 +692,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 +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-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 +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,
@@ -719,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
@@ -747,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,
@@ -757,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":
@@ -772,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-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 = ({
@@ -1006,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-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 +1158,5 @@ var ConditionsEditor = (props) => {
 };
 
 export { ConditionsEditor };
-//# sourceMappingURL=chunk-YVHF5JBL.js.map
-//# sourceMappingURL=chunk-YVHF5JBL.js.map
+//# sourceMappingURL=chunk-ILQNQN27.js.map
+//# sourceMappingURL=chunk-ILQNQN27.js.map