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

package/components/FileDetails/components/ActionButton.js

@@ -1,30 +1,23 @@
-"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 _Tooltip = require("@webiny/ui/Tooltip");
-var _Button = require("@webiny/ui/Button");
-var _excluded = ["label", "icon", "onAction", "disabled"];
-var ActionButton = exports.ActionButton = function ActionButton(_ref) {
-  var label = _ref.label,
-    icon = _ref.icon,
-    onAction = _ref.onAction,
-    disabled = _ref.disabled,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-    content: /*#__PURE__*/_react.default.createElement("span", null, label),
-    placement: "bottom"
-  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+import React from "react";
+import { Button } from "@webiny/admin-ui";
+export const ActionButton = ({
+  label,
+  icon,
+  onAction,
+  disabled,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Button, {
+    text: label,
     icon: icon,
     onClick: onAction,
     disabled: disabled,
-    "data-testid": props["data-testid"]
-  }));
+    "data-testid": props["data-testid"],
+    containerClassName: className,
+    variant: "ghost",
+    size: "sm"
+  });
 };
 
 //# sourceMappingURL=ActionButton.js.map

package/components/FileDetails/components/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Tooltip","_Button","_excluded","ActionButton","exports","_ref","label","icon","onAction","disabled","props","_objectWithoutProperties2","default","createElement","Tooltip","content","placement","IconButton","onClick"],"sources":["ActionButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { IconButton } from \"@webiny/ui/Button\";\n\nexport interface ActionButtonProps {\n    label: string;\n    icon: JSX.Element;\n    onAction: () => void;\n    \"data-testid\"?: string;\n    disabled?: boolean;\n}\n\nexport const ActionButton = ({ label, icon, onAction, disabled, ...props }: ActionButtonProps) => {\n    return (\n        <Tooltip content={<span>{label}</span>} placement={\"bottom\"}>\n            <IconButton\n                icon={icon}\n                onClick={onAction}\n                disabled={disabled}\n                data-testid={props[\"data-testid\"]}\n            />\n        </Tooltip>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAA+C,IAAAG,SAAA;AAUxC,IAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,SAAfA,YAAYA,CAAAE,IAAA,EAAyE;EAAA,IAAnEC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAKC,KAAK,OAAAC,yBAAA,CAAAC,OAAA,EAAAP,IAAA,EAAAH,SAAA;EACpE,oBACIL,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,QAAA,CAAAc,OAAO;IAACC,OAAO,eAAElB,MAAA,CAAAe,OAAA,CAAAC,aAAA,eAAOP,KAAY,CAAE;IAACU,SAAS,EAAE;EAAS,gBACxDnB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,OAAA,CAAAgB,UAAU;IACPV,IAAI,EAAEA,IAAK;IACXW,OAAO,EAAEV,QAAS;IAClBC,QAAQ,EAAEA,QAAS;IACnB,eAAaC,KAAK,CAAC,aAAa;EAAE,CACrC,CACI,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Button","ActionButton","label","icon","onAction","disabled","className","props","createElement","text","onClick","containerClassName","variant","size"],"sources":["ActionButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\n\nexport interface ActionButtonProps {\n    label: string;\n    icon: JSX.Element;\n    onAction: () => void;\n    \"data-testid\"?: string;\n    disabled?: boolean;\n    className?: string;\n}\n\nexport const ActionButton = ({\n    label,\n    icon,\n    onAction,\n    disabled,\n    className,\n    ...props\n}: ActionButtonProps) => {\n    return (\n        <Button\n            text={label}\n            icon={icon}\n            onClick={onAction}\n            disabled={disabled}\n            data-testid={props[\"data-testid\"]}\n            containerClassName={className}\n            variant={\"ghost\"}\n            size={\"sm\"}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,kBAAkB;AAWzC,OAAO,MAAMC,YAAY,GAAGA,CAAC;EACzBC,KAAK;EACLC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACT,GAAGC;AACY,CAAC,KAAK;EACrB,oBACIR,KAAA,CAAAS,aAAA,CAACR,MAAM;IACHS,IAAI,EAAEP,KAAM;IACZC,IAAI,EAAEA,IAAK;IACXO,OAAO,EAAEN,QAAS;IAClBC,QAAQ,EAAEA,QAAS;IACnB,eAAaE,KAAK,CAAC,aAAa,CAAE;IAClCI,kBAAkB,EAAEL,SAAU;IAC9BM,OAAO,EAAE,OAAQ;IACjBC,IAAI,EAAE;EAAK,CACd,CAAC;AAEV,CAAC","ignoreList":[]}

package/components/FileDetails/components/Actions.js

@@ -1,37 +1,14 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Actions = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireWildcard(require("react"));
-var _ = require("../../..");
-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 ActionsContainer = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e151g3xw0"
-} : {
-  target: "e151g3xw0",
-  label: "ActionsContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "lt3t2",
-  styles: "text-align:center;border-bottom:1px solid var(--mdc-theme-on-background)"
-} : {
-  name: "lt3t2",
-  styles: "text-align:center;border-bottom:1px solid var(--mdc-theme-on-background)",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFjdGlvbnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUltQyIsImZpbGUiOiJBY3Rpb25zLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBGcmFnbWVudCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB1c2VGaWxlTWFuYWdlclZpZXdDb25maWcgfSBmcm9tIFwifi9pbmRleFwiO1xuXG5jb25zdCBBY3Rpb25zQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKTtcbmA7XG5cbmV4cG9ydCBjb25zdCBBY3Rpb25zID0gKCkgPT4ge1xuICAgIGNvbnN0IHsgZmlsZURldGFpbHMgfSA9IHVzZUZpbGVNYW5hZ2VyVmlld0NvbmZpZygpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEFjdGlvbnNDb250YWluZXI+XG4gICAgICAgICAgICB7ZmlsZURldGFpbHMuYWN0aW9ucy5tYXAoYWN0aW9uID0+IChcbiAgICAgICAgICAgICAgICA8RnJhZ21lbnQga2V5PXthY3Rpb24ubmFtZX0+e2FjdGlvbi5lbGVtZW50fTwvRnJhZ21lbnQ+XG4gICAgICAgICAgICApKX1cbiAgICAgICAgPC9BY3Rpb25zQ29udGFpbmVyPlxuICAgICk7XG59O1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var Actions = exports.Actions = function Actions() {
-  var _useFileManagerViewCo = (0, _.useFileManagerViewConfig)(),
-    fileDetails = _useFileManagerViewCo.fileDetails;
-  return /*#__PURE__*/_react.default.createElement(ActionsContainer, null, fileDetails.actions.map(function (action) {
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-      key: action.name
-    }, action.element);
-  }));
+import React from "react";
+import { useFileManagerViewConfig } from "../../../index.js";
+export const Actions = () => {
+  const {
+    fileDetails
+  } = useFileManagerViewConfig();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-start gap-xs"
+  }, fileDetails.actions.map(action => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: action.name
+  }, action.element)));
 };
 
 //# sourceMappingURL=Actions.js.map

