@lets-events/react 3.0.0 → 5.0.0

package/dist/index.js

@@ -241,7 +241,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;
@@ -300,7 +300,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment2;
+        exports2.Fragment = Fragment3;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal;
@@ -1010,10 +1010,18 @@ var require_prop_types = __commonJS({
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  Alert: () => Alert,
+  AlertDialogCompleteStyled: () => AlertDialogCompleteStyled,
+  AlertDialogDescriptionStyled: () => AlertDialogDescriptionStyled,
+  AlertDialogRowStyled: () => AlertDialogRowStyled,
+  AlertDialogSimpleStyled: () => AlertDialogSimpleStyled,
+  AlertDialogSubtitleStyled: () => AlertDialogSubtitleStyled,
+  AlertDialogTitleStyled: () => AlertDialogTitleStyled,
+  AlertDialoghrStyled: () => AlertDialoghrStyled,
   Avatar: () => Avatar,
   AvatarStyled: () => AvatarStyled,
-  BadgeText: () => BadgeText,
-  BodyText: () => BodyText,
+  Badge: () => Badge,
+  BadgeStyled: () => BadgeStyled,
   Box: () => Box,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
@@ -1021,29 +1029,43 @@ __export(index_exports, {
   ButtonItem: () => ButtonItem,
   ButtonItemStyled: () => ButtonItemStyled,
   ButtonStyled: () => ButtonStyled,
-  CaptionText: () => CaptionText,
   CheckboxGroup: () => CheckboxGroup,
   CheckboxGroupStyled: () => CheckboxGroupStyled,
   CheckboxItem: () => CheckboxItem,
-  DisplayText: () => DisplayText,
+  Container: () => Container,
+  ContainerStyled: () => ContainerStyled,
   DropdownMenu: () => DropdownMenu2,
   DropdownMenuItem: () => DropdownMenuItem,
   Filter: () => Filter,
   FilterItem: () => FilterItem,
   Flex: () => Flex2,
-  Headline: () => Headline,
+  FlexStyled: () => FlexStyled,
+  Grid: () => Grid,
+  GridStyled: () => GridStyled,
   Icon: () => Icon,
-  Label: () => Label,
+  Modal: () => Modal,
+  ModalContentStyled: () => ModalContentStyled,
+  ModalStyled: () => ModalStyled,
+  ModalTitleStyled: () => ModalTitleStyled,
   RadioGroup: () => RadioGroup,
   RadioGroupStyled: () => RadioGroupStyled,
   RadioItem: () => RadioItem,
-  Subtitle: () => Subtitle,
+  Section: () => Section,
+  SectionStyled: () => SectionStyled,
+  Step: () => Step,
+  StepContent: () => StepContent,
+  StepList: () => StepList,
+  StepStyled: () => StepStyled,
+  StepTrigger: () => StepTrigger,
+  StepWrapper: () => StepWrapper,
+  Switch: () => Switch,
+  SwitchStyled: () => SwitchStyled,
   Text: () => Text,
   TextField: () => TextField,
   TextFieldSlot: () => TextFieldSlot,
   TextFieldSlotStyled: () => TextFieldSlotStyled,
   TextFieldStyled: () => TextFieldStyled,
-  TooltipText: () => TooltipText
+  TextStyle: () => TextStyle
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1057,15 +1079,26 @@ var import_prop_types = __toESM(require_prop_types());
 var import_jsx_runtime = require("react/jsx-runtime");
 import_fontawesome_svg_core.library.add(import_free_solid_svg_icons.fas, import_free_regular_svg_icons.far, import_free_brands_svg_icons.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__ */ (0, import_jsx_runtime.jsx)(
     import_react_fontawesome.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 = {
@@ -1112,6 +1145,7 @@ var colors = {
   red800: "#75151D",
   red900: "#380A0E",
   red950: "#1E0507",
+  pink100: "#F9DCF3",
   purple50: "#F3EFFB",
   purple100: "#E6DEF7",
   purple200: "#D1C2F0",
@@ -1134,6 +1168,7 @@ var colors = {
   yellow800: "#664D03",
   yellow900: "#332701",
   yellow950: "#191300",
+  orange100: "#FEE0D8",
   dark50: "#FFFFFF",
   dark100: "#F4F4F4",
   dark200: "#EAEBF0",
@@ -1353,171 +1388,31 @@ var {
 
 // src/components/Text.tsx
 var import_themes = require("@radix-ui/themes");
-var Text = styled(import_themes.Text, {
-  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", {
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TextStyle = styled(import_themes.Text, {
   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
-var import_themes2 = require("@radix-ui/themes");
-var Headline = styled(import_themes2.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
-var import_themes3 = require("@radix-ui/themes");
-var Subtitle = styled(import_themes3.Text, {
-  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
-var import_themes4 = require("@radix-ui/themes");
-var BodyText = styled(import_themes4.Text, {
-  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
-var import_themes5 = require("@radix-ui/themes");
-var Label = styled(import_themes5.Text, {
-  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
-var import_themes6 = require("@radix-ui/themes");
-var BadgeText = styled(import_themes6.Text, {
-  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
-var import_themes7 = require("@radix-ui/themes");
-var CaptionText = styled(import_themes7.Text, {
-  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__ */ (0, import_jsx_runtime2.jsx)(TextStyle, __spreadValues({}, props));
+}
 
 // src/components/Button.tsx
-var import_themes8 = require("@radix-ui/themes");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ButtonStyled = styled(import_themes8.Button, {
+var import_themes2 = require("@radix-ui/themes");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ButtonStyled = styled(import_themes2.Button, {
   fontFamily: "$default",
   letterSpacing: 0,
   border: 0,
@@ -1529,115 +1424,60 @@ var ButtonStyled = styled(import_themes8.Button, {
   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",
-        "&:hover": {
-          transform: "scale(1.05)",
-          color: "$brand600"
-        },
-        "&:focus": {
-          border: "2px solid $gray500",
-          color: "$brand700"
-        },
-        "&:active": {
-          transform: "scale(0.95)",
-          color: "$brand500"
-        },
-        "&:hover:disabled": {
-          transform: "none"
-        },
-        "&:disabled": {
-          cursor: "not-allowed",
-          color: "$dark400",
-          transition: "none"
-        }
-      },
-      primary: {
-        backgroundColor: "$brand500",
-        color: "$grey50",
-        "&:hover": {
-          border: "$2 solid $brand700",
-          transform: "scale(1.05)",
-          backgroundColor: "$blue600"
-        },
-        "&:focus": {
-          border: 0,
-          backgroundColor: "$blue700"
-        },
-        "&:active": {
-          transform: "scale(0.95)",
-          border: "$4 solid $brand300",
-          backgroundColor: "$blue500"
-        },
-        "&:hover:disabled": {
-          transform: "none"
-        },
-        "&:disabled": {
-          border: "$1 solid $brand50",
-          backgroundColor: "$brand50",
-          boxShadow: "none",
-          color: "$neutral400",
-          transition: "none"
-        }
+        padding: 0,
+        border: 0
       },
-      purple: {
-        backgroundColor: "$purple500",
-        color: "$grey50",
+      contained: {
         "&:hover": {
-          transform: "scale(1.05)",
-          backgroundColor: "$purple600",
-          border: "$2 solid $purple700"
+          borderWidth: "$2",
+          borderStyle: "solid"
         },
         "&:focus": {
-          border: "$2 solid $purple700",
-          backgroundColor: "$purple600"
+          border: 0
         },
         "&:active": {
-          transform: "scale(0.95)",
-          border: "$2 solid $purple300",
-          backgroundColor: "$purple500"
-        },
-        "&:hover:disabled": {
-          transform: "none"
+          borderWidth: "$4",
+          borderStyle: "solid"
         },
         "&:disabled": {
-          border: "$1 solid $purple200",
-          backgroundColor: "$purple200",
-          transition: "none"
+          borderWidth: "$1",
+          borderStyle: "solid",
+          boxShadow: "none"
         }
       },
-      secondary: {
-        backgroundColor: "$neutral500",
-        border: "$1 solid $neutral300",
-        color: "$neutral600",
+      outlined: {
+        borderWidth: "$1",
+        borderStyle: "solid",
         "&:hover": {
-          transform: "scale(1.05)",
-          backgroundColor: "$neutral100",
-          border: "$1 solid $neutral400"
+          borderWidth: "$2",
+          borderStyle: "solid"
         },
         "&:focus": {
-          backgroundColor: "$neutral200",
-          border: 0
+          borderWidth: "$2",
+          borderStyle: "solid"
         },
         "&:active": {
-          transform: "scale(0.95)",
-          backgroundColor: "$neutral50",
-          border: "$1 solid $neutral300"
-        },
-        "&:hover:disabled": {
-          transform: "none"
+          borderWidth: "$2",
+          borderStyle: "solid"
         },
         "&:disabled": {
-          backgroundColor: "$neutral50",
-          border: "$1 solid $neutral200",
-          color: "$neutral400",
-          transition: "none"
+          borderWidth: "$1",
+          borderStyle: "solid",
+          color: "$neutral400"
         }
       }
     },
@@ -1670,88 +1510,336 @@ var ButtonStyled = styled(import_themes8.Button, {
     }
   },
   defaultVariants: {
-    variant: "simple",
-    size: "md"
-  }
-});
-function Button(_a) {
-  var _b = _a, { asChild } = _b, props = __objRest(_b, ["asChild"]);
-  const Component = asChild ? import_themes8.Button : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonStyled, __spreadValues({ as: Component }, props));
-}
-
-// src/components/ButtonGroup.tsx
-var import_themes9 = require("@radix-ui/themes");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ButtonItemStyled = styled(import_themes9.Button, {
-  fontFamily: "$default",
-  letterSpacing: 0,
-  border: 0,
-  transition: "all 300ms ease-out",
-  cursor: "pointer",
-  variants: {
-    active: {
-      true: {}
-    }
-  }
-});
-var ButtonGroupStyled = styled(import_themes9.Flex, {
-  display: "flex",
-  borderRadius: "$md",
-  overflow: "hidden",
-  variants: {
-    variant: {
-      primary: {
-        [`& ${ButtonItemStyled}`]: {
-          backgroundColor: "$brand500",
-          color: "$grey50",
-          "&:hover": { backgroundColor: "$blue600" },
-          "&:focus": { backgroundColor: "$blue700" },
-          "&:active": { backgroundColor: "$blue400" }
+    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": {
+          borderColor: "$brand700",
+          backgroundColor: "$blue600"
         },
-        [`& ${ButtonItemStyled}.active`]: {
-          backgroundColor: "$brand700",
-          "&:hover": { backgroundColor: "$brand700" },
-          "&:focus": { backgroundColor: "$brand700" },
-          "&:active": { backgroundColor: "$brand700" }
-        }
-      },
-      simple: {
-        [`& ${ButtonItemStyled}`]: {
-          backgroundColor: "transparent",
-          border: "1px solid $dark300",
-          color: "$dark600",
-          "&:hover": { backgroundColor: "$neutral" }
+        "&:focus": {
+          backgroundColor: "$blue700"
         },
-        [`& ${ButtonItemStyled}.active`]: {
-          backgroundColor: "$dark200",
-          color: "$dark600",
-          "&:hover": { backgroundColor: "$dark200", color: "$dark600" }
+        "&:active": {
+          borderColor: "$brand300",
+          backgroundColor: "$blue500"
+        },
+        "&:disabled": {
+          borderColor: "$brand50",
+          backgroundColor: "$brand50",
+          color: "$neutral400"
         }
       }
     },
-    size: {
-      sm: {
-        [`& ${ButtonItemStyled}`]: {
-          padding: "$8 $14",
-          fontSize: "$13",
-          "&:not(:first-child)": {
-            borderLeft: "none"
-          },
-          "&:first-child": {
-            borderTopLeftRadius: "$sm",
-            borderBottomLeftRadius: "$sm"
-          },
-          "&:last-child": {
-            borderTopRightRadius: "$sm",
-            borderBottomRightRadius: "$sm"
-          }
+    {
+      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"
         }
-      },
-      md: {
-        [`& ${ButtonItemStyled}`]: {
+      }
+    },
+    {
+      variant: "contained",
+      color: "purple",
+      css: {
+        backgroundColor: "$purple500",
+        color: "$grey50",
+        "&:hover": {
+          backgroundColor: "$purple600",
+          borderColor: "$purple700"
+        },
+        "&:focus": {
+          backgroundColor: "$purple700"
+        },
+        "&:active": {
+          borderColor: "$purple300",
+          backgroundColor: "$purple500"
+        },
+        "&:disabled": {
+          borderColor: "$purple200",
+          backgroundColor: "$purple200",
+          color: "$neutral400"
+        }
+      }
+    },
+    // outlined
+    {
+      variant: "outlined",
+      color: "brand",
+      css: {
+        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"
+        }
+      }
+    },
+    {
+      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"
+        }
+      }
+    },
+    {
+      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"
+        }
+      }
+    }
+  ]
+});
+function Button(_a) {
+  var _b = _a, { asChild } = _b, props = __objRest(_b, ["asChild"]);
+  const Component = asChild ? import_themes2.Button : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonStyled, __spreadValues({ as: Component }, props));
+}
+
+// src/components/ButtonGroup.tsx
+var import_themes3 = require("@radix-ui/themes");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ButtonItemStyled = styled(import_themes3.Button, {
+  fontFamily: "$default",
+  letterSpacing: 0,
+  border: 0,
+  transition: "all 300ms ease-out",
+  cursor: "pointer",
+  boxSizing: "border-box",
+  variants: {
+    active: {
+      true: {}
+    }
+  }
+});
+var ButtonGroupStyled = styled(import_themes3.Flex, {
+  display: "flex",
+  borderRadius: "$md",
+  overflow: "hidden",
+  variants: {
+    color: {
+      brand: {},
+      neutral: {},
+      purple: {},
+      green: {},
+      blue: {},
+      red: {}
+    },
+    variant: {
+      text: {
+        [`& ${ButtonItemStyled}`]: {
+          backgroundColor: "transparent",
+          boxShadow: "none",
+          padding: 0,
+          border: 0
+        }
+      },
+      contained: {
+        [`& ${ButtonItemStyled}`]: {
+          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"
+          },
+          "&:first-child": {
+            borderTopLeftRadius: "$sm",
+            borderBottomLeftRadius: "$sm"
+          },
+          "&:last-child": {
+            borderTopRightRadius: "$sm",
+            borderBottomRightRadius: "$sm"
+          }
+        }
+      },
+      md: {
+        [`& ${ButtonItemStyled}`]: {
           padding: "$12 $16",
           fontSize: "$14",
+          lineHeight: "$smaller",
           "&:not(:first-child)": {
             borderLeft: "none"
           },
@@ -1769,6 +1857,7 @@ var ButtonGroupStyled = styled(import_themes9.Flex, {
         [`& ${ButtonItemStyled}`]: {
           padding: "$13 $20",
           fontSize: "$18",
+          lineHeight: "$smaller",
           "&:not(:first-child)": {
             borderLeft: "none"
           },
@@ -1784,126 +1873,404 @@ var ButtonGroupStyled = styled(import_themes9.Flex, {
       }
     }
   },
-  defaultVariants: {
-    variant: "primary",
-    size: "md"
-  }
-});
-function ButtonItem(_a) {
-  var _b = _a, { children, active } = _b, props = __objRest(_b, ["children", "active"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonItemStyled, __spreadProps(__spreadValues({ className: active ? "active" : "" }, props), { children }));
-}
-function ButtonGroup(_a) {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
-}
-
-// src/components/Avatar.tsx
-var import_themes10 = require("@radix-ui/themes");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var AvatarStyled = styled(import_themes10.Avatar, {
-  fontFamily: "$default",
-  color: "$gray100",
-  letterSpacing: "0px",
-  variants: {
-    size: {
-      "xs": { width: "$24", height: "$24", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "$10" },
-      "sm": { width: "$32", height: "$32", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "$14" },
-      "md": { width: "$40", height: "$40", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "$16" },
-      "lg": { width: "$48", height: "$48", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "$18" },
-      "xl": { width: "$64", height: "$64", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "$24" }
+  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" }
+        }
+      }
     },
-    radii: {
-      full: { borderRadius: "$full" }
+    {
+      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: {
-      "without-image": {
-        border: "1px solid $brand500",
-        backgroundColor: "$dark50",
-        color: "$dark700",
-        fontStyle: "normal",
-        fontWeight: 500,
-        lineHeight: "normal",
-        textTransform: "uppercase"
-      },
-      "with-image": {
-        border: 0,
-        "img": {
-          width: "100%",
-          height: "100%",
-          objectFit: "cover",
-          borderRadius: "$full"
+    {
+      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" }
         }
       }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    radii: "full",
-    variant: "without-image"
-  }
-});
-function Avatar(_a) {
-  var _b = _a, { asChild } = _b, props = __objRest(_b, ["asChild"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AvatarStyled, __spreadValues({ as: import_themes10.Avatar }, props));
-}
-
-// src/components/Flex.tsx
-var import_themes11 = require("@radix-ui/themes");
-var Flex2 = styled(import_themes11.Flex, {
-  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
-var import_themes12 = require("@radix-ui/themes");
-var Box = import_themes12.Box;
-
-// src/components/TextField.tsx
-var import_themes13 = require("@radix-ui/themes");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var TextFieldStyled = styled(import_themes13.TextField.Root, {
-  height: "$40",
-  fontFamily: "$default",
-  letterSpacing: "0px",
-  fontSize: "$13",
-  padding: "$12 $14",
-  borderRadius: "$sm",
-  boxSizing: "border-box",
-  color: "$dark500",
+    {
+      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: "contained",
+    size: "md",
+    color: "brand"
+  }
+});
+function ButtonItem(_a) {
+  var _b = _a, { children, active } = _b, props = __objRest(_b, ["children", "active"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonItemStyled, __spreadProps(__spreadValues({ className: active ? "active" : "" }, props), { children }));
+}
+function ButtonGroup(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Avatar.tsx
+var import_themes4 = require("@radix-ui/themes");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var AvatarStyled = styled(import_themes4.Avatar, {
+  fontFamily: "$default",
+  color: "$gray100",
+  letterSpacing: "0px",
+  variants: {
+    size: {
+      "xs": { width: "$24", height: "$24", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "$10" },
+      "sm": { width: "$32", height: "$32", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "$14" },
+      "md": { width: "$40", height: "$40", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "$16" },
+      "lg": { width: "$48", height: "$48", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "$18" },
+      "xl": { width: "$64", height: "$64", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "$24" }
+    },
+    radii: {
+      full: { borderRadius: "$full" }
+    },
+    variant: {
+      "without-image": {
+        border: "1px solid $brand500",
+        backgroundColor: "$dark50",
+        color: "$dark700",
+        fontStyle: "normal",
+        fontWeight: 500,
+        lineHeight: "normal",
+        textTransform: "uppercase"
+      },
+      "with-image": {
+        border: 0,
+        "img": {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          borderRadius: "$full"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    radii: "full",
+    variant: "without-image"
+  }
+});
+function Avatar(_a) {
+  var _b = _a, { asChild } = _b, props = __objRest(_b, ["asChild"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AvatarStyled, __spreadValues({ as: import_themes4.Avatar }, props));
+}
+
+// src/components/TextField.tsx
+var import_themes5 = require("@radix-ui/themes");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var TextFieldStyled = styled(import_themes5.TextField.Root, {
+  height: "$40",
+  fontFamily: "$default",
+  letterSpacing: "0px",
+  fontSize: "$13",
+  padding: "$12 $14",
+  borderRadius: "$sm",
+  boxSizing: "border-box",
+  color: "$dark500",
   border: "1px solid $dark300",
   position: "relative",
   display: "flex",
@@ -1925,13 +2292,40 @@ var TextFieldStyled = styled(import_themes13.TextField.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: [
@@ -1977,7 +2371,7 @@ var TextFieldStyled = styled(import_themes13.TextField.Root, {
     }
   ]
 });
-var TextFieldSlotStyled = styled(import_themes13.TextField.Slot, {
+var TextFieldSlotStyled = styled(import_themes5.TextField.Slot, {
   display: "flex",
   alignItems: "center",
   justifyContent: "center"
@@ -1986,15 +2380,17 @@ function TextField(_a) {
   var _b = _a, {
     children,
     isValid,
-    name
+    name,
+    color
   } = _b, props = __objRest(_b, [
     "children",
     "isValid",
-    "name"
+    "name",
+    "color"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(TextFieldStyled, __spreadProps(__spreadValues({ isValid, name }, props), { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(TextFieldStyled, __spreadProps(__spreadValues({ color, isValid, name }, props), { children: [
     children,
-    isValid && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TextFieldSlot, { position: "flex-end", name, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { name: "check" }) })
+    isValid && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextFieldSlot, { position: "flex-end", name, color, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon_default, { name: "check" }) })
   ] }));
 }
 function TextFieldSlot(_a) {
@@ -2008,7 +2404,7 @@ function TextFieldSlot(_a) {
     "onClick"
   ]);
   console.log("onclick", onClick);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: !!onClick ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TextFieldSlotStyled, __spreadProps(__spreadValues({}, props), { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: !!onClick ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextFieldSlotStyled, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { color: void 0 })), { style: {
     position: "absolute",
     left: position === "flex-end" ? "none" : 15,
     right: position === "flex-start" ? "none" : 15,
@@ -2016,7 +2412,7 @@ function TextFieldSlot(_a) {
     zIndex: 2,
     top: 0,
     cursor: "pointer"
-  }, onClick: () => onClick(), children })) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TextFieldSlotStyled, __spreadProps(__spreadValues({}, props), { style: {
+  }, onClick: () => onClick(), children })) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(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,
@@ -2025,9 +2421,9 @@ function TextFieldSlot(_a) {
 }
 
 // src/components/RadioGroup.tsx
-var import_themes14 = require("@radix-ui/themes");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var RadioGroupStyled = styled(import_themes14.RadioGroup.Root, {
+var import_themes6 = require("@radix-ui/themes");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var RadioGroupStyled = styled(import_themes6.RadioGroup.Root, {
   fontFamily: "$default",
   letterSpacing: "0px",
   fontSize: "$13",
@@ -2073,8 +2469,8 @@ var RadioGroupStyled = styled(import_themes14.RadioGroup.Root, {
     zIndex: 1
   },
   variants: {
-    isValid: {
-      true: {
+    color: {
+      success: {
         "label": {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(38, 167, 67, 0.50)"
@@ -2088,7 +2484,8 @@ var RadioGroupStyled = styled(import_themes14.RadioGroup.Root, {
           backgroundColor: "$green500"
         }
       },
-      false: {
+      blue: {},
+      error: {
         "label": {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(225, 86, 98, 0.50)"
@@ -2121,7 +2518,7 @@ var RadioGroupStyled = styled(import_themes14.RadioGroup.Root, {
   },
   compoundVariants: [
     {
-      isValid: void 0,
+      color: "blue",
       disabled: false,
       css: {
         "label": {
@@ -2138,7 +2535,7 @@ var RadioGroupStyled = styled(import_themes14.RadioGroup.Root, {
       }
     },
     {
-      isValid: void 0,
+      color: "blue",
       disabled: true,
       css: {
         "label button": {
@@ -2151,7 +2548,7 @@ var RadioGroupStyled = styled(import_themes14.RadioGroup.Root, {
       }
     },
     {
-      isValid: true,
+      color: "success",
       disabled: true,
       css: {
         "label button": {
@@ -2164,7 +2561,7 @@ var RadioGroupStyled = styled(import_themes14.RadioGroup.Root, {
       }
     },
     {
-      isValid: false,
+      color: "error",
       disabled: true,
       css: {
         "label button": {
@@ -2176,23 +2573,24 @@ var RadioGroupStyled = styled(import_themes14.RadioGroup.Root, {
         }
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    color: "blue",
+    disabled: false
+  }
 });
 function RadioGroup(_a) {
   var _b = _a, {
     children,
-    isValid,
     disabled
   } = _b, props = __objRest(_b, [
     "children",
-    "isValid",
     "disabled"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     RadioGroupStyled,
     __spreadProps(__spreadValues({
-      disabled,
-      isValid
+      disabled
     }, props), {
       children
     })
@@ -2204,13 +2602,13 @@ function RadioItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_themes14.RadioGroup.Item, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes6.RadioGroup.Item, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/CheckboxGroup.tsx
-var import_themes15 = require("@radix-ui/themes");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var CheckboxGroupStyled = styled(import_themes15.CheckboxGroup.Root, {
+var import_themes7 = require("@radix-ui/themes");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var CheckboxGroupStyled = styled(import_themes7.CheckboxGroup.Root, {
   fontFamily: "$default",
   letterSpacing: "0px",
   fontSize: "$13",
@@ -2258,8 +2656,8 @@ var CheckboxGroupStyled = styled(import_themes15.CheckboxGroup.Root, {
     zIndex: 1
   },
   variants: {
-    isValid: {
-      true: {
+    color: {
+      success: {
         "label": {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(38, 167, 67, 0.50)"
@@ -2273,7 +2671,8 @@ var CheckboxGroupStyled = styled(import_themes15.CheckboxGroup.Root, {
           backgroundColor: "$green500"
         }
       },
-      false: {
+      blue: {},
+      error: {
         "label": {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(225, 86, 98, 0.50)"
@@ -2306,7 +2705,7 @@ var CheckboxGroupStyled = styled(import_themes15.CheckboxGroup.Root, {
   },
   compoundVariants: [
     {
-      isValid: void 0,
+      color: "blue",
       disabled: false,
       css: {
         "label": {
@@ -2323,7 +2722,7 @@ var CheckboxGroupStyled = styled(import_themes15.CheckboxGroup.Root, {
       }
     },
     {
-      isValid: void 0,
+      color: "blue",
       disabled: true,
       css: {
         "label button": {
@@ -2336,7 +2735,7 @@ var CheckboxGroupStyled = styled(import_themes15.CheckboxGroup.Root, {
       }
     },
     {
-      isValid: true,
+      color: "success",
       disabled: true,
       css: {
         "label button": {
@@ -2349,7 +2748,7 @@ var CheckboxGroupStyled = styled(import_themes15.CheckboxGroup.Root, {
       }
     },
     {
-      isValid: false,
+      color: "error",
       disabled: true,
       css: {
         "label button": {
@@ -2361,7 +2760,11 @@ var CheckboxGroupStyled = styled(import_themes15.CheckboxGroup.Root, {
         }
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    color: "blue",
+    disabled: false
+  }
 });
 function CheckboxGroup(_a) {
   var _b = _a, {
@@ -2369,7 +2772,7 @@ function CheckboxGroup(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckboxGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckboxGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 function CheckboxItem(_a) {
   var _b = _a, {
@@ -2377,12 +2780,12 @@ function CheckboxItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes15.CheckboxGroup.Item, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.CheckboxGroup.Item, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Filter.tsx
-var import_themes16 = require("@radix-ui/themes");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_themes8 = require("@radix-ui/themes");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var FilterStyled = styled("div", {
   fontFamily: "$default",
   color: "$dark600",
@@ -2410,7 +2813,7 @@ var FilterStyled = styled("div", {
     }
   }
 });
-var FilterContentStyled = styled(import_themes16.DropdownMenu.Content, {
+var FilterContentStyled = styled(import_themes8.DropdownMenu.Content, {
   background: "white",
   padding: "$8 $12",
   border: "1px solid $dark300",
@@ -2428,19 +2831,19 @@ function Filter(_a) {
     "children",
     "placeholder"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes16.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes16.DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(FilterStyled, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes16.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { "aria-label": placeholder || "Fitrar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "filter" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: placeholder || "Fitrar" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes16.DropdownMenu.TriggerIcon, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes8.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes8.DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FilterStyled, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes8.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { "aria-label": placeholder || "Fitrar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "filter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: placeholder || "Fitrar" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes8.DropdownMenu.TriggerIcon, {})
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       FilterContentStyled,
       {
         avoidCollisions: false,
         align: "start",
         alignOffset: -14,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckboxGroup, { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxGroup, { children })
       }
     )
   ] }) })) });
@@ -2451,12 +2854,12 @@ function FilterItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckboxItem, __spreadProps(__spreadValues({}, props), { style: { padding: "8px 12px" }, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxItem, __spreadProps(__spreadValues({}, props), { style: { padding: "8px 12px" }, children }));
 }
 
 // src/components/Dropdown.tsx
-var import_themes17 = require("@radix-ui/themes");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_themes9 = require("@radix-ui/themes");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var DropdownMenuStyled = styled("div", {
   fontFamily: "$default",
   color: "$dark600",
@@ -2484,7 +2887,7 @@ var DropdownMenuStyled = styled("div", {
     }
   }
 });
-var DropdownMenuContentStyled = styled(import_themes17.DropdownMenu.Content, {
+var DropdownMenuContentStyled = styled(import_themes9.DropdownMenu.Content, {
   background: "white",
   padding: "$8 $12",
   border: "1px solid $dark300",
@@ -2494,7 +2897,7 @@ var DropdownMenuContentStyled = styled(import_themes17.DropdownMenu.Content, {
   minWidth: "100%",
   marginTop: "3px"
 });
-var DropdownMenuItemStyled = styled(import_themes17.DropdownMenu.Item, {
+var DropdownMenuItemStyled = styled(import_themes9.DropdownMenu.Item, {
   fontFamily: "$default",
   color: "$dark600",
   letterSpacing: "0px",
@@ -2514,18 +2917,18 @@ function DropdownMenu2(_a) {
     "children",
     "placeholder"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes17.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes17.DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenuStyled, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes17.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { "aria-label": placeholder || "Fitrar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: placeholder || "Fitrar" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes17.DropdownMenu.TriggerIcon, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenuStyled, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { "aria-label": placeholder || "Fitrar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: placeholder || "Fitrar" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.DropdownMenu.TriggerIcon, {})
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       DropdownMenuContentStyled,
       {
         avoidCollisions: false,
         align: "start",
         alignOffset: -14,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes17.DropdownMenu.Group, { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.DropdownMenu.Group, { children })
       }
     )
   ] }) })) });
@@ -2536,14 +2939,866 @@ function DropdownMenuItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuItemStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuItemStyled, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Badge.tsx
+var import_react2 = __toESM(require("react"));
+var import_themes10 = require("@radix-ui/themes");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var BadgeStyled = styled(import_themes10.Badge, {
+  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__ */ (0, import_jsx_runtime11.jsx)(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: import_react2.default.Children.map(children, (child) => {
+    if (import_react2.default.isValidElement(child)) {
+      return import_react2.default.cloneElement(child, { size: props.size });
+    }
+    return child;
+  }) }));
+}
+
+// src/components/Modal.tsx
+var import_themes13 = require("@radix-ui/themes");
+
+// src/components/Box.tsx
+var import_themes11 = require("@radix-ui/themes");
+var Box = import_themes11.Box;
+
+// src/components/Flex.tsx
+var import_themes12 = require("@radix-ui/themes");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FlexStyled = styled(import_themes12.Flex, {
+  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__ */ (0, import_jsx_runtime12.jsx)(FlexStyled, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Modal.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ModalStyled = styled("div", {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$13",
+  borderRadius: "$sm"
+});
+var ModalContentStyled = styled(import_themes13.Dialog.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(import_themes13.Dialog.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__ */ (0, import_jsx_runtime13.jsx)(import_themes13.Dialog.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalStyled, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes13.Dialog.Trigger, { children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalContentStyled, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalHeaderStyled, { children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalTitleStyled, { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes13.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalIconClose, { name: "close", size: "xl" }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children }),
+      cancel || action ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex2, { gap: "10", justify: "end", width: "100%", className: "modal-footer-flex", children: [
+        action && onAction && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes13.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "contained", color: "brand", onClick: onAction, children: actionText ? actionText : "Salvar" }) }),
+        cancel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes13.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "outlined", color: "neutral", children: cancelText ? cancelText : "cancelar" }) })
+      ] }) }) : null
+    ] })
+  ] })) });
+}
+
+// src/components/Alert.tsx
+var import_themes14 = require("@radix-ui/themes");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var AlertDialogSimpleStyled = styled(import_themes14.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(import_themes14.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(import_themes14.AlertDialog.Description, {
+  padding: 0,
+  margin: 0
+});
+var AlertDialogTitleStyled = styled(import_themes14.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__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    simpleAlert && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes14.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_themes14.AlertDialog.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes14.AlertDialog.Trigger, { children: trigger }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AlertDialogDescriptionStyled, { children: simpleAlert.description }),
+        simpleAlert.cancel && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes14.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "text", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon_default, { name: "close" }) }) })
+      ] })) })
+    ] }) }),
+    completAlert && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes14.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_themes14.AlertDialog.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes14.AlertDialog.Trigger, { children: trigger }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(AlertDialogCompleteStyled, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(AlertDialogRowStyled, { className: "le-alert-dialog-row", children: [
+          color === "success" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { width: "56", height: "56", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { clipPath: "url(#clip0_1428_9995)", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("clipPath", { id: "clip0_1428_9995", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { width: "56", height: "56", fill: "white" }) }) })
+          ] }),
+          color === "error" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { width: "56", height: "56", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { clipPath: "url(#clip0_1428_10022)", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("clipPath", { id: "clip0_1428_10022", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { width: "56", height: "56", fill: "white" }) }) })
+          ] }),
+          color === "warning" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { width: "56", height: "56", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { clipPath: "url(#clip0_1428_10038)", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("clipPath", { id: "clip0_1428_10038", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { width: "56", height: "56", fill: "white" }) }) })
+          ] }),
+          color === "info" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { clipPath: "url(#clip0_1645_46)", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("clipPath", { id: "clip0_1645_46", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { width: "40", height: "40", fill: "white" }) }) })
+          ] }),
+          completAlert.title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AlertDialogTitleStyled, { children: completAlert.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(AlertDialogDescriptionStyled, { children: [
+            completAlert.subtitle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { css: {
+              fontSize: "$16"
+            }, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { children: completAlert.subtitle }) }),
+            completAlert.description
+          ] })
+        ] }),
+        completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AlertDialoghrStyled, {}) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AlertDialogRowStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex2, { gap: "10", justify: "end", width: "100%", children: [
+          completAlert.onAction && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes14.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "contained", onClick: completAlert.onAction, children: completAlert.actionText || "Salvar" }) }),
+          completAlert.cancel && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes14.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "outlined", color: "neutral", children: completAlert.cancelText || "Cancelar" }) })
+        ] }) })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/components/Switch.tsx
+var import_themes15 = require("@radix-ui/themes");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SwitchStyled = styled(import_themes15.Switch, {
+  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__ */ (0, import_jsx_runtime15.jsx)(SwitchStyled, __spreadValues({ color: "brand", defaultChecked: true }, props));
+}
+
+// src/components/Step.tsx
+var import_react3 = __toESM(require("react"));
+var import_themes16 = require("@radix-ui/themes");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var StepStyled = styled("div", {
+  fontFamily: "$default",
+  color: "$gray100",
+  letterSpacing: "0px"
+});
+var StepTriggerStyled = styled(import_themes16.Tabs.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(import_themes16.Tabs.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__ */ (0, import_jsx_runtime16.jsx)(import_themes16.Tabs.Root, { defaultValue: String(defaultValue), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(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__ */ (0, import_jsx_runtime16.jsx)(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__ */ (0, import_jsx_runtime16.jsx)(import_themes16.Tabs.Content, __spreadProps(__spreadValues({ value: String(value) }, props), { children }));
+}
+function StepList(_a) {
+  var _b = _a, { children, currentStep } = _b, props = __objRest(_b, ["children", "currentStep"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StepListStyled, __spreadProps(__spreadValues({}, props), { children: import_react3.default.Children.map(children, (child) => {
+    if (import_react3.default.isValidElement(child) && child.type === StepTrigger) {
+      return import_react3.default.cloneElement(child, { currentStep });
+    }
+    return child;
+  }) }));
+}
+function StepWrapper(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes16.Box, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Grid.tsx
+var import_themes17 = require("@radix-ui/themes");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var GridStyled = styled(import_themes17.Grid, {
+  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__ */ (0, import_jsx_runtime17.jsx)(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Container.tsx
+var import_themes18 = require("@radix-ui/themes");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var ContainerStyled = styled(import_themes18.Container, {
+  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__ */ (0, import_jsx_runtime18.jsx)(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Section.tsx
+var import_themes19 = require("@radix-ui/themes");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var SectionStyled = styled(import_themes19.Section, {
+  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__ */ (0, import_jsx_runtime19.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Alert,
+  AlertDialogCompleteStyled,
+  AlertDialogDescriptionStyled,
+  AlertDialogRowStyled,
+  AlertDialogSimpleStyled,
+  AlertDialogSubtitleStyled,
+  AlertDialogTitleStyled,
+  AlertDialoghrStyled,
   Avatar,
   AvatarStyled,
-  BadgeText,
-  BodyText,
+  Badge,
+  BadgeStyled,
   Box,
   Button,
   ButtonGroup,
@@ -2551,29 +3806,43 @@ function DropdownMenuItem(_a) {
   ButtonItem,
   ButtonItemStyled,
   ButtonStyled,
-  CaptionText,
   CheckboxGroup,
   CheckboxGroupStyled,
   CheckboxItem,
-  DisplayText,
+  Container,
+  ContainerStyled,
   DropdownMenu,
   DropdownMenuItem,
   Filter,
   FilterItem,
   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: