@solostylist/image-editor 1.0.13 → 1.0.15

package/lib/actions/add-filter.js

@@ -3,9 +3,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 export var ADD_FILTER = 'ADD_FILTER';
 var addFilter = function addFilter(state, payload) {
+  var _payload$filter;
   return _objectSpread(_objectSpread({}, state), {}, {
     isDesignState: !payload.dismissHistory,
-    filter: payload.filter || null
+    filter: (_payload$filter = payload.filter) !== null && _payload$filter !== void 0 ? _payload$filter : null
   });
 };
 export default addFilter;

package/lib/actions/enable-text-content-edit.js

@@ -3,8 +3,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 export var ENABLE_TEXT_CONTENT_EDIT = 'ENABLE_TEXT_CONTENT_EDIT';
 var enableTextContentEdit = function enableTextContentEdit(state, payload) {
+  var _payload$textIdOfEdit;
   return _objectSpread(_objectSpread({}, state), {}, {
-    textIdOfEditableContent: payload.textIdOfEditableContent || undefined
+    textIdOfEditableContent: (_payload$textIdOfEdit = payload.textIdOfEditableContent) !== null && _payload$textIdOfEdit !== void 0 ? _payload$textIdOfEdit : undefined
   });
 };
 export default enableTextContentEdit;