package/components/FileDetails/components/Actions.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_","_EMOTION_STRINGIFIED_CSS_ERROR__","ActionsContainer","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","Actions","exports","_useFileManagerViewCo","useFileManagerViewConfig","fileDetails","createElement","actions","action","Fragment","key","element"],"sources":["Actions.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useFileManagerViewConfig } from \"~/index\";\n\nconst ActionsContainer = styled.div`\n    text-align: center;\n    border-bottom: 1px solid var(--mdc-theme-on-background);\n`;\n\nexport const Actions = () => {\n    const { fileDetails } = useFileManagerViewConfig();\n\n    return (\n        <ActionsContainer>\n            {fileDetails.actions.map(action => (\n                <Fragment key={action.name}>{action.element}</Fragment>\n            ))}\n        </ActionsContainer>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,CAAA,GAAAD,OAAA;AAAmD,SAAAE,iCAAA;AAEnD,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,EAGrB;AAEM,IAAMa,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAAVA,OAAOA,CAAA,EAAS;EACzB,IAAAE,qBAAA,GAAwB,IAAAC,0BAAwB,EAAC,CAAC;IAA1CC,WAAW,GAAAF,qBAAA,CAAXE,WAAW;EAEnB,oBACIrB,MAAA,CAAAO,OAAA,CAAAe,aAAA,CAACjB,gBAAgB,QACZgB,WAAW,CAACE,OAAO,CAACR,GAAG,CAAC,UAAAS,MAAM;IAAA,oBAC3BxB,MAAA,CAAAO,OAAA,CAAAe,aAAA,CAACtB,MAAA,CAAAyB,QAAQ;MAACC,GAAG,EAAEF,MAAM,CAACX;IAAK,GAAEW,MAAM,CAACG,OAAkB,CAAC;EAAA,CAC1D,CACa,CAAC;AAE3B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useFileManagerViewConfig","Actions","fileDetails","createElement","className","actions","map","action","Fragment","key","name","element"],"sources":["Actions.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFileManagerViewConfig } from \"~/index.js\";\n\nexport const Actions = () => {\n    const { fileDetails } = useFileManagerViewConfig();\n\n    return (\n        <div className={\"flex justify-start gap-xs\"}>\n            {fileDetails.actions.map(action => (\n                <React.Fragment key={action.name}>{action.element}</React.Fragment>\n            ))}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,wBAAwB;AAEjC,OAAO,MAAMC,OAAO,GAAGA,CAAA,KAAM;EACzB,MAAM;IAAEC;EAAY,CAAC,GAAGF,wBAAwB,CAAC,CAAC;EAElD,oBACID,KAAA,CAAAI,aAAA;IAAKC,SAAS,EAAE;EAA4B,GACvCF,WAAW,CAACG,OAAO,CAACC,GAAG,CAACC,MAAM,iBAC3BR,KAAA,CAAAI,aAAA,CAACJ,KAAK,CAACS,QAAQ;IAACC,GAAG,EAAEF,MAAM,CAACG;EAAK,GAAEH,MAAM,CAACI,OAAwB,CACrE,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/FileDetails/components/BaseFields.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CmsModel } from "@webiny/app-headless-cms/types";
+import type { CmsModel } from "@webiny/app-headless-cms/types.js";
 interface BaseFieldsProps {
     model: CmsModel;
 }

package/components/FileDetails/components/BaseFields.js

@@ -1,34 +1,26 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BaseFields = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _appAdmin = require("@webiny/app-admin");
-var _ModelProvider = require("@webiny/app-headless-cms/admin/components/ModelProvider");
-var _Fields = require("@webiny/app-headless-cms/admin/components/ContentEntryForm/Fields");
-var _form = require("@webiny/form");
-var BaseFields = exports.BaseFields = function BaseFields(_ref) {
-  var model = _ref.model;
-  var fields = (0, _react.useMemo)(function () {
-    return model.fields.filter(function (f) {
-      return f.fieldId !== "extensions";
-    });
+import React, { useMemo } from "react";
+import { CompositionScope } from "@webiny/app-admin";
+import { ModelProvider } from "@webiny/app-headless-cms/admin/components/ModelProvider/index.js";
+import { Fields } from "@webiny/app-headless-cms/admin/components/ContentEntryForm/Fields.js";
+import { Bind } from "@webiny/form";
+export const BaseFields = ({
+  model
+}) => {
+  const fields = useMemo(() => {
+    return model.fields.filter(f => f.fieldId !== "extensions");
   }, [model]);
-  return /*#__PURE__*/_react.default.createElement(_appAdmin.CompositionScope, {
+  return /*#__PURE__*/React.createElement(CompositionScope, {
     name: "fm.fileDetails.baseFields"
-  }, /*#__PURE__*/_react.default.createElement(_ModelProvider.ModelProvider, {
+  }, /*#__PURE__*/React.createElement(ModelProvider, {
     model: model
-  }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+  }, /*#__PURE__*/React.createElement(Fields, {
     contentModel: model
     /**
      * TODO: Figure out correct Bind type
      */
     // @ts-expect-error
     ,
-    Bind: _form.Bind,
+    Bind: Bind,
     fields: fields,
     layout: model.layout || []
   })));

package/components/FileDetails/components/BaseFields.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_appAdmin","_ModelProvider","_Fields","_form","BaseFields","exports","_ref","model","fields","useMemo","filter","f","fieldId","default","createElement","CompositionScope","name","ModelProvider","Fields","contentModel","Bind","layout"],"sources":["BaseFields.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { CompositionScope } from \"@webiny/app-admin\";\nimport { CmsModel } from \"@webiny/app-headless-cms/types\";\nimport { ModelProvider } from \"@webiny/app-headless-cms/admin/components/ModelProvider\";\nimport { Fields } from \"@webiny/app-headless-cms/admin/components/ContentEntryForm/Fields\";\nimport { Bind } from \"@webiny/form\";\n\ninterface BaseFieldsProps {\n    model: CmsModel;\n}\n\nexport const BaseFields = ({ model }: BaseFieldsProps) => {\n    const fields = useMemo(() => {\n        return model.fields.filter(f => f.fieldId !== \"extensions\");\n    }, [model]);\n\n    return (\n        <CompositionScope name={\"fm.fileDetails.baseFields\"}>\n            <ModelProvider model={model}>\n                <Fields\n                    contentModel={model}\n                    /**\n                     * TODO: Figure out correct Bind type\n                     */\n                    // @ts-expect-error\n                    Bind={Bind}\n                    fields={fields}\n                    layout={model.layout || []}\n                />\n            </ModelProvider>\n        </CompositionScope>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAEA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAMO,IAAMK,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAAE,IAAA,EAAmC;EAAA,IAA7BC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAC9B,IAAMC,MAAM,GAAG,IAAAC,cAAO,EAAC,YAAM;IACzB,OAAOF,KAAK,CAACC,MAAM,CAACE,MAAM,CAAC,UAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,OAAO,KAAK,YAAY;IAAA,EAAC;EAC/D,CAAC,EAAE,CAACL,KAAK,CAAC,CAAC;EAEX,oBACIV,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACd,SAAA,CAAAe,gBAAgB;IAACC,IAAI,EAAE;EAA4B,gBAChDnB,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACb,cAAA,CAAAgB,aAAa;IAACV,KAAK,EAAEA;EAAM,gBACxBV,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACZ,OAAA,CAAAgB,MAAM;IACHC,YAAY,EAAEZ;IACd;AACpB;AACA;IACoB;IAAA;IACAa,IAAI,EAAEA,UAAK;IACXZ,MAAM,EAAEA,MAAO;IACfa,MAAM,EAAEd,KAAK,CAACc,MAAM,IAAI;EAAG,CAC9B,CACU,CACD,CAAC;AAE3B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useMemo","CompositionScope","ModelProvider","Fields","Bind","BaseFields","model","fields","filter","f","fieldId","createElement","name","contentModel","layout"],"sources":["BaseFields.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { CompositionScope } from \"@webiny/app-admin\";\nimport type { CmsModel } from \"@webiny/app-headless-cms/types.js\";\nimport { ModelProvider } from \"@webiny/app-headless-cms/admin/components/ModelProvider/index.js\";\nimport { Fields } from \"@webiny/app-headless-cms/admin/components/ContentEntryForm/Fields.js\";\nimport { Bind } from \"@webiny/form\";\n\ninterface BaseFieldsProps {\n    model: CmsModel;\n}\n\nexport const BaseFields = ({ model }: BaseFieldsProps) => {\n    const fields = useMemo(() => {\n        return model.fields.filter(f => f.fieldId !== \"extensions\");\n    }, [model]);\n\n    return (\n        <CompositionScope name={\"fm.fileDetails.baseFields\"}>\n            <ModelProvider model={model}>\n                <Fields\n                    contentModel={model}\n                    /**\n                     * TODO: Figure out correct Bind type\n                     */\n                    // @ts-expect-error\n                    Bind={Bind}\n                    fields={fields}\n                    layout={model.layout || []}\n                />\n            </ModelProvider>\n        </CompositionScope>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,SAASC,aAAa,QAAQ,kEAAkE;AAChG,SAASC,MAAM,QAAQ,sEAAsE;AAC7F,SAASC,IAAI,QAAQ,cAAc;AAMnC,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EACtD,MAAMC,MAAM,GAAGP,OAAO,CAAC,MAAM;IACzB,OAAOM,KAAK,CAACC,MAAM,CAACC,MAAM,CAACC,CAAC,IAAIA,CAAC,CAACC,OAAO,KAAK,YAAY,CAAC;EAC/D,CAAC,EAAE,CAACJ,KAAK,CAAC,CAAC;EAEX,oBACIP,KAAA,CAAAY,aAAA,CAACV,gBAAgB;IAACW,IAAI,EAAE;EAA4B,gBAChDb,KAAA,CAAAY,aAAA,CAACT,aAAa;IAACI,KAAK,EAAEA;EAAM,gBACxBP,KAAA,CAAAY,aAAA,CAACR,MAAM;IACHU,YAAY,EAAEP;IACd;AACpB;AACA;IACoB;IAAA;IACAF,IAAI,EAAEA,IAAK;IACXG,MAAM,EAAEA,MAAO;IACfO,MAAM,EAAER,KAAK,CAACQ,MAAM,IAAI;EAAG,CAC9B,CACU,CACD,CAAC;AAE3B,CAAC","ignoreList":[]}

package/components/FileDetails/components/Content.d.ts

@@ -4,10 +4,11 @@ interface ContentProps {
 }
 export declare const Content: {
     ({ children }: ContentProps): React.JSX.Element;
-    Panel: ({ flex, children }: PanelProps) => React.JSX.Element;
+    Panel: ({ flex, children, className }: PanelProps) => React.JSX.Element;
 };
 interface PanelProps {
     flex?: number;
     children: React.ReactNode;
+    className?: string;
 }
 export {};

package/components/FileDetails/components/Content.js

@@ -1,46 +1,33 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Content = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-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 Horizontal = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "echkhvn1"
-} : {
-  target: "echkhvn1",
-  label: "Horizontal"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1emwwg0",
-  styles: "display:flex;height:calc(100vh - 160px)"
-} : {
-  name: "1emwwg0",
-  styles: "display:flex;height:calc(100vh - 160px)",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRlbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUc2QiIsImZpbGUiOiJDb250ZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuXG5jb25zdCBIb3Jpem9udGFsID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtIDE2MHB4KTtcbmA7XG5cbmNvbnN0IEdyb3cgPSBzdHlsZWQuZGl2PHsgZmxleDogbnVtYmVyIH0+YFxuICAgIGZsZXg6ICR7KHsgZmxleCB9KSA9PiBmbGV4fTtcbiAgICBvdmVyZmxvdy15OiBzY3JvbGw7XG4gICAgOmxhc3Qtb2YtdHlwZSB7XG4gICAgICAgIGJvcmRlci1sZWZ0OiAxcHggc29saWQgdmFyKC0tbWRjLXRoZW1lLW9uLWJhY2tncm91bmQpO1xuICAgIH1cbmA7XG5cbmludGVyZmFjZSBDb250ZW50UHJvcHMge1xuICAgIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG59XG5cbmV4cG9ydCBjb25zdCBDb250ZW50ID0gKHsgY2hpbGRyZW4gfTogQ29udGVudFByb3BzKSA9PiB7XG4gICAgcmV0dXJuIDxIb3Jpem9udGFsPntjaGlsZHJlbn08L0hvcml6b250YWw+O1xufTtcblxuaW50ZXJmYWNlIFBhbmVsUHJvcHMge1xuICAgIGZsZXg/OiBudW1iZXI7XG4gICAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbn1cblxuY29uc3QgUGFuZWwgPSAoeyBmbGV4LCBjaGlsZHJlbiB9OiBQYW5lbFByb3BzKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPEdyb3cgZGF0YS1yb2xlPXtcInBhbmVsXCJ9IGZsZXg9e2ZsZXggPz8gMX0+XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvR3Jvdz5cbiAgICApO1xufTtcblxuQ29udGVudC5QYW5lbCA9IFBhbmVsO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var Grow = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "echkhvn0"
-} : {
-  target: "echkhvn0",
-  label: "Grow"
-})("flex:", function (_ref) {
-  var flex = _ref.flex;
-  return flex;
-}, ";overflow-y:scroll;:last-of-type{border-left:1px solid var(--mdc-theme-on-background);}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRlbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVF5QyIsImZpbGUiOiJDb250ZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuXG5jb25zdCBIb3Jpem9udGFsID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtIDE2MHB4KTtcbmA7XG5cbmNvbnN0IEdyb3cgPSBzdHlsZWQuZGl2PHsgZmxleDogbnVtYmVyIH0+YFxuICAgIGZsZXg6ICR7KHsgZmxleCB9KSA9PiBmbGV4fTtcbiAgICBvdmVyZmxvdy15OiBzY3JvbGw7XG4gICAgOmxhc3Qtb2YtdHlwZSB7XG4gICAgICAgIGJvcmRlci1sZWZ0OiAxcHggc29saWQgdmFyKC0tbWRjLXRoZW1lLW9uLWJhY2tncm91bmQpO1xuICAgIH1cbmA7XG5cbmludGVyZmFjZSBDb250ZW50UHJvcHMge1xuICAgIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG59XG5cbmV4cG9ydCBjb25zdCBDb250ZW50ID0gKHsgY2hpbGRyZW4gfTogQ29udGVudFByb3BzKSA9PiB7XG4gICAgcmV0dXJuIDxIb3Jpem9udGFsPntjaGlsZHJlbn08L0hvcml6b250YWw+O1xufTtcblxuaW50ZXJmYWNlIFBhbmVsUHJvcHMge1xuICAgIGZsZXg/OiBudW1iZXI7XG4gICAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbn1cblxuY29uc3QgUGFuZWwgPSAoeyBmbGV4LCBjaGlsZHJlbiB9OiBQYW5lbFByb3BzKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPEdyb3cgZGF0YS1yb2xlPXtcInBhbmVsXCJ9IGZsZXg9e2ZsZXggPz8gMX0+XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvR3Jvdz5cbiAgICApO1xufTtcblxuQ29udGVudC5QYW5lbCA9IFBhbmVsO1xuIl19 */"));
-var Content = exports.Content = function Content(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/_react.default.createElement(Horizontal, null, children);
+import React from "react";
+import { cn } from "@webiny/admin-ui";
+const Grow = ({
+  flex,
+  children,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn("overflow-y-scroll last-of-type:border-l-sm border-neutral-dimmed", className),
+    style: {
+      flex
+    }
+  }, children);
+};
+export const Content = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex h-full"
+  }, children);
 };
