@ttoss/forms 0.25.6 → 0.26.1

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-6U527R3X.js";
+export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };

package/dist/index.d.ts

@@ -0,0 +1,107 @@
+export { yupResolver } from '@hookform/resolvers/yup';
+import './typings.d-HZBqJJjn.js';
+import * as yup from 'yup';
+export { yup };
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
+import { FieldValues, FormProviderProps, FieldName, FieldPath, UseControllerReturn, FieldPathValue } from 'react-hook-form';
+export * from 'react-hook-form';
+export { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
+import { F as FormFieldPatternFormatProps } from './FormFieldPatternFormat-CkcL14ho.js';
+export { a as FormFieldPatternFormat } from './FormFieldPatternFormat-CkcL14ho.js';
+import { NumericFormatProps } from 'react-number-format';
+
+declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
+    children?: React.ReactNode;
+    onSubmit?: (data: TFieldValues) => Promise<void> | void;
+    sx?: BoxProps["sx"];
+} & FormProviderProps<TFieldValues>) => react_jsx_runtime.JSX.Element;
+
+declare const FormErrorMessage: <TFieldValues extends FieldValues = FieldValues>({ name, disabled, }: {
+    name: FieldName<TFieldValues>;
+    disabled?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+
+type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    label?: string;
+    id?: string;
+    name: TName;
+    defaultValue?: FieldPathValue<TFieldValues, TName>;
+    disabled?: boolean;
+    tooltip?: boolean;
+    onTooltipClick?: () => void;
+} & SxProp;
+type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
+} & FormFieldProps<TFieldValues, TName>;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled, tooltip, onTooltipClick, sx, css, render, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, sx, ...checkboxProps }: {
+    label?: string;
+    name: FieldPath<TFieldValues>;
+} & CheckboxProps) => react_jsx_runtime.JSX.Element;
+
+type FormFieldCreditCardNumberProps = {
+    label: string;
+    name: string;
+} & Partial<FormFieldPatternFormatProps>;
+declare const FormFieldCreditCardNumber: ({ label, name, ...formFieldPatternFormatProps }: FormFieldCreditCardNumberProps) => react_jsx_runtime.JSX.Element;
+
+type FormFieldNumericFormatProps = {
+    label?: string;
+    name: string;
+} & NumericFormatProps;
+declare const FormFieldNumericFormat: ({ label, name, ...numericFormatProps }: FormFieldNumericFormatProps) => react_jsx_runtime.JSX.Element;
+
+type FormFieldCurrencyInputProps = {
+    label?: string;
+    name: string;
+    prefix: string;
+    decimalSeparator: string;
+    thousandSeparator: string;
+} & FormFieldNumericFormatProps;
+declare const FormFieldCurrencyInput: ({ label, name, prefix, decimalSeparator, thousandSeparator, ...formFieldNumericFormatProps }: FormFieldCurrencyInputProps) => react_jsx_runtime.JSX.Element;
+
+type FormFieldInputProps<TName> = {
+    label?: string;
+    name: TName;
+} & InputProps & FormFieldProps;
+declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, sx, defaultValue, ...inputProps }: FormFieldInputProps<TName>) => react_jsx_runtime.JSX.Element;
+
+type FormFieldPasswordProps<TName> = {
+    label?: string;
+    name: TName;
+} & InputPasswordProps & FormFieldProps;
+declare const FormFieldPassword: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, sx, defaultValue, ...inputProps }: FormFieldPasswordProps<TName>) => react_jsx_runtime.JSX.Element;
+
+type FormRadioOption = {
+    value: string | number;
+    label: string;
+};
+declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, sx, ...radioProps }: {
+    label?: string;
+    name: FieldPath<TFieldValues>;
+    options: FormRadioOption[];
+} & RadioProps) => react_jsx_runtime.JSX.Element;
+
+type FormFieldSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<SelectProps, 'defaultValue'> & FormFieldProps<TFieldValues, TName>;
+declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, id, defaultValue, sx, css, disabled, tooltip, onTooltipClick, ...selectProps }: FormFieldSelectProps<TFieldValues>) => react_jsx_runtime.JSX.Element;
+
+declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, ...textareaProps }: {
+    label?: string;
+    name: TName;
+} & TextareaProps) => react_jsx_runtime.JSX.Element;
+
+declare const useFormGroup: () => {
+    level: number | undefined;
+    levelsLength: number;
+};
+type FormGroupProps = {
+    name?: string;
+    title?: string;
+    direction?: 'column' | 'row';
+} & BoxProps;
+declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
+
+export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/{src/yup/typings.d.ts → dist/typings.d-HZBqJJjn.d.ts}

