contentoh-components-library 21.4.122 → 21.4.124

package/src/components/organisms/Table/styles.js

@@ -1,113 +0,0 @@
-import styled, { css } from "styled-components";
-
-export const Container = styled.div`
-  background: #fff;
-  box-sizing: border-box;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  margin-right: 30px;
-  .checkbox_fixed {
-    left: 0px;
-    position: sticky;
-    z-index: 5;
-  }
-
-  .custom-table {
-    border-collapse: collapse;
-    box-sizing: border-box;
-    width: 100%;
-    & > thead {
-      top: 0;
-      height: 45px;
-      position: sticky;
-      z-index: 5;
-      & > tr {
-        background-color: #f7f7fc;
-        border-radius: 5px 5px 0px 0px;
-        height: 45px;
-      }
-    }
-    & > tbody > tr {
-      height: 70px;
-      &:last-child {
-        border-radius: 0px 0px 5px 5px;
-      }
-    }
-  }
-
-  .custom-table th,
-  .custom-table td {
-    padding: 8px;
-    border: 0;
-  }
-
-  .custom-table th {
-    border-radius: 5px 0 0 5px;
-    border: 0;
-    color: var(--black-main, #262626);
-    font-family: Roboto;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    text-align: left;
-  }
-
-  .custom-table tr {
-    background: var(--white-main, #fff);
-    border-bottom: 1px solid var(--grey-light, #f0f0f0);
-    border-left: 1px solid var(--grey-light, #f0f0f0);
-    border-right: 1px solid var(--grey-light, #f0f0f0);
-    & > td {
-      color: var(--grey-main, #707070);
-      font-family: Roboto;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-    }
-    display: flex;
-    align-items: center;
-    ${({ withCheckbox }) => withCheckbox && `padding-left: 10px;`}
-  }
-`;
-
-export const TH = styled.th`
-  background: inherit;
-  min-height: ${({ height }) => height ?? "auto"};
-  min-width: ${({ width }) => width ?? "auto"};
-  position: sticky;
-  left: 20px;
-  ${({ fixedToLeft, withCheckbox }) =>
-    fixedToLeft >= 0 &&
-    css`
-      left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
-      z-index: 5;
-    `}
-`;
-
-export const TD = styled.td`
-  align-items: center;
-  background: inherit;
-  box-sizing: border-box;
-  display: flex;
-  height: 100%;
-  min-width: ${({ width }) => width ?? "auto"};
-  text-align: center;
-  vertical-align: middle;
-  z-index: 4;
-  position: sticky;
-  left: 20px;
-  .content {
-    white-space: nowrap;
-    overflow: hidden;
-    /* text-overflow: ellipsis; */
-  }
-  ${({ fixedToLeft, withCheckbox }) =>
-    fixedToLeft >= 0 &&
-    css`
-      left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
-      z-index: 5;
-    `}
-`;

package/src/components/organisms/VersionSelectorv2/VersionSelectorv2.stories.js

@@ -1,15 +0,0 @@
-import { VersionSelectorv2 } from "./index";
-
-export default {
-  title: "Components/organisms/VersionSelectorv2",
-  component: VersionSelectorv2,
-};
-
-const Template = (args) => <VersionSelectorv2 {...args} />;
-
-export const VersionSelectorv2Default = Template.bind({});
-VersionSelectorv2Default.args = {
-  articleId: 35707,
-  companyName: "COMPANY DEV",
-  currentVersion: 7,
-};

package/src/components/organisms/VersionSelectorv2/index.js

