@webiny/app-file-manager 6.0.0-beta.0 → 6.0.0-rc.0

package/components/FileDetails/components/Preview.js

@@ -1,30 +1,12 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Preview = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _Thumbnail = require("./Thumbnail");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var PreviewContainer = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "eivi6al0"
-} : {
-  target: "eivi6al0",
-  label: "PreviewContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "v5yypg",
-  styles: "height:calc(100vh - 285px);background:repeating-conic-gradient(#efefef 0% 25%, transparent 0% 50%) 50%/25px 25px;display:flex;width:auto;align-items:center;justify-content:center;>img{max-width:400px;max-height:calc(100vh - 350px);}"
-} : {
-  name: "v5yypg",
-  styles: "height:calc(100vh - 285px);background:repeating-conic-gradient(#efefef 0% 25%, transparent 0% 50%) 50%/25px 25px;display:flex;width:auto;align-items:center;justify-content:center;>img{max-width:400px;max-height:calc(100vh - 350px);}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlByZXZpZXcudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUltQyIsImZpbGUiOiJQcmV2aWV3LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IFRodW1ibmFpbCB9IGZyb20gXCIuL1RodW1ibmFpbFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmNvbnN0IFByZXZpZXdDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICAgIGhlaWdodDogY2FsYygxMDB2aCAtIDI4NXB4KTtcbiAgICBiYWNrZ3JvdW5kOiByZXBlYXRpbmctY29uaWMtZ3JhZGllbnQoI2VmZWZlZiAwJSAyNSUsIHRyYW5zcGFyZW50IDAlIDUwJSkgNTAlLzI1cHggMjVweDtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIHdpZHRoOiBhdXRvO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgPiBpbWcge1xuICAgICAgICBtYXgtd2lkdGg6IDQwMHB4O1xuICAgICAgICBtYXgtaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMzUwcHgpO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBQcmV2aWV3ID0gKCkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxQcmV2aWV3Q29udGFpbmVyPlxuICAgICAgICAgICAgPFRodW1ibmFpbCAvPlxuICAgICAgICA8L1ByZXZpZXdDb250YWluZXI+XG4gICAgKTtcbn07XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var Preview = exports.Preview = function Preview() {
-  return /*#__PURE__*/_react.default.createElement(PreviewContainer, null, /*#__PURE__*/_react.default.createElement(_Thumbnail.Thumbnail, null));
+import React from "react";
+import { Thumbnail } from "./Thumbnail.js";
+import { cn } from "@webiny/admin-ui";
+export const Preview = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "h-full w-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn(["flex items-center justify-center", "w-full aspect-square rounded-lg bg-neutral-dimmed", "overflow-hidden"])
+  }, /*#__PURE__*/React.createElement(Thumbnail, null)));
 };
 
 //# sourceMappingURL=Preview.js.map

package/components/FileDetails/components/Preview.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Thumbnail","_EMOTION_STRINGIFIED_CSS_ERROR__","PreviewContainer","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","Preview","exports","createElement","Thumbnail"],"sources":["Preview.tsx"],"sourcesContent":["import React from \"react\";\nimport { Thumbnail } from \"./Thumbnail\";\nimport styled from \"@emotion/styled\";\n\nconst PreviewContainer = styled.div`\n    height: calc(100vh - 285px);\n    background: repeating-conic-gradient(#efefef 0% 25%, transparent 0% 50%) 50%/25px 25px;\n    display: flex;\n    width: auto;\n    align-items: center;\n    justify-content: center;\n    > img {\n        max-width: 400px;\n        max-height: calc(100vh - 350px);\n    }\n`;\n\nexport const Preview = () => {\n    return (\n        <PreviewContainer>\n            <Thumbnail />\n        </PreviewContainer>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAAwC,SAAAE,iCAAA;AAGxC,IAAMC,gBAAgB,oBAAAC,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAZ;AAAA,EAWrB;AAEM,IAAMa,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAAVA,OAAOA,CAAA,EAAS;EACzB,oBACIjB,MAAA,CAAAO,OAAA,CAAAY,aAAA,CAACd,gBAAgB,qBACbL,MAAA,CAAAO,OAAA,CAAAY,aAAA,CAAChB,UAAA,CAAAiB,SAAS,MAAE,CACE,CAAC;AAE3B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Thumbnail","cn","Preview","createElement","className"],"sources":["Preview.tsx"],"sourcesContent":["import React from \"react\";\nimport { Thumbnail } from \"./Thumbnail.js\";\nimport { cn } from \"@webiny/admin-ui\";\n\nexport const Preview = () => {\n    return (\n        <div className={\"h-full w-full\"}>\n            <div\n                className={cn([\n                    \"flex items-center justify-center\",\n                    \"w-full aspect-square rounded-lg bg-neutral-dimmed\",\n                    \"overflow-hidden\"\n                ])}\n            >\n                <Thumbnail />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAClB,SAASC,EAAE,QAAQ,kBAAkB;AAErC,OAAO,MAAMC,OAAO,GAAGA,CAAA,KAAM;EACzB,oBACIH,KAAA,CAAAI,aAAA;IAAKC,SAAS,EAAE;EAAgB,gBAC5BL,KAAA,CAAAI,aAAA;IACIC,SAAS,EAAEH,EAAE,CAAC,CACV,kCAAkC,EAClC,mDAAmD,EACnD,iBAAiB,CACpB;EAAE,gBAEHF,KAAA,CAAAI,aAAA,CAACH,SAAS,MAAE,CACX,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/FileDetails/components/Thumbnail.js

@@ -1,21 +1,16 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Thumbnail = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _useFile2 = require("../../../hooks/useFile");
-var _ = require("../../..");
-var Thumbnail = exports.Thumbnail = function Thumbnail() {
-  var _useFile = (0, _useFile2.useFile)(),
-    file = _useFile.file;
-  var _useFileManagerViewCo = (0, _.useFileManagerViewConfig)(),
-    fileDetails = _useFileManagerViewCo.fileDetails,
-    getThumbnailRenderer = _useFileManagerViewCo.getThumbnailRenderer;
-  var renderer = getThumbnailRenderer(fileDetails.thumbnails, file);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderer?.element || null);
+import React from "react";
+import { useFile } from "../../../hooks/useFile.js";
+import { useFileManagerViewConfig } from "../../../index.js";
+export const Thumbnail = () => {
+  const {
+    file
+  } = useFile();
+  const {
+    fileDetails,
+    getThumbnailRenderer
+  } = useFileManagerViewConfig();
+  const renderer = getThumbnailRenderer(fileDetails.thumbnails, file);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderer?.element || null);
 };
 
 //# sourceMappingURL=Thumbnail.js.map

