@lets-events/react 11.6.3 → 11.6.5

package/dist/index.js

@@ -3399,21 +3399,20 @@ function FilterItem(_a) {
 }
 
 // src/components/Dropdown.tsx
-var import_react3 = require("react");
+var import_react3 = __toESM(require("react"));
 var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
-var import_themes11 = require("@radix-ui/themes");
 var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var DropdownMenuItemStyled = styled(import_themes11.DropdownMenu.Item, {
+var DropdownMenuItemStyled = styled("div", {
   fontFamily: "$default",
   color: "$dark600",
   letterSpacing: "0px",
   padding: "$8 $16",
+  cursor: "pointer",
   "&:hover, &:focus": {
     backgroundColor: "$dark100",
     border: "none",
-    outline: "none",
-    cursor: "pointer"
+    outline: "none"
   },
   variants: {
     typography: typographyLabelValues,
@@ -3426,16 +3425,18 @@ var DropdownMenuItemStyled = styled(import_themes11.DropdownMenu.Item, {
   }
 });
 var DropdownMenuStyled = styled("div", {
+  boxSizing: "border-box",
   fontFamily: "$default",
   color: "$dark600",
   letterSpacing: "0px",
   cursor: "pointer",
   border: "1px solid $dark300",
   borderRadius: "$xs",
-  padding: "$8 $12",
-  width: "100%",
+  maxWidth: "100%",
   display: "flex",
+  position: "relative",
   button: {
+    boxSizing: "border-box",
     fontFamily: "$default",
     color: "$dark600",
     letterSpacing: "0px",
@@ -3446,6 +3447,7 @@ var DropdownMenuStyled = styled("div", {
     display: "flex",
     alignItems: "center",
     gap: "$8",
+    padding: "$8 $12",
     cursor: "pointer",
     svg: {
       marginLeft: "auto"
@@ -3494,17 +3496,17 @@ var DropdownMenuStyled = styled("div", {
     }
   }
 });
-var DropdownMenuContentStyled = styled(import_themes11.DropdownMenu.Content, {
+var DropdownMenuContentStyled = styled("div", {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  width: "100%",
   background: "white",
   border: "1px solid $dark300",
   borderRadius: "$xs",
   boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08)",
-  width: "100%",
-  minWidth: "100%",
   marginTop: "3px",
   maxHeight: "400px",
-  height: "100%",
-  position: "relative",
   overflow: "auto",
   zIndex: 9999999999
 });
@@ -3513,63 +3515,144 @@ function DropdownMenu2(_a) {
     children,
     placeholder,
     typography,
-    color,
-    fontWeight
+    color = "default",
+    fontWeight,
+    open: controlledOpen,
+    onOpenChange,
+    defaultOpen = false
   } = _b, props = __objRest(_b, [
     "children",
     "placeholder",
     "typography",
     "color",
-    "fontWeight"
+    "fontWeight",
+    "open",
+    "onOpenChange",
+    "defaultOpen"
   ]);
-  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes11.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes11.DropdownMenu.Root, __spreadProps(__spreadValues({ open: isOpen, onOpenChange: setIsOpen }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  const [internalOpen, setInternalOpen] = (0, import_react3.useState)(defaultOpen);
+  const dropdownRef = (0, import_react3.useRef)(null);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const handleToggle = () => {
+    const newOpen = !isOpen;
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(newOpen);
+  };
+  const handleClose = () => {
+    if (!isControlled) {
+      setInternalOpen(false);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(false);
+  };
+  (0, import_react3.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        handleClose();
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     DropdownMenuStyled,
-    {
+    __spreadProps(__spreadValues({
+      ref: dropdownRef,
       typography,
       fontWeight,
-      color,
+      color
+    }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes11.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { "aria-label": placeholder || "Filtrar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: placeholder || "Filtrar" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_react_fontawesome2.FontAwesomeIcon,
-            {
-              icon: isOpen ? import_free_solid_svg_icons2.faChevronUp : import_free_solid_svg_icons2.faChevronDown,
-              size: "sm",
-              color: colors.dark600
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          DropdownMenuContentStyled,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "button",
           {
-            container: document.body,
-            avoidCollisions: false,
-            align: "start",
-            alignOffset: -14,
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes11.DropdownMenu.Group, { children })
+            "aria-label": placeholder || "Filtrar",
+            "aria-expanded": isOpen,
+            "aria-haspopup": "listbox",
+            onClick: handleToggle,
+            type: "button",
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleToggle();
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: placeholder || "Filtrar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_react_fontawesome2.FontAwesomeIcon,
+                {
+                  icon: isOpen ? import_free_solid_svg_icons2.faChevronUp : import_free_solid_svg_icons2.faChevronDown,
+                  size: "sm",
+                  color: colors.dark600
+                }
+              )
+            ]
           }
-        )
+        ),
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuContentStyled, { role: "listbox", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuProvider, { onItemSelect: handleClose, children }) })
       ]
-    }
-  ) })) });
+    })
+  );
+}
+var DropdownMenuContext = import_react3.default.createContext(null);
+function DropdownMenuProvider({
+  children,
+  onItemSelect
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuContext.Provider, { value: { onItemSelect }, children });
 }
 function DropdownMenuItem(_a) {
   var _b = _a, {
     children,
     typography,
-    fontWeight
+    fontWeight,
+    value,
+    onSelect,
+    onClick
   } = _b, props = __objRest(_b, [
     "children",
     "typography",
-    "fontWeight"
+    "fontWeight",
+    "value",
+    "onSelect",
+    "onClick"
   ]);
+  const context = import_react3.default.useContext(DropdownMenuContext);
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    onSelect == null ? void 0 : onSelect(value);
+    context == null ? void 0 : context.onItemSelect();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onSelect == null ? void 0 : onSelect(value);
+      context == null ? void 0 : context.onItemSelect();
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     DropdownMenuItemStyled,
     __spreadProps(__spreadValues({
       typography,
-      fontWeight
+      fontWeight,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "option"
     }, props), {
       children
     })
@@ -3578,9 +3661,9 @@ function DropdownMenuItem(_a) {
 
 // src/components/Badge.tsx
 var import_react4 = __toESM(require("react"));
-var import_themes12 = require("@radix-ui/themes");
+var import_themes11 = require("@radix-ui/themes");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var BadgeStyled = styled(import_themes12.Badge, {
+var BadgeStyled = styled(import_themes11.Badge, {
   fontFamily: "$default",
   borderRadius: "$sm",
   verticalAlign: "middle",
@@ -3693,8 +3776,8 @@ function Badge(_a) {
 var import_radix_ui = require("radix-ui");
 
 // src/components/Box.tsx
-var import_themes13 = require("@radix-ui/themes");
-var Box = import_themes13.Box;
+var import_themes12 = require("@radix-ui/themes");
+var Box = import_themes12.Box;
 
 // src/components/Modal.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -8413,9 +8496,9 @@ function TimePicker({
 }
 
 // src/components/Alert.tsx
-var import_themes14 = require("@radix-ui/themes");
+var import_themes13 = require("@radix-ui/themes");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var AlertDialogSimpleStyled = styled(import_themes14.AlertDialog.Content, {
+var AlertDialogSimpleStyled = styled(import_themes13.AlertDialog.Content, {
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$13",
@@ -8466,7 +8549,7 @@ var AlertDialogSimpleStyled = styled(import_themes14.AlertDialog.Content, {
     color: "success"
   }
 });
-var AlertDialogCompleteStyled = styled(import_themes14.AlertDialog.Content, {
+var AlertDialogCompleteStyled = styled(import_themes13.AlertDialog.Content, {
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$13",
@@ -8489,11 +8572,11 @@ var AlertDialogCompleteStyled = styled(import_themes14.AlertDialog.Content, {
     color: {}
   }
 });
-var AlertDialogDescriptionStyled = styled(import_themes14.AlertDialog.Description, {
+var AlertDialogDescriptionStyled = styled(import_themes13.AlertDialog.Description, {
   padding: 0,
   margin: 0
 });
-var AlertDialogTitleStyled = styled(import_themes14.AlertDialog.Title, {
+var AlertDialogTitleStyled = styled(import_themes13.AlertDialog.Title, {
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$20",
@@ -8529,15 +8612,15 @@ function Alert(_a) {
     "simpleAlert"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    simpleAlert && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes14.AlertDialog.Root, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Trigger, { children: trigger }),
+    simpleAlert && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes13.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes13.AlertDialog.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes13.AlertDialog.Trigger, { children: trigger }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogDescriptionStyled, { children: simpleAlert.description }),
-        simpleAlert.cancel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "text", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "close" }) }) })
+        simpleAlert.cancel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes13.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "text", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: "close" }) }) })
       ] })) })
     ] }) }),
-    completAlert && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes14.AlertDialog.Root, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Trigger, { children: trigger }),
+    completAlert && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes13.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes13.AlertDialog.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes13.AlertDialog.Trigger, { children: trigger }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogCompleteStyled, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogRowStyled, { className: "le-alert-dialog-row", children: [
           color === "success" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
@@ -8637,7 +8720,7 @@ function Alert(_a) {
         ] }),
         completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialoghrStyled, {}) : null,
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogRowStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Flex2, { gap: "10", justify: "end", width: "100%", children: [
-          completAlert.onAction && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          completAlert.onAction && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes13.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Button,
             {
               variant: "contained",
@@ -8645,7 +8728,7 @@ function Alert(_a) {
               children: completAlert.actionText || "Salvar"
             }
           ) }),
-          completAlert.cancel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "outlined", color: "neutral", children: completAlert.cancelText || "Cancelar" }) })
+          completAlert.cancel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes13.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "outlined", color: "neutral", children: completAlert.cancelText || "Cancelar" }) })
         ] }) })
       ] })
     ] }) })
@@ -8653,9 +8736,9 @@ function Alert(_a) {
 }
 
 // src/components/Switch.tsx
-var import_themes15 = require("@radix-ui/themes");
+var import_themes14 = require("@radix-ui/themes");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var SwitchStyled = styled(import_themes15.Switch, {
+var SwitchStyled = styled(import_themes14.Switch, {
   all: "unset",
   borderRadius: "$full",
   position: "relative",
@@ -8753,14 +8836,14 @@ function Switch(props) {
 
 // src/components/Step.tsx
 var import_react9 = __toESM(require("react"));
-var import_themes16 = require("@radix-ui/themes");
+var import_themes15 = require("@radix-ui/themes");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var StepStyled = styled("div", {
   fontFamily: "$default",
   color: "$gray100",
   letterSpacing: "0px"
 });
-var StepTriggerStyled = styled(import_themes16.Tabs.Trigger, {
+var StepTriggerStyled = styled(import_themes15.Tabs.Trigger, {
   all: "unset",
   position: "relative",
   display: "flex",
@@ -8819,7 +8902,7 @@ var StepTriggerStyled = styled(import_themes16.Tabs.Trigger, {
     backgroundColor: "$blue500"
   }
 });
-var StepListStyled = styled(import_themes16.Tabs.List, {
+var StepListStyled = styled(import_themes15.Tabs.List, {
   display: "flex",
   alignItems: "center",
   justifyContent: "flex-start",
@@ -8827,7 +8910,7 @@ var StepListStyled = styled(import_themes16.Tabs.List, {
 });
 function Step(_a) {
   var _b = _a, { children, defaultValue } = _b, props = __objRest(_b, ["children", "defaultValue"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes16.Tabs.Root, { defaultValue: String(defaultValue), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StepStyled, __spreadProps(__spreadValues({}, props), { children })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes15.Tabs.Root, { defaultValue: String(defaultValue), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StepStyled, __spreadProps(__spreadValues({}, props), { children })) });
 }
 function StepTrigger(_a) {
   var _b = _a, {
@@ -8858,7 +8941,7 @@ function StepContent(_a) {
     "value",
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes16.Tabs.Content, __spreadProps(__spreadValues({ value: String(value) }, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes15.Tabs.Content, __spreadProps(__spreadValues({ value: String(value) }, props), { children }));
 }
 function StepList(_a) {
   var _b = _a, {
@@ -8881,13 +8964,13 @@ function StepWrapper(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes16.Box, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes15.Box, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Card.tsx
-var import_themes17 = require("@radix-ui/themes");
+var import_themes16 = require("@radix-ui/themes");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var CardStyled = styled(import_themes17.Card, {
+var CardStyled = styled(import_themes16.Card, {
   borderRadius: "$2xl",
   border: "1px solid $dark100",
   padding: "16px",
@@ -8926,10 +9009,10 @@ function Card(_a) {
 }
 
 // src/components/TextareaField.tsx
-var import_themes18 = require("@radix-ui/themes");
+var import_themes17 = require("@radix-ui/themes");
 var import_react10 = __toESM(require("react"));
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var TextareaFieldStyle = styled(import_themes18.TextArea, {
+var TextareaFieldStyle = styled(import_themes17.TextArea, {
   display: "flex",
   flex: 1,
   textarea: {
@@ -9292,13 +9375,13 @@ function Tooltip({
 }
 
 // src/components/MultiSelect.tsx
-var import_themes19 = require("@radix-ui/themes");
+var import_themes18 = require("@radix-ui/themes");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
 var import_react15 = require("react");
 var import_react16 = __toESM(require("react"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var StyledContent = styled(import_themes19.DropdownMenu.Content, {
+var StyledContent = styled(import_themes18.DropdownMenu.Content, {
   backgroundColor: "$dark50",
   borderRadius: "$sm",
   padding: "$8 0",
@@ -9388,8 +9471,8 @@ var MultiSelect = import_react16.default.forwardRef(
       [selectedValues, onValueChange]
     );
     const menuWidth = (_a = triggerRef.current) == null ? void 0 : _a.offsetWidth;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes19.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes19.DropdownMenu.Root, { open: isOpen, onOpenChange: () => setIsOpen(false), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes19.DropdownMenu.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes18.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes18.DropdownMenu.Root, { open: isOpen, onOpenChange: () => setIsOpen(false), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes18.DropdownMenu.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         StyledTrigger,
         {
           css: {
@@ -9458,9 +9541,9 @@ var MultiSelect = import_react16.default.forwardRef(
 );
 
 // src/components/Grid.tsx
-var import_themes20 = require("@radix-ui/themes");
+var import_themes19 = require("@radix-ui/themes");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var GridStyled = styled(import_themes20.Grid, {
+var GridStyled = styled(import_themes19.Grid, {
   display: "grid",
   variants: {
     display: {
@@ -9585,9 +9668,9 @@ function Grid(_a) {
 }
 
 // src/components/Container.tsx
-var import_themes21 = require("@radix-ui/themes");
+var import_themes20 = require("@radix-ui/themes");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var ContainerStyled = styled(import_themes21.Container, {
+var ContainerStyled = styled(import_themes20.Container, {
   variants: {
     size: {
       xs: { maxWidth: "576px" },
@@ -9620,9 +9703,9 @@ function Container(_a) {
 }
 
 // src/components/Section.tsx
-var import_themes22 = require("@radix-ui/themes");
+var import_themes21 = require("@radix-ui/themes");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var SectionStyled = styled(import_themes22.Section, {
+var SectionStyled = styled(import_themes21.Section, {
   variants: {
     size: {
       xs: { maxWidth: "576px" },
@@ -9864,79 +9947,7 @@ var MultiSelectFormField = (_a) => {
 
 // src/components/FormFields/PhoneFormField.tsx
 var import_react_hook_form5 = require("react-hook-form");
-var import_react_international_phone = require("react-international-phone");
-var import_style = require("react-international-phone/style.css");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var PhoneFormInput = styled(import_react_international_phone.PhoneInput, {
-  $$borderColor: "$colors$neutral300",
-  boxSizing: "border-box",
-  borderRadius: "$sm",
-  display: "flex",
-  flex: 1,
-  fontFamily: "$default",
-  color: "$dark500",
-  img: {
-    width: "$18",
-    height: "$18",
-    marginLeft: "$8"
-  },
-  ul: {
-    border: "none"
-  },
-  input: {
-    height: "$40 !important",
-    flex: 1,
-    borderColor: "$$borderColor  !important",
-    borderTopRightRadius: "$sm !important",
-    borderBottomRightRadius: "$sm !important",
-    fontSize: "inherit !important",
-    "&:focus": {
-      $$borderColor: "$colors$brand300"
-    }
-  },
-  button: {
-    height: "$40 !important",
-    borderRight: "none",
-    borderTopLeftRadius: "$sm !important",
-    borderBottomLeftRadius: "$sm !important",
-    borderColor: "$$borderColor  !important",
-    marginRight: "0 !important",
-    "&:active": {
-      $$borderColor: "$colors$brand300"
-    },
-    div: {
-      padding: "auto $12",
-      gap: " $8px"
-    }
-  },
-  "&:has(input:disabled)": {
-    backgroundColor: "$dark100",
-    color: "$dark400",
-    $$borderColor: "$colors$dark200",
-    cursor: "not-allowed",
-    img: {
-      opacity: 0.6
-    },
-    button: {
-      $$borderColor: "$colors$dark200"
-    }
-  },
-  variants: {
-    typography: typographyValues,
-    color: {
-      default: {
-        $$borderColor: "$colors$neutral300"
-      },
-      error: {
-        $$borderColor: "$colors$error600"
-      }
-    }
-  },
-  defaultVariants: {
-    typography: "labelSmall",
-    color: "default"
-  }
-});
 var PhoneFormField = (_a) => {
   var _b = _a, {
     name,
@@ -9971,17 +9982,6 @@ var PhoneFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      PhoneFormInput,
-      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, register(name, { required })), {
-        defaultCountry,
-        value: watch(name),
-        color: haveError ? "error" : "default",
-        onChange: handlePhoneChange
-      }), props), {
-        "aria-labelledby": `${name}-label`
-      })
-    ),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };