@scaleflex/widget-explorer 4.1.0 → 4.4.0

package/lib/components/CropPanel/CropPanel.styled.js

@@ -1,107 +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;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { FV, PC, TransitionWrapper } from '@scaleflex/widget-common';
-import { Button, IconButton as SfxIconButton, SelectGroup as SfxSelectGroup } from '@scaleflex/ui/core';
-import styled, { css } from 'styled-components';
-var CropPanelTopBar = styled.div(function (_ref) {
-  var _ref$theme = _ref.theme,
-    palette = _ref$theme.palette,
-    breakpoints = _ref$theme.breakpoints;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    position: relative;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 64px;\n    padding: 24px 24px 20px 24px;\n    border: 1px solid ", ";\n    background: ", ";\n\n    ", " {\n      height: 48px;\n      padding: 16px 16px 12px 16px;\n    }\n\n    ", " & {\n      height: 48px;\n      padding: 16px 16px 12px 16px;\n    }\n  "])), palette[PC.BordersSecondary], palette[PC.BackgroundStateless], breakpoints.down('md'), breakpoints.classes.sm);
-});
-var ExplorerOverlay = styled.div(function (_ref2) {
-  var palette = _ref2.theme.palette;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1005;\n    box-shadow: 0px 1px 4px ", ";\n    background-color:  ", ";\n    overflow: hidden;\n  "])), palette[PC.LightShadow], palette[PC.BackgroundStateless]);
-});
-var CropPanel = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    height: 100%;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    max-height: 100%;\n  "])));
-var CropPanelTopBarTitle = styled.div(function (_ref3) {
-  var _ref3$theme = _ref3.theme,
-    palette = _ref3$theme.palette,
-    breakpoints = _ref3$theme.breakpoints;
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 18px;\n    line-height: 20px;\n    color: ", ";\n\n    ", " {\n      padding: 16px 16px 14px 16px;\n    }\n  "])), palette[PC.TextPrimary], breakpoints.down('md'));
-});
-var CloseIcon = styled.span(function (_ref4) {
-  var _ref4$theme = _ref4.theme,
-    palette = _ref4$theme.palette,
-    breakpoints = _ref4$theme.breakpoints;
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    position: absolute;\n    cursor: pointer;\n    right: 15px;\n    color: ", ";\n\n    ", " {\n      right: 5px;\n    }\n\n    ", " & {\n      right: 5px;\n    }\n  "])), palette[PC.IconsSecondary], breakpoints.down('md'), breakpoints.classes.sm);
-});
-var ImageEditorWrapper = styled(TransitionWrapper)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  max-width: 20px;\n"])));
-var CropPanelBody = styled.div(function (_ref5) {
-  var breakpoints = _ref5.theme.breakpoints;
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: flex;\n    column-gap: 24px;\n    padding: 24px 4px 24px 24px;\n    flex-grow: 1;\n    height: calc(100% - 64px - 96px);\n\n    ", " {\n      height: calc(100% - 48px - 96px);\n      padding: 14px 4px 14px 14px;\n    }\n\n    ", " & {\n      height: calc(100% - 48px - 96px);\n      padding: 14px 4px 14px 14px;\n    }\n  "])), breakpoints.down('md'), breakpoints.classes.sm);
-});
-var CropSettings = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 100%;\n    max-width: 278px;\n    min-width: 254px;\n  "])));
-var CropImageWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: calc(100% - 278px - 24px);\n\n    .FIE_root {\n      width: 100% !important;\n    }\n\n    .FIE_main-container {\n      padding: 0;\n    }\n  "])));
-var OptionGroup = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    row-gap: 4px;\n  "])));
-var ImageOptionsSettingsWrapper = styled.div(function (_ref6) {
-  var isCropOptions = _ref6.isCropOptions,
-    breakpoints = _ref6.theme.breakpoints;
-  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    row-gap: ", ";\n    height: 101%;\n    overflow-y: ", ";\n    padding-right: ", ";\n\n    ", " {\n      padding: 10px;\n    }\n\n    ", " & {\n      padding: 10px;\n    }\n  "])), isCropOptions ? '32px' : '24px', isCropOptions ? 'auto' : 'hidden', isCropOptions ? '20px' : '', breakpoints.down('md'), breakpoints.classes.sm);
-});
-var ImageOptionsSettings = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    row-gap: 16px;\n  "])));
-var ImageOptionsInfoWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    display: flex;\n    column-gap: 6px;\n    align-items: baseline;\n  "])));
-var ImageSizeOptions = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n"])));
-var ImageSizeOptionButtons = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var InfoLabel = styled.span(function (_ref7) {
-  var _ref7$theme = _ref7.theme,
-    palette = _ref7$theme.palette,
-    font = _ref7$theme.typography.font,
-    isCropOptions = _ref7.isCropOptions;
-  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    max-width: ", ";\n    color: ", ";\n    ", "\n  "])), isCropOptions ? '236px' : '284px', palette[PC.Blue], font[FV.TextSmall]);
-});
-var CropPanelFooter = styled.div(function (_ref8) {
-  var _ref8$theme = _ref8.theme,
-    palette = _ref8$theme.palette,
-    breakpoints = _ref8$theme.breakpoints;
-  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: flex-end;\n    padding: 24px;\n    height: 96px;\n    border-top: 1px solid ", " ;\n    border-radius: 0px 0px 4px 4px;\n    column-gap: 12px;\n\n    ", " {\n      height: 72px;\n      padding: 16px;\n    }\n\n    ", " & {\n      height: 72px;\n      padding: 16px;\n    }\n  "])), palette[PC.BordersSecondary], breakpoints.down('md'), breakpoints.classes.sm);
-});
-var CropPanelFooterSaveButton = styled(Button)(function (_ref9) {
-  var _ref9$theme = _ref9.theme,
-    breakpoints = _ref9$theme.breakpoints,
-    font = _ref9$theme.typography.font;
-  return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    padding: 14px 40px;\n    min-width: 120px;\n    max-width: 120px;\n    justify-content: center;\n\n    ", " {\n      ", "\n    }\n\n    ", " & {\n      ", "\n    }\n  "])), breakpoints.down('md'), font[FV.LabelLarge], breakpoints.classes.sm, font[FV.LabelLarge]);
-});
-var CropPanelFooterCancelButton = styled(Button)(function (_ref10) {
-  var _ref10$theme = _ref10.theme,
-    breakpoints = _ref10$theme.breakpoints,
-    font = _ref10$theme.typography.font;
-  return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    padding: 14px 31px;\n    min-width: 120px;\n    justify-content: center;\n\n    ", " {\n      ", "\n    }\n\n    ", " & {\n      ", "\n    }\n  "])), breakpoints.down('md'), font[FV.LabelLarge], breakpoints.classes.sm, font[FV.LabelLarge]);
-});
-var IconButton = styled(SfxIconButton)(function (_ref11) {
-  var palette = _ref11.theme.palette,
-    isActive = _ref11.isActive;
-  return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    background: none;\n    padding: 0;\n    margin: 0;\n    margin-top: 20px;\n\n    &:hover {\n      background: none;\n    }\n  "])));
-});
-var SelectGroup = styled(SfxSelectGroup)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  .SfxSelect-Label {\n    text-transform: capitalize;\n  }\n"])));
-var ImageOptionButtonButtons = styled(Button)(function (_ref12) {
-  var palette = _ref12.theme.palette,
-    type = _ref12.type,
-    imageSizeType = _ref12.imageSizeType;
-  return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    color: ", ";\n    padding: 0;\n    margin-right: 16px;\n    text-transform: capitalize;\n\n    &:hover {\n      color: ", "\n    }\n  "])), type !== imageSizeType ? palette[PC.LinkStateless] : palette[PC.AccentPrimaryActive], type !== imageSizeType ? palette[PC.LinkHover] : palette[PC.LinkHover]);
-});
-var Styled = {
-  ImageEditorWrapper: ImageEditorWrapper,
-  CropPanel: CropPanel,
-  CropPanelTopBar: CropPanelTopBar,
-  CropPanelTopBarTitle: CropPanelTopBarTitle,
-  CloseIcon: CloseIcon,
-  CropPanelBody: CropPanelBody,
-  CropSettings: CropSettings,
-  CropImageWrapper: CropImageWrapper,
-  OptionGroup: OptionGroup,
-  ImageOptionsSettingsWrapper: ImageOptionsSettingsWrapper,
-  ImageOptionsSettings: ImageOptionsSettings,
-  ImageOptionsInfoWrapper: ImageOptionsInfoWrapper,
-  InfoLabel: InfoLabel,
-  ImageSizeOptions: ImageSizeOptions,
-  CropPanelFooter: CropPanelFooter,
-  CropPanelFooterSaveButton: CropPanelFooterSaveButton,
-  CropPanelFooterCancelButton: CropPanelFooterCancelButton,
-  ExplorerOverlay: ExplorerOverlay,
-  IconButton: IconButton,
-  ImageOptionButtonButtons: ImageOptionButtonButtons,
-  SelectGroup: SelectGroup,
-  ImageSizeOptionButtons: ImageSizeOptionButtons
-};
-export default Styled;