package/components/FileDetails/components/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_useFile2","_","Thumbnail","exports","_useFile","useFile","file","_useFileManagerViewCo","useFileManagerViewConfig","fileDetails","getThumbnailRenderer","renderer","thumbnails","default","createElement","Fragment","element"],"sources":["Thumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFile } from \"~/hooks/useFile\";\nimport { useFileManagerViewConfig } from \"~/index\";\n\nexport const Thumbnail = () => {\n    const { file } = useFile();\n    const { fileDetails, getThumbnailRenderer } = useFileManagerViewConfig();\n\n    const renderer = getThumbnailRenderer(fileDetails.thumbnails, file);\n\n    return <>{renderer?.element || null}</>;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,CAAA,GAAAF,OAAA;AAEO,IAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAA,EAAS;EAC3B,IAAAE,QAAA,GAAiB,IAAAC,iBAAO,EAAC,CAAC;IAAlBC,IAAI,GAAAF,QAAA,CAAJE,IAAI;EACZ,IAAAC,qBAAA,GAA8C,IAAAC,0BAAwB,EAAC,CAAC;IAAhEC,WAAW,GAAAF,qBAAA,CAAXE,WAAW;IAAEC,oBAAoB,GAAAH,qBAAA,CAApBG,oBAAoB;EAEzC,IAAMC,QAAQ,GAAGD,oBAAoB,CAACD,WAAW,CAACG,UAAU,EAAEN,IAAI,CAAC;EAEnE,oBAAOT,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAAAjB,MAAA,CAAAgB,OAAA,CAAAE,QAAA,QAAGJ,QAAQ,EAAEK,OAAO,IAAI,IAAO,CAAC;AAC3C,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useFile","useFileManagerViewConfig","Thumbnail","file","fileDetails","getThumbnailRenderer","renderer","thumbnails","createElement","Fragment","element"],"sources":["Thumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFile } from \"~/hooks/useFile.js\";\nimport { useFileManagerViewConfig } from \"~/index.js\";\n\nexport const Thumbnail = () => {\n    const { file } = useFile();\n    const { fileDetails, getThumbnailRenderer } = useFileManagerViewConfig();\n\n    const renderer = getThumbnailRenderer(fileDetails.thumbnails, file);\n\n    return <>{renderer?.element || null}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAChB,SAASC,wBAAwB;AAEjC,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC3B,MAAM;IAAEC;EAAK,CAAC,GAAGH,OAAO,CAAC,CAAC;EAC1B,MAAM;IAAEI,WAAW;IAAEC;EAAqB,CAAC,GAAGJ,wBAAwB,CAAC,CAAC;EAExE,MAAMK,QAAQ,GAAGD,oBAAoB,CAACD,WAAW,CAACG,UAAU,EAAEJ,IAAI,CAAC;EAEnE,oBAAOJ,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,QAAGH,QAAQ,EAAEI,OAAO,IAAI,IAAO,CAAC;AAC3C,CAAC","ignoreList":[]}