@@ -1,4 +1,4 @@
-import { AnyObject, Flags, Maybe, Schema } from 'yup';
+import { Maybe, AnyObject, Flags, Schema } from 'yup';
 
 declare module 'yup' {
   interface StringSchema<
@@ -10,5 +10,3 @@ declare module 'yup' {
     cnpj(): this;
   }
 }
-
-export {};

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.25.6",
+  "version": "0.26.1",
+  "license": "MIT",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
@@ -26,8 +27,7 @@
     }
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "sideEffects": true,
   "dependencies": {
@@ -39,8 +39,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^2.0.2",
-    "@ttoss/ui": "^5.0.6"
+    "@ttoss/react-i18n": "^2.0.4",
+    "@ttoss/ui": "^5.0.8"
   },
   "devDependencies": {
     "@types/jest": "^29.5.13",
@@ -50,12 +50,12 @@
     "react-error-boundary": "^4.0.13",
     "tsup": "^8.3.0",
     "yup": "^1.4.0",
-    "@ttoss/i18n-cli": "^0.7.20",
-    "@ttoss/config": "^1.33.0",
-    "@ttoss/react-i18n": "^2.0.2",
-    "@ttoss/react-icons": "^0.4.2",
-    "@ttoss/test-utils": "^2.1.15",
-    "@ttoss/ui": "^5.0.6"
+    "@ttoss/config": "^1.34.1",
+    "@ttoss/i18n-cli": "^0.7.22",
+    "@ttoss/react-icons": "^0.4.4",
+    "@ttoss/ui": "^5.0.8",
+    "@ttoss/react-i18n": "^2.0.4",
+    "@ttoss/test-utils": "^2.1.17"
   },
   "publishConfig": {
     "access": "public",

package/src/Brazil/FormFieldCEP.tsx

@@ -1,25 +0,0 @@
-import {
-  FormFieldPatternFormat,
-  FormFieldPatternFormatProps,
-} from '../FormFieldPatternFormat';
-
-export type FormFieldCEPProps = {
-  label: string;
-  name: string;
-} & Partial<FormFieldPatternFormatProps>;
-
-export const FormFieldCEP = ({
-  label,
-  name,
-  ...formFieldPatternFormatProps
-}: FormFieldCEPProps) => {
-  return (
-    <FormFieldPatternFormat
-      name={name}
-      label={label}
-      format="#####-###"
-      placeholder="12345-678"
-      {...formFieldPatternFormatProps}
-    />
-  );
-};

package/src/Brazil/FormFieldCNPJ.tsx

@@ -1,93 +0,0 @@
-import { FormField } from '..';
-import { Input } from '@ttoss/ui';
-import { PatternFormat, PatternFormatProps } from 'react-number-format';
-
-export type FormFieldCNPJProps = {
-  label: string;
-  name: string;
-} & Partial<PatternFormatProps>;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isCnpjValid = (cnpj: any) => {
-  if (cnpj?.length != 14) {
-    return false;
-  }
-
-  if (
-    cnpj == '00000000000000' ||
-    cnpj == '11111111111111' ||
-    cnpj == '22222222222222' ||
-    cnpj == '33333333333333' ||
-    cnpj == '44444444444444' ||
-    cnpj == '55555555555555' ||
-    cnpj == '66666666666666' ||
-    cnpj == '77777777777777' ||
-    cnpj == '88888888888888' ||
-    cnpj == '99999999999999'
-  ) {
-    return false;
-  }
-
-  // Valida DVs
-  let size = cnpj.length - 2;
-  let numbers = cnpj.substring(0, size);
-  const digits = cnpj.substring(size);
-  let soma = 0;
-  let pos = size - 7;
-  for (let i = size; i >= 1; i--) {
-    soma += numbers.charAt(size - i) * pos--;
-    if (pos < 2) {
-      pos = 9;
-    }
-  }
-  let result = soma % 11 < 2 ? 0 : 11 - (soma % 11);
-  if (result != digits.charAt(0)) {
-    return false;
-  }
-
-  size = size + 1;
-  numbers = cnpj.substring(0, size);
-  soma = 0;
-  pos = size - 7;
-  for (let i = size; i >= 1; i--) {
-    soma += numbers.charAt(size - i) * pos--;
-    if (pos < 2) {
-      pos = 9;
-    }
-  }
-  result = soma % 11 < 2 ? 0 : 11 - (soma % 11);
-  if (result != digits.charAt(1)) {
-    return false;
-  }
-
-  return true;
-};
-
-export const FormFieldCNPJ = ({
-  label,
-  name,
-  ...patternFormatProps
-}: FormFieldCNPJProps) => {
-  return (
-    <FormField
-      name={name}
-      label={label}
-      render={({ field }) => {
-        return (
-          <PatternFormat
-            name={field.name}
-            value={field.value}
-            onBlur={field.onBlur}
-            onValueChange={(values) => {
-              field.onChange(values.value);
-            }}
-            format={'##.###.###/####-##'}
-            customInput={Input}
-            placeholder="12.345.678/0000-00"
-            {...patternFormatProps}
-          />
-        );
-      }}
-    />
-  );
-};

package/src/Brazil/FormFieldPhone.tsx

@@ -1,41 +0,0 @@
-import { FormField } from '../FormField';
-import { Input } from '@ttoss/ui';
-
-import { PatternFormat, PatternFormatProps } from 'react-number-format';
-
-export type FormFieldPhoneProps = {
-  label: string;
-  name: string;
-} & Partial<PatternFormatProps>;
-
-export const FormFieldPhone = ({
-  label,
-  name,
-  ...patternFormatProps
-}: FormFieldPhoneProps) => {
-  return (
-    <FormField
-      name={name}
-      label={label}
-      render={({ field }) => {
-        const format =
-          field.value?.length > 10 ? '(##) #####-####' : '(##) ####-#####';
-
-        return (
-          <PatternFormat
-            name={field.name}
-            value={field.value}
-            onBlur={field.onBlur}
-            onValueChange={(values) => {
-              field.onChange(values.value);
-            }}
-            format={format}
-            customInput={Input}
-            placeholder="(11) 91234-1234"
-            {...patternFormatProps}
-          />
-        );
-      }}
-    />
-  );
-};

package/src/Brazil/index.ts

@@ -1,4 +0,0 @@
-export { FormFieldCNPJ } from './FormFieldCNPJ';
-export { FormFieldPhone } from './FormFieldPhone';
-export { FormFieldCEP } from './FormFieldCEP';
-export { isCnpjValid } from './FormFieldCNPJ';

package/src/Form.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { Box, BoxProps } from '@ttoss/ui';
-import { FieldValues, FormProvider, FormProviderProps } from 'react-hook-form';
-
-export const Form = <TFieldValues extends FieldValues = FieldValues>({
-  children,
-  onSubmit,
-  sx,
-  ...formMethods
-}: {
-  children?: React.ReactNode;
-  onSubmit?: (data: TFieldValues) => Promise<void> | void;
-  sx?: BoxProps['sx'];
-} & FormProviderProps<TFieldValues>) => {
-  return (
-    <FormProvider {...formMethods}>
-      <Box
-        as="form"
-        variant="forms.form"
-        onSubmit={formMethods.handleSubmit((data) => {
-          return onSubmit?.(data);
-        })}
-        sx={sx}
-      >
-        {children}
-      </Box>
-    </FormProvider>
-  );
-};

package/src/FormErrorMessage.tsx

@@ -1,60 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ErrorMessage } from '@hookform/error-message';
-import {
-  FieldError,
-  FieldName,
-  FieldValues,
-  useFormContext,
-} from 'react-hook-form';
-import { FormattedMessage, MessageDescriptor } from '@ttoss/react-i18n';
-import { HelpText } from '@ttoss/ui';
-
-type ModifiedDescriptor = MessageDescriptor & { values?: any };
-
-const isMessageDescriptor = (
-  possibleMessageDescriptor: unknown
-): possibleMessageDescriptor is ModifiedDescriptor => {
-  return (
-    possibleMessageDescriptor !== undefined &&
-    (possibleMessageDescriptor as ModifiedDescriptor).defaultMessage !==
-      undefined
-  );
-};
-
-export const FormErrorMessage = <
-  TFieldValues extends FieldValues = FieldValues,
->({
-  name,
-  disabled,
-}: {
-  name: FieldName<TFieldValues>;
-  disabled?: boolean;
-}) => {
-  const {
-    formState: { errors },
-  } = useFormContext<TFieldValues>();
-
-  return (
-    <ErrorMessage
-      name={name as any}
-      errors={errors}
-      render={({ message }: { message: FieldError | string }) => {
-        return (
-          <HelpText negative disabled={disabled}>
-            {(() => {
-              if (typeof message === 'string') {
-                return message;
-              }
-
-              if (isMessageDescriptor(message)) {
-                return <FormattedMessage {...message} />;
-              }
-
-              return JSON.stringify(message);
-            })()}
-          </HelpText>
-        );
-      }}
-    />
-  );
-};

