@lets-events/react 3.0.0 → 4.0.0

package/dist/index.mjs

@@ -1011,15 +1011,26 @@ import { fab } from "@fortawesome/free-brands-svg-icons";
 import { jsx } from "react/jsx-runtime";
 library.add(fas, far, fab);
 var Icon = (_a) => {
-  var _b = _a, { name, prefix = "fas", size = "1x", color = "currentColor", className = "" } = _b, props = __objRest(_b, ["name", "prefix", "size", "color", "className"]);
+  var _b = _a, { name, prefix = "fas", size = "sm", color = "currentColor", className = "" } = _b, props = __objRest(_b, ["name", "prefix", "size", "color", "className"]);
+  var _a2, _b2;
+  const sizeMap = {
+    "xs": { width: "0.625rem", height: "0.625rem", fontSize: "0.625rem" },
+    "sm": { width: "0.625rem", height: "0.625rem", fontSize: "0.625rem" },
+    "md": { width: "0.75rem", height: "0.75rem", fontSize: "0.75rem" },
+    "xl": { width: "1rem", height: "1rem", fontSize: "1rem" },
+    undefined: { width: "0.75rem", height: "0.75rem", fontSize: "0.75rem" }
+  };
   return /* @__PURE__ */ jsx(
     FontAwesomeIcon,
-    __spreadValues({
+    __spreadProps(__spreadValues({
       icon: [prefix, name],
-      size,
+      style: sizeMap[size],
       color,
       className
-    }, props)
+    }, props), {
+      width: (_a2 = sizeMap[size]) == null ? void 0 : _a2.width,
+      height: (_b2 = sizeMap[size]) == null ? void 0 : _b2.height
+    })
   );
 };
 Icon.propTypes = {
@@ -1066,6 +1077,7 @@ var colors = {
   red800: "#75151D",
   red900: "#380A0E",
   red950: "#1E0507",
+  pink100: "#F9DCF3",
   purple50: "#F3EFFB",
   purple100: "#E6DEF7",
   purple200: "#D1C2F0",
@@ -1088,6 +1100,7 @@ var colors = {
   yellow800: "#664D03",
   yellow900: "#332701",
   yellow950: "#191300",
+  orange100: "#FEE0D8",
   dark50: "#FFFFFF",
   dark100: "#F4F4F4",
   dark200: "#EAEBF0",
@@ -1439,7 +1452,11 @@ var BadgeText = styled(Text5, {
       1: { fontSize: "$16", lineHeight: "$16", fontWeight: "$regular" },
       2: { fontSize: "$14", lineHeight: "$14", fontWeight: "$regular" },
       3: { fontSize: "$12", lineHeight: "$12", fontWeight: "$regular" },
-      4: { fontSize: "$10", lineHeight: "$10", fontWeight: "$regular" }
+      4: { fontSize: "$10", lineHeight: "$10", fontWeight: "$regular" },
+      "xs": { fontSize: "$10", lineHeight: "$10", fontWeight: "$regular" },
+      "sm": { fontSize: "$12", lineHeight: "$12", fontWeight: "$regular" },
+      "md": { fontSize: "$14", lineHeight: "$14", fontWeight: "$regular" },
+      "xl": { fontSize: "$16", lineHeight: "$16", fontWeight: "$regular" }
     }
   },
   defaultVariants: {
@@ -1483,150 +1500,322 @@ var ButtonStyled = styled(ButtonRadix, {
   alignItems: "center",
   justifyContent: "center",
   gap: "$10",
+  "&:hover": {
+    transform: "scale(1.05)"
+  },
+  "&:active": {
+    transform: "scale(0.95)"
+  },
+  "&:disabled": {
+    cursor: "not-allowed",
+    transition: "none"
+  },
+  "&:hover:disabled": {
+    transform: "none"
+  },
   variants: {
+    color: {
+      brand: {},
+      neutral: {},
+      purple: {}
+    },
     variant: {
-      simple: {
+      text: {
         backgroundColor: "transparent",
-        padding: 0,
-        color: "$neutral600",
-        border: 0,
         boxShadow: "none",
+        padding: 0,
+        border: 0
+      },
+      contained: {
         "&:hover": {
-          transform: "scale(1.05)",
-          color: "$brand600"
+          borderWidth: "$2",
+          borderStyle: "solid"
         },
         "&:focus": {
-          border: "2px solid $gray500",
-          color: "$brand700"
+          border: 0
         },
         "&:active": {
-          transform: "scale(0.95)",
-          color: "$brand500"
+          borderWidth: "$4",
+          borderStyle: "solid"
         },
-        "&:hover:disabled": {
-          transform: "none"
+        "&:disabled": {
+          borderWidth: "$1",
+          borderStyle: "solid",
+          boxShadow: "none"
+        }
+      },
+      outlined: {
+        borderWidth: "$1",
+        borderStyle: "solid",
+        "&:hover": {
+          borderWidth: "$2",
+          borderStyle: "solid"
+        },
+        "&:focus": {
+          borderWidth: "$2",
+          borderStyle: "solid"
+        },
+        "&:active": {
+          borderWidth: "$2",
+          borderStyle: "solid"
         },
         "&:disabled": {
-          cursor: "not-allowed",
-          color: "$dark400",
-          transition: "none"
+          borderWidth: "$1",
+          borderStyle: "solid",
+          color: "$neutral400"
         }
+      }
+    },
+    size: {
+      xs: {
+        padding: "$6 $12",
+        fontSize: "$12",
+        lineHeight: "$base"
       },
-      primary: {
-        backgroundColor: "$brand500",
+      sm: {
+        padding: "$8 $14",
+        fontSize: "$13",
+        lineHeight: "$smaller"
+      },
+      md: {
+        padding: "$12 $16",
+        fontSize: "$14",
+        lineHeight: "$smaller"
+      },
+      lg: {
+        padding: "$13 $20",
+        fontSize: "$18",
+        lineHeight: "$smaller"
+      }
+    },
+    radii: {
+      "full": {
+        borderRadius: "$full"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "contained",
+    size: "md",
+    color: "brand"
+  },
+  compoundVariants: [
+    {
+      variant: "text",
+      color: "brand",
+      css: {
+        color: "$brand500",
+        "&:hover": { color: "$brand600" },
+        "&:focus": { color: "$brand700" },
+        "&:active": { color: "$brand500" },
+        "&:disabled": { color: "$dark400" }
+      }
+    },
+    {
+      variant: "text",
+      color: "neutral",
+      css: {
+        color: "$neutral600",
+        "&:hover": { color: "$neutral700" },
+        "&:focus": { color: "$neutral800" },
+        "&:active": { color: "$neutral500" },
+        "&:disabled": { color: "$dark400" }
+      }
+    },
+    {
+      variant: "text",
+      color: "purple",
+      css: {
+        color: "$purple500",
+        "&:hover": { color: "$purple600" },
+        "&:focus": { color: "$purple700" },
+        "&:active": { color: "$purple500" },
+        "&:disabled": { color: "$dark400" }
+      }
+    },
+    {
+      variant: "text",
+      color: "green",
+      css: {
+        color: "$green500",
+        "&:hover": { color: "$green600" },
+        "&:focus": { color: "$green700" },
+        "&:active": { color: "$green500" },
+        "&:disabled": { color: "$dark400" }
+      }
+    },
+    {
+      variant: "text",
+      color: "blue",
+      css: {
+        color: "$blue500",
+        "&:hover": { color: "$blue600" },
+        "&:focus": { color: "$blue700" },
+        "&:active": { color: "$blue500" },
+        "&:disabled": { color: "$dark400" }
+      }
+    },
+    {
+      variant: "text",
+      color: "red",
+      css: {
+        color: "$red500",
+        "&:hover": { color: "$red600" },
+        "&:focus": { color: "$red700" },
+        "&:active": { color: "$red500" },
+        "&:disabled": { color: "$dark400" }
+      }
+    },
+    // contained
+    {
+      variant: "contained",
+      color: "brand",
+      css: {
         color: "$grey50",
+        backgroundColor: "$brand500",
         "&:hover": {
-          border: "$2 solid $brand700",
-          transform: "scale(1.05)",
+          borderColor: "$brand700",
           backgroundColor: "$blue600"
         },
         "&:focus": {
-          border: 0,
           backgroundColor: "$blue700"
         },
         "&:active": {
-          transform: "scale(0.95)",
-          border: "$4 solid $brand300",
+          borderColor: "$brand300",
           backgroundColor: "$blue500"
         },
-        "&:hover:disabled": {
-          transform: "none"
-        },
         "&:disabled": {
-          border: "$1 solid $brand50",
+          borderColor: "$brand50",
           backgroundColor: "$brand50",
-          boxShadow: "none",
-          color: "$neutral400",
-          transition: "none"
+          color: "$neutral400"
         }
-      },
-      purple: {
+      }
+    },
+    {
+      variant: "contained",
+      color: "neutral",
+      css: {
+        backgroundColor: "$neutral600",
+        color: "$grey50",
+        "&:hover": {
+          backgroundColor: "$neutral700",
+          borderColor: "$neutral800"
+        },
+        "&:focus": {
+          backgroundColor: "$neutral800"
+        },
+        "&:active": {
+          backgroundColor: "$neutral500",
+          borderColor: "$neutral400"
+        },
+        "&:disabled": {
+          backgroundColor: "$neutral50",
+          borderColor: "$neutral200",
+          color: "$neutral400"
+        }
+      }
+    },
+    {
+      variant: "contained",
+      color: "purple",
+      css: {
         backgroundColor: "$purple500",
         color: "$grey50",
         "&:hover": {
-          transform: "scale(1.05)",
           backgroundColor: "$purple600",
-          border: "$2 solid $purple700"
+          borderColor: "$purple700"
         },
         "&:focus": {
-          border: "$2 solid $purple700",
-          backgroundColor: "$purple600"
+          backgroundColor: "$purple700"
         },
         "&:active": {
-          transform: "scale(0.95)",
-          border: "$2 solid $purple300",
+          borderColor: "$purple300",
           backgroundColor: "$purple500"
         },
-        "&:hover:disabled": {
-          transform: "none"
-        },
         "&:disabled": {
-          border: "$1 solid $purple200",
+          borderColor: "$purple200",
           backgroundColor: "$purple200",
-          transition: "none"
+          color: "$neutral400"
         }
-      },
-      secondary: {
-        backgroundColor: "$neutral500",
-        border: "$1 solid $neutral300",
-        color: "$neutral600",
+      }
+    },
+    // outlined
+    {
+      variant: "outlined",
+      color: "brand",
+      css: {
+        color: "$brand500",
+        borderColor: "$brand300",
+        backgroundColor: "$grey50",
         "&:hover": {
-          transform: "scale(1.05)",
-          backgroundColor: "$neutral100",
-          border: "$1 solid $neutral400"
+          borderColor: "$brand400",
+          backgroundColor: "$brand50"
         },
         "&:focus": {
-          backgroundColor: "$neutral200",
-          border: 0
+          borderColor: "$brand400",
+          backgroundColor: "$brand50"
         },
         "&:active": {
-          transform: "scale(0.95)",
-          backgroundColor: "$neutral50",
-          border: "$1 solid $neutral300"
-        },
-        "&:hover:disabled": {
-          transform: "none"
+          borderColor: "$brand300",
+          backgroundColor: "$grey50"
         },
         "&:disabled": {
-          backgroundColor: "$neutral50",
-          border: "$1 solid $neutral200",
-          color: "$neutral400",
-          transition: "none"
+          borderColor: "$brand200",
+          backgroundColor: "$neutral200"
         }
       }
     },
-    size: {
-      xs: {
-        padding: "$6 $12",
-        fontSize: "$12",
-        lineHeight: "$base"
-      },
-      sm: {
-        padding: "$8 $14",
-        fontSize: "$13",
-        lineHeight: "$smaller"
-      },
-      md: {
-        padding: "$12 $16",
-        fontSize: "$14",
-        lineHeight: "$smaller"
-      },
-      lg: {
-        padding: "$13 $20",
-        fontSize: "$18",
-        lineHeight: "$smaller"
+    {
+      variant: "outlined",
+      color: "neutral",
+      css: {
+        color: "$neutral600",
+        borderColor: "$neutral300",
+        backgroundColor: "$grey50",
+        "&:hover": {
+          borderColor: "$neutral400",
+          backgroundColor: "$grey100"
+        },
+        "&:focus": {
+          borderColor: "$neutral400",
+          backgroundColor: "$grey100"
+        },
+        "&:active": {
+          borderColor: "$neutral300",
+          backgroundColor: "$grey50"
+        },
+        "&:disabled": {
+          borderColor: "$neutral200",
+          backgroundColor: "$neutral200"
+        }
       }
     },
-    radii: {
-      "full": {
-        borderRadius: "$full"
+    {
+      variant: "outlined",
+      color: "purple",
+      css: {
+        color: "$purple500",
+        borderColor: "$purple300",
+        backgroundColor: "$grey50",
+        "&:hover": {
+          borderColor: "$purple400",
+          backgroundColor: "$purple50"
+        },
+        "&:focus": {
+          borderColor: "$purple400",
+          backgroundColor: "$purple50"
+        },
+        "&:active": {
+          borderColor: "$purple300",
+          backgroundColor: "$grey50"
+        },
+        "&:disabled": {
+          borderColor: "$purple200",
+          backgroundColor: "$neutral200"
+        }
       }
     }
-  },
-  defaultVariants: {
-    variant: "simple",
-    size: "md"
-  }
+  ]
 });
 function Button(_a) {
   var _b = _a, { asChild } = _b, props = __objRest(_b, ["asChild"]);
@@ -1643,6 +1832,7 @@ var ButtonItemStyled = styled(Button2, {
   border: 0,
   transition: "all 300ms ease-out",
   cursor: "pointer",
+  boxSizing: "border-box",
   variants: {
     active: {
       true: {}
@@ -1654,41 +1844,66 @@ var ButtonGroupStyled = styled(Flex, {
   borderRadius: "$md",
   overflow: "hidden",
   variants: {
+    color: {
+      brand: {},
+      neutral: {},
+      purple: {},
+      green: {},
+      blue: {},
+      red: {}
+    },
     variant: {
-      primary: {
+      text: {
         [`& ${ButtonItemStyled}`]: {
-          backgroundColor: "$brand500",
-          color: "$grey50",
-          "&:hover": { backgroundColor: "$blue600" },
-          "&:focus": { backgroundColor: "$blue700" },
-          "&:active": { backgroundColor: "$blue400" }
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          backgroundColor: "$brand700",
-          "&:hover": { backgroundColor: "$brand700" },
-          "&:focus": { backgroundColor: "$brand700" },
-          "&:active": { backgroundColor: "$brand700" }
+          backgroundColor: "transparent",
+          boxShadow: "none",
+          padding: 0,
+          border: 0
         }
       },
-      simple: {
+      contained: {
         [`& ${ButtonItemStyled}`]: {
-          backgroundColor: "transparent",
-          border: "1px solid $dark300",
-          color: "$dark600",
-          "&:hover": { backgroundColor: "$neutral" }
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          backgroundColor: "$dark200",
-          color: "$dark600",
-          "&:hover": { backgroundColor: "$dark200", color: "$dark600" }
+          borderWidth: "$1",
+          borderStyle: "solid",
+          "&:disabled": {
+            boxShadow: "none"
+          }
+        }
+      },
+      outlined: {
+        [`& ${ButtonItemStyled}`]: {
+          borderWidth: "$1",
+          borderStyle: "solid",
+          "&:disabled": {
+            color: "$neutral400"
+          }
         }
       }
     },
     size: {
+      xs: {
+        [`& ${ButtonItemStyled}`]: {
+          padding: "$6 $12",
+          fontSize: "$12",
+          lineHeight: "$base",
+          "&:not(:first-child)": {
+            borderLeft: "none"
+          },
+          "&:first-child": {
+            borderTopLeftRadius: "$xs",
+            borderBottomLeftRadius: "$xs"
+          },
+          "&:last-child": {
+            borderTopRightRadius: "$xs",
+            borderBottomRightRadius: "$xs"
+          }
+        }
+      },
       sm: {
         [`& ${ButtonItemStyled}`]: {
           padding: "$8 $14",
           fontSize: "$13",
+          lineHeight: "$smaller",
           "&:not(:first-child)": {
             borderLeft: "none"
           },
@@ -1706,6 +1921,7 @@ var ButtonGroupStyled = styled(Flex, {
         [`& ${ButtonItemStyled}`]: {
           padding: "$12 $16",
           fontSize: "$14",
+          lineHeight: "$smaller",
           "&:not(:first-child)": {
             borderLeft: "none"
           },
@@ -1723,6 +1939,7 @@ var ButtonGroupStyled = styled(Flex, {
         [`& ${ButtonItemStyled}`]: {
           padding: "$13 $20",
           fontSize: "$18",
+          lineHeight: "$smaller",
           "&:not(:first-child)": {
             borderLeft: "none"
           },
@@ -1738,9 +1955,331 @@ var ButtonGroupStyled = styled(Flex, {
       }
     }
   },
+  compoundVariants: [
+    // text
+    {
+      variant: "text",
+      color: "brand",
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: "$brand500",
+          "&:hover": { color: "$brand600" },
+          "&:focus": { color: "$brand700" },
+          "&:active": { color: "$brand500" },
+          "&:disabled": { color: "$dark400" }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: "$brand700",
+          "&:hover": { color: "$brand700" },
+          "&:focus": { color: "$brand700" },
+          "&:active": { color: "$brand700" }
+        }
+      }
+    },
+    {
+      variant: "text",
+      color: "neutral",
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: "$neutral600",
+          "&:hover": { color: "$neutral700" },
+          "&:focus": { color: "$neutral800" },
+          "&:active": { color: "$neutral500" },
+          "&:disabled": { color: "$dark400" }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: "$neutral800",
+          "&:hover": { color: "$neutral800" },
+          "&:focus": { color: "$neutral800" },
+          "&:active": { color: "$neutral800" }
+        }
+      }
+    },
+    {
+      variant: "text",
+      color: "purple",
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: "$purple500",
+          "&:hover": { color: "$purple600" },
+          "&:focus": { color: "$purple700" },
+          "&:active": { color: "$purple500" },
+          "&:disabled": { color: "$dark400" }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: "$purple700",
+          "&:hover": { color: "$purple700" },
+          "&:focus": { color: "$purple700" },
+          "&:active": { color: "$purple700" }
+        }
+      }
+    },
+    {
+      variant: "text",
+      color: "green",
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: "$green500",
+          "&:hover": { color: "$green600" },
+          "&:focus": { color: "$green700" },
+          "&:active": { color: "$green500" },
+          "&:disabled": { color: "$dark400" }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: "$green700",
+          "&:hover": { color: "$green700" },
+          "&:focus": { color: "$green700" },
+          "&:active": { color: "$green700" }
+        }
+      }
+    },
+    {
+      variant: "text",
+      color: "blue",
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: "$blue500",
+          "&:hover": { color: "$blue600" },
+          "&:focus": { color: "$blue700" },
+          "&:active": { color: "$blue500" },
+          "&:disabled": { color: "$dark400" }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: "$blue700",
+          "&:hover": { color: "$blue700" },
+          "&:focus": { color: "$blue700" },
+          "&:active": { color: "$blue700" }
+        }
+      }
+    },
+    {
+      variant: "text",
+      color: "red",
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: "$red500",
+          "&:hover": { color: "$red600" },
+          "&:focus": { color: "$red700" },
+          "&:active": { color: "$red500" },
+          "&:disabled": { color: "$dark400" }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: "$red700",
+          "&:hover": { color: "$red700" },
+          "&:focus": { color: "$red700" },
+          "&:active": { color: "$red700" }
+        }
+      }
+    },
+    // contained
+    {
+      variant: "contained",
+      color: "brand",
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: "$grey50",
+          backgroundColor: "$brand500",
+          borderColor: "$brand500",
+          "&:hover": {
+            backgroundColor: "$blue600"
+          },
+          "&:focus": {
+            backgroundColor: "$blue700"
+          },
+          "&:active": {
+            backgroundColor: "$blue500"
+          },
+          "&:disabled": {
+            backgroundColor: "$brand50",
+            color: "$neutral400"
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          backgroundColor: "$brand700",
+          "&:hover": { backgroundColor: "$brand700" },
+          "&:focus": { backgroundColor: "$brand700" },
+          "&:active": { backgroundColor: "$brand700" }
+        }
+      }
+    },
+    {
+      variant: "contained",
+      color: "neutral",
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          backgroundColor: "$neutral600",
+          color: "$grey50",
+          "&:hover": {
+            backgroundColor: "$neutral700",
+            borderColor: "$neutral800"
+          },
+          "&:focus": {
+            backgroundColor: "$neutral800"
+          },
+          "&:active": {
+            backgroundColor: "$neutral500",
+            borderColor: "$neutral400"
+          },
+          "&:disabled": {
+            backgroundColor: "$neutral50",
+            borderColor: "$neutral200",
+            color: "$neutral400"
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          backgroundColor: "$neutral800",
+          "&:hover": { backgroundColor: "$neutral800" },
+          "&:focus": { backgroundColor: "$neutral800" },
+          "&:active": { backgroundColor: "$neutral800" }
+        }
+      }
+    },
+    {
+      variant: "contained",
+      color: "purple",
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          backgroundColor: "$purple500",
+          color: "$grey50",
+          "&:hover": {
+            backgroundColor: "$purple600",
+            borderColor: "$purple700"
+          },
+          "&:focus": {
+            backgroundColor: "$purple700"
+          },
+          "&:active": {
+            borderColor: "$purple300",
+            backgroundColor: "$purple500"
+          },
+          "&:disabled": {
+            borderColor: "$purple200",
+            backgroundColor: "$purple200",
+            color: "$neutral400"
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          backgroundColor: "$purple700",
+          "&:hover": { backgroundColor: "$purple700" },
+          "&:focus": { backgroundColor: "$purple700" },
+          "&:active": { backgroundColor: "$purple700" }
+        }
+      }
+    },
+    // outlined
+    {
+      variant: "outlined",
+      color: "brand",
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: "$brand500",
+          borderColor: "$brand300",
+          backgroundColor: "$grey50",
+          "&:hover": {
+            borderColor: "$brand400",
+            backgroundColor: "$brand50"
+          },
+          "&:focus": {
+            borderColor: "$brand400",
+            backgroundColor: "$brand50"
+          },
+          "&:active": {
+            borderColor: "$brand300",
+            backgroundColor: "$grey50"
+          },
+          "&:disabled": {
+            borderColor: "$brand200",
+            backgroundColor: "$neutral200",
+            color: "$neutral400"
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: "$brand700",
+          borderColor: "$brand600",
+          backgroundColor: "$brand50",
+          "&:hover": { backgroundColor: "$brand50", borderColor: "$brand600" },
+          "&:focus": { backgroundColor: "$brand50", borderColor: "$brand600" },
+          "&:active": { backgroundColor: "$brand50", borderColor: "$brand600" }
+        }
+      }
+    },
+    {
+      variant: "outlined",
+      color: "neutral",
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: "$neutral600",
+          borderColor: "$neutral300",
+          backgroundColor: "$grey50",
+          "&:hover": {
+            borderColor: "$neutral400",
+            backgroundColor: "$grey100"
+          },
+          "&:focus": {
+            borderColor: "$neutral400",
+            backgroundColor: "$grey100"
+          },
+          "&:active": {
+            borderColor: "$neutral300",
+            backgroundColor: "$grey50"
+          },
+          "&:disabled": {
+            borderColor: "$neutral200",
+            backgroundColor: "$neutral200",
+            color: "$neutral400"
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: "$neutral800",
+          borderColor: "$neutral600",
+          backgroundColor: "$grey100",
+          "&:hover": { backgroundColor: "$grey100", borderColor: "$neutral600" },
+          "&:focus": { backgroundColor: "$grey100", borderColor: "$neutral600" },
+          "&:active": { backgroundColor: "$grey100", borderColor: "$neutral600" }
+        }
+      }
+    },
+    {
+      variant: "outlined",
+      color: "purple",
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: "$purple500",
+          borderColor: "$purple300",
+          backgroundColor: "$grey50",
+          "&:hover": {
+            borderColor: "$purple400",
+            backgroundColor: "$purple50"
+          },
+          "&:focus": {
+            borderColor: "$purple400",
+            backgroundColor: "$purple50"
+          },
+          "&:active": {
+            borderColor: "$purple300",
+            backgroundColor: "$grey50"
+          },
+          "&:disabled": {
+            borderColor: "$purple200",
+            backgroundColor: "$neutral200",
+            color: "$neutral400"
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: "$purple700",
+          borderColor: "$purple600",
+          backgroundColor: "$purple50",
+          "&:hover": { backgroundColor: "$purple50", borderColor: "$purple600" },
+          "&:focus": { backgroundColor: "$purple50", borderColor: "$purple600" },
+          "&:active": { backgroundColor: "$purple50", borderColor: "$purple600" }
+        }
+      }
+    }
+  ],
   defaultVariants: {
-    variant: "primary",
-    size: "md"
+    variant: "contained",
+    size: "md",
+    color: "brand"
   }
 });
 function ButtonItem(_a) {
@@ -1879,13 +2418,40 @@ var TextFieldStyled = styled(TextFieldRadix.Root, {
     cursor: "not-allowed"
   },
   variants: {
-    isValid: {
-      true: {},
-      false: {
+    color: {
+      default: {
+        color: "$dark400",
+        border: "1px solid $dark200",
+        "&:has(input:focus)": {
+          border: "2px solid $brand300"
+        },
+        "&:has(input:disabled)": {
+          backgroundColor: "$dark100",
+          color: "$dark400",
+          border: "1px solid $dark200",
+          cursor: "not-allowed"
+        }
+      },
+      error: {
         border: "1px solid $error400",
         color: "$error400",
-        backgroundColor: "$error50"
+        "input::placeholder": {
+          color: "$error400"
+        },
+        "& hast(input:focus)": {
+          border: "2px solid $error400"
+        },
+        "&:has(input:disabled)": {
+          backgroundColor: "$error50",
+          color: "$error300",
+          border: "1px solid $error100",
+          cursor: "not-allowed"
+        }
       }
+    },
+    isValid: {
+      true: {},
+      false: {}
     }
   },
   compoundVariants: [
@@ -1940,15 +2506,17 @@ function TextField(_a) {
   var _b = _a, {
     children,
     isValid,
-    name
+    name,
+    color
   } = _b, props = __objRest(_b, [
     "children",
     "isValid",
-    "name"
+    "name",
+    "color"
   ]);
-  return /* @__PURE__ */ jsxs(TextFieldStyled, __spreadProps(__spreadValues({ isValid, name }, props), { children: [
+  return /* @__PURE__ */ jsxs(TextFieldStyled, __spreadProps(__spreadValues({ color, isValid, name }, props), { children: [
     children,
-    isValid && /* @__PURE__ */ jsx5(TextFieldSlot, { position: "flex-end", name, children: /* @__PURE__ */ jsx5(Icon_default, { name: "check" }) })
+    isValid && /* @__PURE__ */ jsx5(TextFieldSlot, { position: "flex-end", name, color, children: /* @__PURE__ */ jsx5(Icon_default, { name: "check" }) })
   ] }));
 }
 function TextFieldSlot(_a) {
@@ -1962,7 +2530,7 @@ function TextFieldSlot(_a) {
     "onClick"
   ]);
   console.log("onclick", onClick);
-  return /* @__PURE__ */ jsx5(Fragment, { children: !!onClick ? /* @__PURE__ */ jsx5(TextFieldSlotStyled, __spreadProps(__spreadValues({}, props), { style: {
+  return /* @__PURE__ */ jsx5(Fragment, { children: !!onClick ? /* @__PURE__ */ jsx5(TextFieldSlotStyled, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { color: void 0 })), { style: {
     position: "absolute",
     left: position === "flex-end" ? "none" : 15,
     right: position === "flex-start" ? "none" : 15,
@@ -1970,7 +2538,7 @@ function TextFieldSlot(_a) {
     zIndex: 2,
     top: 0,
     cursor: "pointer"
-  }, onClick: () => onClick(), children })) : /* @__PURE__ */ jsx5(TextFieldSlotStyled, __spreadProps(__spreadValues({}, props), { style: {
+  }, onClick: () => onClick(), children })) : /* @__PURE__ */ jsx5(TextFieldSlotStyled, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { color: void 0 })), { style: {
     float: position === "flex-start" ? "left" : "right",
     order: position === "flex-start" ? 0 : 2,
     marginLeft: position === "flex-start" ? 0 : 15,
@@ -2027,8 +2595,8 @@ var RadioGroupStyled = styled(RadioGroupRadix.Root, {
     zIndex: 1
   },
   variants: {
-    isValid: {
-      true: {
+    color: {
+      success: {
         "label": {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(38, 167, 67, 0.50)"
@@ -2042,7 +2610,8 @@ var RadioGroupStyled = styled(RadioGroupRadix.Root, {
           backgroundColor: "$green500"
         }
       },
-      false: {
+      blue: {},
+      error: {
         "label": {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(225, 86, 98, 0.50)"
@@ -2075,7 +2644,7 @@ var RadioGroupStyled = styled(RadioGroupRadix.Root, {
   },
   compoundVariants: [
     {
-      isValid: void 0,
+      color: "blue",
       disabled: false,
       css: {
         "label": {
@@ -2092,7 +2661,7 @@ var RadioGroupStyled = styled(RadioGroupRadix.Root, {
       }
     },
     {
-      isValid: void 0,
+      color: "blue",
       disabled: true,
       css: {
         "label button": {
@@ -2105,7 +2674,7 @@ var RadioGroupStyled = styled(RadioGroupRadix.Root, {
       }
     },
     {
-      isValid: true,
+      color: "success",
       disabled: true,
       css: {
         "label button": {
@@ -2118,7 +2687,7 @@ var RadioGroupStyled = styled(RadioGroupRadix.Root, {
       }
     },
     {
-      isValid: false,
+      color: "error",
       disabled: true,
       css: {
         "label button": {
@@ -2130,23 +2699,24 @@ var RadioGroupStyled = styled(RadioGroupRadix.Root, {
         }
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    color: "blue",
+    disabled: false
+  }
 });
 function RadioGroup(_a) {
   var _b = _a, {
     children,
-    isValid,
     disabled
   } = _b, props = __objRest(_b, [
     "children",
-    "isValid",
     "disabled"
   ]);
   return /* @__PURE__ */ jsx6(
     RadioGroupStyled,
     __spreadProps(__spreadValues({
-      disabled,
-      isValid
+      disabled
     }, props), {
       children
     })
@@ -2212,8 +2782,8 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
     zIndex: 1
   },
   variants: {
-    isValid: {
-      true: {
+    color: {
+      success: {
         "label": {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(38, 167, 67, 0.50)"
@@ -2227,7 +2797,8 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
           backgroundColor: "$green500"
         }
       },
-      false: {
+      blue: {},
+      error: {
         "label": {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(225, 86, 98, 0.50)"
@@ -2260,7 +2831,7 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
   },
   compoundVariants: [
     {
-      isValid: void 0,
+      color: "blue",
       disabled: false,
       css: {
         "label": {
@@ -2277,7 +2848,7 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
       }
     },
     {
-      isValid: void 0,
+      color: "blue",
       disabled: true,
       css: {
         "label button": {
@@ -2290,7 +2861,7 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
       }
     },
     {
-      isValid: true,
+      color: "success",
       disabled: true,
       css: {
         "label button": {
@@ -2303,7 +2874,7 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
       }
     },
     {
-      isValid: false,
+      color: "error",
       disabled: true,
       css: {
         "label button": {
@@ -2315,7 +2886,11 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
         }
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    color: "blue",
+    disabled: false
+  }
 });
 function CheckboxGroup(_a) {
   var _b = _a, {
@@ -2492,9 +3067,120 @@ function DropdownMenuItem(_a) {
   ]);
   return /* @__PURE__ */ jsx9(DropdownMenuItemStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
+
+// src/components/Badge.tsx
+import React from "react";
+import { Badge as BadgeRadix } from "@radix-ui/themes";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var BadgeStyled = styled(BadgeRadix, {
+  fontFamily: "$default",
+  borderRadius: "$sm",
+  verticalAlign: "middle",
+  "svg": {
+    marginRight: "10px"
+  },
+  variants: {
+    color: {
+      primary: {
+        backgroundColor: "$brand100",
+        color: "$dark700"
+      },
+      dark: {
+        backgroundColor: "$dark700",
+        color: "$grey50"
+      },
+      light: {
+        backgroundColor: "$neutral200",
+        color: "$dark700"
+      },
+      red: {
+        backgroundColor: "$red100",
+        color: "$dark700"
+      },
+      green: {
+        backgroundColor: "$green100",
+        color: "$dark700"
+      },
+      yellow: {
+        backgroundColor: "$yellow100",
+        color: "$dark700"
+      },
+      orange: {
+        backgroundColor: "$orange100",
+        color: "$dark700"
+      },
+      blue: {
+        backgroundColor: "$blue100",
+        color: "$dark700"
+      },
+      pink: {
+        backgroundColor: "$pink100",
+        color: "$dark700"
+      },
+      purple: {
+        backgroundColor: "$purple100",
+        color: "$dark700"
+      },
+      grey: {
+        backgroundColor: "$grey200",
+        color: "$dark700"
+      },
+      disable: {
+        backgroundColor: "$neutral200",
+        color: "$grey500"
+      }
+    },
+    size: {
+      xs: {
+        padding: "$4 $6",
+        fontSize: "$10",
+        borderRadius: "$2xs",
+        lineHeight: "$smaller"
+      },
+      sm: {
+        padding: "$4 $8",
+        fontSize: "$12",
+        borderRadius: "$xs",
+        lineHeight: "$smaller"
+      },
+      md: {
+        padding: "$8 $10",
+        fontSize: "$14",
+        borderRadius: "$sm",
+        lineHeight: "$smaller"
+      },
+      xl: {
+        padding: "$12 $12",
+        fontSize: "$16",
+        borderRadius: "$sm",
+        lineHeight: "$smaller"
+      }
+    },
+    radii: {
+      "full": {
+        borderRadius: "$full"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});
+function Badge(_a) {
+  var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
+  return /* @__PURE__ */ jsx10(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, { size: props.size });
+    }
+    return child;
+  }) }));
+}
 export {
   Avatar,
   AvatarStyled,
+  Badge,
+  BadgeStyled,
   BadgeText,
   BodyText,
   Box,