package/components/FileDetails/index.d.ts

@@ -1 +1 @@
-export * from "./FileDetails";
+export * from "./FileDetails.js";

package/components/FileDetails/index.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _FileDetails = require("./FileDetails");
-Object.keys(_FileDetails).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _FileDetails[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _FileDetails[key];
-    }
-  });
-});
+export * from "./FileDetails.js";
 
 //# sourceMappingURL=index.js.map

package/components/FileDetails/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_FileDetails","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.tsx"],"sourcesContent":["export * from \"./FileDetails\";\n"],"mappings":";;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,YAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,YAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,YAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./FileDetails.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/FileDropArea/FileDropArea.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface FileDropAreaProps {
+    empty?: boolean;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+    title?: string;
+    description?: string;
+    icon?: React.ReactElement;
+}
+export declare const FileDropArea: ({ title, description, empty, onClick }: FileDropAreaProps) => React.JSX.Element;

package/components/FileDropArea/FileDropArea.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { Button, cn, Heading, Text } from "@webiny/admin-ui";
+import { ReactComponent as UploadFileIcon } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as UploadIcon } from "@webiny/icons/cloud_upload.svg";
+const DropAreaContainer = ({
+  empty,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: cn(["w-full h-full p-lg flex items-center justify-center", empty ? "bg-neutral-base" : "pt-xxl bg-neutral-xstrong/20"])
+}, children);
+const DropAreaBox = ({
+  children,
+  empty
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    width: "650px",
+    height: "400px",
+    ...(empty ? {
+      backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%23E7E7E7FF' stroke-width='4' stroke-dasharray='12' stroke-dashoffset='35' stroke-linecap='square'/%3e%3c/svg%3e")`
+    } : {})
+  },
+  className: cn(["-translate-y-xl", "flex flex-col items-center justify-center gap-lg", "p-lg rounded-3xl", "bg-neutral-base", !empty && "shadow-md"])
+}, children);
+const DropAreaContent = ({
+  title,
+  description
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "flex flex-col items-center justify-center gap-sm"
+}, /*#__PURE__*/React.createElement("div", {
+  className: "fill-neutral-strong"
+}, /*#__PURE__*/React.createElement(UploadIcon, {
+  width: 75,
+  height: 75
+})), /*#__PURE__*/React.createElement("div", {
+  className: "text-center"
+}, title && /*#__PURE__*/React.createElement(Heading, {
+  level: 4,
+  className: "text-neutral-strong"
+}, title), description && /*#__PURE__*/React.createElement(Text, {
+  as: "div",
+  style: {
+    width: "300px"
+  },
+  className: "text-neutral-strong"
+}, description)));
+const DropAreaButton = ({
+  onClick
+}) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+  onClick: onClick,
+  text: "Upload files",
+  icon: /*#__PURE__*/React.createElement(UploadFileIcon, null)
+}));
+export const FileDropArea = ({
+  title,
+  description,
+  empty,
+  onClick
+}) => /*#__PURE__*/React.createElement(DropAreaContainer, {
+  empty: empty
+}, /*#__PURE__*/React.createElement(DropAreaBox, {
+  empty: empty
+}, /*#__PURE__*/React.createElement(DropAreaContent, {
+  title: title,
+  description: description
+}), empty && /*#__PURE__*/React.createElement(DropAreaButton, {
+  onClick: onClick
+})));
+
+//# sourceMappingURL=FileDropArea.js.map