package/src/FormField.tsx

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import {
-  FieldPath,
-  FieldPathValue,
-  FieldValues,
-  UseControllerReturn,
-  useController,
-} from 'react-hook-form';
-import { Flex, Label, type SxProp } from '@ttoss/ui';
-import { FormErrorMessage } from './FormErrorMessage';
-
-export type FormFieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  label?: string;
-  id?: string;
-  name: TName;
-  defaultValue?: FieldPathValue<TFieldValues, TName>;
-  disabled?: boolean;
-  tooltip?: boolean;
-  onTooltipClick?: () => void;
-} & SxProp;
-
-type FormFieldCompleteProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  render: (
-    props: UseControllerReturn<TFieldValues, TName>
-  ) => React.ReactElement;
-} & FormFieldProps<TFieldValues, TName>;
-
-export const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  label,
-  id: idProp,
-  name,
-  defaultValue,
-  disabled,
-  tooltip,
-  onTooltipClick,
-  sx,
-  css,
-  render,
-}: FormFieldCompleteProps<TFieldValues, TName>) => {
-  const controllerReturn = useController<TFieldValues, TName>({
-    name,
-    defaultValue,
-  });
-
-  const id = idProp || `form-field-${name}`;
-
-  const memoizedRender = React.useMemo(() => {
-    return React.Children.map(render(controllerReturn), (child) => {
-      return (
-        <>
-          {label && (
-            <Label
-              aria-disabled={disabled}
-              htmlFor={id}
-              tooltip={tooltip}
-              onTooltipClick={onTooltipClick}
-            >
-              {label}
-            </Label>
-          )}
-
-          {React.createElement(child.type, { id, ...child.props })}
-        </>
-      );
-    });
-  }, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
-
-  return (
-    <Flex
-      sx={{ flexDirection: 'column', width: '100%', gap: 'md', ...sx }}
-      css={css}
-    >
-      {memoizedRender}
-      <FormErrorMessage name={name} />
-    </Flex>
-  );
-};

package/src/FormFieldCheckbox.tsx

@@ -1,49 +0,0 @@
-import { Checkbox, type CheckboxProps, Flex, Label } from '@ttoss/ui';
-import { FieldPath, FieldValues, useController } from 'react-hook-form';
-import { FormErrorMessage } from './FormErrorMessage';
-
-export const FormFieldCheckbox = <
-  TFieldValues extends FieldValues = FieldValues,
->({
-  label,
-  name,
-  sx,
-  ...checkboxProps
-}: {
-  label?: string;
-  name: FieldPath<TFieldValues>;
-} & CheckboxProps) => {
-  const {
-    field: { onChange, onBlur, value, ref },
-    formState: { errors },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } = useController<any>({
-    name,
-    defaultValue: false,
-  });
-
-  const id = `form-field-checkbox-${name}`;
-
-  const error = !!errors[name]?.message;
-
-  return (
-    <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
-      <Flex sx={{ alignItems: 'center' }}>
-        <Label aria-disabled={checkboxProps.disabled} htmlFor={id}>
-          <Checkbox
-            id={id}
-            ref={ref}
-            checked={value}
-            onChange={onChange}
-            onBlur={onBlur}
-            name={name}
-            aria-invalid={error ? 'true' : 'false'}
-            {...checkboxProps}
-          />
-          {label}
-        </Label>
-      </Flex>
-      <FormErrorMessage name={name} />
-    </Flex>
-  );
-};

package/src/FormFieldCreditCardNumber.tsx

@@ -1,25 +0,0 @@
-import {
-  FormFieldPatternFormat,
-  FormFieldPatternFormatProps,
-} from './FormFieldPatternFormat';
-
-export type FormFieldCreditCardNumberProps = {
-  label: string;
-  name: string;
-} & Partial<FormFieldPatternFormatProps>;
-
-export const FormFieldCreditCardNumber = ({
-  label,
-  name,
-  ...formFieldPatternFormatProps
-}: FormFieldCreditCardNumberProps) => {
-  return (
-    <FormFieldPatternFormat
-      name={name}
-      label={label}
-      format="#### #### #### ####"
-      placeholder="1234 1234 1234 1234"
-      {...formFieldPatternFormatProps}
-    />
-  );
-};

package/src/FormFieldCurrencyInput.tsx

@@ -1,36 +0,0 @@
-import {
-  FormFieldNumericFormat,
-  FormFieldNumericFormatProps,
-} from './FormFieldNumericFormat';
-
-export type FormFieldCurrencyInputProps = {
-  label?: string;
-  name: string;
-  prefix: string;
-  decimalSeparator: string;
-  thousandSeparator: string;
-} & FormFieldNumericFormatProps;
-
-export const FormFieldCurrencyInput = ({
-  label,
-  name,
-  prefix,
-  decimalSeparator,
-  thousandSeparator,
-  ...formFieldNumericFormatProps
-}: FormFieldCurrencyInputProps) => {
-  return (
-    <FormFieldNumericFormat
-      name={name}
-      label={label}
-      fixedDecimalScale
-      decimalScale={2}
-      prefix={prefix}
-      decimalSeparator={decimalSeparator}
-      thousandSeparator={thousandSeparator}
-      placeholder={`${prefix} 0${decimalSeparator}00`}
-      allowNegative={false}
-      {...formFieldNumericFormatProps}
-    />
-  );
-};

package/src/FormFieldInput.tsx

@@ -1,43 +0,0 @@
-import { FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
-import { FormField, type FormFieldProps } from './FormField';
-import { Input, type InputProps } from '@ttoss/ui';
-
-export type FormFieldInputProps<TName> = {
-  label?: string;
-  name: TName;
-} & InputProps &
-  FormFieldProps;
-
-export const FormFieldInput = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  label,
-  name,
-  tooltip,
-  onTooltipClick,
-  sx,
-  defaultValue = '',
-  ...inputProps
-}: FormFieldInputProps<TName>) => {
-  return (
-    <FormField
-      name={name}
-      label={label}
-      disabled={inputProps.disabled}
-      tooltip={tooltip}
-      onTooltipClick={onTooltipClick}
-      sx={sx}
-      defaultValue={defaultValue as FieldPathValue<TFieldValues, TName>}
-      render={({ field, fieldState }) => {
-        return (
-          <Input
-            {...inputProps}
-            {...field}
-            aria-invalid={fieldState.error ? 'true' : undefined}
-          />
-        );
-      }}
-    />
-  );
-};