@arbisoft/react-design-tool 1.0.2 → 1.0.4

package/README.md

@@ -12,6 +12,16 @@ With this tool, you can:
 - **Save** the final design data and image output
 
 Perfect for integrating into applications that require user-driven visual content creation.
+ ## 🎬 Studio Preview
+
+**Live Walkthrough (GIF)**
+
+![Studio Editor Screenshot](https://i.ibb.co/M5hZtFTG/design-tool.gif)
+## 🖥️ Demo
+
+Check out the live demo here:
+
+ [![Live Demo](https://img.shields.io/badge/Live-Demo-blue?style=for-the-badge)](https://codesandbox.io/p/sandbox/fdftlr)
 
 ## 📦 Installation
 
@@ -25,12 +35,12 @@ yarn add @arbisoft/react-design-tool
 ```
 #### Required Dependencies: 
 ```bash
-npm install konva prop-types qrcode react-konva react-konva-utils styled-components
+npm install konva prop-types qrcode react-konva react-konva-utils styled-components @emotion/is-prop-valid
 ```
 
 OR
 ```bash
-yarn add konva prop-types qrcode react-konva react-konva-utils styled-components
+yarn add konva prop-types qrcode react-konva react-konva-utils styled-components @emotion/is-prop-valid
 
 ```
 ## 🚀 Quick Start

package/dist/cjs/index.js

@@ -616,7 +616,7 @@ var propTypes$y = {
   pillActiveColor: PropTypes.string
 };
 
-var _templateObject$s, _templateObject2$m, _templateObject3$b;
+var _templateObject$s, _templateObject2$m, _templateObject3$c;
 var SideBarItem = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100px;\n    min-height: 100px;\n    background-color: ", ";\n    margin-bottom: 2px;\n    cursor: pointer;\n    transition: background-color 0.2s ease-in-out;\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), function (_ref) {
   var isSelected = _ref.isSelected,
     pillActiveColor = _ref.pillActiveColor;
@@ -630,23 +630,23 @@ var SideBarIcon = styled.img(_templateObject2$m || (_templateObject2$m = _tagged
     isSelected = _ref3$isSelected === void 0 ? false : _ref3$isSelected;
   return isSelected ? 'brightness(0) invert(1)' : 'none';
 }, SideBarItem);
-var SideBarText = styled.p(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: 12px;\n    font-family: ", ";\n    font-weight: ", ";\n    line-height: 109.023%;\n    text-align: center;\n\n    ", ":hover & {\n        color: ", ";\n    }\n"])), function (_ref4) {
+var SideBarText = styled.p(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: 12px;\n    font-family: ", ";\n    font-weight: ", ";\n    line-height: 109.023%;\n    text-align: center;\n\n    ", ":hover & {\n        color: ", ";\n    }\n"])), function (_ref4) {
   var _ref4$isSelected = _ref4.isSelected,
     isSelected = _ref4$isSelected === void 0 ? false : _ref4$isSelected;
   return isSelected ? theme.color.white : theme.color.gray_535354;
 }, theme.fonts.primary, theme.fontWeights[400], SideBarItem, theme.color.white);
 
 var SideBarPill = function SideBarPill(_ref) {
-  var key = _ref.key,
-    _ref$isSelected = _ref.isSelected,
+  var _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$onClick = _ref.onClick,
     _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     icon = _ref.icon,
     text = _ref.text,
-    pillActiveColor = _ref.pillActiveColor;
+    pillActiveColor = _ref.pillActiveColor,
+    id = _ref.id;
   return /*#__PURE__*/React.createElement(SideBarItem, {
-    key: key,
+    key: id,
     isSelected: isSelected,
     onClick: function onClick() {
       return _onClick();
@@ -759,6 +759,8 @@ var IconHeart = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%2
 
 var IconUnlock = "data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.66368%202.01017C9.32164%201.94371%209.98083%202.1241%2010.5133%202.51632C11.0457%202.90854%2011.4134%203.4846%2011.545%204.13269C11.6183%204.49351%2011.9702%204.72662%2012.331%204.65336C12.6918%204.58009%2012.925%204.22819%2012.8517%203.86736C12.6543%202.89524%2012.1027%202.03114%2011.3041%201.44281C10.5054%200.854482%209.51663%200.583899%208.52969%200.68359C7.54691%200.782861%206.63577%201.24224%205.97161%201.97299L5.96306%201.98228C5.29856%202.71803%204.93098%203.67431%204.93156%204.66567L4.93156%206.66675H4.26489C3.16032%206.66675%202.26489%207.56218%202.26489%208.66675V13.3334C2.26489%2014.438%203.16032%2015.3334%204.26489%2015.3334H13.5982C14.7028%2015.3334%2015.5982%2014.438%2015.5982%2013.3334V8.66675C15.5982%207.56218%2014.7028%206.66675%2013.5982%206.66675H6.26489L6.26489%204.66601C6.26423%204.00811%206.50679%203.37331%206.94572%202.88356L6.95268%202.87597C7.39593%202.3852%208.00572%202.07663%208.66368%202.01017ZM4.26489%208.00008C3.8967%208.00008%203.59823%208.29856%203.59823%208.66675V13.3334C3.59823%2013.7016%203.8967%2014.0001%204.26489%2014.0001H13.5982C13.9664%2014.0001%2014.2649%2013.7016%2014.2649%2013.3334V8.66675C14.2649%208.29856%2013.9664%208.00008%2013.5982%208.00008H4.26489Z%22%20fill%3D%22%234D6277%22%2F%3E%3C%2Fsvg%3E";
 
+var IconCross = "data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20enable-background%3D%22new%200%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.3%2018.7c.2.2.4.3.7.3s.5-.1.7-.3l5.3-5.3%205.3%205.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1%200-1.4L13.4%2012l5.3-5.3c.4-.4.4-1%200-1.4s-1-.4-1.4%200L12%2010.6%206.7%205.3c-.4-.4-1-.4-1.4%200s-.4%201%200%201.4l5.3%205.3-5.3%205.3c-.4.4-.4%201%200%201.4z%22%20id%3D%22_icons%22%20fill%3D%22%23ffffff%22%20class%3D%22fill-000000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E";
+
 var EditorBg = "/images/small-dots.png";
 
 var topTabBarpadding = '11.51px 14.16px';
@@ -1880,6 +1882,7 @@ var SideBar = function SideBar(_ref) {
       }
       return /*#__PURE__*/React.createElement(SideBarPill, {
         key: item === null || item === void 0 ? void 0 : item.id,
+        id: item === null || item === void 0 ? void 0 : item.id,
         isSelected: selectedSideBarItem === (item === null || item === void 0 ? void 0 : item.id),
         onClick: function onClick() {
           return onClickSinglePill(item === null || item === void 0 ? void 0 : item.id);
@@ -1954,13 +1957,13 @@ var propTypes$x = {
   onChangeCuttingGuideProp: PropTypes.func
 };
 
-var _templateObject$r, _templateObject2$l, _templateObject3$a, _templateObject4$5, _templateObject5$3;
+var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$5, _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, ")");
 });
-var InnerContainer = styled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n    // display: flex;\n    // flex-direction: column;\n    // overflow: auto;\n    // flex: 1;\n    // align-items: center;\n    // justify-content: center;\n    // flex-grow: 1;\n    // background: green;\n    // // min-height: 100px;\n\n    display: grid;\n    place-items: center;\n    overflow: auto;\n    flex: 1;\n"])));
-var InnerContainerWrapper = styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n    justify-content: center;\n    min-height: ", "px;\n    height: ", "px;\n    min-width: ", "px;\n    width: ", "px;\n"])), function (_ref2) {
+var InnerContainer = styled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n    // display: flex;\n    // flex-direction: column;\n    // overflow: auto;\n    // flex: 1;\n    // align-items: center;\n    // justify-content: center;\n    // flex-grow: 1;\n    // background: green;\n    // // min-height: 100px;\n\n    display: grid;\n    place-items: center;\n    overflow: auto;\n    flex: 1;\n    position: relative;\n"])));
+var InnerContainerWrapper = styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n    justify-content: center;\n    min-height: ", "px;\n    height: ", "px;\n    min-width: ", "px;\n    width: ", "px;\n"])), function (_ref2) {
   var editorHeight = _ref2.editorHeight;
   return editorHeight || 500;
 }, function (_ref3) {
@@ -2073,7 +2076,7 @@ var propTypes$u = {
 };
 
 var _templateObject$p;
-var StyledContainer$6 = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    border-radius: 8px;\n    background-color: ", ";\n    height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    cursor: ", ";\n    gap: ", ";\n    opacity: ", ";\n    pointer-events: ", ";\n"])), theme.color.gray_200, theme.color.white, function (_ref) {
+var StyledContainer$6 = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    border-radius: 8px;\n    background-color: ", ";\n    height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    cursor: ", ";\n    gap: ", ";\n    opacity: ", ";\n    pointer-events: ", ";\n    position: relative;\n"])), theme.color.gray_200, theme.color.white, function (_ref) {
   var _ref$height = _ref.height,
     height = _ref$height === void 0 ? 40 : _ref$height;
   return "".concat(height, "px");
@@ -2127,14 +2130,14 @@ var propTypes$t = {
   disabled: PropTypes.bool
 };
 
-var _templateObject$o, _templateObject2$j, _templateObject3$9, _templateObject4$4, _templateObject5$2, _templateObject6;
+var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$4, _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';
 });
 var TooltipText = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral(["\n    visibility: hidden;\n    background-color: rgba(0, 0, 0, 0.7);\n    color: white;\n    text-align: center;\n    padding: 4px 10px;\n    border-radius: 4px;\n    position: absolute;\n    z-index: 9999;\n    white-space: nowrap;\n    opacity: 0;\n    transition: all 0.1s;\n    font-size: 13px;\n    font-family: ", ";\n    font-weight: ", ";\n\n    ", "\n    ", "\n  ", "\n  ", "\n\n  ", ":hover & {\n        visibility: visible;\n        opacity: 1;\n    }\n"])), theme.fonts.primary, theme.fontWeights[400], function (_ref2) {
   var position = _ref2.position;
-  return position === 'top' && styled.css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n            bottom: 110%;\n            left: 50%;\n            transform: translateX(-50%);\n        "])));
+  return position === 'top' && styled.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' && styled.css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n            top: 50%;\n            left: 105%;\n            transform: translateY(-50%);\n        "])));
@@ -2215,10 +2218,10 @@ var propTypes$s = {
   tooltip: PropTypes.string
 };
 
-var _templateObject$n, _templateObject2$i, _templateObject3$8, _templateObject4$3;
+var _templateObject$n, _templateObject2$i, _templateObject3$9, _templateObject4$3;
 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$8 || (_templateObject3$8 = _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"])));
+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: #333;\n    &:hover {\n        background-color: #f0f0f0;\n    }\n    &:active {\n        background-color: #e0e0e0;\n    }\n"])));
@@ -2289,9 +2292,10 @@ var DropDown = function DropDown(_ref) {
 };
 DropDown.propTypes = propTypes$s;
 
-var _templateObject$m, _templateObject2$h;
+var _templateObject$m, _templateObject2$h, _templateObject3$8;
 var Label$1 = styled.p(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: 14px;\n    font-weight: ", ";\n    font-family: ", ";\n"])), theme.color.gray_700, theme.fontWeights[400], theme.fonts.primary);
 var RowContainer$4 = styled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 2px;\n"])));
+var RemoveButton = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n    height: 20px;\n    width: 20px;\n    border-radius: 20px;\n    position: absolute;\n    right: -7px;\n    top: -7px;\n    background: #ff4d4d;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"])));
 
 var propTypes$r = {
   backgroundColor: PropTypes.string,
@@ -2933,7 +2937,9 @@ var TemplateToolBar = function TemplateToolBar(_ref) {
     setLoadingUploadImage = _ref.setLoadingUploadImage,
     cuttingGuideStroke = _ref.cuttingGuideStroke,
     cuttingGuideStrokeColor = _ref.cuttingGuideStrokeColor,
-    onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp;
+    onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp,
+    canvasBackgroundImage = _ref.canvasBackgroundImage,
+    onRemoveBackgroundImage = _ref.onRemoveBackgroundImage;
   var selectBackgroundColor = function selectBackgroundColor(e) {
     onSetBackgroundColor(e);
   };
@@ -3005,8 +3011,19 @@ var TemplateToolBar = function TemplateToolBar(_ref) {
     onClick: handleBackgroundUpload,
     tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.BACKGROUND_IMAGE,
     tooltipPosition: 'bottom'
+  }, canvasBackgroundImage && /*#__PURE__*/React.createElement(RemoveButton, {
+    onClick: function onClick(e) {
+      onRemoveBackgroundImage && onRemoveBackgroundImage();
+      e.stopPropagation();
+    }
   }, /*#__PURE__*/React.createElement(StyledImage, {
-    src: IconBackgroundImage
+    src: IconCross,
+    height: 15,
+    width: 15
+  })), /*#__PURE__*/React.createElement(StyledImage, {
+    src: (canvasBackgroundImage === null || canvasBackgroundImage === void 0 ? void 0 : canvasBackgroundImage.src) || IconBackgroundImage,
+    height: 24,
+    width: 24
   })), /*#__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.BACKGROUND_IMAGE_OPACITY,
     gap: 10,
@@ -3486,7 +3503,8 @@ var TopToolBar = function TopToolBar(_ref) {
     setLoadingUploadImage = _ref.setLoadingUploadImage,
     cuttingGuideStroke = _ref.cuttingGuideStroke,
     cuttingGuideStrokeColor = _ref.cuttingGuideStrokeColor,
-    onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp;
+    onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp,
+    onRemoveBackgroundImage = _ref.onRemoveBackgroundImage;
   return /*#__PURE__*/React.createElement(ToolBarWrapper, {
     disabled: selectedElement && !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable)
   }, selectedElement && !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable) && /*#__PURE__*/React.createElement(OverlayBlocker, {
@@ -3507,7 +3525,8 @@ var TopToolBar = function TopToolBar(_ref) {
     setLoadingUploadImage: setLoadingUploadImage,
     cuttingGuideStroke: cuttingGuideStroke,
     cuttingGuideStrokeColor: cuttingGuideStrokeColor,
-    onChangeCuttingGuideProp: onChangeCuttingGuideProp
+    onChangeCuttingGuideProp: onChangeCuttingGuideProp,
+    onRemoveBackgroundImage: onRemoveBackgroundImage
   }) : 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,
@@ -4643,7 +4662,8 @@ var Editor = function Editor(_ref) {
     cuttingGuideStrokeColor = _ref.cuttingGuideStrokeColor,
     onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp,
     onSave = _ref.onSave,
-    saveButtonText = _ref.saveButtonText;
+    saveButtonText = _ref.saveButtonText,
+    onRemoveBackgroundImage = _ref.onRemoveBackgroundImage;
   var transformerRef = React.useRef(null);
   React.useEffect(function () {
     if (transformerRef !== null && transformerRef !== void 0 && transformerRef.current) {
@@ -4966,7 +4986,8 @@ var Editor = function Editor(_ref) {
     setLoadingUploadImage: setLoadingUploadImage,
     cuttingGuideStroke: cuttingGuideStroke,
     cuttingGuideStrokeColor: cuttingGuideStrokeColor,
-    onChangeCuttingGuideProp: onChangeCuttingGuideProp
+    onChangeCuttingGuideProp: onChangeCuttingGuideProp,
+    onRemoveBackgroundImage: onRemoveBackgroundImage
   }), /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(InnerContainerWrapper, {
     editorHeight: editorHeight + 50,
     editorWidth: editorWidth
@@ -5714,7 +5735,8 @@ var Overlay = function Overlay(_ref) {
       background: backgroundColor,
       display: 'flex',
       alignItems: 'center',
-      justifyContent: 'center'
+      justifyContent: 'center',
+      zIndex: 99999
     }
   }, children);
 };
@@ -5756,6 +5778,27 @@ var LoadingSpinner = function LoadingSpinner(_ref) {
 };
 LoadingSpinner.propTypes = propTypes;
 
+function memoize(fn) {
+  var cache = Object.create(null);
+  return function (arg) {
+    if (cache[arg] === undefined) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+// 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 isPropValid = /* #__PURE__ */memoize(function (prop) {
+  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
+  /* o */
+  && prop.charCodeAt(1) === 110
+  /* n */
+  && prop.charCodeAt(2) < 91;
+}
+/* Z+1 */
+);
+
 /**
  * @typedef {Object} StudioProps
  * @property {string} [title]
@@ -5784,8 +5827,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$elementsList = _ref.elementsList,
     elementsList = _ref$elementsList === void 0 ? defaultElements : _ref$elementsList,
     uploadImageCallBack = _ref.uploadImageCallBack,
-    _ref$customImages = _ref.customImages,
-    customImages = _ref$customImages === void 0 ? [] : _ref$customImages,
+    customImages = _ref.customImages,
     _ref$defaultImages = _ref.defaultImages,
     defaultImages = _ref$defaultImages === void 0 ? defaultSideBarImagesList : _ref$defaultImages,
     disableWhiteLabel = _ref.disableWhiteLabel,
@@ -5895,7 +5937,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState46 = _slicedToArray(_useState45, 2),
     selectedElement = _useState46[0],
     setSelectedElement = _useState46[1];
-  var _useState47 = React.useState(customImages),
+  var _useState47 = React.useState(customImages || []),
     _useState48 = _slicedToArray(_useState47, 2),
     customImagesList = _useState48[0],
     setCustomImagesList = _useState48[1];
@@ -5946,17 +5988,18 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }()
     };
   });
+  // console.log(isPropValid('onClick'));
   React.useEffect(function () {
     setLanguageLocale(validateLocale(locale));
   }, [locale]);
   React.useEffect(function () {
-    setCustomImagesList(_toConsumableArray(customImages));
+    setCustomImagesList(customImages);
   }, [customImages]);
   React.useEffect(function () {
     setLoadingFonts(true);
-    loadAllGoogleFonts().then(function (msg) {
+    loadAllGoogleFonts().then(function () {
       // eslint-disable-next-line no-console
-      console.log(msg);
+      // console.log(msg);
     })["catch"](function (err) {
       // eslint-disable-next-line no-console
       console.error('❌ Error loading fonts:', err);
@@ -5975,12 +6018,13 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var LoadImages = function LoadImages(elems) {
     setLoadingImages(true);
     preloadRelevantImages(elems).then(function (_ref2) {
-      var successes = _ref2.successes,
-        errors = _ref2.errors;
-      // eslint-disable-next-line no-console
-      console.log('✅ Loaded images:', successes);
+      var errors = _ref2.errors;
       // eslint-disable-next-line no-console
-      console.log('❌ Failed images:', errors);
+      // console.log('✅ Loaded images:', successes);
+      if ((errors === null || errors === void 0 ? void 0 : errors.length) > 0) {
+        // eslint-disable-next-line no-console
+        console.log('❌ Failed images:', errors);
+      }
     })["catch"](function (err) {
       // eslint-disable-next-line no-console
       console.error('Something went really wrong:', err);
@@ -6166,6 +6210,16 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
     saveHistory([].concat(_toConsumableArray(elemClone), [newElement]));
   };
+  var onRemoveBackgroundImage = function onRemoveBackgroundImage() {
+    var elemClone = JSON.parse(JSON.stringify(elements));
+    var backgroundImageIndex = elemClone.findIndex(function (e) {
+      return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
+    });
+    if (backgroundImageIndex > -1) {
+      elemClone.splice(backgroundImageIndex, 1);
+      saveHistory(elemClone);
+    }
+  };
   var onChangeBackgroundImageOpacity = function onChangeBackgroundImageOpacity(val) {
     var backgroundImageIndex = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
@@ -6582,7 +6636,9 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return _ref4.apply(this, arguments);
     };
   }();
-  return /*#__PURE__*/React.createElement(StudioWrapper, null, /*#__PURE__*/React.createElement(SideBar, {
+  return /*#__PURE__*/React.createElement(styled.StyleSheetManager, {
+    shouldForwardProp: isPropValid
+  }, /*#__PURE__*/React.createElement(StudioWrapper, null, /*#__PURE__*/React.createElement(SideBar, {
     selectedSideBarItem: selectedTab,
     onClickPill: onSelectedTab,
     languageLocale: languageLocale,
@@ -6684,11 +6740,12 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setLoadingUploadImage: setLoadingUploadImage,
     onSave: onSave && onSaveProgress,
     saveButtonText: saveButtonText,
-    languageLocale: languageLocale
+    languageLocale: languageLocale,
+    onRemoveBackgroundImage: onRemoveBackgroundImage
   }), (loadingFonts || loadingImages || loadingUploadImage || loading) && /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(LoadingSpinner, {
     size: "60px",
     color: theme.color.secondary
-  })));
+  }))));
 });
 Studio.propTypes = propTypes$A;
 Studio.displayName = 'Studio';