@lets-events/react 11.6.4 → 11.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/.eslintrc.json +2 -2
  2. package/.turbo/turbo-build.log +18 -20
  3. package/CHANGELOG.md +12 -0
  4. package/dist/index.css +171 -0
  5. package/dist/index.d.mts +65 -435
  6. package/dist/index.d.ts +65 -435
  7. package/dist/index.js +364 -269
  8. package/dist/index.mjs +365 -264
  9. package/package.json +1 -2
  10. package/src/components/Alert.tsx +303 -303
  11. package/src/components/Avatar.tsx +55 -55
  12. package/src/components/Badge.tsx +125 -125
  13. package/src/components/Box.tsx +3 -3
  14. package/src/components/Button/index.tsx +16 -16
  15. package/src/components/Button/styledComponents.ts +287 -287
  16. package/src/components/ButtonGroup.tsx +484 -484
  17. package/src/components/Calendar/index.tsx +136 -136
  18. package/src/components/Calendar/styledComponents.ts +209 -209
  19. package/src/components/Card.tsx +48 -48
  20. package/src/components/CheckboxGroup.tsx +176 -176
  21. package/src/components/Container.tsx +39 -39
  22. package/src/components/Drawer/index.tsx +48 -48
  23. package/src/components/Drawer/styledComponents.ts +46 -46
  24. package/src/components/Dropdown.tsx +302 -194
  25. package/src/components/Filter.tsx +164 -164
  26. package/src/components/Flex.tsx +118 -118
  27. package/src/components/FormFields/AddressFormFields/CityFormField.tsx +111 -111
  28. package/src/components/FormFields/AddressFormFields/CountryFormField.tsx +33 -33
  29. package/src/components/FormFields/AddressFormFields/PostalCodeFormField.tsx +39 -45
  30. package/src/components/FormFields/AddressFormFields/StateFormField.tsx +32 -32
  31. package/src/components/FormFields/AddressFormFields/index.tsx +141 -139
  32. package/src/components/FormFields/BirthDateFormField.tsx +85 -87
  33. package/src/components/FormFields/CNPJFormField.tsx +87 -89
  34. package/src/components/FormFields/CPFFormField.tsx +77 -79
  35. package/src/components/FormFields/CheckboxGroupFormField.tsx +90 -90
  36. package/src/components/FormFields/Form.tsx +28 -29
  37. package/src/components/FormFields/IdentityDocumentNumberFormField.tsx +40 -42
  38. package/src/components/FormFields/MultiSelectFormField.tsx +55 -59
  39. package/src/components/FormFields/PhoneFormField.tsx +40 -130
  40. package/src/components/FormFields/RadioGroupFormField.tsx +84 -84
  41. package/src/components/FormFields/SelectFormField.tsx +93 -93
  42. package/src/components/FormFields/TextAreaFormField.tsx +48 -48
  43. package/src/components/FormFields/TextFormField.tsx +107 -76
  44. package/src/components/FormFields/{ErrorFormMessage.tsx → subComponents/ErrorFormMessage.tsx} +36 -36
  45. package/src/components/FormFields/{FormLabel.tsx → subComponents/FormLabel.tsx} +29 -29
  46. package/src/components/FormFields/utils/validation.ts +20 -0
  47. package/src/components/Grid.tsx +137 -137
  48. package/src/components/Icon.tsx +47 -47
  49. package/src/components/MenuDropdown/index.tsx +30 -30
  50. package/src/components/MenuDropdown/styledComponents.ts +31 -31
  51. package/src/components/Modal.tsx +90 -90
  52. package/src/components/MultiSelect.tsx +218 -218
  53. package/src/components/RadioGroup.tsx +210 -210
  54. package/src/components/Section.tsx +33 -33
  55. package/src/components/Step.tsx +164 -164
  56. package/src/components/Switch.tsx +108 -108
  57. package/src/components/Text.tsx +38 -38
  58. package/src/components/TextField.tsx +316 -312
  59. package/src/components/TextareaField.tsx +128 -128
  60. package/src/components/TimePicker.tsx +298 -298
  61. package/src/components/Toast/components/ToastItem.tsx +41 -41
  62. package/src/components/Toast/components/ToastProvider.tsx +63 -63
  63. package/src/components/Toast/hooks/useToast.ts +12 -12
  64. package/src/components/Toast/index.tsx +5 -5
  65. package/src/components/Toast/styles/index.ts +135 -135
  66. package/src/components/Toast/types/index.ts +46 -46
  67. package/src/components/Tooltip/index.tsx +66 -66
  68. package/src/components/Tooltip/styles.ts +77 -77
  69. package/src/hooks/useCountries.ts +41 -41
  70. package/src/hooks/useOnClickOutside.tsx +20 -20
  71. package/src/index.tsx +54 -54
  72. package/src/styles/index.ts +38 -38
  73. package/src/types/typographyValues.ts +178 -178
  74. package/src/utils/getNestedValue.ts +3 -3
  75. package/src/utils/states.ts +29 -29
  76. package/tsconfig.json +3 -3
package/dist/index.js CHANGED
@@ -2761,7 +2761,10 @@ var TextFieldStyled = styled(import_themes7.TextField.Root, {
2761
2761
  }
2762
2762
  }
2763
2763
  }
2764
- ]
2764
+ ],
2765
+ defaultVariants: {
2766
+ typography: "labelSmall"
2767
+ }
2765
2768
  });
