@lets-events/react 4.0.0 → 5.0.0

package/dist/index.mjs

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