@griddo/ax 1.63.4 → 1.64.1

package/src/components/Fields/Select/style.tsx

@@ -1,35 +1,39 @@
 import styled, { css } from "styled-components";
 import Select from "react-select";
 
-export const StyledSelect = styled(Select)<{ isDisabled: boolean | undefined; error: boolean | undefined, alignRight: boolean | undefined }>`
-  ${(p) => p.theme.textStyle.fieldContent};
-  color: ${(p) => p.theme.color.textHighEmphasis};
-  margin-bottom: ${(p) => p.theme.spacing.xxs};
+export const StyledSelect = styled(Select)<{
+  isDisabled: boolean | undefined;
+  error: boolean | undefined;
+  alignRight: boolean | undefined;
+}>`
+  ${(p) => p.theme.textStyle?.fieldContent};
+  color: ${(p) => p.theme.color?.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing?.xxs};
 
   .react-select__control {
-    background-color: ${(p) => p.theme.color.interactiveBackground};
+    background-color: ${(p) => p.theme.color?.interactiveBackground};
     box-sizing: border-box;
     border-radius: 4px;
-    border-color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.uiLine)};
+    border-color: ${(p) => (p.error ? p.theme.color?.error : p.theme.color?.uiLine)};
     box-shadow: none;
-    height: ${(p) => p.theme.spacing.l};
-    max-width: calc(${(p) => p.theme.spacing.xl} * 6);
+    height: ${(p) => p.theme.spacing?.l};
+    max-width: calc(${(p) => p.theme.spacing?.xl} * 6);
     :hover {
-      border-color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.uiLine)};
+      border-color: ${(p) => (p.error ? p.theme.color?.error : p.theme.color?.uiLine)};
     }
     .react-select__placeholder {
-      color: ${(p) => p.theme.color.textLowEmphasis};
+      color: ${(p) => p.theme.color?.textLowEmphasis};
     }
     .react-select__indicator-separator {
       display: none;
     }
     .react-select__indicator {
-      color: ${(p) => (p.isDisabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
+      color: ${(p) => (p.isDisabled ? p.theme.color?.interactiveDisabled : p.theme.color?.interactive01)};
     }
   }
 
   .react-select__control--is-focused {
-    border-color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.interactive01)} !important;
+    border-color: ${(p) => (p.error ? p.theme.color?.error : p.theme.color?.interactive01)} !important;
   }
 
   .react-select__control--menu-is-open {
@@ -39,61 +43,61 @@ export const StyledSelect = styled(Select)<{ isDisabled: boolean | undefined; er
   }
 
   .react-select__control--is-disabled {
-    border-color: ${(p) => p.theme.color.interactiveDisabled};
+    border-color: ${(p) => p.theme.color?.interactiveDisabled};
   }
 
   .react-select__menu {
     box-shadow: 0px 6px 6px rgba(32, 34, 76, 0.08);
     border-radius: 4px;
-    min-width: calc(${(p) => p.theme.spacing.xl} * 2);
-    max-width: calc(${(p) => p.theme.spacing.xl} * 6);
+    min-width: calc(${(p) => p.theme.spacing?.xl} * 2);
+    max-width: calc(${(p) => p.theme.spacing?.xl} * 6);
     margin-top: 0;
     z-index: 99;
     .react-select__menu-list {
-      max-height: calc(${(p) => p.theme.spacing.l} * 3);
+      max-height: calc(${(p) => p.theme.spacing?.l} * 3);
       overflow: auto;
       padding: 0;
       .react-select__option {
-        background-color: ${(p) => p.theme.color.interactiveBackground};
-        min-height: ${(p) => p.theme.spacing.l};
-        padding: ${(p) => p.theme.spacing.s};
+        background-color: ${(p) => p.theme.color?.interactiveBackground};
+        min-height: ${(p) => p.theme.spacing?.l};
+        padding: ${(p) => p.theme.spacing?.s};
         &:first-child {
-          ${(p) => p.hasEmptyOption &&
+          ${(p) =>
+            p.hasEmptyOption &&
             css`
               font-style: italic;
-              color: ${(p) => p.theme.color.textLowEmphasis};
-              background-color: ${(p) => p.theme.color.uiLineInverse};
-            `
-          }
+              color: ${(p) => p.theme.color?.textLowEmphasis};
+              background-color: ${(p) => p.theme.color?.uiLineInverse};
+            `}
         }
         :hover {
           cursor: pointer;
-          background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+          background-color: ${(p) => p.theme.color?.overlayHoverPrimary};
         }
         :focus {
-          background-color: ${(p) => p.theme.color.overlayFocusPrimary};
-          border: 0.5px solid ${(p) => p.theme.color.interactive02};
+          background-color: ${(p) => p.theme.color?.overlayFocusPrimary};
+          border: 0.5px solid ${(p) => p.theme.color?.interactive02};
         }
         :active {
-          background-color: ${(p) => p.theme.color.overlayPressedPrimary};
+          background-color: ${(p) => p.theme.color?.overlayPressedPrimary};
         }
       }
       .react-select__option--is-selected {
-        color: ${(p) => p.theme.color.textHighEmphasis};
-        background-color: ${(p) => p.theme.color.overlayPressedPrimary};
+        color: ${(p) => p.theme.color?.textHighEmphasis};
+        background-color: ${(p) => p.theme.color?.overlayPressedPrimary};
       }
     }
   }
 
   &.inline {
-    ${(p) => p.theme.textStyle.uiS};
+    ${(p) => p.theme.textStyle?.uiS};
     text-transform: capitalize;
 
     .react-select__control {
       background: transparent;
       border: none;
       height: auto;
-      justify-content: ${(p) => p.alignRight ? "flex-end" : "flex-start"};
+      justify-content: ${(p) => (p.alignRight ? "flex-end" : "flex-start")};
 
       .react-select__value-container {
         flex: 0 1 auto;
@@ -101,15 +105,15 @@ export const StyledSelect = styled(Select)<{ isDisabled: boolean | undefined; er
         .react-select__single-value {
           position: relative;
           transform: none;
-          color: ${(p) => p.theme.color.interactive01};
+          color: ${(p) => p.theme.color?.interactive01};
           overflow: visible;
         }
       }
       .react-select__indicator {
         padding: 0;
         svg {
-          width: ${(p) => p.theme.spacing.s};
-          height: ${(p) => p.theme.spacing.s};
+          width: ${(p) => p.theme.spacing?.s};
+          height: ${(p) => p.theme.spacing?.s};
         }
       }
       .react-select__input {
@@ -122,13 +126,13 @@ export const StyledSelect = styled(Select)<{ isDisabled: boolean | undefined; er
     .react-select__control--is-disabled {
       .react-select__value-container {
         .react-select__single-value {
-          color: ${(p) => p.theme.color.interactiveDisabled};
+          color: ${(p) => p.theme.color?.interactiveDisabled};
         }
       }
     }
 
     .react-select__menu {
-      ${(p) => p.theme.textStyle.fieldContent};
+      ${(p) => p.theme.textStyle?.fieldContent};
     }
   }
 `;

package/src/components/Fields/TagField/index.test.tsx

@@ -0,0 +1,136 @@
+import * as React from "react";
+import TagField from "./index";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../themes/theme.json";
+import { render, screen, within, cleanup, fireEvent } from "@testing-library/react";
+
+afterEach(cleanup);
+
+const props = {
+  value: [],
+  onChange: jest.fn(),
+};
+
+describe("TagField component", () => {
+  test("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TagField {...props} />
+      </ThemeProvider>
+    );
+
+    const tagFieldWrapper = screen.getAllByTestId("tagFieldWrapper");
+    expect(tagFieldWrapper).toBeTruthy();
+    expect(tagFieldWrapper).toHaveLength(1);
+
+    const tagFieldInput = screen.getAllByTestId("tagFieldInput");
+    expect(tagFieldInput).toBeTruthy();
+    expect(tagFieldInput).toHaveLength(1);
+  });
+
+  test("should render the tags if have values", () => {
+    const defaultProps = {
+      value: ["one", "two"],
+      onChange: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TagField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tagFieldWrapper = screen.getByTestId("tagFieldWrapper");
+    expect(tagFieldWrapper).toBeTruthy();
+
+    const tagFieldInput = screen.getByTestId("tagFieldInput");
+    expect(tagFieldInput).toBeTruthy();
+
+    const tagRendered = within(tagFieldWrapper).getAllByTestId("tagComponent");
+    expect(tagRendered).toHaveLength(2);
+
+    const tagComponent = screen.getByTestId("tagFieldWrapper");
+    expect(tagComponent.textContent).toBe("onetwo");
+  });
+});
+
+describe("TagField events", () => {
+  test("should call the value when call onchange", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TagField {...props} />
+      </ThemeProvider>
+    );
+    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tagFieldInput");
+
+    fireEvent.change(tagFieldInput, { target: { value: "test" } });
+    expect(tagFieldInput.value).toBe("test");
+  });
+
+  test("should add new value on keyDown if it's not in array", () => {
+    const onChange = jest.fn();
+    const defaultProps = {
+      value: [],
+      onChange,
+    };
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TagField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tagFieldInput");
+    fireEvent.input(tagFieldInput, { target: { value: "test" } });
+    fireEvent.keyDown(tagFieldInput, { key: "Enter", code: "Enter", charCode: 13 });
+    expect(onChange).toHaveBeenCalledWith(["test"]);
+  });
+  test("shouldn't add new value on keyDown if it's in array", () => {
+    const onChange = jest.fn();
+    const defaultProps = {
+      value: ["test"],
+      onChange,
+    };
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TagField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tagFieldInput");
+    fireEvent.input(tagFieldInput, { target: { value: "test" } });
+    fireEvent.keyDown(tagFieldInput, { key: "Enter", code: "Enter", charCode: 13 });
+    expect(onChange).toBeCalledTimes(0);
+  });
+  test("should delete value from array", () => {
+    const onChange = jest.fn();
+    const defaultProps = {
+      value: ["one", "two"],
+      onChange,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TagField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const tagFieldWrapper = screen.getByTestId("tagFieldWrapper");
+    const tagRendered = within(tagFieldWrapper).getAllByTestId("tagComponent");
+    expect(tagRendered).toHaveLength(2);
+    fireEvent.click(tagRendered[0], 0);
+    expect(onChange).toBeCalledTimes(1);
+  });
+  test("should call the focus function", () => {
+    // we can check if the focus function is been called
+    const useRefSpy = jest.spyOn(React, "useRef").mockReturnValueOnce({ current: { focus: jest.fn() } });
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TagField {...props} />
+      </ThemeProvider>
+    );
+    const tagFieldWrapper = screen.getByTestId("tagFieldWrapper");
+    fireEvent.click(tagFieldWrapper);
+    expect(useRefSpy).toBeCalledTimes(1);
+  });
+});

package/src/components/Fields/TagField/index.tsx

@@ -3,11 +3,9 @@ import { Tag } from "@ax/components";
 
 import * as S from "./style";
 
-const TagField = (props: IProps) => {
+const TagField = (props: IProps): JSX.Element => {
   const { value, onChange } = props;
-
   const valueArray = value && Array.isArray(value) ? value : [];
-
   const [inputValue, setInputValue] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -35,19 +33,17 @@ const TagField = (props: IProps) => {
     onChange(newValue);
   };
 
-  const Tags =
-    valueArray &&
-    valueArray.map((tag: string, index: number) => {
-      const handleDelete = () => deleteTag(index);
-      return <Tag key={tag} text={tag} deleteAction={handleDelete} />;
-    });
-
   const placeholder = valueArray.length > 0 ? "" : "Type a tag...";
 
   return (
-    <S.Wrapper onClick={_handleClick}>
-      {Tags}
+    <S.Wrapper data-testid="tagFieldWrapper" onClick={_handleClick}>
+      {valueArray &&
+        valueArray.map((tag: string, index: number) => {
+          const handleDelete = () => deleteTag(index);
+          return <Tag key={tag} text={tag} onDeleteAction={handleDelete} />;
+        })}
       <S.Input
+        data-testid="tagFieldInput"
         ref={inputRef}
         type="text"
         value={inputValue}

package/src/components/Fields/TextArea/index.test.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import TextArea from "./index";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../themes/theme.json";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+
+afterEach(cleanup);
+
+const props = {
+  name: "",
+  value: "",
+  onChange: jest.fn(),
+};
+
+describe("TextArea component rendering", () => {
+  test("should render the component with no CheckField", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TextArea {...props} />
+      </ThemeProvider>
+    );
+
+    const textAreaComponent = screen.getAllByTestId("textAreaComponent");
+    expect(textAreaComponent).toHaveLength(1);
+  });
+});
+
+describe("TextArea events", () => {
+  test("should call the onChange", () => {
+    const setStateMock = jest.fn();
+    const useStateMock: any = (useState: string) => [useState, setStateMock];
+    jest.spyOn(React, "useState").mockImplementation(useStateMock);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TextArea {...props} />
+      </ThemeProvider>
+    );
+
+    const textAreaComponent = screen.getByTestId("textAreaComponent");
+    expect(textAreaComponent).toBeTruthy();
+    fireEvent.change(textAreaComponent, { target: { value: "test" } });
+    expect(setStateMock).toHaveBeenCalledWith("test");
+  });
+
+  test("should call the onBlur", () => {
+    const handleValidationMock = jest.fn();
+    const defaultProps = {
+      name: "name",
+      value: "value",
+      onChange: jest.fn(),
+      handleValidation: handleValidationMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TextArea {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const textAreaComponent = screen.getByTestId("textAreaComponent");
+
+    expect(textAreaComponent).toBeTruthy();
+    fireEvent.blur(textAreaComponent, { target: { value: "name" } });
+    expect(handleValidationMock).toHaveBeenCalledTimes(1);
+    expect(handleValidationMock).toHaveBeenCalledWith("name");
+  });
+});

package/src/components/Fields/TextArea/index.tsx

@@ -1,21 +1,11 @@
-import React, { memo, useEffect, useRef, useState } from "react";
+import React, { memo, useEffect, useRef } from "react";
 
 import * as S from "./style";
 
 const TextArea = (props: ITextAreaProps): JSX.Element => {
-  const {
-    value,
-    placeholder,
-    error,
-    name,
-    onChange,
-    disabled,
-    handleValidation,
-    editorID,
-    rows = 1
-  } = props;
+  const { value, placeholder, error, name, onChange, disabled, handleValidation, editorID, rows = 1 } = props;
 
-  const [state, setState] = useState<string>(value);
+  const [state, setState] = React.useState<string>(value);
   const timeOutRef = useRef<ReturnType<typeof setTimeout>>();
 
   useEffect(() => {
@@ -45,6 +35,7 @@ const TextArea = (props: ITextAreaProps): JSX.Element => {
 
   return (
     <S.TextArea
+      data-testid="textAreaComponent"
       name={name}
       minRows={rows}
       maxRows={4}

package/src/components/Fields/TextArea/style.tsx

@@ -1,9 +1,9 @@
 import styled from "styled-components";
 import TextareaAutosize from "react-textarea-autosize";
 
-export const TextArea = styled(TextareaAutosize) <{ $error: boolean | undefined }>`
+export const TextArea = styled(TextareaAutosize)<{ $error: boolean | undefined }>`
   ${(p) => p.theme.textStyle.fieldContent};
-  border: 1px solid ${p => (p.$error === true ? p.theme.color.error : p.theme.color.uiLine)};
+  border: 1px solid ${(p) => (p.$error === true ? p.theme.color.error : p.theme.color.uiLine)};
   border-radius: 4px;
   background-color: ${(p) => p.theme.color.uiBackground02};
   color: ${(p) => p.theme.color.textHighEmphasis};

package/src/components/Fields/TextField/index.test.tsx

@@ -0,0 +1,144 @@
+import * as React from "react";
+import TextField from "./index";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../themes/theme.json";
+import { render, screen, within, cleanup, fireEvent } from "@testing-library/react";
+
+afterEach(cleanup);
+
+const defaultProps = {
+  value: "",
+  onChange: jest.fn(),
+};
+
+describe("TextField component rendering", () => {
+  test("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TextField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const textFieldContainer = screen.getByTestId("textFieldContainer");
+    const inputComponent = screen.getByTestId("inputComponent");
+
+    expect(textFieldContainer).toBeTruthy();
+    expect(inputComponent).toBeTruthy();
+  });
+
+  test("should render the component with prefix", () => {
+    const props = {
+      value: "value",
+      onChange: jest.fn(),
+      prefix: "prefix",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TextField {...props} />
+      </ThemeProvider>
+    );
+
+    const textFieldContainer = screen.getByTestId("textFieldContainer");
+    const inputComponent = screen.getByTestId("inputComponent");
+    const prefix = screen.getByTestId("prefix");
+    expect(textFieldContainer).toBeTruthy();
+    expect(inputComponent).toBeTruthy();
+    expect(prefix).toBeTruthy();
+  });
+
+  it("should render the component with backgroundIcon", () => {
+    const props = {
+      value: "value",
+      onChange: jest.fn(),
+      icon: "icon",
+      iconPosition: "in",
+    };
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TextField {...props} />
+      </ThemeProvider>
+    );
+
+    const textFieldContainer = screen.getByTestId("textFieldContainer");
+    const inputComponent = screen.getByTestId("inputComponent");
+    const backgroundIconComponent = screen.getByTestId("backgroundIconComponent");
+
+    expect(textFieldContainer).toBeTruthy();
+    expect(inputComponent).toBeTruthy();
+    expect(backgroundIconComponent).toBeTruthy();
+  });
+
+  it("should render the component with button", () => {
+    const props = {
+      value: "value",
+      onChange: jest.fn(),
+      icon: "icon",
+      iconPosition: "out",
+    };
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TextField {...props} />
+      </ThemeProvider>
+    );
+
+    const textFieldContainer = screen.getByTestId("textFieldContainer");
+    const inputComponent = screen.getByTestId("inputComponent");
+    const iconWrapperComponent = screen.getByTestId("iconWrapperComponent");
+
+    expect(textFieldContainer).toBeTruthy();
+    expect(inputComponent).toBeTruthy();
+    expect(iconWrapperComponent).toBeTruthy();
+  });
+});
+
+describe("onClick from buttons", () => {
+  test("onClickIcon been called in BackgroundIcon", () => {
+    const onClickIconMock = jest.fn();
+    const props = {
+      value: "value",
+      onChange: jest.fn(),
+      icon: "icon",
+      iconPosition: "in",
+      onClickIcon: onClickIconMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TextField {...props} />
+      </ThemeProvider>
+    );
+
+    const backgroundIconComponent = screen.getByTestId("backgroundIconComponent");
+    expect(backgroundIconComponent).toBeTruthy();
+
+    // onClick called with simulate method
+    fireEvent.click(backgroundIconComponent);
+    expect(onClickIconMock).toBeCalledTimes(1);
+  });
+
+  test("onClickIcon been called in BackgroundIcon", () => {
+    const onClickIconMock = jest.fn();
+    const props = {
+      value: "value",
+      onChange: jest.fn(),
+      icon: "icon",
+      iconPosition: "out",
+      onClickIcon: onClickIconMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TextField {...props} />
+      </ThemeProvider>
+    );
+
+    const iconWrapperComponent = screen.getByTestId("iconWrapperComponent");
+    expect(iconWrapperComponent).toBeTruthy();
+    const iconActionComponent = within(iconWrapperComponent).getByTestId("iconActionComponent");
+    expect(iconActionComponent).toBeTruthy();
+    fireEvent.click(iconActionComponent);
+    expect(onClickIconMock).toBeCalledTimes(1);
+  });
+});

package/src/components/Fields/TextField/index.tsx

@@ -66,31 +66,22 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
     handleValidation && handleValidation(newValue, validators);
   };
 
-  const Button = () =>
-    icon && iconPosition === "out" ? (
-      <S.IconWrapper readonly={readonly} error={error}>
-        <IconAction icon={icon} onClick={onClickIcon} disabled={disabled} size="s" />
-      </S.IconWrapper>
-    ) : null;
-
-  const BackgroundIcon = () =>
-    icon && iconPosition === "in" ? (
-      <S.BackgroundIcon onClick={onClickIcon}>
-        <Icon name={icon} size="24" />
-      </S.BackgroundIcon>
-    ) : null;
-
   const hasBackgroundIcon = !!icon && iconPosition === "in";
   const hasButton = !!icon && iconPosition === "out";
 
-  const Prefix = () => (prefix ? <S.Prefix ref={prefixRef}>{prefix}</S.Prefix> : null);
+  const Prefix = () => (
+    <S.Prefix data-testid="prefix" ref={prefixRef}>
+      {prefix}
+    </S.Prefix>
+  );
 
   const inputValue = !autoComplete ? state : value || "";
 
   return (
-    <S.FieldWrapper error={error} className={className}>
-      <Prefix />
+    <S.FieldWrapper data-testid="textFieldContainer" error={error} className={className}>
+      {prefix && <Prefix />}
       <S.Input
+        data-testid="inputComponent"
         type={inputType}
         value={inputValue}
         name={name}
@@ -106,8 +97,21 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
         hasPrefix={!!prefix}
         prefixWidth={width}
       />
-      <BackgroundIcon />
-      <Button />
+      {hasBackgroundIcon && (
+        <S.BackgroundIcon data-testid="backgroundIconComponent" onClick={onClickIcon}>
+          <Icon name={icon || ""} size="24" />
+        </S.BackgroundIcon>
+      )}
+      {hasButton && (
+        <S.IconWrapper data-testid="iconWrapperComponent" readonly={readonly} error={error}>
+          <IconAction            
+            icon={icon || ""}
+            onClick={onClickIcon}
+            disabled={disabled}
+            size="s"
+          />
+        </S.IconWrapper>
+      )}
     </S.FieldWrapper>
   );
 };