@@ -1,105 +0,0 @@
-import { Container } from "./styles";
-import axios from "axios";
-import { useEffect, useState } from "react";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { Button } from "../../atoms/GeneralButton";
-import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
-import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
-import { GlobalColors } from "../../../global-files/variables";
-import { FontFamily } from "../../../global-files/variables";
-import { VersionItemv2 } from "../../molecules/VersionItemv2";
-import { CreateVersion } from "../../organisms/CreateVersion";
-import { useCloseModal } from "../../../global-files/customHooks";
-
-export const VersionSelectorv2 = ({
-  modalId,
-  articleId,
-  setVersion,
-  companyName,
-  currentVersion,
-  setShowVersionSelector,
-  jwt,
-}) => {
-  const [versions, setVersions] = useState([]);
-  const [showCreateVersion, setShowCreateVersion] =
-    useCloseModal("create-version");
-  const [reload, setReload] = useState(false);
-
-  const loadProductVersions = async (articleId) => {
-    try {
-      const response = await axios.get(
-        `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
-        {
-          headers: {
-            Authorization: jwt,
-          },
-        }
-      );
-
-      const versionList = JSON.parse(response.data.body).data;
-      setVersions(versionList);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  useEffect(() => {
-    const ac = new AbortController();
-    loadProductVersions(articleId);
-
-    return () => {
-      setVersions([]);
-      setShowCreateVersion(false);
-      return () => ac.abort(); // Abort both fetches on unmount
-    };
-  }, [reload]);
-
-  return (
-    <Container id={modalId}>
-      <div className="versions-header">
-        <ScreenHeader
-          text={"Versiones"}
-          headerType={"input-name-header"}
-          color={GlobalColors.gray}
-          fontFamily={FontFamily.Lato}
-        />
-        <div className="buttons-container">
-          <Button
-            image={addVersion}
-            buttonType={"circular-button"}
-            onClick={() => setShowCreateVersion(true)}
-            id="add-version"
-          />
-          <Button
-            buttonType="general-white-button close-button"
-            onClick={() => setShowVersionSelector(false)}
-            id="close-button"
-          />
-        </div>
-      </div>
-      <div className="versions-container">
-        {versions?.map((item) => (
-          <VersionItemv2
-            key={item.version}
-            version={item.version}
-            articleStatus={item.article_status}
-            currentVersion={item.version === currentVersion}
-            productOwner={companyName}
-            setVersion={setVersion}
-            timestamp={item.timestamp}
-          />
-        ))}
-      </div>
-      {showCreateVersion && (
-        <CreateVersion
-          articleId={articleId}
-          version={currentVersion}
-          versionsList={versions}
-          setShowCreateVersion={setShowCreateVersion}
-          realoadVersion={() => setReload(!reload)}
-          jwt={jwt}
-        />
-      )}
-    </Container>
-  );
-};

package/src/components/organisms/VersionSelectorv2/styles.js

@@ -1,45 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  width: 300px;
-  height: 100%;
-  background-color: ${GlobalColors.white};
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
-  overflow: auto;
-  position: absolute;
-  right: 20px;
-  top: 0;
-  z-index: 500;
-
-  .versions-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 44px;
-    border-radius: 10px 10px 0 0;
-    background: #F9F9F9;
-    padding:5px 10px;
-
-    .buttons-container {
-      display: flex;
-      align-items: center;
-
-      button + * {
-        margin-left: 10px;
-        width: 24px;
-        height: 24px;
-        border: 1px solid ${GlobalColors.magenta_s2};
-        background-size: 12px;
-        padding: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    }
-  }
-  .versions-container{
-    padding:5px 10px;
-  }
-    
-`;

package/src/components/pages/MultipleEdition/MultipleEdition.stories.js

@@ -1,16 +0,0 @@
-import {MultipleEdition} from "./index";
-
-export default {
-  title: "Components/pages/MultipleEdition",
-  component: MultipleEdition,
-};
-const Template = (args) => <MultipleEdition {...args} />;
-
-export const MultipleEditionDefault = Template.bind({});
-
-MultipleEditionDefault.args = {
-  articles: [118471,120898],//[216, 238, 239],
-  versions: [1,1],
-  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmZTVlNWI4YS03N2ZjLTRmNmQtYWY0Yy0yZjVmZmY0ZjQ4ZGUiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImZlNWU1YjhhLTc3ZmMtNGY2ZC1hZjRjLTJmNWZmZjRmNDhkZSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhNDkxNjFjNC0yZTE5LTQ0N2YtYWUwNy1hNTQ3YzU1MTM3NmMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNTk2ODExNywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcwNTk3MTcxNywiaWF0IjoxNzA1OTY4MTE3LCJlbWFpbCI6InJldGFpbGVybWVyY2hhbnRzY29udGVudG9oQGFsbGZyZWVtYWlsLm5ldCJ9.fAOa4nlswhCyYsznuS2YBPGluqd6ok7V_TR1tdu6v9KBbN0Q5AJQZFVVJz2F4P8629_FAPjKybbz0gkv7-YHu0z7dqwDOIyve4Agr8YCgoPJi4Fw4whzcULBI122IejHZqSE6YnA2Ry6VOnxkBOJRetBu6oYwGUxfLJ5s2wTGkxStzA8VTDp9QH9kFNt2AUR7yyjMmzK3QT9E7Hvi60IjfWQbKBQpkn2VKkb2ClfJFi81LeFV5vmH9a8OiK7PyHvW82ascs-n3QuV8HgByR-Sgl8sX9CjZArmPGxeLNxS3MaYkLpx1vieOJaG2hotXyQXkx2eTNJUAYnnT10Ixskfg"
-  //token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJkMzE0ODYyYy02OTYxLTQ5YjktODMwOC1hMDM3Mzg1MjUwYzAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMjQxMTc0MSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcwMjQxNTM0MSwiaWF0IjoxNzAyNDExNzQxLCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.O4Lr5HZLuueNNY1FxqrRBaQZKMgnTXY9IG7KAMkhWO20Dxnfj253sqOme36AbqIAsCQBy77GmnZtTAFs0uF9QBfEDzZXRQ1xcctboGZ9U235LlLdz-BNGoH5QCRXeZsZdXJ1M7yL8IvIdEnXkFC0WYcUMWMRUc6K6vgOvmCCQhzOr-uW-2nsLBGjBb7Tj_okViYvT0Lupo5Z0Z9Xc20oOWnVmrSuaYa1-b4AjOjEOnETA9usnRa6blOVOkHqi5fX8u11ejczINxNBtoizMPOQROuzuuPTvHrl17ae8JkNoxVCJe5ZdfRrUN1lwUXnOZim7QhNg8YR_uvPs_EJRIwfw",
-};

package/src/components/pages/MultipleEdition/index.js

@@ -1,198 +0,0 @@
-import React, { useState, useEffect, useReducer } from "react";
-import { Modal } from "../../organisms/Modal";
-import { EditionTabs } from "../../molecules/EditionTabs";
-import { Table } from "../../organisms/Table";
-import beenhere from "../../../assets/images/Icons/beenhere.svg";
-import closeMagenta from "../../../assets/images/Icons/close-magenta.svg";
-import { Container } from "./styles";
-import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
-import succes from "../../../assets/images/genericModal/genericModalCheck.svg";
-
-import { initData, setDataColumns, dataReducer, modalReducer } from "./utils";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { TagAndInput } from "../../molecules/TagAndInput";
-import { GenericModal } from "../../atoms/GenericModal";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-
-export const MEdition = ({ articles, versions, onClose, token }) => {
-  const [section, setSection] = useState("description");
-  const [attributeSelected, setAttributeSelected] = useState({
-    articleId: "",
-    attributeId: "",
-    versionId: "",
-  });
-  const [attributesReviewed, setAttributesReviewed] = useState([]);
-  const [showRejectModal, setShowRejectModal] = useState(false);
-  const [showValidationPanel, setShowValidationPanel] = useState(false);
-  const [message, setMessage] = useState("");
-
-  const closeValidationPanel = (e) => {
-    if (
-      !e.target.closest("#validation-panel") ||
-      (e.target.closest(".validation-option") && showValidationPanel)
-    ) {
-      document.removeEventListener("click", closeValidationPanel, false);
-      setShowValidationPanel(false);
-    }
-  };
-  const [currentData, setCurrentData] = useState({
-    columns: [],
-    data: [],
-  });
-  const [dataServices, setDataServices] = useReducer(dataReducer, {
-    description: {
-      data: [],
-    },
-    datasheet: {
-      data: [],
-    },
-    images: {
-      data: [],
-    },
-  });
-  const [modalFromTable, setModalFromTable] = useState();
-  const [modal, setModal] = useReducer(modalReducer, {
-    showModal: false,
-  });
-
-  function callbackToInitData() {
-    initData(setDataServices, articles, versions, token);
-  }
-
-  useEffect(() => {
-    callbackToInitData();
-  }, []);
-
-  useEffect(() => {
-    const [columns, data] = setDataColumns(
-      section,
-      dataServices[section],
-      token,
-      setModalFromTable,
-      setDataServices,
-      setModal,
-      setShowValidationPanel,
-      setAttributeSelected,
-      setShowRejectModal,
-      setAttributesReviewed,
-      setMessage,
-      showValidationPanel,
-      attributeSelected,
-      attributesReviewed
-    );
-    setCurrentData({
-      columns,
-      data,
-    });
-  }, [
-    section,
-    dataServices,
-    attributeSelected,
-    showValidationPanel,
-    attributesReviewed,
-  ]);
-
-  return (
-    <Container>
-      <div className="tabs">
-        <div>
-          <EditionTabs getSection={setSection} />{" "}
-        </div>{" "}
-        <img src={beenhere} alt="beenhere" />
-      </div>{" "}
-      <div className="action_buttons">
-        <img
-          src={closeMagenta}
-          alt="Cerrar"
-          onClick={() => onClose && onClose()}
-        />{" "}
-      </div>{" "}
-      <div className="table">
-        <Table
-          withCheckbox
-          columns={currentData.columns}
-          data={currentData.data}
-        />{" "}
-      </div>{" "}
-      {modalFromTable} <Modal {...modal} />{" "}
-      {showRejectModal && (
-        <Modal
-          title={"Agregar mensaje de rechazo"}
-          show={showRejectModal}
-          customComponent={
-            <TagAndInput
-              inputType={"textarea"}
-              inputId={"modal-message-box"}
-              index={0}
-              color={"white"}
-            />
-          }
-          buttons={[
-            <ButtonV2
-              key={"btn-Cancelar"}
-              type={"white"}
-              label={"Cancelar"}
-              size={12}
-              onClick={() => {
-                setShowRejectModal(false);
-              }}
-            />,
-            <ButtonV2
-              key={"btn-Aceptar"}
-              type={"pink"}
-              label={"Aceptar"}
-              size={12}
-              onClick={async () => {
-                const body = document.querySelector(
-                  "#modal-message-box .ql-container .ql-editor > p"
-                ).innerHTML;
-                const comment = [
-                  {
-                    type: "comment",
-                    value: body?.replace(/<.*?\/?>/gm, ""),
-                  },
-                ];
-                var index = attributesReviewed.findIndex(
-                  (e) =>
-                    e.articleId === attributeSelected.articleId &&
-                    e.attributeId === attributeSelected.attributeId &&
-                    e.versionId === attributeSelected.versionId
-                );
-                attributesReviewed[index].isApproved = false;
-                attributesReviewed[index].isReviewed = true;
-                document.getElementById(
-                  "button_" +
-                    attributeSelected.articleId +
-                    "_" +
-                    attributeSelected.attributeId +
-                    "_" +
-                    attributeSelected.versionId
-                ).src = rejectIcon;
-                attributesReviewed[index].comment = comment[0].value;
-                console.log(attributesReviewed[index]);
-                setShowRejectModal(false);
-              }}
-            />,
-          ]}
-        />
-      )}{" "}
-      {message.length > 0 && (
-        <GenericModal
-          componentsArray={[
-            <img key="1" src={succes} alt="success icon" />,
-            <ScreenHeader
-              key="2"
-              headerType={"retailer-name-header"}
-              text={message}
-              color={"white"}
-            />,
-          ]}
-          onClick={() => {
-            setMessage("");
-            callbackToInitData();
-          }}
-        />
-      )}{" "}
-    </Container>
-  );
-};

package/src/components/pages/MultipleEdition/saveData.js

@@ -1,91 +0,0 @@
-import AWS from "aws-sdk";
-import { v4 as uuidv4 } from "uuid";
-import axios from "axios";
-
-const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
-const REGION = "us-east-1";
-
-AWS.config.update({
-  accessKeyId: process.env.REACT_APP_KUTS3,
-  secretAccessKey: process.env.REACT_APP_AKUTS3,
-});
-
-const myBucket = new AWS.S3({
-  params: { Bucket: S3_BUCKET },
-  region: REGION,
-});
-
-export default async function saveData(params) {
-  const { section, data, token, callbackToInitData, setModal } = params;
-  if (section === "images") {
-    if (await saveImagesData(data, token)) {
-      callbackToInitData();
-      setModal({
-        type: "saved successfully",
-        functions: { setModal },
-        payload: { service: "imágenes" },
-      });
-      // aquí va modal de que todo salío bien y actualiza la data
-    }
-  }
-  return false;
-}
-
-async function saveImagesData(articles, token) {
-  const imagesToUpdate = [];
-  articles.data.forEach((article) => {
-    const { images, version } = article;
-    const imagesToAdd = Object.values(images).filter(
-      (f) => f.value && !f.value.src.startsWith("id-")
-    );
-    if (imagesToAdd.length > 0) {
-      imagesToUpdate.push(
-        ...imagesToAdd.map((e) => ({
-          imageId: e.imageId,
-          ...e.value,
-          version,
-          uuid: uuidv4(),
-        }))
-      );
-    }
-  });
-  const promiseArray = imagesToUpdate.map((e) => {
-    const { src, articleId, imageId, uuid, ext, version } = e;
-    const file = Buffer.from(
-      src.replace(/^data:image\/\w+;base64,/, ""),
-      "base64"
-    );
-    const params = {
-      ACL: "public-read",
-      Body: file,
-      Bucket: S3_BUCKET,
-      Key: `id-${articleId}/${version}/${imageId}-${uuid}.${ext}`,
-    };
-    return myBucket.putObject(params).promise();
-  });
-  await Promise.all(promiseArray);
-  console.log("finish upload");
-
-  const res = await axios.put(
-    process.env.REACT_APP_BASE_UPDATE_IMAGES_ENDPOINT,
-    imagesToUpdate.map((e) => {
-      delete e.src;
-      return e;
-    }),
-    {
-      headers: {
-        Authorization: token,
-      },
-    }
-  );
-  if (res.data.statusCode !== 200) return false;
-  return true;
-}
-
-export async function deleteImage(data, version, token) {
-  await axios.put(
-    `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
-    data,
-    { headers: { Authorization: token } }
-  );
-}

package/src/components/pages/MultipleEdition/styles.js

@@ -1,106 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: grid;
-  grid-template-columns: 75% 25%;
-  grid-template-rows: 75px 1fr;
-  grid-template-areas:
-    "tabs action_buttons"
-    "table table";
-  margin: 0 30px;
-  body{
-    font-family: Roboto;
-  }
-
-  .tabs {
-    grid-area: tabs;
-    display: flex;
-    align-items: center;
-    gap: 0 10px;
-  }
-  .action_buttons {
-    grid-area: action_buttons;
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    gap: 0 10px;
-    & > * {
-      cursor: pointer;
-    }
-  }
-  .table {
-    grid-area: table;
-    background: red;
-    height: 100%;
-    font-family: Raleway;
-  }
-  
-  .buttons-container{
-    background: white;
-    width: max-content;
-    padding: 8px;
-    border: 1px solid ${GlobalColors.s3};
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-    border-radius: 3px;
-    position: absolute;
-    top: -10%;
-    z-index: 100;
-  }
-
-  .validation-option {
-    width: 15%;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    border: none;
-    cursor: pointer;
-    color: black;
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 18px;
-    background-color: white;
-
-    img {
-      & + p {
-        margin-left: 7px;
-      }
-    }
-
-    &:hover {
-      border-radius: 10px;
-    }
-
-    & + * {
-      margin-top: 8px;
-    }
-  }
-
-  td{
-    margin:0;
-  }
-  
-  textarea {
-    width: 100%;
-    border: 1px solid
-      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
-
-    font-family: ${FontFamily.AvenirNext};
-    color: ${GlobalColors.deep_gray};
-    font-weight: normal;
-    font-size: 12px;
-    line-height: 15px;
-    padding: 10px;
-    outline: none;
-    border-radius: 2px;
-    resize: none;
-
-    &:focus {
-      border: 1px solid ${GlobalColors.magenta_s2};
-    }
-  }
-
-  input{
-    
-  }
-`;