@arbisoft/react-design-tool 1.0.15 → 1.0.17

package/dist/esm/index.js

@@ -927,7 +927,8 @@ var basicTextProps = {
   textDecoration: 'normal',
   fontStyle: 'normal',
   fontWeight: theme.fontWeights[400],
-  textAlign: 'left'
+  textAlign: 'left',
+  lineHeight: 1
   // width: 125,
 };
 var normalFonts = ['Open Sans', 'Roboto', 'Lato', 'Montserrat', 'Source Sans Pro', 'Inter', 'Raleway', 'Poppins', 'Merriweather', 'Noto Sans', 'Work Sans', 'Ubuntu', 'Nunito', 'Playfair Display', 'DM Sans', 'PT Sans', 'Quicksand', 'Baloo 2', 'Amatic SC', 'Plus Jakarta Sans', 'Rubik', 'Oswald', 'Kalam', 'Caveat'];
@@ -975,6 +976,7 @@ var CENTER_ALIGN$6 = "Center Align";
 var RIGHT_ALIGN$6 = "Right Align";
 var FONT_FAMILY$6 = "Font Family";
 var TEXT_SIZE$6 = "Text Size";
+var TEXT_LINE_HEIGHT$6 = "Line & Paragraph Spacing";
 var TEXT_COLOR$6 = "Text Color";
 var TEXT_OPACITY$6 = "Text Opacity";
 var UNDO$6 = "Undo";
