@solostylist/image-editor 1.0.12 → 1.0.14

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";
@@ -20,17 +22,16 @@ import filterStrToClass from "../../utils/filter-str-to-class";
 import finetunesStrsToClasses from "../../utils/finetunes-strs-to-classes";
 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,
@@ -40,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),
@@ -55,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();
@@ -79,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();
@@ -95,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 () {
@@ -120,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) {
@@ -150,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,
@@ -171,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
@@ -188,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) {
@@ -227,57 +280,82 @@ var App = function App() {
     });
   };
   var renderContent = function renderContent() {
-    return React.createElement(React.Fragment, null, !showCanvasOnly && React.createElement(React.Fragment, null, showTabsDrawer && React.createElement(TabsDrawer, {
-      toggleMainMenu: toggleMainMenu
-    }), React.createElement(Topbar, {
-      toggleMainMenu: toggleMainMenu
-    })), originalImage && feedback.duration !== 0 && React.createElement(SFlexBox, {
-      sx: {
-        width: '100%',
-        flexGrow: 1
-      }
-    }, !showCanvasOnly && !showTabsDrawer && React.createElement(Tabs, {
-      toggleMainMenu: toggleMainMenu
-    }), React.createElement(SFlexBox, {
-      sx: {
-        height: 'calc(100vh - 60px)',
-        width: 'calc(100% - 120px)',
-        flexGrow: 1,
-        flexDirection: 'column',
-        minWidth: 0
-      }
-    }, React.createElement(MainCanvas, null), !showCanvasOnly && React.createElement(ToolsBar, null))));
+    return _jsxs(_Fragment, {
+      children: [originalImage && !showCanvasOnly && _jsxs(_Fragment, {
+        children: [showTabsDrawer && _jsx(STabsDrawer, {
+          toggleMainMenu: toggleMainMenu
+        }), _jsx(Topbar, {
+          toggleMainMenu: toggleMainMenu
+        })]
+      }), _jsxs(SFlexBox, {
+        sx: {
+          width: '100%',
+          flexGrow: 1,
+          minHeight: 0
+        },
+        children: [!showCanvasOnly && !showTabsDrawer && _jsx(Tabs, {
+          toggleMainMenu: toggleMainMenu
+        }), _jsxs(SFlexBox, {
+          sx: {
+            height: '100%',
+            flexGrow: 1,
+            flexDirection: 'column',
+            minWidth: 0,
+            minHeight: 0,
+            overflow: 'hidden'
+          },
+          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 React.createElement(SFlexBox, {
-    className: ROOT_CONTAINER_CLASS_NAME,
+  return _jsxs(SFlexBox, {
     "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'
-    }
-  }, isLoadingGlobally && React.createElement(CircularProgress, {
-    sx: {
-      position: 'absolute',
-      zIndex: 11111,
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      userSelect: 'none'
-    }
-  }), renderContent(), React.createElement(FeedbackPopup, {
-    anchorOrigin: {
-      vertical: 'top',
-      horizontal: 'center'
-    }
-  }));
+      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',
+        zIndex: 11111,
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        userSelect: 'none'
+      }
+    }), renderContent(), _jsx(FeedbackPopup, {
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      }
+    })]
+  });
 };
 export default memo(App);

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

@@ -0,0 +1,8 @@
+/** External Dependencies */
+import React from 'react';
+import { ImageEditorConfig } from 'types/config';
+interface AssemblyPointProps extends ImageEditorConfig {
+}
+declare const _default: React.MemoExoticComponent<(props: AssemblyPointProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,iBAAiB;CAAG;0DAE3B,kBAAkB;AAkBhD,wBAAmC"}

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

@@ -1,23 +1,24 @@
 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";
 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();
   }, []);
   var defaultAndProvidedConfigMerged = deepMerge(defaultConfig, props);
-  return React.createElement(React.StrictMode, null, React.createElement(SThemeProvider, {
-    defaultMode: "dark"
-  }, React.createElement(AppProvider, {
-    config: defaultAndProvidedConfigMerged
-  }, React.createElement(App, null))));
+  return _jsx(React.StrictMode, {
+    children: _jsx(SThemeProvider, {
+      defaultMode: "dark",
+      children: _jsx(AppProvider, {
+        config: defaultAndProvidedConfigMerged,
+        children: _jsx(App, {})
+      })
+    })
+  });
 };
 export default memo(AssemblyPoint);

package/lib/components/common/annotation-options/annotation-options.constants.d.ts

@@ -0,0 +1,9 @@
+export declare const AVAILABLE_POSITIONS: string[];
+export declare const posCssRotateDegFromRightSide: Record<string, number>;
+export declare const POPPABLE_OPTIONS: {
+    readonly OPACITY: "opacity";
+    readonly STROKE: "stroke";
+    readonly SHADOW: "shadow";
+    readonly POSITION: "position";
+};
+//# sourceMappingURL=annotation-options.constants.d.ts.map

package/lib/components/common/annotation-options/annotation-options.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotation-options.constants.d.ts","sourceRoot":"","sources":["../../../../src/components/common/annotation-options/annotation-options.constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB,EAAE,MAAM,EAA6B,CAAC;AAEtE,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAU/D,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;CAKnB,CAAC"}