package/lib/components/CropPanel/CropPanel.utils.js

@@ -1,48 +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); }
-import { FORMAT_OPTIONS } from './CropPanel.constants';
-export var convertObjToArray = function convertObjToArray(obj, i18n) {
-  return Object.keys(obj).map(function (key) {
-    return {
-      label: i18n ? i18n(key) || key : key,
-      value: key
-    };
-  });
-};
-export var isWebp = function isWebp(format) {
-  return format === 'webp';
-};
-export var isGif = function isGif(format) {
-  return format === 'gif';
-};
-export var isPng = function isPng(format) {
-  return format === 'png';
-};
-export var isFormatPdf = function isFormatPdf(format) {
-  return format === 'pdf';
-};
-export var isSupportedFormat = function isSupportedFormat(format) {
-  return FORMAT_OPTIONS.some(function (option) {
-    return option.value === format;
-  });
-};
-export var getDefaultFormat = function getDefaultFormat(format) {
-  return isSupportedFormat(format) ? format : 'jpeg';
-};
-export var roundNum = Math.round;
-export var cropToCloudimageQuery = function cropToCloudimageQuery(cropDimensions) {
-  return cropDimensions ? _objectSpread({
-    tl_px: "".concat(roundNum(cropDimensions.x), ",").concat(roundNum(cropDimensions.y)),
-    br_px: "".concat(roundNum(cropDimensions.x + cropDimensions.width), ",").concat(roundNum(cropDimensions.y + cropDimensions.height)),
-    radius: cropDimensions.ratio === 'ellipse' ? Math.max(cropDimensions.width, cropDimensions.height) : false
-  }, cropDimensions.ratio === 'ellipse' ? {
-    force_format: 'png'
-  } : {}) : {};
-};
-export var isValidNumberValue = function isValidNumberValue(value, comparedValue) {
-  return (value || value === 0) && !Number.isNaN(value) && value < comparedValue;
-};