@@ -1038,6 +1040,7 @@ var enTranslations = {
 	RIGHT_ALIGN: RIGHT_ALIGN$6,
 	FONT_FAMILY: FONT_FAMILY$6,
 	TEXT_SIZE: TEXT_SIZE$6,
+	TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$6,
 	TEXT_COLOR: TEXT_COLOR$6,
 	TEXT_OPACITY: TEXT_OPACITY$6,
 	UNDO: UNDO$6,
@@ -1102,6 +1105,7 @@ var CENTER_ALIGN$5 = "Выровнять по центру";
 var RIGHT_ALIGN$5 = "Выровнять по правому краю";
 var FONT_FAMILY$5 = "Семейство шрифтов";
 var TEXT_SIZE$5 = "Размер текста";
+var TEXT_LINE_HEIGHT$5 = "Межстрочный и межабзацный интервал";
 var TEXT_COLOR$5 = "Цвет текста";
 var TEXT_OPACITY$5 = "Прозрачность текста";
 var UNDO$5 = "Отменить";
@@ -1165,6 +1169,7 @@ var ruTranslations = {
 	RIGHT_ALIGN: RIGHT_ALIGN$5,
 	FONT_FAMILY: FONT_FAMILY$5,
 	TEXT_SIZE: TEXT_SIZE$5,
+	TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$5,
 	TEXT_COLOR: TEXT_COLOR$5,
 	TEXT_OPACITY: TEXT_OPACITY$5,
 	UNDO: UNDO$5,
@@ -1229,6 +1234,7 @@ var CENTER_ALIGN$4 = "Wyrównaj do środka";
 var RIGHT_ALIGN$4 = "Wyrównaj do prawej";
 var FONT_FAMILY$4 = "Czcionka";
 var TEXT_SIZE$4 = "Rozmiar tekstu";
+var TEXT_LINE_HEIGHT$4 = "Odstępy między wierszami i akapitami";
 var TEXT_COLOR$4 = "Kolor tekstu";
 var TEXT_OPACITY$4 = "Przezroczystość tekstu";
 var UNDO$4 = "Cofnij";
@@ -1292,6 +1298,7 @@ var plTranslations = {
 	RIGHT_ALIGN: RIGHT_ALIGN$4,
 	FONT_FAMILY: FONT_FAMILY$4,
 	TEXT_SIZE: TEXT_SIZE$4,
+	TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$4,
 	TEXT_COLOR: TEXT_COLOR$4,
 	TEXT_OPACITY: TEXT_OPACITY$4,
 	UNDO: UNDO$4,
@@ -1356,6 +1363,7 @@ var CENTER_ALIGN$3 = "Zentriert";
 var RIGHT_ALIGN$3 = "Rechtsbündig";
 var FONT_FAMILY$3 = "Schriftart";
 var TEXT_SIZE$3 = "Textgröße";
+var TEXT_LINE_HEIGHT$3 = "Zeilen- & Absatzabstand";
 var TEXT_COLOR$3 = "Textfarbe";
 var TEXT_OPACITY$3 = "Texttransparenz";
 var UNDO$3 = "Rückgängig";
@@ -1419,6 +1427,7 @@ var deTranslations = {
 	RIGHT_ALIGN: RIGHT_ALIGN$3,
 	FONT_FAMILY: FONT_FAMILY$3,
 	TEXT_SIZE: TEXT_SIZE$3,
+	TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$3,
 	TEXT_COLOR: TEXT_COLOR$3,
 	TEXT_OPACITY: TEXT_OPACITY$3,
 	UNDO: UNDO$3,
@@ -1483,6 +1492,7 @@ var CENTER_ALIGN$2 = "Centrar";
 var RIGHT_ALIGN$2 = "Alinear a la derecha";
 var FONT_FAMILY$2 = "Tipo de letra";
 var TEXT_SIZE$2 = "Tamaño del texto";
+var TEXT_LINE_HEIGHT$2 = "Espaciado de línea y párrafo";
 var TEXT_COLOR$2 = "Color del texto";
 var TEXT_OPACITY$2 = "Opacidad del texto";
 var UNDO$2 = "Deshacer";
@@ -1546,6 +1556,7 @@ var esTranslations = {
 	RIGHT_ALIGN: RIGHT_ALIGN$2,
 	FONT_FAMILY: FONT_FAMILY$2,
 	TEXT_SIZE: TEXT_SIZE$2,
+	TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$2,
 	TEXT_COLOR: TEXT_COLOR$2,
 	TEXT_OPACITY: TEXT_OPACITY$2,
 	UNDO: UNDO$2,
@@ -1610,6 +1621,7 @@ var CENTER_ALIGN$1 = "Centrer";
 var RIGHT_ALIGN$1 = "Aligner à droite";
 var FONT_FAMILY$1 = "Police";
 var TEXT_SIZE$1 = "Taille du texte";
+var TEXT_LINE_HEIGHT$1 = "Espacement des lignes et des paragraphes";
 var TEXT_COLOR$1 = "Couleur du texte";
 var TEXT_OPACITY$1 = "Opacité du texte";
 var UNDO$1 = "Annuler";
@@ -1673,6 +1685,7 @@ var frTranslations = {
 	RIGHT_ALIGN: RIGHT_ALIGN$1,
 	FONT_FAMILY: FONT_FAMILY$1,
 	TEXT_SIZE: TEXT_SIZE$1,
+	TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$1,
 	TEXT_COLOR: TEXT_COLOR$1,
 	TEXT_OPACITY: TEXT_OPACITY$1,
 	UNDO: UNDO$1,
@@ -1737,6 +1750,7 @@ var CENTER_ALIGN = "Centra";
 var RIGHT_ALIGN = "Allinea a destra";
 var FONT_FAMILY = "Famiglia di font";
 var TEXT_SIZE = "Dimensione del testo";
+var TEXT_LINE_HEIGHT = "Spaziatura tra righe e paragrafi";
 var TEXT_COLOR = "Colore del testo";
 var TEXT_OPACITY = "Opacità del testo";
 var UNDO = "Annulla";
@@ -1800,6 +1814,7 @@ var itTranslations = {
 	RIGHT_ALIGN: RIGHT_ALIGN,
 	FONT_FAMILY: FONT_FAMILY,
 	TEXT_SIZE: TEXT_SIZE,
+	TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT,
 	TEXT_COLOR: TEXT_COLOR,
 	TEXT_OPACITY: TEXT_OPACITY,
 	UNDO: UNDO,
@@ -1954,7 +1969,7 @@ var propTypes$x = {
   onChangeCuttingGuideProp: PropTypes.func
 };
 
-var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$5, _templateObject5$3;
+var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$6, _templateObject5$3;
 var Container$4 = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n    flex: 1;\n    display: flex;\n    background-color: ", ";\n    background-image: ", ";\n    position: relative;\n    flex-direction: column;\n    overflow: hidden;\n"])), theme.color.white_F7F7F7, function (_ref) {
   var selectedTab = _ref.selectedTab;
   return selectedTab ? 'none' : "url(".concat(EditorBg, ")");
@@ -1973,7 +1988,7 @@ var InnerContainerWrapper = styled.div(_templateObject3$b || (_templateObject3$b
   var editorWidth = _ref5.editorWidth;
   return editorWidth || 400;
 });
-var Title = styled.p(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    align-self: flex-start;\n    font-size: 14px;\n    font-family: ", ";\n    font-weight: ", ";\n    color: ", ";\n    padding: 0 6px;\n    border-bottom-width: 0;\n"])), theme.color.gray_E8E8E8, theme.fonts.primary, theme.fontWeights[300], theme.color.gray_7A7979);
+var Title = styled.p(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    align-self: flex-start;\n    font-size: 14px;\n    font-family: ", ";\n    font-weight: ", ";\n    color: ", ";\n    padding: 0 6px;\n    border-bottom-width: 0;\n"])), theme.color.gray_E8E8E8, theme.fonts.primary, theme.fontWeights[300], theme.color.gray_7A7979);
 var EditorBox = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    min-height: ", "px;\n    min-width: ", "px;\n    background: ", ";\n    box-shadow: 1.317px 1.317px 1.317px 0px rgba(0, 0, 0, 0.08);\n    // transition: all 0.1s ease-in-out;\n    overflow: hidden;\n"])), function (_ref6) {
   var editorHeight = _ref6.editorHeight;
   return editorHeight || 470;
@@ -2127,7 +2142,7 @@ var propTypes$t = {
   disabled: PropTypes.bool
 };
 
-var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$4, _templateObject5$2, _templateObject6;
+var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$5, _templateObject5$2, _templateObject6;
 var Wrapper = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n    position: relative;\n    display: inline-block;\n    cursor: ", ";\n"])), function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? 'not-allowed' : 'pointer';
@@ -2137,7 +2152,7 @@ var TooltipText = styled.div(_templateObject2$j || (_templateObject2$j = _tagged
   return position === 'top' && css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n            bottom: 110%;\n            left: 50%;\n            transform: translateX(-50%);\n        "])));
 }, function (_ref3) {
   var position = _ref3.position;
-  return position === 'right' && css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n            top: 50%;\n            left: 105%;\n            transform: translateY(-50%);\n        "])));
+  return position === 'right' && css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n            top: 50%;\n            left: 105%;\n            transform: translateY(-50%);\n        "])));
 }, function (_ref4) {
   var position = _ref4.position;
   return position === 'bottom' && css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n            top: 110%;\n            left: 50%;\n            transform: translateX(-50%);\n        "])));
@@ -2215,13 +2230,13 @@ var propTypes$s = {
   tooltip: PropTypes.string
 };
 
-var _templateObject$n, _templateObject2$i, _templateObject3$9, _templateObject4$3;
+var _templateObject$n, _templateObject2$i, _templateObject3$9, _templateObject4$4;
 var DropDownItem = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"])));
 var IconWrapper$3 = styled.img(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n    object-fit: contain;\n"])));
 var DropDownList = styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n    position: absolute;\n    left: 0;\n    top: 50;\n    background-color: white;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    border-radius: 4px;\n    margin-top: 5px;\n    z-index: 10;\n    width: 100%;\n    max-height: 200px;\n    overflow-y: auto;\n    z-index: 9999;\n"])));
 
 // Individual option in the dropdown
-var DropDownOption = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    padding: 8px 16px;\n    cursor: pointer;\n    font-size: 14px;\n    color: #333333;\n    &:hover {\n        background-color: #f0f0f0;\n    }\n    &:active {\n        background-color: #e0e0e0;\n    }\n"])));
+var DropDownOption = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n    padding: 8px 16px;\n    cursor: pointer;\n    font-size: 14px;\n    color: #333333;\n    &:hover {\n        background-color: #f0f0f0;\n    }\n    &:active {\n        background-color: #e0e0e0;\n    }\n"])));
 
 var DropDown = function DropDown(_ref) {
   var left = _ref.left,
@@ -3165,9 +3180,10 @@ var ToolsTabBar = function ToolsTabBar(_ref) {
 ToolsTabBar.propTypes = propTypes$n;
 
 var TextToolBar = function TextToolBar(_ref) {
-  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _TEXT_DICTIONARY$lang7, _TEXT_DICTIONARY$lang8, _TEXT_DICTIONARY$lang9, _TEXT_DICTIONARY$lang10, _TEXT_DICTIONARY$lang11;
+  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _TEXT_DICTIONARY$lang7, _TEXT_DICTIONARY$lang8, _TEXT_DICTIONARY$lang9, _TEXT_DICTIONARY$lang10, _TEXT_DICTIONARY$lang11, _TEXT_DICTIONARY$lang12;
   var fontFamily = _ref.fontFamily,
     fontSize = _ref.fontSize,
+    lineHeight = _ref.lineHeight,
     color = _ref.color,
     textDecoration = _ref.textDecoration,
     fontStyle = _ref.fontStyle,
@@ -3295,9 +3311,27 @@ var TextToolBar = function TextToolBar(_ref) {
     }),
     tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang9 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang9 === void 0 ? void 0 : _TEXT_DICTIONARY$lang9.TEXT_SIZE,
     tooltipPosition: 'bottom'
+  }), /*#__PURE__*/React.createElement(OpacityPicker, {
+    gap: 11,
+    value: lineHeight,
+    varient: 'size',
+    fontFamily: theme.fonts.primary,
+    min: 1,
+    max: 5,
+    step: 0.5,
+    onChangeOpacity: function onChangeOpacity(e) {
+      return onChangeTextProperty('lineHeight', e);
+    },
+    showLeftChild: false,
+    rightChild: /*#__PURE__*/React.createElement(StyledImage, {
+      src: IconDropDown,
+      marginLeft: 10
+    }),
+    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang10 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang10 === void 0 ? void 0 : _TEXT_DICTIONARY$lang10.TEXT_LINE_HEIGHT,
+    tooltipPosition: 'bottom'
   }), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
     gap: 12,
-    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang10 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang10 === void 0 ? void 0 : _TEXT_DICTIONARY$lang10.TEXT_COLOR,
+    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang11 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang11 === void 0 ? void 0 : _TEXT_DICTIONARY$lang11.TEXT_COLOR,
     tooltipPosition: 'bottom'
   }, /*#__PURE__*/React.createElement(StyledImage, {
     src: IconTextSmall
@@ -3323,7 +3357,7 @@ var TextToolBar = function TextToolBar(_ref) {
     onChangeOpacity: function onChangeOpacity(e) {
       return onChangeTextProperty('opacity', e);
     },
-    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang11 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang11 === void 0 ? void 0 : _TEXT_DICTIONARY$lang11.TEXT_OPACITY,
+    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang12 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang12 === void 0 ? void 0 : _TEXT_DICTIONARY$lang12.TEXT_OPACITY,
     tooltipPosition: 'bottom'
   }));
 };
@@ -3527,6 +3561,7 @@ var TopToolBar = function TopToolBar(_ref) {
   }) : selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.text) ? /*#__PURE__*/React.createElement(TextToolBar, {
     fontFamily: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontFamily : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontFamily,
     fontSize: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontSize : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontSize,
+    lineHeight: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.lineHeight : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.lineHeight,
     color: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.color : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.color,
     textDecoration: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.textDecoration : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textDecoration,
     fontStyle: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontStyle : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontStyle,
@@ -3593,11 +3628,11 @@ var propTypes$i = {
   translation: PropTypes.object
 };
 
-var _templateObject$e, _templateObject2$a, _templateObject3$7, _templateObject4$2, _templateObject5$1;
+var _templateObject$e, _templateObject2$a, _templateObject3$7, _templateObject4$3, _templateObject5$1;
 var Container$3 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n"])));
 var ZoomControlWrapper = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    border-radius: 6px;\n    height: 44px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    background: white;\n"])), theme.color.gray_200);
 var ZoomButton = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 0 14px;\n    cursor: pointer;\n"])));
-var Divider = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n    width: 1px;\n    height: 80%;\n    background: rgba(77, 98, 119, 0.2);\n"])));
+var Divider = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    width: 1px;\n    height: 80%;\n    background: rgba(77, 98, 119, 0.2);\n"])));
 var ZoomPercentage = styled.p(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n    padding: 0 14px;\n    font-family: ", ";\n    font-weight: ", ";\n    color: ", ";\n"])), theme.fonts.primary, theme.fontWeights[500], theme.color.icon_gray);
 
 var propTypes$h = {
@@ -3655,8 +3690,9 @@ var ZoomControls = function ZoomControls(_ref) {
     onZoomOut = _ref.onZoomOut,
     languageLocale = _ref.languageLocale,
     onSave = _ref.onSave,
+    showSaveButton = _ref.showSaveButton,
     saveButtonText = _ref.saveButtonText;
-  return /*#__PURE__*/React.createElement(Container$3, null, onSave && /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React.createElement(Container$3, null, showSaveButton && /*#__PURE__*/React.createElement(Button, {
     text: saveButtonText || (TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.SAVE),
     varient: ButtonVarients === null || ButtonVarients === void 0 ? void 0 : ButtonVarients.primary,
     marginBottom: 10,
@@ -3831,6 +3867,7 @@ var BottomToolBar = function BottomToolBar(_ref) {
     sendSelectedElementToBack = _ref.sendSelectedElementToBack,
     languageLocale = _ref.languageLocale,
     onSave = _ref.onSave,
+    showSaveButton = _ref.showSaveButton,
     saveButtonText = _ref.saveButtonText;
   var onZoomIn = function onZoomIn() {
     if (zoomPercentage < 300) {
@@ -3868,6 +3905,7 @@ var BottomToolBar = function BottomToolBar(_ref) {
     onZoomOut: onZoomOut,
     languageLocale: languageLocale,
     onSave: onSave,
+    showSaveButton: showSaveButton,
     saveButtonText: saveButtonText
   }));
 };
@@ -4658,6 +4696,8 @@ var Editor = function Editor(_ref) {
     cuttingGuideStrokeColor = _ref.cuttingGuideStrokeColor,
     onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp,
     onSave = _ref.onSave,
+    showSaveButton = _ref.showSaveButton,
+    onSetSelectedTab = _ref.onSetSelectedTab,
     saveButtonText = _ref.saveButtonText,
     onRemoveBackgroundImage = _ref.onRemoveBackgroundImage;
   var transformerRef = useRef(null);
@@ -4988,7 +5028,7 @@ var Editor = function Editor(_ref) {
   }), /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(InnerContainerWrapper, {
     editorHeight: editorHeight + 50,
     editorWidth: editorWidth
-  }, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(EditorBox, {
+  }, title && /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(EditorBox, {
     editorHeight: editorHeight,
     editorWidth: editorWidth
   }, !loadingImages && !loadingFonts && /*#__PURE__*/React.createElement(Stage, {
@@ -4998,11 +5038,13 @@ var Editor = function Editor(_ref) {
     onMouseDown: function onMouseDown(e) {
       if (e.target === e.target.getStage()) {
         onSelectElement(null);
+        onSetSelectedTab === null || onSetSelectedTab === void 0 || onSetSelectedTab(sideBarpillsList.template);
       }
     }
   }, /*#__PURE__*/React.createElement(Layer, {
     onClick: function onClick() {
       onSelectElement(null);
+      onSetSelectedTab === null || onSetSelectedTab === void 0 || onSetSelectedTab(sideBarpillsList.template);
     },
     listening: false
   }, /*#__PURE__*/React.createElement(Rect, {
@@ -5071,6 +5113,7 @@ var Editor = function Editor(_ref) {
     sendSelectedElementToBack: sendSelectedElementToBack,
     languageLocale: languageLocale,
     onSave: onSave,
+    showSaveButton: showSaveButton,
     saveButtonText: saveButtonText
   }));
 };
@@ -5164,7 +5207,7 @@ var propTypes$8 = {
   content: PropTypes.node
 };
 
-var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$1, _templateObject5;
+var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$2, _templateObject5;
 var CollapsableContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    margin-top: ", "px;\n    margin-bottom: ", "px;\n"])), function (_ref) {
   var marginTop = _ref.marginTop;
   return marginTop;
@@ -5174,7 +5217,7 @@ var CollapsableContainer = styled.div(_templateObject$8 || (_templateObject$8 =
 });
 var CollapsableHeader = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    cursor: pointer;\n    justify-content: flex-start;\n    align-self: flex-start;\n    margin-bottom: 14px;\n"])));
 var LeftIconWrapper = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n    margin-right: 6px;\n    display: flex;\n    align-items: center;\n"])));
-var IconWrapper = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    margin-top: 3px;\n"])));
+var IconWrapper = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    margin-top: 3px;\n"])));
 var CollapsableContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: ", ";\n"])), function (_ref3) {
   var visible = _ref3.visible;
   return visible ? 'flex' : 'none';
@@ -5215,15 +5258,17 @@ var Collapsable = function Collapsable(_ref) {
 };
 Collapsable.propTypes = propTypes$8;
 
-var _templateObject$7, _templateObject2$5, _templateObject3$5;
+var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$1;
 var TemplatesContainer = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: 10px;\n    align-items: flex-start;\n"])));
-var TemplateItem = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n"])));
-var StyledContainer$5 = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    padding: 20px 18px;\n    overflow: auto;\n"])));
+var TemplateItem = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.2);\n        opacity: 0;\n        transition: opacity 0.3s ease;\n        z-index: 1;\n    }\n\n    &:hover::before {\n        opacity: 1;\n    }\n    &:hover > button {\n        display: flex;\n        z-index: 2;\n    }\n"])));
+var StyledDeleteButton = styled.button(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n    display: none;\n    justify-content: center;\n    align-items: center;\n    height: 30px;\n    width: 30px;\n    padding: 8px;\n    border-radius: 100%;\n    background: rgba(255, 255, 255, 1);\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n\n    &:hover {\n        border-color: #d91919;\n    }\n    &:focus {\n        outline: none;\n    }\n"])));
+var StyledContainer$5 = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    padding: 20px 18px;\n    overflow: auto;\n"])));
 
 var TemplateSideBar = function TemplateSideBar(_ref) {
   var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3;
   var oncreateNewTemplate = _ref.oncreateNewTemplate,
     languageLocale = _ref.languageLocale,
+    onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
     defaultTemplatesList = _ref.defaultTemplatesList,
     customTemplatesList = _ref.customTemplatesList;
   var renderDefaultContent = useMemo(function () {
@@ -5262,7 +5307,15 @@ var TemplateSideBar = function TemplateSideBar(_ref) {
         maxHeight: 125,
         maxWidth: 115,
         borderRadius: 6
-      }), /*#__PURE__*/React.createElement(StyledText, {
+      }), /*#__PURE__*/React.createElement(StyledDeleteButton, {
+        onClick: function onClick(e) {
+          e.stopPropagation(); // ⛔ Prevents parent onClick
+          onDeleteCustomTemplate === null || onDeleteCustomTemplate === void 0 || onDeleteCustomTemplate(item);
+        }
+      }, /*#__PURE__*/React.createElement(StyledImage, {
+        src: IconDelete,
+        height: 24
+      })), /*#__PURE__*/React.createElement(StyledText, {
         color: theme.color.gray_A1A1A1,
         fontSize: 10,
         style: {
@@ -5661,6 +5714,7 @@ var HelperSideBar = function HelperSideBar(_ref) {
     setLoadingUploadImage = _ref.setLoadingUploadImage,
     defaultTemplatesList = _ref.defaultTemplatesList,
     customTemplatesList = _ref.customTemplatesList,
+    onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
     styleProps = _ref.styleProps,
     defaultText = _ref.defaultText,
     languageLocale = _ref.languageLocale;
@@ -5675,6 +5729,7 @@ var HelperSideBar = function HelperSideBar(_ref) {
   }, selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.template) ? /*#__PURE__*/React.createElement(TemplateSideBar, {
     oncreateNewTemplate: oncreateNewTemplate,
     languageLocale: languageLocale,
+    onDeleteCustomTemplate: onDeleteCustomTemplate,
     defaultTemplatesList: defaultTemplatesList,
     customTemplatesList: customTemplatesList,
     styleProps: styleProps
@@ -5820,7 +5875,7 @@ var isPropValid = /* #__PURE__ */memoize(function (prop) {
 var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _elements$elements$fi, _elements$find4, _elements$find5, _elements$find6;
   var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'untitled' : _ref$title,
+    title = _ref$title === void 0 ? '' : _ref$title,
     _ref$elementsList = _ref.elementsList,
     elementsList = _ref$elementsList === void 0 ? defaultElements : _ref$elementsList,
     uploadImageCallBack = _ref.uploadImageCallBack,
@@ -5832,17 +5887,19 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     defaultTemplatesList = _ref$defaultTemplates === void 0 ? [] : _ref$defaultTemplates,
     _ref$customTemplatesL = _ref.customTemplatesList,
     customTemplatesList = _ref$customTemplatesL === void 0 ? [] : _ref$customTemplatesL,
+    onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
     _ref$qrLink = _ref.qrLink,
     qrLink = _ref$qrLink === void 0 ? 'www.google.com' : _ref$qrLink,
     _ref$styleProps = _ref.styleProps,
     styleProps = _ref$styleProps === void 0 ? {} : _ref$styleProps,
     defaultText = _ref.defaultText,
     onSave = _ref.onSave,
+    showSaveButton = _ref.showSaveButton,
     saveButtonText = _ref.saveButtonText,
     _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? 'en' : _ref$locale;
   var stageRef = useRef(null);
-  var _useState = useState(null),
+  var _useState = useState(sideBarpillsList.template),
     _useState2 = _slicedToArray(_useState, 2),
     selectedTab = _useState2[0],
     setSelectedTab = _useState2[1];
@@ -5866,11 +5923,11 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     loadingUploadImage = _useState12[0],
     setLoadingUploadImage = _useState12[1];
-  var _useState13 = useState(false),
+  var _useState13 = useState(true),
     _useState14 = _slicedToArray(_useState13, 2),
     helperSideBarVisible = _useState14[0],
     setHelperSideBarVisible = _useState14[1];
-  var _useState15 = useState(80),
+  var _useState15 = useState(100),
     _useState16 = _slicedToArray(_useState15, 2),
     zoomPercentage = _useState16[0],
     setZoomPercentage = _useState16[1];
@@ -6666,6 +6723,7 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setLoadingUploadImage: setLoadingUploadImage,
     defaultTemplatesList: defaultTemplatesList,
     customTemplatesList: customTemplatesList,
+    onDeleteCustomTemplate: onDeleteCustomTemplate,
     styleProps: styleProps,
     defaultText: defaultText,
     languageLocale: languageLocale
@@ -6736,6 +6794,8 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     uploadImageCallBack: uploadImageCallBack,
     setLoadingUploadImage: setLoadingUploadImage,
     onSave: onSave && onSaveProgress,
+    showSaveButton: showSaveButton,
+    onSetSelectedTab: onSelectedTab,
     saveButtonText: saveButtonText,
     languageLocale: languageLocale,
     onRemoveBackgroundImage: onRemoveBackgroundImage