-var Panel = function Panel(_ref3) {
-  var flex = _ref3.flex,
-    children = _ref3.children;
-  return /*#__PURE__*/_react.default.createElement(Grow, {
+const Panel = ({
+  flex,
+  children,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement(Grow, {
     "data-role": "panel",
-    flex: flex ?? 1
+    flex: flex ?? 1,
+    className: className
   }, children);
 };
 Content.Panel = Panel;

package/components/FileDetails/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_EMOTION_STRINGIFIED_CSS_ERROR__","Horizontal","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","Grow","_ref","flex","Content","exports","_ref2","children","createElement","Panel","_ref3"],"sources":["Content.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React from \"react\";\n\nconst Horizontal = styled.div`\n    display: flex;\n    height: calc(100vh - 160px);\n`;\n\nconst Grow = styled.div<{ flex: number }>`\n    flex: ${({ flex }) => flex};\n    overflow-y: scroll;\n    :last-of-type {\n        border-left: 1px solid var(--mdc-theme-on-background);\n    }\n`;\n\ninterface ContentProps {\n    children: React.ReactNode;\n}\n\nexport const Content = ({ children }: ContentProps) => {\n    return <Horizontal>{children}</Horizontal>;\n};\n\ninterface PanelProps {\n    flex?: number;\n    children: React.ReactNode;\n}\n\nconst Panel = ({ flex, children }: PanelProps) => {\n    return (\n        <Grow data-role={\"panel\"} flex={flex ?? 1}>\n            {children}\n        </Grow>\n    );\n};\n\nContent.Panel = Panel;\n"],"mappings":";;;;;;;;AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAC,iCAAA;AAE1B,IAAMC,UAAU,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,EAGf;AAED,IAAMa,IAAI,oBAAAX,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,YACE,UAAAM,IAAA;EAAA,IAAGC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAAA,OAAOA,IAAI;AAAA,gGAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA,g0CAK7B;AAMM,IAAMU,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAAVA,OAAOA,CAAAE,KAAA,EAAmC;EAAA,IAA7BC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;EAC9B,oBAAOtB,MAAA,CAAAM,OAAA,CAAAiB,aAAA,CAACnB,UAAU,QAAEkB,QAAqB,CAAC;AAC9C,CAAC;AAOD,IAAME,KAAK,GAAG,SAARA,KAAKA,CAAAC,KAAA,EAAuC;EAAA,IAAjCP,IAAI,GAAAO,KAAA,CAAJP,IAAI;IAAEI,QAAQ,GAAAG,KAAA,CAARH,QAAQ;EAC3B,oBACItB,MAAA,CAAAM,OAAA,CAAAiB,aAAA,CAACP,IAAI;IAAC,aAAW,OAAQ;IAACE,IAAI,EAAEA,IAAI,IAAI;EAAE,GACrCI,QACC,CAAC;AAEf,CAAC;AAEDH,OAAO,CAACK,KAAK,GAAGA,KAAK","ignoreList":[]}
+{"version":3,"names":["React","cn","Grow","flex","children","className","createElement","style","Content","Panel"],"sources":["Content.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface GrowProps {\n    flex: number;\n    className?: string;\n}\n\nconst Grow = ({ flex, children, className }: React.PropsWithChildren<GrowProps>) => {\n    return (\n        <div\n            className={cn(\n                \"overflow-y-scroll last-of-type:border-l-sm border-neutral-dimmed\",\n                className\n            )}\n            style={{ flex }}\n        >\n            {children}\n        </div>\n    );\n};\n\ninterface ContentProps {\n    children: React.ReactNode;\n}\n\nexport const Content = ({ children }: ContentProps) => {\n    return <div className={\"flex h-full\"}>{children}</div>;\n};\n\ninterface PanelProps {\n    flex?: number;\n    children: React.ReactNode;\n    className?: string;\n}\n\nconst Panel = ({ flex, children, className }: PanelProps) => {\n    return (\n        <Grow data-role={\"panel\"} flex={flex ?? 1} className={className}>\n            {children}\n        </Grow>\n    );\n};\n\nContent.Panel = Panel;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,QAAQ,kBAAkB;AAOrC,MAAMC,IAAI,GAAGA,CAAC;EAAEC,IAAI;EAAEC,QAAQ;EAAEC;AAA8C,CAAC,KAAK;EAChF,oBACIL,KAAA,CAAAM,aAAA;IACID,SAAS,EAAEJ,EAAE,CACT,kEAAkE,EAClEI,SACJ,CAAE;IACFE,KAAK,EAAE;MAAEJ;IAAK;EAAE,GAEfC,QACA,CAAC;AAEd,CAAC;AAMD,OAAO,MAAMI,OAAO,GAAGA,CAAC;EAAEJ;AAAuB,CAAC,KAAK;EACnD,oBAAOJ,KAAA,CAAAM,aAAA;IAAKD,SAAS,EAAE;EAAc,GAAED,QAAc,CAAC;AAC1D,CAAC;AAQD,MAAMK,KAAK,GAAGA,CAAC;EAAEN,IAAI;EAAEC,QAAQ;EAAEC;AAAsB,CAAC,KAAK;EACzD,oBACIL,KAAA,CAAAM,aAAA,CAACJ,IAAI;IAAC,aAAW,OAAQ;IAACC,IAAI,EAAEA,IAAI,IAAI,CAAE;IAACE,SAAS,EAAEA;EAAU,GAC3DD,QACC,CAAC;AAEf,CAAC;AAEDI,OAAO,CAACC,KAAK,GAAGA,KAAK","ignoreList":[]}

package/components/FileDetails/components/CreatedOn.js

@@ -1,55 +1,22 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CreatedOn = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _today = require("@material-design-icons/svg/outlined/today.svg");
-var _Icon = require("@webiny/ui/Icon");
-var _Typography = require("@webiny/ui/Typography");
-var _useFile2 = require("../../../hooks/useFile");
-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 CreatedOnWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e8xfka31"
-} : {
-  target: "e8xfka31",
-  label: "CreatedOnWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "s5xdrg",
-  styles: "display:flex;align-items:center"
-} : {
-  name: "s5xdrg",
-  styles: "display:flex;align-items:center",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNyZWF0ZWRPbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUW1DIiwiZmlsZSI6IkNyZWF0ZWRPbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgZGF5anMgZnJvbSBcImRheWpzXCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBDYWxlbmRhckljb24gfSBmcm9tIFwiQG1hdGVyaWFsLWRlc2lnbi1pY29ucy9zdmcvb3V0bGluZWQvdG9kYXkuc3ZnXCI7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSBcIkB3ZWJpbnkvdWkvSWNvblwiO1xuaW1wb3J0IHsgVHlwb2dyYXBoeSB9IGZyb20gXCJAd2ViaW55L3VpL1R5cG9ncmFwaHlcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdXNlRmlsZSB9IGZyb20gXCJ+L2hvb2tzL3VzZUZpbGVcIjtcblxuY29uc3QgQ3JlYXRlZE9uV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgSW5saW5lSWNvbiA9IHN0eWxlZChJY29uKWBcbiAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgICAmLm1kYy1idXR0b25fX2ljb24ge1xuICAgICAgICBkaXNwbGF5OiBpbmxpbmU7XG4gICAgICAgIGZpbGw6IHZhcigtLW1kYy10aGVtZS10ZXh0LXNlY29uZGFyeS1vbi1iYWNrZ3JvdW5kKTtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ3JlYXRlZE9uID0gKCkgPT4ge1xuICAgIGNvbnN0IHsgZmlsZSB9ID0gdXNlRmlsZSgpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPENyZWF0ZWRPbldyYXBwZXI+XG4gICAgICAgICAgICA8SW5saW5lSWNvbiBpY29uPXs8Q2FsZW5kYXJJY29uIC8+fSAvPlxuICAgICAgICAgICAgPFR5cG9ncmFwaHkgdXNlPXtcImNhcHRpb25cIn0gdGFnPXtcInNwYW5cIn0+XG4gICAgICAgICAgICAgICAge2RheWpzKGZpbGUuY3JlYXRlZE9uKS5mb3JtYXQoXCJERCBNTU0gWVlZWSBbYXRdIEhIOm1tXCIpfVxuICAgICAgICAgICAgPC9UeXBvZ3JhcGh5PlxuICAgICAgICA8L0NyZWF0ZWRPbldyYXBwZXI+XG4gICAgKTtcbn07XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var InlineIcon = /*#__PURE__*/(0, _base.default)(_Icon.Icon, process.env.NODE_ENV === "production" ? {
-  target: "e8xfka30"
-} : {
-  target: "e8xfka30",
-  label: "InlineIcon"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1dey51h",
-  styles: "margin-right:5px;&.mdc-button__icon{display:inline;fill:var(--mdc-theme-text-secondary-on-background);}"
-} : {
-  name: "1dey51h",
-  styles: "margin-right:5px;&.mdc-button__icon{display:inline;fill:var(--mdc-theme-text-secondary-on-background);}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNyZWF0ZWRPbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYStCIiwiZmlsZSI6IkNyZWF0ZWRPbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgZGF5anMgZnJvbSBcImRheWpzXCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBDYWxlbmRhckljb24gfSBmcm9tIFwiQG1hdGVyaWFsLWRlc2lnbi1pY29ucy9zdmcvb3V0bGluZWQvdG9kYXkuc3ZnXCI7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSBcIkB3ZWJpbnkvdWkvSWNvblwiO1xuaW1wb3J0IHsgVHlwb2dyYXBoeSB9IGZyb20gXCJAd2ViaW55L3VpL1R5cG9ncmFwaHlcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdXNlRmlsZSB9IGZyb20gXCJ+L2hvb2tzL3VzZUZpbGVcIjtcblxuY29uc3QgQ3JlYXRlZE9uV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgSW5saW5lSWNvbiA9IHN0eWxlZChJY29uKWBcbiAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgICAmLm1kYy1idXR0b25fX2ljb24ge1xuICAgICAgICBkaXNwbGF5OiBpbmxpbmU7XG4gICAgICAgIGZpbGw6IHZhcigtLW1kYy10aGVtZS10ZXh0LXNlY29uZGFyeS1vbi1iYWNrZ3JvdW5kKTtcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ3JlYXRlZE9uID0gKCkgPT4ge1xuICAgIGNvbnN0IHsgZmlsZSB9ID0gdXNlRmlsZSgpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPENyZWF0ZWRPbldyYXBwZXI+XG4gICAgICAgICAgICA8SW5saW5lSWNvbiBpY29uPXs8Q2FsZW5kYXJJY29uIC8+fSAvPlxuICAgICAgICAgICAgPFR5cG9ncmFwaHkgdXNlPXtcImNhcHRpb25cIn0gdGFnPXtcInNwYW5cIn0+XG4gICAgICAgICAgICAgICAge2RheWpzKGZpbGUuY3JlYXRlZE9uKS5mb3JtYXQoXCJERCBNTU0gWVlZWSBbYXRdIEhIOm1tXCIpfVxuICAgICAgICAgICAgPC9UeXBvZ3JhcGh5PlxuICAgICAgICA8L0NyZWF0ZWRPbldyYXBwZXI+XG4gICAgKTtcbn07XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var CreatedOn = exports.CreatedOn = function CreatedOn() {
-  var _useFile = (0, _useFile2.useFile)(),
-    file = _useFile.file;
-  return /*#__PURE__*/_react.default.createElement(CreatedOnWrapper, null, /*#__PURE__*/_react.default.createElement(InlineIcon, {
-    icon: /*#__PURE__*/_react.default.createElement(_today.ReactComponent, null)
-  }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "caption",
-    tag: "span"
-  }, (0, _dayjs.default)(file.createdOn).format("DD MMM YYYY [at] HH:mm")));
+import React from "react";
+import dayjs from "dayjs";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as CalendarIcon } from "@webiny/icons/today.svg";
+import { useFile } from "../../../hooks/useFile.js";
+export const CreatedOn = () => {
+  const {
+    file
+  } = useFile();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-xs"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(CalendarIcon, null),
+    label: "Calendar icon",
+    color: "neutral-light"
+  })), /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    as: "div"
+  }, dayjs(file.createdOn).format("DD MMM YYYY [at] HH:mm")));
 };
 
 //# sourceMappingURL=CreatedOn.js.map