package/components/FileDropArea/FileDropArea.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Button","cn","Heading","Text","ReactComponent","UploadFileIcon","UploadIcon","DropAreaContainer","empty","children","createElement","className","DropAreaBox","style","width","height","backgroundImage","DropAreaContent","title","description","level","as","DropAreaButton","onClick","text","icon","FileDropArea"],"sources":["FileDropArea.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, cn, Heading, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as UploadFileIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as UploadIcon } from \"@webiny/icons/cloud_upload.svg\";\n\ninterface DropAreaContainerProps {\n    empty?: boolean;\n    children: React.ReactNode;\n}\n\nconst DropAreaContainer = ({ empty, children }: DropAreaContainerProps) => (\n    <div\n        className={cn([\n            \"w-full h-full p-lg flex items-center justify-center\",\n            empty ? \"bg-neutral-base\" : \"pt-xxl bg-neutral-xstrong/20\"\n        ])}\n    >\n        {children}\n    </div>\n);\n\ninterface DropAreaBoxProps {\n    empty?: boolean;\n    children: React.ReactNode;\n}\n\nconst DropAreaBox = ({ children, empty }: DropAreaBoxProps) => (\n    <div\n        style={{\n            width: \"650px\",\n            height: \"400px\",\n            ...(empty\n                ? {\n                      backgroundImage: `url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%23E7E7E7FF' stroke-width='4' stroke-dasharray='12' stroke-dashoffset='35' stroke-linecap='square'/%3e%3c/svg%3e\")`\n                  }\n                : {})\n        }}\n        className={cn([\n            \"-translate-y-xl\",\n            \"flex flex-col items-center justify-center gap-lg\",\n            \"p-lg rounded-3xl\",\n            \"bg-neutral-base\",\n            !empty && \"shadow-md\"\n        ])}\n    >\n        {children}\n    </div>\n);\n\ninterface DropAreaContentProps {\n    empty?: boolean;\n    title?: string;\n    description?: string;\n}\n\nconst DropAreaContent = ({ title, description }: DropAreaContentProps) => (\n    <div className={\"flex flex-col items-center justify-center gap-sm\"}>\n        <div className={\"fill-neutral-strong\"}>\n            <UploadIcon width={75} height={75} />\n        </div>\n        <div className={\"text-center\"}>\n            {title && (\n                <Heading level={4} className={\"text-neutral-strong\"}>\n                    {title}\n                </Heading>\n            )}\n            {description && (\n                <Text as={\"div\"} style={{ width: \"300px\" }} className={\"text-neutral-strong\"}>\n                    {description}\n                </Text>\n            )}\n        </div>\n    </div>\n);\n\ninterface DropAreaButtonProps {\n    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n}\n\nconst DropAreaButton = ({ onClick }: DropAreaButtonProps) => (\n    <div>\n        <Button onClick={onClick} text={\"Upload files\"} icon={<UploadFileIcon />} />\n    </div>\n);\n\nexport interface FileDropAreaProps {\n    empty?: boolean;\n    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n    title?: string;\n    description?: string;\n    icon?: React.ReactElement;\n}\n\nexport const FileDropArea = ({ title, description, empty, onClick }: FileDropAreaProps) => (\n    <DropAreaContainer empty={empty}>\n        <DropAreaBox empty={empty}>\n            <DropAreaContent title={title} description={description} />\n            {empty && <DropAreaButton onClick={onClick} />}\n        </DropAreaBox>\n    </DropAreaContainer>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,IAAI,QAAQ,kBAAkB;AAC5D,SAASC,cAAc,IAAIC,cAAc,QAAQ,+BAA+B;AAChF,SAASD,cAAc,IAAIE,UAAU,QAAQ,gCAAgC;AAO7E,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAiC,CAAC,kBAClEV,KAAA,CAAAW,aAAA;EACIC,SAAS,EAAEV,EAAE,CAAC,CACV,qDAAqD,EACrDO,KAAK,GAAG,iBAAiB,GAAG,8BAA8B,CAC7D;AAAE,GAEFC,QACA,CACR;AAOD,MAAMG,WAAW,GAAGA,CAAC;EAAEH,QAAQ;EAAED;AAAwB,CAAC,kBACtDT,KAAA,CAAAW,aAAA;EACIG,KAAK,EAAE;IACHC,KAAK,EAAE,OAAO;IACdC,MAAM,EAAE,OAAO;IACf,IAAIP,KAAK,GACH;MACIQ,eAAe,EAAE;IACrB,CAAC,GACD,CAAC,CAAC;EACZ,CAAE;EACFL,SAAS,EAAEV,EAAE,CAAC,CACV,iBAAiB,EACjB,kDAAkD,EAClD,kBAAkB,EAClB,iBAAiB,EACjB,CAACO,KAAK,IAAI,WAAW,CACxB;AAAE,GAEFC,QACA,CACR;AAQD,MAAMQ,eAAe,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAkC,CAAC,kBACjEpB,KAAA,CAAAW,aAAA;EAAKC,SAAS,EAAE;AAAmD,gBAC/DZ,KAAA,CAAAW,aAAA;EAAKC,SAAS,EAAE;AAAsB,gBAClCZ,KAAA,CAAAW,aAAA,CAACJ,UAAU;EAACQ,KAAK,EAAE,EAAG;EAACC,MAAM,EAAE;AAAG,CAAE,CACnC,CAAC,eACNhB,KAAA,CAAAW,aAAA;EAAKC,SAAS,EAAE;AAAc,GACzBO,KAAK,iBACFnB,KAAA,CAAAW,aAAA,CAACR,OAAO;EAACkB,KAAK,EAAE,CAAE;EAACT,SAAS,EAAE;AAAsB,GAC/CO,KACI,CACZ,EACAC,WAAW,iBACRpB,KAAA,CAAAW,aAAA,CAACP,IAAI;EAACkB,EAAE,EAAE,KAAM;EAACR,KAAK,EAAE;IAAEC,KAAK,EAAE;EAAQ,CAAE;EAACH,SAAS,EAAE;AAAsB,GACxEQ,WACC,CAET,CACJ,CACR;AAMD,MAAMG,cAAc,GAAGA,CAAC;EAAEC;AAA6B,CAAC,kBACpDxB,KAAA,CAAAW,aAAA,2BACIX,KAAA,CAAAW,aAAA,CAACV,MAAM;EAACuB,OAAO,EAAEA,OAAQ;EAACC,IAAI,EAAE,cAAe;EAACC,IAAI,eAAE1B,KAAA,CAAAW,aAAA,CAACL,cAAc,MAAE;AAAE,CAAE,CAC1E,CACR;AAUD,OAAO,MAAMqB,YAAY,GAAGA,CAAC;EAAER,KAAK;EAAEC,WAAW;EAAEX,KAAK;EAAEe;AAA2B,CAAC,kBAClFxB,KAAA,CAAAW,aAAA,CAACH,iBAAiB;EAACC,KAAK,EAAEA;AAAM,gBAC5BT,KAAA,CAAAW,aAAA,CAACE,WAAW;EAACJ,KAAK,EAAEA;AAAM,gBACtBT,KAAA,CAAAW,aAAA,CAACO,eAAe;EAACC,KAAK,EAAEA,KAAM;EAACC,WAAW,EAAEA;AAAY,CAAE,CAAC,EAC1DX,KAAK,iBAAIT,KAAA,CAAAW,aAAA,CAACY,cAAc;EAACC,OAAO,EAAEA;AAAQ,CAAE,CACpC,CACE,CACtB","ignoreList":[]}

