@solostylist/image-editor 1.0.12 → 1.0.14

package/lib/components/tools/ellipse/ellipse-options.d.ts

@@ -0,0 +1,4 @@
+/** External Dependencies */
+declare const EllipseOptions: () => import("react/jsx-runtime").JSX.Element;
+export default EllipseOptions;
+//# sourceMappingURL=ellipse-options.d.ts.map

package/lib/components/tools/ellipse/ellipse-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ellipse-options.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/ellipse/ellipse-options.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAQ5B,QAAA,MAAM,cAAc,+CAQnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useAnnotation } from "../../../hooks";
 import { TOOLS_IDS } from "../../../utils/constants";
 import AnnotationOptions from "../../common/annotation-options";
+import { jsx as _jsx } from "react/jsx-runtime";
 var EllipseOptions = function EllipseOptions() {
   var _useAnnotation = useAnnotation({
       name: TOOLS_IDS.ELLIPSE
@@ -9,7 +10,7 @@ var EllipseOptions = function EllipseOptions() {
     _useAnnotation2 = _slicedToArray(_useAnnotation, 2),
     ellipse = _useAnnotation2[0],
     saveEllipse = _useAnnotation2[1];
-  return React.createElement(AnnotationOptions, {
+  return _jsx(AnnotationOptions, {
     annotation: ellipse,
     updateAnnotation: saveEllipse
   });

package/lib/components/tools/ellipse/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EllipseButton } from './ellipse-button';
+export { default as EllipseOptions } from './ellipse-options';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/tools/ellipse/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/ellipse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

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

@@ -0,0 +1,11 @@
+import { Filter } from 'konva/lib/Node';
+interface FilterItemProps {
+    filterLabel: string;
+    filterFn?: Filter | null;
+    applyFilter: (filterFn: any) => void;
+    isActive: boolean;
+    image: HTMLImageElement | null;
+}
+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

@@ -0,0 +1 @@
+{"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,8 @@ 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;
 var FilterItem = function FilterItem(_ref) {
@@ -13,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);
@@ -38,7 +42,7 @@ var FilterItem = function FilterItem(_ref) {
   var isWiderThanStage = imgRatio > stageRatio;
   var filterImgPreviewWidth = isWiderThanStage ? MAX_FILTER_PREVIEW_HEIGHT * imgRatio : MAX_FILTER_PREVIEW_WIDTH;
   var filterImgPreviewHeight = isWiderThanStage ? MAX_FILTER_PREVIEW_HEIGHT : MAX_FILTER_PREVIEW_WIDTH / imgRatio;
-  return React.createElement(SFlexBox, {
+  return _jsxs(SFlexBox, {
     onClick: handleFilterApplying,
     "aria-selected": isActive,
     sx: {
@@ -47,31 +51,35 @@ var FilterItem = function FilterItem(_ref) {
       justifyContent: 'center',
       gap: 0.5,
       cursor: 'pointer'
-    }
-  }, React.createElement(Stage, {
-    width: MAX_FILTER_PREVIEW_WIDTH,
-    height: MAX_FILTER_PREVIEW_HEIGHT,
-    style: _objectSpread({
-      padding: 1
-    }, isActive && {
-      borderRadius: 2,
-      border: '1px solid',
-      borderColor: 'divider'
-    })
-  }, React.createElement(Layer, {
-    onTap: handleFilterApplying
-  }, React.createElement(Image, {
-    image: image,
-    filters: filterFn ? [filterFn] : [],
-    width: filterImgPreviewWidth,
-    height: filterImgPreviewHeight,
-    x: -(filterImgPreviewWidth - MAX_FILTER_PREVIEW_WIDTH) / 2,
-    y: -(filterImgPreviewHeight - MAX_FILTER_PREVIEW_HEIGHT) / 2,
-    ref: imageNodeRef
-  }))), React.createElement(Typography, {
-    whiteSpace: "nowrap",
-    textAlign: "center",
-    fontSize: "0.875rem"
-  }, filterLabel));
+    },
+    children: [_jsx(Stage, {
+      width: MAX_FILTER_PREVIEW_WIDTH,
+      height: MAX_FILTER_PREVIEW_HEIGHT,
+      style: _objectSpread({
+        padding: 1
+      }, isActive && {
+        borderRadius: 2,
+        border: '1px solid',
+        borderColor: 'divider'
+      }),
+      children: _jsx(Layer, {
+        onTap: handleFilterApplying,
+        children: _jsx(Image, {
+          image: image,
+          filters: filterFn ? [filterFn] : [],
+          width: filterImgPreviewWidth,
+          height: filterImgPreviewHeight,
+          x: -(filterImgPreviewWidth - MAX_FILTER_PREVIEW_WIDTH) / 2,
+          y: -(filterImgPreviewHeight - MAX_FILTER_PREVIEW_HEIGHT) / 2,
+          ref: imageNodeRef
+        })
+      })
+    }), _jsx(Typography, {
+      whiteSpace: "nowrap",
+      textAlign: "center",
+      fontSize: "0.875rem",
+      children: filterLabel
+    })]
+  });
 };
 export default memo(FilterItem);

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

@@ -0,0 +1,8 @@
+import { Filter } from 'konva/lib/Node';
+interface FilterItem {
+    label: string;
+    filterFn: Filter | null;
+}
+export declare const AVAILABLE_FILTERS: FilterItem[];
+export {};
+//# sourceMappingURL=filters.constants.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -4,6 +4,7 @@ import { SCarousel } from '@solostylist/ui-kit/carousel';
 import { useFilter, useStore } from "../../../hooks";
 import FilterItem from "./filter-item";
 import { AVAILABLE_FILTERS } from "./filters.constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 var responsiveSettings = [{
   breakpoint: 1600,
   settings: {
@@ -41,34 +42,41 @@ 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(),
     _useFilter2 = _slicedToArray(_useFilter, 2),
     appliedFilter = _useFilter2[0],
     applyFilter = _useFilter2[1];
-  return React.createElement(Box, {
+  return _jsx(Box, {
     sx: {
       width: '100%',
+      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '80vw',
       flex: '1 1 100%',
       display: 'block',
       minWidth: 0,
-      overflow: 'hidden'
-    }
-  }, React.createElement(SCarousel, {
-    slidesToShow: 16,
-    slidesToScroll: 8,
-    responsive: responsiveSettings
-  }, AVAILABLE_FILTERS.map(function (filter) {
-    return React.createElement(FilterItem, {
-      key: filter.label,
-      filterLabel: filter.label,
-      filterFn: filter.filterFn,
-      applyFilter: applyFilter,
-      isActive: appliedFilter === filter.filterFn,
-      image: originalImage
-    });
-  })));
+      overflow: 'visible',
+      position: 'relative',
+      '&  .slick-arrow': {
+        color: 'var(--s-palete-text-secondary)'
+      }
+    },
+    children: _jsx(SCarousel, {
+      slidesToShow: 16,
+      slidesToScroll: 8,
+      responsive: responsiveSettings,
+      children: AVAILABLE_FILTERS.map(function (filter) {
+        return _jsx(FilterItem, {
+          filterLabel: filter.label,
+          filterFn: filter.filterFn,
+          applyFilter: applyFilter,
+          isActive: appliedFilter === filter.filterFn,
+          image: originalImage !== null && originalImage !== void 0 ? originalImage : null
+        }, filter.label);
+      })
+    })
+  });
 };
 export default Filters;

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

@@ -0,0 +1,2 @@
+export { default as Filters } from './filters';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/filters/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/lib/components/tools/flip/flip-x.d.ts

@@ -0,0 +1,8 @@
+interface FlipXProps {
+    selectTool: (toolId: string) => void;
+    isSelected?: boolean;
+    t: (key: string) => string;
+}
+declare const FlipX: ({ selectTool, isSelected, t }: FlipXProps) => import("react/jsx-runtime").JSX.Element;
+export default FlipX;
+//# sourceMappingURL=flip-x.d.ts.map

package/lib/components/tools/flip/flip-x.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-x.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/flip/flip-x.tsx"],"names":[],"mappings":"AAUA,UAAU,UAAU;IAClB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,KAAK,GAAI,+BAAuC,UAAU,4CAwC/D,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/tools/flip/flip-x.js

@@ -4,6 +4,7 @@ import { TOGGLE_FLIP } from "../../../actions";
 import ToolsBarItemButton from "../../tools-bar/tools-bar-item-button";
 import { useStore } from "../../../hooks";
 import { FLIP_DIRECTIONS, TOOLS_IDS } from "../../../utils/constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 var FlipX = function FlipX(_ref) {
   var selectTool = _ref.selectTool,
     _ref$isSelected = _ref.isSelected,
@@ -34,7 +35,7 @@ var FlipX = function FlipX(_ref) {
     if (flipXToolId) selectTool(flipXToolId);
     toggleFlipX();
   }, []);
-  return React.createElement(ToolsBarItemButton, {
+  return _jsx(ToolsBarItemButton, {
     id: TOOLS_IDS.FLIP_X,
     label: label,
     Icon: FlipOutlined,

package/lib/components/tools/flip/flip-y.d.ts

@@ -0,0 +1,8 @@
+interface FlipYProps {
+    selectTool: (toolId: string) => void;
+    isSelected?: boolean;
+    t: (key: string) => string;
+}
+declare const FlipY: ({ selectTool, isSelected, t }: FlipYProps) => import("react/jsx-runtime").JSX.Element;
+export default FlipY;
+//# sourceMappingURL=flip-y.d.ts.map

package/lib/components/tools/flip/flip-y.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-y.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/flip/flip-y.tsx"],"names":[],"mappings":"AAUA,UAAU,UAAU;IAClB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,KAAK,GAAI,+BAAuC,UAAU,4CA4C/D,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/tools/flip/flip-y.js

@@ -4,6 +4,7 @@ import { TOGGLE_FLIP } from "../../../actions";
 import ToolsBarItemButton from "../../tools-bar/tools-bar-item-button";
 import { useStore } from "../../../hooks";
 import { FLIP_DIRECTIONS, TOOLS_IDS } from "../../../utils/constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 var FlipY = function FlipY(_ref) {
   var selectTool = _ref.selectTool,
     _ref$isSelected = _ref.isSelected,
@@ -36,7 +37,7 @@ var FlipY = function FlipY(_ref) {
     if (flipYToolId) selectTool(flipYToolId);
     toggleFlipY();
   }, []);
-  return React.createElement(ToolsBarItemButton, {
+  return _jsx(ToolsBarItemButton, {
     id: TOOLS_IDS.FLIP_Y,
     label: label,
     Icon: FlipOutlined,

package/lib/components/tools/flip/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FlipX } from './flip-x';
+export { default as FlipY } from './flip-y';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/tools/flip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/flip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,UAAU,CAAC"}

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

@@ -0,0 +1,8 @@
+interface HSVProps {
+    selectTool: () => void;
+    isSelected?: boolean;
+    t: (key: string) => string;
+}
+declare const HSV: ({ selectTool, isSelected, t }: HSVProps) => import("react/jsx-runtime").JSX.Element;
+export default HSV;
+//# sourceMappingURL=hsv.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hsv.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/hsv/hsv.tsx"],"names":[],"mappings":"AAOA,UAAU,QAAQ;IAChB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,GAAG,GAAI,+BAAuC,QAAQ,4CAU3D,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/lib/components/tools/hsv/hsv.js

@@ -1,12 +1,13 @@
 import { GradientOutlined as SaturationIcon } from '@mui/icons-material';
 import ToolsBarItemButton from "../../tools-bar/tools-bar-item-button";
 import { TOOLS_IDS } from "../../../utils/constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 var HSV = function HSV(_ref) {
   var selectTool = _ref.selectTool,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     t = _ref.t;
-  return React.createElement(ToolsBarItemButton, {
+  return _jsx(ToolsBarItemButton, {
     id: TOOLS_IDS.HSV,
     label: t('hsvTool'),
     Icon: SaturationIcon,

package/lib/components/tools/hsv/hsvoptions.d.ts

@@ -0,0 +1,6 @@
+interface HSVOptionsProps {
+    t: (key: string) => string;
+}
+declare const HSVOptions: ({ t }: HSVOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export default HSVOptions;
+//# sourceMappingURL=hsvoptions.d.ts.map

package/lib/components/tools/hsv/hsvoptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hsvoptions.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/hsv/hsvoptions.tsx"],"names":[],"mappings":"AAoBA,UAAU,eAAe;IACvB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,UAAU,GAAI,OAAO,eAAe,4CA0CzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/tools/hsv/hsvoptions.js

@@ -4,6 +4,7 @@ import Konva from 'konva';
 import { Box } from '@mui/material';
 import Slider from "../../common/slider";
 import { useFinetune } from "../../../hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_VALUE = {
   hue: 0,
   saturation: 0,
@@ -24,37 +25,38 @@ var HSVOptions = function HSVOptions(_ref) {
   var changeValue = function changeValue(name, value) {
     setFinetuneProps(_defineProperty({}, name, value > MAX_VALUE[name] ? MAX_VALUE[name] : +value));
   };
-  return React.createElement(Box, {
+  return _jsxs(Box, {
     display: "flex",
     justifyContent: "center",
-    gap: 2
-  }, React.createElement(Slider, {
-    label: t('hue'),
-    min: 0,
-    step: 1,
-    max: 259,
-    value: (_finetuneProps$hue = finetuneProps.hue) !== null && _finetuneProps$hue !== void 0 ? _finetuneProps$hue : DEFAULT_VALUE.hue,
-    onChange: function onChange(val) {
-      return changeValue('hue', val);
-    }
-  }), React.createElement(Slider, {
-    label: t('saturation'),
-    min: -2,
-    step: 0.5,
-    max: 10,
-    value: (_finetuneProps$satura = finetuneProps.saturation) !== null && _finetuneProps$satura !== void 0 ? _finetuneProps$satura : DEFAULT_VALUE.saturation,
-    onChange: function onChange(val) {
-      return changeValue('saturation', val);
-    }
-  }), React.createElement(Slider, {
-    label: t('value'),
-    min: -2,
-    step: 0.1,
-    max: 2,
-    value: (_finetuneProps$value = finetuneProps.value) !== null && _finetuneProps$value !== void 0 ? _finetuneProps$value : DEFAULT_VALUE.value,
-    onChange: function onChange(val) {
-      return changeValue('value', val);
-    }
-  }));
+    gap: 2,
+    children: [_jsx(Slider, {
+      label: t('hue'),
+      min: 0,
+      step: 1,
+      max: 259,
+      value: (_finetuneProps$hue = finetuneProps.hue) !== null && _finetuneProps$hue !== void 0 ? _finetuneProps$hue : DEFAULT_VALUE.hue,
+      onChange: function onChange(val) {
+        return changeValue('hue', val);
+      }
+    }), _jsx(Slider, {
+      label: t('saturation'),
+      min: -2,
+      step: 0.5,
+      max: 10,
+      value: (_finetuneProps$satura = finetuneProps.saturation) !== null && _finetuneProps$satura !== void 0 ? _finetuneProps$satura : DEFAULT_VALUE.saturation,
+      onChange: function onChange(val) {
+        return changeValue('saturation', val);
+      }
+    }), _jsx(Slider, {
+      label: t('value'),
+      min: -2,
+      step: 0.1,
+      max: 2,
+      value: (_finetuneProps$value = finetuneProps.value) !== null && _finetuneProps$value !== void 0 ? _finetuneProps$value : DEFAULT_VALUE.value,
+      onChange: function onChange(val) {
+        return changeValue('value', val);
+      }
+    })]
+  });
 };
 export default HSVOptions;

package/lib/components/tools/hsv/index.d.ts

@@ -0,0 +1,3 @@
+export { default as HSV } from './hsv';
+export { default as HSVOptions } from './hsvoptions';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/tools/hsv/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/hsv/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/tools/image/image-button.d.ts

@@ -0,0 +1,8 @@
+interface ImageButtonProps {
+    selectTool: () => void;
+    isSelected?: boolean;
+    t: (key: string) => string;
+}
+declare const ImageButton: ({ selectTool, isSelected, t, }: ImageButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageButton;
+//# sourceMappingURL=image-button.d.ts.map

package/lib/components/tools/image/image-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-button.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/image/image-button.tsx"],"names":[],"mappings":"AAOA,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,WAAW,GAAI,gCAIlB,gBAAgB,4CAUlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,12 +1,13 @@
 import { ImageOutlined as ImageIcon } from '@mui/icons-material';
 import ToolsBarItemButton from "../../tools-bar/tools-bar-item-button";
 import { TOOLS_IDS } from "../../../utils/constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 var ImageButton = function ImageButton(_ref) {
   var selectTool = _ref.selectTool,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     t = _ref.t;
-  return React.createElement(ToolsBarItemButton, {
+  return _jsx(ToolsBarItemButton, {
     id: TOOLS_IDS.IMAGE,
     label: t('imageTool'),
     Icon: ImageIcon,

package/lib/components/tools/image/image-controls.d.ts

@@ -0,0 +1,13 @@
+/** External Dependencies */
+import { Annotation, ImageAnnotation } from 'types/annotations';
+interface ImageControlsProps {
+    image: ImageAnnotation | Partial<ImageAnnotation> | (ImageAnnotation & {
+        shouldSave?: boolean;
+        neverSave?: boolean;
+    });
+    saveImage: (updates: Partial<Annotation>) => void;
+    children?: React.ReactNode;
+}
+declare const ImageControls: ({ image, saveImage, children }: ImageControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageControls;
+//# sourceMappingURL=image-controls.d.ts.map

package/lib/components/tools/image/image-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-controls.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/image/image-controls.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAI5B,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEhE,UAAU,kBAAkB;IAE1B,KAAK,EACD,eAAe,GACf,OAAO,CAAC,eAAe,CAAC,GACxB,CAAC,eAAe,GAAG;QAAE,UAAU,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACtE,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,aAAa,GAAI,gCAAgC,kBAAkB,4CAUxE,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -1,12 +1,14 @@
 import AnnotationOptions from "../../common/annotation-options";
+import { jsx as _jsx } from "react/jsx-runtime";
 var ImageControls = function ImageControls(_ref) {
   var image = _ref.image,
     saveImage = _ref.saveImage,
     children = _ref.children;
-  return React.createElement(AnnotationOptions, {
+  return _jsx(AnnotationOptions, {
     annotation: image,
     updateAnnotation: saveImage,
-    hideFillOption: true
-  }, children);
+    hideFillOption: true,
+    children: children
+  });
 };
 export default ImageControls;

package/lib/components/tools/image/image-options.d.ts

@@ -0,0 +1,3 @@
+declare const ImageOptions: () => import("react/jsx-runtime").JSX.Element;
+export default ImageOptions;
+//# sourceMappingURL=image-options.d.ts.map

package/lib/components/tools/image/image-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-options.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/image/image-options.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,YAAY,+CAuLjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -8,6 +8,7 @@ import HiddenUploadInput from "../../common/hidden-upload-input";
 import ButtonWithMenu from "../../common/button-with-menu";
 import ImageControls from "./image-controls";
 import ImagesGallery from "./images-gallery";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var ADDED_IMG_SPACING_PERCENT = 0.15;
 var ImageOptions = function ImageOptions() {
   var _useState = useState(),
@@ -38,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,
@@ -140,23 +142,24 @@ var ImageOptions = function ImageOptions() {
       onClick: openGalleryPanel
     }];
   }, [imageConfig, isLoading, t]);
-  return React.createElement(ImageControls, {
+  return _jsxs(ImageControls, {
     image: image,
-    saveImage: saveImage
-  }, React.createElement(ButtonWithMenu, {
-    label: t('addImage'),
-    menuItems: menuItems,
-    buttonRef: menuItemsBtnRef
-  }), isUploadEnabled && React.createElement(HiddenUploadInput, {
-    ref: uploadImgsInput,
-    onChange: isLoading ? undefined : importImages,
-    disabled: isLoading,
-    multiple: true
-  }), isGalleryEnabled && React.createElement(ImagesGallery, {
-    gallery: imageConfig.gallery,
-    onSelect: importImgFromGallery,
-    onClose: closeGalleryPanel,
-    anchorEl: galleryPopover.anchorEl
-  }));
+    saveImage: saveImage,
+    children: [_jsx(ButtonWithMenu, {
+      label: t('addImage'),
+      menuItems: menuItems,
+      buttonRef: menuItemsBtnRef
+    }), isUploadEnabled && _jsx(HiddenUploadInput, {
+      ref: uploadImgsInput,
+      onChange: isLoading ? undefined : importImages,
+      disabled: isLoading,
+      multiple: true
+    }), isGalleryEnabled && _jsx(ImagesGallery, {
+      gallery: imageConfig.gallery,
+      onSelect: importImgFromGallery,
+      onClose: closeGalleryPanel,
+      anchorEl: galleryPopover.anchorEl
+    })]
+  });
 };
 export default ImageOptions;

package/lib/components/tools/image/images-gallery.d.ts

@@ -0,0 +1,14 @@
+/** External Dependencies */
+interface GalleryItem {
+    originalUrl: string;
+    previewUrl: string;
+}
+interface ImagesGalleryProps {
+    gallery?: GalleryItem[];
+    anchorEl?: HTMLElement | null;
+    onClose: () => void;
+    onSelect: (originalUrl: string) => void;
+}
+declare const ImagesGallery: ({ gallery, anchorEl, onClose, onSelect, }: ImagesGalleryProps) => import("react/jsx-runtime").JSX.Element;
+export default ImagesGallery;
+//# sourceMappingURL=images-gallery.d.ts.map

package/lib/components/tools/image/images-gallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"images-gallery.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/image/images-gallery.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAO5B,UAAU,WAAW;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,QAAA,MAAM,aAAa,GAAI,2CAKpB,kBAAkB,4CAwCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}