package/components/FileDetails/components/CreatedOn.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_dayjs","_today","_Icon","_Typography","_useFile2","_EMOTION_STRINGIFIED_CSS_ERROR__","CreatedOnWrapper","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","InlineIcon","Icon","CreatedOn","exports","_useFile","useFile","file","createElement","icon","ReactComponent","Typography","use","tag","dayjs","createdOn","format"],"sources":["CreatedOn.tsx"],"sourcesContent":["import React from \"react\";\nimport dayjs from \"dayjs\";\nimport { ReactComponent as CalendarIcon } from \"@material-design-icons/svg/outlined/today.svg\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport styled from \"@emotion/styled\";\nimport { useFile } from \"~/hooks/useFile\";\n\nconst CreatedOnWrapper = styled.div`\n    display: flex;\n    align-items: center;\n`;\n\nconst InlineIcon = styled(Icon)`\n    margin-right: 5px;\n    &.mdc-button__icon {\n        display: inline;\n        fill: var(--mdc-theme-text-secondary-on-background);\n    }\n`;\n\nexport const CreatedOn = () => {\n    const { file } = useFile();\n\n    return (\n        <CreatedOnWrapper>\n            <InlineIcon icon={<CalendarIcon />} />\n            <Typography use={\"caption\"} tag={\"span\"}>\n                {dayjs(file.createdOn).format(\"DD MMM YYYY [at] HH:mm\")}\n            </Typography>\n        </CreatedOnWrapper>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAEA,IAAAK,SAAA,GAAAL,OAAA;AAA0C,SAAAM,iCAAA;AAE1C,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,EAGrB;AAED,IAAMa,UAAU,gBAAG,IAAAX,KAAA,CAAAC,OAAA,EAAOW,UAAI,EAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAZ;AAAA,EAM9B;AAEM,IAAMe,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAA,EAAS;EAC3B,IAAAE,QAAA,GAAiB,IAAAC,iBAAO,EAAC,CAAC;IAAlBC,IAAI,GAAAF,QAAA,CAAJE,IAAI;EAEZ,oBACI3B,MAAA,CAAAW,OAAA,CAAAiB,aAAA,CAACnB,gBAAgB,qBACbT,MAAA,CAAAW,OAAA,CAAAiB,aAAA,CAACP,UAAU;IAACQ,IAAI,eAAE7B,MAAA,CAAAW,OAAA,CAAAiB,aAAA,CAACxB,MAAA,CAAA0B,cAAY,MAAE;EAAE,CAAE,CAAC,eACtC9B,MAAA,CAAAW,OAAA,CAAAiB,aAAA,CAACtB,WAAA,CAAAyB,UAAU;IAACC,GAAG,EAAE,SAAU;IAACC,GAAG,EAAE;EAAO,GACnC,IAAAC,cAAK,EAACP,IAAI,CAACQ,SAAS,CAAC,CAACC,MAAM,CAAC,wBAAwB,CAC9C,CACE,CAAC;AAE3B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","dayjs","Icon","Text","ReactComponent","CalendarIcon","useFile","CreatedOn","file","createElement","className","icon","label","color","size","as","createdOn","format"],"sources":["CreatedOn.tsx"],"sourcesContent":["import React from \"react\";\nimport dayjs from \"dayjs\";\nimport { Icon, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as CalendarIcon } from \"@webiny/icons/today.svg\";\nimport { useFile } from \"~/hooks/useFile.js\";\n\nexport const CreatedOn = () => {\n    const { file } = useFile();\n\n    return (\n        <div className={\"flex items-center gap-xs\"}>\n            <div>\n                <Icon icon={<CalendarIcon />} label={\"Calendar icon\"} color={\"neutral-light\"} />\n            </div>\n            <Text size={\"sm\"} as={\"div\"}>\n                {dayjs(file.createdOn).format(\"DD MMM YYYY [at] HH:mm\")}\n            </Text>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,cAAc,IAAIC,YAAY,QAAQ,yBAAyB;AACxE,SAASC,OAAO;AAEhB,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC3B,MAAM;IAAEC;EAAK,CAAC,GAAGF,OAAO,CAAC,CAAC;EAE1B,oBACIN,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAE;EAA2B,gBACvCV,KAAA,CAAAS,aAAA,2BACIT,KAAA,CAAAS,aAAA,CAACP,IAAI;IAACS,IAAI,eAAEX,KAAA,CAAAS,aAAA,CAACJ,YAAY,MAAE,CAAE;IAACO,KAAK,EAAE,eAAgB;IAACC,KAAK,EAAE;EAAgB,CAAE,CAC9E,CAAC,eACNb,KAAA,CAAAS,aAAA,CAACN,IAAI;IAACW,IAAI,EAAE,IAAK;IAACC,EAAE,EAAE;EAAM,GACvBd,KAAK,CAACO,IAAI,CAACQ,SAAS,CAAC,CAACC,MAAM,CAAC,wBAAwB,CACpD,CACL,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/FileDetails/components/Description.d.ts

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

package/components/FileDetails/components/Description.js

@@ -0,0 +1,23 @@
+import React from "react";
+import bytes from "bytes";
+import dayjs from "dayjs";
+import { useFile } from "../../../hooks/useFile.js";
+const formatFileSize = size => {
+  return bytes.format(size, {
+    unitSeparator: " "
+  });
+};
+const formatDate = date => {
+  return dayjs(date).format("DD MMM YYYY, HH:mm");
+};
+export const Description = () => {
+  const {
+    file
+  } = useFile();
+  if (!file) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("span", null, "Type: ", file.type, " ", " // ", "Size: ", formatFileSize(file.size), " ", " // ", "Upload date: ", formatDate(file.createdOn));
+};
+
+//# sourceMappingURL=Description.js.map

package/components/FileDetails/components/Description.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","bytes","dayjs","useFile","formatFileSize","size","format","unitSeparator","formatDate","date","Description","file","createElement","type","createdOn"],"sources":["Description.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport dayjs from \"dayjs\";\nimport { useFile } from \"~/hooks/useFile.js\";\n\nconst formatFileSize = (size: number) => {\n    return bytes.format(size, { unitSeparator: \" \" });\n};\n\nconst formatDate = (date: string) => {\n    return dayjs(date).format(\"DD MMM YYYY, HH:mm\");\n};\n\nexport const Description = () => {\n    const { file } = useFile();\n\n    if (!file) {\n        return null;\n    }\n\n    return (\n        <span>\n            Type: {file.type} {\" // \"}\n            Size: {formatFileSize(file.size)} {\" // \"}\n            Upload date: {formatDate(file.createdOn)}\n        </span>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAEhB,MAAMC,cAAc,GAAIC,IAAY,IAAK;EACrC,OAAOJ,KAAK,CAACK,MAAM,CAACD,IAAI,EAAE;IAAEE,aAAa,EAAE;EAAI,CAAC,CAAC;AACrD,CAAC;AAED,MAAMC,UAAU,GAAIC,IAAY,IAAK;EACjC,OAAOP,KAAK,CAACO,IAAI,CAAC,CAACH,MAAM,CAAC,oBAAoB,CAAC;AACnD,CAAC;AAED,OAAO,MAAMI,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM;IAAEC;EAAK,CAAC,GAAGR,OAAO,CAAC,CAAC;EAE1B,IAAI,CAACQ,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIX,KAAA,CAAAY,aAAA,eAAM,QACI,EAACD,IAAI,CAACE,IAAI,EAAC,GAAC,EAAC,MAAM,EAAC,QACpB,EAACT,cAAc,CAACO,IAAI,CAACN,IAAI,CAAC,EAAC,GAAC,EAAC,MAAM,EAAC,eAC7B,EAACG,UAAU,CAACG,IAAI,CAACG,SAAS,CACrC,CAAC;AAEf,CAAC","ignoreList":[]}

