@solostylist/image-editor 1.0.11 → 1.0.13

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

@@ -10,6 +10,7 @@ import getProperDimensions from "../../../utils/get-proper-dimensions";
 import getSizeAfterRotation from "../../../utils/get-size-after-rotation";
 import getZoomFitFactor from "../../../utils/get-zoom-fit-factor";
 import restrictNumber from "../../../utils/restrict-number";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var Resize = function Resize(_ref) {
   var onChange = _ref.onChange,
     _ref$currentSize = _ref.currentSize,
@@ -101,41 +102,44 @@ var Resize = function Resize(_ref) {
   var isManualChangeDisabled = resize.manualChangeDisabled;
   var isEmptyEditedWidth = typeof resize.width !== 'undefined' && !resize.width;
   var isEmptyEditedHeight = typeof resize.height !== 'undefined' && !resize.height;
-  return React.createElement(SFlexBox, {
+  return _jsxs(SFlexBox, {
     sx: {
       gap: 1,
       alignItems: 'flex-end'
-    }
-  }, React.createElement(STextField, {
-    name: "width",
-    value: isEmptyEditedWidth ? '' : dimensions.width,
-    onChange: isManualChangeDisabled ? undefined : changeResize,
-    inputMode: "numeric",
-    label: "".concat(t('width'), " (px)"),
-    disabled: isManualChangeDisabled
-  }), React.createElement(SIconButton, {
-    tooltipOptions: {
-      title: t('toggleRatioLockTitle')
-    },
-    onClick: isManualChangeDisabled ? undefined : toggleRatioLock,
-    disabled: isManualChangeDisabled
-  }, currentSize.ratioUnlocked || resize.ratioUnlocked ? React.createElement(LockOpenOutlined, {
-    color: "success"
-  }) : React.createElement(LockOutlined, {
-    color: "error"
-  })), React.createElement(STextField, {
-    name: "height",
-    value: isEmptyEditedHeight ? '' : dimensions.height,
-    onChange: isManualChangeDisabled ? undefined : changeResize,
-    inputMode: "numeric",
-    label: "".concat(t('height'), " (px)"),
-    disabled: isManualChangeDisabled
-  }), !hideResetButton && React.createElement(SIconButton, {
-    tooltipOptions: {
-      title: t('resetSize')
     },
-    onClick: isOriginalSize || isManualChangeDisabled ? undefined : resetResize,
-    disabled: isOriginalSize || isManualChangeDisabled
-  }, React.createElement(Refresh, null)));
+    children: [_jsx(STextField, {
+      name: "width",
+      value: isEmptyEditedWidth ? '' : dimensions.width,
+      onChange: isManualChangeDisabled ? undefined : changeResize,
+      inputMode: "numeric",
+      label: "".concat(t('width'), " (px)"),
+      disabled: isManualChangeDisabled
+    }), _jsx(SIconButton, {
+      tooltipOptions: {
+        title: t('toggleRatioLockTitle')
+      },
+      onClick: isManualChangeDisabled ? undefined : toggleRatioLock,
+      disabled: isManualChangeDisabled,
+      children: currentSize.ratioUnlocked || resize.ratioUnlocked ? _jsx(LockOpenOutlined, {
+        color: "success"
+      }) : _jsx(LockOutlined, {
+        color: "error"
+      })
+    }), _jsx(STextField, {
+      name: "height",
+      value: isEmptyEditedHeight ? '' : dimensions.height,
+      onChange: isManualChangeDisabled ? undefined : changeResize,
+      inputMode: "numeric",
+      label: "".concat(t('height'), " (px)"),
+      disabled: isManualChangeDisabled
+    }), !hideResetButton && _jsx(SIconButton, {
+      tooltipOptions: {
+        title: t('resetSize')
+      },
+      onClick: isOriginalSize || isManualChangeDisabled ? undefined : resetResize,
+      disabled: isOriginalSize || isManualChangeDisabled,
+      children: _jsx(Refresh, {})
+    })]
+  });
 };
 export default Resize;

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"rotate-button.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/rotate/rotate-button.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,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,YAAY,GAAI,gCAInB,iBAAiB,4CAUnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,12 +1,13 @@
 import { RotateLeftOutlined as RotateIcon } 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 RotateButton = function RotateButton(_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.ROTATE,
     label: t('rotateTool'),
     Icon: RotateIcon,

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

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

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

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

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

@@ -7,6 +7,7 @@ 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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var RotateOptions = function RotateOptions() {
   var _useStore = useStore(),
     dispatch = _useStore.dispatch,
@@ -45,53 +46,58 @@ var RotateOptions = function RotateOptions() {
     changeRotation(e, newAngle);
   };
   if (rotateConfig.componentType === 'buttons') {
-    return React.createElement(React.Fragment, null, React.createElement(ToolsBarItemButton, {
-      id: TOOLS_IDS.IMAGE,
-      label: "-".concat(rotateConfig.angle, "\xB0"),
-      Icon: RotateLeftOutlined,
-      onClick: changeRotationButtonNegative
-    }), React.createElement(ToolsBarItemButton, {
-      id: TOOLS_IDS.IMAGE,
-      label: "+".concat(rotateConfig === null || rotateConfig === void 0 ? void 0 : rotateConfig.angle, "\xB0"),
-      Icon: RotateRightOutlined,
-      onClick: changeRotationButtonPositive
-    }));
+    return _jsxs(_Fragment, {
+      children: [_jsx(ToolsBarItemButton, {
+        id: TOOLS_IDS.IMAGE,
+        label: "-".concat(rotateConfig.angle, "\xB0"),
+        Icon: RotateLeftOutlined,
+        onClick: changeRotationButtonNegative
+      }), _jsx(ToolsBarItemButton, {
+        id: TOOLS_IDS.IMAGE,
+        label: "+".concat(rotateConfig === null || rotateConfig === void 0 ? void 0 : rotateConfig.angle, "\xB0"),
+        Icon: RotateRightOutlined,
+        onClick: changeRotationButtonPositive
+      })]
+    });
   }
-  return React.createElement(SFlexBox, {
+  return _jsxs(SFlexBox, {
     alignItems: "center",
-    gap: 2
-  }, React.createElement(SIconButton, {
-    onClick: function onClick(e) {
-      return changeRotation(e, rotation - 90);
-    }
-  }, React.createElement(Rotate90DegreesCwOutlined, null)), React.createElement(Slider, {
-    valueLabelDisplay: "auto",
-    marks: true,
-    min: -180,
-    max: 180,
-    step: isPhoneScreen ? rotateConfig.angle / 3 : 1,
-    value: rotation,
-    onChange: changeRotation,
-    sx: {
-      width: 200,
-      '& .MuiSlider-thumb': {
-        width: 12,
-        height: 12
+    gap: 2,
+    children: [_jsx(SIconButton, {
+      onClick: function onClick(e) {
+        return changeRotation(e, rotation - 90);
       },
-      '& .MuiSlider-mark': {
-        width: 4,
-        height: 4,
-        borderRadius: '50%'
+      children: _jsx(Rotate90DegreesCwOutlined, {})
+    }), _jsx(Slider, {
+      valueLabelDisplay: "auto",
+      marks: true,
+      min: -180,
+      max: 180,
+      step: isPhoneScreen ? rotateConfig.angle / 3 : 1,
+      value: rotation,
+      onChange: changeRotation,
+      sx: {
+        width: 200,
+        '& .MuiSlider-thumb': {
+          width: 12,
+          height: 12
+        },
+        '& .MuiSlider-mark': {
+          width: 4,
+          height: 4,
+          borderRadius: '50%'
+        }
       }
-    }
-  }), React.createElement(SIconButton, {
-    onClick: function onClick(e) {
-      return changeRotation(e, rotation + 90);
-    }
-  }, React.createElement(Rotate90DegreesCwOutlined, {
-    sx: {
-      transform: 'scaleX(-1)'
-    }
-  })));
+    }), _jsx(SIconButton, {
+      onClick: function onClick(e) {
+        return changeRotation(e, rotation + 90);
+      },
+      children: _jsx(Rotate90DegreesCwOutlined, {
+        sx: {
+          transform: 'scaleX(-1)'
+        }
+      })
+    })]
+  });
 };
 export default RotateOptions;

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-button.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/text/text-button.tsx"],"names":[],"mappings":"AAOA,UAAU,eAAe;IACvB,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,UAAU,GAAI,+BAAuC,eAAe,4CAUzE,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -1,12 +1,13 @@
 import { TextFieldsOutlined as TextIcon } 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 TextButton = function TextButton(_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.TEXT,
     label: t('textTool'),
     Icon: TextIcon,

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

@@ -0,0 +1,4 @@
+declare function deactivateTextChange(): void;
+declare const activateTextChange: (textNodeId: string, canvasStage: any, currentTransformer: any, finishingCallback: (textValue: string) => void, dismissingTextEditing: () => void) => void;
+export { activateTextChange, deactivateTextChange };
+//# sourceMappingURL=handle-text-change-area.d.ts.map

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

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

package/lib/components/tools/text/text-options/index.d.ts

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

package/lib/components/tools/text/text-options/index.d.ts.map

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

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

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useAnnotation } from "../../../../hooks";
 import { TOOLS_IDS } from "../../../../utils/constants";
 import TextControls from "./text-controls";
+import { jsx as _jsx } from "react/jsx-runtime";
 var TextOptions = function TextOptions() {
   var _useAnnotation = useAnnotation({
       name: TOOLS_IDS.TEXT
@@ -9,7 +10,7 @@ var TextOptions = function TextOptions() {
     _useAnnotation2 = _slicedToArray(_useAnnotation, 2),
     text = _useAnnotation2[0],
     saveText = _useAnnotation2[1];
-  return React.createElement(TextControls, {
+  return _jsx(TextControls, {
     text: text,
     saveText: saveText
   });

package/lib/components/tools/text/text-options/text-alignment-fields.d.ts

@@ -0,0 +1,9 @@
+/** External Dependencies */
+import { TextAnnotation } from 'types/annotations';
+interface TextAlignmentFieldsProps {
+    annotation: TextAnnotation;
+    updateAnnotation: (updates: Partial<TextAnnotation>) => void;
+}
+declare const TextAlignmentFields: ({ annotation: text, updateAnnotation: updateText, }: TextAlignmentFieldsProps) => import("react/jsx-runtime").JSX.Element;
+export default TextAlignmentFields;
+//# sourceMappingURL=text-alignment-fields.d.ts.map

package/lib/components/tools/text/text-options/text-alignment-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-alignment-fields.d.ts","sourceRoot":"","sources":["../../../../../src/components/tools/text/text-options/text-alignment-fields.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAS5B,OAAO,EAAiB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAIlE,UAAU,wBAAwB;IAChC,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,QAAA,MAAM,mBAAmB,GAAI,qDAG1B,wBAAwB,4CA6B1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -2,6 +2,7 @@ import { FormatAlignCenterOutlined, FormatAlignLeftOutlined } from '@mui/icons-m
 import { SFlexBox } from '@solostylist/ui-kit/core';
 import SIconButtonWrapper from "../../../common/icon-wrapper";
 import { TextAlignment } from "../../../../types/annotations";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var rightAlignmentCssTransform = {
   transform: 'scaleX(-1)'
 };
@@ -14,25 +15,29 @@ var TextAlignmentFields = function TextAlignmentFields(_ref) {
       align: newHorizonalAlignment
     });
   };
-  return React.createElement(SFlexBox, {
-    gap: 1
-  }, React.createElement(SIconButtonWrapper, {
-    onClick: function onClick() {
-      return changeHorizontalAlignment(TextAlignment.LEFT);
-    },
-    active: align === TextAlignment.LEFT
-  }, React.createElement(FormatAlignLeftOutlined, null)), React.createElement(SIconButtonWrapper, {
-    onClick: function onClick() {
-      return changeHorizontalAlignment(TextAlignment.CENTER);
-    },
-    active: align === TextAlignment.CENTER
-  }, React.createElement(FormatAlignCenterOutlined, null)), React.createElement(SIconButtonWrapper, {
-    onClick: function onClick() {
-      return changeHorizontalAlignment(TextAlignment.RIGHT);
-    },
-    active: align === TextAlignment.RIGHT
-  }, React.createElement(FormatAlignLeftOutlined, {
-    style: rightAlignmentCssTransform
-  })));
+  return _jsxs(SFlexBox, {
+    gap: 1,
+    children: [_jsx(SIconButtonWrapper, {
+      onClick: function onClick() {
+        return changeHorizontalAlignment(TextAlignment.LEFT);
+      },
+      active: align === TextAlignment.LEFT,
+      children: _jsx(FormatAlignLeftOutlined, {})
+    }), _jsx(SIconButtonWrapper, {
+      onClick: function onClick() {
+        return changeHorizontalAlignment(TextAlignment.CENTER);
+      },
+      active: align === TextAlignment.CENTER,
+      children: _jsx(FormatAlignCenterOutlined, {})
+    }), _jsx(SIconButtonWrapper, {
+      onClick: function onClick() {
+        return changeHorizontalAlignment(TextAlignment.RIGHT);
+      },
+      active: align === TextAlignment.RIGHT,
+      children: _jsx(FormatAlignLeftOutlined, {
+        style: rightAlignmentCssTransform
+      })
+    })]
+  });
 };
 export default TextAlignmentFields;

package/lib/components/tools/text/text-options/text-controls.d.ts

@@ -0,0 +1,12 @@
+import { TextAnnotation } from 'types/annotations';
+interface TextControlsProps {
+    text: TextAnnotation & {
+        shouldSave?: boolean;
+        neverSave?: boolean;
+    };
+    saveText: (updater: Partial<TextAnnotation> | ((latest: any) => any)) => void;
+    children?: React.ReactNode;
+}
+declare const TextControls: ({ text, saveText, children }: TextControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default TextControls;
+//# sourceMappingURL=text-controls.d.ts.map

package/lib/components/tools/text/text-options/text-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-controls.d.ts","sourceRoot":"","sources":["../../../../../src/components/tools/text/text-options/text-controls.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAe/D,UAAU,iBAAiB;IAGzB,IAAI,EAAE,cAAc,GAAG;QAAE,UAAU,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,YAAY,GAAI,8BAA8B,iBAAiB,4CA8IpE,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -12,6 +12,7 @@ import { useStore } from "../../../../hooks";
 import { SFlexBox, SSelect, STextField } from '@solostylist/ui-kit/core';
 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 text = _ref.text,
     saveText = _ref.saveText,
@@ -99,49 +100,53 @@ var TextControls = function TextControls(_ref) {
       if (transformer && textIdOfEditableContent) deactivateTextChange();
     };
   }, [textIdOfEditableContent]);
-  return React.createElement(AnnotationOptions, {
+  return _jsx(AnnotationOptions, {
     annotation: text,
     updateAnnotation: saveText,
     morePoppableOptionsPrepended: TEXT_POPPABLE_OPTIONS,
-    moreOptionsPopupComponentsObj: textOptionsPopupComponents
-  }, React.createElement(SFlexBox, {
-    sx: {
-      gap: 1,
-      alignItems: 'center'
-    }
-  }, Array.isArray(fonts) && fonts.length > 1 && React.createElement(SSelect, {
-    onChange: function onChange(e) {
-      return changeFontFamily(e.target.value);
-    },
-    value: text.fontFamily,
-    placeholder: t('fontFamily'),
-    options: fonts,
-    optionLabel: _typeof(fonts[0]) === 'object' ? 'label' : undefined,
-    optionValue: _typeof(fonts[0]) === 'object' ? 'value' : undefined,
-    sx: {
-      width: 150,
-      textAlign: 'left'
-    }
-  }), React.createElement(STextField, {
-    value: text.fontSize || '',
-    name: "fontSize",
-    onChange: changeTextProps,
-    inputMode: "numeric",
-    type: "number",
-    sx: {
-      width: 150
-    },
-    placeholder: t('size')
-  }), React.createElement(SIconButtonWrapper, {
-    active: (text.fontStyle || '').includes('bold'),
-    onClick: function onClick() {
-      return changeFontStyle('bold');
-    }
-  }, React.createElement(FormatBoldOutlined, null)), React.createElement(SIconButtonWrapper, {
-    active: (text.fontStyle || '').includes('italic'),
-    onClick: function onClick() {
-      return changeFontStyle('italic');
-    }
-  }, React.createElement(FormatItalicOutlined, null)), children));
+    moreOptionsPopupComponentsObj: textOptionsPopupComponents,
+    children: _jsxs(SFlexBox, {
+      sx: {
+        gap: 1,
+        alignItems: 'center'
+      },
+      children: [Array.isArray(fonts) && fonts.length > 1 && _jsx(SSelect, {
+        onChange: function onChange(e) {
+          return changeFontFamily(e.target.value);
+        },
+        value: text.fontFamily,
+        placeholder: t('fontFamily'),
+        options: fonts,
+        optionLabel: _typeof(fonts[0]) === 'object' ? 'label' : undefined,
+        optionValue: _typeof(fonts[0]) === 'object' ? 'value' : undefined,
+        sx: {
+          width: 150,
+          textAlign: 'left'
+        }
+      }), _jsx(STextField, {
+        value: text.fontSize || '',
+        name: "fontSize",
+        onChange: changeTextProps,
+        inputMode: "numeric",
+        type: "number",
+        sx: {
+          width: 150
+        },
+        placeholder: t('size')
+      }), _jsx(SIconButtonWrapper, {
+        active: (text.fontStyle || '').includes('bold'),
+        onClick: function onClick() {
+          return changeFontStyle('bold');
+        },
+        children: _jsx(FormatBoldOutlined, {})
+      }), _jsx(SIconButtonWrapper, {
+        active: (text.fontStyle || '').includes('italic'),
+        onClick: function onClick() {
+          return changeFontStyle('italic');
+        },
+        children: _jsx(FormatItalicOutlined, {})
+      }), children]
+    })
+  });
 };
 export default TextControls;

package/lib/components/tools/text/text-options/text-options.constants.d.ts

@@ -0,0 +1,14 @@
+/** External Dependencies */
+import { SvgIconComponent } from '@mui/icons-material';
+import { ComponentType } from 'react';
+export declare const TEXT_ALIGNMENT: string;
+export declare const TEXT_SPACINGS: string;
+interface TextPoppableOption {
+    titleKey: string;
+    name: string;
+    Icon: SvgIconComponent;
+}
+export declare const TEXT_POPPABLE_OPTIONS: TextPoppableOption[];
+export declare const textOptionsPopupComponents: Record<string, ComponentType<any>>;
+export {};
+//# sourceMappingURL=text-options.constants.d.ts.map

package/lib/components/tools/text/text-options/text-options.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-options.constants.d.ts","sourceRoot":"","sources":["../../../../../src/components/tools/text/text-options/text-options.constants.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,EAGL,gBAAgB,EACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAMtC,eAAO,MAAM,cAAc,EAAE,MAAyB,CAAC;AACvD,eAAO,MAAM,aAAa,EAAE,MAAwB,CAAC;AAErD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,gBAAgB,CAAC;CACxB;AAED,eAAO,MAAM,qBAAqB,EAAE,kBAAkB,EAWrD,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAGzE,CAAC"}

package/lib/components/tools/text/text-options/text-spacings-fields.d.ts

@@ -0,0 +1,10 @@
+/** External Dependencies */
+import { TextAnnotation } from 'types/annotations';
+interface TextSpacingsFieldsProps {
+    annotation: TextAnnotation;
+    updateAnnotation: (updates: Partial<TextAnnotation>) => void;
+    t: (key: string) => string;
+}
+declare const TextSpacingsFields: ({ annotation: text, updateAnnotation: updateText, t, }: TextSpacingsFieldsProps) => import("react/jsx-runtime").JSX.Element;
+export default TextSpacingsFields;
+//# sourceMappingURL=text-spacings-fields.d.ts.map

package/lib/components/tools/text/text-options/text-spacings-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-spacings-fields.d.ts","sourceRoot":"","sources":["../../../../../src/components/tools/text/text-options/text-spacings-fields.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAI5B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,UAAU,uBAAuB;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC7D,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5B;AAED,QAAA,MAAM,kBAAkB,GAAI,wDAIzB,uBAAuB,4CAyBzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 MIN_VALUE = 0;
 var MAX_VALUE = 100;
 var SLIDER_STEP = 1;
@@ -13,22 +14,24 @@ var TextSpacingsFields = function TextSpacingsFields(_ref) {
   var updateValue = function updateValue(prop, val) {
     updateText(_defineProperty({}, prop, restrictNumber(val, MIN_VALUE, MAX_VALUE)));
   };
-  return React.createElement(React.Fragment, null, React.createElement(Slider, {
-    annotation: "px",
-    label: t('letterSpacing'),
-    onChange: function onChange(val) {
-      return updateValue('letterSpacing', val);
-    },
-    value: letterSpacing,
-    step: SLIDER_STEP
-  }), React.createElement(Slider, {
-    annotation: "px",
-    label: t('lineHeight'),
-    onChange: function onChange(val) {
-      return updateValue('lineHeight', val);
-    },
-    value: lineHeight,
-    step: SLIDER_STEP
-  }));
+  return _jsxs(_Fragment, {
+    children: [_jsx(Slider, {
+      annotation: "px",
+      label: t('letterSpacing'),
+      onChange: function onChange(val) {
+        return updateValue('letterSpacing', val);
+      },
+      value: letterSpacing,
+      step: SLIDER_STEP
+    }), _jsx(Slider, {
+      annotation: "px",
+      label: t('lineHeight'),
+      onChange: function onChange(val) {
+        return updateValue('lineHeight', val);
+      },
+      value: lineHeight,
+      step: SLIDER_STEP
+    })]
+  });
 };
 export default TextSpacingsFields;

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

@@ -0,0 +1,9 @@
+interface ToolItem {
+    id: string;
+    Item: any;
+    ItemOptions?: any;
+}
+export declare const TOOLS_ITEMS: Record<string, ToolItem>;
+export declare const TABS_TOOLS: Record<string, string[]>;
+export {};
+//# sourceMappingURL=tools.constants.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+export { default as Warmth } from './warmth';
+export { default as WarmthOptions } from './warmth-options';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,7 @@
+/** External Dependencies */
+interface WarmthOptionsProps {
+    t: (key: string) => string;
+}
+declare const WarmthOptions: ({ t }: WarmthOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export default WarmthOptions;
+//# sourceMappingURL=warmth-options.d.ts.map