package/lib/actions/set-canvas-size.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"set-canvas-size.d.ts","sourceRoot":"","sources":["../../src/actions/set-canvas-size.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AAEjD,QAAA,MAAM,aAAa,GACjB,OAAO,QAAQ,EACf,SAAS,oBAAoB,KAC5B,QAgEF,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"set-canvas-size.d.ts","sourceRoot":"","sources":["../../src/actions/set-canvas-size.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AAEjD,QAAA,MAAM,aAAa,GACjB,OAAO,QAAQ,EACf,SAAS,oBAAoB,KAC5B,QA+CF,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/actions/set-crop.js

@@ -6,10 +6,15 @@ export var SET_CROP = 'SET_CROP';
 var setCrop = function setCrop(state, payload) {
   var _state$adjustments$cr, _payload$ratioTitleKe;
   var oldCrop = (_state$adjustments$cr = state.adjustments.crop) !== null && _state$adjustments$cr !== void 0 ? _state$adjustments$cr : {};
+  var newRatio = function () {
+    if (typeof payload.ratio === 'string') return payload.ratio;
+    if (payload.ratio !== undefined) return toPrecisedFloat(payload.ratio);
+    return oldCrop.ratio;
+  }();
   var newCrop = {
     x: payload.x !== undefined ? toPrecisedFloat(payload.x) : oldCrop.x,
     y: payload.y !== undefined ? toPrecisedFloat(payload.y) : oldCrop.y,
-    ratio: typeof payload.ratio === 'string' ? payload.ratio : payload.ratio !== undefined ? toPrecisedFloat(payload.ratio) : oldCrop.ratio,
+    ratio: newRatio,
     width: payload.width !== undefined ? toPrecisedFloat(payload.width) : oldCrop.width,
     height: payload.height !== undefined ? toPrecisedFloat(payload.height) : oldCrop.height,
     ratioTitleKey: (_payload$ratioTitleKe = payload.ratioTitleKey) !== null && _payload$ratioTitleKe !== void 0 ? _payload$ratioTitleKe : oldCrop.ratioTitleKey,

package/lib/actions/set-shown-image-dimensions.js

@@ -3,10 +3,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 export var SET_SHOWN_IMAGE_DIMENSIONS = 'SET_SHOWN_IMAGE_DIMENSIONS';
 var setShownImageDimensions = function setShownImageDimensions(state, payload) {
+  var _payload$designLayer, _payload$previewGroup;
   return _objectSpread(_objectSpread({}, state), {}, {
     shownImageDimensions: _objectSpread(_objectSpread({}, state.shownImageDimensions), payload.shownImageDimensions),
-    designLayer: payload.designLayer || state.designLayer,
-    previewGroup: payload.previewGroup || state.previewGroup
+    designLayer: (_payload$designLayer = payload.designLayer) !== null && _payload$designLayer !== void 0 ? _payload$designLayer : state.designLayer,
+    previewGroup: (_payload$previewGroup = payload.previewGroup) !== null && _payload$previewGroup !== void 0 ? _payload$previewGroup : state.previewGroup
   });
 };
 export default setShownImageDimensions;

package/lib/components/app/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":";AA6WA,wBAAyB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":";AA0aA,wBAAyB"}

package/lib/components/app/index.js

@@ -1,16 +1,18 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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; }
-import { SFlexBox } from '@solostylist/ui-kit/core';
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { SFlexBox } from '@solostylist/ui-kit';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { CircularProgress } from '@mui/material';
 import { HIDE_LOADER, RESET, SET_FEEDBACK, SET_ORIGINAL_IMAGE, SET_SHOWN_TABS_MENU, SHOW_LOADER, UPDATE_STATE } from "../../actions";
 import FeedbackPopup from "../feedback-popup";
 import MainCanvas from "../main-canvas";
 import Tabs from "../tabs";
-import TabsDrawer from "../tabs-drawer";
+import STabsDrawer from "../tabs-drawer";
 import ToolsBar from "../tools-bar";
 import Topbar from "../topbar";
 import { usePhoneScreen, useResizeObserver, useStore, useTransformedImgData } from "../../hooks";
@@ -22,16 +24,14 @@ import isSameImage from "../../utils/is-same-image";
 import loadImage from "../../utils/load-image";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var App = function App() {
-  var _ref2, _ref3;
+  var _ref3, _ref4, _ref5;
   var _useStore = useStore(),
     config = _useStore.config,
     isLoadingGlobally = _useStore.isLoadingGlobally,
     haveNotSavedChanges = _useStore.haveNotSavedChanges,
     dispatch = _useStore.dispatch,
     originalImage = _useStore.originalImage,
-    t = _useStore.t,
-    _useStore$feedback = _useStore.feedback,
-    feedback = _useStore$feedback === void 0 ? {} : _useStore$feedback;
+    t = _useStore.t;
   var loadableDesignState = config.loadableDesignState,
     source = config.source,
     avoidChangesNotSavedAlertOnLeave = config.avoidChangesNotSavedAlertOnLeave,
@@ -41,7 +41,13 @@ var App = function App() {
     getCurrentImgDataFnRef = config.getCurrentImgDataFnRef,
     updateStateFnRef = config.updateStateFnRef,
     noCrossOrigin = config.noCrossOrigin,
-    resetOnImageSourceChange = config.resetOnImageSourceChange;
+    resetOnImageSourceChange = config.resetOnImageSourceChange,
+    containerHeight = config.containerHeight,
+    editorHeight = config.editorHeight,
+    toolbarHeight = config.toolbarHeight,
+    rootSx = config.rootSx,
+    rootClassName = config.rootClassName,
+    renderEmptyState = config.renderEmptyState;
   var showTabsDrawer = window.matchMedia('(max-width: 760px)').matches;
   var _useResizeObserver = useResizeObserver(),
     _useResizeObserver2 = _slicedToArray(_useResizeObserver, 2),
@@ -56,6 +62,7 @@ var App = function App() {
     setRootSize = _useState2[1];
   var isPhoneScreen = usePhoneScreen();
   var pluginRootRef = useRef(null);
+  var uploadInputRef = useRef(null);
   var imageBeingLoadedSrc = useRef(null);
   var haveNotSavedChangesRef = useRef(haveNotSavedChanges);
   var transformImgFn = useTransformedImgData();
@@ -80,7 +87,11 @@ var App = function App() {
   }, []);
   var loadAndSetOriginalImage = function loadAndSetOriginalImage(imgToLoad) {
     return new Promise(function (resolve) {
-      var imgSrc = imgToLoad instanceof HTMLImageElement ? imgToLoad.src : imgToLoad;
+      var imgSrc = imgToLoad instanceof HTMLImageElement ? imgToLoad === null || imgToLoad === void 0 ? void 0 : imgToLoad.src : imgToLoad;
+      if (!imgSrc) {
+        resolve();
+        return;
+      }
       if (imageBeingLoadedSrc.current === imgSrc || !imgSrc && originalImage || isSameImage(imgSrc, originalImage)) {
         if (!imageBeingLoadedSrc.current) {
           resolve();
@@ -96,8 +107,8 @@ var App = function App() {
         if (typeof imgToLoad === 'string') {
           loadImage(imgToLoad, defaultSavedImageName, noCrossOrigin).then(setNewOriginalImage)["catch"](setError)["finally"](triggerResolve);
         } else if (imgToLoad instanceof HTMLImageElement) {
-          if (!imgToLoad.name && defaultSavedImageName) {
-            imgToLoad.name = defaultSavedImageName;
+          if (!imgToLoad.title && defaultSavedImageName) {
+            imgToLoad.title = defaultSavedImageName;
           }
           if (!imgToLoad.complete) {
             imgToLoad.addEventListener('load', function () {
@@ -121,18 +132,50 @@ var App = function App() {
       e.returnValue = '';
     }
   };
-  var handleLoading = function handleLoading() {
-    var loadingPromisesFn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
-      return [];
+  var handleLoading = function () {
+    var _ref = _asyncToGenerator(_regeneratorRuntime.mark(function _callee() {
+      var loadingPromisesFn,
+        _args = arguments;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            loadingPromisesFn = _args.length > 0 && _args[0] !== undefined ? _args[0] : function () {
+              return [];
+            };
+            dispatch({
+              type: SHOW_LOADER
+            });
+            _context.prev = 1;
+            _context.next = 2;
+            return Promise.all(loadingPromisesFn());
+          case 2:
+            _context.prev = 2;
+            dispatch({
+              type: HIDE_LOADER
+            });
+            return _context.finish(2);
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1,, 2, 3]]);
+    }));
+    return function handleLoading() {
+      return _ref.apply(this, arguments);
     };
-    dispatch({
-      type: SHOW_LOADER
-    });
-    return Promise.all(loadingPromisesFn())["finally"](function () {
-      dispatch({
-        type: HIDE_LOADER
-      });
+  }();
+  var handleUploadFiles = function handleUploadFiles(files) {
+    var file = Array.isArray(files) ? files[0] : files === null || files === void 0 ? void 0 : files[0];
+    if (!file) return;
+    var objectUrl = URL.createObjectURL(file);
+    void handleLoading(function () {
+      return [loadAndSetOriginalImage(objectUrl)["finally"](function () {
+        URL.revokeObjectURL(objectUrl);
+      })];
     });
+    if (uploadInputRef.current) {
+      uploadInputRef.current.value = '';
+    }
   };
   var updateDesignStateWithLoadableOne = function updateDesignStateWithLoadableOne() {
     if (loadableDesignState && Object.keys(loadableDesignState).length > 0) {
@@ -151,6 +194,14 @@ var App = function App() {
         return [loadAndSetOriginalImage(source)];
       });
     }
+    if (!source) {
+      dispatch({
+        type: SET_ORIGINAL_IMAGE,
+        payload: {
+          originalImage: undefined
+        }
+      });
+    }
     if (resetOnImageSourceChange) {
       dispatch({
         type: RESET,
@@ -172,9 +223,9 @@ var App = function App() {
   }, [loadableDesignState]);
   useEffect(function () {
     if (observePluginContainerSize && pluginRootRef.current) {
-      observeResize(pluginRootRef.current.parentNode, function (_ref) {
-        var width = _ref.width,
-          height = _ref.height;
+      observeResize(pluginRootRef.current.parentNode, function (_ref2) {
+        var width = _ref2.width,
+          height = _ref2.height;
         return setRootSize({
           width: width,
           height: height
@@ -189,7 +240,8 @@ var App = function App() {
   }, [observePluginContainerSize, observeResize, unobserveElement]);
   useEffect(function () {
     var initialRequestsPromisesFn = function initialRequestsPromisesFn() {
-      return [loadAndSetOriginalImage((loadableDesignState === null || loadableDesignState === void 0 ? void 0 : loadableDesignState.imgSrc) || source)];
+      var _loadableDesignState$;
+      return [loadAndSetOriginalImage((_loadableDesignState$ = loadableDesignState === null || loadableDesignState === void 0 ? void 0 : loadableDesignState.imgSrc) !== null && _loadableDesignState$ !== void 0 ? _loadableDesignState$ : source)];
     };
     void handleLoading(initialRequestsPromisesFn);
     if (window && !avoidChangesNotSavedAlertOnLeave) {
@@ -229,48 +281,66 @@ var App = function App() {
   };
   var renderContent = function renderContent() {
     return _jsxs(_Fragment, {
-      children: [!showCanvasOnly && _jsxs(_Fragment, {
-        children: [showTabsDrawer && _jsx(TabsDrawer, {
+      children: [originalImage && !showCanvasOnly && _jsxs(_Fragment, {
+        children: [showTabsDrawer && _jsx(STabsDrawer, {
           toggleMainMenu: toggleMainMenu
         }), _jsx(Topbar, {
           toggleMainMenu: toggleMainMenu
         })]
-      }), originalImage && feedback.duration !== 0 && _jsxs(SFlexBox, {
+      }), _jsxs(SFlexBox, {
         sx: {
           width: '100%',
-          flexGrow: 1
+          flexGrow: 1,
+          minHeight: 0
         },
         children: [!showCanvasOnly && !showTabsDrawer && _jsx(Tabs, {
           toggleMainMenu: toggleMainMenu
         }), _jsxs(SFlexBox, {
           sx: {
-            height: 'calc(100vh - 60px)',
-            width: 'calc(100% - 120px)',
+            height: '100%',
             flexGrow: 1,
             flexDirection: 'column',
-            minWidth: 0
+            minWidth: 0,
+            minHeight: 0,
+            overflow: 'hidden'
           },
-          children: [_jsx(MainCanvas, {}), !showCanvasOnly && _jsx(ToolsBar, {})]
+          children: [_jsx(SFlexBox, {
+            sx: {
+              flexGrow: 1,
+              minHeight: 0,
+              minWidth: 0,
+              overflow: 'hidden',
+              paddingBottom: 'var(--s-image-editor-toolbar-height, 120px)'
+            },
+            children: originalImage ? _jsx(MainCanvas, {}) : renderEmptyState ? _jsx(_Fragment, {
+              children: renderEmptyState({
+                onUpload: handleUploadFiles
+              })
+            }) : _jsx(_Fragment, {})
+          }), originalImage && !showCanvasOnly && _jsx(ToolsBar, {})]
         })]
       })]
     });
   };
   return _jsxs(SFlexBox, {
-    className: ROOT_CONTAINER_CLASS_NAME,
     "data-phone": isPhoneScreen,
     ref: pluginRootRef,
-    sx: {
-      backgroundColor: 'background.default',
+    className: rootClassName ? "".concat(ROOT_CONTAINER_CLASS_NAME, " ").concat(rootClassName) : ROOT_CONTAINER_CLASS_NAME,
+    sx: _objectSpread({
+      backgroundColor: 'var(--s-palette-background-default, var(--working-background))',
+      backgroundImage: 'radial-gradient(circle at 1px 1px, var(--s-palette-divider) 1px, transparent 0)',
+      backgroundSize: '12px 12px',
       flexDirection: 'column',
       alignItems: 'center',
-      height: (_ref2 = observePluginContainerSize ? rootSize.height : undefined) !== null && _ref2 !== void 0 ? _ref2 : '100%',
-      maxHeight: '100%',
-      width: (_ref3 = observePluginContainerSize ? rootSize.width : undefined) !== null && _ref3 !== void 0 ? _ref3 : '100%',
+      height: (_ref3 = editorHeight !== null && editorHeight !== void 0 ? editorHeight : containerHeight) !== null && _ref3 !== void 0 ? _ref3 : '70vh',
+      maxHeight: (_ref4 = editorHeight !== null && editorHeight !== void 0 ? editorHeight : containerHeight) !== null && _ref4 !== void 0 ? _ref4 : '70vh',
+      width: (_ref5 = observePluginContainerSize ? rootSize.width : undefined) !== null && _ref5 !== void 0 ? _ref5 : '100%',
       maxWidth: '100%',
-      overflow: showTabsDrawer ? 'unset' : 'auto',
+      overflow: 'hidden',
       position: 'relative',
-      minHeight: '100vh'
-    },
+      minHeight: 0,
+      '--s-image-editor-toolbar-height': toolbarHeight !== null && toolbarHeight !== void 0 ? toolbarHeight : '0px'
+    }, rootSx !== null && rootSx !== void 0 ? rootSx : {}),
     children: [isLoadingGlobally && _jsx(CircularProgress, {
       sx: {
         position: 'absolute',

package/lib/components/assembly-point/index.d.ts

@@ -1,8 +1,7 @@
 /** External Dependencies */
 import React from 'react';
 import { ImageEditorConfig } from 'types/config';
-interface AssemblyPointProps extends Omit<ImageEditorConfig, 'source'> {
-    source: string | HTMLImageElement;
+interface AssemblyPointProps extends ImageEditorConfig {
 }
 declare const _default: React.MemoExoticComponent<(props: AssemblyPointProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/lib/components/assembly-point/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/assembly-point/index.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,KAA0B,MAAM,OAAO,CAAC;AAS/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,UAAU,kBAAmB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC;IACpE,MAAM,EAAE,MAAM,GAAG,gBAAgB,CAAC;CACnC;0DAE6B,kBAAkB;AA4BhD,wBAAmC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/assembly-point/index.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,KAA0B,MAAM,OAAO,CAAC;AAS/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,UAAU,kBAAmB,SAAQ,iBAAiB;CAAG;0DAE3B,kBAAkB;AAkBhD,wBAAmC"}

package/lib/components/assembly-point/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, memo } from 'react';
-import { SThemeProvider } from '@solostylist/ui-kit/core';
+import { SThemeProvider } from '@solostylist/ui-kit';
 import App from "../app";
 import { AppProvider } from "../../context";
 import defaultConfig from "../../context/default-config";
@@ -7,10 +7,6 @@ import deepMerge from "../../utils/deep-merge";
 import assignFinetuneNamesToKonva from "../../utils/assign-finetune-names-to-konva";
 import { jsx as _jsx } from "react/jsx-runtime";
 var AssemblyPoint = function AssemblyPoint(props) {
-  var source = props.source;
-  if (!source || typeof source !== 'string' && !(source instanceof HTMLImageElement)) {
-    throw new Error('`source` property is required either a string of image url or a HTMLImageElement for the image that will be edited.');
-  }
   useEffect(function () {
     assignFinetuneNamesToKonva();
   }, []);

package/lib/components/common/annotation-options/index.js

@@ -11,7 +11,7 @@ import Menu from '@mui/material/Menu';
 import Typography from '@mui/material/Typography';
 import { useStore } from "../../../hooks";
 import { useCallback, useMemo, useState } from 'react';
-import { SFlexBox } from '@solostylist/ui-kit/core';
+import { SFlexBox } from '@solostylist/ui-kit';
 import ColorInput from "../color-input";
 import SIconButtonWrapper from "../icon-wrapper";
 import { POPPABLE_OPTIONS } from "./annotation-options.constants";
@@ -70,8 +70,8 @@ var AnnotationOptions = function AnnotationOptions(_ref) {
   }, [moreOptionsPopupComponentsObj, morePoppableOptionsAppended]);
   var toggleOptionPopup = useCallback(function (e, targetOptionName) {
     var targetAnchorEl = e === null || e === void 0 ? void 0 : e.currentTarget;
-    setAnchorEl(targetAnchorEl || null);
-    setCurrentOption(targetOptionName || null);
+    setAnchorEl(targetAnchorEl !== null && targetAnchorEl !== void 0 ? targetAnchorEl : null);
+    setCurrentOption(targetOptionName !== null && targetOptionName !== void 0 ? targetOptionName : null);
   }, []);
   var changeAnnotationFill = useCallback(function (newFill) {
     updateAnnotation({

package/lib/components/common/annotation-options/shadow-fields.js

@@ -31,7 +31,7 @@ var ShadowFields = function ShadowFields(_ref) {
       onChange: function onChange(val) {
         return changeSliderValue('shadowOffsetX', val, -100, 100);
       },
-      value: shadowOffsetX || 0
+      value: shadowOffsetX !== null && shadowOffsetX !== void 0 ? shadowOffsetX : 0
     }), _jsx(Slider, {
       label: t('vertical'),
       annotation: "px",
@@ -40,7 +40,7 @@ var ShadowFields = function ShadowFields(_ref) {
       onChange: function onChange(val) {
         return changeSliderValue('shadowOffsetY', val, -100, 100);
       },
-      value: shadowOffsetY || 0
+      value: shadowOffsetY !== null && shadowOffsetY !== void 0 ? shadowOffsetY : 0
     }), _jsx(Slider, {
       label: t('blur'),
       annotation: "%",

package/lib/components/common/color-picker-modal/index.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import Box from '@mui/material/Box';
-import { SButton, SDialog, STextField } from '@solostylist/ui-kit/core';
+import { SButton, SDialog, STextField } from '@solostylist/ui-kit';
 import { useCallback, useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import { useStore } from "../../../hooks";

package/lib/components/common/icon-wrapper/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "active", "border", "onClick", "title", "className"];
 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; }
-import { SIconButton } from '@solostylist/ui-kit/core';
+import { SIconButton } from '@solostylist/ui-kit';
 import { jsx as _jsx } from "react/jsx-runtime";
 var SIconButtonWrapper = function SIconButtonWrapper(_ref) {
   var children = _ref.children,

package/lib/components/common/image-preview-tile/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["src", "alt", "onClick", "selected", "size", "sx"];
 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; }
-import { SFlexBox } from '@solostylist/ui-kit/core';
+import { SFlexBox } from '@solostylist/ui-kit';
 import { jsx as _jsx } from "react/jsx-runtime";
 var ImagePreviewTile = function ImagePreviewTile(_ref) {
   var src = _ref.src,

package/lib/components/common/slider/index.js

@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 import MuiSlider from '@mui/material/Slider';
 import { Box, Typography } from '@mui/material';
-import { SFlexBox } from '@solostylist/ui-kit/core';
+import { SFlexBox } from '@solostylist/ui-kit';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var Slider = function Slider(_ref) {
   var annotation = _ref.annotation,
@@ -31,13 +31,13 @@ var Slider = function Slider(_ref) {
           return _onChange ? _onChange(val) : undefined;
         },
         sx: {
-          width: width || '200px',
-          maxWidth: width || '200px'
+          width: width !== null && width !== void 0 ? width : '200px',
+          maxWidth: width !== null && width !== void 0 ? width : '200px'
         },
         value: value
       }, props)), _jsx(Typography, {
         variant: "body2",
-        children: "".concat(value).concat(annotation || '')
+        children: "".concat(value).concat(annotation !== null && annotation !== void 0 ? annotation : '')
       })]
     })]
   });

package/lib/components/feedback-popup/index.js

@@ -11,7 +11,7 @@ var defaultAnchorOrigin = {
 };
 var ERROR_TO_SEVERITY = _defineProperty(_defineProperty({}, FEEDBACK_STATUSES.ERROR, 'error'), FEEDBACK_STATUSES.WARNING, 'warning');
 var FeedbackPopup = function FeedbackPopup(_ref) {
-  var _feedback$duration;
+  var _feedback$duration, _feedback$status;
   var _ref$anchorOrigin = _ref.anchorOrigin,
     anchorOrigin = _ref$anchorOrigin === void 0 ? defaultAnchorOrigin : _ref$anchorOrigin;
   var _useStore = useStore(),
@@ -36,7 +36,7 @@ var FeedbackPopup = function FeedbackPopup(_ref) {
     onClose: onClose,
     children: _jsx(Alert, {
       onClose: onClose,
-      severity: ERROR_TO_SEVERITY[feedback.status || FEEDBACK_STATUSES.ERROR],
+      severity: ERROR_TO_SEVERITY[(_feedback$status = feedback.status) !== null && _feedback$status !== void 0 ? _feedback$status : FEEDBACK_STATUSES.ERROR],
       children: feedback.message
     })
   });

package/lib/components/layers/design-layer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layers/design-layer/index.tsx"],"names":[],"mappings":"AAqBA,QAAA,MAAM,WAAW,sDAyRhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layers/design-layer/index.tsx"],"names":[],"mappings":"AAqBA,QAAA,MAAM,WAAW,sDA+RhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/layers/design-layer/index.js

@@ -94,16 +94,16 @@ var DesignLayer = function DesignLayer() {
     };
   }, [canvasScale, xPointToCenterImgInCanvas, yPointToCenterImgInCanvas, xPointNoResizeNoCrop, yPointNoResizeNoCrop, scaledSpacedOriginalImg]);
   var clipFunc = function clipFunc(ctx) {
-    var _designLayerRef$curre;
+    var _designLayerRef$curre, _crop$width2, _crop$height2, _crop$x, _crop$y;
     var isCroppingAndNotSaving = isCurrentlyCropping && !((_designLayerRef$curre = designLayerRef.current) !== null && _designLayerRef$curre !== void 0 && (_designLayerRef$curre = _designLayerRef$curre.attrs) !== null && _designLayerRef$curre !== void 0 && _designLayerRef$curre.isSaving);
     var clipBox = isCroppingAndNotSaving || crop.noEffect ? _objectSpread(_objectSpread({}, imageDimensions), {}, {
       x: 0,
       y: 0
     }) : {
-      width: crop.width || imageDimensions.width,
-      height: crop.height || imageDimensions.height,
-      x: crop.x || 0,
-      y: crop.y || 0
+      width: (_crop$width2 = crop.width) !== null && _crop$width2 !== void 0 ? _crop$width2 : imageDimensions.width,
+      height: (_crop$height2 = crop.height) !== null && _crop$height2 !== void 0 ? _crop$height2 : imageDimensions.height,
+      x: (_crop$x = crop.x) !== null && _crop$x !== void 0 ? _crop$x : 0,
+      y: (_crop$y = crop.y) !== null && _crop$y !== void 0 ? _crop$y : 0
     };
     cropImage(ctx, _objectSpread({
       ratio: crop.ratio
@@ -136,7 +136,7 @@ var DesignLayer = function DesignLayer() {
     };
   }, [originalImage]);
   useEffect(function () {
-    if (imageDimensions) {
+    if (imageDimensions && previewGroupRef.current) {
       dispatch({
         type: SET_SHOWN_IMAGE_DIMENSIONS,
         payload: {
@@ -146,8 +146,8 @@ var DesignLayer = function DesignLayer() {
         }
       });
     }
-  }, [imageDimensions]);
-  if (!xPointToCenterImgInCanvas || !yPointToCenterImgInCanvas || !imageDimensions) {
+  }, [imageDimensions, dispatch]);
+  if (typeof xPointToCenterImgInCanvas !== 'number' || isNaN(xPointToCenterImgInCanvas) || typeof yPointToCenterImgInCanvas !== 'number' || isNaN(yPointToCenterImgInCanvas) || !imageDimensions) {
     return null;
   }
   var cropCenterRotatedPoint = getCenterRotatedPoint(crop.x, crop.y, rotation);
@@ -157,6 +157,9 @@ var DesignLayer = function DesignLayer() {
   var yPoint = isCurrentlyCropping ? yPointNoResizeNoCrop : yPointAfterCrop;
   var finalScaleX = (isCurrentlyCropping ? 1 : resizedX) * scaleAfterRotation;
   var finalScaleY = (isCurrentlyCropping ? 1 : resizedY) * scaleAfterRotation;
+  if (!originalImage || !originalImage.width || !originalImage.height) {
+    return null;
+  }
   return _jsxs(Layer, {
     id: DESIGN_LAYER_ID,
     ref: designLayerRef,

package/lib/components/layers/transformers-layer/crop-transformer.js

@@ -15,6 +15,7 @@ var noEffectTextDimensions = {
   height: 100
 };
 var CropTransformer = function CropTransformer() {
+  var _crop$ratio;
   var _useStore = useStore(),
     dispatch = _useStore.dispatch,
     theme = _useStore.theme,
@@ -43,7 +44,7 @@ var CropTransformer = function CropTransformer() {
     });
   }, [crop.lockCropAreaAt, cropConfig]);
   var lockCropAreaAt = cropSettings.lockCropAreaAt;
-  var cropRatio = crop.ratio || cropSettings.ratio;
+  var cropRatio = (_crop$ratio = crop.ratio) !== null && _crop$ratio !== void 0 ? _crop$ratio : cropSettings.ratio;
   var isCustom = cropRatio === CUSTOM_CROP;
   var isEllipse = cropRatio === ELLIPSE_CROP;
   var getProperCropRatio = function getProperCropRatio() {
@@ -186,7 +187,7 @@ var CropTransformer = function CropTransformer() {
   };
   return _jsxs(_Fragment, {
     children: [_jsx(Image, {
-      image: originalImage,
+      image: originalImage !== null && originalImage !== void 0 ? originalImage : undefined,
       x: isFlippedX ? shownImageDimensions.width : 0,
       y: isFlippedY ? shownImageDimensions.height : 0,
       width: shownImageDimensions.width,

package/lib/components/layers/transformers-layer/index.js

@@ -5,13 +5,14 @@ import CropTransformer from "./crop-transformer";
 import NodesTransformer from "./nodes-transformer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var TransformersLayer = function TransformersLayer() {
+  var _shownImageDimensions, _shownImageDimensions2;
   var _useStore = useStore(),
     toolId = _useStore.toolId,
     shownImageDimensions = _useStore.shownImageDimensions;
   return _jsxs(Layer, {
     id: TRANSFORMERS_LAYER_ID,
-    x: shownImageDimensions.abstractX || 0,
-    y: shownImageDimensions.abstractY || 0,
+    x: (_shownImageDimensions = shownImageDimensions.abstractX) !== null && _shownImageDimensions !== void 0 ? _shownImageDimensions : 0,
+    y: (_shownImageDimensions2 = shownImageDimensions.abstractY) !== null && _shownImageDimensions2 !== void 0 ? _shownImageDimensions2 : 0,
     children: [_jsx(NodesTransformer, {}), toolId === TOOLS_IDS.CROP && _jsx(CropTransformer, {})]
   });
 };

package/lib/components/main-canvas/canvas-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-node.d.ts","sourceRoot":"","sources":["../../../src/components/main-canvas/canvas-node.tsx"],"names":[],"mappings":"AAuBA,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;2EAEiC,eAAe;AA2NjD,wBAAgC"}
+{"version":3,"file":"canvas-node.d.ts","sourceRoot":"","sources":["../../../src/components/main-canvas/canvas-node.tsx"],"names":[],"mappings":"AAuBA,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;2EAEiC,eAAe;AA8NjD,wBAAgC"}