2766
2769
  var TextFieldSlotStyled = styled(import_themes7.TextField.Slot, {
2767
2770
  display: "flex",
@@ -2796,7 +2799,17 @@ var InputAddon = styled(TextStyle, {
2796
2799
  display: "flex",
2797
2800
  flexWrap: "nowrap",
2798
2801
  alignItems: "center",
2799
- lineHeight: 1
2802
+ lineHeight: 1,
2803
+ variants: {
2804
+ color: {
2805
+ default: {
2806
+ borderColor: "$dark300"
2807
+ },
2808
+ error: {
2809
+ borderColor: "$error400"
2810
+ }
2811
+ }
2812
+ }
2800
2813
  });
2801
2814
  var maskFormat = import_mask.format;
2802
2815
  var maskUnformat = import_mask.unformat;
@@ -2825,7 +2838,7 @@ var TextField = import_react2.default.forwardRef(
2825
2838
  ]);
2826
2839
  const maskRef = mask ? (0, import_mask.useMask)(mask) : void 0;
2827
2840
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex2, { gap: "0", css: { width: "100%" }, children: [
2828
- !!addon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InputAddon, { typography: "labelSmall", children: addon }),
2841
+ !!addon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InputAddon, { color, typography: "labelSmall", children: addon }),
2829
2842
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
2830
2843
  TextFieldStyled,
2831
2844
  __spreadProps(__spreadValues({
@@ -2888,27 +2901,17 @@ function TextFieldSlot(_a) {
2888
2901
  }, props), {
2889
2902
  color: void 0
2890
2903
  });
2891
- return onClick ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2904
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2892
2905
  TextFieldSlotStyled,
2893
2906
  __spreadProps(__spreadValues({}, sharedStyles), {
2894
2907
  style: {
2895
2908
  float: position === "flex-start" ? "left" : "right",
2896
2909
  order: position === "flex-start" ? 0 : 2,
2897
2910
  textAlign,
2898
- zIndex: 2,
2899
- cursor: "pointer"
2900
- },
2901
- onClick: () => onClick(),
2902
- children
2903
- })
2904
- ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2905
- TextFieldSlotStyled,
2906
- __spreadProps(__spreadValues({}, sharedStyles), {
2907
- style: {
2908
- float: position === "flex-start" ? "left" : "right",
2909
- order: position === "flex-start" ? 0 : 2,
2910
- textAlign
2911
+ zIndex: onClick ? 2 : void 0,
2912
+ cursor: onClick ? "pointer" : void 0
2911
2913
  },
2914
+ onClick,
2912
2915
  children
2913
2916
  })
2914
2917
  );
@@ -3399,21 +3402,20 @@ function FilterItem(_a) {
3399
3402
  }
3400
3403
 
3401
3404
  // src/components/Dropdown.tsx
3402
- var import_react3 = require("react");
3405
+ var import_react3 = __toESM(require("react"));
3403
3406
  var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
3404
- var import_themes11 = require("@radix-ui/themes");
3405
3407
  var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
3406
3408
  var import_jsx_runtime11 = require("react/jsx-runtime");
3407
- var DropdownMenuItemStyled = styled(import_themes11.DropdownMenu.Item, {
3409
+ var DropdownMenuItemStyled = styled("div", {
3408
3410
  fontFamily: "$default",
3409
3411
  color: "$dark600",
3410
3412
  letterSpacing: "0px",
3411
3413
  padding: "$8 $16",
3414
+ cursor: "pointer",
3412
3415
  "&:hover, &:focus": {
3413
3416
  backgroundColor: "$dark100",
3414
3417
  border: "none",
3415
- outline: "none",
3416
- cursor: "pointer"
3418
+ outline: "none"
3417
3419
  },
3418
3420
  variants: {
3419
3421
  typography: typographyLabelValues,
@@ -3426,16 +3428,18 @@ var DropdownMenuItemStyled = styled(import_themes11.DropdownMenu.Item, {
3426
3428
  }
3427
3429
  });
3428
3430
  var DropdownMenuStyled = styled("div", {
3431
+ boxSizing: "border-box",
3429
3432
  fontFamily: "$default",
3430
3433
  color: "$dark600",
3431
3434
  letterSpacing: "0px",
3432
3435
  cursor: "pointer",
3433
3436
  border: "1px solid $dark300",
3434
3437
  borderRadius: "$xs",
3435
- padding: "$8 $12",
3436
- width: "100%",
3438
+ maxWidth: "100%",
3437
3439
  display: "flex",
3440
+ position: "relative",
3438
3441
  button: {
3442
+ boxSizing: "border-box",
3439
3443
  fontFamily: "$default",
3440
3444
  color: "$dark600",
3441
3445
  letterSpacing: "0px",
@@ -3446,6 +3450,7 @@ var DropdownMenuStyled = styled("div", {
3446
3450
  display: "flex",
3447
3451
  alignItems: "center",
3448
3452
  gap: "$8",
3453
+ padding: "$8 $12",
3449
3454
  cursor: "pointer",
3450
3455
  svg: {
3451
3456
  marginLeft: "auto"
@@ -3494,17 +3499,17 @@ var DropdownMenuStyled = styled("div", {
3494
3499
  }
3495
3500
  }
3496
3501
  });
3497
- var DropdownMenuContentStyled = styled(import_themes11.DropdownMenu.Content, {
3502
+ var DropdownMenuContentStyled = styled("div", {
3503
+ position: "absolute",
3504
+ top: "100%",
3505
+ left: 0,
3506
+ width: "100%",
3498
3507
  background: "white",
3499
3508
  border: "1px solid $dark300",
3500
3509
  borderRadius: "$xs",
3501
3510
  boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08)",
3502
- width: "100%",
3503
- minWidth: "100%",
3504
3511
  marginTop: "3px",
3505
3512
  maxHeight: "400px",
3506
- height: "100%",
3507
- position: "relative",
3508
3513
  overflow: "auto",
3509
3514
  zIndex: 9999999999
3510
3515
  });
@@ -3513,63 +3518,144 @@ function DropdownMenu2(_a) {
3513
3518
  children,
3514
3519
  placeholder,
3515
3520
  typography,
3516
- color,
3517
- fontWeight
3521
+ color = "default",
3522
+ fontWeight,
3523
+ open: controlledOpen,
3524
+ onOpenChange,
3525
+ defaultOpen = false
3518
3526
  } = _b, props = __objRest(_b, [
3519
3527
  "children",
3520
3528
  "placeholder",
3521
3529
  "typography",
3522
3530
  "color",
3523
- "fontWeight"
3531
+ "fontWeight",
3532
+ "open",
3533
+ "onOpenChange",
3534
+ "defaultOpen"
3524
3535
  ]);
3525
- const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
3526
- 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)(
3536
+ const [internalOpen, setInternalOpen] = (0, import_react3.useState)(defaultOpen);
3537
+ const dropdownRef = (0, import_react3.useRef)(null);
3538
+ const isControlled = controlledOpen !== void 0;
3539
+ const isOpen = isControlled ? controlledOpen : internalOpen;
3540
+ const handleToggle = () => {
3541
+ const newOpen = !isOpen;
3542
+ if (!isControlled) {
3543
+ setInternalOpen(newOpen);
3544
+ }
3545
+ onOpenChange == null ? void 0 : onOpenChange(newOpen);
3546
+ };
3547
+ const handleClose = () => {
3548
+ if (!isControlled) {
3549
+ setInternalOpen(false);
3550
+ }
3551
+ onOpenChange == null ? void 0 : onOpenChange(false);
3552
+ };
3553
+ (0, import_react3.useEffect)(() => {
3554
+ const handleClickOutside = (event) => {
3555
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
3556
+ handleClose();
3557
+ }
3558
+ };
3559
+ const handleEscape = (event) => {
3560
+ if (event.key === "Escape") {
3561
+ handleClose();
3562
+ }
3563
+ };
3564
+ if (isOpen) {
3565
+ document.addEventListener("mousedown", handleClickOutside);
3566
+ document.addEventListener("keydown", handleEscape);
3567
+ }
3568
+ return () => {
3569
+ document.removeEventListener("mousedown", handleClickOutside);
3570
+ document.removeEventListener("keydown", handleEscape);
3571
+ };
3572
+ }, [isOpen]);
3573
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
3527
3574
  DropdownMenuStyled,
3528
- {
3575
+ __spreadProps(__spreadValues({
3576
+ ref: dropdownRef,
3529
3577
  typography,
3530
3578
  fontWeight,
3531
- color,
3579
+ color
3580
+ }, props), {
3532
3581
  children: [
3533
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes11.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { "aria-label": placeholder || "Filtrar", children: [
3534
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: placeholder || "Filtrar" }),
3535
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3536
- import_react_fontawesome2.FontAwesomeIcon,
3537
- {
3538
- icon: isOpen ? import_free_solid_svg_icons2.faChevronUp : import_free_solid_svg_icons2.faChevronDown,
3539
- size: "sm",
3540
- color: colors.dark600
3541
- }
3542
- )
3543
- ] }) }),
3544
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3545
- DropdownMenuContentStyled,
3582
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
3583
+ "button",
3546
3584
  {
3547
- container: document.body,
3548
- avoidCollisions: false,
3549
- align: "start",
3550
- alignOffset: -14,
3551
- children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes11.DropdownMenu.Group, { children })
3585
+ "aria-label": placeholder || "Filtrar",
3586
+ "aria-expanded": isOpen,
3587
+ "aria-haspopup": "listbox",
3588
+ onClick: handleToggle,
3589
+ type: "button",
3590
+ onKeyDown: (e) => {
3591
+ if (e.key === "Enter" || e.key === " ") {
3592
+ e.preventDefault();
3593
+ handleToggle();
3594
+ }
3595
+ },
3596
+ children: [
3597
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: placeholder || "Filtrar" }),
3598
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3599
+ import_react_fontawesome2.FontAwesomeIcon,
3600
+ {
3601
+ icon: isOpen ? import_free_solid_svg_icons2.faChevronUp : import_free_solid_svg_icons2.faChevronDown,
3602
+ size: "sm",
3603
+ color: colors.dark600
3604
+ }
3605
+ )
3606
+ ]
3552
3607
  }
3553
- )
3608
+ ),
3609
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuContentStyled, { role: "listbox", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuProvider, { onItemSelect: handleClose, children }) })
3554
3610
  ]