package/components/FileDetails/components/Extensions.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CmsModel } from "@webiny/app-headless-cms/types";
+import type { CmsModel } from "@webiny/app-headless-cms/types.js";
 interface ExtensionsProps {
     model: CmsModel;
 }

package/components/FileDetails/components/Extensions.js

@@ -1,64 +1,33 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Extensions = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireWildcard(require("react"));
-var _appAdmin = require("@webiny/app-admin");
-var _ModelProvider = require("@webiny/app-headless-cms/admin/components/ModelProvider");
-var _Fields = require("@webiny/app-headless-cms/admin/components/ContentEntryForm/Fields");
-var _form = require("@webiny/form");
-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 HideEmptyCells = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "emim0ei0"
-} : {
-  target: "emim0ei0",
-  label: "HideEmptyCells"
-})(process.env.NODE_ENV === "production" ? {
-  name: "117cb2p",
-  styles: ".mdc-layout-grid__cell:empty{display:none;}"
-} : {
-  name: "117cb2p",
-  styles: ".mdc-layout-grid__cell:empty{display:none;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4dGVuc2lvbnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVFpQyIsImZpbGUiOiJFeHRlbnNpb25zLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IFJlYWN0LCB7IHVzZU1lbW8gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENvbXBvc2l0aW9uU2NvcGUgfSBmcm9tIFwiQHdlYmlueS9hcHAtYWRtaW5cIjtcbmltcG9ydCB7IENtc01vZGVsIH0gZnJvbSBcIkB3ZWJpbnkvYXBwLWhlYWRsZXNzLWNtcy90eXBlc1wiO1xuaW1wb3J0IHsgTW9kZWxQcm92aWRlciB9IGZyb20gXCJAd2ViaW55L2FwcC1oZWFkbGVzcy1jbXMvYWRtaW4vY29tcG9uZW50cy9Nb2RlbFByb3ZpZGVyXCI7XG5pbXBvcnQgeyBGaWVsZHMgfSBmcm9tIFwiQHdlYmlueS9hcHAtaGVhZGxlc3MtY21zL2FkbWluL2NvbXBvbmVudHMvQ29udGVudEVudHJ5Rm9ybS9GaWVsZHNcIjtcbmltcG9ydCB7IEJpbmQsIEJpbmRDb21wb25lbnRQcm9wcyB9IGZyb20gXCJAd2ViaW55L2Zvcm1cIjtcblxuY29uc3QgSGlkZUVtcHR5Q2VsbHMgPSBzdHlsZWQuZGl2YFxuICAgIC5tZGMtbGF5b3V0LWdyaWRfX2NlbGw6ZW1wdHkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbmA7XG5cbmludGVyZmFjZSBFeHRlbnNpb25zUHJvcHMge1xuICAgIG1vZGVsOiBDbXNNb2RlbDtcbn1cblxuZnVuY3Rpb24gQmluZFdpdGhQcmVmaXgocHJvcHM6IEJpbmRDb21wb25lbnRQcm9wcykge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxCaW5kIHsuLi5wcm9wc30gbmFtZT17YGV4dGVuc2lvbnMuJHtwcm9wcy5uYW1lfWB9PlxuICAgICAgICAgICAge3Byb3BzLmNoaWxkcmVufVxuICAgICAgICA8L0JpbmQ+XG4gICAgKTtcbn1cbmV4cG9ydCBjb25zdCBFeHRlbnNpb25zID0gKHsgbW9kZWwgfTogRXh0ZW5zaW9uc1Byb3BzKSA9PiB7XG4gICAgY29uc3QgZXh0ZW5zaW9uc0ZpZWxkID0gdXNlTWVtbygoKSA9PiB7XG4gICAgICAgIHJldHVybiBtb2RlbC5maWVsZHMuZmluZChmID0+IGYuZmllbGRJZCA9PT0gXCJleHRlbnNpb25zXCIpO1xuICAgIH0sIFttb2RlbF0pO1xuXG4gICAgaWYgKCFleHRlbnNpb25zRmllbGQpIHtcbiAgICAgICAgcmV0dXJuIG51bGw7XG4gICAgfVxuXG4gICAgY29uc3QgZmllbGRzID0gZXh0ZW5zaW9uc0ZpZWxkLnNldHRpbmdzPy5maWVsZHMgfHwgW107XG4gICAgY29uc3QgbGF5b3V0ID0gZXh0ZW5zaW9uc0ZpZWxkLnNldHRpbmdzPy5sYXlvdXQgfHwgW107XG5cbiAgICBpZiAoIWxheW91dC5sZW5ndGgpIHtcbiAgICAgICAgbGF5b3V0LnB1c2goLi4uZmllbGRzLm1hcChmaWVsZCA9PiBbZmllbGQuZmllbGRJZF0pKTtcbiAgICB9XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8Q29tcG9zaXRpb25TY29wZSBuYW1lPXtcImZtLmZpbGVEZXRhaWxzLmV4dGVuc2lvbkZpZWxkc1wifT5cbiAgICAgICAgICAgIDxNb2RlbFByb3ZpZGVyIG1vZGVsPXttb2RlbH0+XG4gICAgICAgICAgICAgICAgPEhpZGVFbXB0eUNlbGxzPlxuICAgICAgICAgICAgICAgICAgICA8RmllbGRzXG4gICAgICAgICAgICAgICAgICAgICAgICBjb250ZW50TW9kZWw9e21vZGVsfVxuICAgICAgICAgICAgICAgICAgICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgICAgICAgICAgICAgICAgICAgQmluZD17QmluZFdpdGhQcmVmaXh9XG4gICAgICAgICAgICAgICAgICAgICAgICBmaWVsZHM9e2ZpZWxkc31cbiAgICAgICAgICAgICAgICAgICAgICAgIGxheW91dD17bGF5b3V0fVxuICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgIDwvSGlkZUVtcHR5Q2VsbHM+XG4gICAgICAgICAgICA8L01vZGVsUHJvdmlkZXI+XG4gICAgICAgIDwvQ29tcG9zaXRpb25TY29wZT5cbiAgICApO1xufTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-function BindWithPrefix(props) {
-  return /*#__PURE__*/_react.default.createElement(_form.Bind, Object.assign({}, props, {
-    name: "extensions.".concat(props.name)
-  }), props.children);
-}
-var Extensions = exports.Extensions = function Extensions(_ref) {
-  var model = _ref.model;
-  var extensionsField = (0, _react.useMemo)(function () {
-    return model.fields.find(function (f) {
-      return f.fieldId === "extensions";
-    });
+import React, { useMemo } from "react";
+import { CompositionScope } from "@webiny/app-admin";
+import { ModelProvider } from "@webiny/app-headless-cms/admin/components/ModelProvider/index.js";
+import { Fields } from "@webiny/app-headless-cms/admin/components/ContentEntryForm/Fields.js";
+import { Bind, BindPrefix } from "@webiny/form";
+export const Extensions = ({
+  model
+}) => {
+  const extensionsField = useMemo(() => {
+    return model.fields.find(f => f.fieldId === "extensions");
   }, [model]);
   if (!extensionsField) {
     return null;
   }
-  var fields = extensionsField.settings?.fields || [];
-  var layout = extensionsField.settings?.layout || [];
+  const fields = extensionsField.settings?.fields || [];
+  const layout = extensionsField.settings?.layout || [];
   if (!layout.length) {
-    layout.push.apply(layout, (0, _toConsumableArray2.default)(fields.map(function (field) {
-      return [field.fieldId];
-    })));
+    layout.push(...fields.map(field => [field.fieldId]));
   }
-  return /*#__PURE__*/_react.default.createElement(_appAdmin.CompositionScope, {
+  return /*#__PURE__*/React.createElement(CompositionScope, {
     name: "fm.fileDetails.extensionFields"
-  }, /*#__PURE__*/_react.default.createElement(_ModelProvider.ModelProvider, {
+  }, /*#__PURE__*/React.createElement(ModelProvider, {
     model: model
-  }, /*#__PURE__*/_react.default.createElement(HideEmptyCells, null, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+  }, /*#__PURE__*/React.createElement(BindPrefix, {
+    name: "extensions"
+  }, /*#__PURE__*/React.createElement(Fields, {
     contentModel: model
     // @ts-expect-error
     ,
-    Bind: BindWithPrefix,
+    Bind: Bind,
     fields: fields,
     layout: layout
   }))));

package/components/FileDetails/components/Extensions.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_appAdmin","_ModelProvider","_Fields","_form","_EMOTION_STRINGIFIED_CSS_ERROR__","HideEmptyCells","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","BindWithPrefix","props","createElement","Bind","Object","assign","concat","children","Extensions","exports","_ref","model","extensionsField","useMemo","fields","find","f","fieldId","settings","layout","length","push","apply","_toConsumableArray2","field","CompositionScope","ModelProvider","Fields","contentModel"],"sources":["Extensions.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React, { useMemo } from \"react\";\nimport { CompositionScope } from \"@webiny/app-admin\";\nimport { CmsModel } from \"@webiny/app-headless-cms/types\";\nimport { ModelProvider } from \"@webiny/app-headless-cms/admin/components/ModelProvider\";\nimport { Fields } from \"@webiny/app-headless-cms/admin/components/ContentEntryForm/Fields\";\nimport { Bind, BindComponentProps } from \"@webiny/form\";\n\nconst HideEmptyCells = styled.div`\n    .mdc-layout-grid__cell:empty {\n        display: none;\n    }\n`;\n\ninterface ExtensionsProps {\n    model: CmsModel;\n}\n\nfunction BindWithPrefix(props: BindComponentProps) {\n    return (\n        <Bind {...props} name={`extensions.${props.name}`}>\n            {props.children}\n        </Bind>\n    );\n}\nexport const Extensions = ({ model }: ExtensionsProps) => {\n    const extensionsField = useMemo(() => {\n        return model.fields.find(f => f.fieldId === \"extensions\");\n    }, [model]);\n\n    if (!extensionsField) {\n        return null;\n    }\n\n    const fields = extensionsField.settings?.fields || [];\n    const layout = extensionsField.settings?.layout || [];\n\n    if (!layout.length) {\n        layout.push(...fields.map(field => [field.fieldId]));\n    }\n\n    return (\n        <CompositionScope name={\"fm.fileDetails.extensionFields\"}>\n            <ModelProvider model={model}>\n                <HideEmptyCells>\n                    <Fields\n                        contentModel={model}\n                        // @ts-expect-error\n                        Bind={BindWithPrefix}\n                        fields={fields}\n                        layout={layout}\n                    />\n                </HideEmptyCells>\n            </ModelProvider>\n        </CompositionScope>\n    );\n};\n"],"mappings":";;;;;;;;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAEA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAAwD,SAAAK,iCAAA;AAExD,IAAMC,cAAc,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,EAInB;AAMD,SAASa,cAAcA,CAACC,KAAyB,EAAE;EAC/C,oBACIrB,MAAA,CAAAU,OAAA,CAAAY,aAAA,CAAChB,KAAA,CAAAiB,IAAI,EAAAC,MAAA,CAAAC,MAAA,KAAKJ,KAAK;IAAEL,IAAI,gBAAAU,MAAA,CAAgBL,KAAK,CAACL,IAAI;EAAG,IAC7CK,KAAK,CAACM,QACL,CAAC;AAEf;AACO,IAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAAE,IAAA,EAAmC;EAAA,IAA7BC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAC9B,IAAMC,eAAe,GAAG,IAAAC,cAAO,EAAC,YAAM;IAClC,OAAOF,KAAK,CAACG,MAAM,CAACC,IAAI,CAAC,UAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,OAAO,KAAK,YAAY;IAAA,EAAC;EAC7D,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;EAEX,IAAI,CAACC,eAAe,EAAE;IAClB,OAAO,IAAI;EACf;EAEA,IAAME,MAAM,GAAGF,eAAe,CAACM,QAAQ,EAAEJ,MAAM,IAAI,EAAE;EACrD,IAAMK,MAAM,GAAGP,eAAe,CAACM,QAAQ,EAAEC,MAAM,IAAI,EAAE;EAErD,IAAI,CAACA,MAAM,CAACC,MAAM,EAAE;IAChBD,MAAM,CAACE,IAAI,CAAAC,KAAA,CAAXH,MAAM,MAAAI,mBAAA,CAAAjC,OAAA,EAASwB,MAAM,CAAChB,GAAG,CAAC,UAAA0B,KAAK;MAAA,OAAI,CAACA,KAAK,CAACP,OAAO,CAAC;IAAA,EAAC,EAAC;EACxD;EAEA,oBACIrC,MAAA,CAAAU,OAAA,CAAAY,aAAA,CAACnB,SAAA,CAAA0C,gBAAgB;IAAC7B,IAAI,EAAE;EAAiC,gBACrDhB,MAAA,CAAAU,OAAA,CAAAY,aAAA,CAAClB,cAAA,CAAA0C,aAAa;IAACf,KAAK,EAAEA;EAAM,gBACxB/B,MAAA,CAAAU,OAAA,CAAAY,aAAA,CAACd,cAAc,qBACXR,MAAA,CAAAU,OAAA,CAAAY,aAAA,CAACjB,OAAA,CAAA0C,MAAM;IACHC,YAAY,EAAEjB;IACd;IAAA;IACAR,IAAI,EAAEH,cAAe;IACrBc,MAAM,EAAEA,MAAO;IACfK,MAAM,EAAEA;EAAO,CAClB,CACW,CACL,CACD,CAAC;AAE3B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useMemo","CompositionScope","ModelProvider","Fields","Bind","BindPrefix","Extensions","model","extensionsField","fields","find","f","fieldId","settings","layout","length","push","map","field","createElement","name","contentModel"],"sources":["Extensions.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { CompositionScope } from \"@webiny/app-admin\";\nimport type { CmsModel } from \"@webiny/app-headless-cms/types.js\";\nimport { ModelProvider } from \"@webiny/app-headless-cms/admin/components/ModelProvider/index.js\";\nimport { Fields } from \"@webiny/app-headless-cms/admin/components/ContentEntryForm/Fields.js\";\nimport { Bind, BindPrefix } from \"@webiny/form\";\n\ninterface ExtensionsProps {\n    model: CmsModel;\n}\n\nexport const Extensions = ({ model }: ExtensionsProps) => {\n    const extensionsField = useMemo(() => {\n        return model.fields.find(f => f.fieldId === \"extensions\");\n    }, [model]);\n\n    if (!extensionsField) {\n        return null;\n    }\n\n    const fields = extensionsField.settings?.fields || [];\n    const layout = extensionsField.settings?.layout || [];\n\n    if (!layout.length) {\n        layout.push(...fields.map(field => [field.fieldId]));\n    }\n\n    return (\n        <CompositionScope name={\"fm.fileDetails.extensionFields\"}>\n            <ModelProvider model={model}>\n                <BindPrefix name={\"extensions\"}>\n                    <Fields\n                        contentModel={model}\n                        // @ts-expect-error\n                        Bind={Bind}\n                        fields={fields}\n                        layout={layout}\n                    />\n                </BindPrefix>\n            </ModelProvider>\n        </CompositionScope>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,SAASC,aAAa,QAAQ,kEAAkE;AAChG,SAASC,MAAM,QAAQ,sEAAsE;AAC7F,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAM/C,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EACtD,MAAMC,eAAe,GAAGR,OAAO,CAAC,MAAM;IAClC,OAAOO,KAAK,CAACE,MAAM,CAACC,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACC,OAAO,KAAK,YAAY,CAAC;EAC7D,CAAC,EAAE,CAACL,KAAK,CAAC,CAAC;EAEX,IAAI,CAACC,eAAe,EAAE;IAClB,OAAO,IAAI;EACf;EAEA,MAAMC,MAAM,GAAGD,eAAe,CAACK,QAAQ,EAAEJ,MAAM,IAAI,EAAE;EACrD,MAAMK,MAAM,GAAGN,eAAe,CAACK,QAAQ,EAAEC,MAAM,IAAI,EAAE;EAErD,IAAI,CAACA,MAAM,CAACC,MAAM,EAAE;IAChBD,MAAM,CAACE,IAAI,CAAC,GAAGP,MAAM,CAACQ,GAAG,CAACC,KAAK,IAAI,CAACA,KAAK,CAACN,OAAO,CAAC,CAAC,CAAC;EACxD;EAEA,oBACIb,KAAA,CAAAoB,aAAA,CAAClB,gBAAgB;IAACmB,IAAI,EAAE;EAAiC,gBACrDrB,KAAA,CAAAoB,aAAA,CAACjB,aAAa;IAACK,KAAK,EAAEA;EAAM,gBACxBR,KAAA,CAAAoB,aAAA,CAACd,UAAU;IAACe,IAAI,EAAE;EAAa,gBAC3BrB,KAAA,CAAAoB,aAAA,CAAChB,MAAM;IACHkB,YAAY,EAAEd;IACd;IAAA;IACAH,IAAI,EAAEA,IAAK;IACXK,MAAM,EAAEA,MAAO;IACfK,MAAM,EAAEA;EAAO,CAClB,CACO,CACD,CACD,CAAC;AAE3B,CAAC","ignoreList":[]}