contentoh-components-library 21.5.7 → 21.5.9

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

@@ -1,114 +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: 2;
-      & > 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;
-      gap:5px;
-    }
-    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: ${({ fixedToLeft }) => (fixedToLeft >= 0 ? `${fixedToLeft}px` : "20px")};
-  ${({ fixedToLeft, withCheckbox }) =>
-    fixedToLeft >= 0 &&
-    css`
-      left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
-      z-index: 10;
-    `}
-`;
-
-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: 5;
-  position: sticky;
-  left: ${({ fixedToLeft }) => (fixedToLeft >= 0 ? `${fixedToLeft}px` : "20px")};
-  .content {
-    white-space: nowrap;
-    overflow: hidden;
-    /* text-overflow: ellipsis; */
-  }
-  ${({ fixedToLeft, withCheckbox }) =>
-    fixedToLeft >= 0 &&
-    css`
-      left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
-      z-index: 10;
-    `}
-`;

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,17 +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: [121219],//[216, 238, 239],
-  versions: [1],
-  //token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJjM2FlNjRiMC0yNDcxLTQ1MmQtOGExYi04OGFkNWIxNjRjOWQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNjU0ODk3OCwibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA2NTUyNTc4LCJpYXQiOjE3MDY1NDg5NzgsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.RPiGAf-R2eEqdsfAbKKC7uX57t1JTEIZ3rgJZZNQ6wnJm8hfDKk1aa1fOqGZMDVw_peoq_XyZQWvmsJ8pRexWxO05oLZchn1n_gml6rapq2WqVap1CYyj2k2aBEGJo5CZzWGFp8VVXn9nl9pm8AsFjjfCAQGFaKB_5iMeNCPYt_vXXQ-LAOwkjzoAP6ujmlpJMVMsXoCaabWH7t5Z8akNO0eS0KAscL5EPDl_MmjqV_2PeBXl1KYAU-uJbdSG1xRiSV_nqJ23B4TAkERDfouCfd3ysLMrlRxkcsQd9xOvrt9fQMlrJqrCuf6RoD12pgqSRIxk_cOa4NFm6SKwCwRnw"
-  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI2ZTY5MTNjZS01MTc1LTRhOWItYjhlYS1iMGNhMDk4Yjc0M2EiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjZlNjkxM2NlLTUxNzUtNGE5Yi1iOGVhLWIwY2EwOThiNzQzYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIwN2JjM2E5Mi02ZmY4LTQ5NDctYWU3ZS0yZjkxNWE4OWE0N2IiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcxMzE5NzkyMiwibmFtZSI6IkplZmUgQ29tZXJjaWFsIiwicGhvbmVfbnVtYmVyIjoiKzUyMzMzMzIzMjIzMzMiLCJleHAiOjE3MTMyMDE1MjIsImlhdCI6MTcxMzE5NzkyMiwiZW1haWwiOiJqZWZlY29tZXJjaWFsQGFsbGZyZWVtYWlsLm5ldCJ9.pRmu4LHck97IR2lvsZNa7ehSMs7bDFrxJqqKn-FgiAeLhZPCJA7SMyWDQKvKH9QFNwQOXI4cNm653CPTvK1jOMFDa7RCaliT4mRlfgrU44EGb-GCr5sfg-97Wqd-kO4hNkJH7x7WvagjHNRL8uD_iMwfUIrZUcUIPRF1b1zl-bHc6WOJDqtyRcdh8NpQ4y63V11USlPvZrcimo4_iJ6re9ductEOwuTPPE30kj88N9J70nWk4dvKKHrC-BTFnt5PSped7nK55FVjg8uIfqpRtTVBtMfVq6zQp0CMjnpiD2yR93YUpSzeNZJ1Sz-pOij5K1RpVXrLHrghWY4ny9QFTg"
-  //token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJkMzE0ODYyYy02OTYxLTQ5YjktODMwOC1hMDM3Mzg1MjUwYzAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMjQxMTc0MSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcwMjQxNTM0MSwiaWF0IjoxNzAyNDExNzQxLCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.O4Lr5HZLuueNNY1FxqrRBaQZKMgnTXY9IG7KAMkhWO20Dxnfj253sqOme36AbqIAsCQBy77GmnZtTAFs0uF9QBfEDzZXRQ1xcctboGZ9U235LlLdz-BNGoH5QCRXeZsZdXJ1M7yL8IvIdEnXkFC0WYcUMWMRUc6K6vgOvmCCQhzOr-uW-2nsLBGjBb7Tj_okViYvT0Lupo5Z0Z9Xc20oOWnVmrSuaYa1-b4AjOjEOnETA9usnRa6blOVOkHqi5fX8u11ejczINxNBtoizMPOQROuzuuPTvHrl17ae8JkNoxVCJe5ZdfRrUN1lwUXnOZim7QhNg8YR_uvPs_EJRIwfw",
-};

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

