@scaleflex/widget-explorer 4.3.0 → 4.4.0

package/lib/components/FileItem/PreUploadFileThumbnail/FileThumbnail.js

@@ -1,61 +0,0 @@
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import { useState } from 'react';
-import getItemIcon from '@scaleflex/widget-utils/lib/getItemIcon';
-import { Image } from '@scaleflex/widget-common';
-import LinkHelper from '@scaleflex/widget-utils/lib/LinkHelper';
-import getFormattedPreviewUrl from '@scaleflex/widget-utils/lib/getFormattedPreviewUrl';
-import { useExplorer } from '../../../hooks';
-import { jsx as _jsx } from "react/jsx-runtime";
-var FileThumbnail = function FileThumbnail(_ref) {
-  var _file$data;
-  var file = _ref.file,
-    onLoad = _ref.onLoad,
-    onError = _ref.onError,
-    isUploadsPanel = _ref.isUploadsPanel,
-    previewUrl = _ref.previewUrl;
-  var _useExplorer = useExplorer(),
-    isDevEnv = _useExplorer.isDevEnv,
-    container = _useExplorer.container;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    fallbackIcon = _useState2[0],
-    setFallbackIcon = _useState2[1];
-  var itemPreview = new LinkHelper({
-    href: previewUrl || ''
-  }).appendSearchParams({
-    org_if_sml: 1,
-    w: 400,
-    h: 300
-  });
-  var fileIcon = file.preview || file.thumbnail || ((_file$data = file.data) === null || _file$data === void 0 ? void 0 : _file$data.thumbnail) || !isUploadsPanel && itemPreview || getItemIcon({
-    fileOrFolder: file,
-    forceIcon: true,
-    showVideoGif: isUploadsPanel
-  });
-  var _onError = function _onError(error) {
-    setFallbackIcon(getFormattedPreviewUrl({
-      url: getItemIcon({
-        fileOrFolder: file,
-        forceIcon: true
-      }),
-      isDevEnv: isDevEnv,
-      containerToken: container
-    }));
-    if (onError) {
-      onError(error);
-    }
-  };
-  return /*#__PURE__*/_jsx(Image, {
-    className: "filerobot-Explorer-Item-fileThumbnail",
-    alt: file.name,
-    src: fallbackIcon || fileIcon,
-    onLoad: onLoad,
-    onError: _onError
-  });
-};
-export default FileThumbnail;

package/lib/components/FileItem/PreUploadFileThumbnail/PreUploadFileThumbnail.styled.js

@@ -1,8 +0,0 @@
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import styled from 'styled-components';
-var PreUploadFileThumbnail = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  border-radius: 3px 0 0 0;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 8px 4px;\n"])));
-var Styled = {
-  PreUploadFileThumbnail: PreUploadFileThumbnail
-};
-export default Styled;

package/lib/components/FileItem/PreUploadFileThumbnail/index.js

@@ -1,27 +0,0 @@
-import getFormattedPreviewUrl from '@scaleflex/widget-utils/lib/getFormattedPreviewUrl';
-import getFileLink from '@scaleflex/widget-utils/lib/getFileLink';
-import FileThumbnail from './FileThumbnail';
-import { useExplorer } from '../../../hooks';
-import Styled from './PreUploadFileThumbnail.styled';
-import { jsx as _jsx } from "react/jsx-runtime";
-function PreUploadFileThumbnail(_ref) {
-  var file = _ref.file,
-    isUploadsPanel = _ref.isUploadsPanel;
-  var _useExplorer = useExplorer(),
-    isDevEnv = _useExplorer.isDevEnv,
-    container = _useExplorer.container;
-  var previewUrl = getFormattedPreviewUrl({
-    url: getFileLink(file),
-    isDevEnv: isDevEnv,
-    containerToken: container
-  });
-  return /*#__PURE__*/_jsx(Styled.PreUploadFileThumbnail, {
-    className: "filerobot-Explorer-Item-previewInnerWrap",
-    children: /*#__PURE__*/_jsx(FileThumbnail, {
-      file: file,
-      isUploadsPanel: isUploadsPanel,
-      previewUrl: previewUrl
-    })
-  });
-}
-export default PreUploadFileThumbnail;

package/lib/components/FileItem/index.js