package/components/FileDropArea/index.d.ts

@@ -0,0 +1 @@
+export * from "./FileDropArea.js";

package/components/FileDropArea/index.js

@@ -0,0 +1,3 @@
+export * from "./FileDropArea.js";
+
+//# sourceMappingURL=index.js.map

package/components/FileDropArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./FileDropArea.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/FileDropPlaceholder/FileDropPlaceholder.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const FileDropPlaceholder: () => React.JSX.Element;

package/components/FileDropPlaceholder/FileDropPlaceholder.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { FileDropArea } from "../FileDropArea/index.js";
+export const FileDropPlaceholder = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-0 left-0 bottom-0 right-0 animate-in fade-in duration-300"
+  }, /*#__PURE__*/React.createElement(FileDropArea, {
+    title: "Drop files here",
+    description: "Upload files from your computer by dropping them here"
+  }));
+};
+
+//# sourceMappingURL=FileDropPlaceholder.js.map

package/components/FileDropPlaceholder/FileDropPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FileDropArea","FileDropPlaceholder","createElement","className","title","description"],"sources":["FileDropPlaceholder.tsx"],"sourcesContent":["import React from \"react\";\nimport { FileDropArea } from \"../FileDropArea/index.js\";\n\nexport const FileDropPlaceholder = () => {\n    return (\n        <div className={\"absolute top-0 left-0 bottom-0 right-0 animate-in fade-in duration-300\"}>\n            <FileDropArea\n                title={\"Drop files here\"}\n                description={\"Upload files from your computer by dropping them here\"}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY;AAErB,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACrC,oBACIF,KAAA,CAAAG,aAAA;IAAKC,SAAS,EAAE;EAAyE,gBACrFJ,KAAA,CAAAG,aAAA,CAACF,YAAY;IACTI,KAAK,EAAE,iBAAkB;IACzBC,WAAW,EAAE;EAAwD,CACxE,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/FileDropPlaceholder/index.d.ts

@@ -0,0 +1 @@
+export * from "./FileDropPlaceholder.js";

package/components/FileDropPlaceholder/index.js

@@ -0,0 +1,3 @@
+export * from "./FileDropPlaceholder.js";
+
+//# sourceMappingURL=index.js.map

package/components/FileDropPlaceholder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./FileDropPlaceholder.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/Filters/Filters.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Filters as BaseFilters } from "@webiny/app-admin";
+import { useFileManagerView, useFileManagerViewConfig } from "../../index.js";
+export const Filters = () => {
+  const {
+    showingFilters,
+    setFilters
+  } = useFileManagerView();
+  const {
+    browser
+  } = useFileManagerViewConfig();
+  const applyFilters = data => {
+    if (!Object.keys(data).length) {
+      return;
+    }
+    const convertedFilters = browser.filtersToWhere.reduce((data, converter) => converter(data), data);
+    setFilters(convertedFilters);
+  };
+  return /*#__PURE__*/React.createElement(BaseFilters, {
+    filters: browser.filters,
+    show: showingFilters,
+    onChange: applyFilters
+  });
+};
+
+//# sourceMappingURL=Filters.js.map

