@solostylist/image-editor 1.0.13 → 1.0.15

package/lib/components/tabs-drawer/index.js

@@ -1,13 +1,15 @@
 import { useCallback, useMemo } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
 import Box from '@mui/material/Box';
 import SwipeableDrawer from '@mui/material/SwipeableDrawer';
 import ButtonBase from '@mui/material/ButtonBase';
 import Typography from '@mui/material/Typography';
+import { SIconButton } from '@solostylist/ui-kit';
 import { useStore } from "../../hooks";
 import { SELECT_TAB } from "../../actions";
 import { AVAILABLE_TABS } from "../tabs/tabs.constants";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var TabsDrawer = function TabsDrawer(_ref) {
+var STabsDrawer = function STabsDrawer(_ref) {
   var _ref$toggleMainMenu = _ref.toggleMainMenu,
     toggleMainMenu = _ref$toggleMainMenu === void 0 ? function () {} : _ref$toggleMainMenu;
   var _useStore = useStore(),
@@ -19,10 +21,10 @@ var TabsDrawer = function TabsDrawer(_ref) {
     _useStore$config = _useStore.config,
     defaultTabId = _useStore$config.defaultTabId,
     tabsIds = _useStore$config.tabsIds;
-  var currentTabId = tabId || defaultTabId;
+  var currentTabId = tabId !== null && tabId !== void 0 ? tabId : defaultTabId;
   var chosenTabs = useMemo(function () {
     var tabs = [];
-    var tabsIdsArray = Array.isArray(tabsIds) ? tabsIds : Object.keys(tabsIds || {});
+    var tabsIdsArray = Array.isArray(tabsIds) ? tabsIds : Object.keys(tabsIds !== null && tabsIds !== void 0 ? tabsIds : {});
     if (tabsIdsArray.length > 0) {
       AVAILABLE_TABS.forEach(function (tab) {
         var index = tabsIdsArray.indexOf(tab.id);
@@ -59,57 +61,78 @@ var TabsDrawer = function TabsDrawer(_ref) {
     disableSwipeToOpen: true,
     sx: {
       '& .MuiDrawer-paper': {
+        maxHeight: '90vh',
         borderRadius: '16px 16px 0 0',
-        maxHeight: '50vh',
-        pb: 2
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: 'background.paper',
+        backgroundImage: 'none'
       }
     },
-    children: [_jsx(Box, {
+    children: [_jsxs(Box, {
       sx: {
         display: 'flex',
-        justifyContent: 'center',
-        py: 2
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        px: 3,
+        py: 2,
+        borderBottom: 1,
+        borderColor: 'divider',
+        backgroundColor: 'background.paper'
       },
-      children: _jsx(Box, {
-        sx: {
-          width: 36,
-          height: 4,
-          borderRadius: 2,
-          bgcolor: 'action.disabled'
-        }
-      })
+      children: [_jsx(Typography, {
+        variant: "h4",
+        className: "gradient-text",
+        children: t('tabs')
+      }), _jsx(SIconButton, {
+        onClick: function onClick() {
+          return toggleMainMenu(false);
+        },
+        "aria-label": t('close'),
+        children: _jsx(CloseIcon, {})
+      })]
     }), _jsx(Box, {
       sx: {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(3, 1fr)',
-        gap: 1,
+        flex: 1,
+        overflow: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: 'background.paper',
         px: 2,
-        pb: 1
+        py: 2
       },
-      children: chosenTabs.map(function (tab) {
-        var isActive = currentTabId === tab.id;
-        var Icon = tab.icon;
-        return _jsxs(ButtonBase, {
-          onClick: function onClick() {
-            return selectTab(tab.id);
-          },
-          sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: 0.5,
-            py: 2,
-            borderRadius: 2,
-            bgcolor: isActive ? 'primary.main' : 'action.hover',
-            color: isActive ? 'primary.contrastText' : 'text.primary',
-            transition: 'all 0.15s ease'
-          },
-          children: [_jsx(Icon, {}), _jsx(Typography, {
-            children: t(tab.labelKey)
-          })]
-        }, tab.id);
+      children: _jsx(Box, {
+        sx: {
+          display: 'grid',
+          gridTemplateColumns: 'repeat(3, 1fr)',
+          gap: 1
+        },
+        children: chosenTabs.map(function (tab) {
+          var isActive = currentTabId === tab.id;
+          var Icon = tab.icon;
+          return _jsxs(ButtonBase, {
+            onClick: function onClick() {
+              return selectTab(tab.id);
+            },
+            sx: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 0.5,
+              py: 2,
+              borderRadius: 2,
+              bgcolor: isActive ? 'primary.main' : 'action.hover',
+              color: isActive ? 'primary.contrastText' : 'text.primary',
+              transition: 'all 0.15s ease'
+            },
+            children: [_jsx(Icon, {}), _jsx(Typography, {
+              children: t(tab.labelKey)
+            })]
+          }, tab.id);
+        })
       })
     })]
   });
 };
-export default TabsDrawer;
+export default STabsDrawer;

package/lib/components/tools/crop/crop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crop.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/crop/crop.tsx"],"names":[],"mappings":"AAcA,UAAU,SAAS;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,QAAA,MAAM,IAAI,GAAI,4BAAoC,SAAS,mDA8G1D,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"crop.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/crop/crop.tsx"],"names":[],"mappings":"AAcA,UAAU,SAAS;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,QAAA,MAAM,IAAI,GAAI,4BAAoC,SAAS,mDAgH1D,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/tools/crop/crop.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { CropOutlined as CropIcon } from '@mui/icons-material';
 import { Box, InputAdornment } from '@mui/material';
 import { useMemo } from 'react';
-import { SSelect } from '@solostylist/ui-kit/core';
+import { SSelect } from '@solostylist/ui-kit';
 import { SET_CROP, SET_RESIZE, ZOOM_CANVAS } from "../../../actions";
 import { useStore } from "../../../hooks";
 import { DEFAULT_ZOOM_FACTOR, ORIGINAL_CROP, TOOLS_IDS } from "../../../utils/constants";
@@ -24,7 +24,7 @@ var Crop = function Crop(_ref) {
     appliedRatio = _useStore$adjustments4.ratio,
     shownImageDimensions = _useStore.shownImageDimensions,
     config = _useStore.config;
-  var currentRatio = appliedRatio || ORIGINAL_CROP;
+  var currentRatio = appliedRatio !== null && appliedRatio !== void 0 ? appliedRatio : ORIGINAL_CROP;
   var cropConfig = config[TOOLS_IDS.CROP];
   var allPresets = useMemo(function () {
     var _cropConfig$presetsIt;
@@ -45,7 +45,7 @@ var Crop = function Crop(_ref) {
   var options = useMemo(function () {
     return allPresets.map(function (preset) {
       return {
-        label: "".concat(t(preset.titleKey)).concat(preset.descriptionKey ? " (".concat(preset.descriptionKey, ")") : ''),
+        label: t(preset.titleKey) + (preset.descriptionKey ? " (".concat(preset.descriptionKey, ")") : ''),
         value: String(getPresetRatio(preset))
       };
     });

package/lib/components/tools/filters/filter-item.d.ts

@@ -1,10 +1,11 @@
+import { Filter } from 'konva/lib/Node';
 interface FilterItemProps {
     filterLabel: string;
-    filterFn?: ((...args: any[]) => void) | null;
+    filterFn?: Filter | null;
     applyFilter: (filterFn: any) => void;
     isActive: boolean;
-    image: HTMLImageElement;
+    image: HTMLImageElement | null;
 }
-declare const _default: import("react").MemoExoticComponent<({ filterLabel, filterFn, applyFilter, isActive, image, }: FilterItemProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ filterLabel, filterFn, applyFilter, isActive, image, }: FilterItemProps) => import("react/jsx-runtime").JSX.Element | null>;
 export default _default;
 //# sourceMappingURL=filter-item.d.ts.map

package/lib/components/tools/filters/filter-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/filters/filter-item.tsx"],"names":[],"mappings":"AAWA,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,gBAAgB,CAAC;CACzB;uHAQE,eAAe;AA8ElB,wBAAgC"}
+{"version":3,"file":"filter-item.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/filters/filter-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AASxC,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAChC;uHAQE,eAAe;AAkFlB,wBAAgC"}

package/lib/components/tools/filters/filter-item.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { memo, useCallback, useEffect, useRef } from 'react';
 import { Layer, Image, Stage } from 'react-konva';
 import { 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 MAX_FILTER_PREVIEW_WIDTH = 80;
 var MAX_FILTER_PREVIEW_HEIGHT = 60;
@@ -14,6 +14,9 @@ var FilterItem = function FilterItem(_ref) {
     applyFilter = _ref.applyFilter,
     isActive = _ref.isActive,
     image = _ref.image;
+  if (!image) {
+    return null;
+  }
   var imageNodeRef = useRef(null);
   var handleFilterApplying = useCallback(function () {
     applyFilter(filterFn);

package/lib/components/tools/filters/filters.constants.d.ts

@@ -1,7 +1,7 @@
-type FilterFn = any;
+import { Filter } from 'konva/lib/Node';
 interface FilterItem {
     label: string;
-    filterFn: FilterFn;
+    filterFn: Filter | null;
 }
 export declare const AVAILABLE_FILTERS: FilterItem[];
 export {};

package/lib/components/tools/filters/filters.constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters.constants.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/filters/filters.constants.ts"],"names":[],"mappings":"AAMA,KAAK,QAAQ,GAAG,GAAG,CAAC;AAEpB,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAGD,eAAO,MAAM,iBAAiB,EAAE,UAAU,EAqLzC,CAAC"}
+{"version":3,"file":"filters.constants.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/filters/filters.constants.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAGD,eAAO,MAAM,iBAAiB,EAAE,UAAU,EAqLzC,CAAC"}

package/lib/components/tools/filters/filters.d.ts

@@ -1,3 +1,6 @@
-declare const Filters: () => import("react/jsx-runtime").JSX.Element;
+interface FiltersProps {
+    maxWidth?: string | number;
+}
+declare const Filters: ({ maxWidth }: FiltersProps) => import("react/jsx-runtime").JSX.Element;
 export default Filters;
 //# sourceMappingURL=filters.d.ts.map

package/lib/components/tools/filters/filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/filters/filters.tsx"],"names":[],"mappings":"AAuCA,QAAA,MAAM,OAAO,+CAkCZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/filters/filters.tsx"],"names":[],"mappings":"AAuCA,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,OAAO,GAAI,cAAc,YAAY,4CAuC1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/tools/filters/filters.js

@@ -42,7 +42,8 @@ var responsiveSettings = [{
     slidesToScroll: 2
   }
 }];
-var Filters = function Filters() {
+var Filters = function Filters(_ref) {
+  var maxWidth = _ref.maxWidth;
   var _useStore = useStore(),
     originalImage = _useStore.originalImage;
   var _useFilter = useFilter(),
@@ -52,10 +53,15 @@ var Filters = function Filters() {
   return _jsx(Box, {
     sx: {
       width: '100%',
+      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '80vw',
       flex: '1 1 100%',
       display: 'block',
       minWidth: 0,
-      overflow: 'hidden'
+      overflow: 'visible',
+      position: 'relative',
+      '&  .slick-arrow': {
+        color: 'var(--s-palete-text-secondary)'
+      }
     },
     children: _jsx(SCarousel, {
       slidesToShow: 16,
@@ -67,7 +73,7 @@ var Filters = function Filters() {
           filterFn: filter.filterFn,
           applyFilter: applyFilter,
           isActive: appliedFilter === filter.filterFn,
-          image: originalImage
+          image: originalImage !== null && originalImage !== void 0 ? originalImage : null
         }, filter.label);
       })
     })

package/lib/components/tools/image/image-options.js

@@ -39,10 +39,11 @@ var ImageOptions = function ImageOptions() {
     addNewImage = _useAnnotation2[2];
   var requestedImgsCount = useRef(0);
   var addImgScaled = function addImgScaled(loadedImg) {
-    var layerWidth = crop.width || shownImageDimensions.width;
-    var layerHeight = crop.height || shownImageDimensions.height;
-    var layerCropX = crop.x || 0;
-    var layerCropY = crop.y || 0;
+    var _crop$width, _crop$height, _crop$x, _crop$y;
+    var layerWidth = (_crop$width = crop.width) !== null && _crop$width !== void 0 ? _crop$width : shownImageDimensions.width;
+    var layerHeight = (_crop$height = crop.height) !== null && _crop$height !== void 0 ? _crop$height : shownImageDimensions.height;
+    var layerCropX = (_crop$x = crop.x) !== null && _crop$x !== void 0 ? _crop$x : 0;
+    var layerCropY = (_crop$y = crop.y) !== null && _crop$y !== void 0 ? _crop$y : 0;
     var newImgRatio = Math.min(1, layerWidth / (loadedImg.width + loadedImg.width * ADDED_IMG_SPACING_PERCENT), layerHeight / (loadedImg.height + loadedImg.height * ADDED_IMG_SPACING_PERCENT));
     addNewImage({
       image: loadedImg,

package/lib/components/tools/image/images-gallery.js

@@ -1,5 +1,5 @@
 import { Popover } from '@mui/material';
-import { SFlexBox } from '@solostylist/ui-kit/core';
+import { SFlexBox } from '@solostylist/ui-kit';
 import ImagePreviewTile from "../../common/image-preview-tile";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ImagesGallery = function ImagesGallery(_ref) {

package/lib/components/tools/pen/pen-options.js

@@ -36,18 +36,19 @@ var PenOptions = function PenOptions() {
     id: ''
   });
   var getPointerPosition = useCallback(function () {
+    var _designLayer$attrs$xP, _designLayer$attrs$yP;
     var canvasBoundingRect = getElemDocumentCoords(canvasRef.current.content);
     var pos = getPointerOffsetPositionBoundedToObject(previewGroup, canvasBoundingRect);
-    return [pos.offsetX - (designLayer.attrs.xPadding || 0), pos.offsetY - (designLayer.attrs.yPadding || 0)];
+    return [pos.offsetX - ((_designLayer$attrs$xP = designLayer.attrs.xPadding) !== null && _designLayer$attrs$xP !== void 0 ? _designLayer$attrs$xP : 0), pos.offsetY - ((_designLayer$attrs$yP = designLayer.attrs.yPadding) !== null && _designLayer$attrs$yP !== void 0 ? _designLayer$attrs$yP : 0)];
   }, [designLayer]);
   var handlePointerMove = useCallback(function () {
     var _updatedPen$current;
     if (!((_updatedPen$current = updatedPen.current) !== null && _updatedPen$current !== void 0 && _updatedPen$current.moved)) {
-      var _updatedPen$current2;
+      var _updatedPen$current$p, _updatedPen$current2;
       updatedPen.current = {
         moved: true,
         id: randomId(TOOLS_IDS.PEN),
-        points: [].concat(_toConsumableArray(((_updatedPen$current2 = updatedPen.current) === null || _updatedPen$current2 === void 0 ? void 0 : _updatedPen$current2.points) || []), _toConsumableArray(getPointerPosition()))
+        points: [].concat(_toConsumableArray((_updatedPen$current$p = (_updatedPen$current2 = updatedPen.current) === null || _updatedPen$current2 === void 0 ? void 0 : _updatedPen$current2.points) !== null && _updatedPen$current$p !== void 0 ? _updatedPen$current$p : []), _toConsumableArray(getPointerPosition()))
       };
       savePenNoDebounce({
         id: updatedPen.current.id,

package/lib/components/tools/resize/resize.d.ts

@@ -8,6 +8,6 @@ interface ResizeProps {
     currentSize?: CurrentSize;
     hideResetButton?: boolean;
 }
-declare const Resize: ({ onChange, currentSize, hideResetButton, }: ResizeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Resize: ({ onChange, currentSize, hideResetButton, }: ResizeProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Resize;
 //# sourceMappingURL=resize.d.ts.map

package/lib/components/tools/resize/resize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/resize/resize.tsx"],"names":[],"mappings":"AAaA,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,QAAA,MAAM,MAAM,GAAI,6CAIb,WAAW,4CAqLb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/resize/resize.tsx"],"names":[],"mappings":"AAaA,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,QAAA,MAAM,MAAM,GAAI,6CAIb,WAAW,mDAyLb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/tools/resize/resize.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { Refresh, LockOutlined, LockOpenOutlined } from '@mui/icons-material';
-import { SFlexBox, SIconButton, STextField } from '@solostylist/ui-kit/core';
+import { SFlexBox, SIconButton, STextField } from '@solostylist/ui-kit';
 import { SET_RESIZE, ZOOM_CANVAS } from "../../../actions";
 import { useStore } from "../../../hooks";
 import { DEFAULT_ZOOM_FACTOR } from "../../../utils/constants";
@@ -27,6 +27,9 @@ var Resize = function Resize(_ref) {
     _useStore$adjustments2 = _useStore$adjustments.rotation,
     rotation = _useStore$adjustments2 === void 0 ? 0 : _useStore$adjustments2,
     t = _useStore.t;
+  if (!originalImage) {
+    return null;
+  }
   var dimensions = getProperDimensions(((currentSize === null || currentSize === void 0 ? void 0 : currentSize.width) || (currentSize === null || currentSize === void 0 ? void 0 : currentSize.height)) && currentSize || resize, crop, shownImageDimensions, originalImage, rotation);
   var changeResize = function changeResize(e) {
     var _currentSize$ratioUnl;
@@ -105,7 +108,7 @@ var Resize = function Resize(_ref) {
   return _jsxs(SFlexBox, {
     sx: {
       gap: 1,
-      alignItems: 'flex-end'
+      alignItems: 'center'
     },
     children: [_jsx(STextField, {
       name: "width",

package/lib/components/tools/rotate/rotate-options.js

@@ -6,7 +6,7 @@ import restrictNumber from "../../../utils/restrict-number";
 import getSizeAfterRotation from "../../../utils/get-size-after-rotation";
 import { TOOLS_IDS } from "../../../utils/constants";
 import ToolsBarItemButton from "../../tools-bar/tools-bar-item-button";
-import { SFlexBox, SIconButton } from '@solostylist/ui-kit/core';
+import { SFlexBox, SIconButton } from '@solostylist/ui-kit';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var RotateOptions = function RotateOptions() {
   var _useStore = useStore(),

package/lib/components/tools/text/text-options/handle-text-change-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"handle-text-change-area.d.ts","sourceRoot":"","sources":["../../../../../src/components/tools/text/text-options/handle-text-change-area.ts"],"names":[],"mappings":"AAMA,iBAAS,oBAAoB,IAAI,IAAI,CAwBpC;AAWD,QAAA,MAAM,kBAAkB,GACtB,YAAY,MAAM,EAClB,aAAa,GAAG,EAChB,oBAAoB,GAAG,EACvB,mBAAmB,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,EAC9C,uBAAuB,MAAM,IAAI,KAChC,IAyHF,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"handle-text-change-area.d.ts","sourceRoot":"","sources":["../../../../../src/components/tools/text/text-options/handle-text-change-area.ts"],"names":[],"mappings":"AAMA,iBAAS,oBAAoB,IAAI,IAAI,CAoBpC;AAWD,QAAA,MAAM,kBAAkB,GACtB,YAAY,MAAM,EAClB,aAAa,GAAG,EAChB,oBAAoB,GAAG,EACvB,mBAAmB,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,EAC9C,uBAAuB,MAAM,IAAI,KAChC,IAyHF,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,CAAC"}

package/lib/components/tools/text/text-options/text-alignment-fields.js

@@ -1,5 +1,5 @@
 import { FormatAlignCenterOutlined, FormatAlignLeftOutlined } from '@mui/icons-material';
-import { SFlexBox } from '@solostylist/ui-kit/core';
+import { SFlexBox } from '@solostylist/ui-kit';
 import SIconButtonWrapper from "../../../common/icon-wrapper";
 import { TextAlignment } from "../../../../types/annotations";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/lib/components/tools/text/text-options/text-controls.js

@@ -9,11 +9,12 @@ import SIconButtonWrapper from "../../../common/icon-wrapper";
 import { ENABLE_TEXT_CONTENT_EDIT } from "../../../../actions";
 import restrictNumber from "../../../../utils/restrict-number";
 import { useStore } from "../../../../hooks";
-import { SFlexBox, SSelect, STextField } from '@solostylist/ui-kit/core';
+import { SFlexBox, SSelect, STextField } from '@solostylist/ui-kit';
 import { textOptionsPopupComponents, TEXT_POPPABLE_OPTIONS } from "./text-options.constants";
 import { activateTextChange, deactivateTextChange } from "./handle-text-change-area";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var TextControls = function TextControls(_ref) {
+  var _config$TOOLS_IDS$TEX, _text$fontSize, _text$fontStyle2, _text$fontStyle3;
   var text = _ref.text,
     saveText = _ref.saveText,
     children = _ref.children;
@@ -23,7 +24,7 @@ var TextControls = function TextControls(_ref) {
     designLayer = _useStore.designLayer,
     t = _useStore.t,
     config = _useStore.config;
-  var textConfig = config[TOOLS_IDS.TEXT] || {};
+  var textConfig = (_config$TOOLS_IDS$TEX = config[TOOLS_IDS.TEXT]) !== null && _config$TOOLS_IDS$TEX !== void 0 ? _config$TOOLS_IDS$TEX : {};
   var _textConfig$fonts = textConfig.fonts,
     fonts = _textConfig$fonts === void 0 ? [] : _textConfig$fonts,
     onFontChange = textConfig.onFontChange;
@@ -90,7 +91,8 @@ var TextControls = function TextControls(_ref) {
       var canvasStage = designLayer.getStage();
       var transformersLayer = canvasStage.findOne("#".concat(TRANSFORMERS_LAYER_ID));
       if (transformersLayer) {
-        var _ref3 = transformersLayer.children || [];
+        var _transformersLayer$ch;
+        var _ref3 = (_transformersLayer$ch = transformersLayer.children) !== null && _transformersLayer$ch !== void 0 ? _transformersLayer$ch : [];
         var _ref4 = _slicedToArray(_ref3, 1);
         transformer = _ref4[0];
         activateTextChange(textIdOfEditableContent, canvasStage, transformer, changeTextContent, disableTextEdit);
@@ -124,7 +126,7 @@ var TextControls = function TextControls(_ref) {
           textAlign: 'left'
         }
       }), _jsx(STextField, {
-        value: text.fontSize || '',
+        value: (_text$fontSize = text.fontSize) !== null && _text$fontSize !== void 0 ? _text$fontSize : '',
         name: "fontSize",
         onChange: changeTextProps,
         inputMode: "numeric",
@@ -134,13 +136,13 @@ var TextControls = function TextControls(_ref) {
         },
         placeholder: t('size')
       }), _jsx(SIconButtonWrapper, {
-        active: (text.fontStyle || '').includes('bold'),
+        active: ((_text$fontStyle2 = text.fontStyle) !== null && _text$fontStyle2 !== void 0 ? _text$fontStyle2 : '').includes('bold'),
         onClick: function onClick() {
           return changeFontStyle('bold');
         },
         children: _jsx(FormatBoldOutlined, {})
       }), _jsx(SIconButtonWrapper, {
-        active: (text.fontStyle || '').includes('italic'),
+        active: ((_text$fontStyle3 = text.fontStyle) !== null && _text$fontStyle3 !== void 0 ? _text$fontStyle3 : '').includes('italic'),
         onClick: function onClick() {
           return changeFontStyle('italic');
         },

package/lib/components/tools/tools.constants.d.ts

@@ -1,7 +1,7 @@
 interface ToolItem {
     id: string;
-    Item: any;
-    ItemOptions?: any;
+    Item: React.ComponentType<any>;
+    ItemOptions?: React.ComponentType<any>;
 }
 export declare const TOOLS_ITEMS: Record<string, ToolItem>;
 export declare const TABS_TOOLS: Record<string, string[]>;

package/lib/components/tools/tools.constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tools.constants.d.ts","sourceRoot":"","sources":["../../../src/components/tools/tools.constants.ts"],"names":[],"mappings":"AAsBA,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,GAAG,CAAC;IACV,WAAW,CAAC,EAAE,GAAG,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CA+FhD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CA2B/C,CAAC"}
+{"version":3,"file":"tools.constants.d.ts","sourceRoot":"","sources":["../../../src/components/tools/tools.constants.ts"],"names":[],"mappings":"AAsBA,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CA+FhD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CA2B/C,CAAC"}

package/lib/components/tools/watermark/watermark-padding.js

@@ -7,6 +7,7 @@ import Slider from "../../common/slider";
 import restrictNumber from "../../../utils/restrict-number";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var WatermarkPadding = function WatermarkPadding(_ref) {
+  var _watermark$padding;
   var watermark = _ref.watermark,
     saveWatermark = _ref.saveWatermark,
     t = _ref.t;
@@ -25,7 +26,7 @@ var WatermarkPadding = function WatermarkPadding(_ref) {
       padding: restrictNumber(newPadding, 0, 100)
     });
   };
-  var currentPadding = watermark.padding || 0;
+  var currentPadding = (_watermark$padding = watermark.padding) !== null && _watermark$padding !== void 0 ? _watermark$padding : 0;
   return _jsxs(_Fragment, {
     children: [_jsx(SIconButtonWrapper, {
       title: t('padding'),

package/lib/components/tools/watermark/watermark.js

@@ -3,7 +3,7 @@ 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 { FileUploadOutlined, TextFieldsOutlined } from '@mui/icons-material';
-import { SFlexBox } from '@solostylist/ui-kit/core';
+import { SFlexBox } from '@solostylist/ui-kit';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { CLEAR_ANNOTATIONS_SELECTIONS, SELECT_ANNOTATION, SET_ANNOTATION, SET_FEEDBACK } from "../../../actions";
 import ButtonWithMenu from "../../common/button-with-menu";
@@ -18,6 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 var WATERMARK_IMG_RATIO_FROM_ORIGINAL = 0.33;
 var WATERMARK_ANNOTATION_ID = 'watermark';
 var Watermark = function Watermark() {
+  var _crop$width, _crop$height, _crop$x, _crop$y, _watermarkConfig$text, _watermarkConfig$imag;
   var _useStore = useStore(),
     annotations = _useStore.annotations,
     shownImageDimensions = _useStore.shownImageDimensions,
@@ -36,12 +37,12 @@ var Watermark = function Watermark() {
   var watermark = useMemo(function () {
     return annotations[WATERMARK_ANNOTATION_ID];
   }, [annotations[WATERMARK_ANNOTATION_ID]]);
-  var layerWidth = crop.width || shownImageDimensions.width;
-  var layerHeight = crop.height || shownImageDimensions.height;
-  var layerCropX = crop.x || 0;
-  var layerCropY = crop.y || 0;
-  var watermarkTextRatio = (watermarkConfig === null || watermarkConfig === void 0 ? void 0 : watermarkConfig.textScalingRatio) || WATERMARK_IMG_RATIO_FROM_ORIGINAL;
-  var watermarkImageRatio = (watermarkConfig === null || watermarkConfig === void 0 ? void 0 : watermarkConfig.imageScalingRatio) || WATERMARK_IMG_RATIO_FROM_ORIGINAL;
+  var layerWidth = (_crop$width = crop.width) !== null && _crop$width !== void 0 ? _crop$width : shownImageDimensions.width;
+  var layerHeight = (_crop$height = crop.height) !== null && _crop$height !== void 0 ? _crop$height : shownImageDimensions.height;
+  var layerCropX = (_crop$x = crop.x) !== null && _crop$x !== void 0 ? _crop$x : 0;
+  var layerCropY = (_crop$y = crop.y) !== null && _crop$y !== void 0 ? _crop$y : 0;
+  var watermarkTextRatio = (_watermarkConfig$text = watermarkConfig === null || watermarkConfig === void 0 ? void 0 : watermarkConfig.textScalingRatio) !== null && _watermarkConfig$text !== void 0 ? _watermarkConfig$text : WATERMARK_IMG_RATIO_FROM_ORIGINAL;
+  var watermarkImageRatio = (_watermarkConfig$imag = watermarkConfig === null || watermarkConfig === void 0 ? void 0 : watermarkConfig.imageScalingRatio) !== null && _watermarkConfig$imag !== void 0 ? _watermarkConfig$imag : WATERMARK_IMG_RATIO_FROM_ORIGINAL;
   var addTextWatermark = function addTextWatermark() {
     var _dimensions$width, _dimensions$height;
     var dimensions = {};
@@ -209,7 +210,7 @@ var Watermark = function Watermark() {
       children: renderWatermarkPadding()
     }), _jsxs(SFlexBox, {
       gap: 1,
-      mt: 1,
+      flexGrow: 1,
       children: [_jsx(ButtonWithMenu, {
         label: addWatermarkLabel(),
         menuItems: menuItems

package/lib/components/tools-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tools-bar/index.tsx"],"names":[],"mappings":"AAUA,QAAA,MAAM,QAAQ,+CAqIb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tools-bar/index.tsx"],"names":[],"mappings":"AAeA,QAAA,MAAM,QAAQ,+CA4Kb,CAAC;AAEF,eAAe,QAAQ,CAAC"}