3555
- }
3556
- ) })) });
3611
+ })
3612
+ );
3613
+ }
3614
+ var DropdownMenuContext = import_react3.default.createContext(null);
3615
+ function DropdownMenuProvider({
3616
+ children,
3617
+ onItemSelect
3618
+ }) {
3619
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuContext.Provider, { value: { onItemSelect }, children });
3557
3620
  }
3558
3621
  function DropdownMenuItem(_a) {
3559
3622
  var _b = _a, {
3560
3623
  children,
3561
3624
  typography,
3562
- fontWeight
3625
+ fontWeight,
3626
+ value,
3627
+ onSelect,
3628
+ onClick
3563
3629
  } = _b, props = __objRest(_b, [
3564
3630
  "children",
3565
3631
  "typography",
3566
- "fontWeight"
3632
+ "fontWeight",
3633
+ "value",
3634
+ "onSelect",
3635
+ "onClick"
3567
3636
  ]);
3637
+ const context = import_react3.default.useContext(DropdownMenuContext);
3638
+ const handleClick = (event) => {
3639
+ onClick == null ? void 0 : onClick(event);
3640
+ onSelect == null ? void 0 : onSelect(value);
3641
+ context == null ? void 0 : context.onItemSelect();
3642
+ };
3643
+ const handleKeyDown = (event) => {
3644
+ if (event.key === "Enter" || event.key === " ") {
3645
+ event.preventDefault();
3646
+ onSelect == null ? void 0 : onSelect(value);
3647
+ context == null ? void 0 : context.onItemSelect();
3648
+ }
3649
+ };
3568
3650
  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3569
3651
  DropdownMenuItemStyled,
3570
3652
  __spreadProps(__spreadValues({
3571
3653
  typography,
3572
- fontWeight
3654
+ fontWeight,
3655
+ onClick: handleClick,
3656
+ onKeyDown: handleKeyDown,
3657
+ tabIndex: 0,
3658
+ role: "option"
3573
3659
  }, props), {
3574
3660
  children
3575
3661
  })
@@ -3578,9 +3664,9 @@ function DropdownMenuItem(_a) {
3578
3664
 
3579
3665
  // src/components/Badge.tsx
3580
3666
  var import_react4 = __toESM(require("react"));
3581
- var import_themes12 = require("@radix-ui/themes");
3667
+ var import_themes11 = require("@radix-ui/themes");
3582
3668
  var import_jsx_runtime12 = require("react/jsx-runtime");
3583
- var BadgeStyled = styled(import_themes12.Badge, {
3669
+ var BadgeStyled = styled(import_themes11.Badge, {
3584
3670
  fontFamily: "$default",
3585
3671
  borderRadius: "$sm",
3586
3672
  verticalAlign: "middle",
@@ -3693,8 +3779,8 @@ function Badge(_a) {
3693
3779
  var import_radix_ui = require("radix-ui");
3694
3780
 
3695
3781
  // src/components/Box.tsx
3696
- var import_themes13 = require("@radix-ui/themes");
3697
- var Box = import_themes13.Box;
3782
+ var import_themes12 = require("@radix-ui/themes");
3783
+ var Box = import_themes12.Box;
3698
3784
 
3699
3785
  // src/components/Modal.tsx
3700
3786
  var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -3833,8 +3919,8 @@ var import_react_day_picker = require("react-day-picker");
3833
3919
  function buildFormatLongFn(args) {
3834
3920
  return (options = {}) => {
3835
3921
  const width = options.width ? String(options.width) : args.defaultWidth;
3836
- const format3 = args.formats[width] || args.formats[args.defaultWidth];
3837
- return format3;
3922
+ const format4 = args.formats[width] || args.formats[args.defaultWidth];
3923
+ return format4;
3838
3924
  };
3839
3925
  }
3840
3926
 
@@ -4529,11 +4615,11 @@ var formatRelativeLocale2 = {
4529
4615
  other: "P"
4530
4616
  };
4531
4617
  var formatRelative2 = (token, date, _baseDate, _options) => {
4532
- const format3 = formatRelativeLocale2[token];
4533
- if (typeof format3 === "function") {
4534
- return format3(date);
4618
+ const format4 = formatRelativeLocale2[token];
4619
+ if (typeof format4 === "function") {
4620
+ return format4(date);
4535
4621
  }
4536
- return format3;
4622
+ return format4;
4537
4623
  };
4538
4624
 
4539
4625
  // ../../node_modules/date-fns/locale/pt-BR/_lib/localize.js
@@ -5801,14 +5887,14 @@ function isProtectedDayOfYearToken(token) {
5801
5887
  function isProtectedWeekYearToken(token) {
5802
5888
  return weekYearTokenRE.test(token);
5803
5889
  }
5804
- function warnOrThrowProtectedError(token, format3, input) {
5805
- const _message = message(token, format3, input);
5890
+ function warnOrThrowProtectedError(token, format4, input) {
5891
+ const _message = message(token, format4, input);
5806
5892
  console.warn(_message);
5807
5893
  if (throwTokens.includes(token)) throw new RangeError(_message);
5808
5894
  }
5809
- function message(token, format3, input) {
5895
+ function message(token, format4, input) {
5810
5896
  const subject = token[0] === "Y" ? "years" : "days of the month";
5811
- return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format3}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`;
5897
+ return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format4}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`;
5812
5898
  }
5813
5899
 
5814
5900
  // ../../node_modules/date-fns/format.js
@@ -8413,9 +8499,9 @@ function TimePicker({
8413
8499
  }
8414
8500
 
8415
8501
  // src/components/Alert.tsx
8416
- var import_themes14 = require("@radix-ui/themes");
8502
+ var import_themes13 = require("@radix-ui/themes");
8417
8503
  var import_jsx_runtime18 = require("react/jsx-runtime");
8418
- var AlertDialogSimpleStyled = styled(import_themes14.AlertDialog.Content, {
8504
+ var AlertDialogSimpleStyled = styled(import_themes13.AlertDialog.Content, {
8419
8505
  fontFamily: "$default",
8420
8506
  lineHeight: "$base",
8421
8507
  fontSize: "$13",
@@ -8466,7 +8552,7 @@ var AlertDialogSimpleStyled = styled(import_themes14.AlertDialog.Content, {
8466
8552
  color: "success"
8467
8553
  }
8468
8554
  });
8469
- var AlertDialogCompleteStyled = styled(import_themes14.AlertDialog.Content, {
8555
+ var AlertDialogCompleteStyled = styled(import_themes13.AlertDialog.Content, {
8470
8556
  fontFamily: "$default",
8471
8557
  lineHeight: "$base",
8472
8558
  fontSize: "$13",
@@ -8489,11 +8575,11 @@ var AlertDialogCompleteStyled = styled(import_themes14.AlertDialog.Content, {
8489
8575
  color: {}
8490
8576
  }
8491
8577
  });
8492
- var AlertDialogDescriptionStyled = styled(import_themes14.AlertDialog.Description, {
8578
+ var AlertDialogDescriptionStyled = styled(import_themes13.AlertDialog.Description, {
8493
8579
  padding: 0,
8494
8580
  margin: 0
8495
8581
  });
8496
- var AlertDialogTitleStyled = styled(import_themes14.AlertDialog.Title, {
8582
+ var AlertDialogTitleStyled = styled(import_themes13.AlertDialog.Title, {
8497
8583
  fontFamily: "$default",
8498
8584
  lineHeight: "$base",
8499
8585
  fontSize: "$20",
@@ -8529,15 +8615,15 @@ function Alert(_a) {
8529
8615
  "simpleAlert"
8530
8616
  ]);
8531
8617
  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
8532
- simpleAlert && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes14.AlertDialog.Root, { children: [
8533
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Trigger, { children: trigger }),
8618
+ simpleAlert && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes13.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes13.AlertDialog.Root, { children: [
8619
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes13.AlertDialog.Trigger, { children: trigger }),
8534
8620
  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
8535
8621
  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogDescriptionStyled, { children: simpleAlert.description }),
8536
- 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" }) }) })
8622
+ 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" }) }) })
8537
8623
  ] })) })
8538
8624
  ] }) }),
8539
- completAlert && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes14.AlertDialog.Root, { children: [
8540
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Trigger, { children: trigger }),
8625
+ completAlert && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes13.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes13.AlertDialog.Root, { children: [
8626
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes13.AlertDialog.Trigger, { children: trigger }),
8541
8627
  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogCompleteStyled, { children: [
8542
8628
  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogRowStyled, { className: "le-alert-dialog-row", children: [
8543
8629
  color === "success" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
@@ -8637,7 +8723,7 @@ function Alert(_a) {
8637
8723
  ] }),
8638
8724
  completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialoghrStyled, {}) : null,
8639
8725
  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogRowStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Flex2, { gap: "10", justify: "end", width: "100%", children: [
8640
- completAlert.onAction && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
8726
+ completAlert.onAction && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes13.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
8641
8727
  Button,
8642
8728
  {
8643
8729
  variant: "contained",
@@ -8645,7 +8731,7 @@ function Alert(_a) {
8645
8731
  children: completAlert.actionText || "Salvar"
8646
8732
  }
8647
8733
  ) }),
8648
- 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" }) })
8734
+ 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" }) })
8649
8735
  ] }) })
8650
8736
  ] })
8651
8737
  ] }) })
@@ -8653,9 +8739,9 @@ function Alert(_a) {
8653
8739
  }
8654
8740
 
8655
8741
  // src/components/Switch.tsx
8656
- var import_themes15 = require("@radix-ui/themes");
8742
+ var import_themes14 = require("@radix-ui/themes");
8657
8743
  var import_jsx_runtime19 = require("react/jsx-runtime");
8658
- var SwitchStyled = styled(import_themes15.Switch, {
8744
+ var SwitchStyled = styled(import_themes14.Switch, {
8659
8745
  all: "unset",
8660
8746
  borderRadius: "$full",
8661
8747
  position: "relative",
@@ -8753,14 +8839,14 @@ function Switch(props) {
8753
8839
 
8754
8840
  // src/components/Step.tsx
8755
8841
  var import_react9 = __toESM(require("react"));
8756
- var import_themes16 = require("@radix-ui/themes");
8842
+ var import_themes15 = require("@radix-ui/themes");
8757
8843
  var import_jsx_runtime20 = require("react/jsx-runtime");
8758
8844
  var StepStyled = styled("div", {
8759
8845
  fontFamily: "$default",
8760
8846
  color: "$gray100",
8761
8847
  letterSpacing: "0px"
8762
8848
  });
8763
- var StepTriggerStyled = styled(import_themes16.Tabs.Trigger, {
8849
+ var StepTriggerStyled = styled(import_themes15.Tabs.Trigger, {
8764
8850
  all: "unset",
8765
8851
  position: "relative",
8766
8852
  display: "flex",
@@ -8819,7 +8905,7 @@ var StepTriggerStyled = styled(import_themes16.Tabs.Trigger, {
8819
8905
  backgroundColor: "$blue500"
8820
8906
  }
8821
8907
  });
8822
- var StepListStyled = styled(import_themes16.Tabs.List, {
8908
+ var StepListStyled = styled(import_themes15.Tabs.List, {
8823
8909
  display: "flex",
8824
8910
  alignItems: "center",
8825
8911
  justifyContent: "flex-start",
@@ -8827,7 +8913,7 @@ var StepListStyled = styled(import_themes16.Tabs.List, {
8827
8913
  });
8828
8914
  function Step(_a) {
8829
8915
  var _b = _a, { children, defaultValue } = _b, props = __objRest(_b, ["children", "defaultValue"]);
8830
- 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 })) });
8916
+ 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 })) });
8831
8917
  }
8832
8918
  function StepTrigger(_a) {
8833
8919
  var _b = _a, {
@@ -8858,7 +8944,7 @@ function StepContent(_a) {
8858
8944
  "value",
8859
8945
  "children"
8860
8946
  ]);
8861
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes16.Tabs.Content, __spreadProps(__spreadValues({ value: String(value) }, props), { children }));
8947
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes15.Tabs.Content, __spreadProps(__spreadValues({ value: String(value) }, props), { children }));
8862
8948
  }
8863
8949
  function StepList(_a) {
8864
8950
  var _b = _a, {
@@ -8881,13 +8967,13 @@ function StepWrapper(_a) {
8881
8967
  } = _b, props = __objRest(_b, [
8882
8968
  "children"
8883
8969
  ]);
8884
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes16.Box, __spreadProps(__spreadValues({}, props), { children }));
8970
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes15.Box, __spreadProps(__spreadValues({}, props), { children }));
8885
8971
  }
8886
8972
 
8887
8973
  // src/components/Card.tsx
8888
- var import_themes17 = require("@radix-ui/themes");
8974
+ var import_themes16 = require("@radix-ui/themes");
8889
8975
  var import_jsx_runtime21 = require("react/jsx-runtime");
8890
- var CardStyled = styled(import_themes17.Card, {
8976
+ var CardStyled = styled(import_themes16.Card, {
8891
8977
  borderRadius: "$2xl",
8892
8978
  border: "1px solid $dark100",
8893
8979
  padding: "16px",
@@ -8926,10 +9012,10 @@ function Card(_a) {
8926
9012
  }
8927
9013
 
8928
9014
  // src/components/TextareaField.tsx
8929
- var import_themes18 = require("@radix-ui/themes");
9015
+ var import_themes17 = require("@radix-ui/themes");
8930
9016
  var import_react10 = __toESM(require("react"));
8931
9017
  var import_jsx_runtime22 = require("react/jsx-runtime");
8932
- var TextareaFieldStyle = styled(import_themes18.TextArea, {
9018
+ var TextareaFieldStyle = styled(import_themes17.TextArea, {
8933
9019
  display: "flex",
8934
9020
  flex: 1,
8935
9021
  textarea: {
@@ -9292,13 +9378,13 @@ function Tooltip({
9292
9378
  }
9293
9379
 
9294
9380
  // src/components/MultiSelect.tsx
9295
- var import_themes19 = require("@radix-ui/themes");
9381
+ var import_themes18 = require("@radix-ui/themes");
9296
9382
  var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
9297
9383
  var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
9298
9384
  var import_react15 = require("react");
9299
9385
  var import_react16 = __toESM(require("react"));
9300
9386
  var import_jsx_runtime26 = require("react/jsx-runtime");
9301
- var StyledContent = styled(import_themes19.DropdownMenu.Content, {
9387
+ var StyledContent = styled(import_themes18.DropdownMenu.Content, {
9302
9388
  backgroundColor: "$dark50",
9303
9389
  borderRadius: "$sm",
9304
9390
  padding: "$8 0",
@@ -9388,8 +9474,8 @@ var MultiSelect = import_react16.default.forwardRef(
9388
9474
  [selectedValues, onValueChange]
9389
9475
  );
9390
9476
  const menuWidth = (_a = triggerRef.current) == null ? void 0 : _a.offsetWidth;
9391
- 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: [
9392
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes19.DropdownMenu.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
9477
+ 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: [
9478
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes18.DropdownMenu.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
9393
9479
  StyledTrigger,
9394
9480
  {
9395
9481
  css: {
@@ -9458,9 +9544,9 @@ var MultiSelect = import_react16.default.forwardRef(
9458
9544
  );
9459
9545
 
9460
9546
  // src/components/Grid.tsx
9461
- var import_themes20 = require("@radix-ui/themes");
9547
+ var import_themes19 = require("@radix-ui/themes");
9462
9548
  var import_jsx_runtime27 = require("react/jsx-runtime");
9463
- var GridStyled = styled(import_themes20.Grid, {
9549
+ var GridStyled = styled(import_themes19.Grid, {
9464
9550
  display: "grid",
9465
9551
  variants: {
9466
9552
  display: {
@@ -9585,9 +9671,9 @@ function Grid(_a) {
9585
9671
  }
9586
9672
 
9587
9673
  // src/components/Container.tsx
9588
- var import_themes21 = require("@radix-ui/themes");
9674
+ var import_themes20 = require("@radix-ui/themes");
9589
9675
  var import_jsx_runtime28 = require("react/jsx-runtime");
9590
- var ContainerStyled = styled(import_themes21.Container, {
9676
+ var ContainerStyled = styled(import_themes20.Container, {
9591
9677
  variants: {
9592
9678
  size: {
9593
9679
  xs: { maxWidth: "576px" },
@@ -9620,9 +9706,9 @@ function Container(_a) {
9620
9706
  }
9621
9707
 
9622
9708
  // src/components/Section.tsx
9623
- var import_themes22 = require("@radix-ui/themes");
9709
+ var import_themes21 = require("@radix-ui/themes");
9624
9710
  var import_jsx_runtime29 = require("react/jsx-runtime");
9625
- var SectionStyled = styled(import_themes22.Section, {
9711
+ var SectionStyled = styled(import_themes21.Section, {
9626
9712
  variants: {
9627
9713
  size: {
9628
9714
  xs: { maxWidth: "576px" },
@@ -9648,7 +9734,7 @@ function Section(_a) {
9648
9734
  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
9649
9735
  }
9650
9736
 
9651
- // src/components/FormFields/ErrorFormMessage.tsx
9737
+ // src/components/FormFields/subComponents/ErrorFormMessage.tsx
9652
9738
  var import_free_solid_svg_icons4 = require("@fortawesome/free-solid-svg-icons");
9653
9739
  var import_react_fontawesome4 = require("@fortawesome/react-fontawesome");
9654
9740
  var import_jsx_runtime30 = require("react/jsx-runtime");
@@ -9663,7 +9749,7 @@ var ErrorFormMessage = ({ message: message2 }) => {
9663
9749
  ] });
9664
9750
  };
9665
9751
 
9666
- // src/components/FormFields/FormLabel.tsx
9752
+ // src/components/FormFields/subComponents/FormLabel.tsx
9667
9753
  var import_jsx_runtime31 = require("react/jsx-runtime");
9668
9754
  var FormLabel = ({
9669
9755
  name,
@@ -9733,37 +9819,62 @@ var TextAreaFormField = (_a) => {
9733
9819
 
9734
9820
  // src/components/FormFields/TextFormField.tsx
9735
9821
  var import_react_hook_form2 = require("react-hook-form");
9736
-
9737
- // src/utils/getNestedValue.ts
9738
- function getNestedValue(obj, path) {
9739
- return path.split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
9740
- }
9741
-
9742
- // src/components/FormFields/TextFormField.tsx
9822
+ var import_react17 = require("react");
9823
+ var import_mask2 = require("@react-input/mask");
9743
9824
  var import_jsx_runtime33 = require("react/jsx-runtime");
9744
- var TextFormField = ({
9745
- name,
9746
- label,
9747
- required,
9748
- placeholder,
9749
- mask,
9750
- validation,
9751
- validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
9752
- disabled = false,
9753
- value,
9754
- onChange
9755
- }) => {
9756
- const {
9757
- register,
9758
- formState: { errors }
9759
- } = (0, import_react_hook_form2.useFormContext)();
9760
- const validationRules = __spreadValues({
9761
- required: required ? validationErrorMessage : false
9762
- }, validation);
9763
- const _a = register(name, validationRules), { ref } = _a, restFieldProps = __objRest(_a, ["ref"]);
9764
- const fieldError = getNestedValue(errors, name);
9825
+ var TextFormField = (_a) => {
9826
+ var _b = _a, {
9827
+ name,
9828
+ label,
9829
+ required,
9830
+ mask,
9831
+ validate,
9832
+ validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
9833
+ onChange,
9834
+ valueFormatter
9835
+ } = _b, inputProps = __objRest(_b, [
9836
+ "name",
9837
+ "label",
9838
+ "required",
9839
+ "mask",
9840
+ "validate",
9841
+ "validationErrorMessage",
9842
+ "onChange",
9843
+ "valueFormatter"
9844
+ ]);
9845
+ const handleValidate = (0, import_react17.useCallback)(
9846
+ (value) => {
9847
+ var _a2;
9848
+ if (!required && value.trim() === "") return true;
9849
+ return (_a2 = validate == null ? void 0 : validate(value)) != null ? _a2 : true;
9850
+ },
9851
+ [validate, required]
9852
+ );
9853
+ const { field, fieldState } = (0, import_react_hook_form2.useController)({
9854
+ name,
9855
+ rules: {
9856
+ required: required ? validationErrorMessage : false,
9857
+ validate: handleValidate,
9858
+ onChange
9859
+ },
9860
+ defaultValue: ""
9861
+ });
9862
+ const fieldError = fieldState.error;
9765
9863
  const haveError = !!fieldError;
9766
9864
  const errorMsg = fieldError == null ? void 0 : fieldError.message;
9865
+ const { value: formValue, onChange: formChange } = field;
9866
+ const formattedValue = (0, import_react17.useMemo)(() => {
9867
+ let value = formValue;
9868
+ if (valueFormatter) value = valueFormatter.format(value);
9869
+ if (mask) value = (0, import_mask2.format)(value != null ? value : "", mask);
9870
+ return value;
9871
+ }, [formValue, valueFormatter, mask]);
9872
+ const handleChange = (e) => {
9873
+ let value = e.target.value;
9874
+ if (mask) value = (0, import_mask2.unformat)(value, mask);
9875
+ if (valueFormatter) value = valueFormatter.unformat(value);
9876
+ formChange(value);
9877
+ };
9767
9878
  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex2, { direction: "column", children: [
9768
9879
  label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
9769
9880
  FormLabel,
@@ -9776,16 +9887,13 @@ var TextFormField = ({
9776
9887
  ),
9777
9888
  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
9778
9889
  TextField,
9779
- __spreadProps(__spreadValues({
9890
+ __spreadProps(__spreadValues(__spreadValues({
9780
9891
  mask,
9781
- placeholder,
9782
- disabled,
9783
9892
  color: haveError ? "error" : "default",
9784
9893
  "aria-labelledby": `${name}-label`
9785
- }, restFieldProps), {
9786
- ref,
9787
- onChange,
9788
- value
9894
+ }, inputProps), field), {
9895
+ onChange: handleChange,
9896
+ value: formattedValue
9789
9897
  })
9790
9898
  ),
9791
9899
  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ErrorFormMessage, { message: errorMsg })
@@ -9798,14 +9906,12 @@ var import_jsx_runtime34 = require("react/jsx-runtime");
9798
9906
  var Form = (_a) => {
9799
9907
  var _b = _a, {
9800
9908
  onSubmit,
9801
- children,
9802
- methods
9909
+ children
9803
9910
  } = _b, props = __objRest(_b, [
9804
9911
  "onSubmit",
9805
- "children",
9806
- "methods"
9912
+ "children"
9807
9913
  ]);
9808
- const formMethods = methods || (0, import_react_hook_form3.useForm)(props);
9914
+ const formMethods = (0, import_react_hook_form3.useForm)(props);
9809
9915
  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_hook_form3.FormProvider, __spreadProps(__spreadValues({}, formMethods), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("form", { onSubmit: formMethods.handleSubmit(onSubmit), children }) }));
9810
9916
  };
9811
9917
 
@@ -9823,10 +9929,7 @@ var MultiSelectFormField = (_a) => {
9823
9929
  "required"
9824
9930
  ]);
9825
9931
  var _a2;
9826
- const {
9827
- formState: { errors }
9828
- } = (0, import_react_hook_form4.useFormContext)();
9829
- const { field } = (0, import_react_hook_form4.useController)({
9932
+ const { field, fieldState } = (0, import_react_hook_form4.useController)({
9830
9933
  name,
9831
9934
  rules: {
9832
9935
  required
@@ -9834,8 +9937,8 @@ var MultiSelectFormField = (_a) => {
9834
9937
  defaultValue: []
9835
9938
  });
9836
9939
  const { value, onChange, ref, onBlur, disabled } = field;
9837
- const haveError = !!errors[name];
9838
- const errorMsg = (_a2 = errors[name]) == null ? void 0 : _a2.message;
9940
+ const haveError = !!fieldState.error;
9941
+ const errorMsg = (_a2 = fieldState.error) == null ? void 0 : _a2.message;
9839
9942
  const handleChange = (v) => {
9840
9943
  onChange(v);
9841
9944
  };
@@ -9862,49 +9965,50 @@ var MultiSelectFormField = (_a) => {
9862
9965
  ] });
9863
9966
  };
9864
9967
 
9968
+ // src/components/FormFields/utils/validation.ts
9969
+ var minMaxLength = (min, max, errorMsg) => (value) => {
9970
+ console.log(value);
9971
+ var length = value.length;
9972
+ return length > max || length < min ? errorMsg : true;
9973
+ };
9974
+
9865
9975
  // src/components/FormFields/PhoneFormField.tsx
9866
- var import_react_hook_form5 = require("react-hook-form");
9867
9976
  var import_jsx_runtime36 = require("react/jsx-runtime");
9868
- var PhoneFormField = (_a) => {
9869
- var _b = _a, {
9870
- name,
9871
- label,
9872
- required,
9873
- defaultCountry = "br"
9874
- } = _b, props = __objRest(_b, [
9875
- "name",
9876
- "label",
9877
- "required",
9878
- "defaultCountry"
9879
- ]);
9880
- var _a2;
9881
- const {
9882
- register,
9883
- formState: { errors },
9884
- setValue,
9885
- watch
9886
- } = (0, import_react_hook_form5.useFormContext)();
9887
- const haveError = !!errors[name];
9888
- const errorMsg = (_a2 = errors[name]) == null ? void 0 : _a2.message;
9889
- const handlePhoneChange = (phone) => {
9890
- setValue(name, phone);
9891
- };
9892
- return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex2, { direction: "column", children: [
9893
- /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
9894
- FormLabel,
9895
- {
9896
- name,
9897
- label,
9898
- required,
9899
- haveError
9977
+ var PhoneFormField = ({
9978
+ name,
9979
+ label,
9980
+ required
9981
+ }) => {
9982
+ return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
9983
+ TextFormField,
9984
+ {
9985
+ name,
9986
+ label,
9987
+ required,
9988
+ addon: "+ 55",
9989
+ mask: {
9990
+ mask: "(__) _____-____}",
9991
+ replacement: { _: /\d/ }
9992
+ },
9993
+ placeholder: "(00) 00000-0000",
9994
+ type: "tel",
9995
+ validate: minMaxLength(12, 13, "Telefone inv\xE1lido"),
9996
+ valueFormatter: {
9997
+ format(v) {
9998
+ if (!v || v === "") return v;
9999
+ return v.replace(/\b55/, "");
10000
+ },
10001
+ unformat(v) {
10002
+ if (!v || v === "") return v;
10003
+ return "55" + v;
10004
+ }
9900
10005
  }
9901
- ),
9902
- /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorFormMessage, { message: errorMsg })
9903
- ] });
10006
+ }
10007
+ );
9904
10008
  };
9905
10009
 
9906
10010
  // src/components/FormFields/CPFFormField.tsx
9907
- var import_react_hook_form6 = require("react-hook-form");
10011
+ var import_react_hook_form5 = require("react-hook-form");
9908
10012
  var import_jsx_runtime37 = require("react/jsx-runtime");
9909
10013
  var isValidCPF = (cpf) => {
9910
10014
  cpf = cpf.replace(/[^\d]+/g, "");
@@ -9929,8 +10033,8 @@ var CPFFormField = ({
9929
10033
  validationErrorMessage,
9930
10034
  foreignerLabel
9931
10035
  }) => {
9932
- const { control, setValue } = (0, import_react_hook_form6.useFormContext)();
9933
- const foreigner = (0, import_react_hook_form6.useWatch)({ name: "foreigner", control });
10036
+ const { control, setValue } = (0, import_react_hook_form5.useFormContext)();
10037
+ const foreigner = (0, import_react_hook_form5.useWatch)({ name: "foreigner", control });
9934
10038
  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex2, { direction: "column", children: [
9935
10039
  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
9936
10040
  TextFormField,
@@ -9943,11 +10047,9 @@ var CPFFormField = ({
9943
10047
  mask: "___.___.___-__",
9944
10048
  replacement: { _: /[0-9]/ }
9945
10049
  },
9946
- validation: {
9947
- validate: (value) => {
9948
- if (!required || foreigner) return true;
9949
- return isValidCPF(value) || validationErrorMessage;
9950
- }
10050
+ validate: (value) => {
10051
+ if (!required || foreigner) return true;
10052
+ return isValidCPF(value) || validationErrorMessage;
9951
10053
  },
9952
10054
  disabled: foreigner
9953
10055
  }
@@ -10030,12 +10132,10 @@ var CNPJFormField = ({
10030
10132
  mask: "__.___.___/____-__",
10031
10133
  replacement: { _: /[0-9]/ }
10032
10134
  },
10033
- validation: {
10034
- validate: (value) => {
10035
- const isEmpty = value.replace(matchesNonDigit, "").length === 0;
10036
- if (!required && isEmpty) return true;
10037
- return isValidCNPJ(value) || validationErrorMessage;
10038
- }
10135
+ validate: (value) => {
10136
+ const isEmpty = value.replace(matchesNonDigit, "").length === 0;
10137
+ if (!required && isEmpty) return true;
10138
+ return isValidCNPJ(value) || validationErrorMessage;
10039
10139
  }
10040
10140
  }
10041
10141
  );
@@ -10088,12 +10188,10 @@ var BirthDateFormField = ({
10088
10188
  mask: "__/__/____",
10089
10189
  replacement: { _: /[0-9]/ }
10090
10190
  },
10091
- validation: {
10092
- validate: (value) => {
10093
- const isEmpty = value.replace(/[^\d]+/g, "").length === 0;
10094
- if (!required && isEmpty) return true;
10095
- return isValidBirthDate(value, language) || validationErrorMessage;
10096
- }
10191
+ validate: (value) => {
10192
+ const isEmpty = value.replace(/[^\d]+/g, "").length === 0;
10193
+ if (!required && isEmpty) return true;
10194
+ return isValidBirthDate(value, language) || validationErrorMessage;
10097
10195
  }
10098
10196
  }
10099
10197
  );
@@ -10123,23 +10221,27 @@ var IdentityDocumentNumberFormField = ({
10123
10221
  mask: "__.___.___-_",
10124
10222
  replacement: { _: /[0-9]/ }
10125
10223
  },
10126
- validation: {
10127
- validate: (value) => {
10128
- const isEmpty = value.replace(/[^\d]/g, "").length === 0;
10129
- if (!required && isEmpty) return true;
10130
- return isValidRG(value) || validationErrorMessage;
10131
- }
10224
+ validate: (value) => {
10225
+ const isEmpty = value.replace(/[^\d]/g, "").length === 0;
10226
+ if (!required && isEmpty) return true;
10227
+ return isValidRG(value) || validationErrorMessage;
10132
10228
  }
10133
10229
  }
10134
10230
  );
10135
10231
  };
10136
10232
 
10137
10233
  // src/components/FormFields/AddressFormFields/index.tsx
10138
- var import_react18 = require("react");
10139
- var import_react_hook_form10 = require("react-hook-form");
10234
+ var import_react_hook_form8 = require("react-hook-form");
10235
+
10236
+ // src/components/FormFields/SelectFormField.tsx
10237
+ var import_react_hook_form6 = require("react-hook-form");
10238
+
10239
+ // src/utils/getNestedValue.ts
10240
+ function getNestedValue(obj, path) {
10241
+ return path.split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
10242
+ }
10140
10243
 
10141
10244
  // src/components/FormFields/SelectFormField.tsx
10142
- var import_react_hook_form7 = require("react-hook-form");
10143
10245
  var import_jsx_runtime41 = require("react/jsx-runtime");
10144
10246
  var SelectFormField = ({
10145
10247
  name,
@@ -10154,7 +10256,7 @@ var SelectFormField = ({
10154
10256
  const {
10155
10257
  control,
10156
10258
  formState: { errors }
10157
- } = (0, import_react_hook_form7.useFormContext)();
10259
+ } = (0, import_react_hook_form6.useFormContext)();
10158
10260
  const fieldError = getNestedValue(errors, name);
10159
10261
  const haveError = !!fieldError;
10160
10262
  const errorMsg = fieldError == null ? void 0 : fieldError.message;
@@ -10172,7 +10274,7 @@ var SelectFormField = ({
10172
10274
  }
10173
10275
  ),
10174
10276
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
10175
- import_react_hook_form7.Controller,
10277
+ import_react_hook_form6.Controller,
10176
10278
  {
10177
10279
  control,
10178
10280
  name,
@@ -10257,19 +10359,15 @@ function CountryFormField({
10257
10359
  }
10258
10360
 
10259
10361
  // src/components/FormFields/AddressFormFields/PostalCodeFormField.tsx
10260
- var import_react_hook_form8 = require("react-hook-form");
10261
10362
  var import_jsx_runtime43 = require("react/jsx-runtime");
10262
10363
  var PostalCodeFormField = ({
10263
10364
  name,
10264
10365
  label,
10265
10366
  required,
10266
10367
  placeholder,
10267
- validationErrorMessage
10368
+ validationErrorMessage,
10369
+ onChange
10268
10370
  }) => {
10269
- const { control } = (0, import_react_hook_form8.useFormContext)();
10270
- const {
10271
- field: { onChange, value }
10272
- } = (0, import_react_hook_form8.useController)({ name, control });
10273
10371
  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
10274
10372
  TextFormField,
10275
10373
  {
@@ -10281,14 +10379,11 @@ var PostalCodeFormField = ({
10281
10379
  mask: "_____-___",
10282
10380
  replacement: { _: /[0-9]/ }
10283
10381
  },
10284
- value,
10285
- onChange,
10286
- validation: {
10287
- validate: (value2) => {
10288
- const isEmpty = value2.replace(/[^\d]/g, "").length === 0;
10289
- if (!required && isEmpty) return true;
10290
- return /^\d{8}$/.test(value2.replace(/\D/g, "")) || validationErrorMessage;
10291
- }
10382
+ onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
10383
+ validate: (value) => {
10384
+ const isEmpty = value.replace(/[^\d]/g, "").length === 0;
10385
+ if (!required && isEmpty) return true;
10386
+ return /^\d{8}$/.test(value.replace(/\D/g, "")) || validationErrorMessage;
10292
10387
  }
10293
10388
  }
10294
10389
  );
@@ -10345,8 +10440,8 @@ function StateFormField({
10345
10440
  }
10346
10441
 
10347
10442
  // src/components/FormFields/AddressFormFields/CityFormField.tsx
10348
- var import_react17 = require("react");
10349
- var import_react_hook_form9 = require("react-hook-form");
10443
+ var import_react18 = require("react");
10444
+ var import_react_hook_form7 = require("react-hook-form");
10350
10445
  var import_jsx_runtime45 = require("react/jsx-runtime");
10351
10446
  function CityFormField({
10352
10447
  name,
@@ -10356,11 +10451,11 @@ function CityFormField({
10356
10451
  isBrazil,
10357
10452
  placeholder
10358
10453
  }) {
10359
- const { control, watch } = (0, import_react_hook_form9.useFormContext)();
10454
+ const { control, watch } = (0, import_react_hook_form7.useFormContext)();
10360
10455
  const selectedState = watch(stateName);
10361
- const [cities, setCities] = (0, import_react17.useState)([]);
10362
- const [loading, setLoading] = (0, import_react17.useState)(false);
10363
- (0, import_react17.useEffect)(() => {
10456
+ const [cities, setCities] = (0, import_react18.useState)([]);
10457
+ const [loading, setLoading] = (0, import_react18.useState)(false);
10458
+ (0, import_react18.useEffect)(() => {
10364
10459
  if (!isBrazil) {
10365
10460
  setCities([]);
10366
10461
  return;
@@ -10400,7 +10495,7 @@ function CityFormField({
10400
10495
  fetchCities();
10401
10496
  }, [selectedState, isBrazil]);
10402
10497
  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: isBrazil && cities.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
10403
- import_react_hook_form9.Controller,
10498
+ import_react_hook_form7.Controller,
10404
10499
  {
10405
10500
  name,
10406
10501
  control,
@@ -10460,28 +10555,27 @@ function AddressFormFields({
10460
10555
  required,
10461
10556
  layout = "column"
10462
10557
  }) {
10463
- const { control, setValue } = (0, import_react_hook_form10.useFormContext)();
10464
- const { errors } = (0, import_react_hook_form10.useFormState)({ control });
10465
- const selectedCountry = (0, import_react_hook_form10.useWatch)({ control, name: `${name}.country` });
10466
- const cep = (0, import_react_hook_form10.useWatch)({ control, name: `${name}.zip_code` });
10558
+ const { control, setValue } = (0, import_react_hook_form8.useFormContext)();
10559
+ const { errors } = (0, import_react_hook_form8.useFormState)({ control });
10560
+ const selectedCountry = (0, import_react_hook_form8.useWatch)({ control, name: `${name}.country` });
10467
10561
  const isBrazil = selectedCountry === "Brasil";
10468
10562
  const addressErrors = getNestedValue2(errors, name);
10469
10563
  const haveError = !!addressErrors;
10470
- (0, import_react18.useEffect)(() => {
10564
+ const handleCEPChange = (cep) => {
10565
+ if (!isBrazil) return;
10471
10566
  const cleanedCep = cep == null ? void 0 : cep.replace(/\D/g, "");
10472
- if (isBrazil && (cleanedCep == null ? void 0 : cleanedCep.length) === 8) {
10473
- fetch(`https://viacep.com.br/ws/${cleanedCep}/json`).then((res) => res.json()).then((data) => {
10474
- if (!data.erro) {
10475
- setValue(`${name}.street`, data.logradouro || "");
10476
- setValue(`${name}.neighborhood`, data.bairro || "");
10477
- setValue(`${name}.city`, data.localidade || "");
10478
- setValue(`${name}.state`, data.uf || "");
10479
- }
10480
- }).catch(() => {
10481
- console.error("Erro ao buscar CEP");
10482
- });
10483
- }
10484
- }, [cep, isBrazil]);
10567
+ if ((cleanedCep == null ? void 0 : cleanedCep.length) !== 8) return;
10568
+ fetch(`https://viacep.com.br/ws/${cleanedCep}/json`).then((res) => res.json()).then((data) => {
10569
+ if (!data.erro) {
10570
+ setValue(`${name}.street`, data.logradouro || "");
10571
+ setValue(`${name}.neighborhood`, data.bairro || "");
10572
+ setValue(`${name}.city`, data.localidade || "");
10573
+ setValue(`${name}.state`, data.uf || "");
10574
+ }
10575
+ }).catch(() => {
10576
+ console.error("Erro ao buscar CEP");
10577
+ });
10578
+ };
10485
10579
  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AddressContainerStyled, { layout, children: [
10486
10580
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
10487
10581
  FormLabel,
@@ -10508,7 +10602,8 @@ function AddressFormFields({
10508
10602
  label: "CEP",
10509
10603
  required,
10510
10604
  placeholder: "00000-000",
10511
- validationErrorMessage: "CEP inv\xE1lido"
10605
+ validationErrorMessage: "CEP inv\xE1lido",
10606
+ onChange: handleCEPChange
10512
10607
  }
10513
10608
  ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
10514
10609
  TextFormField,
@@ -10559,7 +10654,7 @@ function AddressFormFields({
10559
10654
  }
10560
10655
 
10561
10656
  // src/components/FormFields/RadioGroupFormField.tsx
10562
- var import_react_hook_form11 = require("react-hook-form");
10657
+ var import_react_hook_form9 = require("react-hook-form");
10563
10658
  var import_jsx_runtime47 = require("react/jsx-runtime");
10564
10659
  var RadioGroupFormField = ({
10565
10660
  name,
@@ -10575,7 +10670,7 @@ var RadioGroupFormField = ({
10575
10670
  const {
10576
10671
  control,
10577
10672
  formState: { errors }
10578
- } = (0, import_react_hook_form11.useFormContext)();
10673
+ } = (0, import_react_hook_form9.useFormContext)();
10579
10674
  const fieldError = getNestedValue(errors, name);
10580
10675
  const haveError = !!fieldError;
10581
10676
  const errorMsg = fieldError == null ? void 0 : fieldError.message;
@@ -10593,7 +10688,7 @@ var RadioGroupFormField = ({
10593
10688
  }
10594
10689
  ),
10595
10690
  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
10596
- import_react_hook_form11.Controller,
10691
+ import_react_hook_form9.Controller,
10597
10692
  {
10598
10693
  name,
10599
10694
  control,
@@ -10620,7 +10715,7 @@ var RadioGroupFormField = ({
10620
10715
  };
10621
10716
 
10622
10717
  // src/components/FormFields/CheckboxGroupFormField.tsx
10623
- var import_react_hook_form12 = require("react-hook-form");
10718
+ var import_react_hook_form10 = require("react-hook-form");
10624
10719
  var import_jsx_runtime48 = require("react/jsx-runtime");
10625
10720
  var CheckboxGroupFormField = ({
10626
10721
  name,
@@ -10636,7 +10731,7 @@ var CheckboxGroupFormField = ({
10636
10731
  const {
10637
10732
  control,
10638
10733
  formState: { errors }
10639
- } = (0, import_react_hook_form12.useFormContext)();
10734
+ } = (0, import_react_hook_form10.useFormContext)();
10640
10735
  const fieldError = getNestedValue(errors, name);
10641
10736
  const haveError = !!fieldError;
10642
10737
  const errorMsg = fieldError == null ? void 0 : fieldError.message;
@@ -10655,7 +10750,7 @@ var CheckboxGroupFormField = ({
10655
10750
  }
10656
10751
  ),
10657
10752
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
10658
- import_react_hook_form12.Controller,
10753
+ import_react_hook_form10.Controller,
10659
10754
  {
10660
10755
  name,
10661
10756
  control,