package/components/Filters/Filters.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Filters","BaseFilters","useFileManagerView","useFileManagerViewConfig","showingFilters","setFilters","browser","applyFilters","data","Object","keys","length","convertedFilters","filtersToWhere","reduce","converter","createElement","filters","show","onChange"],"sources":["Filters.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FiltersOnSubmit } from \"@webiny/app-admin\";\nimport { Filters as BaseFilters } from \"@webiny/app-admin\";\nimport { useFileManagerView, useFileManagerViewConfig } from \"~/index.js\";\n\nexport const Filters = () => {\n    const { showingFilters, setFilters } = useFileManagerView();\n    const { browser } = useFileManagerViewConfig();\n\n    const applyFilters: FiltersOnSubmit = data => {\n        if (!Object.keys(data).length) {\n            return;\n        }\n\n        const convertedFilters = browser.filtersToWhere.reduce(\n            (data, converter) => converter(data),\n            data\n        );\n        setFilters(convertedFilters);\n    };\n\n    return <BaseFilters filters={browser.filters} show={showingFilters} onChange={applyFilters} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,OAAO,IAAIC,WAAW,QAAQ,mBAAmB;AAC1D,SAASC,kBAAkB,EAAEC,wBAAwB;AAErD,OAAO,MAAMH,OAAO,GAAGA,CAAA,KAAM;EACzB,MAAM;IAAEI,cAAc;IAAEC;EAAW,CAAC,GAAGH,kBAAkB,CAAC,CAAC;EAC3D,MAAM;IAAEI;EAAQ,CAAC,GAAGH,wBAAwB,CAAC,CAAC;EAE9C,MAAMI,YAA6B,GAAGC,IAAI,IAAI;IAC1C,IAAI,CAACC,MAAM,CAACC,IAAI,CAACF,IAAI,CAAC,CAACG,MAAM,EAAE;MAC3B;IACJ;IAEA,MAAMC,gBAAgB,GAAGN,OAAO,CAACO,cAAc,CAACC,MAAM,CAClD,CAACN,IAAI,EAAEO,SAAS,KAAKA,SAAS,CAACP,IAAI,CAAC,EACpCA,IACJ,CAAC;IACDH,UAAU,CAACO,gBAAgB,CAAC;EAChC,CAAC;EAED,oBAAOb,KAAA,CAAAiB,aAAA,CAACf,WAAW;IAACgB,OAAO,EAAEX,OAAO,CAACW,OAAQ;IAACC,IAAI,EAAEd,cAAe;IAACe,QAAQ,EAAEZ;EAAa,CAAE,CAAC;AAClG,CAAC","ignoreList":[]}

package/components/Filters/index.d.ts

@@ -0,0 +1 @@
+export * from "./Filters.js";

package/components/Filters/index.js

@@ -0,0 +1,3 @@
+export * from "./Filters.js";
+
+//# sourceMappingURL=index.js.map

package/components/Filters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Filters.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/Grid/ActionButton.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
 export interface ActionButtonProps {
     icon: JSX.Element;
+    label?: string;
     onAction: () => void;
     "data-testid"?: string;
     disabled?: boolean;
 }
-export declare const ActionButton: ({ icon, onAction, disabled, ...props }: ActionButtonProps) => React.JSX.Element;
+export declare const ActionButton: ({ icon, label, onAction, disabled, ...props }: ActionButtonProps) => React.JSX.Element;

package/components/Grid/ActionButton.js

@@ -1,24 +1,27 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ActionButton = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _Button = require("@webiny/ui/Button");
-var _excluded = ["icon", "onAction", "disabled"];
-var ActionButton = exports.ActionButton = function ActionButton(_ref) {
-  var icon = _ref.icon,
-    onAction = _ref.onAction,
-    disabled = _ref.disabled,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    icon: icon,
-    onClick: onAction,
-    disabled: disabled,
-    "data-testid": props["data-testid"]
+import React, { useCallback } from "react";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+export const ActionButton = ({
+  icon,
+  label,
+  onAction,
+  disabled,
+  ...props
+}) => {
+  const onClick = useCallback(event => {
+    // Prevent the click event from propagating to the grid item component.
+    event.stopPropagation();
+    onAction && onAction();
+  }, [onAction]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: label ?? "Custom action",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      variant: "tertiary",
+      size: "sm",
+      icon: icon,
+      onClick: onClick,
+      disabled: disabled,
+      "data-testid": props["data-testid"]
+    })
   });
 };
 