@@ -1,62 +0,0 @@
-import React, { useState } from "react";
-import { useDropzone } from "react-dropzone";
-import { ImageUploaderContainer } from "./ImageUploaderStyles";
-import uploadFile from "../../../../assets/images/Icons/upload_file.svg";
-
-const ImageUploader = ({ handleNewImage }) => {
-  const [image, setImage] = useState(null);
-
-  const onDrop = (acceptedFiles) => {
-    if (acceptedFiles.length === 1) {
-      showImage(acceptedFiles[0]);
-    }
-  };
-
-  const showImage = (file) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      setImage(reader.result);
-      getImageDimensions(reader.result);
-    };
-    reader.readAsDataURL(file);
-  };
-
-  const getImageDimensions = (dataURL) => {
-    const img = new Image();
-    img.onload = () => {
-      const image = {
-        src: dataURL,
-        ext: img.src.includes("image/jpeg") ? "jpg" : "png",
-        width: img.width,
-        height: img.height,
-      };
-      handleNewImage(image);
-    };
-    img.src = dataURL;
-  };
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
-
-  return (
-    <ImageUploaderContainer {...getRootProps()}>
-      <input {...getInputProps()} />
-      {image ? (
-        <img className="imageLoaded" src={image} alt="Imagen Cargada" />
-      ) : (
-        <>
-          <img src={uploadFile} alt="Subir imágen" />
-          {isDragActive ? (
-            <p>Suelta la imagen aquí</p>
-          ) : (
-            <div>
-              <p>Da clic aquí o arrastra la foto para subirla a Content-oh!</p>
-              <span>Tamaño de imagen recomendando 3000x3000 pixeles</span>
-            </div>
-          )}
-        </>
-      )}
-    </ImageUploaderContainer>
-  );
-};
-
-export default ImageUploader;

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

@@ -1,29 +0,0 @@
-import styled from "styled-components";
-
-export const ImageUploaderContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  color: var(--magenta-main, #e33aa9);
-  text-align: center;
-  font-family: Roboto;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  padding: 49px 32px;
-  & > div {
-    & > p {
-      margin-bottom: 10px;
-    }
-    & > span {
-      color: var(--grey-medium, #cbcbcb);
-      font-size: 10px;
-      font-weight: 400;
-    }
-  }
-`;

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

@@ -1,143 +0,0 @@
-import { useState, useEffect } from "react";
-import ReactImageFallback from "react-image-fallback";
-import { ImageContainer, ImageView } from "./styles.js";
-import ImageUploader from "./ImageUploader.js";
-import { getImageURL } from "../../../../global-files/utils.js";
-import defaultProductImage from "../../../../assets/images/defaultImages/defaultProductImage.png";
-import fullscreen from "../../../../assets/images/Icons/fullscreen.svg";
-import close from "../../../../assets/images/Icons/close.svg";
-import uploadFile from "../../../../assets/images/Icons/upload-file.svg";
-import deleteForever from "../../../../assets/images/Icons/delete-forever-white.svg";
-
-export const ImageVisor = ({
-  value,
-  name,
-  setModalFromTable,
-  setDataServices,
-  setModal,
-  ...props
-}) => {
-  const [smallSrc, setSmallSrc] = useState("");
-  function handleNewImage(imageFile) {
-    const payload = { ...props, ...imageFile };
-    setDataServices({ type: "updateImage", payload });
-  }
-
-  function handleUpdateImage(file) {
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = () => {
-        getImageDimensions(reader.result);
-      };
-      reader.readAsDataURL(file);
-    }
-  }
-
-  const getImageDimensions = (dataURL) => {
-    const img = new Image();
-    img.onload = () => {
-      const image = {
-        src: dataURL,
-        ext: img.src.includes("image/jpeg") ? "jpg" : "png",
-        width: img.width,
-        height: img.height,
-      };
-      handleNewImage(image);
-      changeVisor();
-    };
-    img.src = dataURL;
-  };
-
-  function changeVisor(view) {
-    if (!view) {
-      setModalFromTable(null);
-      return;
-    }
-    const isSmall = view === "small";
-    let src = isSmall
-      ? smallSrc
-      : `${process.env.REACT_APP_IMAGES_ENDPOINT}/${value?.src}`;
-    setModalFromTable(
-      <ImageView visorView={view}>
-        <div className="header">
-          <p>{name}</p>
-          <div className="buttons">
-            {isSmall ? (
-              <>
-                {value?.src ? (
-                  <img
-                    src={fullscreen}
-                    alt="Ver en pantalla completa"
-                    onClick={() => changeVisor("fullscreen")}
-                  />
-                ) : null}
-                <img src={close} alt="Cerrar" onClick={() => changeVisor()} />
-              </>
-            ) : (
-              <>
-                <label className="borderCircle" htmlFor="fileInput">
-                  <img src={uploadFile} alt="Actualizar imagen" />
-                  <input
-                    type="file"
-                    id="fileInput"
-                    accept="image/png, image/jpeg"
-                    style={{ display: "none" }}
-                    onChange={(e) => handleUpdateImage(e.target.files[0])}
-                  />
-                </label>
-                <img
-                  className="borderCircle"
-                  src={deleteForever}
-                  alt="Eliminar imágen"
-                  onClick={() => {
-                    setModal({
-                      type: "delete",
-                      functions: { setModal, setDataServices },
-                      payload: props,
-                    });
-                    changeVisor();
-                  }}
-                />
-                <img
-                  className="borderCircle"
-                  src={close}
-                  alt="Cerrar"
-                  onClick={() => changeVisor("small")}
-                />
-              </>
-            )}
-          </div>
-        </div>
-        <div className="body">
-          <ReactImageFallback
-            className="imageLoaded"
-            src={src}
-            fallbackImage={<ImageUploader handleNewImage={handleNewImage} />}
-            alt={name ?? "Imagen del producto"}
-          />
-        </div>
-      </ImageView>
-    );
-  }
-
-  useEffect(() => {
-    let src = value?.src?.includes("image/")
-      ? value?.src
-      : getImageURL(process.env.REACT_APP_IMAGES_BUCKET, value?.src, 250, 250);
-    setSmallSrc(src);
-  }, [value]);
-
-  return (
-    <>
-      <ImageContainer onClick={() => changeVisor("small")}>
-        <ReactImageFallback
-          src={smallSrc}
-          fallbackImage={defaultProductImage}
-          alt={name ?? "Imagen del producto"}
-        />
-      </ImageContainer>
-    </>
-  );
-};
-
-export default ImageVisor;

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

@@ -1,106 +0,0 @@
-import styled, { css } from "styled-components";
-import uploadFile from "../../../../assets/images/Icons/upload-file.svg";
-
-export const ImageContainer = styled.div`
-  align-items: center;
-  background: var(--white-main, #fff);
-  border-radius: 7px;
-  border: 1px solid var(--grey-medium, #cbcbcb);
-  cursor: pointer;
-  display: flex;
-  height: 52px;
-  justify-content: center;
-  width: 52px;
-  & > img {
-    border-radius: 7px;
-    height: 100%;
-    width: 100%;
-    object-fit: contain;
-  }
-`;
-
-export const ImageView = styled.div`
-  background: var(--white-main, #fff);
-  border-radius: 5px;
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
-  height: 280px;
-  left: calc(50% - 125px);
-  position: absolute;
-  top: calc(50% - 140px);
-  width: 250px;
-  z-index: 10;
-  .header {
-    align-items: center;
-    background: var(--grey-medium, #cbcbcb);
-    border-radius: 5px 5px 0px 0px;
-    color: var(--white-main, #fff);
-    display: flex;
-    font-family: Roboto;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    height: 30px;
-    justify-content: space-between;
-    line-height: normal;
-    overflow: hidden;
-    padding: 0 9px 0 10px;
-    text-overflow: ellipsis;
-    width: 100%;
-    .buttons {
-      display: flex;
-      gap: 10px;
-      img {
-        cursor: pointer;
-      }
-      label {
-        display: flex;
-        align-items: center;
-        padding: 3px;
-      }
-      .borderCircle {
-        border-radius: 20px;
-        border: 1px solid var(--white-main, #fff);
-      }
-    }
-  }
-  .body {
-    width: 100%;
-    height: calc(100% - 30px);
-    .imageLoaded {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-  }
-  ${({ visorView }) =>
-    visorView === "fullscreen" &&
-    css`
-      background: var(--black-main, #262626d9);
-      height: 100%;
-      left: 0;
-      top: 0;
-      width: 100%;
-      .header {
-        background: var(--black-main, #262626);
-        font-size: 14px;
-        height: 45px;
-        .buttons > img {
-          border-radius: 20px;
-          border: 1px solid var(--white-main, #fff);
-          padding: 3px;
-        }
-      }
-      > div {
-        align-items: center;
-        display: flex;
-        height: 100%;
-        justify-content: center;
-        width: 100%;
-        & > img {
-          border-radius: 5px;
-          height: 500px;
-          width: 500px;
-        }
-      }
-    `}
-`;