@lets-events/react 11.0.6 → 11.2.0

package/dist/index.d.ts

@@ -5,13 +5,14 @@ import PropTypes from 'prop-types';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import * as react from 'react';
-import react__default, { ComponentProps, ElementType, ReactNode } from 'react';
+import react__default, { ComponentProps, ElementType, ReactNode, JSX } from 'react';
 import * as _radix_ui_themes from '@radix-ui/themes';
 import { TextField as TextField$1, RadioGroup as RadioGroup$1, CheckboxGroup as CheckboxGroup$1, DropdownMenu as DropdownMenu$1, AlertDialog, Switch as Switch$1 } from '@radix-ui/themes';
 import { Colors } from '@lets-events/tokens';
 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, UseFormProps, SubmitHandler, FieldValues } from 'react-hook-form';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -11019,9 +11020,379 @@ declare const TextareaFieldStyle: _stitches_react_types_styled_component.StyledC
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type TextareaFieldProps = ComponentProps<typeof TextareaFieldStyle> & {
-    limit: number;
-};
+declare const TextareaContainer: _stitches_react_types_styled_component.StyledComponent<"div", {
+    color?: "default" | "error" | undefined;
+}, {}, _stitches_react_types_css_util.CSS<{}, {
+    colors: {
+        brand50: string;
+        brand100: string;
+        brand200: string;
+        brand300: string;
+        brand400: string;
+        brand500: string;
+        brand600: string;
+        brand700: string;
+        brand800: string;
+        brand900: string;
+        brand950: string;
+        blue50: string;
+        blue100: string;
+        blue200: string;
+        blue300: string;
+        blue400: string;
+        blue500: string;
+        blue600: string;
+        blue700: string;
+        blue800: string;
+        blue900: string;
+        blue950: string;
+        red50: string;
+        red100: string;
+        red200: string;
+        red300: string;
+        red400: string;
+        red500: string;
+        red600: string;
+        red700: string;
+        red800: string;
+        red900: string;
+        red950: string;
+        purple50: string;
+        purple100: string;
+        purple200: string;
+        purple300: string;
+        purple400: string;
+        purple500: string;
+        purple600: string;
+        purple700: string;
+        purple800: string;
+        purple900: string;
+        purple950: string;
+        yellow50: string;
+        yellow100: string;
+        yellow200: string;
+        yellow300: string;
+        yellow400: string;
+        yellow500: string;
+        yellow600: string;
+        yellow700: string;
+        yellow800: string;
+        yellow900: string;
+        yellow950: string;
+        dark50: string;
+        dark100: string;
+        dark200: string;
+        dark300: string;
+        dark400: string;
+        dark500: string;
+        dark600: string;
+        dark700: string;
+        dark800: string;
+        dark900: string;
+        dark950: string;
+        neutral50: string;
+        neutral100: string;
+        neutral200: string;
+        neutral300: string;
+        neutral400: string;
+        neutral500: string;
+        neutral600: string;
+        neutral700: string;
+        neutral800: string;
+        neutral900: string;
+        neutral950: string;
+        green50: string;
+        green100: string;
+        green200: string;
+        green300: string;
+        green400: string;
+        green500: string;
+        green600: string;
+        green700: string;
+        green800: string;
+        green900: string;
+        green950: string;
+        grey50: string;
+        grey100: string;
+        grey200: string;
+        grey300: string;
+        grey400: string;
+        grey500: string;
+        grey600: string;
+        grey700: string;
+        grey800: string;
+        grey900: string;
+        grey950: string;
+        error50: string;
+        error100: string;
+        error200: string;
+        error300: string;
+        error400: string;
+        error500: string;
+        error600: string;
+        error700: string;
+        error800: string;
+        error900: string;
+        error950: string;
+        success50: string;
+        success100: string;
+        success200: string;
+        success300: string;
+        success400: string;
+        success500: string;
+        success600: string;
+        success700: string;
+        success800: string;
+        success900: string;
+        success950: string;
+        warning50: string;
+        warning100: string;
+        warning200: string;
+        warning300: string;
+        warning400: string;
+        warning500: string;
+        warning600: string;
+        warning700: string;
+        warning800: string;
+        warning900: string;
+        warning950: string;
+        info50: string;
+        info100: string;
+        info200: string;
+        info300: string;
+        info400: string;
+        info500: string;
+        info600: string;
+        info700: string;
+        info800: string;
+        info900: string;
+        info950: string;
+    };
+    fontSizes: {
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        13: string;
+        14: string;
+        16: string;
+        18: string;
+        20: string;
+        22: string;
+        24: string;
+        32: string;
+        36: string;
+        40: string;
+        48: string;
+        56: string;
+        64: string;
+        72: string;
+        80: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        full: string;
+    };
+    fonts: {
+        default: string;
+    };
+    fontWeights: {
+        regular: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    lineHeights: {
+        smaller: string;
+        shorter: string;
+        short: string;
+        base: string;
+        tall: string;
+    };
+    radii: {
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
+        '11xl': string;
+        '12xl': string;
+        '13xl': string;
+        '14xl': string;
+        full: string;
+    };
+    space: {
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        13: string;
+        14: string;
+        16: string;
+        18: string;
+        20: string;
+        22: string;
+        24: string;
+        32: string;
+        36: string;
+        40: string;
+        48: string;
+        56: string;
+        64: string;
+        72: string;
+        80: string;
+        full: string;
+    };
+}, {
+    height: "space";
+    width: "space";
+    gap: "space";
+    gridGap: "space";
+    columnGap: "space";
+    gridColumnGap: "space";
+    rowGap: "space";
+    gridRowGap: "space";
+    inset: "space";
+    insetBlock: "space";
+    insetBlockEnd: "space";
+    insetBlockStart: "space";
+    insetInline: "space";
+    insetInlineEnd: "space";
+    insetInlineStart: "space";
+    margin: "space";
+    marginTop: "space";
+    marginRight: "space";
+    marginBottom: "space";
+    marginLeft: "space";
+    marginBlock: "space";
+    marginBlockEnd: "space";
+    marginBlockStart: "space";
+    marginInline: "space";
+    marginInlineEnd: "space";
+    marginInlineStart: "space";
+    padding: "space";
+    paddingTop: "space";
+    paddingRight: "space";
+    paddingBottom: "space";
+    paddingLeft: "space";
+    paddingBlock: "space";
+    paddingBlockEnd: "space";
+    paddingBlockStart: "space";
+    paddingInline: "space";
+    paddingInlineEnd: "space";
+    paddingInlineStart: "space";
+    scrollMargin: "space";
+    scrollMarginTop: "space";
+    scrollMarginRight: "space";
+    scrollMarginBottom: "space";
+    scrollMarginLeft: "space";
+    scrollMarginBlock: "space";
+    scrollMarginBlockEnd: "space";
+    scrollMarginBlockStart: "space";
+    scrollMarginInline: "space";
+    scrollMarginInlineEnd: "space";
+    scrollMarginInlineStart: "space";
+    scrollPadding: "space";
+    scrollPaddingTop: "space";
+    scrollPaddingRight: "space";
+    scrollPaddingBottom: "space";
+    scrollPaddingLeft: "space";
+    scrollPaddingBlock: "space";
+    scrollPaddingBlockEnd: "space";
+    scrollPaddingBlockStart: "space";
+    scrollPaddingInline: "space";
+    scrollPaddingInlineEnd: "space";
+    scrollPaddingInlineStart: "space";
+    top: "space";
+    right: "space";
+    bottom: "space";
+    left: "space";
+    fontSize: "fontSizes";
+    background: "colors";
+    backgroundColor: "colors";
+    backgroundImage: "colors";
+    borderImage: "colors";
+    border: "colors";
+    borderBlock: "colors";
+    borderBlockEnd: "colors";
+    borderBlockStart: "colors";
+    borderBottom: "colors";
+    borderBottomColor: "colors";
+    borderColor: "colors";
+    borderInline: "colors";
+    borderInlineEnd: "colors";
+    borderInlineStart: "colors";
+    borderLeft: "colors";
+    borderLeftColor: "colors";
+    borderRight: "colors";
+    borderRightColor: "colors";
+    borderTop: "colors";
+    borderTopColor: "colors";
+    caretColor: "colors";
+    color: "colors";
+    columnRuleColor: "colors";
+    outline: "colors";
+    outlineColor: "colors";
+    fill: "colors";
+    stroke: "colors";
+    textDecorationColor: "colors";
+    fontFamily: "fonts";
+    fontWeight: "fontWeights";
+    lineHeight: "lineHeights";
+    letterSpacing: "letterSpacings";
+    blockSize: "sizes";
+    minBlockSize: "sizes";
+    maxBlockSize: "sizes";
+    inlineSize: "sizes";
+    minInlineSize: "sizes";
+    maxInlineSize: "sizes";
+    minWidth: "sizes";
+    maxWidth: "sizes";
+    minHeight: "sizes";
+    maxHeight: "sizes";
+    flexBasis: "sizes";
+    gridTemplateColumns: "sizes";
+    gridTemplateRows: "sizes";
+    borderWidth: "borderWidths";
+    borderTopWidth: "borderWidths";
+    borderLeftWidth: "borderWidths";
+    borderRightWidth: "borderWidths";
+    borderBottomWidth: "borderWidths";
+    borderStyle: "borderStyles";
+    borderTopStyle: "borderStyles";
+    borderLeftStyle: "borderStyles";
+    borderRightStyle: "borderStyles";
+    borderBottomStyle: "borderStyles";
+    borderRadius: "radii";
+    borderTopLeftRadius: "radii";
+    borderTopRightRadius: "radii";
+    borderBottomRightRadius: "radii";
+    borderBottomLeftRadius: "radii";
+    boxShadow: "shadows";
+    textShadow: "shadows";
+    transition: "transitions";
+    zIndex: "zIndices";
+}, {}>>;
+type TextareaFieldProps = Omit<ComponentProps<typeof TextareaFieldStyle>, "color"> & ComponentProps<typeof TextareaContainer>;
 declare const TextareaField: react__default.ForwardRefExoticComponent<Omit<TextareaFieldProps, "ref"> & react__default.RefAttributes<HTMLTextAreaElement>>;
 
 type ToastType = 'success' | 'error' | 'warning' | 'info';
@@ -12980,4 +13351,39 @@ type SectionProps = ComponentProps<typeof SectionStyled> & {
 };
 declare function Section({ children, ...props }: SectionProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Grid, type GridProps, GridStyled, Icon, InputStyled, Modal, type ModalProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, 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, maskFormat, maskUnformat, useToast };
+type ErrorFormMessageProps = {
+    message?: string | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
+};
+declare const ErrorFormMessage: ({ message }: ErrorFormMessageProps) => react_jsx_runtime.JSX.Element | null;
+
+type FormLabelProps = {
+    name: string;
+    label?: string;
+    haveError?: boolean;
+    required?: boolean;
+};
+declare const FormLabel: ({ name, label, haveError, required, }: FormLabelProps) => react_jsx_runtime.JSX.Element | null;
+
+type TextAreaFormFieldProps = {
+    name: string;
+    label?: string;
+    required?: boolean;
+    placeholder?: string;
+};
+declare const TextAreaFormField: ({ name, label, required, placeholder, }: TextAreaFormFieldProps) => react_jsx_runtime.JSX.Element;
+
+type TextFormFieldProps = {
+    name: string;
+    label?: string;
+    required?: boolean;
+    placeholder?: string;
+};
+declare const TextFormField: ({ name, label, required, placeholder, }: TextFormFieldProps) => react_jsx_runtime.JSX.Element;
+
+type FormProps = UseFormProps & {
+    onSubmit: SubmitHandler<FieldValues>;
+    children: JSX.Element;
+};
+declare const Form: ({ onSubmit, children, ...props }: FormProps) => react_jsx_runtime.JSX.Element;
+
+export { Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, 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, InputStyled, Modal, type ModalProps, RadioGroup, 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, maskFormat, maskUnformat, useToast };

package/dist/index.js

@@ -1039,10 +1039,13 @@ __export(index_exports, {
   ContainerStyled: () => ContainerStyled,
   DropdownMenu: () => DropdownMenu2,
   DropdownMenuItem: () => DropdownMenuItem,
+  ErrorFormMessage: () => ErrorFormMessage,
   Filter: () => Filter,
   FilterItem: () => FilterItem,
   Flex: () => Flex2,
   FlexStyled: () => FlexStyled,
+  Form: () => Form,
+  FormLabel: () => FormLabel,
   Grid: () => Grid,
   GridStyled: () => GridStyled,
   Icon: () => Icon,
@@ -1062,10 +1065,12 @@ __export(index_exports, {
   Switch: () => Switch,
   SwitchStyled: () => SwitchStyled,
   Text: () => Text,
+  TextAreaFormField: () => TextAreaFormField,
   TextField: () => TextField,
   TextFieldSlot: () => TextFieldSlot,
   TextFieldSlotStyled: () => TextFieldSlotStyled,
   TextFieldStyled: () => TextFieldStyled,
+  TextFormField: () => TextFormField,
   TextStyle: () => TextStyle,
   TextareaField: () => TextareaField,
   TextareaFieldStyle: () => TextareaFieldStyle,
@@ -2623,14 +2628,14 @@ var TextFieldStyled = styled(import_themes7.TextField.Root, {
     color: {
       default: {
         color: "$dark400",
-        border: "1px solid $dark200",
+        border: "1px solid $dark300",
         "&:has(input:focus)": {
           border: "2px solid $brand300"
         },
         "&:has(input:disabled)": {
           backgroundColor: "$dark100",
           color: "$dark400",
-          border: "1px solid $dark200",
+          border: "1px solid $dark300",
           cursor: "not-allowed"
         }
       },
@@ -8782,7 +8787,6 @@ var TextareaContainer = styled("div", {
   overflow: "hidden",
   width: "100%",
   border: "1px solid",
-  borderColor: "$dark300",
   borderRadius: "$sm",
   "&:has(textarea:focus)": {
     border: "1px solid $brand300"
@@ -8792,6 +8796,19 @@ var TextareaContainer = styled("div", {
     color: "$dark400",
     border: "1px solid $dark200",
     cursor: "not-allowed"
+  },
+  variants: {
+    color: {
+      default: {
+        borderColor: "$dark300"
+      },
+      error: {
+        borderColor: "$error400"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "default"
   }
 });
 var TextareaLimitIndicator = styled("div", {
@@ -8809,7 +8826,7 @@ var TextareaLimitIndicator = styled("div", {
   }
 });
 var TextareaField = import_react8.default.forwardRef((_a, fowardedRef) => {
-  var _b = _a, { maxLength } = _b, props = __objRest(_b, ["maxLength"]);
+  var _b = _a, { maxLength, color } = _b, props = __objRest(_b, ["maxLength", "color"]);
   const inputRef = (0, import_react8.useRef)(null);
   const badgeRef = (0, import_react8.useRef)(null);
   const updateCharCountBadge = () => {
@@ -8823,7 +8840,7 @@ var TextareaField = import_react8.default.forwardRef((_a, fowardedRef) => {
     updateCharCountBadge();
     (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TextareaContainer, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TextareaContainer, { color, children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       TextareaFieldStyle,
       __spreadValues({
@@ -9297,6 +9314,131 @@ function Section(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
+
+// src/components/FormFields/ErrorFormMessage.tsx
+var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
+var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var ErrorFormMessage = ({ message: message2 }) => {
+  if (!message2) return null;
+  if (typeof message2 !== "string") {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Flex2, { justify: "start", align: "center", gap: 6, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_fontawesome2.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faXmarkCircle, color: colors.error600, size: "1x" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "bodyXS", fontWeight: "medium", color: "error600", children: message2 })
+  ] });
+};
+
+// src/components/FormFields/FormLabel.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var FormLabel = ({
+  name,
+  label,
+  haveError,
+  required
+}) => {
+  if (!label) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    Text,
+    {
+      typography: "labelMedium",
+      fontWeight: "medium",
+      color: haveError ? "error600" : "dark700",
+      id: `${name}-label`,
+      children: [
+        label,
+        !required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { color: "dark500", children: " (opcional)" })
+      ]
+    }
+  );
+};
+
+// src/components/FormFields/TextAreaFormField.tsx
+var import_react_hook_form = require("react-hook-form");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var TextAreaFormField = ({
+  name,
+  label,
+  required,
+  placeholder
+}) => {
+  var _a;
+  const {
+    register,
+    formState: { errors }
+  } = (0, import_react_hook_form.useFormContext)();
+  const haveError = !!errors[name];
+  const errorMsg = (_a = errors[name]) == null ? void 0 : _a.message;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex2, { direction: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      FormLabel,
+      {
+        name,
+        label,
+        required,
+        haveError
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      TextareaField,
+      __spreadProps(__spreadValues({}, register(name, { required })), {
+        placeholder,
+        color: haveError ? "error" : "default",
+        "aria-labelledby": `${name}-label`
+      })
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ErrorFormMessage, { message: errorMsg })
+  ] });
+};
+
+// src/components/FormFields/TextFormField.tsx
+var import_react_hook_form2 = require("react-hook-form");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var TextFormField = ({
+  name,
+  label,
+  required,
+  placeholder
+}) => {
+  var _a;
+  const {
+    register,
+    formState: { errors }
+  } = (0, import_react_hook_form2.useFormContext)();
+  const haveError = !!errors[name];
+  const errorMsg = (_a = errors[name]) == null ? void 0 : _a.message;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex2, { direction: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      FormLabel,
+      {
+        name,
+        label,
+        required,
+        haveError
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      TextField,
+      __spreadProps(__spreadValues({}, register(name, { required })), {
+        placeholder,
+        color: haveError ? "error" : "default",
+        "aria-labelledby": `${name}-label`
+      })
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ErrorFormMessage, { message: errorMsg })
+  ] });
+};
+
+// src/components/FormFields/Form.tsx
+var import_react_hook_form3 = require("react-hook-form");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Form = (_a) => {
+  var _b = _a, { onSubmit, children } = _b, props = __objRest(_b, ["onSubmit", "children"]);
+  const methods = (0, import_react_hook_form3.useForm)(props);
+  const { handleSubmit } = methods;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_hook_form3.FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("form", { onSubmit: handleSubmit(onSubmit), children }) }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -9327,10 +9469,13 @@ function Section(_a) {
   ContainerStyled,
   DropdownMenu,
   DropdownMenuItem,
+  ErrorFormMessage,
   Filter,
   FilterItem,
   Flex,
   FlexStyled,
+  Form,
+  FormLabel,
   Grid,
   GridStyled,
   Icon,
@@ -9350,10 +9495,12 @@ function Section(_a) {
   Switch,
   SwitchStyled,
   Text,
+  TextAreaFormField,
   TextField,
   TextFieldSlot,
   TextFieldSlotStyled,
   TextFieldStyled,
+  TextFormField,
   TextStyle,
   TextareaField,
   TextareaFieldStyle,