@@ -1,164 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import { useEffect, memo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import classNames from 'classnames';
-import { Cross } from '@scaleflex/icons';
-import { TooltipV2 } from '@scaleflex/ui/core';
-import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
-import { selectUploadCapabilities } from '@scaleflex/widget-core/lib/slices/uploads.slice';
-import { useContextMenu } from '@scaleflex/widget-core/lib/hooks';
-import { CONTEXTMENU_MODES } from '@scaleflex/widget-utils/lib/constants';
-import checkConnection from '@scaleflex/widget-utils/lib/checkConnection';
-import isUploadableFile from '@scaleflex/widget-utils/lib/isUploadableFile';
-import PreUploadFileThumbnail from './PreUploadFileThumbnail';
-import FileInfo from './FileInfo';
-import Styled from './FileItem.styled';
-import { useExplorer } from '../../hooks';
-import { selectCurrentFileByIdOrUuid } from '../../slices/files.slice';
-import { fileWindowUpdated } from '../../slices/panels.slice';
-import FileUploadTopOptions from './FileUploadTopOptions';
-import FileTopOptions from '../AssetsList/GridView/FilesSection/FileOverlayOptions';
-
-// TODO: Since this is the same as the one of GridLi, also this is used in both upload & share we should make it common/reusable component.
-// and reuse it in the other places.
-// Same for folder for future use-cases.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var FileItem = function FileItem(_ref) {
-  var _originalFile$respons, _originalFile$respons2;
-  var fileIdOrUuid = _ref.fileIdOrUuid,
-    role = _ref.role,
-    isUploadsPanel = _ref.isUploadsPanel,
-    onRemove = _ref.onRemove,
-    checkIsPrivateVisibilityFile = _ref.checkIsPrivateVisibilityFile,
-    showFloatyButton = _ref.showFloatyButton,
-    hideTopOptions = _ref.hideTopOptions,
-    ariaLabel = _ref.ariaLabel;
-  var dispatch = useDispatch();
-  var toggleContextMenu = useContextMenu();
-  var originalFile = useSelector(function (state) {
-    return selectCurrentFileByIdOrUuid(state, fileIdOrUuid);
-  });
-  var _useSelector = useSelector(selectUploadCapabilities),
-    allowResumableUploads = _useSelector.allowResumableUploads,
-    allowIndividualCancellation = _useSelector.allowIndividualCancellation;
-  var _useExplorer = useExplorer(),
-    i18n = _useExplorer.i18n,
-    handleRequestThumbnail = _useExplorer.handleRequestThumbnail,
-    handleCancelThumbnail = _useExplorer.handleCancelThumbnail;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFileShareNotAllowed = _useState2[0],
-    setIsFileShareNotAllowed = _useState2[1];
-  var uploadedFile = originalFile === null || originalFile === void 0 ? void 0 : (_originalFile$respons = originalFile.response) === null || _originalFile$respons === void 0 ? void 0 : (_originalFile$respons2 = _originalFile$respons.body) === null || _originalFile$respons2 === void 0 ? void 0 : _originalFile$respons2.file;
-  var afterOrBeforeUploadFile = uploadedFile ? _objectSpread(_objectSpread({}, uploadedFile), {}, {
-    idBeforeUpload: originalFile.id
-  }) : originalFile;
-  useEffect(function () {
-    if (!(originalFile !== null && originalFile !== void 0 && originalFile.preview)) {
-      handleRequestThumbnail(originalFile);
-    }
-
-    // Since it is not possible to change the visibility while u are in share dialog, then the useEffect triggered on first render only is enough.
-    if (!isUploadsPanel && typeof checkIsPrivateVisibilityFile === 'function' && checkIsPrivateVisibilityFile(afterOrBeforeUploadFile)) {
-      setIsFileShareNotAllowed(true);
-    }
-    return function () {
-      if (!(originalFile !== null && originalFile !== void 0 && originalFile.preview)) {
-        handleCancelThumbnail(originalFile);
-      }
-    };
-  }, []);
-  if (!originalFile) {
-    return;
-  }
-  var isOnline = checkConnection();
-  var error = isUploadsPanel && !isOnline;
-  var triggerContextMenu = function triggerContextMenu(event, file) {
-    return toggleContextMenu({
-      event: event,
-      items: file.idBeforeUpload ? [file.idBeforeUpload] : [],
-      itemsPropName: 'filesIdsBeforeUpload',
-      filesUuids: [file.uuid || file.id],
-      mode: isUploadableFile(afterOrBeforeUploadFile) ? CONTEXTMENU_MODES.BEFORE_UPLOAD : CONTEXTMENU_MODES.FILE
-    });
-  };
-  var renderFileStatusLabel = function renderFileStatusLabel() {
-    if (error) return i18n('mutualizedUploadError');
-    if (isFileShareNotAllowed) return i18n('mutualizedNotShareable');
-    return i18n('mutualizedUploadWarning');
-  };
-  var openFileWindow = function openFileWindow(event) {
-    if (event.target.tagName === 'INPUT') return;
-    dispatch(fileWindowUpdated(afterOrBeforeUploadFile.uuid || afterOrBeforeUploadFile.id));
-  };
-  var openContextMenuIfNotUploading = function openContextMenuIfNotUploading(e) {
-    return !isUploadsPanel ? ignoreEvent(e) : triggerContextMenu(e, afterOrBeforeUploadFile);
-  };
-  var explorerItemClass = classNames({
-    'is-error': !!error,
-    'is-resumable': allowResumableUploads,
-    'is-noIndividualCancellation': !allowIndividualCancellation
-  });
-  return /*#__PURE__*/_jsxs(Styled.FileItem, {
-    id: "filerobot_".concat(afterOrBeforeUploadFile.uuid || afterOrBeforeUploadFile.id),
-    role: role,
-    "aria-label": ariaLabel,
-    className: explorerItemClass,
-    error: Boolean(error),
-    warning: isFileShareNotAllowed,
-    showFloatyButton: showFloatyButton,
-    onDoubleClick: openFileWindow,
-    onContextMenu: openContextMenuIfNotUploading,
-    children: [!hideTopOptions && (uploadedFile ? /*#__PURE__*/_jsx(FileTopOptions, {
-      file: afterOrBeforeUploadFile,
-      onContextMenu: openContextMenuIfNotUploading,
-      toggleFileWindow: openFileWindow
-    }) : /*#__PURE__*/_jsx(FileUploadTopOptions, {
-      file: originalFile,
-      openFileWindow: openFileWindow,
-      onRemove: onRemove
-    })), /*#__PURE__*/_jsxs(Styled.UploadInfoBar, {
-      error: Boolean(error),
-      warning: isFileShareNotAllowed,
-      children: [renderFileStatusLabel(), /*#__PURE__*/_jsx(TooltipV2, {
-        title: isFileShareNotAllowed ? i18n('explorerPrivateFileShareNotAllowed') : i18n('mutualizedUnknownErrorMessage'),
-        children: /*#__PURE__*/_jsx(Styled.InfoIcon, {
-          size: 12
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Styled.FloatyButton, {
-      onClick: function onClick() {
-        return onRemove(originalFile);
-      },
-      hide: !showFloatyButton,
-      color: "primary",
-      children: /*#__PURE__*/_jsx(Cross, {
-        size: 8.8
-      })
-    }), /*#__PURE__*/_jsx(Styled.FileItemIconWrapper, {
-      children: /*#__PURE__*/_jsx(PreUploadFileThumbnail, {
-        file: originalFile,
-        isUploadsPanel: isUploadsPanel
-      })
-    }), /*#__PURE__*/_jsx(FileInfo, {
-      file: afterOrBeforeUploadFile,
-      handleContextMenuToggle: openContextMenuIfNotUploading,
-      renameOnDblClick: true,
-      showMenuBtn: true,
-      showMeta: true,
-      noTruncate: true
-    })]
-  });
-};
-export default /*#__PURE__*/memo(FileItem);

package/lib/components/FileWindowPanel/Body/ActionButtons.js

@@ -1,70 +0,0 @@
-import { FitScreen, PositionCenter } from '@scaleflex/icons';
-import { BTN_ZOOM_RATIO_PERCENTAGE, DEFAULT_ZOOM_RATIO, MAX_ZOOM_RATIO } from './Body.constants';
-import Styled from './Body.styled';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var ActionButtons = function ActionButtons(_ref) {
-  var isImageOrPdf = _ref.isImageOrPdf,
-    zoomRatio = _ref.zoomRatio,
-    setZoomRatio = _ref.setZoomRatio,
-    setIsFileTabsHidden = _ref.setIsFileTabsHidden,
-    isFileTabsHidden = _ref.isFileTabsHidden,
-    useAssetsPicker = _ref.useAssetsPicker;
-  var zoomIn = function zoomIn() {
-    var nextZoomRatio = Math.min(zoomRatio + BTN_ZOOM_RATIO_PERCENTAGE, MAX_ZOOM_RATIO);
-    setZoomRatio(nextZoomRatio);
-  };
-  var zoomOut = function zoomOut() {
-    var nextZoomRatio = Math.min(Math.max(zoomRatio - BTN_ZOOM_RATIO_PERCENTAGE, BTN_ZOOM_RATIO_PERCENTAGE));
-    setZoomRatio(nextZoomRatio);
-  };
-  var resetZoom = function resetZoom() {
-    setZoomRatio(DEFAULT_ZOOM_RATIO);
-  };
-  return /*#__PURE__*/_jsxs(Styled.AssetsActionBtns, {
-    isVisible: isImageOrPdf,
-    children: [/*#__PURE__*/_jsx(Styled.FooterActionBtn, {
-      size: "lg",
-      color: "basic",
-      onClick: resetZoom,
-      isVisible: isImageOrPdf,
-      padding: "11px",
-      children: /*#__PURE__*/_jsx(PositionCenter, {
-        size: 18
-      })
-    }), /*#__PURE__*/_jsxs(Styled.FooterZoomBtns, {
-      isVisible: isImageOrPdf,
-      children: [/*#__PURE__*/_jsx(Styled.FooterActionBtn, {
-        size: "lg",
-        color: "basic",
-        onClick: zoomOut,
-        isVisible: isImageOrPdf,
-        children: /*#__PURE__*/_jsx(Styled.IconBox, {
-          children: /*#__PURE__*/_jsx(Styled.MinusOutline, {})
-        })
-      }), /*#__PURE__*/_jsxs("span", {
-        onClick: resetZoom,
-        children: [parseInt(zoomRatio * 100), "%"]
-      }), /*#__PURE__*/_jsx(Styled.FooterActionBtn, {
-        size: "lg",
-        color: "basic",
-        onClick: zoomIn,
-        isVisible: isImageOrPdf,
-        children: /*#__PURE__*/_jsx(Styled.IconBox, {
-          children: /*#__PURE__*/_jsx(Styled.PlusOutline, {})
-        })
-      })]
-    }), useAssetsPicker ? /*#__PURE__*/_jsx("span", {}) : /*#__PURE__*/_jsx(Styled.FooterActionBtn, {
-      size: "lg",
-      color: "basic",
-      isVisible: isImageOrPdf,
-      onClick: function onClick() {
-        return setIsFileTabsHidden(!isFileTabsHidden);
-      },
-      padding: "11px",
-      children: /*#__PURE__*/_jsx(FitScreen, {
-        size: 18
-      })
-    })]
-  });
-};
-export default ActionButtons;

package/lib/components/FileWindowPanel/Body/Body.constants.js

@@ -1,5 +0,0 @@
-export var DEFAULT_ZOOM_RATIO = 1;
-export var BTN_ZOOM_RATIO_PERCENTAGE = 0.25;
-export var WHEEL_ZOOM_RATIO_PERCENTAGE = 0.1;
-export var MIN_ZOOM_RATIO = 0.1;
-export var MAX_ZOOM_RATIO = 5;

package/lib/components/FileWindowPanel/Body/Body.styled.js

@@ -1,196 +0,0 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import styled, { css } from 'styled-components';
-import { IconButton, Button, Input, Skeleton as SfxSkeleton } from '@scaleflex/ui/core';
-import { ArrowBottom, MinusOutline as SfxMinusOutline, NoImages, PlusOutline as SfxPlusOutline } from '@scaleflex/icons';
-import { FV, PC } from '@scaleflex/widget-common';
-import { FILE_TYPES_AND_ICONS } from '@scaleflex/widget-utils/lib/constants';
-var Container = styled.div(function (_ref) {
-  var theme = _ref.theme;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  height: 100%;\n  flex-direction: column;\n  width: 60%;\n\n  ", " {\n    width: 100%;\n    height: 50%;\n\n    :has([data-expand-height=\"true\"]) {\n      height: calc(50% + 140px);\n    }\n  }\n\n  ", " & {\n    width: 100%;\n    height: 50%;\n\n    :has([data-expand-height=\"true\"]) {\n      height: calc(50% + 140px);\n    }\n  }\n\n  ", " & {\n    width: 100%;\n    height: 50%;\n\n    :has([data-expand-height=\"true\"]) {\n      height: calc(50% + 140px);\n    }\n  }\n"])), theme.breakpoints.down('lg'), theme.breakpoints.classes.md, theme.breakpoints.classes.sm);
-});
-var FilePaginationButtons = styled(IconButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  padding: 10px;\n  background-color: ", ";\n\n  ", "\n"])), function (_ref2) {
-  var palette = _ref2.theme.palette;
-  return palette[PC.Accent_1_8_Opacity];
-}, function (_ref3) {
-  var left = _ref3.left;
-  return left ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    left: 12px;\n  "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    right: 12px;\n  "])));
-});
-var Body = styled.div(function (_ref4) {
-  var theme = _ref4.theme,
-    $hidePagination = _ref4.$hidePagination,
-    $fullWidth = _ref4.$fullWidth,
-    isFileLoading = _ref4.isFileLoading;
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  flex-grow: 1;\n  height: 250px;\n  width: ", " ;\n  margin: auto;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n  -webkit-user-drag: none;\n  background-color: ", ";\n\n  &:hover {\n    ", " {\n      display: ", ";\n    }\n  }\n\n  ", " {\n    width: 100%;\n  }\n\n  ", " & {\n    width: 100%;\n  }\n\n  ", " & {\n    width: 100%;\n  }\n"])), $fullWidth ? '100%' : 'calc(100% - (24px * 2))', !isFileLoading && !$fullWidth ? theme.palette[PC.BackgroundHover] : 'none', FilePaginationButtons, $hidePagination ? 'none' : 'inline-flex', theme.breakpoints.down('lg'), theme.breakpoints.classes.md, theme.breakpoints.classes.sm);
-});
-var Skeleton = styled(SfxSkeleton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: ", ";\n  visibility: visible;\n  opacity: 1;\n  transition: all 150ms ease-out;\n  z-index: 1000;\n\n  ", "\n"])), function (_ref5) {
-  var absolutePosition = _ref5.absolutePosition;
-  return absolutePosition ? 'absolute' : 'relative';
-}, function (_ref6) {
-  var $hidden = _ref6.$hidden;
-  return $hidden && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    visibility: hidden;\n    opacity: 0;\n  "])));
-});
-
-// TODO: Remove Navigation Side and Center Icons when UI implement button
-var NavigationSideIcon = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 6px;\n  height: 10px;\n  background-color: ", ";\n  border-radius: 1.33333px;\n"])), function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.palette[PC.IconsPrimaryHover];
-});
-var NavigationCenterIcon = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 16px;\n  background: ", ";\n  margin: 0px 2px;\n  border-radius: 2.66667px;\n"])), function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.palette[PC.IconsPrimary];
-});
-var IconWrap = styled.div(function (_ref9) {
-  var palette = _ref9.theme.palette;
-  return "\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    align-self: center;\n    justify-content: center;\n    background: ".concat(palette[PC.Extra_0_7_Overlay], ";\n    width: 80px;\n    height: 80px;\n    border-radius: 50px;\n    color:").concat(palette[PC.ButtonPrimaryText], ";\n    position: absolute;\n    left: calc(50% - 80px/2);\n    top: calc(50% - 80px/2);\n\n    &:hover {\n      cursor: pointer;\n    }\n  ");
-});
-var BodyFile = styled.img.attrs(function (_ref10) {
-  var _ref10$$zoomRatio = _ref10.$zoomRatio,
-    $zoomRatio = _ref10$$zoomRatio === void 0 ? 1 : _ref10$$zoomRatio,
-    $pan = _ref10.$pan,
-    $isPanEnabled = _ref10.$isPanEnabled,
-    $isTransparencySupported = _ref10.$isTransparencySupported;
-  return {
-    style: {
-      transform: "scale(".concat($zoomRatio, ") translate(").concat($pan.x, "px, ").concat($pan.y, "px)"),
-      transition: $isPanEnabled ? 'none' : 'transform 150ms',
-      backgroundImage: $isTransparencySupported ? "url(".concat(FILE_TYPES_AND_ICONS.chess_bg, ")") : ''
-    }
-  };
-})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\n  max-width: 100%;\n  max-height: 100%;\n  user-select: none;\n  touch-action: none;\n  opacity: 1;\n  visibility: visible;\n  transition: all 150ms ease-out;\n  -webkit-user-drag: none;\n\n  ", ";\n"])), function (_ref11) {
-  var $hidden = _ref11.$hidden;
-  return $hidden && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    visibility: hidden;\n    opacity: 0;\n  "])));
-});
-var BodyFavBtn = styled(IconButton)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 30px;\n  right: 24px;\n  border: none;\n  padding: 8px;\n  border-radius: 50%;\n  background: ", ";\n  color: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref12) {
-  var theme = _ref12.theme,
-    $isActive = _ref12.$isActive;
-  return theme.palette[PC[$isActive ? 'ButtonPrimaryText' : 'Extra_0_7_Overlay']];
-}, function (_ref13) {
-  var theme = _ref13.theme,
-    $isActive = _ref13.$isActive;
-  return theme.palette[PC[$isActive ? 'LinkPressed' : 'ButtonPrimaryText']];
-}, function (_ref14) {
-  var theme = _ref14.theme;
-  return theme.palette[PC.Extra_0_9_Overlay];
-});
-var Footer = styled.div(function (_ref15) {
-  var theme = _ref15.theme,
-    $isPdfPreview = _ref15.$isPdfPreview;
-  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  bottom: 0;\n  height: 60px;\n  width: 100%;\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  justify-content: ", ";\n  padding: ", ";\n\n  ", " {\n    height: 52px;\n    border-bottom: 1px solid ", ";\n  }\n\n  ", " & {\n    height: 52px;\n    border-bottom: 1px solid ", ";\n  }\n\n  ", " & {\n    height: 52px;\n    border-bottom: 1px solid ", ";\n  }\n"])), $isPdfPreview ? 'none' : 'flex', function (_ref16) {
-    var $centered = _ref16.$centered;
-    return $centered ? 'center' : 'space-between';
-  }, function (_ref17) {
-    var $isPdfPreview = _ref17.$isPdfPreview;
-    return $isPdfPreview ? '0 calc(24px - 10px)' : '0 13px';
-  }, theme.breakpoints.down('lg'), theme.palette[PC.BordersSecondary], theme.breakpoints.classes.md, theme.palette[PC.BordersSecondary], theme.breakpoints.classes.sm, theme.palette[PC.BordersSecondary]);
-});
-var VariantsButton = styled(Button)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  visibility: ", ";\n  display: ", ";\n\n  .SfxButton-Label {\n    max-width: 100px;\n  }\n"])), function (_ref18) {
-  var isVisible = _ref18.isVisible;
-  return isVisible ? 'visible' : 'hidden';
-}, function (_ref19) {
-  var isPdfPreviewSupported = _ref19.isPdfPreviewSupported;
-  return isPdfPreviewSupported ? 'none' : 'flex';
-});
-var VariantsButtonArrowBottom = styled(ArrowBottom)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  transition: 0.2s all ease-in-out;\n  ", "\n"])), function (_ref20) {
-  var $isRotated = _ref20.$isRotated;
-  return $isRotated ? 'transform: rotate(-180deg);' : '';
-});
-var AssetsActionBtns = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: ", ";\n  align-items: center;\n  justify-content: space-between;\n  overflow-x: auto;\n"])), function (_ref21) {
-  var isVisible = _ref21.isVisible;
-  return isVisible ? '100%' : '80px';
-});
-var FooterZoomBtns = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  padding: 8px;\n  border-radius: 4px;\n  height: 32px;\n\n  span {\n    ", ";\n    color: ", ";\n    padding: 0 8px;\n    cursor: pointer;\n  }\n"])), function (_ref22) {
-  var isVisible = _ref22.isVisible;
-  return isVisible ? 'flex' : 'none';
-}, function (_ref23) {
-  var theme = _ref23.theme;
-  return theme.typography.font[FV.LabelMedium];
-}, function (_ref24) {
-  var theme = _ref24.theme;
-  return theme.palette[PC.TextSecondary];
-});
-var FooterActionBtn = styled(IconButton)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  ", "\n\n  display: ", ";\n\n  &:hover {\n    svg {\n      color: ", ";\n    }\n  }\n\n  svg {\n    color: ", ";\n    flex-shrink: 0;\n  }\n"])), function (_ref25) {
-  var _ref25$padding = _ref25.padding,
-    padding = _ref25$padding === void 0 ? false : _ref25$padding;
-  return padding && "padding: ".concat(padding, ";");
-}, function (_ref26) {
-  var isVisible = _ref26.isVisible;
-  return isVisible ? 'inline-flex' : 'none';
-}, function (_ref27) {
-  var theme = _ref27.theme;
-  return theme.palette[PC.IconsPrimaryHover];
-}, function (_ref28) {
-  var theme = _ref28.theme;
-  return theme.palette[PC.IconsPrimary];
-});
-var MinusOutline = styled(SfxMinusOutline)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  width: 13.64px !important;\n  height: 1.5px !important;\n  flex-shrink: 0;\n"])));
-var PlusOutline = styled(SfxPlusOutline)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  width: 13.5px !important;\n  height: 13.5px !important;\n  flex-shrink: 0;\n"])));
-var PdfControlsWrapper = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 8px;\n"])));
-var PagesInput = styled(Input)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  width: 48px;\n"])));
-var NumPagesLabel = styled.p(function (_ref29) {
-  var _ref29$theme = _ref29.theme,
-    typography = _ref29$theme.typography,
-    palette = _ref29$theme.palette;
-  return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  ", ";\n  margin: 0;\n  white-space: nowrap;\n  color: ", ";\n"])), typography.font[FV.LabelMedium], palette[PC.TextSecondary]);
-});
-var FilesNavigationButton = styled(IconButton)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  margin: auto;\n"])));
-var VideoWrapper = styled.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n\n  video {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n"])));
-var VideoActions = styled.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"])));
-var CanvasWrapper = styled.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  > div {\n    justify-content: center;\n  }\n"])));
-var PlaceholderWrapper = styled.div(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n"])));
-var PlaceholderTitle = styled.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  margin: 8px 0;\n  ", ";\n  color: ", ";\n"])), function (_ref30) {
-  var theme = _ref30.theme;
-  return theme.typography.font[FV.LabelExtraLarge];
-}, function (_ref31) {
-  var theme = _ref31.theme;
-  return theme.palette[PC.TextSecondary];
-});
-var PlaceholderHint = styled.p(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  margin: 0;\n"])), function (_ref32) {
-  var theme = _ref32.theme;
-  return theme.typography.font[FV.TextLarge];
-}, function (_ref33) {
-  var theme = _ref33.theme;
-  return theme.palette[PC.TextSecondary];
-});
-var PlaceholderIcon = styled(NoImages)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref34) {
-  var theme = _ref34.theme;
-  return theme.palette[PC.IconsPlaceholder];
-});
-var RetryButton = styled.button(function (_ref35) {
-  var palette = _ref35.theme.palette;
-  return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n    font-size: 16px;\n    border: 0;\n    cursor: pointer;\n    background: none;\n    color: ", ";\n  "])), palette[PC.AccentStateless]);
-});
-var IconBox = styled.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  width: 18px;\n  height: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var Styled = {
-  Container: Container,
-  Body: Body,
-  Skeleton: Skeleton,
-  BodyFile: BodyFile,
-  IconWrap: IconWrap,
-  BodyFavBtn: BodyFavBtn,
-  Footer: Footer,
-  AssetsActionBtns: AssetsActionBtns,
-  FooterZoomBtns: FooterZoomBtns,
-  FooterActionBtn: FooterActionBtn,
-  VariantsButton: VariantsButton,
-  VariantsButtonArrowBottom: VariantsButtonArrowBottom,
-  PdfControlsWrapper: PdfControlsWrapper,
-  PagesInput: PagesInput,
-  NumPagesLabel: NumPagesLabel,
-  NavigationCenterIcon: NavigationCenterIcon,
-  NavigationSideIcon: NavigationSideIcon,
-  MinusOutline: MinusOutline,
-  PlusOutline: PlusOutline,
-  FilesNavigationButton: FilesNavigationButton,
-  FilePaginationButtons: FilePaginationButtons,
-  VideoActions: VideoActions,
-  VideoWrapper: VideoWrapper,
-  CanvasWrapper: CanvasWrapper,
-  PlaceholderWrapper: PlaceholderWrapper,
-  IconBox: IconBox,
-  PlaceholderTitle: PlaceholderTitle,
-  PlaceholderHint: PlaceholderHint,
-  PlaceholderIcon: PlaceholderIcon,
-  RetryButton: RetryButton
-};
-export default Styled;