@arbisoft/react-design-tool 1.0.61 → 1.0.63

package/dist/cjs/index.js

@@ -5,9 +5,9 @@ var PropTypes = require('prop-types');
 var styled = require('styled-components');
 var reactDom = require('react-dom');
 var reactKonva = require('react-konva');
+var Konva = require('konva');
 var QRCode = require('qrcode');
 var reactKonvaUtils = require('react-konva-utils');
-var Konva = require('konva');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -285,19 +285,17 @@ function _regeneratorDefine(e, r, n, t) {
     i = 0;
   }
   _regeneratorDefine = function (e, r, n, t) {
-    if (r) i ? i(e, r, {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
       value: n,
       enumerable: !t,
       configurable: !t,
       writable: !t
-    }) : e[r] = n;else {
-      function o(r, n) {
-        _regeneratorDefine(e, r, function (e) {
-          return this._invoke(r, n, e);
-        });
-      }
-      o("next", 0), o("throw", 1), o("return", 2);
-    }
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
   }, _regeneratorDefine(e, r, n, t);
 }
 function _slicedToArray(r, e) {
@@ -811,8 +809,12 @@ var LOCATION_BREADCRUMB$8 = "property > building > room";
 var DOMAIN$8 = "www.domain.com";
 var SHOW_PROPERTY_LOCATION$8 = "Show Property Label";
 var LOCATION_HELPER$8 = "Enable this to show the property’s location label on the canvas, or disable it to hide it.";
-var SHOW_QR_ID$8 = "Show QR ID";
+var SHOW_QR_ID$8 = "Show QR Id";
 var QR_ID_HELPER$8 = "Enable this to display the unique QR Code ID on the canvas, or disable it to remove it.";
+var MONOCHROME_COLOR$8 = "Tint Color";
+var MONOCHROME_STRENGTH$8 = "Tint Strength";
+var CLEAR_MONOCHROME$8 = "Remove Tint";
+var TINT_SHORT$8 = "Tint";
 var enTranslations = {
 	BRING_FORWARD: BRING_FORWARD$8,
 	SEND_BACKWARD: SEND_BACKWARD$8,
@@ -885,7 +887,11 @@ var enTranslations = {
 	SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$8,
 	LOCATION_HELPER: LOCATION_HELPER$8,
 	SHOW_QR_ID: SHOW_QR_ID$8,
-	QR_ID_HELPER: QR_ID_HELPER$8
+	QR_ID_HELPER: QR_ID_HELPER$8,
+	MONOCHROME_COLOR: MONOCHROME_COLOR$8,
+	MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$8,
+	CLEAR_MONOCHROME: CLEAR_MONOCHROME$8,
+	TINT_SHORT: TINT_SHORT$8
 };
 
 var BRING_FORWARD$7 = "Перенести вперёд";
@@ -960,6 +966,10 @@ var SHOW_PROPERTY_LOCATION$7 = "Показать метку объекта";
 var LOCATION_HELPER$7 = "Включите, чтобы показать метку расположения объекта на холсте, или отключите, чтобы скрыть её.";
 var SHOW_QR_ID$7 = "Показать QR-ID";
 var QR_ID_HELPER$7 = "Включите, чтобы отобразить уникальный идентификатор QR-кода на холсте, или отключите, чтобы убрать его.";
+var MONOCHROME_COLOR$7 = "Цвет тона";
+var MONOCHROME_STRENGTH$7 = "Сила тона";
+var CLEAR_MONOCHROME$7 = "Убрать тон";
+var TINT_SHORT$7 = "Тон";
 var ruTranslations = {
 	BRING_FORWARD: BRING_FORWARD$7,
 	SEND_BACKWARD: SEND_BACKWARD$7,
@@ -1032,7 +1042,11 @@ var ruTranslations = {
 	SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$7,
 	LOCATION_HELPER: LOCATION_HELPER$7,
 	SHOW_QR_ID: SHOW_QR_ID$7,
-	QR_ID_HELPER: QR_ID_HELPER$7
+	QR_ID_HELPER: QR_ID_HELPER$7,
+	MONOCHROME_COLOR: MONOCHROME_COLOR$7,
+	MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$7,
+	CLEAR_MONOCHROME: CLEAR_MONOCHROME$7,
+	TINT_SHORT: TINT_SHORT$7
 };
 
 var BRING_FORWARD$6 = "Przenieś do przodu";
@@ -1107,6 +1121,10 @@ var SHOW_PROPERTY_LOCATION$6 = "Pokaż etykietę nieruchomości";
 var LOCATION_HELPER$6 = "Włącz tę opcję, aby wyświetlić etykietę lokalizacji nieruchomości na płótnie, lub wyłącz, aby ją ukryć.";
 var SHOW_QR_ID$6 = "Pokaż identyfikator QR";
 var QR_ID_HELPER$6 = "Włącz tę opcję, aby wyświetlić unikalny identyfikator kodu QR na płótnie, lub wyłącz, aby go usunąć.";
+var MONOCHROME_COLOR$6 = "Kolor tonu";
+var MONOCHROME_STRENGTH$6 = "Siła tonu";
+var CLEAR_MONOCHROME$6 = "Usuń ton";
+var TINT_SHORT$6 = "Ton";
 var plTranslations = {
 	BRING_FORWARD: BRING_FORWARD$6,
 	SEND_BACKWARD: SEND_BACKWARD$6,
@@ -1179,7 +1197,11 @@ var plTranslations = {
 	SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$6,
 	LOCATION_HELPER: LOCATION_HELPER$6,
 	SHOW_QR_ID: SHOW_QR_ID$6,
-	QR_ID_HELPER: QR_ID_HELPER$6
+	QR_ID_HELPER: QR_ID_HELPER$6,
+	MONOCHROME_COLOR: MONOCHROME_COLOR$6,
+	MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$6,
+	CLEAR_MONOCHROME: CLEAR_MONOCHROME$6,
+	TINT_SHORT: TINT_SHORT$6
 };
 
 var BRING_FORWARD$5 = "Nach vorne bringen";
@@ -1254,6 +1276,10 @@ var SHOW_PROPERTY_LOCATION$5 = "Eigenschaftsbeschriftung anzeigen";
 var LOCATION_HELPER$5 = "Aktivieren Sie dies, um die Standortbeschriftung der Eigenschaft auf der Leinwand anzuzeigen, oder deaktivieren Sie es, um sie auszublenden.";
 var SHOW_QR_ID$5 = "QR-ID anzeigen";
 var QR_ID_HELPER$5 = "Aktivieren Sie dies, um die eindeutige QR-Code-ID auf der Leinwand anzuzeigen, oder deaktivieren Sie es, um sie zu entfernen.";
+var MONOCHROME_COLOR$5 = "Tönungsfarbe";
+var MONOCHROME_STRENGTH$5 = "Tönungsstärke";
+var CLEAR_MONOCHROME$5 = "Tönung entfernen";
+var TINT_SHORT$5 = "Tönung";
 var deTranslations = {
 	BRING_FORWARD: BRING_FORWARD$5,
 	SEND_BACKWARD: SEND_BACKWARD$5,
@@ -1326,7 +1352,11 @@ var deTranslations = {
 	SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$5,
 	LOCATION_HELPER: LOCATION_HELPER$5,
 	SHOW_QR_ID: SHOW_QR_ID$5,
-	QR_ID_HELPER: QR_ID_HELPER$5
+	QR_ID_HELPER: QR_ID_HELPER$5,
+	MONOCHROME_COLOR: MONOCHROME_COLOR$5,
+	MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$5,
+	CLEAR_MONOCHROME: CLEAR_MONOCHROME$5,
+	TINT_SHORT: TINT_SHORT$5
 };
 
 var BRING_FORWARD$4 = "Traer al frente";
@@ -1401,6 +1431,10 @@ var SHOW_PROPERTY_LOCATION$4 = "Mostrar etiqueta de propiedad";
 var LOCATION_HELPER$4 = "Active esto para mostrar la etiqueta de ubicación de la propiedad en el lienzo, o desactívelo para ocultarla.";
 var SHOW_QR_ID$4 = "Mostrar ID de QR";
 var QR_ID_HELPER$4 = "Active esto para mostrar el identificador único del código QR en el lienzo, o desactívelo para eliminarlo.";
+var MONOCHROME_COLOR$4 = "Color de tinte";
+var MONOCHROME_STRENGTH$4 = "Intensidad del tinte";
+var CLEAR_MONOCHROME$4 = "Eliminar tinte";
+var TINT_SHORT$4 = "Tinte";
 var esTranslations = {
 	BRING_FORWARD: BRING_FORWARD$4,
 	SEND_BACKWARD: SEND_BACKWARD$4,
@@ -1473,7 +1507,11 @@ var esTranslations = {
 	SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$4,
 	LOCATION_HELPER: LOCATION_HELPER$4,
 	SHOW_QR_ID: SHOW_QR_ID$4,
-	QR_ID_HELPER: QR_ID_HELPER$4
+	QR_ID_HELPER: QR_ID_HELPER$4,
+	MONOCHROME_COLOR: MONOCHROME_COLOR$4,
+	MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$4,
+	CLEAR_MONOCHROME: CLEAR_MONOCHROME$4,
+	TINT_SHORT: TINT_SHORT$4
 };
 
 var BRING_FORWARD$3 = "Mettre au premier plan";
@@ -1548,6 +1586,10 @@ var SHOW_PROPERTY_LOCATION$3 = "Afficher l’étiquette de propriété";
 var LOCATION_HELPER$3 = "Activez ceci pour afficher l’étiquette de l’emplacement de la propriété sur la zone de travail, ou désactivez-le pour la masquer.";
 var SHOW_QR_ID$3 = "Afficher l’ID du QR";
 var QR_ID_HELPER$3 = "Activez ceci pour afficher l’ID unique du code QR sur la zone de travail, ou désactivez-le pour le supprimer.";
+var MONOCHROME_COLOR$3 = "Couleur de teinte";
+var MONOCHROME_STRENGTH$3 = "Intensité de la teinte";
+var CLEAR_MONOCHROME$3 = "Retirer la teinte";
+var TINT_SHORT$3 = "Teinte";
 var frTranslations = {
 	BRING_FORWARD: BRING_FORWARD$3,
 	SEND_BACKWARD: SEND_BACKWARD$3,
@@ -1620,7 +1662,11 @@ var frTranslations = {
 	SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$3,
 	LOCATION_HELPER: LOCATION_HELPER$3,
 	SHOW_QR_ID: SHOW_QR_ID$3,
-	QR_ID_HELPER: QR_ID_HELPER$3
+	QR_ID_HELPER: QR_ID_HELPER$3,
+	MONOCHROME_COLOR: MONOCHROME_COLOR$3,
+	MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$3,
+	CLEAR_MONOCHROME: CLEAR_MONOCHROME$3,
+	TINT_SHORT: TINT_SHORT$3
 };
 
 var BRING_FORWARD$2 = "Porta in primo piano";
@@ -1695,6 +1741,10 @@ var SHOW_PROPERTY_LOCATION$2 = "Mostra etichetta proprietà";
 var LOCATION_HELPER$2 = "Abilita questa opzione per mostrare l’etichetta della posizione della proprietà sulla tela, oppure disabilitala per nasconderla.";
 var SHOW_QR_ID$2 = "Mostra ID QR";
 var QR_ID_HELPER$2 = "Abilita questa opzione per mostrare l’ID univoco del codice QR sulla tela, oppure disabilitala per rimuoverlo.";
+var MONOCHROME_COLOR$2 = "Colore tinta";
+var MONOCHROME_STRENGTH$2 = "Intensità della tinta";
+var CLEAR_MONOCHROME$2 = "Rimuovi tinta";
+var TINT_SHORT$2 = "Tinta";
 var itTranslations = {
 	BRING_FORWARD: BRING_FORWARD$2,
 	SEND_BACKWARD: SEND_BACKWARD$2,
@@ -1767,7 +1817,11 @@ var itTranslations = {
 	SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$2,
 	LOCATION_HELPER: LOCATION_HELPER$2,
 	SHOW_QR_ID: SHOW_QR_ID$2,
-	QR_ID_HELPER: QR_ID_HELPER$2
+	QR_ID_HELPER: QR_ID_HELPER$2,
+	MONOCHROME_COLOR: MONOCHROME_COLOR$2,
+	MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$2,
+	CLEAR_MONOCHROME: CLEAR_MONOCHROME$2,
+	TINT_SHORT: TINT_SHORT$2
 };
 
 var BRING_FORWARD$1 = "Επισπεύδω";
@@ -1842,6 +1896,10 @@ var SHOW_PROPERTY_LOCATION$1 = "Εμφάνιση ετικέτας ιδιοκτη
 var LOCATION_HELPER$1 = "Ενεργοποιήστε το για να εμφανιστεί η ετικέτα τοποθεσίας της ιδιοκτησίας στον καμβά ή απενεργοποιήστε το για να την αποκρύψετε.";
 var SHOW_QR_ID$1 = "Εμφάνιση ταυτότητας QR";
 var QR_ID_HELPER$1 = "Ενεργοποιήστε το για να εμφανιστεί το μοναδικό αναγνωριστικό QR Code στον καμβά ή απενεργοποιήστε το για να το αφαιρέσετε.";
+var MONOCHROME_COLOR$1 = "Χρώμα απόχρωσης";
+var MONOCHROME_STRENGTH$1 = "Ένταση απόχρωσης";
+var CLEAR_MONOCHROME$1 = "Αφαίρεση απόχρωσης";
+var TINT_SHORT$1 = "Απόχρωση";
 var elTranslations = {
 	BRING_FORWARD: BRING_FORWARD$1,
 	SEND_BACKWARD: SEND_BACKWARD$1,
@@ -1914,7 +1972,11 @@ var elTranslations = {
 	SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$1,
 	LOCATION_HELPER: LOCATION_HELPER$1,
 	SHOW_QR_ID: SHOW_QR_ID$1,
-	QR_ID_HELPER: QR_ID_HELPER$1
+	QR_ID_HELPER: QR_ID_HELPER$1,
+	MONOCHROME_COLOR: MONOCHROME_COLOR$1,
+	MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$1,
+	CLEAR_MONOCHROME: CLEAR_MONOCHROME$1,
+	TINT_SHORT: TINT_SHORT$1
 };
 
 var BRING_FORWARD = "Переносити";
@@ -1989,6 +2051,10 @@ var SHOW_PROPERTY_LOCATION = "Показати мітку власності";
 var LOCATION_HELPER = "Увімкніть, щоб показати мітку розташування власності на полотні, або вимкніть, щоб приховати її.";
 var SHOW_QR_ID = "Показати QR-ID";
 var QR_ID_HELPER = "Увімкніть, щоб відобразити унікальний ідентифікатор QR-коду на полотні, або вимкніть, щоб видалити його.";
+var MONOCHROME_COLOR = "Колір тону";
+var MONOCHROME_STRENGTH = "Сила тону";
+var CLEAR_MONOCHROME = "Прибрати тон";
+var TINT_SHORT = "Тон";
 var ukTranslations = {
 	BRING_FORWARD: BRING_FORWARD,
 	SEND_BACKWARD: SEND_BACKWARD,
@@ -2061,7 +2127,11 @@ var ukTranslations = {
 	SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION,
 	LOCATION_HELPER: LOCATION_HELPER,
 	SHOW_QR_ID: SHOW_QR_ID,
-	QR_ID_HELPER: QR_ID_HELPER
+	QR_ID_HELPER: QR_ID_HELPER,
+	MONOCHROME_COLOR: MONOCHROME_COLOR,
+	MONOCHROME_STRENGTH: MONOCHROME_STRENGTH,
+	CLEAR_MONOCHROME: CLEAR_MONOCHROME,
+	TINT_SHORT: TINT_SHORT
 };
 
 var SUPPPORTED_LOCALES = ['en', 'ru', 'pl', 'de', 'es', 'fr', 'it', 'el', 'uk'];
@@ -2178,6 +2248,11 @@ var propTypes$w = {
   onChangeImageStrokeWidth: PropTypes.func,
   onChangeImageStrokeColor: PropTypes.func,
   onChangeImageOpacity: PropTypes.func,
+  imageTintColor: PropTypes.string,
+  imageTintStrength: PropTypes.number,
+  onChangeImageTintColor: PropTypes.func,
+  onChangeImageTintStrength: PropTypes.func,
+  onClearImageTint: PropTypes.func,
   qrStrokeWidth: PropTypes.number,
   qrStrokeColor: PropTypes.string,
   qrOpacity: PropTypes.number,
@@ -2254,6 +2329,11 @@ var propTypes$v = {
   onChangeImageStrokeWidth: PropTypes.func,
   onChangeImageStrokeColor: PropTypes.func,
   onChangeImageOpacity: PropTypes.func,
+  imageTintColor: PropTypes.string,
+  imageTintStrength: PropTypes.number,
+  onChangeImageTintColor: PropTypes.func,
+  onChangeImageTintStrength: PropTypes.func,
+  onClearImageTint: PropTypes.func,
   qrStrokeWidth: PropTypes.number,
   qrStrokeColor: PropTypes.string,
   qrOpacity: PropTypes.number,
@@ -2945,7 +3025,7 @@ var exportStageAsImage = /*#__PURE__*/function () {
             var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(resolve, reject) {
               var stage, canvas, dataURL, _t;
               return _regenerator().w(function (_context2) {
-                while (1) switch (_context2.n) {
+                while (1) switch (_context2.p = _context2.n) {
                   case 0:
                     _context2.p = 0;
                     stage = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current;
@@ -3076,7 +3156,7 @@ var OpacityPicker = function OpacityPicker(_ref) {
     src: varient === 'opacity' ? IconOpacity : toolBarIcon
   })), /*#__PURE__*/React.createElement(StyledText, {
     fontFamily: fontFamily
-  }, varient === 'opacity' ? "".concat(value * 100, "%") : "".concat(Math.round(value), "px")), rightChild && rightChild), opacityPickerVisible && /*#__PURE__*/React.createElement("div", {
+  }, varient === 'opacity' ? "".concat(Math.round(value * 100), "%") : "".concat(Math.round(value), "px")), rightChild && rightChild), opacityPickerVisible && /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
       bottom: -50,
@@ -3684,6 +3764,11 @@ var propTypes$m = {
   onChangeImageStrokeWidth: PropTypes.func,
   onChangeImageStrokeColor: PropTypes.func,
   onChangeImageOpacity: PropTypes.func,
+  imageTintColor: PropTypes.string,
+  imageTintStrength: PropTypes.number,
+  onChangeImageTintColor: PropTypes.func,
+  onChangeImageTintStrength: PropTypes.func,
+  onClearImageTint: PropTypes.func,
   selectedElement: PropTypes.object,
   languageLocale: PropTypes.string
 };
@@ -3693,13 +3778,18 @@ styled.p(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n
 var RowContainer$2 = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 2px;\n"])));
 
 var ImageToolBar = function ImageToolBar(_ref) {
-  var _TEXT_DICTIONARY$lang;
+  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _selectedElement$tint, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _selectedElement$tint2, _TEXT_DICTIONARY$lang7;
   var imageStrokeWidth = _ref.imageStrokeWidth,
     imageStrokeColor = _ref.imageStrokeColor,
     imageOpacity = _ref.imageOpacity,
     onChangeImageStrokeWidth = _ref.onChangeImageStrokeWidth,
     onChangeImageStrokeColor = _ref.onChangeImageStrokeColor,
     onChangeImageOpacity = _ref.onChangeImageOpacity,
+    imageTintColor = _ref.imageTintColor,
+    imageTintStrength = _ref.imageTintStrength,
+    onChangeImageTintColor = _ref.onChangeImageTintColor,
+    onChangeImageTintStrength = _ref.onChangeImageTintStrength,
+    onClearImageTint = _ref.onClearImageTint,
     selectedElement = _ref.selectedElement,
     languageLocale = _ref.languageLocale;
   return /*#__PURE__*/React.createElement(RowContainer$2, null, /*#__PURE__*/React.createElement(StrokePicker, {
@@ -3713,7 +3803,35 @@ var ImageToolBar = function ImageToolBar(_ref) {
     value: isElementOfSameType(selectedElement, elementTypes.image) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.opacity : imageOpacity,
     onChangeOpacity: onChangeImageOpacity,
     languageLocale: languageLocale
-  }));
+  }), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
+    gap: 8,
+    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.MONOCHROME_COLOR,
+    tooltipPosition: 'bottom'
+  }, /*#__PURE__*/React.createElement(StyledText, {
+    fontFamily: theme.fonts.secondary
+  }, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.MONOCHROME_COLOR), /*#__PURE__*/React.createElement(ColorBox, {
+    backgroundColor: isElementOfSameType(selectedElement, elementTypes.image) ? (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.tintColor) || imageTintColor : imageTintColor,
+    onChange: onChangeImageTintColor
+  })), /*#__PURE__*/React.createElement(OpacityPicker, {
+    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.MONOCHROME_STRENGTH,
+    tooltipPosition: 'bottom',
+    value: isElementOfSameType(selectedElement, elementTypes.image) ? (_selectedElement$tint = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.tintStrength) !== null && _selectedElement$tint !== void 0 ? _selectedElement$tint : imageTintStrength : imageTintStrength,
+    min: 0,
+    max: 1,
+    step: 0.05,
+    onChangeOpacity: onChangeImageTintStrength,
+    leftChild: /*#__PURE__*/React.createElement(StyledText, {
+      fontFamily: theme.fonts.secondary
+    }, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.TINT_SHORT)
+  }), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
+    gap: 8,
+    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.CLEAR_MONOCHROME,
+    tooltipPosition: 'bottom',
+    onClick: onClearImageTint,
+    disabled: isElementOfSameType(selectedElement, elementTypes.image) ? ((_selectedElement$tint2 = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.tintStrength) !== null && _selectedElement$tint2 !== void 0 ? _selectedElement$tint2 : 0) <= 0 : imageTintStrength <= 0
+  }, /*#__PURE__*/React.createElement(StyledText, {
+    fontFamily: theme.fonts.secondary
+  }, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang7 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang7 === void 0 ? void 0 : _TEXT_DICTIONARY$lang7.CLEAR_MONOCHROME)));
 };
 ImageToolBar.propTypes = propTypes$m;
 
@@ -3845,6 +3963,11 @@ var TopToolBar = function TopToolBar(_ref) {
     onChangeImageStrokeWidth = _ref.onChangeImageStrokeWidth,
     onChangeImageStrokeColor = _ref.onChangeImageStrokeColor,
     onChangeImageOpacity = _ref.onChangeImageOpacity,
+    imageTintColor = _ref.imageTintColor,
+    imageTintStrength = _ref.imageTintStrength,
+    onChangeImageTintColor = _ref.onChangeImageTintColor,
+    onChangeImageTintStrength = _ref.onChangeImageTintStrength,
+    onClearImageTint = _ref.onClearImageTint,
     qrStrokeWidth = _ref.qrStrokeWidth,
     qrStrokeColor = _ref.qrStrokeColor,
     qrOpacity = _ref.qrOpacity,
@@ -3909,6 +4032,11 @@ var TopToolBar = function TopToolBar(_ref) {
     onChangeImageStrokeWidth: onChangeImageStrokeWidth,
     onChangeImageStrokeColor: onChangeImageStrokeColor,
     onChangeImageOpacity: onChangeImageOpacity,
+    imageTintColor: imageTintColor,
+    imageTintStrength: imageTintStrength,
+    onChangeImageTintColor: onChangeImageTintColor,
+    onChangeImageTintStrength: onChangeImageTintStrength,
+    onClearImageTint: onClearImageTint,
     selectedElement: selectedElement,
     languageLocale: languageLocale
   }) : selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.shape) ? /*#__PURE__*/React.createElement(ShapeToolBar, {
@@ -4255,6 +4383,7 @@ var propTypes$e = {
 };
 
 var CanvasImage = function CanvasImage(_ref) {
+  var _element$tintStrength;
   var id = _ref.id,
     element = _ref.element,
     _onClick = _ref.onClick,
@@ -4270,6 +4399,30 @@ var CanvasImage = function CanvasImage(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     imgEl = _useState4[0],
     setImgEl = _useState4[1];
+  var imageNodeRef = React.useRef(null);
+  var tintStrength = Number((_element$tintStrength = element === null || element === void 0 ? void 0 : element.tintStrength) !== null && _element$tintStrength !== void 0 ? _element$tintStrength : 0);
+  var hasTint = tintStrength > 0;
+  var _useMemo = React.useMemo(function () {
+      var hex = typeof (element === null || element === void 0 ? void 0 : element.tintColor) === 'string' ? element.tintColor.trim() : '#000000';
+      var safeHex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex) ? hex : '#000000';
+      var normalized = safeHex.length === 4 ? "#".concat(safeHex[1]).concat(safeHex[1]).concat(safeHex[2]).concat(safeHex[2]).concat(safeHex[3]).concat(safeHex[3]) : safeHex;
+      var r = parseInt(normalized.slice(1, 3), 16);
+      var g = parseInt(normalized.slice(3, 5), 16);
+      var b = parseInt(normalized.slice(5, 7), 16);
+      var lerp = function lerp(start, end, t) {
+        return start + (end - start) * Math.min(Math.max(t, 0), 1);
+      };
+
+      // At 0: keep original grayscale; at 1: fully tint to the picked color.
+      return {
+        red: Math.round(lerp(255, r, tintStrength)),
+        green: Math.round(lerp(255, g, tintStrength)),
+        blue: Math.round(lerp(255, b, tintStrength))
+      };
+    }, [element === null || element === void 0 ? void 0 : element.tintColor, tintStrength]),
+    red = _useMemo.red,
+    green = _useMemo.green,
+    blue = _useMemo.blue;
   React.useEffect(function () {
     var cancelled = false;
     var objectUrl;
@@ -4280,7 +4433,7 @@ var CanvasImage = function CanvasImage(_ref) {
       _load = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
         var res, blob, img, _t;
         return _regenerator().w(function (_context) {
-          while (1) switch (_context.n) {
+          while (1) switch (_context.p = _context.n) {
             case 0:
               _context.p = 0;
               setLoading(true);
@@ -4337,13 +4490,26 @@ var CanvasImage = function CanvasImage(_ref) {
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
   }, [element === null || element === void 0 ? void 0 : element.src]);
+  React.useEffect(function () {
+    if (!(imageNodeRef !== null && imageNodeRef !== void 0 && imageNodeRef.current)) return;
+    if (hasTint) {
+      imageNodeRef.current.cache();
+    } else {
+      imageNodeRef.current.clearCache();
+    }
+  }, [hasTint, red, green, blue]);
   if (!loaded || !imgEl) return null;
   return /*#__PURE__*/React.createElement(reactKonva.Image, _extends({
+    ref: imageNodeRef,
     id: id,
     image: imgEl
   }, element, {
     width: element === null || element === void 0 ? void 0 : element.width,
     height: element === null || element === void 0 ? void 0 : element.height,
+    filters: hasTint ? [Konva.Filters.Grayscale, Konva.Filters.RGB] : undefined,
+    red: hasTint ? red : undefined,
+    green: hasTint ? green : undefined,
+    blue: hasTint ? blue : undefined,
     onClick: function onClick() {
       return _onClick && _onClick();
     },
@@ -4454,7 +4620,7 @@ var QrElement = function QrElement(_ref) {
       _loadLogo = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
         var res, blob, img, _t;
         return _regenerator().w(function (_context2) {
-          while (1) switch (_context2.n) {
+          while (1) switch (_context2.p = _context2.n) {
             case 0:
               if (element !== null && element !== void 0 && element.qrLogo) {
                 _context2.n = 1;
@@ -5164,6 +5330,11 @@ var Editor = function Editor(_ref) {
     onChangeImageStrokeWidth = _ref.onChangeImageStrokeWidth,
     onChangeImageStrokeColor = _ref.onChangeImageStrokeColor,
     onChangeImageOpacity = _ref.onChangeImageOpacity,
+    imageTintColor = _ref.imageTintColor,
+    imageTintStrength = _ref.imageTintStrength,
+    onChangeImageTintColor = _ref.onChangeImageTintColor,
+    onChangeImageTintStrength = _ref.onChangeImageTintStrength,
+    onClearImageTint = _ref.onClearImageTint,
     qrStrokeWidth = _ref.qrStrokeWidth,
     qrStrokeColor = _ref.qrStrokeColor,
     qrOpacity = _ref.qrOpacity,
@@ -5499,6 +5670,11 @@ var Editor = function Editor(_ref) {
     onChangeImageStrokeWidth: onChangeImageStrokeWidth,
     onChangeImageStrokeColor: onChangeImageStrokeColor,
     onChangeImageOpacity: onChangeImageOpacity,
+    imageTintColor: imageTintColor,
+    imageTintStrength: imageTintStrength,
+    onChangeImageTintColor: onChangeImageTintColor,
+    onChangeImageTintStrength: onChangeImageTintStrength,
+    onClearImageTint: onClearImageTint,
     qrStrokeWidth: qrStrokeWidth,
     qrStrokeColor: qrStrokeColor,
     qrOpacity: qrOpacity,
@@ -6425,7 +6601,7 @@ function memoize(fn) {
 }
 
 // eslint-disable-next-line no-undef
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|popover|popoverTarget|popoverTargetAction|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
 
 var isPropValid = /* #__PURE__ */memoize(function (prop) {
   return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
@@ -6593,38 +6769,46 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState38 = _slicedToArray(_useState37, 2),
     imageOpacity = _useState38[0],
     setImageOpacity = _useState38[1];
-  var _useState39 = React.useState(2),
+  var _useState39 = React.useState(theme.color.black),
     _useState40 = _slicedToArray(_useState39, 2),
-    qrStrokeWidth = _useState40[0],
-    setQrStrokeWidth = _useState40[1];
-  var _useState41 = React.useState(theme.color.black),
+    imageTintColor = _useState40[0],
+    setImageTintColor = _useState40[1];
+  var _useState41 = React.useState(0.6),
     _useState42 = _slicedToArray(_useState41, 2),
-    qrStrokeColor = _useState42[0],
-    setQrStrokeColor = _useState42[1];
-  var _useState43 = React.useState(1),
+    imageTintStrength = _useState42[0],
+    setImageTintStrength = _useState42[1];
+  var _useState43 = React.useState(2),
     _useState44 = _slicedToArray(_useState43, 2),
-    qrOpacity = _useState44[0],
-    setQrOpacity = _useState44[1];
-  var _useState45 = React.useState(null),
+    qrStrokeWidth = _useState44[0],
+    setQrStrokeWidth = _useState44[1];
+  var _useState45 = React.useState(theme.color.black),
     _useState46 = _slicedToArray(_useState45, 2),
-    selectedElement = _useState46[0],
-    setSelectedElement = _useState46[1];
-  var _useState47 = React.useState(customImages || []),
+    qrStrokeColor = _useState46[0],
+    setQrStrokeColor = _useState46[1];
+  var _useState47 = React.useState(1),
     _useState48 = _slicedToArray(_useState47, 2),
-    customImagesList = _useState48[0],
-    setCustomImagesList = _useState48[1];
-  var _useState49 = React.useState(defaultQrLogo),
+    qrOpacity = _useState48[0],
+    setQrOpacity = _useState48[1];
+  var _useState49 = React.useState(null),
     _useState50 = _slicedToArray(_useState49, 2),
-    qrLogo = _useState50[0],
-    setQrLogo = _useState50[1];
-  var _useState51 = React.useState(basicTextProps),
+    selectedElement = _useState50[0],
+    setSelectedElement = _useState50[1];
+  var _useState51 = React.useState(customImages || []),
     _useState52 = _slicedToArray(_useState51, 2),
-    defaultTextProps = _useState52[0],
-    setDefaultTextProps = _useState52[1];
-  var _useState53 = React.useState(qrId),
+    customImagesList = _useState52[0],
+    setCustomImagesList = _useState52[1];
+  var _useState53 = React.useState(defaultQrLogo),
     _useState54 = _slicedToArray(_useState53, 2),
-    currentQrId = _useState54[0],
-    setCurrentQrId = _useState54[1];
+    qrLogo = _useState54[0],
+    setQrLogo = _useState54[1];
+  var _useState55 = React.useState(basicTextProps),
+    _useState56 = _slicedToArray(_useState55, 2),
+    defaultTextProps = _useState56[0],
+    setDefaultTextProps = _useState56[1];
+  var _useState57 = React.useState(qrId),
+    _useState58 = _slicedToArray(_useState57, 2),
+    currentQrId = _useState58[0],
+    setCurrentQrId = _useState58[1];
   var overallLoading = loadingFonts || loadingImages || loadingUploadImage || loading;
   var getPageDims = React.useCallback(function () {
     var _base$find;
@@ -7365,6 +7549,26 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setImageOpacity(e);
     }
   };
+  var onChangeImageTintColor = function onChangeImageTintColor(color) {
+    if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
+      changeSelectedElementProperty('tintColor', color);
+    }
+    setImageTintColor(color);
+  };
+  var onChangeImageTintStrength = function onChangeImageTintStrength(value) {
+    var nextStrength = Math.max(0, Math.min(1, value));
+    if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
+      changeSelectedElementProperty('tintStrength', nextStrength);
+    } else {
+      setImageTintStrength(nextStrength);
+    }
+  };
+  var onClearImageTint = function onClearImageTint() {
+    if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
+      changeSelectedElementProperty('tintStrength', 0);
+    }
+    setImageTintStrength(0);
+  };
   var addCustomImageToList = function addCustomImageToList(img) {
     // console.error({img});
     setCustomImagesList([].concat(_toConsumableArray(customImagesList), [img]));
@@ -7377,6 +7581,8 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       stroke: imageStrokeColor,
       strokeWidth: imageStrokeWidth,
       opacity: imageOpacity,
+      tintColor: imageTintColor,
+      tintStrength: imageTintStrength,
       type: elementTypes.image,
       draggable: true,
       // width: 100,
@@ -7501,7 +7707,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
       var file, result, imageUrl, reader, _t;
       return _regenerator().w(function (_context2) {
-        while (1) switch (_context2.n) {
+        while (1) switch (_context2.p = _context2.n) {
           case 0:
             _context2.n = 1;
             return pickImage();
@@ -7694,9 +7900,14 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     imageStrokeWidth: imageStrokeWidth,
     imageStrokeColor: imageStrokeColor,
     imageOpacity: imageOpacity,
+    imageTintColor: imageTintColor,
+    imageTintStrength: imageTintStrength,
     onChangeImageStrokeWidth: onChangeImageStrokeWidth,
     onChangeImageStrokeColor: onChangeImageStrokeColor,
     onChangeImageOpacity: onChangeImageOpacity,
+    onChangeImageTintColor: onChangeImageTintColor,
+    onChangeImageTintStrength: onChangeImageTintStrength,
+    onClearImageTint: onClearImageTint,
     onChangeShapeStrokeColor: onChangeShapeStrokeColor,
     onChangeShapeStrokeWidth: onChangeShapeStrokeWidth,
     onChangeShapeFill: onChangeShapeFill,