package/lib/components/CropPanel/CropPanelContent.js

@@ -1,209 +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 { useMemo, useRef, useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { mapNumber } from '@scaleflex/ui/utils/functions';
-import { useCore } from '@scaleflex/widget-core/lib/hooks';
-import FilerobotImageEditor, { TOOLS } from 'react-filerobot-image-editor';
-import { CrossButton } from '@scaleflex/ui/core';
-import getImageEditUrl from '@scaleflex/widget-utils/lib/getImageEditUrl';
-import { useExplorer } from '../../hooks';
-import ImageOptions from './ImageOptions';
-import { isValidNumberValue, roundNum } from './CropPanel.utils';
-import Styled from './CropPanel.styled';
-import { allPanelsClosed } from '../../slices/panels.slice';
-import { useTransformedDownload } from '../Modals/TransformedDownload';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var CropPanelContent = function CropPanelContent(_ref) {
-  var _imageFile$info, _imageFile$info2;
-  var imageFile = _ref.imageFile;
-  var dispatch = useDispatch();
-  var triggerTransformedDownload = useTransformedDownload();
-  var _useCore = useCore(),
-    container = _useCore.opts.container;
-  var _useExplorer = useExplorer(),
-    i18n = _useExplorer.i18n,
-    _useExplorer$opts = _useExplorer.opts,
-    opts = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
-    isDevEnv = _useExplorer.isDevEnv;
-  var downloadConsent = opts.downloadConsent;
-  var _useState = useState(!!downloadConsent),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPrimaryButtonDisabled = _useState2[0],
-    setIsPrimaryButtonDisabled = _useState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    transformations = _useState4[0],
-    setTransformations = _useState4[1];
-  var imgEditorUpdateStateFnRef = useRef();
-  var originalWidth = imageFile === null || imageFile === void 0 ? void 0 : (_imageFile$info = imageFile.info) === null || _imageFile$info === void 0 ? void 0 : _imageFile$info.img_w;
-  var originalHeight = imageFile === null || imageFile === void 0 ? void 0 : (_imageFile$info2 = imageFile.info) === null || _imageFile$info2 === void 0 ? void 0 : _imageFile$info2.img_h;
-  var _useState5 = useState(function () {
-      return {
-        width: originalWidth || 0,
-        height: originalHeight || 0,
-        x: 0,
-        y: 0,
-        autoResize: false,
-        ratio: 'custom'
-      };
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    cropDimensions = _useState6[0],
-    setCropDimensions = _useState6[1];
-  var imgSource = useMemo(function () {
-    var imgFileUrl = getImageEditUrl(imageFile, {
-      isDevEnv: isDevEnv,
-      containerToken: container
-    });
-    if (originalWidth && originalHeight) {
-      return {
-        width: originalWidth,
-        height: originalHeight,
-        src: imgFileUrl
-      };
-    }
-    return imgFileUrl;
-  }, [imageFile, isDevEnv, originalWidth, originalHeight, container]);
-  if (!imageFile) {
-    return null;
-  }
-  var updateCropDimensions = function updateCropDimensions(newDimens) {
-    var isUpdatedFromEditor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var ratio = newDimens.ratio,
-      width = newDimens.width,
-      height = newDimens.height;
-    var isOriginalRatio = ratio === 'original';
-    var newWidth = isOriginalRatio || !isValidNumberValue(width, originalWidth) ? originalWidth : roundNum(width);
-    var newHeight = isOriginalRatio || !isValidNumberValue(height, originalHeight) ? originalHeight : roundNum(height);
-    setCropDimensions(function (latestDimens) {
-      return _objectSpread(_objectSpread(_objectSpread({}, latestDimens), newDimens), {}, {
-        width: newWidth,
-        height: newHeight
-      });
-    });
-    if (!isUpdatedFromEditor) {
-      imgEditorUpdateStateFnRef.current(function (_ref2) {
-        var shownImageDimensions = _ref2.shownImageDimensions,
-          _ref2$originalSource = _ref2.originalSource,
-          originalSource = _ref2$originalSource === void 0 ? {} : _ref2$originalSource;
-        var mappedPreviewWidth = mapNumber(newWidth, 0, originalSource.width, 0, shownImageDimensions.width);
-        var mappedPreviewHeight = mapNumber(newHeight, 0, originalSource.height, 0, shownImageDimensions.height);
-        var newX = newWidth + (newDimens.x || 0) > originalSource.width ? originalSource.width - newWidth : newDimens.x;
-        var newY = newHeight + (newDimens.y || 0) > originalSource.height ? originalSource.height - newHeight : newDimens.y;
-        var mappedPreviewX = mapNumber(newX, 0, originalSource.width, 0, shownImageDimensions.width);
-        var mappedPreviewY = mapNumber(newY, 0, originalSource.height, 0, shownImageDimensions.height);
-        return {
-          isDesignState: true,
-          adjustments: {
-            crop: {
-              x: mappedPreviewX,
-              y: mappedPreviewY,
-              width: mappedPreviewWidth,
-              height: mappedPreviewHeight,
-              ratio: ratio
-            }
-          }
-        };
-      });
-    }
-  };
-  var updateCropDimensionsFromEditor = function updateCropDimensionsFromEditor(_ref3) {
-    var _ref3$adjustments = _ref3.adjustments,
-      adjustments = _ref3$adjustments === void 0 ? {} : _ref3$adjustments,
-      _ref3$shownImageDimen = _ref3.shownImageDimensions,
-      shownImageDimensions = _ref3$shownImageDimen === void 0 ? {} : _ref3$shownImageDimen,
-      _ref3$originalSource = _ref3.originalSource,
-      originalSource = _ref3$originalSource === void 0 ? {} : _ref3$originalSource;
-    var crop = adjustments.crop;
-    var width = isValidNumberValue(crop.width, originalWidth) ? crop.width : originalWidth;
-    var height = isValidNumberValue(crop.height, originalHeight) ? crop.height : originalHeight;
-    var mappedCropBox = {
-      width: roundNum(mapNumber(width, 0, shownImageDimensions.width, 0, originalSource.width)),
-      height: roundNum(mapNumber(height, 0, shownImageDimensions.height, 0, originalSource.height)),
-      x: roundNum(mapNumber(crop.x, 0, shownImageDimensions.width, 0, originalSource.width)),
-      y: roundNum(mapNumber(crop.y, 0, shownImageDimensions.height, 0, originalSource.height))
-    };
-    updateCropDimensions(mappedCropBox || {}, true);
-  };
-  var closeAllPanels = function closeAllPanels() {
-    dispatch(allPanelsClosed());
-  };
-  var handleDownloadButton = function handleDownloadButton() {
-    closeAllPanels();
-    triggerTransformedDownload([imageFile], {
-      transformations: transformations,
-      isVariant: true
-    });
-  };
-  var onDownloadConsentChange = function onDownloadConsentChange(e) {
-    setIsPrimaryButtonDisabled(!e.target.checked);
-  };
-  return /*#__PURE__*/_jsx(Styled.ExplorerOverlay, {
-    children: /*#__PURE__*/_jsxs(Styled.CropPanel, {
-      children: [/*#__PURE__*/_jsxs(Styled.CropPanelTopBar, {
-        children: [/*#__PURE__*/_jsx(Styled.CropPanelTopBarTitle, {
-          children: i18n('explorerModelCropOptionsButton')
-        }), /*#__PURE__*/_jsx(Styled.CloseIcon, {
-          onClick: closeAllPanels,
-          children: /*#__PURE__*/_jsx(CrossButton, {
-            size: "lg"
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(Styled.CropPanelBody, {
-        children: [/*#__PURE__*/_jsx(Styled.CropImageWrapper, {
-          children: /*#__PURE__*/_jsx(FilerobotImageEditor, {
-            source: imgSource,
-            onModify: updateCropDimensionsFromEditor,
-            updateStateFnRef: imgEditorUpdateStateFnRef,
-            showCanvasOnly: true,
-            observePluginContainerSize: true,
-            useCloudimage: true,
-            Crop: {
-              ratio: cropDimensions.ratio
-            },
-            defaultToolId: TOOLS.CROP
-          })
-        }), /*#__PURE__*/_jsx(Styled.CropSettings, {
-          children: /*#__PURE__*/_jsx(ImageOptions, {
-            imageSizeLabelI18nKey: "imageOptionsResizeLabel",
-            imageSettingsLabelKey: "imageOptionsFileSettingsLabel",
-            selections: [imageFile],
-            cropProps: {
-              labelKey: 'exportOptionsCropOptionsLabel',
-              dimensions: cropDimensions,
-              hideResizeOptions: cropDimensions.autoResize,
-              updateCropDimensions: updateCropDimensions
-            },
-            onDownloadConsentChange: onDownloadConsentChange,
-            updateTransformations: setTransformations
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(Styled.CropPanelFooter, {
-        children: [/*#__PURE__*/_jsx(Styled.CropPanelFooterCancelButton, {
-          size: "lg",
-          color: "basic",
-          onClick: closeAllPanels,
-          children: i18n('mutualizedCancelButtonLabel')
-        }), /*#__PURE__*/_jsx(Styled.CropPanelFooterSaveButton, {
-          size: "lg",
-          color: "primary",
-          disabled: isPrimaryButtonDisabled,
-          onClick: handleDownloadButton,
-          children: i18n('mutualizedDownloadButton')
-        })]
-      })]
-    })
-  });
-};
-export default CropPanelContent;