changed to new functions

src/components/Colorpicker.js

@@ -1,5 +1,5 @@
 // components/Colorpicker.js
-import { $, Tag, If } from "sigpro";
+import { $, h, when} from "sigpro";
 import { val, ui } from "../utils.js";
 
 /**
@@ -30,8 +30,8 @@ export const Colorpicker = (props) => {
 
   const getColor = () => val(value) || "#000000";
 
-  return Tag("div", { class: ui('relative w-fit', className) }, [
-    Tag(
+  return h("div", { class: ui('relative w-fit', className) }, [
+    h(
       "button",
       {
         type: "button",
@@ -43,27 +43,27 @@ export const Colorpicker = (props) => {
         ...rest,
       },
       [
-        Tag("div", {
+        h("div", {
           class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
           style: () => `background-color: ${getColor()}`,
         }),
-        label ? Tag("span", { class: "opacity-80" }, label) : null,
+        label ? h("span", { class: "opacity-80" }, label) : null,
       ],
     ),
 
-    If(isOpen, () =>
-      Tag(
+    when(isOpen, () =>
+      h(
         "div",
         {
           class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",
           onclick: (e) => e.stopPropagation(),
         },
         [
-          Tag(
+          h(
             "div",
             { class: "grid grid-cols-8 gap-1" },
             palette.map((c) =>
-              Tag("button", {
+              h("button", {
                 type: "button",
                 style: `background-color: ${c}`,
                 class: () => {
@@ -82,8 +82,8 @@ export const Colorpicker = (props) => {
       ),
     ),
 
-    If(isOpen, () =>
-      Tag("div", {
+    when(isOpen, () =>
+      h("div", {
         class: "fixed inset-0 z-[100]",
         onclick: () => isOpen(false),
       }),