diff --git a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
index dc0d040e7a73370fbe5ab4aefdc945a74cf40318..7b3d48c48c4b33538da42cd413ce6b971e7c0d58 100644
--- a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
@@ -45,7 +45,7 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
     className = "",
     resetStyles,
     color,
-    firstClassName="",
+    firstClassName = "",
   } = props;
 
   const DropzoneHeaderLocalizer: LocalLabels = DropzoneLocalizerSelector(
@@ -77,8 +77,9 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
 
     const maxFileSizeMessenger: FunctionLabel =
       DropzoneHeaderLocalizer.maxSizeMessage as FunctionLabel;
-    if (maxFileSize) {
-      result.push(maxFileSizeMessenger(fileSizeFormater(maxFileSize)));
+    const maxFileSizeFormatted = fileSizeFormater(maxFileSize);
+    if (maxFileSizeFormatted) {
+      result.push(maxFileSizeMessenger(maxFileSizeFormatted));
       result.push(<React.Fragment>{","}&nbsp;</React.Fragment>);
     }
     const validFileSizeMessenger: FunctionLabel =
diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index 625e4d406273e1aef087905053e3899ee01eff01..7dc71ff89002a3c34ea4ba125e2b92b5c84046fe 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -2,8 +2,7 @@ import * as React from "react";
 import { FileCardProps } from "./FileCardProps";
 import "./FileCard.scss";
 import "./components/FileCardPaper.scss";
-import { getLocalFileItemData } from "../file-item/utils/getLocalFileItemData";
-import { fileSizeFormater, handleClickUtil, shrinkWord } from "../../core";
+import { fileSizeFormater, getLocalFileItemData, handleClickUtil, shrinkWord } from "../../core";
 import useProgress from "../file-mosaic/hooks/useProgress";
 import useFileMosaicInitializer from "../file-mosaic/hooks/useFileMosaicInitializer";
 import { useIsUploading } from "../file-mosaic/hooks/useIsUploading";
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItem.scss b/src/files-ui/components/file-item/components/FileItem/FileItem.scss
deleted file mode 100644
index 3d956551cd8d0cc858e838a2b181969c53c35794..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/FileItem.scss
+++ /dev/null
@@ -1,272 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900);
-
-.file-item-full-container-container {
-  cursor: text;
-  box-sizing: border-box;
-  font-family: "Poppins", sans-serif;
-  width: 132px;
-  word-break: break-word;
-  font-size: 15px;
-  font-weight: 400;
-  //background-color: cadetblue;
-
-  &.hovering {
-    // background-color: aqua;
-    border-radius: 8px;
-  }
-
-  //outline: 1px solid rgb(20, 130, 220);
-  .file-item-icon-container {
-    position: relative;
-    height: 132px;
-    width: 132px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .full-info {
-      &::-webkit-scrollbar {
-        width: 9px;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: #646c7fa9;
-        border-radius: 20px;
-        border: transparent;
-      }
-
-      text-align: left;
-      position: absolute;
-      left: 0;
-      top: 0;
-
-      scrollbar-width: thin;
-      line-height: 1.5;
-      letter-spacing: 0.02857em;
-      //border: 1px solid white;
-      font-family: "Poppins", sans-serif;
-      width: inherit;
-      background-color: rgba(0, 0, 0, 0.85);
-      word-break: break-word;
-      //margin: 1% 4%;
-      // padding: 1% 1%;
-      border-radius: 7px;
-      //z-index: 100;
-      height: 100%;
-      width: 100%;
-
-      font-size: 0.8rem;
-      transition: all 0.5s ease 0s;
-      //overflow: hidden;
-      overflow: auto;
-      color: white;
-
-      .name {
-        //margin: -7px 0 0 0;
-        padding: 0 5px;
-        font-weight: 399;
-        // text-align: center;
-
-        .sub-label {
-          font-weight: 600;
-        }
-
-        &.success {
-          border: 1px dashed #2e7d32;
-          background-color: #1b5e20;
-          //margin: 0 2px;
-          font-size: 0.7rem;
-
-          border-radius: 4px;
-        }
-
-        &.error {
-          background-color: #c62828;
-          border: 1px dashed #d32f2f;
-          font-size: 0.7rem;
-
-          //margin: 0 2px;
-          border-radius: 4px;
-        }
-      }
-
-      .size {
-        // margin-top: 5px;
-        padding: 0 5px;
-        font-weight: 500;
-
-        .sub-label {
-          font-weight: 600;
-        }
-      }
-
-      .mime {
-        //display: none;
-        //text-align: left;
-
-        padding: 0 5px;
-        font-weight: 399;
-
-        .sub-label {
-          font-weight: 600;
-        }
-      }
-
-      &.hide {
-        //height: 0%;
-        display: none;
-      }
-    }
-  }
-
-  .file-item-name {
-    margin-top: 3px;
-    height: 31px;
-    text-align: center;
-    //width: 133px;
-    width: 100%;
-    color: black;
-    //font-size: 0.95rem;
-    font-size: 15px;
-    //line-height: 0.9rem;
-    line-height: 15px;
-    font-weight: 400;
-    letter-spacing: 0.07rem;
-    word-break: break-all;
-    padding: 0.5px;
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2; /* number of lines to show */
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    &.dark-mode {
-      color: rgba(255, 255, 255, 0.7);
-    }
-    &.not-allowed {
-      background-color: rgba(180, 16, 16, 0.7);
-    }
-  }
-}
-
-.file-item-container {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-
-.dui-file-item-icon {
-  font-size: 0.7rem;
-  //border: 1px solid wheat;
-  //color: white;
-  min-width: 19px;
-  min-height: 19px;
-  margin: 0;
-  padding: 2px 2px;
-  border-radius: 50%;
-  background-color: rgba(32, 33, 36, 0.65);
-
-  word-break: break-word;
-
-  &:hover {
-    background-color: rgba(32, 33, 36, 0.85);
-    //outline: 0.5px solid wheat;
-  }
-}
-
-//////////////////   TOOLTIP
-.dz-ui-file-item-container {
-  &.dz-ui-tooltip {
-    cursor: default;
-    position: relative;
-    display: inline-block;
-
-    // border-bottom: 1px dotted black;
-    &:hover {
-      z-index: 2;
-
-      .dropzone-ui-tooltiptext {
-        visibility: visible;
-        opacity: 1;
-        z-index: 2;
-      }
-    }
-
-    .dropzone-ui-tooltiptext {
-      font-family: "Poppins", sans-serif;
-      font-size: 0.8rem;
-      visibility: hidden;
-      width: 133px;
-      // background-color: green;
-      color: #fff;
-      text-align: center;
-      border-radius: 6px;
-      padding: 2px 2px;
-      position: absolute;
-      //z-index: 2;
-      //top: 190px;
-      top: 180px;
-      left: 66px;
-      margin-left: -60px;
-
-      /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
-      opacity: 0;
-      transition: opacity 1s;
-
-      &.not-valid-error {
-        background: linear-gradient(to top, #c62828, #d32f2f);
-
-        &::after {
-          border-color: transparent transparent #d32f2f transparent;
-        }
-      }
-
-      &.success {
-        //background-color: green;
-        background: linear-gradient(to top, #1b5e20, #2e7d32);
-
-        &::after {
-          border-color: transparent transparent #2e7d32 transparent;
-        }
-      }
-
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: 100%;
-        left: 50%;
-        margin-left: -5px;
-        border-width: 5px;
-        border-style: solid;
-        //border-color: transparent transparent green transparent;
-      }
-    }
-  }
-
-
-
-  
-  &.dz-ui-paper-elevation-1 {
-    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-      0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-  }
-
-  .dz-ui-paper-elevation-2 {
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  }
-
-  .dz-ui-paper-elevation-3 {
-    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
-      0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
-  }
-
-  .dz-ui-paper-elevation-4 {
-    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-      0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-  }
-}
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItem.tsx b/src/files-ui/components/file-item/components/FileItem/FileItem.tsx
deleted file mode 100644
index a23de8e55543210458fe9a937734a485f5633023..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/FileItem.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-import * as React from "react";
-import { fileSizeFormater } from "../../../../core";
-import DownloadHidden from "../../../download-hidden/DownloadHidden";
-import { mergeProps } from "../../../overridable";
-import { Tooltip } from "../../../tooltip";
-import useFileItemRootClassName from "../../hooks/useFileItemClassName";
-import { getLocalFileItemData } from "../../utils/getLocalFileItemData";
-import { showFileItemComponent } from "../../utils/showFileItemComponent";
-import { FileItemProps, FileItemPropsDefault } from "./FileItemProps";
-import "./FileItem.scss";
-import FileItemImage from "../FileItemImage/FileItemImage";
-import useFileItemInitializer from "../../hooks/useFileItemInitializer";
-import FileItemMainLayer from "../FileItemMainLayer/MainLayer/FileItemMainLayer";
-import useFileItemProgress from "../../hooks/useFileItemProgress";
-import FileItemFullInfoLayer from "../FileItemFullInfoLayer/FileItemFullInfoLayer";
-
-const FileItem: React.FC<FileItemProps> = (props: FileItemProps) => {
-  const {
-    style,
-    className,
-
-    file,
-    name: propName,
-    size: propSize,
-    type: propType,
-
-    id,
-    valid,
-    errors,
-    uploadStatus,
-    uploadMessage,
-    progress,
-
-    xhr,
-
-    localization,
-    preview,
-    imageUrl,
-    info,
-    backgroundBlurImage = true,
-    darkMode,
-
-    alwaysActive,
-
-    resultOnTooltip,
-
-    onDelete,
-    onCancel,
-    onAbort,
-
-    onDownload,
-    onSee,
-    onWatch,
-
-    onlyImage,
-
-    //hd,
-
-    downloadUrl,
-
-    showProgress,
-
-    onDoubleClick,
-    onRightClick,
-  } = mergeProps(props, FileItemPropsDefault);
-
-  //ref for anchor element
-  const downloadAnchorRef = React.useRef<HTMLAnchorElement>(null);
-
-  /*************** HOVERING ***************/
-  const [hovering, setHOvering] = React.useState<boolean>(false);
-  const handleOnHoverEnter: React.MouseEventHandler<HTMLDivElement> = () => {
-    setHOvering(true);
-  };
-  const handleOnHoverLeave: React.MouseEventHandler<HTMLDivElement> = () => {
-    setHOvering(false);
-  };
-  //className created
-  const rootClassNameCreated: string | undefined = useFileItemRootClassName(
-    resultOnTooltip,
-    className,
-    hovering
-  );
-
-  const showFileItem: boolean = showFileItemComponent(
-    file,
-    propName
-    // Boolean(rootClassNameCreated)
-  );
-
-  // local properties from file
-  const [localName, localType, localSize]: [
-    string,
-    string | undefined,
-    number | undefined
-  ] = getLocalFileItemData(file, propName, propType, propSize);
-
-  // handle progress
-  const localProgress = useFileItemProgress(progress, showProgress, xhr);
-
-  //Initialize File Item
-  const [isImage, isVideo, url, imageSource]: [
-    boolean,
-    boolean,
-    string,
-    string | undefined
-  ] = useFileItemInitializer(
-    file,
-    propName,
-    propType,
-    valid,
-    preview as boolean,
-    imageUrl
-  );
-
-  //The size formatted and rounded in 2 decimals
-  const sizeFormatted: string = localSize
-    ? fileSizeFormater(localSize)
-    : "0 KB";
-  //alwaysActive
-  const [showInfo, setShowInfo] = React.useState<boolean>(false);
-
-  /*************** Click ***************/
-  /**
-   * TO-DO: Add functionallity on click event
-   * @param e event object
-   */
-  function handleClick<T extends HTMLDivElement>(
-    e: React.MouseEvent<T, MouseEvent>
-  ): void {
-    //avoid children to trigger onClick ripple from parent
-    e.stopPropagation();
-  }
-
-  /***************** HANDLERS **********/
-  //delete file item
-  const handleDelete = (): void => {
-    onDelete?.(id);
-  };
-  //open info layer
-  const handleOpenInfo = () => {
-    setShowInfo(true);
-  };
-  //close info layer
-  const handleCloseInfo = () => {
-    setShowInfo(false);
-  };
-  //handle watch video
-  const handleOpenVideo = async () => {
-    if (file) onWatch?.(file);
-  };
-  //open image
-  const handleOpenImage = async () => {
-    if (imageSource) {
-      //  if (hd) {
-      //    const response = await readImagePromise(file);
-      //    onSee?.(response || "");
-      //  } else {
-      onSee?.(imageSource);
-      //}
-    }
-  };
-
-  /********** DOWNLOAD HANDLERS **********/
-  /**
-   * onDownload, form 1
-   * Trigger dowload directly performing a click on anchor element
-   */
-  const innerDownload = () => {
-    const anchorElement = downloadAnchorRef.current;
-    if (anchorElement) {
-      anchorElement.click();
-    }
-  };
-  /**
-   * onDownlad, form 2
-   * Handle the download triggering an outside event
-   */
-  const handleDownload = () => {
-    if (onDownload) {
-      onDownload?.(id, downloadUrl);
-    } else if (typeof downloadUrl == "string") {
-      innerDownload();
-    }
-  };
-  /**
-   * Perform abort event when xhr is given
-   */
-  const handleAbort = (): void => {
-    //trigger abort event
-    xhr?.abort();
-    // handle externally the abort event
-    onAbort?.(id);
-  };
-  /**
-   * Handle onCancel event
-   */
-  const handleCancel = (): void => {
-    // handle externally the cancel event
-    onCancel?.(id);
-  };
-
-  const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = (
-    evt: React.MouseEvent
-  ): void => {
-    alert("double click on file");
-    evt.preventDefault();
-
-    onDoubleClick?.(evt);
-  };
-  function handleRightClick(evt: React.MouseEvent) {
-    // alert("right click!!!!");
-    //get coordinates
-    //zindex
-    //create menu component
-    // evt.preventDefault();
-    onRightClick?.(evt);
-  }
-  //console.log("FileItem onCancel", onCancel);
-
-  if (showFileItem) {
-    return (
-      <div
-        className={rootClassNameCreated}
-        style={style}
-        onMouseEnter={handleOnHoverEnter}
-        onMouseLeave={handleOnHoverLeave}
-        onClick={handleClick}
-        onDoubleClick={handleDoubleClick}
-        onContextMenu={handleRightClick}
-      >
-        <div className={`file-item-icon-container ${showInfo ? " hide" : ""}`}>
-          <FileItemImage
-            imageSource={imageSource}
-            url={url}
-            fileName={localName}
-            backgroundBlurImage={backgroundBlurImage as boolean}
-          />
-          <FileItemMainLayer
-            showInfo={showInfo}
-            fileName={localName}
-            onDelete={onDelete ? handleDelete : undefined}
-            onOpenImage={onSee && preview ? handleOpenImage : undefined}
-            onOpenVideo={onWatch && preview ? handleOpenVideo : undefined}
-            onDownloadFile={
-              onDownload || downloadUrl ? handleDownload : undefined
-            }
-            isVideo={isVideo}
-            onOpenInfo={handleOpenInfo}
-            info={info || false}
-            valid={valid}
-            isImage={isImage}
-            sizeFormatted={sizeFormatted}
-            uploadStatus={uploadStatus}
-            localization={localization}
-            hovering={alwaysActive || hovering}
-            progress={localProgress}
-            onAbort={onAbort ? handleAbort : undefined}
-            onCancel={onCancel ? handleCancel : undefined}
-          />
-          <FileItemFullInfoLayer
-            showInfo={showInfo}
-            errors={errors}
-            fileName={localName}
-            fileSize={sizeFormatted}
-            fileType={localType}
-            valid={valid}
-            onClose={handleCloseInfo}
-            uploadStatus={uploadStatus}
-            uploadMessage={uploadMessage}
-            localization={localization}
-            resultOnTooltip={resultOnTooltip}
-          />
-        </div>
-        {!onlyImage && (
-          <div
-            className={darkMode ? "file-item-name dark-mode" : "file-item-name"}
-          >
-            {/* {shrinkWord(localName)} */}
-            {localName}
-          </div>
-        )}
-        <Tooltip
-          open={resultOnTooltip}
-          //open={true}
-          uploadStatus={uploadStatus}
-          valid={valid}
-          errors={errors}
-          uploadMessage={uploadMessage}
-        ></Tooltip>
-        <DownloadHidden
-          downloadUrl={downloadUrl}
-          anchorRef={downloadAnchorRef}
-          fileName={localName}
-        />
-      </div>
-    );
-  }
-  return <></>;
-};
-export default FileItem;
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.scss b/src/files-ui/components/file-item/components/FileItem/FileItemNeo.scss
deleted file mode 100644
index 6a352b6f8cadf790ae4852b7321bb378d4c5acaa..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.scss
+++ /dev/null
@@ -1,227 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
-//@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
-@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,900");
-/* .file-item-full-list {
-  display: inline-flex;
-} */
-.file-item-full-container-container {
-  cursor: text;
-  box-sizing: border-box;
-  font-family: "Poppins", sans-serif;
-  //margin: 8px;
-  //height: 157px;
-  width: 132px;
-  word-break: break-word;
-  //outline: 1px solid rgb(20, 130, 220);
-  .file-item-icon-container {
-    position: relative;
-    height: 132px;
-    width: 132px;
-    border-radius: 8px;
-    .full-info {
-      &::-webkit-scrollbar {
-        width: 9px;
-      }
-      &::-webkit-scrollbar-track {
-        background: transparent;
-      }
-      &::-webkit-scrollbar-thumb {
-        background-color: #646c7fa9;
-        border-radius: 20px;
-        border: transparent;
-      }
-      text-align: left;
-      position: absolute;
-      left: 0;
-      top: 0;
-
-      scrollbar-width: thin;
-      line-height: 1.5;
-      letter-spacing: 0.02857em;
-      //border: 1px solid white;
-      font-family: "Poppins", sans-serif;
-      width: inherit;
-      background-color: rgba(0, 0, 0, 0.85);
-      word-break: break-word;
-      //margin: 1% 4%;
-      // padding: 1% 1%;
-      border-radius: 7px;
-      //z-index: 100;
-      height: 100%;
-      width: 100%;
-      font-size: 0.8rem;
-      transition: all 0.5s ease 0s;
-      //overflow: hidden;
-      overflow: auto;
-      color: white;
-      .name {
-        //margin: -7px 0 0 0;
-        padding: 0 5px;
-        font-weight: 399;
-        // text-align: center;
-
-        .sub-label {
-          font-weight: 600;
-        }
-        &.success {
-          border: 1px dashed #2e7d32;
-          background-color: #1b5e20;
-          //margin: 0 2px;
-          font-size: 0.7rem;
-
-          border-radius: 4px;
-        }
-        &.error {
-          background-color: #c62828;
-          border: 1px dashed #d32f2f;
-          font-size: 0.7rem;
-
-          //margin: 0 2px;
-          border-radius: 4px;
-        }
-      }
-      .size {
-        // margin-top: 5px;
-        padding: 0 5px;
-        font-weight: 500;
-        .sub-label {
-          font-weight: 600;
-        }
-      }
-      .mime {
-        //display: none;
-        //text-align: left;
-
-        padding: 0 5px;
-        font-weight: 399;
-        .sub-label {
-          font-weight: 600;
-        }
-      }
-
-      &.hide {
-        //height: 0%;
-        display: none;
-      }
-    }
-  }
-  .file-item-name {
-    margin-top: 3px;
-    height: 37px;
-    width: 133px;
-    color: black;
-    font-size: 0.95rem;
-    line-height: 0.85rem;
-    font-weight: 400;
-    letter-spacing: 0.125em;
-    word-break: break-all;
-    padding: 0.5px;
-    text-align: center;
-    &.not-allowed {
-      background-color: rgba(180, 16, 16, 0.7);
-    }
-  }
-}
-
-.file-item-container {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-
-.dui-file-item-icon {
-  font-size: 0.7rem;
-  //border: 1px solid wheat;
-  //color: white;
-  min-width: 19px;
-  min-height: 19px;
-  margin: 0;
-  padding: 2px 2px;
-  border-radius: 50%;
-  background-color: rgba(32, 33, 36, 0.65);
-
-  word-break: break-word;
-  &:hover {
-    background-color: rgba(32, 33, 36, 0.85);
-    //outline: 0.5px solid wheat;
-  }
-}
-
-//////////////////   TOOLTIP
-.dz-ui-file-item-container {
-  &.dz-ui-tooltip {
-    cursor: default;
-    position: relative;
-    display: inline-block;
-    // border-bottom: 1px dotted black;
-    &:hover {
-      z-index: 2;
-      .dropzone-ui-tooltiptext {
-        visibility: visible;
-        opacity: 1;
-        z-index: 2;
-      }
-    }
-    .dropzone-ui-tooltiptext {
-      font-family: "Poppins", sans-serif;
-      font-size: 0.8rem;
-      visibility: hidden;
-      width: 133px;
-      // background-color: green;
-      color: #fff;
-      text-align: center;
-      border-radius: 6px;
-      padding: 2px 2px;
-      position: absolute;
-      //z-index: 2;
-      //top: 190px;
-      top: 180px;
-      left: 66px;
-      margin-left: -60px;
-
-      /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
-      opacity: 0;
-      transition: opacity 1s;
-
-      &.not-valid-error {
-        background: linear-gradient(to top, #c62828, #d32f2f);
-        &::after {
-          border-color: transparent transparent #d32f2f transparent;
-        }
-      }
-      &.success {
-        //background-color: green;
-        background: linear-gradient(to top, #1b5e20, #2e7d32);
-        &::after {
-          border-color: transparent transparent #2e7d32 transparent;
-        }
-      }
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: 100%;
-        left: 50%;
-        margin-left: -5px;
-        border-width: 5px;
-        border-style: solid;
-        //border-color: transparent transparent green transparent;
-      }
-    }
-  }
-  &.dz-ui-paper-elevation-1 {
-    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-      0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-  }
-  .dz-ui-paper-elevation-2 {
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  }
-  .dz-ui-paper-elevation-3 {
-    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
-      0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
-  }
-  .dz-ui-paper-elevation-4 {
-    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-      0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-  }
-}
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.tsx b/src/files-ui/components/file-item/components/FileItem/FileItemNeo.tsx
deleted file mode 100644
index 85b823e32162fe3cf6311756a5a4f9f9cb46d4e2..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import * as React from "react";
-import "./FileItemNeo.scss";
-
-import FileItemFullInfoLayer from "../FileItemFullInfoLayer/FileItemFullInfoLayer";
-import FileItemImage from "../FileItemImage/FileItemImage";
-import Tooltip from "../../../tooltip/components/Tooltip";
-import useFileItemNeoClassName from "../../hooks/useFileItemNeoClassName";
-import { FileItemPropsNeo, FileItemNeoPropsDefault } from "./FileItemPropsNeo";
-import useFileItemNeoInitializer from "./useFileItemNeoInitializer";
-
-import FileItemImageNeo from "../FileItemImage/FileItemImageNeo";
-import useFileItemProgress from "../../hooks/useFileItemProgress";
-import FuiSkeleton from "../../../skeleton/FuiSkeleton";
-import { fileSizeFormater, shrinkWord } from "../../../../core";
-import { mergeProps } from "../../../overridable";
-import FileItemMainLayerNeo from "../FileItemMainLayer/MainLayer/FileItemMainLayerNeo";
-
-const FileItem: React.FC<FileItemPropsNeo> = (props: FileItemPropsNeo) => {
-  const {
-    file,
-    onDelete,
-    onSee,
-    onWatch,
-    style,
-    preview,
-    onlyImage,
-    info,
-    id,
-    valid,
-    uploadStatus,
-    uploadMessage,
-    hd,
-    localization,
-    errors,
-    imageUrl,
-    elevation,
-    alwaysActive,
-    resultOnTooltip,
-    downloadUrl,
-    onDownload,
-    progress,
-    onAbort,
-    xhr,
-    onCancel,
-    showProgress,
-  } = mergeProps(props, FileItemNeoPropsDefault);
-  //ref for anchor element
-  const dui_anchor_ref = React.useRef<HTMLAnchorElement>(null);
-  //Initialize image properties for FileItem
-  const localProgress = useFileItemProgress(progress, showProgress, xhr);
-
-  const [isImage, isVideo, url, imageSource]: [
-    boolean,
-    boolean,
-    string,
-    string | undefined
-  ] = useFileItemNeoInitializer(file, valid, preview as boolean, imageUrl);
-  //console.table({isImage, isVideo, url, imageSource, localProgress} );
-  //className created
-  const classNameCreated = useFileItemNeoClassName(
-    resultOnTooltip as boolean,
-    elevation
-  );
-  //state for actionOnHover
-  const [hovering, setHOvering] = React.useState<boolean>(false);
-  const handleOnHoverEnter: React.MouseEventHandler<HTMLDivElement> = () => {
-    setHOvering(true);
-  };
-  const handleOnHoverLeave: React.MouseEventHandler<HTMLDivElement> = () => {
-    setHOvering(false);
-  };
-
-  //size
-  const sizeFormatted: string = file ? fileSizeFormater(file.size) : "0 KB";
-  //alwaysActive
-  const [showInfo, setShowInfo] = React.useState<boolean>(false);
-  //delete file item
-  const handleDelete = (): void => {
-    onDelete?.(id);
-  };
-  //open info layer
-  const handleOpenInfo = () => {
-    setShowInfo(true);
-  };
-  //close info layer
-  const handleCloseInfo = () => {
-    setShowInfo(false);
-  };
-  //handle watch video
-  const handleOpenVideo = async () => {
-    if (file) onWatch?.(file);
-  };
-  //open image
-  const handleOpenImage = async () => {
-    if (imageSource && file) {
-      //  if (hd) {
-      //    const response = await readImagePromise(file);
-      //    onSee?.(response || "");
-      //  } else {
-      onSee?.(imageSource);
-      //}
-    }
-  };
-  function handleClick<T extends HTMLDivElement>(
-    e: React.MouseEvent<T, MouseEvent>
-  ): void {
-    //avoid children to trigger onClick ripple from parent
-    e.stopPropagation();
-  }
-  /**
-   * onDownload, form 1
-   * Trigger dowload directly performing a click on anchor element
-   */
-  const innerDownload = () => {
-    const anchorElement = dui_anchor_ref.current;
-    if (anchorElement) {
-      anchorElement.click();
-    }
-  };
-  /**
-   * onDownlad, form 2
-   * Handle the download triggering an outside event
-   */
-  const handleDownload = () => {
-    if (onDownload) {
-      onDownload?.(id, downloadUrl);
-    } else if (typeof downloadUrl == "string") {
-      innerDownload();
-    }
-  };
-  /**
-   * Perform abort event when xhr is given
-   */
-  const handleAbort = (): void => {
-    //trigger abort event
-    xhr?.abort();
-    // handle externally the abort event
-    onAbort?.(id);
-  };
-  /**
-   * Handle onCancel event
-   */
-  const handleCancel = (): void => {
-    // handle externally the cancel event
-    onCancel?.(id);
-  };
-
-  const handleDoubleClick = (): void => {
-    alert("double click on file");
-  };
-  if (file && typeof file.name == "string") {
-    if (classNameCreated) {
-      return (
-        <div
-          className={classNameCreated}
-          style={style}
-          onClick={handleClick}
-          onMouseEnter={handleOnHoverEnter}
-          onMouseLeave={handleOnHoverLeave}
-          onDoubleClick={handleDoubleClick}
-        >
-          <div
-            className={`file-item-icon-container ${showInfo ? " hide" : ""}`}
-          >
-            <FileItemImageNeo
-              imageSource={imageSource}
-              url={url}
-              fileName={file.name}
-            />
-
-            <FileItemMainLayerNeo
-              showInfo={showInfo}
-              fileName={file.name}
-              onDelete={onDelete ? handleDelete : undefined}
-              onOpenImage={onSee && preview ? handleOpenImage : undefined}
-              onOpenVideo={onWatch && preview ? handleOpenVideo : undefined}
-              onDownloadFile={
-                onDownload || downloadUrl ? handleDownload : undefined
-              }
-              isVideo={isVideo}
-              onOpenInfo={handleOpenInfo}
-              info={info || false}
-              valid={valid}
-              isImage={isImage}
-              sizeFormatted={sizeFormatted}
-              uploadStatus={uploadStatus}
-              localization={localization}
-              hovering={alwaysActive || hovering}
-              progress={localProgress}
-              onAbort={onAbort ? handleAbort : undefined}
-              onCancel={onCancel ? handleCancel : undefined}
-            />
-
-            <FileItemFullInfoLayer
-              showInfo={showInfo}
-              errors={errors}
-              fileName={file.name}
-              fileSize={fileSizeFormater(file.size)}
-              fileType={file.type}
-              valid={valid}
-              onClose={handleCloseInfo}
-              uploadStatus={uploadStatus}
-              uploadMessage={uploadMessage}
-              localization={localization}
-              resultOnTooltip={resultOnTooltip}
-            />
-          </div>
-
-          {!onlyImage && (
-            <div className="file-item-name">{shrinkWord(file.name)}</div>
-          )}
-          {
-            //resultOnTooltip && (
-            <Tooltip
-              open={resultOnTooltip && hovering}
-              //open={true}
-              uploadStatus={uploadStatus}
-              valid={valid}
-              errors={errors}
-              uploadMessage={uploadMessage}
-            ></Tooltip>
-            //)
-          }
-          {downloadUrl && (
-            <a
-              hidden
-              ref={dui_anchor_ref}
-              href={downloadUrl}
-              download={file.name}
-            >
-              download_file
-            </a>
-          )}
-        </div>
-      );
-    } else {
-      return (
-        <React.Fragment>
-          <FuiSkeleton />
-        </React.Fragment>
-      );
-    }
-  } else {
-    return <React.Fragment></React.Fragment>;
-  }
-};
-export default FileItem;
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemProps.ts b/src/files-ui/components/file-item/components/FileItem/FileItemProps.ts
deleted file mode 100644
index 7f5366bac2e083037293eb353739b605e96e66ed..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/FileItemProps.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-import { Localization, UPLOADSTATUS } from "../../../../core";
-import { OverridableComponentProps } from "../../../overridable";
-
-export interface FileItemPropsMap extends OverridableComponentProps {
-    /**
-    * The file object obtained from client drop or selection
-    */
-    file?: File;
-    /**
-     * The name of the file
-     */
-    name?: string;
-    /**
-     * The file mime type
-     */
-    type?: string;
-    /**
-     * the size of the file in bytes
-     */
-    size?: number;
-    /**
-     * A function of what to do when close button is pressed or clicked
-     */
-    onDelete?: (fileId: number | string | undefined) => void;
-    /**
-     * A function that return a file object when "see" button is pressed or clicked
-     */
-    onSee?: (imageUrl: string) => void;
-    /**
-     * A function that return a file object when "play" button is presssed or clicked
-     */
-    onWatch?: (videoUrl: File) => void;
-    /**
-     * Whether to see as grid or inline (horizontal list)
-     */
-    errors?: string[];
-    /**
-     * individual validator for each file
-     */
-    //validator?: FileItemValidator;
-    /**
-     * identifier for the file
-     */
-    id?: string | number;
-    /**
-     * if true, and if the file is an image,
-     * makes visible the "view" button that will get the image url
-     * Also, it will be visible only when file is valid
-     */
-    preview?: boolean;
-    /**
-    * whether to show a valid or rejected message ("ok", "rejected")
-    * by def. valid is false (if not present, it's false too)
-    * This value wil affect preview behaviour,
-    * If not valid, the preview will not be shown, nor the view button
-    */
-    valid?: boolean | null;
-    /**
-    * This feature is hidden, it is not present on the documentation
-    * because it's experimental. If you found this prop, you can test it 
-    * and comment us if any issue is found. Thanks in advance.
-    * 
-    * Make file name, info layer, size and "valid message"
-    * not visible
-    */
-    onlyImage?: boolean;
-    /** 
-     * whether to show the info layer or not
-     * and whether to make visible the info button or not.
-     * Only works when image file is given
-     */
-    info?: boolean;
-    /**
-     * A string representation or web url of the image
-     * that will be set to the "src" prop of an <img/> tag
-     * <img src={`${url}`} />
-     */
-    imageUrl?: string;
-    /**
-     * The message from server
-     */
-    uploadMessage?: string;
-    /**
-     * where to place the file name
-     * [in construction]
-     */
-    //fileName?: "bottom" | "inside";
-    /**
-     * The current upload status of the file
-     */
-    uploadStatus?: UPLOADSTATUS;
-    /**
-     * If present, preview on full screen will
-     * be presented in the real image resolution
-     */
-    hd?: boolean | undefined;
-    /**
-     * language to be used
-     * for now
-     * only English and Spanish is supported
-     */
-    localization?: Localization;
-    /**
-     * The elevation or shadow of container
-     * range of shadows is from 0 to 4,
-     * other number o values are considered as 0
-     */
-    elevation?: "1" | "2" | "3" | "4" | 1 | 2 | 3 | 4 | false;
-    /**
-     * Flag that determines whether actions are visible always, or only on hover event
-     */
-    alwaysActive?: boolean;
-    /**
-     * Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem
-     */
-    resultOnTooltip?: boolean;
-    /**
-     * Url to perform a GET request in order to download the file.
-     * This  action is triggered when download button is clicked or pressed.
-     * In case onDownload prop is given
-     */
-    downloadUrl?: string;
-    /**
-     * Event that is triggered when download button is clicked or pressed
-     */
-    onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void;
-    /**
-     * the current percentage upload progress
-     *
-     */
-    progress?: number;
-    /**
-     * Whether to show progress or not.
-     * @default true if xhr is initialized
-     * @default false if xhr is not given
-     */
-    showProgress?: boolean;
-    /**
-     * abort event
-     */
-    onAbort?: Function;
-    /**
-     * cancel when preparing event
-     */
-    onCancel?: Function;
-    /**
-     * A reference to the XHR object that allows the upload and abort event.
-     *  and progress
-     */
-    xhr?: XMLHttpRequest;
-    /**
-     * Event that is triggered when user duble clicks the component
-     */
-    onDoubleClick?: (evt: React.MouseEvent) => void;
-    /**
-     * Event that is triggered when user duble clicks the component
-     */
-    onRightClick?: (evt: React.MouseEvent) => void;
-
-    /**
-     * Flag that indicates whether to show a background blur image or not
-     */
-    backgroundBlurImage?: boolean;
-    /**
-    * Flag that indicates whether to activates dark mode for component or not
-    */
-    darkMode?: boolean;
-}
-
-export type FileItemProps = {
-    [F in keyof FileItemPropsMap]: FileItemPropsMap[F]
-}
-
-/**
- * Base default props
- */
-export const FileItemPropsDefault: FileItemProps = {
-    onDelete: undefined,
-    file: undefined,
-    color: "#071e25",
-    //  validator: undefined,
-    id: undefined,
-    style: {},
-    preview: false,
-    valid: undefined,
-    info: false,
-    hd: undefined,
-    localization: "EN-en",
-    onlyImage: false,
-    imageUrl: undefined,
-    errors: undefined,
-    elevation: false,
-    alwaysActive: undefined,
-    progress: undefined,
-    resultOnTooltip: true,
-    backgroundBlurImage: true,
-    darkMode: false,
-    //fileName: "bottom"
-}
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemPropsNeo.ts b/src/files-ui/components/file-item/components/FileItem/FileItemPropsNeo.ts
deleted file mode 100644
index 81fa8390ddecae3d7d79383bc23996f721524469..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/FileItemPropsNeo.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-import { Localization, UPLOADSTATUS } from "../../../../core";
-import { OverridableComponentProps } from "../../../overridable";
-
-
-
-export interface FileItemPropsNeoMap extends OverridableComponentProps {
-    /**
-     * The file object
-     */
-    file?: File;
-    /**
-     * A function of what to do when close button is pressed or clicked
-     */
-    onDelete?: (fileId: number | string | undefined) => void;
-    /**
-     * A function that return a file object when "see" button is pressed or clicked
-     */
-    onSee?: (imageUrl: string) => void;
-    /**
-     * A function that return a file object when "play" button is presssed or clicked
-     */
-    onWatch?: (videoUrl: File) => void;
-    /**
-     * Whether to see as grid or inline (horizontal list)
-     */
-    errors?: string[];
-    /**
-     * individual validator for each file
-     */
-    //validator?: FileItemValidator;
-    /**
-     * identifier for the file
-     */
-    id?: string | number;
-    /**
-     * if true, and if the file is an image,
-     * makes visible the "view" button that will get the image url
-     * Also, it will be visible only when file is valid
-     */
-    preview?: boolean;
-    /**
-    * whether to show a valid or rejected message ("ok", "rejected")
-    * by def. valid is false (if not present, it's false too)
-    * This value wil affect preview behaviour,
-    * If not valid, the preview will not be shown, nor the view button
-    */
-    valid?: boolean | null;
-    /**
-    * This feature is hidden, it is not present on the documentation
-    * because it's experimental. If you found this prop, you can test it 
-    * and comment us if any issue is found. Thanks in advance.
-    * 
-    * Make file name, info layer, size and "valid message"
-    * not visible
-    */
-    onlyImage?: boolean;
-    /** 
-     * whether to show the info layer or not
-     * also whether to make visible the info button or not ,
-     * Only works when given a image file
-     */
-    info?: boolean;
-    /**
-     * A string representation or web url of the image
-     * that will be set to the "src" prop of an <img/> tag
-     * <img src={`${url}`} />
-     */
-    imageUrl?: string;
-    /**
-     * The message from server
-     */
-    uploadMessage?: string;
-    /**
-     * where to place the file name
-     * [in construction]
-     */
-    //fileName?: "bottom" | "inside";
-    /**
-     * The current upload status of the file
-     */
-    uploadStatus?: UPLOADSTATUS;
-    /**
-     * If present, preview on full screen will
-     * be presented in the real image resolution
-     */
-    hd?: boolean | undefined;
-    /**
-     * language to be used
-     * for now
-     * only English and Spanish is supported
-     */
-    localization?: Localization;
-    /**
-     * The elevation or shadow of container
-     * range of shadows is from 0 to 4,
-     * other number o values are considered as 0
-     */
-    elevation?: "1" | "2" | "3" | "4" | 1 | 2 | 3 | 4 | false;
-    /**
-     * Flag that determines whether actions are visible always, or only on hover event
-     */
-    alwaysActive?: boolean;
-    /**
-     * Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem
-     */
-    resultOnTooltip?: boolean;
-    /**
-     * Url to perform a GET request in order to download the file.
-     * This  action is triggered when download button is clicked or pressed.
-     * In case onDownload prop is given
-     */
-    downloadUrl?: string;
-    /**
-     * Event that is triggered when download button is clicked or pressed
-     */
-    onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void;
-    /**
-     * the current percentage upload progress
-     *
-     */
-    progress?: number;
-    /**
-     * Whether to show progress or not.
-     * @default true if xhr is initialized
-     */
-    showProgress?: boolean;
-    /**
-     * abort event
-     */
-    onAbort?: Function;
-    /**
-     * cancel when preparing event
-     */
-    onCancel?: Function;
-    /**
-     * A reference to the XHR object that allows the upload and abort event.
-     *  and progress
-     */
-    xhr?: XMLHttpRequest;
-}
-export type FileItemPropsNeo = {
-    [F in keyof FileItemPropsNeoMap]: FileItemPropsNeoMap[F]
-}
-/**
- * Base default props
- */
-export const FileItemNeoPropsDefault: FileItemPropsNeo = {
-    onDelete: undefined,
-    file: undefined,
-    //color: "#071e25",
-    //  validator: undefined,
-    id: undefined,
-    style: {},
-    preview: false,
-    valid: undefined,
-    info: false,
-    hd: undefined,
-    localization: "EN-en",
-    onlyImage: false,
-    imageUrl: undefined,
-    errors: undefined,
-    elevation: false,
-    alwaysActive: undefined,
-    progress: undefined,
-    showProgress: true
-    //fileName: "bottom"
-}
diff --git a/src/files-ui/components/file-item/components/FileItem/useFileItemNeoInitializer.ts b/src/files-ui/components/file-item/components/FileItem/useFileItemNeoInitializer.ts
deleted file mode 100644
index 94e5c582a215ffafd552d17de1ef5d948369f525..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItem/useFileItemNeoInitializer.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import * as React from "react";
-import { getURLFileIco, readAsDataURL } from "../../../../core";
-
-/**
- * Initializer hook for FileItemNeo
- * @param file The file Object
- * @param valid Whether the file is valid, not valid or not set
- * @param preview Whether to show a preview on FileItem
- * @param imageUrl The image url
- * @param xhr the xhr object
- * @param progress the current progress given by props
- * @returns an array thta contains the following properties [isImage, isVideo, url, imageSource, localProgress]
- */
-const useFileItemNeoInitializer = (
-    file: File | undefined,
-    valid: boolean | undefined | null,
-    preview: boolean,
-    imageUrl: string | undefined,
-    xhr?: XMLHttpRequest,
-
-): [boolean, boolean, string, string | undefined] => {
-
-    const [isImage, setIsImage] = React.useState<boolean>(false);
-    const [isVideo, setIsVideo] = React.useState<boolean>(false);
-    const [url, setUrl] = React.useState<string>("");
-    const [imageSource, setImageSource] = React.useState<string | undefined>(undefined);
-    
-  
-
-    const init = async (
-        file: File | undefined,
-        valid: boolean | undefined | null,
-        preview: boolean,
-        imageUrl: string | undefined,
-        xhr?: XMLHttpRequest, 
-        progress?: number
-    ) => {
-        //////////////////////////////
-        if (!file) return;
-        const { url } = getURLFileIco(file as File);
-        //console.log("init", url);
-        setUrl(url);
-        if (imageUrl) {
-            setIsImage(true);
-            setImageSource(imageUrl);
-            return;
-        } else {
-            const headerMime: string = file.type ? file.type.split("/")[0] : "octet";
-            const tailMime: string = file.type ? file.type.split("/")[1] : "octet";
-            setIsImage(headerMime === "image");
-            setIsVideo(
-                headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime)
-            );
-            if (
-                preview &&
-                (valid || typeof valid === "undefined" || valid === null) &&
-                headerMime === "image"
-            ) {
-                const response = await readAsDataURL(file);
-                //console.log("response image", response);
-                if (response) {
-                    setImageSource(response as string);
-                    //check if resize image is enabled
-                } else {
-                    setImageSource(undefined);
-                }
-            }
-        }
-        /////////////// UPLOAD OBJECT ///////////////
-        
-        //if (!localProgress) {
-        //handleProgress(1);
-        //}
-    };
-
-
-
-    //////   EFFECT
-    React.useEffect(() => {
-        init(file, valid, preview || false, imageUrl);
-        return () => {
-            setImageSource(undefined);
-            setIsImage(false);
-            setIsVideo(false);
-        };
-        // eslint-disable-next-line
-    }, [file, valid, preview, imageUrl,]);
-    return [isImage, isVideo, url, imageSource];
-}
-export default useFileItemNeoInitializer;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.scss b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.scss
deleted file mode 100644
index c6360df97f6d598e21696943e631e8503a522517..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.file-item-list-container {
- // padding: 5px;
-  //z-index: 1;
-  &::-webkit-scrollbar {
-    width: 9px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #646c7fa9;
-    border-radius: 20px;
-    border: transparent;
-  }
-  //margin: 25px 0;
-  //background-color: rgba(255, 255, 255, 0.596);
-  background-color: transparent;
-  color: black;
-  height: 100%;
-  //width: 100%;
-  width: 100%;
-  //margin: 100px 0;
-  //width: inherit;
-  
-  // padding: 2%;
-  align-items: center;
-  scrollbar-width: thin;
-  &.file-item-list-grid {
-    overflow: auto;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-evenly;
-  }
-  &.file-item-list-no-scroll{
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-evenly;
-    overflow: unset;
-  }
-  &.file-item-list-list {
-    overflow: auto;
-    //flex-wrap: wrap;
-    align-items: center;
-    //justify-content: center;
-    display: inline-flex;
-  }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.tsx b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.tsx
deleted file mode 100644
index a61211c3b26d787f6d1cbce529d0f9168664d002..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import "./FileItemContainer.scss";
-
-import React, { FC } from "react";
-import { FileItemContainerProps } from "./FileItemContainerProps";
-
-const FileItemContainer: FC<FileItemContainerProps> = (
-  props: FileItemContainerProps,
-) => {
-  const { children, view, style, disableScroll } = props;
-  const finalView = disableScroll ? "no-scroll" : view || "list";
-  /*  function handleClick<T extends HTMLDivElement>(
-    e: React.MouseEvent<T, MouseEvent>
-  ): void {
-    e.preventDefault();
-  } */
-  return (
-    <div
-      className={`file-item-list-container file-item-list-${finalView}`}
-      style={style}
-      //onClick={handleClick}
-    >
-      {children}
-    </div>
-  );
-};
-export default FileItemContainer;
diff --git a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainerProps.ts b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainerProps.ts
deleted file mode 100644
index aa3cc9463dad11e4b2ad9eea988ab824099fbcca..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainerProps.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { OverridableComponentProps } from "../../../overridable";
-
-export interface FileItemContainerProps extends OverridableComponentProps {
-  /**
-   * `grid` will display files in a grid layout. `list` will display 
-   * files in a horizontal list. 
-   * Convenient for saving space in page.
-   */
-  view?: "grid" | "list";
-  /**
- * if present or true, removes scrolls
- * and sets the Dropzone in a grid view
- */
-  disableScroll?: boolean;
-}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx b/src/files-ui/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx
deleted file mode 100644
index e0d859f802e988f0f8bedcc7f791593130545305..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import * as React from "react";
-import {
-  FileItemLocalizerSelector,
-  Localization,
-  LocalLabels,
-  UPLOADSTATUS,
-} from "../../../../core";
-import { Cancel } from "../../../icons";
-import FileItemStatus from "../FileItemStatus/FileItemStatus";
-
-const FileItemFullInfoLayer: React.FC<FileItemFullInfoLayerProps> = (
-  props: FileItemFullInfoLayerProps
-) => {
-  const {
-    showInfo,
-    valid,
-    onClose,
-    fileName,
-    fileSize,
-    fileType,
-    uploadStatus,
-    uploadMessage,
-    localization,
-    errors,
-    resultOnTooltip,
-  } = props;
-  const FileItemFullInfoLocalizer: LocalLabels = FileItemLocalizerSelector(
-    localization as Localization
-  ).fullInfoLayer as LocalLabels;
-  const handleCloseInfo = () => {
-    onClose?.();
-  };
-  return (
-    <div className={showInfo ? "full-info" : "full-info hide"}>
-      <span
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          alignItems: "center",
-          justifyContent: "space-between",
-        }}
-      >
-        <Cancel
-          style={{ margin: 0, right: 0, top: 0 }}
-          color="rgba(255,255,255,0.8)"
-          onClick={handleCloseInfo}
-          colorFill="black"
-        />
-        {uploadStatus && uploadStatus !== "uploading" ? (
-          <FileItemStatus
-            uploadStatus={uploadStatus}
-            localization={localization as Localization}
-          />
-        ) : (
-          <FileItemStatus
-            valid={valid}
-            localization={localization as Localization}
-          />
-        )}
-      </span>
-
-      {!resultOnTooltip && !uploadMessage && errors && errors.length > 0 && (
-        <div className={`name error`}>
-          {errors.map((error, index) => (
-            <div key={index + 1}>{`- ${error}.\n`}</div>
-          ))}
-        </div>
-      )}
-      {!resultOnTooltip && uploadMessage && (
-        <div className={`name ${uploadStatus}`}>{uploadMessage}</div>
-      )}
-      <div className="name">
-        <span className="sub-label">
-          {FileItemFullInfoLocalizer.name as string}
-          {/* localization === "ES-es" ? "Nombre: " : "Name: " */}
-        </span>
-      </div>
-      <div className="name">{fileName}</div>
-      {/** FILE SIZE */}
-      <div className="size">
-        <span className="sub-label">
-          {FileItemFullInfoLocalizer.size as string}
-        </span>
-      </div>
-      <div className="name">{fileSize}</div>
-      {/** FILE TYPE */}
-      <div className="mime">
-        <span className="sub-label">
-          {FileItemFullInfoLocalizer.type as string}
-        </span>
-      </div>
-      {fileType && <div className="mime">{fileType}</div>}
-    </div>
-  );
-};
-export default FileItemFullInfoLayer;
-
-export interface FileItemFullInfoLayerProps {
-  showInfo: boolean;
-  fileName: string;
-  fileSize: string;
-  fileType?: string;
-  valid?: boolean | null;
-  onClose: Function;
-  uploadMessage?: string;
-  uploadStatus?: UPLOADSTATUS;
-  /**
-   * language to be used
-   * for now
-   * only English and Spanish is supported
-   */
-  localization?: Localization;
-  errors?: string[];
-  /**
-   * Whether to display result of validation on InfoLayer or in tooltip on Hover FileItem
-   */
-  resultOnTooltip?: boolean;
-}
diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.scss b/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.scss
deleted file mode 100644
index 6bba9ac25397b7af26585c8110bfafe5090e0722..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.fui-img-container {
-  &.blur {
-    img {
-      filter: blur(4px);
-      width: 200%;
-      height: 200%;
-    }
-  }
-  &.card {
-    position: relative;
-    width: 80px;
-    //height: 80px;
-  }
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: inherit;
-  height: inherit;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  border-radius: 8px;
-  //z-index: -1;
-  img {
-    //filter: blur(0);
-    width: 100%;
-    //height: 100%;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-  }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.tsx b/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.tsx
deleted file mode 100644
index a557543c96df541fd34bca5b5720560dec5b851d..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from "react";
-import { ImagePreview } from "../../../previews";
-import "./FileItemImage.scss";
-export interface FileItemImageProps {
-  /**
-   * The image source
-   */
-  imageSource: string | undefined;
-  /**
-   * the url file icon
-   */
-  url: string;
-  /**
-   * The name to be used as alt
-   */
-  fileName: string;
-  /**
-   * Flag that indicates whether to show a background blur image or not
-   */
-  backgroundBlurImage: boolean;
-  /**
-   *
-   */
-  card?: boolean;
-}
-
-const FileItemImage: React.FC<FileItemImageProps> = (
-  props: FileItemImageProps
-) => {
-  const { imageSource, url, fileName, backgroundBlurImage, card } = props;
-  const [source, setSource] = React.useState<string | undefined>(undefined);
-  const [error, setError] = React.useState<boolean>(false);
-  React.useEffect(() => {
-    setSource(imageSource || url);
-  }, [imageSource, url]);
-  const handleError = () => {
-    setError(true);
-    setSource(url);
-  };
-  return (
-    <React.Fragment>
-      {!card && backgroundBlurImage && imageSource && !error && (
-        <div className="fui-img-container blur">
-          <ImagePreview src={imageSource} alt={`blur ${fileName}`} />
-        </div>
-      )} 
-      <div className={!card ? "fui-img-container" : "fui-img-container card"}>
-        <ImagePreview
-          onError={handleError}
-          src={source}
-          style={{ borderRadius: "0px" }}
-          alt={`preview ${fileName}`}
-        />
-      </div>
-    </React.Fragment>
-  );
-};
-export default FileItemImage;
diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.scss b/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.scss
deleted file mode 100644
index 2c8763f883114987478426dde35b042bd0b06e31..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.dui-img-container {
-    &.blur {
-      img {
-        filter: blur(4px);
-        width: 200%;
-        height: 200%;
-      }
-    }
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: inherit;
-    height: inherit;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    border-radius: 8px;
-    //z-index: -1;
-    img {
-      //filter: blur(0);
-      width: 100%;
-      //height: 100%;
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-position: center;
-    }
-  }
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.tsx b/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.tsx
deleted file mode 100644
index 88993471f8af008a6c406be22c8bee90735c9557..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from "react";
-import { ImagePreview } from "../../../previews";
-import "./FileItemImageNeo.scss";
-export interface FileItemImageNeoProps {
-  /**
-   * The image source
-   */
-  imageSource: string | undefined;
-  /**
-   * the url file icon
-   */
-  url: string;
-  /**
-   * The name to be used as alt
-   */
-  fileName: string;
-}
-
-const FileItemImageNeo: React.FC<FileItemImageNeoProps> = (
-  props: FileItemImageNeoProps
-) => {
-  const { imageSource, url, fileName } = props;
-  return (
-    <React.Fragment>
-      {imageSource && (
-        <div className="dui-img-container blur">
-          <ImagePreview
-            //className="dui-img-container blur"
-
-            src={imageSource}
-            alt={`blur ${fileName}`}
-          />
-        </div>
-      )}
-      <div className="dui-img-container">
-        <ImagePreview
-          // className="dui-img-container"
-          src={imageSource || url}
-          style={{ borderRadius: "0px" }}
-          alt={`preview ${fileName}`}
-        />
-      </div>
-    </React.Fragment>
-  );
-};
-export default FileItemImageNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.scss
deleted file mode 100644
index eb1e1d29f5e7895420292eeceb47994c6fdae58a..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-.dui-loader-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.svg_circle_loader {
-  border-radius: 50%;
-}
-
-text.dui-text-dynamic-loader {
-  text-anchor: middle;
-  font-size: 1em;
-  fill: aliceblue;
-}
-.loader-container {
-  height: 60px;
-  width: 60px;
-  position: relative;
-  outline: 1px solid skyblue;
-}
-
-////////////////////////////////////
-
-.dui-main-loader-container {
-  position: relative;
-  min-width: 60px;
-  min-height: 60px;
-  background-color: rgba(0, 0, 0, 0.41);
-  border-radius: 50%;
-  
-  &.clickable{
-    cursor: pointer;
-  }
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.61);
-  }
-  .dui-abort-icon-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .dui-dynamic-preparing-loader-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-.x-button-abort {
-  position: absolute;
-  left: 8px;
-  top: 8px;
-  width: calc(100% - 16px);
-  height: calc(100% - 16px);
-  border-radius: 50%;
-  overflow: hidden;
-  fill: rgba(255, 255, 255, 0.808);
-}
-.x-button-abort:hover {
-  fill: rgba(255, 255, 255, 0.925);
-}
-.circle_loader {
-  fill: none;
-  stroke: #14ff00;
-  stroke-width: 6px;
-  transform-origin: center;
-  transform: rotate(-90deg);
-}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx
deleted file mode 100644
index 590375f840c3a7667d1e8cc36bb5174d2ff45af1..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import * as React from "react";
-import {
-  FileItemLocalizerSelector,
-  Localization,
-  LocalLabels,
-  UPLOADSTATUS,
-} from "../../../../../core";
-import { Clear } from "../../../../icons";
-import { DynamicLoader, BasePreparingLoader } from "../../../../loader";
-import DefaultLoaderNeo from "../../../../loader/DefaultLoader/DefaultLoader";
-import "./FileItemLoader.scss";
-interface FileItemLoaderProps {
-  height?: number;
-  width?: number;
-  uploadStatus?: UPLOADSTATUS;
-  /**
-   * language to be used for now
-   * only English, Russian, Chinesse, French, protuguese and Spanish is supported
-   */
-  localization?: Localization;
-  /**
-   * the current percentage upload progress
-   */
-  progress?: number;
-  /**
-   * abort event
-   */
-  onAbort?: Function;
-  /**
-   * cancel event
-   */
-  onCancel?: Function;
-}
-const FileItemLoader: React.FC<FileItemLoaderProps> = (
-  props: FileItemLoaderProps
-) => {
-  const {
-    uploadStatus,
-    localization,
-    progress,
-    onAbort,
-    width,
-    //height,
-    onCancel,
-  } = props;
-  //console.log("uploadStatus cancel",uploadStatus, onCancel);
-  const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
-    localization
-  ).status as LocalLabels;
-  // console.log("Loader", progress);
-  const circleRef: React.RefObject<SVGCircleElement> =
-    React.useRef<SVGCircleElement>(null);
-
-  function setProgress(
-    percent: number,
-    myCircle: SVGCircleElement,
-    circumference: number
-  ) {
-    myCircle.style.strokeDashoffset = `${circumference * (1 - percent / 100)}`;
-  }
-
-  React.useEffect(() => {
-    const myCircle: SVGCircleElement | null = circleRef.current;
-    if (myCircle && progress) {
-      //console.log("CIRCLE", progress, progress === 0 ? 1 : progress);
-      let circumference: number = 2 * Math.PI * myCircle.r.baseVal.value;
-      myCircle.style.strokeDasharray = `${circumference} 1000`;
-      setProgress(progress === 0 ? 1 : progress, myCircle, circumference);
-    }
-  }, [progress]);
-  const handleAbort = () => {
-    onAbort?.();
-  };
-  const handleCancel = () => {
-    onCancel?.();
-  };
-  //console.log("Loader onCancel", onCancel);
-  if (!uploadStatus) {
-    return <></>;
-  }
-  return (
-    <React.Fragment>
-      {uploadStatus === "preparing" && (
-        <React.Fragment>
-          <div
-            className="dui-main-loader-container clickable"
-            onClick={handleCancel}
-          >
-            {onCancel && (
-              <div className="dui-abort-icon-container">
-                <Clear
-                  color="rgba(255,255,255,0.70)"
-                  size={60}
-                  colorFill="transparent"
-                />
-              </div>
-            )}
-
-            <div className="dui-dynamic-preparing-loader-container">
-              <BasePreparingLoader
-                size={width || 60}
-                x={50}
-                y={50}
-                radius={46}
-              />
-            </div>
-          </div>
-        </React.Fragment>
-      )}
-
-      {uploadStatus === "uploading" && (
-        <React.Fragment>
-          {typeof progress === "undefined" ? (
-            <DefaultLoaderNeo
-              label={FileItemStatusLocalizer.uploading as string}
-            />
-          ) : (
-            <div
-              className={`dui-main-loader-container${
-                onAbort ? " clickable" : ""
-              }`}
-              onClick={handleAbort}
-            >
-              <div className="dui-abort-icon-container">
-                {onAbort && (
-                  <Clear
-                    color="rgba(255,255,255,0.70)"
-                    size={60}
-                    colorFill="transparent"
-                  />
-                )}
-              </div>
-              <div className="dui-dynamic-preparing-loader-container">
-                <DynamicLoader
-                  size={width || 60}
-                  x={30}
-                  y={30}
-                  radius={27}
-                  percentage={progress}
-                  width={6}
-                  hidePerncentage={onAbort !== undefined}
-                />
-              </div>
-            </div>
-          )}
-        </React.Fragment>
-      )}
-    </React.Fragment>
-  );
-};
-export default FileItemLoader;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.scss
deleted file mode 100644
index 2ffe154f923c891c9a3143862d8600097d853b55..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.dui-file-item-size {
-  font-size: 0.7rem;
-  border: 0.5px solid wheat;
-  //outline: 0.5px solid wheat;
-  text-align: center;
-  //border: none;
-  color: rgba(255, 255, 255, 0.89);
-  //margin: 1.5px 1.5px 0% 0%;
-  padding: 2px 1.5px;
-  border-radius: 7px;
-  background-color: rgba(32, 33, 36, 0.75);
-  min-width: 45px;
-  word-break: break-word;
-  font-family: inherit;
-  &:hover {
-    background-color: rgba(32, 33, 36, 0.85);
-    color: rgba(255, 255, 255, 0.97);
-  }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.tsx
deleted file mode 100644
index 4f431faaa02967d5ae1d872a560b0eb3ce717722..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from "react";
-import "./FileItemSize.scss";
-export type FileItemSizeProps = {
-  sizeFormatted?: string;
-};
-const FileItemSize: React.FC<FileItemSizeProps> = (
-  props: FileItemSizeProps
-) => {
-  const { sizeFormatted } = props;
-  return (
-    <React.Fragment>
-      {sizeFormatted && (
-        <div className="dui-file-item-size">{sizeFormatted}</div>
-      )}
-    </React.Fragment>
-  );
-};
-export default FileItemSize;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.scss
deleted file mode 100644
index b72e2de0161a506e0aa4345ce276bc3ece9028fd..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.dui-main-layer-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-    height: inherit;
-    width: 100%;
-    border-radius: 8px;
-    &.loading{
-        background-color: rgba(0, 0, 0, 0.185);
-    }
-}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.tsx
deleted file mode 100644
index 716a3eda50cad83872c09e421c868bba7e87aa16..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from "react";
-import "./FileItemMainLayer.scss";
-
-import MainLayerHeaderNeo from "../MainLayerHeader/MainLayerHeaderNeo";
-import MainLayerBodyNeo from "../MainLayerBody/MainLayerBodyNeo";
-import MainLayerFooterNeo from "../MainLayerFooter/MainLayerFooterNeo";
-import { Localization, UPLOADSTATUS } from "../../../../../core";
-
-export interface FileItemMainLayerProps {
-  onOpenInfo: Function;
-  onOpenImage: Function | undefined;
-  onOpenVideo: Function | undefined;
-  onDelete: Function | undefined;
-  onDownloadFile: Function | undefined;
-  //fileNamePosition: FileItemProps["fileName"];
-  fileName: string;
-  info: boolean;
-  /**
-   * whether show a valid or rejected message
-   * by def. valid is false (if not present, is false too)
-   */
-  valid?: boolean | null;
-  isImage: boolean;
-  isVideo: boolean;
-  uploadStatus?: UPLOADSTATUS;
-  sizeFormatted: string;
-  /**
-   * language to be used
-   * for now
-   * only English and Spanish is supported
-   */
-  localization?: Localization;
-  hovering?: boolean;
-  /**
-   * the current percentage upload progress
-   *
-   */
-  progress?: number;
-  /**
-   * abort event
-   */
-  onAbort?: Function;
-  onCancel?: Function;
-  showInfo: boolean;
-}
-
-const FileItemMainLayer: React.FC<FileItemMainLayerProps> = (
-  props: FileItemMainLayerProps
-) => {
-  const {
-    onDelete,
-    info,
-    valid,
-    isImage,
-    isVideo,
-    showInfo,
-    onOpenInfo,
-    onOpenImage,
-    onOpenVideo,
-    onDownloadFile,
-    sizeFormatted,
-    uploadStatus,
-    localization,
-    hovering,
-    progress,
-    onAbort,
-    onCancel,
-  } = props;
-  //console.log("MainLayer onCancel", onCancel);
-
-  return (
-    <React.Fragment>
-      <div className={"dui-main-layer-container"}>
-        <MainLayerHeaderNeo
-          hide={showInfo}
-          onDelete={onDelete}
-          uploadStatus={uploadStatus}
-          hovering={hovering}
-        />
-
-        <MainLayerBodyNeo
-          hide={showInfo}
-          uploadStatus={uploadStatus}
-          localization={localization}
-          progress={progress}
-          onAbort={onAbort}
-          valid={valid}
-          hovering={hovering}
-          onCancel={onCancel}
-        />
-        <MainLayerFooterNeo
-          hide={showInfo}
-          uploadStatus={uploadStatus}
-          // uploadComplete={uploadComplete}
-          localization={localization}
-          sizeFormatted={sizeFormatted}
-          valid={valid}
-          info={info}
-          isImage={isImage}
-          isVideo={isVideo}
-          onDownloadFile={onDownloadFile}
-          onOpenImage={onOpenImage}
-          onOpenVideo={onOpenVideo}
-          onOpenInfo={onOpenInfo}
-          hovering={hovering}
-        />
-      </div>
-    </React.Fragment>
-  );
-};
-export default FileItemMainLayer;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayerNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayerNeo.tsx
deleted file mode 100644
index d7963b893a699eb40538ca78810e17577447a73e..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayerNeo.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import * as React from "react";
-//import { FileItemProps } from "../FileItem/FileItemProps";
-//import FileItemStatus from "../FileItemStatus/FileItemStatus";
-
-import "./FileItemMainLayer.scss";
-
-import MainLayerHeaderNeo from "../MainLayerHeader/MainLayerHeaderNeo";
-import MainLayerBodyNeo from "../MainLayerBody/MainLayerBodyNeo";
-import MainLayerFooterNeo from "../MainLayerFooter/MainLayerFooterNeo";
-import { Localization, UPLOADSTATUS } from "../../../../../core";
-//import {shrinkWord} from "./../../utils";
-export interface FileItemMainLayerNeoProps {
-  onOpenInfo: Function;
-  onOpenImage: Function | undefined;
-  onOpenVideo: Function | undefined;
-  onDelete: Function | undefined;
-  onDownloadFile: Function | undefined;
-  //fileNamePosition: FileItemProps["fileName"];
-  fileName: string;
-  info: boolean;
-  /**
-   * whether show a valid or rejected message
-   * by def. valid is false (if not present, is false too)
-   */
-  valid?: boolean | null;
-  isImage: boolean;
-  isVideo: boolean;
-  uploadStatus?: UPLOADSTATUS;
-  sizeFormatted: string;
-  /**
-   * language to be used
-   * for now
-   * only English and Spanish is supported
-   */
-  localization?: Localization;
-  hovering?: boolean;
-  /**
-   * the current percentage upload progress
-   *
-   */
-  progress?: number;
-  /**
-   * abort event
-   */
-  onAbort?: Function;
-  onCancel?: Function;
-  showInfo: boolean;
-}
-
-const FileItemMainLayerNeo: React.FC<FileItemMainLayerNeoProps> = (
-  props: FileItemMainLayerNeoProps
-) => {
-  const {
-    onDelete,
-    info,
-    valid,
-    isImage,
-    isVideo,
-    showInfo,
-    onOpenInfo,
-    onOpenImage,
-    onOpenVideo,
-    onDownloadFile,
-    sizeFormatted,
-    uploadStatus,
-    localization,
-    hovering,
-    progress,
-    onAbort,
-    onCancel,
-  } = props;
-
-  return (
-    <React.Fragment>
-      <div className={"dui-main-layer-container"}>
-        <MainLayerHeaderNeo
-          hide={showInfo}
-          onDelete={onDelete}
-          uploadStatus={uploadStatus}
-          hovering={hovering}
-        />
-
-        <MainLayerBodyNeo
-          hide={showInfo}
-          uploadStatus={uploadStatus}
-          localization={localization}
-          progress={progress}
-          onAbort={onAbort}
-          valid={valid}
-          hovering={hovering}
-          onCancel={onCancel}
-        />
-        <MainLayerFooterNeo
-          hide={showInfo}
-          uploadStatus={uploadStatus}
-          // uploadComplete={uploadComplete}
-          localization={localization}
-          sizeFormatted={sizeFormatted}
-          valid={valid}
-          info={info}
-          isImage={isImage}
-          isVideo={isVideo}
-          onDownloadFile={onDownloadFile}
-          onOpenImage={onOpenImage}
-          onOpenVideo={onOpenVideo}
-          onOpenInfo={onOpenInfo}
-          hovering={hovering}
-        />
-      </div>
-    </React.Fragment>
-  );
-};
-export default FileItemMainLayerNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.scss
deleted file mode 100644
index 4f2ad701889d34ac17a9cb1ee2976124674200c3..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.dui-file-item-main-layer-body {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  .dui-file-status-absolute-container {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-  }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.tsx
deleted file mode 100644
index d4033b24967d4b64cf66a8a1a31e91349f802a75..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import * as React from "react";
-import { Localization, UPLOADSTATUS } from "../../../../../core";
-
-import FileItemStatus from "../../FileItemStatus/FileItemStatus";
-import FileItemLoader from "../FileItemLoader/FileItemLoader";
-import "./MainLayerBody.scss";
-export type MainLayerBodyProps = {
-  /**
-   * whether show a valid or rejected message
-   * by def. valid is false (if not present, is false too)
-   */
-  valid?: boolean | null;
-
-  showInfo: boolean;
-  /**
-   * This feature is hidden, it is not present on the documentation
-   * because it's experimental. If you found this prop, you can test it
-   * and comment us if any issue is found. Thanks in advance.
-   *
-   * Make file name, info layer, size and "valid message"
-   * not visible
-   */
-  onlyImage?: boolean;
-  uploadStatus?: UPLOADSTATUS;
-
-  /**
-   * language to be used
-   * for now
-   * only English and Spanish is supported
-   */
-  localization?: Localization;
-  hovering?: boolean;
-  /**
-   * the current percentage upload progress
-   *
-   */
-  progress?: number;
-  /**
-   * abort event
-   */
-  onAbort?: Function;
-  onCancel?: Function;
-  uploadComplete?: boolean;
-};
-const MainLayerBody: React.FC<MainLayerBodyProps> = (
-  props: MainLayerBodyProps
-) => {
-  const {
-    uploadStatus,
-    showInfo,
-    hovering,
-    //uploadComplete,
-    localization,
-    onAbort,
-    progress,
-    onlyImage,
-    valid,
-    onCancel,
-  } = props;
-
-  const [uploadComplete, setUploadComplete] = React.useState<boolean>(false);
-  React.useEffect(() => {
-    if (
-      uploadStatus &&
-      ["success", "error", "success", "aborted"].includes(uploadStatus)
-    ) {
-      setTimeout(() => {
-        setUploadComplete(true);
-      }, 2000);
-    }
-    return () => {
-      setUploadComplete(false);
-    };
-  }, [uploadStatus]);
-
-/*   React.useEffect(() => {
-    console.log("MainLayerBody", uploadStatus, uploadComplete,progress);
-  }, [uploadStatus, uploadComplete]); */
-
-  return (
-    <div className="dui-file-item-main-layer-body">
-      {/** UPLOADING, upload isn't completed, showInfo=false and uploadStatus != undef  */}
-      {(uploadStatus === "preparing" ||
-        uploadStatus === "uploading") &&
-      !showInfo &&
-      !uploadComplete ? (
-        <React.Fragment>
-          <FileItemLoader
-            uploadStatus={uploadStatus}
-            localization={localization as Localization}
-            progress={progress}
-            onAbort={onAbort}
-            height={60}
-            width={60}
-            onCancel={onCancel}
-          />
-          <div className="dui-file-status-absolute-container">
-            {!showInfo && !onlyImage && hovering && (
-              <React.Fragment>
-                {/** When always actie or hovering he file status validation must be visible
-                 * valid, not valid
-                 *
-                 */}
-                {uploadStatus &&
-                uploadStatus !== "preparing" &&
-                uploadStatus !== "uploading" ? (
-                  <FileItemStatus
-                    uploadStatus={uploadStatus}
-                    localization={localization as Localization}
-                  />
-                ) : (
-                  <FileItemStatus
-                    valid={valid}
-                    localization={localization as Localization}
-                  />
-                )}
-              </React.Fragment>
-            )}
-          </div>
-        </React.Fragment>
-      ) : (
-        <React.Fragment>
-          {/** Upload ststus or valid status depending on the value on the corner */}
-          <div className="dui-file-status-aboslute-container">
-            {!showInfo && !onlyImage && hovering && (
-              <React.Fragment>
-                {uploadStatus ? (
-                  <FileItemStatus
-                    uploadStatus={uploadStatus}
-                    localization={localization as Localization}
-                  />
-                ) : (
-                  <FileItemStatus
-                    valid={valid}
-                    localization={localization as Localization}
-                  />
-                )}
-              </React.Fragment>
-            )}
-          </div>
-        </React.Fragment>
-      )}
-    </div>
-  );
-};
-export default MainLayerBody;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo.tsx
deleted file mode 100644
index a0ee09d1d76d928bb849e0a64ba897b03b0a10f9..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import * as React from "react";
-import { Localization, UPLOADSTATUS } from "../../../../../core";
-
-import FileItemUploadStatus from "../../FileItemStatus/FileItemUploadStatus";
-import FileItemValidStatus from "../../FileItemStatus/FileItemValidStatus";
-import FileItemLoader from "../FileItemLoader/FileItemLoader";
-import "./MainLayerBody.scss";
-
-export type MainLayerBodyNeoProps = {
-  /**
-   * whether show a valid or rejected message
-   * by def. valid is false (if not present, is false too)
-   */
-  valid?: boolean | null;
-  hide?: boolean;
-  uploadStatus?: UPLOADSTATUS;
-
-  /**
-   * language to be used
-   * for now
-   * only English and Spanish is supported
-   */
-  localization?: Localization;
-  hovering?: boolean;
-  /**
-   * the current percentage upload progress
-   *
-   */
-  progress?: number;
-  /**
-   * abort event
-   */
-  onAbort?: Function;
-  onCancel?: Function;
-  uploadComplete?: boolean;
-};
-const MainLayerBodyNeo: React.FC<MainLayerBodyNeoProps> = (
-  props: MainLayerBodyNeoProps
-) => {
-  const {
-    uploadStatus,
-    hide,
-    hovering,
-    //uploadComplete,
-    localization,
-    onAbort,
-    progress,
-
-    valid,
-    onCancel,
-  } = props;
-
-  const [uploadComplete, setUploadComplete] = React.useState<boolean>(false);
-  React.useEffect(() => {
-    if (
-      uploadStatus &&
-      ["success", "error", "aborted"].includes(uploadStatus)
-    ) {
-      setTimeout(() => {
-        setUploadComplete(true);
-      }, 2000);
-    }
-    return () => {
-      setUploadComplete(false);
-    };
-  }, [uploadStatus]);
-  //console.log("MainLayerBody onCancel", onCancel);
-  return (
-    <div className="dui-file-item-main-layer-body">
-      {/** Uploading or preparing stage? */}
-      {!hide && !uploadComplete && (
-        <React.Fragment>
-          <FileItemLoader
-            uploadStatus={uploadStatus}
-            localization={localization as Localization}
-            progress={progress}
-            onAbort={onAbort}
-            height={60}
-            width={60}
-            onCancel={onCancel}
-          />
-          <FileItemUploadStatus
-            uploadStatus={uploadStatus}
-            localization={localization}
-          />
-        </React.Fragment>
-      )}
-      <div className="dui-file-status-absolute-container">
-        {!hide && hovering && (
-          <React.Fragment>
-            {uploadComplete ? (
-              <FileItemUploadStatus
-                uploadStatus={uploadStatus}
-                localization={localization}
-              />
-            ) : (
-              <FileItemValidStatus valid={valid} localization={localization} />
-            )}
-          </React.Fragment>
-        )}
-      </div>
-    </div>
-  );
-};
-export default MainLayerBodyNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/PrincipalState.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/PrincipalState.tsx
deleted file mode 100644
index 7a80e89a0a12fd053814ff034d1f5a250067435f..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/PrincipalState.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from "react";
-import { UPLOADSTATUS } from "../../../../../core";
-import DefaultLoaderNeo from "../../../../loader/DefaultLoader/DefaultLoader";
-export type PrincipalStateProps = {
-  uploadStatus?: UPLOADSTATUS;
-  valid?: boolean;
-};
-const PrincipalState: React.FC<PrincipalStateProps> = (
-  props: PrincipalStateProps
-) => {
-  const { uploadStatus, valid } = props;
-  const [isUploading, setIsUploading] = React.useState<boolean | undefined>(
-    undefined
-  );
-  const [isValid, setIsValid] = React.useState<boolean | undefined>(undefined);
-  React.useEffect(() => {
-    setIsUploading(
-      uploadStatus &&
-        ["preparing", "uploading"].includes(uploadStatus)
-    );
-  }, [uploadStatus]);
-  return (
-    <div>
-      <DefaultLoaderNeo color="green" />
-    </div>
-  );
-};
-export default PrincipalState;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/SecondaryState.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/SecondaryState.tsx
deleted file mode 100644
index 5c1e541be19ca6c69e60822849a19b859aeed398..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/SecondaryState.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from "react";
-export type SecondaryStateProps = {
-  uploadComplete?: boolean;
-};
-const SecondaryState: React.FC<SecondaryStateProps> = (
-  props: SecondaryStateProps
-) => {
-  const { uploadComplete } = props;
-  //uploa status
-  if (uploadComplete) {
-    return <div></div>;
-  }
-  //valid
-  return <div></div>;
-};
-export default SecondaryState;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.scss
deleted file mode 100644
index e93b6352c8f3dc173a90c165faf472ae6409bb4b..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.dui-main-layer-footer-container {
-  min-height: 23px;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  //position: relative;
-  .dui-main-layer-footer-status {
-    //height: 0px;
-    //position: relative;
-    //bottom: 0px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    width: 100%;
-  }
-  .dui-main-layer-footer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    // min-height: 20px;
-  }
-
-  //width: inherit;
-}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.tsx
deleted file mode 100644
index 16fae2819145a3c60ffb7eac3fd8f9d3fec15880..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import * as React from "react";
-import { Localization, UPLOADSTATUS } from "../../../../../core";
-import {
-  PlayIcon,
-  DownloadFile,
-  InfoDisney,
-  Visibility,
-} from "../../../../icons";
-
-import FileItemStatus from "../../FileItemStatus/FileItemStatus";
-import FileItemSize from "../FileItemSize";
-
-import "./MainLayerFooter.scss";
-export type MainLayerFooterProps = {
-  hovering?: boolean;
-  onlyImage?: boolean;
-  uploadStatus?: UPLOADSTATUS;
-  // uploadComplete?: boolean;
-  localization?: Localization;
-  showInfo?: boolean;
-  sizeFormatted?: string;
-  /**
-   * whether show a valid or rejected message
-   * by def. valid is false (if not present, is false too)
-   */
-  valid?: boolean | null;
-  isImage?: boolean;
-  isVideo?: boolean;
-  info?: boolean;
-  onOpenInfo?: Function;
-  onOpenImage?: Function | undefined;
-  onOpenVideo?: Function | undefined;
-  onDownloadFile?: Function | undefined;
-};
-const MainLayerFooter: React.FC<MainLayerFooterProps> = (
-  props: MainLayerFooterProps
-) => {
-  const {
-    onlyImage,
-    uploadStatus,
-    // uploadComplete,
-    localization,
-    showInfo,
-    sizeFormatted,
-    valid,
-    info,
-    isImage,
-    isVideo,
-    onDownloadFile,
-    onOpenImage,
-    onOpenVideo,
-    onOpenInfo,
-    hovering,
-  } = props;
-  const handleOpenInfo = () => {
-    onOpenInfo?.();
-  };
-  const handleOpenImage = () => {
-    onOpenImage?.();
-  };
-  const handleOpenVideo = () => {
-    onOpenVideo?.();
-  };
-  const handleDownloadFile = () => {
-    onDownloadFile?.();
-  };
-
-  const [uploadComplete, setUploadComplete] = React.useState<boolean>(false);
-  React.useEffect(() => {
-    if (
-      uploadStatus &&
-      ["success", "error", "success", "aborted"].includes(uploadStatus)
-    ) {
-      setTimeout(() => {
-        setUploadComplete(true);
-      }, 2000);
-    }
-    return () => {
-      setUploadComplete(false);
-    };
-  }, [uploadStatus]);
-
-/*   React.useEffect(() => {
-    console.log("MainLayerFooter", uploadStatus, uploadComplete);
-  }, [uploadStatus, uploadComplete]);
- */
-  return (
-    <React.Fragment>
-      <div className="dui-main-layer-footer-container">
-        {/** Show only when footer is not visible */}
-        <div className="dui-main-layer-footer-status">
-          {!onlyImage &&
-          uploadStatus &&
-          uploadStatus !== "uploading" &&
-          uploadComplete ? (
-            <React.Fragment>
-              {!showInfo && !hovering && (
-                <FileItemStatus
-                  uploadStatus={uploadStatus}
-                  localization={localization as Localization}
-                />
-              )}
-            </React.Fragment>
-          ) : (
-            <React.Fragment>
-              {!showInfo && !hovering && typeof valid !== "undefined" && (
-                <FileItemStatus
-                  valid={valid}
-                  localization={localization as Localization}
-                />
-              )}
-            </React.Fragment>
-          )}
-        </div>
-        {/** Action buttons and file size */}
-        <div className="dui-main-layer-footer">
-          {!showInfo && hovering && (
-            <React.Fragment>
-              {!onlyImage && <FileItemSize sizeFormatted={sizeFormatted} />}
-
-              {isImage &&
-                onOpenImage &&
-                typeof valid === "boolean" &&
-                valid && (
-                  <Visibility
-                    className="dui-file-item-icon"
-                    color="rgba(255,255,255,0.851)"
-                    onClick={handleOpenImage}
-                    size="small"
-                  />
-                )}
-              {isVideo &&
-                onOpenVideo &&
-                typeof valid === "boolean" &&
-                valid && (
-                  <PlayIcon
-                    className="dui-file-item-icon"
-                    color="rgba(255,255,255,0.851)"
-                    onClick={handleOpenVideo}
-                    size="small"
-                  />
-                )}
-              {onDownloadFile && (
-                <DownloadFile
-                  className="dui-file-item-icon"
-                  color="rgba(255,255,255,0.851)"
-                  onClick={handleDownloadFile}
-                  size="small"
-                />
-              )}
-              {!onlyImage && info && (
-                <InfoDisney
-                  className="dui-file-item-icon"
-                  onClick={handleOpenInfo}
-                  color="rgba(255,255,255,0.851)"
-                  size="micro"
-                />
-              )}
-            </React.Fragment>
-          )}
-        </div>
-      </div>
-    </React.Fragment>
-  );
-};
-export default MainLayerFooter;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooterNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooterNeo.tsx
deleted file mode 100644
index 93527bb7e556f8784f8ac5cffc2bec4cb95877c9..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooterNeo.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import * as React from "react";
-import { Localization, UPLOADSTATUS } from "../../../../../core";
-import {
-  PlayIcon,
-  DownloadFile,
-  InfoDisney,
-  Visibility,
-} from "../../../../icons";
-
-import FileItemStatus from "../../FileItemStatus/FileItemStatus";
-import FileItemSize from "../FileItemSize";
-
-import "./MainLayerFooter.scss";
-export type MainLayerFooterNeoProps = {
-  hovering?: boolean;
-  uploadStatus?: UPLOADSTATUS;
-  // uploadComplete?: boolean;
-  localization?: Localization;
-  sizeFormatted?: string;
-  /**
-   * whether show a valid or rejected message
-   * by def. valid is false (if not present, is false too)
-   */
-  valid?: boolean | null;
-  isImage?: boolean;
-  isVideo?: boolean;
-  info?: boolean;
-  onOpenInfo?: Function;
-  onOpenImage?: Function | undefined;
-  onOpenVideo?: Function | undefined;
-  onDownloadFile?: Function | undefined;
-  hide: boolean;
-};
-const MainLayerFooterNeo: React.FC<MainLayerFooterNeoProps> = (
-  props: MainLayerFooterNeoProps
-) => {
-  const {
-    uploadStatus,
-    hide,
-    localization,
-    sizeFormatted,
-    valid,
-    info,
-    isImage,
-    isVideo,
-    onDownloadFile,
-    onOpenImage,
-    onOpenVideo,
-    onOpenInfo,
-    hovering,
-  } = props;
-  const handleOpenInfo = () => {
-    onOpenInfo?.();
-  };
-  const handleOpenImage = () => {
-    onOpenImage?.();
-  };
-  const handleOpenVideo = () => {
-    onOpenVideo?.();
-  };
-  const handleDownloadFile = () => {
-    onDownloadFile?.();
-  };
-
-  const [uploadComplete, setUploadComplete] = React.useState<boolean>(false);
-  React.useEffect(() => {
-    if (
-      uploadStatus &&
-      ["success", "error", "aborted"].includes(uploadStatus)
-    ) {
-      setTimeout(() => {
-        setUploadComplete(true);
-      }, 2000);
-    }
-    return () => {
-      setUploadComplete(false);
-    };
-  }, [uploadStatus]);
-
-  return (
-    <React.Fragment>
-      <div className="dui-main-layer-footer-container">
-        {/** Show only when footer is not visible */}
-        <div className="dui-main-layer-footer-status">
-          {!hide &&
-          uploadStatus &&
-          uploadStatus !== "uploading" &&
-          uploadComplete ? (
-            <React.Fragment>
-              {!hovering && (
-                <FileItemStatus
-                  uploadStatus={uploadStatus}
-                  localization={localization as Localization}
-                />
-              )}
-            </React.Fragment>
-          ) : (
-            <React.Fragment>
-              {!hovering && typeof valid !== "undefined" && (
-                <FileItemStatus
-                  valid={valid}
-                  localization={localization as Localization}
-                />
-              )}
-            </React.Fragment>
-          )}
-        </div>
-        {/** Action buttons and file size */}
-        <div className="dui-main-layer-footer">
-          {!hide && hovering && (
-            <React.Fragment>
-              {<FileItemSize sizeFormatted={sizeFormatted} />}
-
-              {isImage &&
-                onOpenImage &&
-                typeof valid === "boolean" &&
-                valid && (
-                  <Visibility
-                    className="dui-file-item-icon"
-                    color="rgba(255,255,255,0.851)"
-                    onClick={handleOpenImage}
-                    size="small"
-                  />
-                )}
-              {isVideo &&
-                onOpenVideo &&
-                typeof valid === "boolean" &&
-                valid && (
-                  <PlayIcon
-                    className="dui-file-item-icon"
-                    color="rgba(255,255,255,0.851)"
-                    onClick={handleOpenVideo}
-                    size="small"
-                  />
-                )}
-              {onDownloadFile && (
-                <DownloadFile
-                  className="dui-file-item-icon"
-                  color="rgba(255,255,255,0.851)"
-                  onClick={handleDownloadFile}
-                  size="small"
-                />
-              )}
-              {info && (
-                <InfoDisney
-                  className="dui-file-item-icon"
-                  onClick={handleOpenInfo}
-                  color="rgba(255,255,255,0.851)"
-                  size="micro"
-                />
-              )}
-            </React.Fragment>
-          )}
-        </div>
-      </div>
-    </React.Fragment>
-  );
-};
-export default MainLayerFooterNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.scss
deleted file mode 100644
index aeab8b694c95312fe59f79f5ccb27b3f65c7dea2..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.dui-main-layer-header-container {
-  min-height: 22px;
-  width: 100%;
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  //width: inherit;
-}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.tsx
deleted file mode 100644
index 97ff284e499af299d70865f28a9b7622a7000bfb..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from "react";
-import { UPLOADSTATUS } from "../../../../../core";
-import { Clear } from "../../../../icons";
-import "./MainLayerHeader.scss";
-
-export type MainLayerHeaderProps = {
-  onDelete?: Function;
-  uploadStatus?: UPLOADSTATUS;
-  hovering?: boolean;
-  showInfo: boolean;
-};
-
-const MainLayerHeader: React.FC<MainLayerHeaderProps> = (
-  props: MainLayerHeaderProps
-) => {
-  const { uploadStatus, onDelete, hovering, showInfo } = props;
-  const handleDelete = () => {
-    onDelete?.();
-  };
-
-  return (
-    <div className="dui-main-layer-header-container">
-      {!showInfo && hovering && uploadStatus !== "uploading" && onDelete && (
-        <Clear
-          className="dui-file-item-icon"
-          color="rgba(255,255,255,0.851)"
-          onClick={handleDelete}
-          size="small"
-          colorFill="transparent"
-        />
-      )}
-    </div>
-  );
-};
-export default MainLayerHeader;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeaderNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeaderNeo.tsx
deleted file mode 100644
index f3a20534bb898659ff046a9a934d0b9050964486..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeaderNeo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react";
-import { UPLOADSTATUS } from "../../../../../core";
-import { Clear } from "../../../../icons";
-import "./MainLayerHeader.scss";
-
-export type MainLayerHeaderNeoProps = {
-  onDelete?: Function;
-  uploadStatus?: UPLOADSTATUS;
-  hovering?: boolean;
-  hide?: boolean;
-};
-
-const MainLayerHeaderNeo: React.FC<MainLayerHeaderNeoProps> = (
-  props: MainLayerHeaderNeoProps
-) => {
-  const { uploadStatus, onDelete, hovering, hide } = props;
-  const handleDelete = () => {
-    onDelete?.();
-  };
-
-  return (
-    <div className="dui-main-layer-header-container">
-      {hovering &&
-        !hide &&
-        //  ![
-        uploadStatus !== "preparing" &&
-        uploadStatus !== "uploading" &&
-        //  undefined,
-        //null,
-        //].includes(uploadStatus)
-        onDelete && (
-          <Clear
-            className="dui-file-item-icon"
-            color="rgba(255,255,255,0.851)"
-            onClick={handleDelete}
-            size="small"
-            colorFill="transparent"
-          />
-        )}
-    </div>
-  );
-};
-export default MainLayerHeaderNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.scss
deleted file mode 100644
index d8e8c04b3c554002abe34ea837c9ff6d267c858d..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.dui-file-item-status-container {
-  text-align: center;
-  font-size: 0.8rem;
-  background-color: rgba(255, 255, 255, 0.8);
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  border-radius: 4px;
-  padding: 0.5px;
-  font-weight: 400;
-  &.file-status-error {
-    color: #f44336;
-  }
-  &.file-status-ok {
-    color: #5c7a1f;
-  }
-  &.file-status-loading {
-      &.percentage{
-          padding: 7px 4px 2px 5px;
-      }
-    //
-    position: relative;
-    .abort-button {
-      position: absolute;
-      right: -2px;
-      top: -2px;
-    }
-    display: flex;
-    color: #8b6b10;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    background-color: rgba(255, 255, 255, 0.7);
-
-    //background-color: transparent;
-    .uploading-text {
-      &.up {
-        margin-bottom: -22px;
-      }
-      &.down {
-        margin-top: -20px;
-      }
-
-      p.percentage {
-        font-weight: 500;
-      }
-    }
-  }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.tsx
deleted file mode 100644
index 7aa81245195da46f5f84fe153c4a1b7f53337d6c..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, { FC, Fragment } from "react";
-
-import Loader from "../../../loader/DefaultLoader/loader";
-import {
-  CheckCircle,
-  CloudDone,
-  DoDisturb,
-  Remove,
-  // UploadDone,
-  UploadError,
-} from "../../../icons";
-import { FileItemStatusProps } from "./FileItemStatusProps";
-import "./FileItemStatus.scss";
-import { FileItemLocalizerSelector, LocalLabels } from "../../../../core";
-
-const FileItemStatus: FC<FileItemStatusProps> = (
-  props: FileItemStatusProps
-) => {
-  const {
-    valid,
-    uploadStatus,
-    //message,
-    localization,
-    progress,
-    onAbort,
-  } = props;
-  const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
-    localization
-  ).status as LocalLabels;
-  const handleAbort = () => {
-    onAbort?.();
-  };
-  return (
-    <Fragment>
-      {uploadStatus ? (
-        uploadStatus === "uploading" ? (
-          <div
-            className={`dui-file-item-status-container file-status-loading${
-              progress ? " percentage" : ""
-            }`}
-          >
-            {onAbort && (
-              <div className="abort-button">
-                <Remove
-                  //className="dui-file-item-icon"
-                  color="red"
-                  onClick={handleAbort}
-                  size="semi-medium"
-                  colorFill="transparent"
-                />
-              </div>
-            )}
-
-            {progress && (
-              <div className="uploading-text up">
-                <p>{FileItemStatusLocalizer.uploading as string}</p>
-              </div>
-            )}
-            <Loader />
-            <div className="uploading-text down">
-              {progress ? (
-                <p className="percentage">
-                  {progress.toFixed(0) + "%" || "100%"}
-                </p>
-              ) : (
-                <p>{FileItemStatusLocalizer.uploading as string}</p>
-              )}
-            </div>
-          </div>
-        ) : uploadStatus === "aborted" ? (
-          <div className="dui-file-item-status-container file-status-error">
-            <UploadError
-              color="#f44336"
-              size="semi-medium"
-              className="status-icon"
-            />
-            {FileItemStatusLocalizer.aborted as string}
-          </div>
-        ) : uploadStatus === "success" ? (
-          <div className="dui-file-item-status-container file-status-ok">
-            <CloudDone color="#4caf50" size="small" className="status-icon" />
-            {FileItemStatusLocalizer.success as string}
-          </div>
-        ) : (
-          <div className="dui-file-item-status-container file-status-error">
-            <UploadError
-              color="#f44336"
-              size="semi-medium"
-              className="status-icon"
-            />
-            {FileItemStatusLocalizer.error as string}
-          </div>
-        )
-      ) : valid !== null && typeof valid !== "undefined" ? (
-        <Fragment>
-          {valid ? (
-            <div className="dui-file-item-status-container file-status-ok">
-              <CheckCircle
-                color="#4caf50"
-                size="small"
-                className="status-icon"
-              />
-              {FileItemStatusLocalizer.valid as string}
-            </div>
-          ) : (
-            <div className="dui-file-item-status-container file-status-error">
-              <DoDisturb color="#f44336" size="small" className="status-icon" />
-              {FileItemStatusLocalizer.denied as string}
-            </div>
-          )}
-        </Fragment>
-      ) : (
-        <Fragment></Fragment>
-      )}
-    </Fragment>
-  );
-};
-export default FileItemStatus;
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatusProps.ts b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatusProps.ts
deleted file mode 100644
index 118623abe19ccf6e62db54a6b6c39e68baad8e9a..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatusProps.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Localization, UPLOADSTATUS } from "../../../../core";
-
-
-export interface FileItemStatusProps {
-    /**
-     * whether show a valid or rejected message
-     * by def. valid is false (if not present, is false too)
-     */
-    valid?: boolean | null;
-    /**
-     * 
-     */
-    uploadStatus?: UPLOADSTATUS;
-    /**
-     * A message for the status item
-     */
-    message?: string;
-    /**
-    * language to be used
-    * for now
-    * only English and Spanish is supported
-    */
-    localization: Localization;
-    /**
-     * the current percentage upload progress
-     * 
-     */
-    progress?: number;
-    /**
-     * abort event 
-     */
-    onAbort?: Function;
-}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.scss
deleted file mode 100644
index a69fc3a52a8a6099269f17eccf678bfcbd9812e6..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.fui-file-item-upload-status-container {
-  text-align: center;
-  font-size: 0.8rem;
-  background-color: rgba(255, 255, 255, 0.8);
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  border-radius: 4px;
-  padding: 0.5px;
-  font-weight: 400;
-  &.file-status-error-aborted {
-    color: #f44336;
-  }
-  &.file-status-success {
-    color: #5c7a1f;
-  }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.tsx
deleted file mode 100644
index 9a3207c853581a3c704a3ab7aa6c2bac08fd5530..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from "react";
-import {
-  FileItemLocalizerSelector,
-  Localization,
-  LocalLabels,
-  UPLOADSTATUS,
-} from "../../../../core";
-import { CloudDone, UploadError } from "../../../icons";
-import "./FileItemUploadStatus.scss";
-export type FileItemUploadStatusProps = {
-  /**
-   * sucess
-   * error
-   * aborted
-   */
-  uploadStatus?: UPLOADSTATUS;
-  /**
-   * language to be used on labels
-   */
-  localization?: Localization;
-};
-/**
- * Upload ststaus: "success", "aborted" and "error"
- * @returns
- */
-const FileItemUploadStatus: React.FC<FileItemUploadStatusProps> = (
-  props: FileItemUploadStatusProps
-) => {
-  const { uploadStatus, localization } = props;
-  const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
-    localization
-  ).status as LocalLabels;
-  if (
-    uploadStatus &&
-    ["success", "aborted", "error"].includes(
-      uploadStatus
-    )
-  ) {
-    const overloadClassName: string =
-      uploadStatus === "success"
-        ? " file-status-success"
-        : " file-status-error-aborted";
-    return (
-      <div
-        className={`fui-file-item-upload-status-container${overloadClassName}`}
-      >
-        {uploadStatus === "success" ? (
-          <>
-            <CloudDone color="#4caf50" size="small" className="status-icon" />
-            {FileItemStatusLocalizer.success as string}
-          </>
-        ) : (
-          <>
-            <UploadError
-              color="#f44336"
-              size="semi-medium"
-              className="status-icon"
-            />
-            {uploadStatus === "aborted" ? (
-              <>{FileItemStatusLocalizer.aborted as string}</>
-            ) : (
-              <> {FileItemStatusLocalizer.error as string}</>
-            )}
-          </>
-        )}
-      </div>
-    );
-  }
-  return <React.Fragment></React.Fragment>;
-};
-export default FileItemUploadStatus;
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.scss
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.tsx
deleted file mode 100644
index b76e45d8f05e08c776938c0fb2743672e81e7987..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from "react";
-import { FileItemLocalizerSelector, Localization, LocalLabels, UPLOADSTATUS } from "../../../../core";
-import { DefaultLoader } from "../../../loader";
-
-export type FileItemUploadingStatusProps = {
-  /**
-   * sucess
-   * error
-   * aborted
-   */
-  uploadStatus?: UPLOADSTATUS;
-  /**
-   * language to be used on labels
-   */
-  localization?: Localization;
-};
-const FileItemUploadingStatus: React.FC<FileItemUploadingStatusProps> = (
-  props: FileItemUploadingStatusProps
-) => {
-  const { uploadStatus, localization } = props;
-  const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
-    localization
-  ).status as LocalLabels;
-  if (uploadStatus && uploadStatus === "uploading") {
-    return (
-      <DefaultLoader label={FileItemStatusLocalizer.uploading as string} />
-    );
-  }
-  return <React.Fragment></React.Fragment>;
-};
-export default FileItemUploadingStatus;
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.scss
deleted file mode 100644
index e4e14ee692786b46551c5246a33cfb338acc94c4..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.fui-file-item-valid-status-container {
-  text-align: center;
-  font-size: 0.8rem;
-  background-color: rgba(255, 255, 255, 0.8);
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  border-radius: 4px;
-  padding: 0.5px;
-  font-weight: 400;
-  &.file-status-nonvalid {
-    color: #f44336;
-  }
-  &.file-status-valid {
-    color: #5c7a1f;
-  }
-}
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.tsx
deleted file mode 100644
index 84d0bfc6417d644cce8b1242a8f95396502d315f..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from "react";
-import { FileItemLocalizerSelector, Localization, LocalLabels } from "../../../../core";
-import { CheckCircle, DoDisturb } from "../../../icons";
-
-import "./FileItemValidStatus.scss";
-export type FileItemValidStatusProps = {
-  /**
-   * whether show a valid or rejected message
-   * by def. valid is false (if not present, is false too)
-   */
-  valid?: boolean | null;
-  /**
-   * language to be used
-   * for now
-   * only English and Spanish is supported
-   */
-  localization?: Localization;
-};
-const FileItemValidStatus: React.FC<FileItemValidStatusProps> = (
-  props: FileItemValidStatusProps
-) => {
-  const { valid, localization } = props;
-  const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
-    localization
-  ).status as LocalLabels;
-  if (typeof valid === "boolean") {
-    const overloadClassName: string = valid
-      ? " file-status-valid"
-      : " file-status-nonvalid";
-    return (
-      <div
-        className={`fui-file-item-valid-status-container${overloadClassName}`}
-      >
-        {valid ? (
-          <>
-            <CheckCircle color="#4caf50" size="small" className="status-icon" />
-            {FileItemStatusLocalizer.valid as string}
-          </>
-        ) : (
-          <>
-            <DoDisturb color="#f44336" size="small" className="status-icon" />
-            {FileItemStatusLocalizer.denied as string}
-          </>
-        )}
-      </div>
-    );
-  } else {
-    return <React.Fragment></React.Fragment>;
-  }
-};
-export default FileItemValidStatus;
diff --git a/src/files-ui/components/file-item/hooks/useDropzoneFileListID.ts b/src/files-ui/components/file-item/hooks/useDropzoneFileListID.ts
deleted file mode 100644
index 4f05d381efd6bfc4b8a91e1c724adf9b626852d6..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/hooks/useDropzoneFileListID.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from "react";
-import { print_manager } from "../../../../utils";
-import { ExtFileManager } from "../../../core";
-
-const useDropzoneFileListID = (
-): number => {
-    const [dropzoneId, setDuiFileID]
-        = React.useState<number | undefined>(
-            undefined
-        );
-    React.useEffect(() => {
-        print_manager(undefined, "dropzoneId " + dropzoneId + "");
-        if (!dropzoneId) {
-            const newId: number = ExtFileManager.createFileListMap();
-            setDuiFileID(newId);
-        }
-        // eslint-disable-next-line
-    }, [dropzoneId]);
-
-    return dropzoneId || 0;
-}
-export default useDropzoneFileListID;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/hooks/useFileItemClassName.ts b/src/files-ui/components/file-item/hooks/useFileItemClassName.ts
deleted file mode 100644
index fce4e5e5e1560a16d3379a09d68afffd1d9c0583..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/hooks/useFileItemClassName.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from "react";
-
-/**
- * Custom hook that generates the final className for the main container of FleItem
- * @param resultOnTooltip whether to show the result on a tooltip or not
- * @returns the fiaal classNmae
- */
-const useFileItemRootClassName = (
-    resultOnTooltip: boolean = false,
-    className: string | undefined,
-    hovering: boolean | undefined = false
-): string => {
-    const [classNameCreated, setClassNameCreated] = React.useState<string>("file-item-full-container-container");
-
-    React.useEffect(() => {
-        let baseClassName: string = "file-item-full-container-container";
-        if (resultOnTooltip) {
-            baseClassName += " files-ui-tooltip";
-        }
-        if (hovering) {
-            baseClassName += " hovering";
-        }
-        if (className) {
-            baseClassName += ` ${className}`;
-        }
-
-        setClassNameCreated(baseClassName);
-    }, [resultOnTooltip, className, hovering]);
-    return classNameCreated;
-}
-export default useFileItemRootClassName;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/hooks/useFileItemInitializer.ts b/src/files-ui/components/file-item/hooks/useFileItemInitializer.ts
deleted file mode 100644
index ded597828e78c2b6ae557e1880449a46cfc060ef..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/hooks/useFileItemInitializer.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from "react";
-import { getURLFileIco, readAsDataURL } from "../../../core";
-import { getURLFileIcoFromNameAndType } from "../../../core/mime/mime";
-
-/**
- * Initializer hook for FileItemNeo
- * @param file The file Object
- * @param valid Whether the file is valid, not valid or not set
- * @param preview Whether to show a preview on FileItem
- * @param imageUrl The image url
- * @param xhr the xhr object
- * @param progress the current progress given by props
- * @returns an array thta contains the following properties [isImage, isVideo, url, imageSource, localProgress]
- */
-const useFileItemInitializer = (
-    file: File | undefined,
-    name: string | undefined,
-    type: string | undefined,
-    valid: boolean | undefined | null,
-    preview: boolean,
-    imageUrl: string | undefined,
-    xhr?: XMLHttpRequest,
-
-): [boolean, boolean, string, string | undefined] => {
-
-    const [isImage, setIsImage] = React.useState<boolean>(false);
-    const [isVideo, setIsVideo] = React.useState<boolean>(false);
-    const [url, setUrl] = React.useState<string>("");
-    const [imageSource, setImageSource] = React.useState<string | undefined>(undefined);
-
-
-
-    const init = async (
-        file: File | undefined,
-        name: string | undefined,
-        type: string | undefined,
-        valid: boolean | undefined | null,
-        preview: boolean,
-        imageUrl: string | undefined,
-        xhr?: XMLHttpRequest,
-        progress?: number
-    ) => {
-        //////////////////////////////
-        //console.log("init", file, name, type);
-
-        if (!file && (!name && !type)) return;
-
-        const { url } = file ? getURLFileIco(file) :
-            getURLFileIcoFromNameAndType(name, type);
-
-        //console.log("init", url);
-
-        setUrl(url);
-
-        if (imageUrl) {
-            setIsImage(true);
-            setImageSource(imageUrl);
-            return;
-        } else {
-            const [headerMime, tailMime] = getHeaderAndTail(file, type);
-
-            setIsImage(headerMime === "image");
-            setIsVideo(
-                headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime)
-            );
-            if (
-                preview &&
-                (valid || typeof valid === "undefined" || valid === null) &&
-                headerMime === "image"
-            ) {
-                //lets check for image preview from File
-                let response: string | undefined = undefined;
-                if (file) {
-                    response = await readAsDataURL(file);
-                    if (response) {
-                        setImageSource(response as string);
-                    }
-                }
-                //console.log("response image", response);
-
-            }
-        }
-        /////////////// UPLOAD OBJECT ///////////////
-
-        //if (!localProgress) {
-        //handleProgress(1);
-        //}
-    };
-
-
-
-    //////   EFFECT
-    React.useEffect(() => {
-        init(file, name, type, valid, preview || false, imageUrl);
-        return () => {
-            setImageSource(undefined);
-            setIsImage(false);
-            setIsVideo(false);
-        };
-        // eslint-disable-next-line
-    }, [file, name, type, valid, preview, imageUrl,]);
-    return [isImage, isVideo, url, imageSource];
-}
-export default useFileItemInitializer;
-
-/* export const identifyFileSource = (file: File | undefined, name: string, fileType: string) => {
-    if(!file){
-
-    }
-} */
-
-const getHeaderAndTail = (
-    file: File | undefined,
-    type: string | undefined,
-): [string, string] => {
-
-    if (file) {
-        if (file.type) {
-            const splittedType: string[] = file.type.split("/");
-            return [splittedType[0], splittedType[1]];
-        } else {
-            return ["octet", "octet"];
-        }
-    } else {
-        const splittedType: string[] | undefined = type?.split("/");
-        if (splittedType && splittedType.length > 1) {
-            return [splittedType[0], splittedType[1]];
-        } else {
-            return ["octet", "octet"];
-        }
-    }
-
-
-}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/hooks/useFileItemNeoClassName.ts b/src/files-ui/components/file-item/hooks/useFileItemNeoClassName.ts
deleted file mode 100644
index 940cfddc34681cb09179f5ca0b812a7048b8d46f..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/hooks/useFileItemNeoClassName.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from "react";
-import { FileItemPropsNeo } from "../components/FileItem/FileItemPropsNeo";
-/**
- * Custom hook that generates the final className for main container
- * on FleItem
- * @param resultOnTooltip whether to show the result on tooltip or not
- * @param elevation the shadow elevation
- * @returns the fiaal classNmae
- */
-const useFileItemNeoClassName = (
-    resultOnTooltip: boolean,
-    elevation: FileItemPropsNeo["elevation"]
-): string => {
-    const [classNameCreated, setClassNameCreated] =
-     React.useState<string>("");
-
-    React.useEffect(() => {
-        let baseClassName: string = 
-        "file-item-full-container-container";
-        
-        if (resultOnTooltip) {
-            baseClassName += " dz-ui-tooltip";
-        }
-        if (elevation && [1, 2, 3, 4, "1", "2", "3", "4"].includes(elevation)) {
-            baseClassName += ` dz-ui-paper-elevation-${elevation}`;
-        }
-        setClassNameCreated(baseClassName);
-    }, [resultOnTooltip]);
-    return classNameCreated;
-}
-export default useFileItemNeoClassName;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/hooks/useFileItemProgress.ts b/src/files-ui/components/file-item/hooks/useFileItemProgress.ts
deleted file mode 100644
index bd61da06d5264713c06f0b10ef26b94d029f3f5b..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/hooks/useFileItemProgress.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from "react";
-
-/**
- * 
- * @param progress 
- * @param showProgress 
- * @param xhr 
- * @returns 
- */
-const useFileItemProgress = (
-    progress: number | undefined,
-    showProgress: boolean | undefined,
-    xhr?: XMLHttpRequest,
-
-): number | undefined => {
-
-    const [localProgress, setLocalProgress] = React.useState<number | undefined>(undefined);
-    // handlers
-    const handleProgress = (currentProgress: number): void => {
-        setLocalProgress(currentProgress);
-    };
-
-    React.useEffect(() => {
-        if (progress && showProgress)
-            handleProgress(typeof progress === "undefined" || progress === 0 ? 1 : progress);
-    }, [progress, showProgress]);
-
-
-    React.useEffect(() => {
-        if (xhr && xhr !== null && showProgress && xhr.upload.onprogress === null) {
-            xhr.upload.onprogress = (event) => {
-                if (!progress)
-                    handleProgress((event.loaded / event.total) * 100);
-            };
-            handleProgress(1);
-        }
-    }, [xhr, showProgress, progress]);
-
-    return localProgress;
-}
-export default useFileItemProgress;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/index.ts b/src/files-ui/components/file-item/index.ts
deleted file mode 100644
index 84098b699e8d04173393b8e4466dcdcd59de1be2..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-
-export {default as FileItem} from "./components/FileItem/FileItem";
-export * from "./components/FileItem/FileItem";
-
-export {default as FileItemContainer} from "./components/FileItemContainer/FileItemContainer";
-export * from "./components/FileItemContainer/FileItemContainer";
diff --git a/src/files-ui/components/file-item/utils/showFileItemComponent.ts b/src/files-ui/components/file-item/utils/showFileItemComponent.ts
deleted file mode 100644
index 8928339477d3c5b57e88090dcbd04946c631754b..0000000000000000000000000000000000000000
--- a/src/files-ui/components/file-item/utils/showFileItemComponent.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Checks wheter the file objector at least the file name was given in order to show the file Item component
- * @param file the file object
- * @param name the file name
- * @returns true if the file object or the file name were given and are strings
- */
-export const showFileItemComponent = (
-    file: File | undefined,
-    name: string | undefined,
-    //classNameCreatedReady: boolean
-): boolean => {
-
-    let result = false;
-    if (file && typeof file.name === "string" 
-    //&& classNameCreatedReady
-    ) {
-        result = true;
-    }
-    if (!result && name && typeof name == "string"
-     //&& classNameCreatedReady
-     ) {
-        result = true;
-    }
-    //console.log("showFileItemComponent", file, name, classNameCreatedReady, result);
-    return result;
-}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
index 7fb983dbcbdd35ac3a380ea8d93123f4437c01f6..455a3af3a80d58acae140ea45299d490fe4c51b8 100644
--- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
@@ -2,13 +2,13 @@ import * as React from "react";
 import {
   addClassName,
   fileSizeFormater,
+  getLocalFileItemData,
   handleClickUtil,
 } from "../../../../core";
 import { FileMosaicProps } from "./FileMosaicProps";
 import "./FileMosaic.scss";
 import LayerContainer from "../file-mosaic-layer/LayerContainer";
 import Layer from "../file-mosaic-layer/Layer";