package/lib/components/common/annotation-options/index.d.ts

@@ -0,0 +1,21 @@
+import { Annotation } from 'types/annotations';
+interface PoppableOption {
+    titleKey: string;
+    name: string;
+    Icon: React.ComponentType;
+}
+interface AnnotationOptionsProps {
+    annotation: Annotation;
+    updateAnnotation: (updates: Partial<Annotation>) => void;
+    children?: React.ReactNode;
+    hideFillOption?: boolean;
+    morePoppableOptionsPrepended?: PoppableOption[];
+    morePoppableOptionsAppended?: PoppableOption[];
+    moreOptionsPopupComponentsObj?: Record<string, React.ComponentType<any>>;
+    hidePositionField?: boolean;
+    className?: string;
+    [key: string]: any;
+}
+declare const AnnotationOptions: ({ children, morePoppableOptionsPrepended, moreOptionsPopupComponentsObj, morePoppableOptionsAppended, annotation, updateAnnotation, hideFillOption, hidePositionField, ...rest }: AnnotationOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export default AnnotationOptions;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/common/annotation-options/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/common/annotation-options/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAY/C,UAAU,cAAc;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;CAC3B;AAED,UAAU,sBAAsB;IAC9B,UAAU,EAAE,UAAU,CAAC;IACvB,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4BAA4B,CAAC,EAAE,cAAc,EAAE,CAAC;IAChD,2BAA2B,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/C,6BAA6B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;IACzE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,QAAA,MAAM,iBAAiB,GAAI,kLAUxB,sBAAsB,4CAgJxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -12,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";
@@ -20,6 +19,7 @@ import OpacityField from "./opacity-field";
 import PositionFields from "./position-fields";
 import ShadowFields from "./shadow-fields";
 import StrokeFields from "./stroke-fields";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var AnnotationOptions = function AnnotationOptions(_ref) {
   var _ref$children = _ref.children,
     children = _ref$children === void 0 ? undefined : _ref$children,
@@ -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({
@@ -80,61 +80,67 @@ var AnnotationOptions = function AnnotationOptions(_ref) {
   }, [updateAnnotation]);
   var OptionPopupComponent = anchorEl && currentOption && optionsPopups[currentOption];
   var renderPositionFields = function renderPositionFields() {
-    return React.createElement(React.Fragment, null, React.createElement(Typography, {
-      variant: "subtitle2",
-      mb: 1
-    }, t('position')), React.createElement(Box, {
-      sx: {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, auto)'
-      }
-    }, React.createElement(OptionPopupComponent, _extends({
-      annotation: annotation,
-      updateAnnotation: updateAnnotation,
-      t: t
-    }, rest))));
+    return _jsxs(_Fragment, {
+      children: [_jsx(Typography, {
+        variant: "subtitle2",
+        mb: 1,
+        children: t('position')
+      }), _jsx(Box, {
+        sx: {
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4, auto)'
+        },
+        children: _jsx(OptionPopupComponent, _objectSpread({
+          annotation: annotation,
+          updateAnnotation: updateAnnotation,
+          t: t
+        }, rest))
+      })]
+    });
   };
-  return React.createElement(SFlexBox, {
+  return _jsxs(SFlexBox, {
     alignItems: "center",
     justifyContent: "center",
-    gap: 1
-  }, !hideFillOption && React.createElement(ColorInput, {
-    color: annotation.fill,
-    onChange: changeAnnotationFill,
-    colorFor: "fill"
-  }), children, options.map(function (option) {
-    return option && React.createElement(SIconButtonWrapper, {
-      key: option.name,
-      title: t(option.titleKey),
-      onClick: function onClick(e) {
-        return toggleOptionPopup(e, option.name);
+    gap: 1,
+    children: [!hideFillOption && _jsx(ColorInput, {
+      color: annotation.fill,
+      onChange: changeAnnotationFill,
+      colorFor: "fill"
+    }), children, options.map(function (option) {
+      return option && _jsx(SIconButtonWrapper, {
+        title: t(option.titleKey),
+        onClick: function onClick(e) {
+          return toggleOptionPopup(e, option.name);
+        },
+        active: currentOption === option.name,
+        children: _jsx(option.Icon, {})
+      }, option.name);
+    }), OptionPopupComponent && _jsx(Menu, {
+      anchorEl: anchorEl,
+      open: Boolean(anchorEl),
+      onClose: toggleOptionPopup,
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
       },
-      active: currentOption === option.name
-    }, React.createElement(option.Icon, null));
-  }), OptionPopupComponent && React.createElement(Menu, {
-    anchorEl: anchorEl,
-    open: Boolean(anchorEl),
-    onClose: toggleOptionPopup,
-    anchorOrigin: {
-      vertical: 'top',
-      horizontal: 'center'
-    },
-    transformOrigin: {
-      vertical: 'bottom',
-      horizontal: 'center'
-    },
-    slotProps: {
-      paper: {
-        sx: {
-          px: 2,
-          py: 1
+      transformOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      },
+      slotProps: {
+        paper: {
+          sx: {
+            px: 2,
+            py: 1
+          }
         }
-      }
-    }
-  }, currentOption === POPPABLE_OPTIONS.POSITION ? renderPositionFields() : React.createElement(OptionPopupComponent, _extends({
-    annotation: annotation,
-    updateAnnotation: updateAnnotation,
-    t: t
-  }, rest))));
+      },
+      children: currentOption === POPPABLE_OPTIONS.POSITION ? renderPositionFields() : _jsx(OptionPopupComponent, _objectSpread({
+        annotation: annotation,
+        updateAnnotation: updateAnnotation,
+        t: t
+      }, rest))
+    })]
+  });
 };
 export default AnnotationOptions;

