@arbisoft/react-design-tool 1.0.60 → 1.0.62

package/README.md

@@ -12,10 +12,16 @@ With this tool, you can:
 
 Perfect for integrating into applications that require user-driven visual content creation.
 
+### Image tinting at a glance
+- Select any image to reveal **Tint Color**, **Tint Strength (0–100%)**, and **Remove Tint**.
+- Default tint strength is set to **60%** for balanced coloring without hiding details.
+- Works on-canvas and in exported images (Konva filter-based).
+
 ---
 
 ## 🔔 What’s New
 
+- **Image tinting for photos**: New **Tint Color** and **Tint Strength** controls appear when an image is selected. Default tint is a balanced 60%, adjustable 0–100%, with a one-click **Remove Tint**.
 - **Auto-placement for QR ID**: When enabled, the QR ID text is **automatically positioned above the Location text** (`LOCATION_ELEMENT_ID`).  
   If the Location element doesn’t exist, it’s **centered on the canvas**.
 - **Persistent QR ID across template switches**: If the QR ID was visible before switching templates, it stays visible and **reflows** for the new template.
@@ -58,13 +64,13 @@ yarn add @arbisoft/react-design-tool
 #### ⚠️ Important: Installation Guide for React 18 and Below
 
 ```bash
-npm install @arbisoft/react-design-tool@1.0.60
+npm install @arbisoft/react-design-tool@1.0.62
 ```
 
 OR
 
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.60
+yarn add @arbisoft/react-design-tool@1.0.62
 
 ```
 

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);
@@ -811,8 +811,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 +889,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 +968,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 +1044,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 +1123,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 +1199,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 +1278,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 +1354,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 +1433,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 +1509,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 +1588,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 +1664,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 +1743,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 +1819,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 +1898,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 +1974,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 +2053,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 +2129,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 +2250,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 +2331,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,
@@ -3076,7 +3158,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 +3766,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 +3780,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 +3805,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 +3965,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 +4034,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 +4385,7 @@ var propTypes$e = {
 };
 
 var CanvasImage = function CanvasImage(_ref) {
+  var _element$tintStrength;
   var id = _ref.id,
     element = _ref.element,
     _onClick = _ref.onClick,
@@ -4270,6 +4401,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;
@@ -4337,13 +4492,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();
     },
@@ -5164,6 +5332,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 +5672,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,
@@ -6593,38 +6771,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 +7551,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 +7583,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,
@@ -7694,9 +7902,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,