[FEAT]: Add smart image fit demo in FIle mosaic and card

src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileMosaicSmartImgFit = (card) => {
+  return (
+    <ShowDemoCode
+      codeCompleteJS={completeCodeJS(card)}
+      codeCompleteTS={completeCodeTS(card)}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS(card)}
+      codeSplittedTS={splittedCodeTS(card)}
+    />
+  );
+};
+export default CodeJSFileMosaicSmartImgFit;
+
+const splittedCodeJS = (card)=>``;
+const splittedCodeTS = (card)=>``;
+
+const completeCodeTS = (card)=>`import * as React from "react";
+import { ${card?"FileCard":"FileMosaic"}, ExtFile } from "@files-ui/react";
+
+export default function App() {
+  return (
+    <>
+        <${card?"FileCard":"FileMosaic"}  {...sampleFileProp} info smartImgFit={false}/>
+        <${card?"FileCard":"FileMosaic"}  {...sampleFileProp} info smartImgFit={"orientation"}/>
+        <${card?"FileCard":"FileMosaic"}  {...sampleFileProp} info smartImgFit={"center"}/>
+    </>
+  );
+};
+const sampleFileProp: ExtFile = {
+    id: "fileId-1",
+    size: 28 * 1024 * 1024,
+    type: "image/gif",
+    name: "Thor arrives wakanda.png",
+    imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
+};`;
+
+const completeCodeJS = (card)=>`import * as React from "react";
+import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
+
+export default function App() {
+  return (
+    <>
+        <${card?"FileCard":"FileMosaic"}  {...sampleFileProp} info smartImgFit={false}/>
+        <${card?"FileCard":"FileMosaic"}  {...sampleFileProp} info smartImgFit={"orientation"}/>
+        <${card?"FileCard":"FileMosaic"}  {...sampleFileProp} info smartImgFit={"center"}/>
+    </>
+  );
+};
+const sampleFileProp = {
+    id: "fileId-1",
+    size: 28 * 1024 * 1024,
+    type: "image/gif",
+    name: "Thor arrives wakanda.png",
+    imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
+};`;

src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx

+import * as React from "react";
+import { ExtFile, FileCard, FileMosaic } from "../../../files-ui";
+
+const DemoFileMosaicSmartImgFit = (props: { card: boolean }) => {
+  if (props.card)
+    return (
+      <>
+        <FileCard {...sampleFileProp} info smartImgFit={false} />
+        <FileCard {...sampleFileProp} info smartImgFit={"orientation"} />
+        <FileCard {...sampleFileProp} info smartImgFit={"center"} />
+      </>
+    );
+  return (
+    <>
+      <FileMosaic {...sampleFileProp} info smartImgFit={false} />
+      <FileMosaic {...sampleFileProp} info smartImgFit={"orientation"} />
+      <FileMosaic {...sampleFileProp} info smartImgFit={"center"} />
+    </>
+  );
+};
+export default DemoFileMosaicSmartImgFit;
+
+const sampleFileProp: ExtFile = {
+  id: "fileId-1",
+  size: 28 * 1024 * 1024,
+  type: "image/gif",
+  name: "Thor arrives wakanda.png",
+  imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
+};

src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx

 import * as React from "react";
 import { FileCard, FileMosaic } from "../../../files-ui";
 
+const DemoFileMosaicValidation = ({ card }) => {
+  if (card)
+    return (
+      <>
+        {sampleFilesProps.map((extFile) => (
+          <FileCard key={extFile.id} {...extFile} info />
+        ))}
+      </>
+    );
+
+  return (
+    <>
+      {sampleFilesProps.map((extFile) => (
+        <FileMosaic key={extFile.id} {...extFile} info />
+      ))}
+    </>
+  );
+};
+export default DemoFileMosaicValidation;
+
 const sampleFilesProps = [
   {
     id: "fileId-1",
@@ -23,24 +43,4 @@ const sampleFilesProps = [
     name: "non valid file created from props.jpg",
     valid: true,
   },
-];
-
-const DemoFileMosaicValidation = ({ card }) => {
-  if (card)
-    return (
-      <>
-        {sampleFilesProps.map((extFile) => (
-          <FileCard key={extFile.id} {...extFile} info />
-        ))}
-      </>
-    );
-
-  return (
-    <>
-      {sampleFilesProps.map((extFile) => (
-        <FileMosaic key={extFile.id} {...extFile} info />
-      ))}
-    </>
-  );
-};
-export default DemoFileMosaicValidation;
+];
\ No newline at end of file

src/pages/demo/FileCardDemoPage.jsx

@@ -23,6 +23,8 @@ import DemoFileMosaicUploadStatus from "../../components/demo-components/filemos
 import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
 import DemoFileCardActions from "../../components/demo-components/filemosaic-demo/DemoFileCradActions";
 import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
+import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
+import CodeJSFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit";
 
 const FileCardDemoPage = (props) => {
   return (
@@ -321,7 +323,22 @@ const FileCardDemoPage = (props) => {
 
           <CodeJSFileMosaicDarkMode card />
         </section>
+        <section id="smart-image-fit">
+          <SubTitle content="Smart image fit" />
+          <DescParagraph>
+            <CodeHighlight>FileCard</CodeHighlight> with
+            <TypeHighlight>smartImgFit</TypeHighlight> prop will display image
+            according to its heigh and width. Image width height greater than
+            its width has a "portrait" orientation. Otherwise it has a
+            "landscape" orientation.
+          </DescParagraph>
 
+          <DemoContainerFileMosaic>
+            <DemoFileMosaicSmartImgFit card />
+          </DemoContainerFileMosaic>
+
+          <CodeJSFileMosaicSmartImgFit card />
+        </section>
         <section id="api">
           <SubTitle content="API" />
           <DescParagraph>
@@ -332,7 +349,8 @@ const FileCardDemoPage = (props) => {
             <li>
               <AnchorToTab href="/api/filecard">{"<FileCard/>"}</AnchorToTab>
             </li>
-            <li>|
+            <li>
+              |
               <AnchorToTab href="/api/fileinputbuttom">
                 {"<FileInputButton/>"}
               </AnchorToTab>

src/pages/demo/FileMosaicDemoPage.jsx

@@ -27,6 +27,8 @@ import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosai
 import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";
 import DemoFileCardActions from "../../components/demo-components/filemosaic-demo/DemoFileCradActions";
 import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
+import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
+import CodeJSFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit";
 
 const FileMosaicDemoPage = (props) => {
   return (
@@ -336,6 +338,23 @@ const FileMosaicDemoPage = (props) => {
           <CodeJSFileMosaicDarkMode />
         </section>
 
+        <section id="smart-image-fit">
+          <SubTitle content="Smart image fit" />
+          <DescParagraph>
+            <CodeHighlight>FileMosaic</CodeHighlight> with
+            <TypeHighlight>smartImgFit</TypeHighlight> prop will display image
+            according to its heigh and width. Image width height greater than
+            its width has a "portrait" orientation. Otherwise it has a
+            "landscape" orientation.
+          </DescParagraph>
+
+          <DemoContainerFileMosaic>
+            <DemoFileMosaicSmartImgFit />
+          </DemoContainerFileMosaic>
+
+          <CodeJSFileMosaicSmartImgFit />
+        </section>
+
         {/*   <section id="localization">
           <SubTitle content="Localization" />
           <DescParagraph>