package/components/Grid/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Button","_excluded","ActionButton","exports","_ref","icon","onAction","disabled","props","_objectWithoutProperties2","default","createElement","IconButton","onClick"],"sources":["ActionButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton } from \"@webiny/ui/Button\";\n\nexport interface ActionButtonProps {\n    icon: JSX.Element;\n    onAction: () => void;\n    \"data-testid\"?: string;\n    disabled?: boolean;\n}\n\nexport const ActionButton = ({ icon, onAction, disabled, ...props }: ActionButtonProps) => {\n    return (\n        <IconButton\n            icon={icon}\n            onClick={onAction}\n            disabled={disabled}\n            data-testid={props[\"data-testid\"]}\n        />\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAA+C,IAAAE,SAAA;AASxC,IAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,SAAfA,YAAYA,CAAAE,IAAA,EAAkE;EAAA,IAA5DC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAKC,KAAK,OAAAC,yBAAA,CAAAC,OAAA,EAAAN,IAAA,EAAAH,SAAA;EAC7D,oBACIJ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACX,OAAA,CAAAY,UAAU;IACPP,IAAI,EAAEA,IAAK;IACXQ,OAAO,EAAEP,QAAS;IAClBC,QAAQ,EAAEA,QAAS;IACnB,eAAaC,KAAK,CAAC,aAAa;EAAE,CACrC,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","IconButton","Tooltip","ActionButton","icon","label","onAction","disabled","props","onClick","event","stopPropagation","createElement","content","trigger","variant","size"],"sources":["ActionButton.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { IconButton, Tooltip } from \"@webiny/admin-ui\";\n\nexport interface ActionButtonProps {\n    icon: JSX.Element;\n    label?: string;\n    onAction: () => void;\n    \"data-testid\"?: string;\n    disabled?: boolean;\n}\n\nexport const ActionButton = ({ icon, label, onAction, disabled, ...props }: ActionButtonProps) => {\n    const onClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            // Prevent the click event from propagating to the grid item component.\n            event.stopPropagation();\n            onAction && onAction();\n        },\n        [onAction]\n    );\n\n    return (\n        <Tooltip\n            content={label ?? \"Custom action\"}\n            trigger={\n                <IconButton\n                    variant={\"tertiary\"}\n                    size={\"sm\"}\n                    icon={icon}\n                    onClick={onClick}\n                    disabled={disabled}\n                    data-testid={props[\"data-testid\"]}\n                />\n            }\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,UAAU,EAAEC,OAAO,QAAQ,kBAAkB;AAUtD,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAyB,CAAC,KAAK;EAC9F,MAAMC,OAAO,GAAGT,WAAW,CACtBU,KAA0C,IAAK;IAC5C;IACAA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBL,QAAQ,IAAIA,QAAQ,CAAC,CAAC;EAC1B,CAAC,EACD,CAACA,QAAQ,CACb,CAAC;EAED,oBACIP,KAAA,CAAAa,aAAA,CAACV,OAAO;IACJW,OAAO,EAAER,KAAK,IAAI,eAAgB;IAClCS,OAAO,eACHf,KAAA,CAAAa,aAAA,CAACX,UAAU;MACPc,OAAO,EAAE,UAAW;MACpBC,IAAI,EAAE,IAAK;MACXZ,IAAI,EAAEA,IAAK;MACXK,OAAO,EAAEA,OAAQ;MACjBF,QAAQ,EAAEA,QAAS;MACnB,eAAaC,KAAK,CAAC,aAAa;IAAE,CACrC;EACJ,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}

package/components/Grid/File.d.ts

@@ -1,16 +1,32 @@
 import React from "react";
-import { FileItem } from "@webiny/app-admin/types";
-export interface FileOptions {
-    label: string;
-    onClick: (file: boolean) => void;
-}
+import type { FileItem } from "../../types.js";
 export interface FileProps {
     file: FileItem;
     selected: boolean;
+    fileBody?: JSX.Element;
     onSelect?: (event?: React.MouseEvent) => void;
     onClick?: (event?: React.MouseEvent) => void;
-    options?: FileOptions[];
     multiple?: boolean;
     children: React.ReactNode;
 }
-export declare const FileThumbnail: ({ file, selected, onSelect, children }: FileProps) => React.JSX.Element;
+export type DefaultFileControlsProps = Pick<FileProps, "selected" | "onSelect">;
+export type DefaultFileBodyProps = Pick<FileProps, "selected" | "onSelect" | "children">;
+export declare const File: (({ file, fileBody, selected, onSelect, children }: FileProps) => React.JSX.Element) & {
+    original: ({ file, fileBody, selected, onSelect, children }: FileProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ file, fileBody, selected, onSelect, children }: FileProps) => React.JSX.Element) & {
+        original: ({ file, fileBody, selected, onSelect, children }: FileProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ file, fileBody, selected, onSelect, children }: FileProps) => React.JSX.Element) & {
+        original: ({ file, fileBody, selected, onSelect, children }: FileProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};

package/components/Grid/File.js

@@ -1,60 +1,85 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileThumbnail = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactLazyLoad = _interopRequireDefault(require("react-lazy-load"));
-var _TimeAgo = require("@webiny/ui/TimeAgo");
-var _Typography = require("@webiny/ui/Typography");
-var _check_circle = require("@material-design-icons/svg/filled/check_circle.svg");
-var _styled = require("./styled");
-var _FileManagerViewConfig = require("../../modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig");
-/**
- * Package react-lazy-load has no types.
- */
-// @ts-expect-error
-
-var FileThumbnail = exports.FileThumbnail = function FileThumbnail(_ref) {
-  var file = _ref.file,
-    selected = _ref.selected,
-    onSelect = _ref.onSelect,
-    children = _ref.children;
-  var _useFileManagerViewCo = (0, _FileManagerViewConfig.useFileManagerViewConfig)(),
-    browser = _useFileManagerViewCo.browser;
-  var itemActions = browser.grid.itemActions;
-  return /*#__PURE__*/_react.default.createElement(_styled.FileWrapper, {
-    "data-testid": "fm-list-wrapper-file"
-  }, /*#__PURE__*/_react.default.createElement(_styled.FileBody, null, /*#__PURE__*/_react.default.createElement(_styled.FileControls, null, /*#__PURE__*/_react.default.createElement(_styled.FileInfoIcon, null, itemActions.map(function (action) {
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+import React, { Fragment } from "react";
+import LazyLoad from "react-lazy-load";
+import { makeDecoratable } from "@webiny/app-admin";
+import { Text, TimeAgo, cn, CheckboxPrimitive } from "@webiny/admin-ui";
+import { useFileManagerViewConfig } from "../../modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.js";
+const DefaultFileControls = ({
+  onSelect,
+  selected
+}) => {
+  const {
+    browser
+  } = useFileManagerViewConfig();
+  const {
+    itemActions
+  } = browser.grid;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, onSelect ? /*#__PURE__*/React.createElement("div", {
+    className: cn(["p-xs rounded-md", "bg-neutral-base/30", "absolute top-sm left-sm", selected ? "visible" : "invisible group-hover:visible"])
+  }, /*#__PURE__*/React.createElement(CheckboxPrimitive, {
+    onClick: onSelect,
+    checked: selected,
+    onChange: () => void 0
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: cn(["invisible group-hover:visible", "flex items-center gap-xxs", "p-xs", "absolute top-xs-plus right-xs-plus"])
+  }, itemActions.map(action => {
+    return /*#__PURE__*/React.createElement(Fragment, {
       key: action.name
     }, action.element);
-  })), onSelect ? /*#__PURE__*/_react.default.createElement(_styled.FileSelectedMarker, {
-    className: selected ? "selected" : "",
-    onClick: onSelect
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_check_circle.ReactComponent, null))) : null), /*#__PURE__*/_react.default.createElement(_reactLazyLoad.default, {
-    height: 200,
-    offsetVertical: 300
-  }, /*#__PURE__*/_react.default.createElement(_styled.FilePreview, {
+  })));
+};
+const DefaultFileBody = ({
+  selected,
+  onSelect,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: onSelect,
+    className: cn(["relative", onSelect ? "cursor-pointer" : "cursor-default"])
+  }, /*#__PURE__*/React.createElement(DefaultFileControls, {
+    selected: selected,
+    onSelect: onSelect
+  }), /*#__PURE__*/React.createElement(LazyLoad, {
+    height: 150,
+    offset: "300px",
     "data-testid": "fm-file-wrapper-file-preview",
-    className: selected ? "selected" : ""
-  }, /*#__PURE__*/_react.default.createElement(_styled.FileClickable, null), children))), /*#__PURE__*/_react.default.createElement(_styled.FileLabel, {
+    className: cn(["bg-neutral-muted", "flex items-center justify-center", "text-neutral-strong text-sm"])
+  }, children));
+};
+const DefaultFileLabel = ({
+  file
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "px-md py-sm-extra",
     "data-testid": "fm-file-wrapper-file-label"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    className: "type",
-    use: "overline"
-  }, file.type), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    className: "name",
-    use: "body2"
-  }, file.name), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    className: "createdOn",
-    use: "caption"
-  }, /*#__PURE__*/_react.default.createElement(_TimeAgo.TimeAgo, {
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    as: "div",
+    className: "truncate text-neutral-primary"
+  }, file.name), /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    as: "div",
+    className: "truncate text-neutral-dimmed"
+  }, file.type, " ", " // ", " ", /*#__PURE__*/React.createElement(TimeAgo, {
     datetime: file.createdOn
-  }))));
+  })));
 };
+export const File = makeDecoratable("File", ({
+  file,
+  fileBody,
+  selected,
+  onSelect,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(["group", "bg-neutral-base rounded-lg", "shadow-sm hover:shadow-lg", "border-sm border-solid border-neutral-base hover:border-neutral-dimmed-darker", selected && "ring-md ring-primary-strong", "transition-shadow duration-250 ease-in-out", "overflow-hidden"]),
+    "data-testid": "fm-list-wrapper-file",
+    "data-file-id": file.id
+  }, fileBody ?? /*#__PURE__*/React.createElement(DefaultFileBody, {
+    selected: selected,
+    onSelect: onSelect
+  }, children), /*#__PURE__*/React.createElement(DefaultFileLabel, {
+    file: file
+  }));
+});
 
 //# sourceMappingURL=File.js.map