package/lib/components/common/annotation-options/opacity-field.d.ts

@@ -0,0 +1,10 @@
+/** Internal Dependencies */
+import { AnnotationsCommon } from 'types';
+interface OpacityFieldProps {
+    annotation: AnnotationsCommon;
+    updateAnnotation: (updates: Partial<AnnotationsCommon>) => void;
+    t: (key: string) => string;
+}
+declare const OpacityField: ({ annotation, updateAnnotation, t, }: OpacityFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default OpacityField;
+//# sourceMappingURL=opacity-field.d.ts.map

package/lib/components/common/annotation-options/opacity-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"opacity-field.d.ts","sourceRoot":"","sources":["../../../../src/components/common/annotation-options/opacity-field.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO1C,UAAU,iBAAiB;IACzB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAChE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,YAAY,GAAI,sCAInB,iBAAiB,4CAsBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/common/annotation-options/opacity-field.js

@@ -1,5 +1,6 @@
 import restrictNumber from "../../../utils/restrict-number";
 import Slider from "../slider";
+import { jsx as _jsx } from "react/jsx-runtime";
 var MIN_PERCENTANGE = 0;
 var MAX_PERCENTANGE = 1;
 var OpacityField = function OpacityField(_ref) {
@@ -13,7 +14,7 @@ var OpacityField = function OpacityField(_ref) {
       opacity: restrictNumber(newOpactiy / 100, MIN_PERCENTANGE, MAX_PERCENTANGE)
     });
   };
-  return React.createElement(Slider, {
+  return _jsx(Slider, {
     label: t('transparency'),
     onChange: changeOpacity,
     value: opacityValue,

package/lib/components/common/annotation-options/position-fields.d.ts

@@ -0,0 +1,8 @@
+import { Annotation } from 'types';
+interface PositionFieldsProps {
+    annotation: Annotation;
+    updateAnnotation: (updates: Partial<Annotation>) => void;
+}
+declare const PositionFields: ({ annotation, updateAnnotation, }: PositionFieldsProps) => import("react/jsx-runtime").JSX.Element[];
+export default PositionFields;
+//# sourceMappingURL=position-fields.d.ts.map

package/lib/components/common/annotation-options/position-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position-fields.d.ts","sourceRoot":"","sources":["../../../../src/components/common/annotation-options/position-fields.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,UAAU,mBAAmB;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,QAAA,MAAM,cAAc,GAAI,mCAGrB,mBAAmB,8CAkCrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -6,6 +6,7 @@ import mapPositionStringToPoint from "../../../utils/map-position-string-to-poin
 import { useStore } from "../../../hooks";
 import SIconButtonWrapper from "../icon-wrapper";
 import { AVAILABLE_POSITIONS, posCssRotateDegFromRightSide } from "./annotation-options.constants";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var PositionFields = function PositionFields(_ref) {
   var annotation = _ref.annotation,
     updateAnnotation = _ref.updateAnnotation;
@@ -21,19 +22,20 @@ var PositionFields = function PositionFields(_ref) {
   };
   var positionsLength = AVAILABLE_POSITIONS.length;
   return AVAILABLE_POSITIONS.map(function (pos, i) {
-    return React.createElement(Fragment, {
-      key: pos
-    }, React.createElement(SIconButtonWrapper, {
-      onClick: function onClick() {
-        return changePosition(pos);
-      },
-      active: position === pos,
-      border: true
-    }, pos === POSITIONS.MIDDLE_CENTER ? React.createElement(FiberManualRecordOutlined, null) : React.createElement(ArrowForwardOutlined, {
-      style: {
-        transform: "rotate(".concat(posCssRotateDegFromRightSide[pos], "deg)")
-      }
-    })), (i + 1) % 3 === 0 && i + 1 !== positionsLength && React.createElement("div", null));
+    return _jsxs(Fragment, {
+      children: [_jsx(SIconButtonWrapper, {
+        onClick: function onClick() {
+          return changePosition(pos);
+        },
+        active: position === pos,
+        border: true,
+        children: pos === POSITIONS.MIDDLE_CENTER ? _jsx(FiberManualRecordOutlined, {}) : _jsx(ArrowForwardOutlined, {
+          style: {
+            transform: "rotate(".concat(posCssRotateDegFromRightSide[pos], "deg)")
+          }
+        })
+      }), (i + 1) % 3 === 0 && i + 1 !== positionsLength && _jsx("div", {})]
+    }, pos);
   });
 };
 export default PositionFields;