@lets-events/react 3.0.0 → 5.0.0

package/dist/index.mjs

@@ -235,7 +235,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment2 = REACT_FRAGMENT_TYPE;
+        var Fragment3 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -294,7 +294,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment2;
+        exports.Fragment = Fragment3;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -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",
@@ -1307,170 +1320,30 @@ var {
 
 // src/components/Text.tsx
 import { Text as TextRadix } from "@radix-ui/themes";
-var Text = styled(TextRadix, {
-  fontFamily: "$default",
-  lineHeight: "$base",
-  color: "$gray100",
-  letterSpacing: "$2",
-  fontWeight: "$semibold",
-  variants: {
-    size: {
-      lg: { fontSize: "$56" },
-      md: { fontSize: "$48" },
-      sm: { fontSize: "$36" }
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-
-// src/components/DisplayText.tsx
-var DisplayText = styled("p", {
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TextStyle = styled(TextRadix, {
   fontFamily: "$default",
   lineHeight: "$base",
   color: "$gray100",
   letterSpacing: "$2",
   fontWeight: "$semibold",
+  fontSize: "$sm",
   variants: {
     size: {
       lg: { fontSize: "$56" },
       md: { fontSize: "$48" },
       sm: { fontSize: "$36" }
     }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-
-// src/components/Headline.tsx
-import { Heading } from "@radix-ui/themes";
-var Headline = styled(Heading, {
-  fontFamily: "$default",
-  color: "$gray100",
-  letterSpacing: "0px",
-  variants: {
-    size: {
-      1: { fontSize: "$48", lineHeight: "$64", fontWeight: "$semibold" },
-      2: { fontSize: "$32", lineHeight: "$48", fontWeight: "$semibold" },
-      3: { fontSize: "$24", lineHeight: "$40", fontWeight: "$semibold" },
-      4: { fontSize: "$20", lineHeight: "$36", fontWeight: "$semibold" },
-      5: { fontSize: "$18", lineHeight: "$24", fontWeight: "$semibold" },
-      6: { fontSize: "$18", lineHeight: "$34", fontWeight: "$medium" },
-      7: { fontSize: "$16", lineHeight: "$32", fontWeight: "$semibold" },
-      8: { fontSize: "$16", lineHeight: "$32", fontWeight: "$medium" }
-    }
-  },
-  defaultVariants: {
-    size: 1
-  }
-});
-
-// src/components/Subtitle.tsx
-import { Text as Text2 } from "@radix-ui/themes";
-var Subtitle = styled(Text2, {
-  fontFamily: "$default",
-  color: "$gray100",
-  letterSpacing: "0px",
-  variants: {
-    size: {
-      1: { fontSize: "$20", lineHeight: "$36", fontWeight: "$regular" },
-      2: { fontSize: "$18", lineHeight: "$34", fontWeight: "$regular" },
-      3: { fontSize: "$16", lineHeight: "$32", fontWeight: "$regular" },
-      4: { fontSize: "$14", lineHeight: "$24", fontWeight: "$regular" },
-      5: { fontSize: "$14", lineHeight: "$16", fontWeight: "$semibold" }
-    }
-  },
-  defaultVariants: {
-    size: 1
-  }
-});
-
-// src/components/BodyText.tsx
-import { Text as Text3 } from "@radix-ui/themes";
-var BodyText = styled(Text3, {
-  fontFamily: "$default",
-  color: "$gray100",
-  fontWeight: "$regular",
-  variants: {
-    size: {
-      1: { fontSize: "$16", lineHeight: "$24" },
-      2: { fontSize: "$14", lineHeight: "$24" },
-      3: { fontSize: "$13", lineHeight: "$24" },
-      4: { fontSize: "$12", lineHeight: "$16" }
-    }
-  },
-  defaultVariants: {
-    size: "1"
-  }
-});
-
-// src/components/Label.tsx
-import { Text as Text4 } from "@radix-ui/themes";
-var Label = styled(Text4, {
-  fontFamily: "$default",
-  color: "$gray100",
-  letterSpacing: "0px",
-  variants: {
-    size: {
-      1: { fontSize: "$18", lineHeight: "$22", fontWeight: "$semibold" },
-      2: { fontSize: "$14", lineHeight: "$16", fontWeight: "$medium" },
-      3: { fontSize: "$14", lineHeight: "$16", fontWeight: "$regular" },
-      4: { fontSize: "$13", lineHeight: "$16", fontWeight: "$semibold", letterSpacing: "2px" },
-      5: { fontSize: "$13", lineHeight: "$16", fontWeight: "$medium" },
-      6: { fontSize: "$13", lineHeight: "$16", fontWeight: "$regular" },
-      7: { fontSize: "$12", lineHeight: "$12", fontWeight: "$regular" }
-    }
-  },
-  defaultVariants: {
-    size: "1"
-  }
-});
-
-// src/components/BadgeText.tsx
-import { Text as Text5 } from "@radix-ui/themes";
-var BadgeText = styled(Text5, {
-  fontFamily: "$default",
-  color: "$gray100",
-  letterSpacing: "0px",
-  variants: {
-    size: {
-      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" }
-    }
-  },
-  defaultVariants: {
-    size: "1"
   }
 });
-
-// src/components/CaptionText.tsx
-import { Text as Text6 } from "@radix-ui/themes";
-var CaptionText = styled(Text6, {
-  fontFamily: "$default",
-  color: "$gray100",
-  letterSpacing: "0px",
-  fontSize: "$14",
-  lineHeight: "$16",
-  fontWeight: "$regular"
-});
-
-// src/components/TooltipText.tsx
-var TooltipText = styled("span", {
-  fontFamily: "$default",
-  color: "$gray100",
-  letterSpacing: "0px",
-  fontSize: "$13",
-  lineHeight: "$16",
-  fontWeight: "$regular"
-});
+function Text(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx2(TextStyle, __spreadValues({}, props));
+}
 
 // src/components/Button.tsx
 import { Button as ButtonRadix } from "@radix-ui/themes";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var ButtonStyled = styled(ButtonRadix, {
   fontFamily: "$default",
   letterSpacing: 0,
@@ -1483,166 +1356,333 @@ var ButtonStyled = styled(ButtonRadix, {
   alignItems: "center",
   justifyContent: "center",
   gap: "$10",
+  "&:disabled": {
+    cursor: "not-allowed",
+    transition: "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"
+        },
+        "&:disabled": {
+          borderWidth: "$1",
+          borderStyle: "solid",
+          boxShadow: "none"
+        }
+      },
+      outlined: {
+        borderWidth: "$1",
+        borderStyle: "solid",
+        "&:hover": {
+          borderWidth: "$2",
+          borderStyle: "solid"
+        },
+        "&:focus": {
+          borderWidth: "$2",
+          borderStyle: "solid"
         },
-        "&:hover:disabled": {
-          transform: "none"
+        "&: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",
+        borderWidth: "$2",
+        borderStyle: "solid",
+        borderColor: "transparent",
         "&: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"]);
   const Component = asChild ? ButtonRadix : "button";
-  return /* @__PURE__ */ jsx2(ButtonStyled, __spreadValues({ as: Component }, props));
+  return /* @__PURE__ */ jsx3(ButtonStyled, __spreadValues({ as: Component }, props));
 }
 
 // src/components/ButtonGroup.tsx
 import { Button as Button2, Flex } from "@radix-ui/themes";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var ButtonItemStyled = styled(Button2, {
   fontFamily: "$default",
   letterSpacing: 0,
   border: 0,
   transition: "all 300ms ease-out",
   cursor: "pointer",
+  boxSizing: "border-box",
   variants: {
     active: {
       true: {}
@@ -1654,41 +1694,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 +1771,7 @@ var ButtonGroupStyled = styled(Flex, {
         [`& ${ButtonItemStyled}`]: {
           padding: "$12 $16",
           fontSize: "$14",
+          lineHeight: "$smaller",
           "&:not(:first-child)": {
             borderLeft: "none"
           },
@@ -1723,6 +1789,7 @@ var ButtonGroupStyled = styled(Flex, {
         [`& ${ButtonItemStyled}`]: {
           padding: "$13 $20",
           fontSize: "$18",
+          lineHeight: "$smaller",
           "&:not(:first-child)": {
             borderLeft: "none"
           },
@@ -1738,23 +1805,345 @@ 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) {
   var _b = _a, { children, active } = _b, props = __objRest(_b, ["children", "active"]);
-  return /* @__PURE__ */ jsx3(ButtonItemStyled, __spreadProps(__spreadValues({ className: active ? "active" : "" }, props), { children }));
+  return /* @__PURE__ */ jsx4(ButtonItemStyled, __spreadProps(__spreadValues({ className: active ? "active" : "" }, props), { children }));
 }
 function ButtonGroup(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx3(ButtonGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx4(ButtonGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Avatar.tsx
 import { Avatar as AvatarRadix } from "@radix-ui/themes";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var AvatarStyled = styled(AvatarRadix, {
   fontFamily: "$default",
   color: "$gray100",
@@ -1799,56 +2188,12 @@ var AvatarStyled = styled(AvatarRadix, {
 });
 function Avatar(_a) {
   var _b = _a, { asChild } = _b, props = __objRest(_b, ["asChild"]);
-  return /* @__PURE__ */ jsx4(AvatarStyled, __spreadValues({ as: AvatarRadix }, props));
+  return /* @__PURE__ */ jsx5(AvatarStyled, __spreadValues({ as: AvatarRadix }, props));
 }
 
-// src/components/Flex.tsx
-import { Flex as FlexRadix } from "@radix-ui/themes";
-var Flex2 = styled(FlexRadix, {
-  display: "flex",
-  variants: {
-    direction: {
-      row: { flexDirection: "row" },
-      column: { flexDirection: "column" },
-      "row-reverse": { flexDirection: "row-reverse" },
-      "column-reverse": { flexDirection: "column-reverse" }
-    },
-    gap: {
-      2: { gap: "$2" },
-      4: { gap: "$4" },
-      6: { gap: "$6" },
-      8: { gap: "$8" },
-      10: { gap: "$10" },
-      12: { gap: "$12" },
-      14: { gap: "$14" },
-      16: { gap: "$16" },
-      20: { gap: "$20" },
-      22: { gap: "$22" },
-      24: { gap: "$24" },
-      32: { gap: "$32" },
-      36: { gap: "$36" },
-      40: { gap: "$40" },
-      48: { gap: "$48" },
-      56: { gap: "$56" },
-      64: { gap: "$64" },
-      72: { gap: "$72" },
-      80: { gap: "$80" },
-      full: { gap: "$full" }
-    }
-  },
-  defaultVariants: {
-    direction: "row",
-    gap: 10
-  }
-});
-
-// src/components/Box.tsx
-import { Box as BoxRadix } from "@radix-ui/themes";
-var Box = BoxRadix;
-
 // src/components/TextField.tsx
 import { TextField as TextFieldRadix } from "@radix-ui/themes";
-import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
 var TextFieldStyled = styled(TextFieldRadix.Root, {
   height: "$40",
   fontFamily: "$default",
@@ -1879,13 +2224,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 +2312,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__ */ jsx6(TextFieldSlot, { position: "flex-end", name, color, children: /* @__PURE__ */ jsx6(Icon_default, { name: "check" }) })
   ] }));
 }
 function TextFieldSlot(_a) {
@@ -1962,7 +2336,7 @@ function TextFieldSlot(_a) {
     "onClick"
   ]);
   console.log("onclick", onClick);
-  return /* @__PURE__ */ jsx5(Fragment, { children: !!onClick ? /* @__PURE__ */ jsx5(TextFieldSlotStyled, __spreadProps(__spreadValues({}, props), { style: {
+  return /* @__PURE__ */ jsx6(Fragment, { children: !!onClick ? /* @__PURE__ */ jsx6(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 +2344,7 @@ function TextFieldSlot(_a) {
     zIndex: 2,
     top: 0,
     cursor: "pointer"
-  }, onClick: () => onClick(), children })) : /* @__PURE__ */ jsx5(TextFieldSlotStyled, __spreadProps(__spreadValues({}, props), { style: {
+  }, onClick: () => onClick(), children })) : /* @__PURE__ */ jsx6(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,
@@ -1980,7 +2354,7 @@ function TextFieldSlot(_a) {
 
 // src/components/RadioGroup.tsx
 import { RadioGroup as RadioGroupRadix } from "@radix-ui/themes";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var RadioGroupStyled = styled(RadioGroupRadix.Root, {
   fontFamily: "$default",
   letterSpacing: "0px",
@@ -2027,8 +2401,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 +2416,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 +2450,7 @@ var RadioGroupStyled = styled(RadioGroupRadix.Root, {
   },
   compoundVariants: [
     {
-      isValid: void 0,
+      color: "blue",
       disabled: false,
       css: {
         "label": {
@@ -2092,7 +2467,7 @@ var RadioGroupStyled = styled(RadioGroupRadix.Root, {
       }
     },
     {
-      isValid: void 0,
+      color: "blue",
       disabled: true,
       css: {
         "label button": {
@@ -2105,7 +2480,7 @@ var RadioGroupStyled = styled(RadioGroupRadix.Root, {
       }
     },
     {
-      isValid: true,
+      color: "success",
       disabled: true,
       css: {
         "label button": {
@@ -2118,7 +2493,7 @@ var RadioGroupStyled = styled(RadioGroupRadix.Root, {
       }
     },
     {
-      isValid: false,
+      color: "error",
       disabled: true,
       css: {
         "label button": {
@@ -2130,23 +2505,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(
+  return /* @__PURE__ */ jsx7(
     RadioGroupStyled,
     __spreadProps(__spreadValues({
-      disabled,
-      isValid
+      disabled
     }, props), {
       children
     })
@@ -2158,12 +2534,12 @@ function RadioItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ jsx6(RadioGroupRadix.Item, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx7(RadioGroupRadix.Item, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/CheckboxGroup.tsx
 import { CheckboxGroup as CheckboxGroupRadix } from "@radix-ui/themes";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
   fontFamily: "$default",
   letterSpacing: "0px",
@@ -2212,8 +2588,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 +2603,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 +2637,7 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
   },
   compoundVariants: [
     {
-      isValid: void 0,
+      color: "blue",
       disabled: false,
       css: {
         "label": {
@@ -2277,7 +2654,7 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
       }
     },
     {
-      isValid: void 0,
+      color: "blue",
       disabled: true,
       css: {
         "label button": {
@@ -2290,7 +2667,7 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
       }
     },
     {
-      isValid: true,
+      color: "success",
       disabled: true,
       css: {
         "label button": {
@@ -2303,7 +2680,7 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
       }
     },
     {
-      isValid: false,
+      color: "error",
       disabled: true,
       css: {
         "label button": {
@@ -2315,7 +2692,11 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
         }
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    color: "blue",
+    disabled: false
+  }
 });
 function CheckboxGroup(_a) {
   var _b = _a, {
@@ -2323,7 +2704,7 @@ function CheckboxGroup(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ jsx7(CheckboxGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx8(CheckboxGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 function CheckboxItem(_a) {
   var _b = _a, {
@@ -2331,12 +2712,12 @@ function CheckboxItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ jsx7(CheckboxGroupRadix.Item, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx8(CheckboxGroupRadix.Item, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Filter.tsx
 import { Theme, DropdownMenu } from "@radix-ui/themes";
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var FilterStyled = styled("div", {
   fontFamily: "$default",
   color: "$dark600",
@@ -2382,19 +2763,19 @@ function Filter(_a) {
     "children",
     "placeholder"
   ]);
-  return /* @__PURE__ */ jsx8(Theme, { children: /* @__PURE__ */ jsx8(DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs2(FilterStyled, { children: [
-    /* @__PURE__ */ jsx8(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsxs2("button", { "aria-label": placeholder || "Fitrar", children: [
-      /* @__PURE__ */ jsx8(Icon, { name: "filter" }),
-      /* @__PURE__ */ jsx8("span", { children: placeholder || "Fitrar" }),
-      /* @__PURE__ */ jsx8(DropdownMenu.TriggerIcon, {})
+  return /* @__PURE__ */ jsx9(Theme, { children: /* @__PURE__ */ jsx9(DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs2(FilterStyled, { children: [
+    /* @__PURE__ */ jsx9(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsxs2("button", { "aria-label": placeholder || "Fitrar", children: [
+      /* @__PURE__ */ jsx9(Icon, { name: "filter" }),
+      /* @__PURE__ */ jsx9("span", { children: placeholder || "Fitrar" }),
+      /* @__PURE__ */ jsx9(DropdownMenu.TriggerIcon, {})
     ] }) }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       FilterContentStyled,
       {
         avoidCollisions: false,
         align: "start",
         alignOffset: -14,
-        children: /* @__PURE__ */ jsx8(CheckboxGroup, { children })
+        children: /* @__PURE__ */ jsx9(CheckboxGroup, { children })
       }
     )
   ] }) })) });
@@ -2405,12 +2786,12 @@ function FilterItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ jsx8(CheckboxItem, __spreadProps(__spreadValues({}, props), { style: { padding: "8px 12px" }, children }));
+  return /* @__PURE__ */ jsx9(CheckboxItem, __spreadProps(__spreadValues({}, props), { style: { padding: "8px 12px" }, children }));
 }
 
 // src/components/Dropdown.tsx
 import { Theme as Theme2, DropdownMenu as DropdownMenuRadix } from "@radix-ui/themes";
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var DropdownMenuStyled = styled("div", {
   fontFamily: "$default",
   color: "$dark600",
@@ -2468,18 +2849,18 @@ function DropdownMenu2(_a) {
     "children",
     "placeholder"
   ]);
-  return /* @__PURE__ */ jsx9(Theme2, { children: /* @__PURE__ */ jsx9(DropdownMenuRadix.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs3(DropdownMenuStyled, { children: [
-    /* @__PURE__ */ jsx9(DropdownMenuRadix.Trigger, { children: /* @__PURE__ */ jsxs3("button", { "aria-label": placeholder || "Fitrar", children: [
-      /* @__PURE__ */ jsx9("span", { children: placeholder || "Fitrar" }),
-      /* @__PURE__ */ jsx9(DropdownMenuRadix.TriggerIcon, {})
+  return /* @__PURE__ */ jsx10(Theme2, { children: /* @__PURE__ */ jsx10(DropdownMenuRadix.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs3(DropdownMenuStyled, { children: [
+    /* @__PURE__ */ jsx10(DropdownMenuRadix.Trigger, { children: /* @__PURE__ */ jsxs3("button", { "aria-label": placeholder || "Fitrar", children: [
+      /* @__PURE__ */ jsx10("span", { children: placeholder || "Fitrar" }),
+      /* @__PURE__ */ jsx10(DropdownMenuRadix.TriggerIcon, {})
     ] }) }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       DropdownMenuContentStyled,
       {
         avoidCollisions: false,
         align: "start",
         alignOffset: -14,
-        children: /* @__PURE__ */ jsx9(DropdownMenuRadix.Group, { children })
+        children: /* @__PURE__ */ jsx10(DropdownMenuRadix.Group, { children })
       }
     )
   ] }) })) });
@@ -2490,13 +2871,865 @@ function DropdownMenuItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ jsx9(DropdownMenuItemStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx10(DropdownMenuItemStyled, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Badge.tsx
+import React from "react";
+import { Badge as BadgeRadix } from "@radix-ui/themes";
+import { jsx as jsx11 } 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__ */ jsx11(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, { size: props.size });
+    }
+    return child;
+  }) }));
+}
+
+// src/components/Modal.tsx
+import { Dialog as ModalRadix } from "@radix-ui/themes";
+
+// src/components/Box.tsx
+import { Box as BoxRadix } from "@radix-ui/themes";
+var Box = BoxRadix;
+
+// src/components/Flex.tsx
+import { Flex as FlexRadix } from "@radix-ui/themes";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var FlexStyled = styled(FlexRadix, {
+  variants: {
+    display: {
+      "flex": { display: "flex" },
+      "inline-flex": { display: "inline-flex" }
+    },
+    align: {
+      start: { alignItems: "flex-start" },
+      center: { alignItems: "center" },
+      end: { alignItems: "flex-end" },
+      stretch: { alignItems: "stretch" },
+      baseline: { alignItems: "baseline" }
+    },
+    justify: {
+      start: { justifyContent: "flex-start" },
+      center: { justifyContent: "center" },
+      end: { justifyContent: "flex-end" },
+      between: { justifyContent: "space-between" },
+      around: { justifyContent: "space-around" },
+      evenly: { justifyContent: "space-evenly" }
+    },
+    direction: {
+      row: { flexDirection: "row" },
+      column: { flexDirection: "column" },
+      "row-reverse": { flexDirection: "row-reverse" },
+      "column-reverse": { flexDirection: "column-reverse" }
+    },
+    gap: {
+      2: { gap: "$2" },
+      4: { gap: "$4" },
+      6: { gap: "$6" },
+      8: { gap: "$8" },
+      10: { gap: "$10" },
+      12: { gap: "$12" },
+      14: { gap: "$14" },
+      16: { gap: "$16" },
+      20: { gap: "$20" },
+      22: { gap: "$22" },
+      24: { gap: "$24" },
+      32: { gap: "$32" },
+      36: { gap: "$36" },
+      40: { gap: "$40" },
+      48: { gap: "$48" },
+      56: { gap: "$56" },
+      64: { gap: "$64" },
+      72: { gap: "$72" },
+      80: { gap: "$80" },
+      full: { gap: "$full" }
+    },
+    gapY: {
+      2: { gap: "$2" },
+      4: { gap: "$4" },
+      6: { gap: "$6" },
+      8: { gap: "$8" },
+      10: { gap: "$10" },
+      12: { gap: "$12" },
+      14: { gap: "$14" },
+      16: { gap: "$16" },
+      20: { gap: "$20" },
+      22: { gap: "$22" },
+      24: { gap: "$24" },
+      32: { gap: "$32" },
+      36: { gap: "$36" },
+      40: { gap: "$40" },
+      48: { gap: "$48" },
+      56: { gap: "$56" },
+      64: { gap: "$64" },
+      72: { gap: "$72" },
+      80: { gap: "$80" },
+      full: { gap: "$full" }
+    },
+    gapX: {
+      2: { gap: "$2" },
+      4: { gap: "$4" },
+      6: { gap: "$6" },
+      8: { gap: "$8" },
+      10: { gap: "$10" },
+      12: { gap: "$12" },
+      14: { gap: "$14" },
+      16: { gap: "$16" },
+      20: { gap: "$20" },
+      22: { gap: "$22" },
+      24: { gap: "$24" },
+      32: { gap: "$32" },
+      36: { gap: "$36" },
+      40: { gap: "$40" },
+      48: { gap: "$48" },
+      56: { gap: "$56" },
+      64: { gap: "$64" },
+      72: { gap: "$72" },
+      80: { gap: "$80" },
+      full: { gap: "$full" }
+    }
+  },
+  defaultVariants: {
+    display: "flex",
+    direction: "row",
+    gap: 10
+  }
+});
+function Flex2(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx12(FlexStyled, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Modal.tsx
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+var ModalStyled = styled("div", {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$13",
+  borderRadius: "$sm"
+});
+var ModalContentStyled = styled(ModalRadix.Content, {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$13",
+  maxWidth: "502px",
+  width: "100%",
+  border: "1px solid $neutral",
+  borderRadius: "$2xl",
+  boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)"
+});
+var ModalHeaderStyled = styled("div", {
+  borderBottom: "1px solid $neutral300",
+  padding: "$16 $24",
+  textAlign: "center",
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+var ModalIconClose = styled(Icon_default, {
+  position: "absolute",
+  right: "$24",
+  cursor: "pointer"
+});
+var ModalFooterStyled = styled("div", {
+  borderTop: "1px solid $neutral300",
+  padding: "$16 $24",
+  ".modal-footer-flex": {
+    justifyContent: "flex-end"
+  }
+});
+var ModalTitleStyled = styled(ModalRadix.Title, {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$18",
+  fontWeight: "medium",
+  fontStyle: "normal",
+  textTransform: "uppercase"
+});
+function Modal(_a) {
+  var _b = _a, { children, title, trigger, cancel, cancelText, action, actionText, onAction } = _b, props = __objRest(_b, ["children", "title", "trigger", "cancel", "cancelText", "action", "actionText", "onAction"]);
+  return /* @__PURE__ */ jsx13(ModalRadix.Root, { children: /* @__PURE__ */ jsxs4(ModalStyled, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx13(ModalRadix.Trigger, { children: trigger }),
+    /* @__PURE__ */ jsxs4(ModalContentStyled, { children: [
+      /* @__PURE__ */ jsxs4(ModalHeaderStyled, { children: [
+        title && /* @__PURE__ */ jsx13(ModalTitleStyled, { children: title }),
+        /* @__PURE__ */ jsx13(ModalRadix.Close, { children: /* @__PURE__ */ jsx13(ModalIconClose, { name: "close", size: "xl" }) })
+      ] }),
+      /* @__PURE__ */ jsx13(Box, { children }),
+      cancel || action ? /* @__PURE__ */ jsx13(ModalFooterStyled, { children: /* @__PURE__ */ jsxs4(Flex2, { gap: "10", justify: "end", width: "100%", className: "modal-footer-flex", children: [
+        action && onAction && /* @__PURE__ */ jsx13(ModalRadix.Close, { children: /* @__PURE__ */ jsx13(Button, { variant: "contained", color: "brand", onClick: onAction, children: actionText ? actionText : "Salvar" }) }),
+        cancel && /* @__PURE__ */ jsx13(ModalRadix.Close, { children: /* @__PURE__ */ jsx13(Button, { variant: "outlined", color: "neutral", children: cancelText ? cancelText : "cancelar" }) })
+      ] }) }) : null
+    ] })
+  ] })) });
+}
+
+// src/components/Alert.tsx
+import { Theme as Theme3, AlertDialog } from "@radix-ui/themes";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var AlertDialogSimpleStyled = styled(AlertDialog.Content, {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$13",
+  padding: "$16",
+  borderRadius: "$sm",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "$10",
+  marginTop: "$10",
+  variants: {
+    color: {
+      error: {
+        backgroundColor: "$error50",
+        border: "1px solid $error600",
+        color: "$error600",
+        "svg": {
+          color: "$error600"
+        }
+      },
+      warning: {
+        backgroundColor: "$warning50",
+        border: "1px solid $warning600",
+        color: "$warning600",
+        "svg": {
+          color: "$warning600"
+        }
+      },
+      success: {
+        backgroundColor: "$success50",
+        border: "1px solid $success600",
+        color: "$success600",
+        "svg": {
+          color: "$success600"
+        }
+      },
+      info: {
+        backgroundColor: "$info50",
+        border: "1px solid $info600",
+        color: "$info600",
+        "svg": {
+          color: "$info600"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    color: "success"
+  }
+});
+var AlertDialogCompleteStyled = styled(AlertDialog.Content, {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$13",
+  borderRadius: "$sm",
+  marginTop: "$10",
+  maxWidth: "440px",
+  width: "100%",
+  boxShadow: "0px 0px 15px 5px rgba(0, 0, 0, 0.05)",
+  border: "1px solid $neutral200",
+  ".le-alert-dialog-row": {
+    display: "flex",
+    flexDirection: "column",
+    flexWrap: "wrap",
+    alignItems: "center",
+    textAlign: "center",
+    justifyContent: "space-between",
+    gap: "$10"
+  },
+  variants: {
+    color: {}
+  }
+});
+var AlertDialogDescriptionStyled = styled(AlertDialog.Description, {
+  padding: 0,
+  margin: 0
+});
+var AlertDialogTitleStyled = styled(AlertDialog.Title, {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$20",
+  fontWeight: "$semibold",
+  padding: 0,
+  margin: 0
+});
+var AlertDialogSubtitleStyled = styled(Text, {
+  margin: 0,
+  fontSize: "$48",
+  color: "$gray100",
+  fontWeight: "$semibold"
+});
+var AlertDialogRowStyled = styled("div", {
+  padding: "$32 $24"
+});
+var AlertDialoghrStyled = styled("hr", {
+  margin: 0,
+  padding: 0,
+  border: "none",
+  borderTop: "1px solid $neutral200"
+});
+function Alert(_a) {
+  var _b = _a, {
+    color,
+    trigger,
+    completAlert,
+    simpleAlert
+  } = _b, props = __objRest(_b, [
+    "color",
+    "trigger",
+    "completAlert",
+    "simpleAlert"
+  ]);
+  console.log("completAlert", completAlert, " simpleAlert", simpleAlert);
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    simpleAlert && /* @__PURE__ */ jsx14(Theme3, { children: /* @__PURE__ */ jsxs5(AlertDialog.Root, { children: [
+      /* @__PURE__ */ jsx14(AlertDialog.Trigger, { children: trigger }),
+      /* @__PURE__ */ jsx14(Fragment2, { children: /* @__PURE__ */ jsxs5(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
+        /* @__PURE__ */ jsx14(AlertDialogDescriptionStyled, { children: simpleAlert.description }),
+        simpleAlert.cancel && /* @__PURE__ */ jsx14(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx14(Button, { variant: "text", children: /* @__PURE__ */ jsx14(Icon_default, { name: "close" }) }) })
+      ] })) })
+    ] }) }),
+    completAlert && /* @__PURE__ */ jsx14(Theme3, { children: /* @__PURE__ */ jsxs5(AlertDialog.Root, { children: [
+      /* @__PURE__ */ jsx14(AlertDialog.Trigger, { children: trigger }),
+      /* @__PURE__ */ jsxs5(AlertDialogCompleteStyled, { children: [
+        /* @__PURE__ */ jsxs5(AlertDialogRowStyled, { className: "le-alert-dialog-row", children: [
+          color === "success" && /* @__PURE__ */ jsxs5("svg", { width: "56", height: "56", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ jsx14("g", { clipPath: "url(#clip0_1428_9995)", children: /* @__PURE__ */ jsx14("path", { d: "M28 56C35.4261 56 42.548 53.05 47.799 47.799C53.05 42.548 56 35.4261 56 28C56 20.5739 53.05 13.452 47.799 8.20101C42.548 2.94999 35.4261 0 28 0C20.5739 0 13.452 2.94999 8.20101 8.20101C2.94999 13.452 0 20.5739 0 28C0 35.4261 2.94999 42.548 8.20101 47.799C13.452 53.05 20.5739 56 28 56ZM40.3594 22.8594L26.3594 36.8594C25.3312 37.8875 23.6688 37.8875 22.6516 36.8594L15.6516 29.8594C14.6234 28.8312 14.6234 27.1688 15.6516 26.1516C16.6797 25.1344 18.3422 25.1234 19.3594 26.1516L24.5 31.2922L36.6406 19.1406C37.6688 18.1125 39.3312 18.1125 40.3484 19.1406C41.3656 20.1688 41.3766 21.8312 40.3484 22.8484L40.3594 22.8594Z", fill: "#1E8535" }) }),
+            /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsx14("clipPath", { id: "clip0_1428_9995", children: /* @__PURE__ */ jsx14("rect", { width: "56", height: "56", fill: "white" }) }) })
+          ] }),
+          color === "error" && /* @__PURE__ */ jsxs5("svg", { width: "56", height: "56", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ jsx14("g", { clipPath: "url(#clip0_1428_10022)", children: /* @__PURE__ */ jsx14("path", { d: "M28 56C35.4261 56 42.548 53.05 47.799 47.799C53.05 42.548 56 35.4261 56 28C56 20.5739 53.05 13.452 47.799 8.20101C42.548 2.94999 35.4261 0 28 0C20.5739 0 13.452 2.94999 8.20101 8.20101C2.94999 13.452 0 20.5739 0 28C0 35.4261 2.94999 42.548 8.20101 47.799C13.452 53.05 20.5739 56 28 56ZM19.1406 19.1406C20.1687 18.1125 21.8312 18.1125 22.8484 19.1406L27.9891 24.2812L33.1297 19.1406C34.1578 18.1125 35.8203 18.1125 36.8375 19.1406C37.8547 20.1687 37.8656 21.8312 36.8375 22.8484L31.6969 27.9891L36.8375 33.1297C37.8656 34.1578 37.8656 35.8203 36.8375 36.8375C35.8094 37.8547 34.1469 37.8656 33.1297 36.8375L27.9891 31.6969L22.8484 36.8375C21.8203 37.8656 20.1578 37.8656 19.1406 36.8375C18.1234 35.8094 18.1125 34.1469 19.1406 33.1297L24.2812 27.9891L19.1406 22.8484C18.1125 21.8203 18.1125 20.1578 19.1406 19.1406Z", fill: "#AD1F2B" }) }),
+            /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsx14("clipPath", { id: "clip0_1428_10022", children: /* @__PURE__ */ jsx14("rect", { width: "56", height: "56", fill: "white" }) }) })
+          ] }),
+          color === "warning" && /* @__PURE__ */ jsxs5("svg", { width: "56", height: "56", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ jsx14("g", { clipPath: "url(#clip0_1428_10038)", children: /* @__PURE__ */ jsx14("path", { d: "M28 56C35.4261 56 42.548 53.05 47.799 47.799C53.05 42.548 56 35.4261 56 28C56 20.5739 53.05 13.452 47.799 8.20101C42.548 2.94999 35.4261 0 28 0C20.5739 0 13.452 2.94999 8.20101 8.20101C2.94999 13.452 0 20.5739 0 28C0 35.4261 2.94999 42.548 8.20101 47.799C13.452 53.05 20.5739 56 28 56ZM28 14C29.4547 14 30.625 15.1703 30.625 16.625V28.875C30.625 30.3297 29.4547 31.5 28 31.5C26.5453 31.5 25.375 30.3297 25.375 28.875V16.625C25.375 15.1703 26.5453 14 28 14ZM24.5 38.5C24.5 37.5717 24.8687 36.6815 25.5251 36.0251C26.1815 35.3688 27.0717 35 28 35C28.9283 35 29.8185 35.3688 30.4749 36.0251C31.1313 36.6815 31.5 37.5717 31.5 38.5C31.5 39.4283 31.1313 40.3185 30.4749 40.9749C29.8185 41.6312 28.9283 42 28 42C27.0717 42 26.1815 41.6312 25.5251 40.9749C24.8687 40.3185 24.5 39.4283 24.5 38.5Z", fill: "#CC9A06" }) }),
+            /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsx14("clipPath", { id: "clip0_1428_10038", children: /* @__PURE__ */ jsx14("rect", { width: "56", height: "56", fill: "white" }) }) })
+          ] }),
+          color === "info" && /* @__PURE__ */ jsxs5("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ jsx14("g", { clipPath: "url(#clip0_1645_46)", children: /* @__PURE__ */ jsx14("path", { d: "M20 40C25.3043 40 30.3914 37.8929 34.1421 34.1421C37.8929 30.3914 40 25.3043 40 20C40 14.6957 37.8929 9.60859 34.1421 5.85786C30.3914 2.10714 25.3043 0 20 0C14.6957 0 9.60859 2.10714 5.85786 5.85786C2.10714 9.60859 0 14.6957 0 20C0 25.3043 2.10714 30.3914 5.85786 34.1421C9.60859 37.8929 14.6957 40 20 40ZM20 10C21.0391 10 21.875 10.8359 21.875 11.875V20.625C21.875 21.6641 21.0391 22.5 20 22.5C18.9609 22.5 18.125 21.6641 18.125 20.625V11.875C18.125 10.8359 18.9609 10 20 10ZM17.5 27.5C17.5 26.837 17.7634 26.2011 18.2322 25.7322C18.7011 25.2634 19.337 25 20 25C20.663 25 21.2989 25.2634 21.7678 25.7322C22.2366 26.2011 22.5 26.837 22.5 27.5C22.5 28.163 22.2366 28.7989 21.7678 29.2678C21.2989 29.7366 20.663 30 20 30C19.337 30 18.7011 29.7366 18.2322 29.2678C17.7634 28.7989 17.5 28.163 17.5 27.5Z", fill: "#9FB6C7" }) }),
+            /* @__PURE__ */ jsx14("defs", { children: /* @__PURE__ */ jsx14("clipPath", { id: "clip0_1645_46", children: /* @__PURE__ */ jsx14("rect", { width: "40", height: "40", fill: "white" }) }) })
+          ] }),
+          completAlert.title && /* @__PURE__ */ jsx14(AlertDialogTitleStyled, { children: completAlert.title }),
+          /* @__PURE__ */ jsxs5(AlertDialogDescriptionStyled, { children: [
+            completAlert.subtitle && /* @__PURE__ */ jsx14(Text, { css: {
+              fontSize: "$16"
+            }, asChild: true, children: /* @__PURE__ */ jsx14("h2", { children: completAlert.subtitle }) }),
+            completAlert.description
+          ] })
+        ] }),
+        completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ jsx14(AlertDialoghrStyled, {}) : null,
+        /* @__PURE__ */ jsx14(AlertDialogRowStyled, { children: /* @__PURE__ */ jsxs5(Flex2, { gap: "10", justify: "end", width: "100%", children: [
+          completAlert.onAction && /* @__PURE__ */ jsx14(AlertDialog.Action, { children: /* @__PURE__ */ jsx14(Button, { variant: "contained", onClick: completAlert.onAction, children: completAlert.actionText || "Salvar" }) }),
+          completAlert.cancel && /* @__PURE__ */ jsx14(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx14(Button, { variant: "outlined", color: "neutral", children: completAlert.cancelText || "Cancelar" }) })
+        ] }) })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/components/Switch.tsx
+import { Switch as RadixSwitch } from "@radix-ui/themes";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var SwitchStyled = styled(RadixSwitch, {
+  all: "unset",
+  borderRadius: "$full",
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "all 0.3s",
+  cursor: "pointer",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    borderRadius: "$full",
+    pointerEvents: "none",
+    cursor: "pointer"
+  },
+  "span": {
+    position: "absolute",
+    top: "50%",
+    left: 0,
+    transform: "translate(0, -50%)",
+    borderRadius: "50%",
+    transition: "all 0.3s",
+    cursor: "pointer",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    boxShadow: "0px 0px 4px 0px rgba(0, 0, 0, 0.24)"
+  },
+  '&[data-state="checked"] span': {
+    left: "auto",
+    transform: "translate(50%, -50%)"
+  },
+  variants: {
+    color: {
+      brand: {
+        "&::before": {
+          backgroundColor: "$brand50"
+        },
+        "span": {
+          backgroundColor: "$dark50",
+          borderColor: "$neutral300"
+        },
+        '&[data-state="checked"]  span': {
+          backgroundColor: "$brand500",
+          borderColor: "$brand500"
+        }
+      }
+    },
+    size: {
+      sm: {
+        width: "32px",
+        height: "20px",
+        "&::before": {
+          width: "$32",
+          height: "$12"
+        },
+        "span": {
+          width: "$20",
+          height: "$20"
+        }
+      },
+      md: {
+        width: "40px",
+        height: "20px",
+        "&::before": {
+          width: "40px",
+          height: "16px"
+        },
+        "span": {
+          width: "24px",
+          height: "24px"
+        }
+      },
+      lg: {
+        width: "56px",
+        height: "32px",
+        "&::before": {
+          width: "56px",
+          height: "24px"
+        },
+        "span": {
+          width: "32px",
+          height: "32px"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "brand"
+  }
+});
+function Switch(props) {
+  return /* @__PURE__ */ jsx15(SwitchStyled, __spreadValues({ color: "brand", defaultChecked: true }, props));
+}
+
+// src/components/Step.tsx
+import React2 from "react";
+import { Box as Box2, Tabs as StepRadix } from "@radix-ui/themes";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var StepStyled = styled("div", {
+  fontFamily: "$default",
+  color: "$gray100",
+  letterSpacing: "0px"
+});
+var StepTriggerStyled = styled(StepRadix.Trigger, {
+  all: "unset",
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "$16",
+  fontWeight: "$medium",
+  minWidth: "32px",
+  minHeight: "32px",
+  marginRight: "40px",
+  "&:last-of-type": {
+    marginRight: 0
+  },
+  "& > span:first-of-type": {
+    width: "32px",
+    height: "32px",
+    borderRadius: "$full",
+    backgroundColor: "$neutral50",
+    border: "1px solid $neutral200",
+    color: "$gray700",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1,
+    position: "relative"
+  },
+  '&[data-state="active"] > span:first-of-type': {
+    backgroundColor: "$blue500",
+    borderColor: "$blue500",
+    color: "white"
+  },
+  "& > span:last-of-type": {
+    display: "none"
+  },
+  "&:not(:first-of-type)::before": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    right: "calc(100% + 4px)",
+    transform: "translateY(-50%)",
+    width: "32px",
+    height: "8px",
+    borderRadius: "$sm",
+    backgroundColor: "$neutral50",
+    zIndex: 0
+  },
+  '&[data-state="active"]::before': {
+    backgroundColor: "$blue500"
+  },
+  '&[data-filled="true"] > span:first-of-type': {
+    backgroundColor: "$blue500",
+    borderColor: "$blue500",
+    color: "white"
+  },
+  '&[data-filled="true"]::before': {
+    backgroundColor: "$blue500"
+  }
+});
+var StepListStyled = styled(StepRadix.List, {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  gap: "$4"
+});
+function Step(_a) {
+  var _b = _a, { children, defaultValue } = _b, props = __objRest(_b, ["children", "defaultValue"]);
+  return /* @__PURE__ */ jsx16(StepRadix.Root, { defaultValue: String(defaultValue), children: /* @__PURE__ */ jsx16(StepStyled, __spreadProps(__spreadValues({}, props), { children })) });
+}
+function StepTrigger(_a) {
+  var _b = _a, { value, children, currentStep } = _b, props = __objRest(_b, ["value", "children", "currentStep"]);
+  const isActiveOrPrevious = currentStep !== void 0 && value <= currentStep;
+  console.log(isActiveOrPrevious, "isActiveOrPrevius", currentStep);
+  return /* @__PURE__ */ jsx16(StepTriggerStyled, __spreadProps(__spreadValues({ "data-filled": isActiveOrPrevious, value: String(value) }, props), { children }));
+}
+function StepContent(_a) {
+  var _b = _a, { value, children } = _b, props = __objRest(_b, ["value", "children"]);
+  return /* @__PURE__ */ jsx16(StepRadix.Content, __spreadProps(__spreadValues({ value: String(value) }, props), { children }));
+}
+function StepList(_a) {
+  var _b = _a, { children, currentStep } = _b, props = __objRest(_b, ["children", "currentStep"]);
+  return /* @__PURE__ */ jsx16(StepListStyled, __spreadProps(__spreadValues({}, props), { children: React2.Children.map(children, (child) => {
+    if (React2.isValidElement(child) && child.type === StepTrigger) {
+      return React2.cloneElement(child, { currentStep });
+    }
+    return child;
+  }) }));
+}
+function StepWrapper(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx16(Box2, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Grid.tsx
+import { Grid as GridRadix } from "@radix-ui/themes";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var GridStyled = styled(GridRadix, {
+  display: "grid",
+  variants: {
+    display: {
+      "grid": { display: "grid" },
+      "inline-grid": { display: "inline-grid" }
+    },
+    align: {
+      start: { alignItems: "start" },
+      center: { alignItems: "center" },
+      end: { alignItems: "end" },
+      stretch: { alignItems: "stretch" }
+    },
+    justify: {
+      start: { justifyContent: "start" },
+      center: { justifyContent: "center" },
+      end: { justifyContent: "end" },
+      between: { justifyContent: "space-between" }
+    },
+    flow: {
+      row: { gridAutoFlow: "row" },
+      column: { gridAutoFlow: "column" },
+      "row-dense": { gridAutoFlow: "row dense" },
+      "column-dense": { gridAutoFlow: "column dense" }
+    },
+    columns: {
+      1: { gridTemplateColumns: "repeat(1, 1fr)" },
+      2: { gridTemplateColumns: "repeat(2, 1fr)" },
+      3: { gridTemplateColumns: "repeat(3, 1fr)" },
+      4: { gridTemplateColumns: "repeat(4, 1fr)" },
+      6: { gridTemplateColumns: "repeat(6, 1fr)" },
+      12: { gridTemplateColumns: "repeat(12, 1fr)" }
+    },
+    rows: {
+      1: { gridTemplateRows: "repeat(1, 1fr)" },
+      2: { gridTemplateRows: "repeat(2, 1fr)" },
+      3: { gridTemplateRows: "repeat(3, 1fr)" },
+      4: { gridTemplateRows: "repeat(4, 1fr)" },
+      5: { gridTemplateRows: "repeat(5, 1fr)" },
+      6: { gridTemplateRows: "repeat(6, 1fr)" },
+      7: { gridTemplateRows: "repeat(7, 1fr)" },
+      8: { gridTemplateRows: "repeat(8, 1fr)" },
+      9: { gridTemplateRows: "repeat(9, 1fr)" },
+      10: { gridTemplateRows: "repeat(10, 1fr)" },
+      11: { gridTemplateRows: "repeat(11, 1fr)" },
+      12: { gridTemplateRows: "repeat(12, 1fr)" },
+      auto: { gridTemplateRows: "auto" }
+    },
+    gap: {
+      2: { gap: "$2" },
+      4: { gap: "$4" },
+      6: { gap: "$6" },
+      8: { gap: "$8" },
+      10: { gap: "$10" },
+      12: { gap: "$12" },
+      14: { gap: "$14" },
+      16: { gap: "$16" },
+      20: { gap: "$20" },
+      22: { gap: "$22" },
+      24: { gap: "$24" },
+      32: { gap: "$32" },
+      36: { gap: "$36" },
+      40: { gap: "$40" },
+      48: { gap: "$48" },
+      56: { gap: "$56" },
+      64: { gap: "$64" },
+      72: { gap: "$72" },
+      80: { gap: "$80" },
+      full: { gap: "$full" }
+    },
+    gapX: {
+      2: { gap: "$2" },
+      4: { gap: "$4" },
+      6: { gap: "$6" },
+      8: { gap: "$8" },
+      10: { gap: "$10" },
+      12: { gap: "$12" },
+      14: { gap: "$14" },
+      16: { gap: "$16" },
+      20: { gap: "$20" },
+      22: { gap: "$22" },
+      24: { gap: "$24" },
+      32: { gap: "$32" },
+      36: { gap: "$36" },
+      40: { gap: "$40" },
+      48: { gap: "$48" },
+      56: { gap: "$56" },
+      64: { gap: "$64" },
+      72: { gap: "$72" },
+      80: { gap: "$80" },
+      full: { gap: "$full" }
+    },
+    gapY: {
+      2: { gap: "$2" },
+      4: { gap: "$4" },
+      6: { gap: "$6" },
+      8: { gap: "$8" },
+      10: { gap: "$10" },
+      12: { gap: "$12" },
+      14: { gap: "$14" },
+      16: { gap: "$16" },
+      20: { gap: "$20" },
+      22: { gap: "$22" },
+      24: { gap: "$24" },
+      32: { gap: "$32" },
+      36: { gap: "$36" },
+      40: { gap: "$40" },
+      48: { gap: "$48" },
+      56: { gap: "$56" },
+      64: { gap: "$64" },
+      72: { gap: "$72" },
+      80: { gap: "$80" },
+      full: { gap: "$full" }
+    }
+  },
+  defaultVariants: {
+    gap: 10
+  }
+});
+function Grid(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx17(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Container.tsx
+import { Container as ContainerRadix } from "@radix-ui/themes";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ContainerStyled = styled(ContainerRadix, {
+  variants: {
+    size: {
+      xs: { maxWidth: "576px" },
+      sm: { minWidth: "577px", maxWidth: "767px" },
+      md: { mixWidth: "768px", maxWidth: "991px" },
+      lg: { mixWidth: "992px", maxWidth: "1199px" },
+      xl: { mixWidth: "1200px", maxWidth: "1399px" },
+      xxl: { mixWidth: "1400px" },
+      responsive: { width: "100%", maxWidth: "100%", minWidth: "100%" }
+    },
+    display: {
+      none: { display: "none" },
+      initial: { display: "initial" }
+    },
+    align: {
+      left: { marginLeft: 0, marginRight: "auto" },
+      center: { marginLeft: "auto", marginRight: "auto" },
+      right: { marginLeft: "auto", marginRight: 0 }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    align: "left",
+    display: "initial"
+  }
+});
+function Container(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx18(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Section.tsx
+import { Section as SectionRadix } from "@radix-ui/themes";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var SectionStyled = styled(SectionRadix, {
+  variants: {
+    size: {
+      xs: { maxWidth: "576px" },
+      sm: { minWidth: "577px", maxWidth: "767px" },
+      md: { mixWidth: "768px", maxWidth: "991px" },
+      lg: { mixWidth: "992px", maxWidth: "1199px" },
+      xl: { mixWidth: "1200px", maxWidth: "1399px" },
+      xxl: { mixWidth: "1400px" },
+      responsive: { width: "100%", maxWidth: "100%", minWidth: "100%" }
+    },
+    display: {
+      none: { display: "none" },
+      initial: { display: "initial" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    display: "initial"
+  }
+});
+function Section(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx19(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 export {
+  Alert,
+  AlertDialogCompleteStyled,
+  AlertDialogDescriptionStyled,
+  AlertDialogRowStyled,
+  AlertDialogSimpleStyled,
+  AlertDialogSubtitleStyled,
+  AlertDialogTitleStyled,
+  AlertDialoghrStyled,
   Avatar,
   AvatarStyled,
-  BadgeText,
-  BodyText,
+  Badge,
+  BadgeStyled,
   Box,
   Button,
   ButtonGroup,
@@ -2504,29 +3737,43 @@ export {
   ButtonItem,
   ButtonItemStyled,
   ButtonStyled,
-  CaptionText,
   CheckboxGroup,
   CheckboxGroupStyled,
   CheckboxItem,
-  DisplayText,
+  Container,
+  ContainerStyled,
   DropdownMenu2 as DropdownMenu,
   DropdownMenuItem,
   Filter,
   FilterItem,
   Flex2 as Flex,
-  Headline,
+  FlexStyled,
+  Grid,
+  GridStyled,
   Icon,
-  Label,
+  Modal,
+  ModalContentStyled,
+  ModalStyled,
+  ModalTitleStyled,
   RadioGroup,
   RadioGroupStyled,
   RadioItem,
-  Subtitle,
+  Section,
+  SectionStyled,
+  Step,
+  StepContent,
+  StepList,
+  StepStyled,
+  StepTrigger,
+  StepWrapper,
+  Switch,
+  SwitchStyled,
   Text,
   TextField,
   TextFieldSlot,
   TextFieldSlotStyled,
   TextFieldStyled,
-  TooltipText
+  TextStyle
 };
 /*! Bundled license information: