@lets-events/react 11.6.1 → 11.6.3

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@11.6.1 build
+> @lets-events/react@11.6.3 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 316.52 KB
-ESM ⚡️ Build success in 262ms
-CJS dist/index.js 328.68 KB
-CJS ⚡️ Build success in 262ms
+CJS dist/index.js 330.83 KB
+CJS ⚡️ Build success in 388ms
+ESM dist/index.mjs 318.50 KB
+ESM ⚡️ Build success in 389ms
 DTS Build start
-DTS ⚡️ Build success in 4645ms
-DTS dist/index.d.mts 391.75 KB
-DTS dist/index.d.ts  391.75 KB
+DTS ⚡️ Build success in 6754ms
+DTS dist/index.d.mts 392.72 KB
+DTS dist/index.d.ts  392.72 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 11.6.3
+
+### Patch Changes
+
+- Dropdown portal adjustment
+
+## 11.6.2
+
+### Patch Changes
+
+- enable phone input
+
 ## 11.6.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -14,6 +14,7 @@ import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { FieldError, Merge, FieldErrorsImpl, FieldValues, UseFormProps, SubmitHandler, useForm } from 'react-hook-form';
+import { PhoneInputProps } from 'react-international-phone';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -14916,7 +14917,7 @@ type MultiSelectFormFieldProps = MultiSelectProps & {
 };
 declare const MultiSelectFormField: ({ name, label, required, ...rest }: MultiSelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-type PhoneFormFieldProps = {
+type PhoneFormFieldProps = PhoneInputProps & {
     name: string;
     label?: string;
     required?: boolean;
@@ -14972,14 +14973,14 @@ type AddressFormFieldsProps = {
 };
 declare function AddressFormFields({ name, label, required, layout, }: AddressFormFieldsProps): react_jsx_runtime.JSX.Element;
 
-type Option$1 = {
+type Option$2 = {
     label: string;
     value: string;
 };
 type RadioGroupFormFieldProps = {
     name: string;
     label: string;
-    options: Option$1[];
+    options: Option$2[];
     required?: boolean;
     defaultValue?: string;
     validationErrorMessage?: string;
@@ -14989,14 +14990,14 @@ type RadioGroupFormFieldProps = {
 };
 declare const RadioGroupFormField: ({ name, label, options, required, defaultValue, validationErrorMessage, color, fontWeight, disabled, }: RadioGroupFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-type Option = {
+type Option$1 = {
     label: string;
     value: string;
 };
 type CheckboxGroupFormFieldProps = {
     name: string;
     label: string;
-    options: Option[];
+    options: Option$1[];
     required?: boolean;
     validationErrorMessage?: string;
     defaultValue?: string[];
@@ -15006,4 +15007,32 @@ type CheckboxGroupFormFieldProps = {
 };
 declare const CheckboxGroupFormField: ({ name, label, options, required, validationErrorMessage, defaultValue, color, fontWeight, disabled, }: CheckboxGroupFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, isValidCNPJ, maskFormat, maskUnformat, useToast };
+type CountryFormFieldProps = {
+    name: string;
+    label: string;
+    required?: boolean;
+    placeholder?: string;
+    language?: "es" | "pt-BR" | "en";
+    haveError?: boolean;
+};
+declare function CountryFormField({ name, label, required, language, }: CountryFormFieldProps): react_jsx_runtime.JSX.Element;
+
+type Option = {
+    label: string;
+    value: string;
+};
+type SelectFormFieldProps = {
+    name: string;
+    label: string;
+    required?: boolean;
+    placeholder?: string;
+    options: Option[];
+    validation?: {
+        validate?: (value: string) => boolean | string;
+    };
+    validationErrorMessage?: string;
+    defaultValue?: string;
+};
+declare const SelectFormField: ({ name, label, required, placeholder, options, validation, validationErrorMessage, defaultValue, }: SelectFormFieldProps) => react_jsx_runtime.JSX.Element;
+
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, isValidCNPJ, maskFormat, maskUnformat, useToast };

package/dist/index.d.ts

@@ -14,6 +14,7 @@ import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { FieldError, Merge, FieldErrorsImpl, FieldValues, UseFormProps, SubmitHandler, useForm } from 'react-hook-form';
+import { PhoneInputProps } from 'react-international-phone';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -14916,7 +14917,7 @@ type MultiSelectFormFieldProps = MultiSelectProps & {
 };
 declare const MultiSelectFormField: ({ name, label, required, ...rest }: MultiSelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-type PhoneFormFieldProps = {
+type PhoneFormFieldProps = PhoneInputProps & {
     name: string;
     label?: string;
     required?: boolean;
@@ -14972,14 +14973,14 @@ type AddressFormFieldsProps = {
 };
 declare function AddressFormFields({ name, label, required, layout, }: AddressFormFieldsProps): react_jsx_runtime.JSX.Element;
 
-type Option$1 = {
+type Option$2 = {
     label: string;
     value: string;
 };
 type RadioGroupFormFieldProps = {
     name: string;
     label: string;
-    options: Option$1[];
+    options: Option$2[];
     required?: boolean;
     defaultValue?: string;
     validationErrorMessage?: string;
@@ -14989,14 +14990,14 @@ type RadioGroupFormFieldProps = {
 };
 declare const RadioGroupFormField: ({ name, label, options, required, defaultValue, validationErrorMessage, color, fontWeight, disabled, }: RadioGroupFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-type Option = {
+type Option$1 = {
     label: string;
     value: string;
 };
 type CheckboxGroupFormFieldProps = {
     name: string;
     label: string;
-    options: Option[];
+    options: Option$1[];
     required?: boolean;
     validationErrorMessage?: string;
     defaultValue?: string[];
@@ -15006,4 +15007,32 @@ type CheckboxGroupFormFieldProps = {
 };
 declare const CheckboxGroupFormField: ({ name, label, options, required, validationErrorMessage, defaultValue, color, fontWeight, disabled, }: CheckboxGroupFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, isValidCNPJ, maskFormat, maskUnformat, useToast };
+type CountryFormFieldProps = {
+    name: string;
+    label: string;
+    required?: boolean;
+    placeholder?: string;
+    language?: "es" | "pt-BR" | "en";
+    haveError?: boolean;
+};
+declare function CountryFormField({ name, label, required, language, }: CountryFormFieldProps): react_jsx_runtime.JSX.Element;
+
+type Option = {
+    label: string;
+    value: string;
+};
+type SelectFormFieldProps = {
+    name: string;
+    label: string;
+    required?: boolean;
+    placeholder?: string;
+    options: Option[];
+    validation?: {
+        validate?: (value: string) => boolean | string;
+    };
+    validationErrorMessage?: string;
+    defaultValue?: string;
+};
+declare const SelectFormField: ({ name, label, required, placeholder, options, validation, validationErrorMessage, defaultValue, }: SelectFormFieldProps) => react_jsx_runtime.JSX.Element;
+
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, isValidCNPJ, maskFormat, maskUnformat, useToast };

package/dist/index.js

@@ -1062,6 +1062,7 @@ __export(index_exports, {
   CheckboxItem: () => CheckboxItem,
   Container: () => Container,
   ContainerStyled: () => ContainerStyled,
+  CountryFormField: () => CountryFormField,
   Drawer: () => Drawer,
   DropdownMenu: () => DropdownMenu2,
   DropdownMenuItem: () => DropdownMenuItem,
@@ -1088,6 +1089,7 @@ __export(index_exports, {
   RadioItem: () => RadioItem,
   Section: () => Section,
   SectionStyled: () => SectionStyled,
+  SelectFormField: () => SelectFormField,
   Step: () => Step,
   StepContent: () => StepContent,
   StepList: () => StepList,
@@ -3431,7 +3433,7 @@ var DropdownMenuStyled = styled("div", {
   border: "1px solid $dark300",
   borderRadius: "$xs",
   padding: "$8 $12",
-  width: "calc(100% - 24px)",
+  width: "100%",
   display: "flex",
   button: {
     fontFamily: "$default",
@@ -3497,13 +3499,14 @@ var DropdownMenuContentStyled = styled(import_themes11.DropdownMenu.Content, {
   border: "1px solid $dark300",
   borderRadius: "$xs",
   boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08)",
-  width: "calc(var(--radix-popper-anchor-width) + 24px);",
+  width: "100%",
   minWidth: "100%",
   marginTop: "3px",
   maxHeight: "400px",
   height: "100%",
   position: "relative",
-  overflow: "auto"
+  overflow: "auto",
+  zIndex: 9999999999
 });
 function DropdownMenu2(_a) {
   var _b = _a, {
@@ -3541,6 +3544,7 @@ function DropdownMenu2(_a) {
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           DropdownMenuContentStyled,
           {
+            container: document.body,
             avoidCollisions: false,
             align: "start",
             alignOffset: -14,
@@ -9860,7 +9864,79 @@ 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,
@@ -9895,6 +9971,17 @@ 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 })
   ] });
 };
@@ -10714,6 +10801,7 @@ var CheckboxGroupFormField = ({
   CheckboxItem,
   Container,
   ContainerStyled,
+  CountryFormField,
   Drawer,
   DropdownMenu,
   DropdownMenuItem,
@@ -10740,6 +10828,7 @@ var CheckboxGroupFormField = ({
   RadioItem,
   Section,
   SectionStyled,
+  SelectFormField,
   Step,
   StepContent,
   StepList,

package/dist/index.mjs

@@ -3327,7 +3327,7 @@ var DropdownMenuStyled = styled("div", {
   border: "1px solid $dark300",
   borderRadius: "$xs",
   padding: "$8 $12",
-  width: "calc(100% - 24px)",
+  width: "100%",
   display: "flex",
   button: {
     fontFamily: "$default",
@@ -3393,13 +3393,14 @@ var DropdownMenuContentStyled = styled(DropdownMenuRadix.Content, {
   border: "1px solid $dark300",
   borderRadius: "$xs",
   boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08)",
-  width: "calc(var(--radix-popper-anchor-width) + 24px);",
+  width: "100%",
   minWidth: "100%",
   marginTop: "3px",
   maxHeight: "400px",
   height: "100%",
   position: "relative",
-  overflow: "auto"
+  overflow: "auto",
+  zIndex: 9999999999
 });
 function DropdownMenu2(_a) {
   var _b = _a, {
@@ -3437,6 +3438,7 @@ function DropdownMenu2(_a) {
         /* @__PURE__ */ jsx11(
           DropdownMenuContentStyled,
           {
+            container: document.body,
             avoidCollisions: false,
             align: "start",
             alignOffset: -14,
@@ -9763,7 +9765,79 @@ var MultiSelectFormField = (_a) => {
 
 // src/components/FormFields/PhoneFormField.tsx
 import { useFormContext as useFormContext4 } from "react-hook-form";
+import { PhoneInput } from "react-international-phone";
+import "react-international-phone/style.css";
 import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+var PhoneFormInput = styled(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,
@@ -9798,6 +9872,17 @@ var PhoneFormField = (_a) => {
         haveError
       }
     ),
+    /* @__PURE__ */ jsx36(
+      PhoneFormInput,
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, register(name, { required })), {
+        defaultCountry,
+        value: watch(name),
+        color: haveError ? "error" : "default",
+        onChange: handlePhoneChange
+      }), props), {
+        "aria-labelledby": `${name}-label`
+      })
+    ),
     /* @__PURE__ */ jsx36(ErrorFormMessage, { message: errorMsg })
   ] });
 };
@@ -10156,7 +10241,7 @@ function CountryFormField({
 }
 
 // src/components/FormFields/AddressFormFields/PostalCodeFormField.tsx
-import { useController as useController2, useFormContext as useFormContext7 } from "react-hook-form";
+import { useController as useController3, useFormContext as useFormContext7 } from "react-hook-form";
 import { jsx as jsx43 } from "react/jsx-runtime";
 var PostalCodeFormField = ({
   name,
@@ -10168,7 +10253,7 @@ var PostalCodeFormField = ({
   const { control } = useFormContext7();
   const {
     field: { onChange, value }
-  } = useController2({ name, control });
+  } = useController3({ name, control });
   return /* @__PURE__ */ jsx43(
     TextFormField,
     {
@@ -10616,6 +10701,7 @@ export {
   CheckboxItem,
   Container,
   ContainerStyled,
+  CountryFormField,
   Drawer,
   DropdownMenu2 as DropdownMenu,
   DropdownMenuItem,
@@ -10642,6 +10728,7 @@ export {
   RadioItem,
   Section,
   SectionStyled,
+  SelectFormField,
   Step,
   StepContent,
   StepList,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "11.6.1",
+  "version": "11.6.3",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -41,6 +41,7 @@
     "npm": "^11.4.2",
     "radix-ui": "^1.4.2",
     "react-day-picker": "^9.6.7",
-    "react-hook-form": "^7.57.0"
+    "react-hook-form": "^7.57.0",
+    "react-international-phone": "^4.5.0"
   }
 }

package/src/components/Dropdown.tsx

@@ -36,7 +36,7 @@ const DropdownMenuStyled = styled("div", {
   border: "1px solid $dark300",
   borderRadius: "$xs",
   padding: "$8 $12",
-  width: "calc(100% - 24px)",
+  width: "100%",
   display: "flex",
   button: {
     fontFamily: "$default",
@@ -103,13 +103,14 @@ const DropdownMenuContentStyled = styled(DropdownMenuRadix.Content, {
   border: "1px solid $dark300",
   borderRadius: "$xs",
   boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08)",
-  width: "calc(var(--radix-popper-anchor-width) + 24px);",
+  width: "100%",
   minWidth: "100%",
   marginTop: "3px",
   maxHeight: "400px",
   height: "100%",
   position: "relative",
   overflow: "auto",
+  zIndex: 9999999999,
 });
 
 export type DropdownMenuProps = ComponentProps<
@@ -161,6 +162,7 @@ export function DropdownMenu({
             </button>
           </DropdownMenuRadix.Trigger>
           <DropdownMenuContentStyled
+            container={document.body}
             avoidCollisions={false}
             align="start"
             alignOffset={-14}

package/src/components/FormFields/PhoneFormField.tsx

@@ -1,90 +1,90 @@
-import { useFormContext } from "react-hook-form";
+import { useController, useFormContext } from "react-hook-form";
 import { Flex } from "../Flex";
 import { FormLabel } from "./FormLabel";
 import { ErrorFormMessage } from "./ErrorFormMessage";
-// import { PhoneInput, PhoneInputProps } from 'react-international-phone'
+import { PhoneInput, PhoneInputProps } from "react-international-phone";
 import { styled } from "../../styles";
 import { typographyValues } from "../../types/typographyValues";
-// import 'react-international-phone/style.css'
+import "react-international-phone/style.css";
 
-export type PhoneFormFieldProps = {
+export type PhoneFormFieldProps = PhoneInputProps & {
   name: string;
   label?: string;
   required?: boolean;
   defaultCountry?: string;
 };
-// const PhoneFormInput = styled(PhoneInput, {
-//   $$borderColor: '$colors$neutral300',
-//   boxSizing: 'border-box',
-//   borderRadius: '$sm',
-//   display: 'flex',
-//   flex: 1,
-//   fontFamily: '$default',
-//   color: '$dark500',
+const PhoneFormInput = styled(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',
-//     },
-//   },
+  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',
-//   },
-// })
+  "&: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",
+  },
+});
 
 export const PhoneFormField = ({
   name,
@@ -115,15 +115,15 @@ export const PhoneFormField = ({
         required={required}
         haveError={haveError}
       />
-      {/* <PhoneFormInput
+      <PhoneFormInput
         {...register(name, { required })}
         defaultCountry={defaultCountry}
         value={watch(name)}
-        color={haveError ? 'error' : 'default'}
+        color={haveError ? "error" : "default"}
         onChange={handlePhoneChange}
         {...props}
         aria-labelledby={`${name}-label`}
-      /> */}
+      />
       <ErrorFormMessage message={errorMsg} />
     </Flex>
   );

package/src/index.tsx

@@ -50,3 +50,5 @@ export * from "./components/FormFields/IdentityDocumentNumberFormField";
 export * from "./components/FormFields/AddressFormFields/index";
 export * from "./components/FormFields/RadioGroupFormField";
 export * from "./components/FormFields/CheckboxGroupFormField";
+export * from "./components/FormFields/AddressFormFields/CountryFormField";
+export * from "./components/FormFields/SelectFormField";