-import { getLocalFileItemData } from "../../../file-item/utils/getLocalFileItemData";
 import FileMosaicName from "../FileMosaicName/FileMosaicName";
 import FileMosaicUploadLayer from "../FileMosaicUploadLayer/FileMosaicUploadLayer";
 import useFileMosaicInitializer from "../../hooks/useFileMosaicInitializer";
diff --git a/src/files-ui/components/index.ts b/src/files-ui/components/index.ts
index d7c2c1b7497acd77030797dec177249b834fbea4..3356996ef2650fe53854a2dbb3d513c9e73128d6 100644
--- a/src/files-ui/components/index.ts
+++ b/src/files-ui/components/index.ts
@@ -4,9 +4,6 @@ export * from "./avatar";
 export { Dropzone } from "./dropzone";
 export * from "./dropzone";
 
-export { FileItem } from "./file-item";
-export * from "./file-item";
-
 export { FileInputButton } from "./file-input-button";
 export * from "./file-input-button";
 
diff --git a/src/files-ui/core/index.ts b/src/files-ui/core/index.ts
index e01e5a3825ad26b5a33a257a3a3614eeaa2ce6e1..f59b94970f6bef21c7eb757bcf23957a6b96d2e5 100644
--- a/src/files-ui/core/index.ts
+++ b/src/files-ui/core/index.ts
@@ -140,7 +140,7 @@ export {
     sleepPreparing,
     uploadOne,
     uploadOneExtFile,
-    cleanInput, addClassName, getRandomInt, isUploadAbleExtFile
+    cleanInput, addClassName, getRandomInt, isUploadAbleExtFile, getLocalFileItemData
 } from "./utils";
 
 export {
diff --git a/src/files-ui/components/file-item/utils/getLocalFileItemData.ts b/src/files-ui/core/utils/getLocalFileItemData.ts
similarity index 100%
rename from src/files-ui/components/file-item/utils/getLocalFileItemData.ts
rename to src/files-ui/core/utils/getLocalFileItemData.ts
diff --git a/src/files-ui/core/utils/index.ts b/src/files-ui/core/utils/index.ts
index 678c2808484b745c11264947b8acbce11c63f7b4..a241cf09e7a4973eae39a8a7d704f4f5e1e209e3 100644
--- a/src/files-ui/core/utils/index.ts
+++ b/src/files-ui/core/utils/index.ts
@@ -38,4 +38,6 @@ export { cleanInput } from "./input.utils";
 
 export { addClassName } from "./addClassName";
 
-export {isUploadAbleExtFile} from "./isUploadAbleExtFile";
\ No newline at end of file
+export { isUploadAbleExtFile } from "./isUploadAbleExtFile";
+
+export { getLocalFileItemData } from "./getLocalFileItemData"
\ No newline at end of file
diff --git a/src/files-ui/index.ts b/src/files-ui/index.ts
index abe520fd0db876004fd8ebb95c2a1a0ba8b5e25c..86b06e27501db0d5945ee8fc7b43468aa848bf9d 100644
--- a/src/files-ui/index.ts
+++ b/src/files-ui/index.ts
@@ -1,12 +1,12 @@
 export { default as Dropzone } from "./components/dropzone/components/dropzone/Dropzone";
 export * from "./components/dropzone/components/dropzone/Dropzone";
 
+export { default as FileInputButton } from "./components/file-input-button/FileInputButton";
+export * from "./components/file-input-button/FileInputButton";
+
 export { default as Avatar } from "./components/avatar/Avatar";
 export * from "./components/avatar/Avatar";
 
-export { FileItem } from "./components";
-export * from "./components";
-
 export { default as FileCard } from "./components/file-card/FileCard";
 export * from "./components/file-card/FileCard";
 
@@ -22,6 +22,9 @@ export * from "./components/previews/ImagePreview/ImagePreview";
 export { default as VideoPreview } from "./components/previews/VideoPreview/VideoPreview";
 export * from "./components/previews/VideoPreview/VideoPreview";
 
+export { default as MaterialButton } from "./components/material-button/MaterialButton";
+export * from "./components/material-button/MaterialButton";
+
 export type { FileMosaicProps } from "./components/file-mosaic/components/file-mosaic/FileMosaicProps";
 export type { DropzoneProps } from "./components/dropzone/components/dropzone/DropzoneProps";
 export type { FileInputButtonProps } from "./components/file-input-button/InputButtonProps";
diff --git a/src/pages/FileItemMock.tsx b/src/pages/FileItemMock.tsx
index d118bb015113bf21ce69e53aa50ac832e060c4ff..b66ba990a2a57f5b19cd30cc3fd22b2fd4fde0fe 100644
--- a/src/pages/FileItemMock.tsx
+++ b/src/pages/FileItemMock.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import { FileItem } from "../files-ui";
 import {
   FileMosaic,
   FileMosaicProps,
@@ -154,7 +153,7 @@ const FileItemMock = ({ darkMode = false, mosaic = false }) => {
         ) : (
           <>
             {files.map((file, index) => (
-              <FileItem
+              <FileMosaic
                 key={file.id || 1 + 10}
                 {...file}
                 preview
@@ -163,9 +162,6 @@ const FileItemMock = ({ darkMode = false, mosaic = false }) => {
                 info
                 alwaysActive
                 progress={25}
-                showProgress
-                hd
-                elevation={2}
                 darkMode={darkMode}
               />
             ))}