@arbisoft/react-design-tool 1.0.42 → 1.0.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +2 -2
  2. package/dist/cjs/index.js +61 -32
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/esm/index.js +61 -32
  5. package/dist/esm/index.js.map +1 -1
  6. package/package.json +3 -3
package/README.md CHANGED
@@ -40,13 +40,13 @@ yarn add @arbisoft/react-design-tool
40
40
  #### ⚠️ Important: Installation Guide for React 18 and Below
41
41
 
42
42
  ```bash
43
- npm install @arbisoft/react-design-tool@1.0.41
43
+ npm install @arbisoft/react-design-tool@1.0.44
44
44
  ```
45
45
 
46
46
  OR
47
47
 
48
48
  ```bash
49
- yarn add @arbisoft/react-design-tool@1.0.41
49
+ yarn add @arbisoft/react-design-tool@1.0.44
50
50
 
51
51
  ```
52
52
 
package/dist/cjs/index.js CHANGED
@@ -543,8 +543,6 @@ var IconGraph = "data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%2
543
543
 
544
544
  var IconCheveronDown = "data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%227%22%20viewBox%3D%220%200%2012%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11%201L6%206L1%201%22%20stroke%3D%22%23646464%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
545
545
 
546
- var IconInfo = "data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2015%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M7.49312%2011.0095C7.67156%2011.0095%207.82229%2010.948%207.94531%2010.8248C8.06833%2010.7016%208.12984%2010.5507%208.12984%2010.3722C8.12984%2010.1938%208.06823%2010.043%207.945%209.92C7.82177%209.79708%207.67094%209.73562%207.4925%209.73562C7.31406%209.73562%207.16333%209.79724%207.04031%209.92047C6.91729%2010.0437%206.85578%2010.1945%206.85578%2010.373C6.85578%2010.5514%206.9174%2010.7021%207.04063%2010.8252C7.16385%2010.9481%207.31469%2011.0095%207.49312%2011.0095ZM7.05047%208.77156H7.93031C7.93833%208.46396%207.98339%208.21818%208.06547%208.03422C8.14766%207.85036%208.34698%207.60661%208.66344%207.30297C8.93833%207.02807%209.14885%206.77422%209.295%206.54141C9.44125%206.3087%209.51437%206.03385%209.51437%205.71688C9.51437%205.17885%209.32109%204.75859%208.93453%204.45609C8.54786%204.1537%208.09052%204.0025%207.5625%204.0025C7.04083%204.0025%206.60917%204.14172%206.2675%204.42016C5.92573%204.69859%205.68193%205.02651%205.53609%205.40391L6.33891%205.72594C6.41505%205.51844%206.54526%205.3163%206.72953%205.11953C6.9138%204.92286%207.18745%204.82453%207.55047%204.82453C7.91984%204.82453%208.19286%204.92568%208.36953%205.12797C8.5463%205.33036%208.63469%205.55292%208.63469%205.79562C8.63469%206.00802%208.57417%206.20234%208.45312%206.37859C8.33219%206.55484%208.17797%206.7251%207.99047%206.88937C7.58016%207.25958%207.32094%207.5549%207.21281%207.77531C7.10458%207.99563%207.05047%208.32771%207.05047%208.77156ZM7.50109%2013.4375C6.67984%2013.4375%205.90792%2013.2817%205.18531%2012.97C4.46271%2012.6583%203.83417%2012.2354%203.29969%2011.7011C2.76521%2011.1668%202.34203%2010.5385%202.03016%209.81625C1.71839%209.09396%201.5625%208.32224%201.5625%207.50109C1.5625%206.67984%201.71833%205.90792%202.03%205.18531C2.34167%204.46271%202.76464%203.83417%203.29891%203.29969C3.83318%202.76521%204.46146%202.34203%205.18375%202.03016C5.90604%201.71839%206.67776%201.5625%207.49891%201.5625C8.32016%201.5625%209.09208%201.71833%209.81469%202.03C10.5373%202.34167%2011.1658%202.76464%2011.7003%203.29891C12.2348%203.83318%2012.658%204.46146%2012.9698%205.18375C13.2816%205.90604%2013.4375%206.67776%2013.4375%207.49891C13.4375%208.32016%2013.2817%209.09208%2012.97%209.81469C12.6583%2010.5373%2012.2354%2011.1658%2011.7011%2011.7003C11.1668%2012.2348%2010.5385%2012.658%209.81625%2012.9698C9.09396%2013.2816%208.32224%2013.4375%207.50109%2013.4375ZM7.5%2012.5C8.89583%2012.5%2010.0781%2012.0156%2011.0469%2011.0469C12.0156%2010.0781%2012.5%208.89583%2012.5%207.5C12.5%206.10417%2012.0156%204.92188%2011.0469%203.95312C10.0781%202.98438%208.89583%202.5%207.5%202.5C6.10417%202.5%204.92188%202.98438%203.95312%203.95312C2.98438%204.92188%202.5%206.10417%202.5%207.5C2.5%208.89583%202.98438%2010.0781%203.95312%2011.0469C4.92188%2012.0156%206.10417%2012.5%207.5%2012.5Z%22%20fill%3D%22%235F6368%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
547
-
548
546
  var IconTools = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2230%22%20viewBox%3D%220%200%2028%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22logo22%201%22%20clip-path%3D%22url%28%23clip0_2312_1672%29%22%3E%3Cg%20id%3D%22Clip%20path%20group%22%3E%3Cmask%20id%3D%22mask0_2312_1672%22%20style%3D%22mask-type%3Aluminance%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2228%22%20height%3D%2230%22%3E%3Cg%20id%3D%22clip0_8042_16520%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M27.6442%200H0V30H27.6442V0Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0_2312_1672%29%22%3E%3Cg%20id%3D%22Group%22%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M23.8782%203.46176C24.4391%202.63758%2024.2788%201.56616%2023.4775%200.989232C23.0769%200.741978%2022.6763%200.577144%2022.1955%200.659562C21.7147%200.741978%2021.3141%200.989232%2021.0737%201.40132L12.5801%2013.187L10.657%2015.9068C9.85578%2016.3189%205.04807%2018.5442%201.4423%2018.7914H1.36218C1.12179%2018.7914%200.961536%2018.7914%200.72115%2018.8739C0.24038%2018.9563%200.0801234%2019.3683%20-5.05522e-06%2019.5332C-0.24039%2020.9343%200.480764%2022.665%202.24359%2024.5607C3.44551%2025.9617%204.80769%2026.9508%204.80769%2026.9508C5.1282%2027.198%205.44871%2027.198%205.60897%2026.9508L7.29168%2025.0551L6.41026%2027.6926C6.33011%2027.9398%206.41026%2028.187%206.65065%2028.3519C6.73074%2028.4343%208.73397%2029.6706%2010.0962%2029.9178C10.1763%2029.9178%2010.1763%2029.9178%2010.2564%2029.9178C10.4167%2029.9178%2010.5769%2029.9178%2010.7372%2029.753C11.2179%2029.3409%2011.6186%2028.2695%2011.8589%2027.2804C12.0993%2026.2914%2012.3397%2024.9728%2012.6603%2023.3244C13.0609%2020.9343%2013.3013%2018.6266%2013.3814%2018.0497L15.3045%2015.3299L23.8782%203.46176Z%22%20fill%3D%22%238D8B8B%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M26.2819%2019.451C25.4005%2018.5444%2024.1184%2017.9675%2022.7562%2017.9675C22.1953%2017.9675%2021.6344%2018.0499%2021.0735%2018.2971L17.3876%2014.506C17.1472%2014.2587%2016.7466%2014.2587%2016.5062%2014.5883L14.9037%2016.8136C14.7434%2017.0609%2014.7434%2017.3905%2014.9838%2017.5554L18.3492%2021.0169C17.7082%2022.8301%2018.1088%2025.0554%2019.4709%2026.3741C20.3524%2027.2807%2021.5543%2027.7751%2022.7562%2027.7751C23.237%2027.7751%2023.6376%2027.6928%2024.1184%2027.5279L25.0799%2027.1982L22.035%2023.984C21.7947%2023.7367%2021.7947%2023.3246%2022.035%2023.0774L23.237%2021.7587C23.3171%2021.6763%2023.4774%2021.5938%2023.6376%2021.5938C23.7979%2021.5938%2024.0383%2021.6763%2024.1184%2021.8411L27.2434%2025.0554L27.4838%2023.984C27.9646%2022.418%2027.4838%2020.6873%2026.2819%2019.451Z%22%20fill%3D%22%238D8B8B%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M5.60925%209.8903C6.17014%209.8903%206.73102%209.80786%207.29195%209.56066L10.8977%2013.2694C11.1381%2013.5167%2011.5387%2013.5167%2011.7791%2013.187L13.3817%2010.9617C13.542%2010.7145%2013.542%2010.3848%2013.3016%2010.22L10.0163%206.84086C10.6573%205.02767%2010.2567%202.8024%208.89449%201.48372C7.61244%200.165035%205.84966%20-0.32947%204.24707%200.247452L3.28553%200.494705L6.41054%203.70899C6.65093%203.95624%206.65093%204.36833%206.41054%204.61558L5.12848%205.85185C4.88809%206.09908%204.40733%206.09908%204.24707%205.85185L1.12207%202.63756L0.881685%203.70899C0.481046%205.35734%200.881685%207.1705%202.08361%208.4068C2.96502%209.3134%204.24707%209.8903%205.60925%209.8903Z%22%20fill%3D%22%238D8B8B%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2312_1672%22%3E%3Crect%20width%3D%2228%22%20height%3D%2230%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
549
547
 
550
548
  var IconToolsPink = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2230%22%20viewBox%3D%220%200%2028%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22logo22%202%22%20clip-path%3D%22url%28%23clip0_2312_1680%29%22%3E%3Cg%20id%3D%22Clip%20path%20group%22%3E%3Cmask%20id%3D%22mask0_2312_1680%22%20style%3D%22mask-type%3Aluminance%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2228%22%20height%3D%2230%22%3E%3Cg%20id%3D%22clip0_8042_16520%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M27.6442%200H0V30H27.6442V0Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0_2312_1680%29%22%3E%3Cg%20id%3D%22Group%22%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M23.8782%203.46176C24.4391%202.63758%2024.2788%201.56616%2023.4775%200.989232C23.0769%200.741978%2022.6763%200.577144%2022.1955%200.659562C21.7147%200.741978%2021.3141%200.989232%2021.0737%201.40132L12.5801%2013.187L10.657%2015.9068C9.85578%2016.3189%205.04807%2018.5442%201.4423%2018.7914H1.36218C1.12179%2018.7914%200.961536%2018.7914%200.72115%2018.8739C0.24038%2018.9563%200.0801234%2019.3683%20-5.05522e-06%2019.5332C-0.24039%2020.9343%200.480764%2022.665%202.24359%2024.5607C3.44551%2025.9617%204.80769%2026.9508%204.80769%2026.9508C5.1282%2027.198%205.44871%2027.198%205.60897%2026.9508L7.29168%2025.0551L6.41026%2027.6926C6.33011%2027.9398%206.41026%2028.187%206.65065%2028.3519C6.73074%2028.4343%208.73397%2029.6706%2010.0962%2029.9178C10.1763%2029.9178%2010.1763%2029.9178%2010.2564%2029.9178C10.4167%2029.9178%2010.5769%2029.9178%2010.7372%2029.753C11.2179%2029.3409%2011.6186%2028.2695%2011.8589%2027.2804C12.0993%2026.2914%2012.3397%2024.9728%2012.6603%2023.3244C13.0609%2020.9343%2013.3013%2018.6266%2013.3814%2018.0497L15.3045%2015.3299L23.8782%203.46176Z%22%20fill%3D%22%23AC8EBA%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M26.2819%2019.451C25.4005%2018.5444%2024.1184%2017.9675%2022.7562%2017.9675C22.1953%2017.9675%2021.6344%2018.0499%2021.0735%2018.2971L17.3876%2014.506C17.1472%2014.2587%2016.7466%2014.2587%2016.5062%2014.5883L14.9037%2016.8136C14.7434%2017.0609%2014.7434%2017.3905%2014.9838%2017.5554L18.3492%2021.0169C17.7082%2022.8301%2018.1088%2025.0554%2019.4709%2026.3741C20.3524%2027.2807%2021.5543%2027.7751%2022.7562%2027.7751C23.237%2027.7751%2023.6376%2027.6928%2024.1184%2027.5279L25.0799%2027.1982L22.035%2023.984C21.7947%2023.7367%2021.7947%2023.3246%2022.035%2023.0774L23.237%2021.7587C23.3171%2021.6763%2023.4774%2021.5938%2023.6376%2021.5938C23.7979%2021.5938%2024.0383%2021.6763%2024.1184%2021.8411L27.2434%2025.0554L27.4838%2023.984C27.9646%2022.418%2027.4838%2020.6873%2026.2819%2019.451Z%22%20fill%3D%22%23AC8EBA%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M5.60925%209.8903C6.17014%209.8903%206.73102%209.80786%207.29195%209.56066L10.8977%2013.2694C11.1381%2013.5167%2011.5387%2013.5167%2011.7791%2013.187L13.3817%2010.9617C13.542%2010.7145%2013.542%2010.3848%2013.3016%2010.22L10.0163%206.84086C10.6573%205.02767%2010.2567%202.8024%208.89449%201.48372C7.61244%200.165035%205.84966%20-0.32947%204.24707%200.247452L3.28553%200.494705L6.41054%203.70899C6.65093%203.95624%206.65093%204.36833%206.41054%204.61558L5.12848%205.85185C4.88809%206.09908%204.40733%206.09908%204.24707%205.85185L1.12207%202.63756L0.881685%203.70899C0.481046%205.35734%200.881685%207.1705%202.08361%208.4068C2.96502%209.3134%204.24707%209.8903%205.60925%209.8903Z%22%20fill%3D%22%23AC8EBA%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2312_1680%22%3E%3Crect%20width%3D%2228%22%20height%3D%2230%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
@@ -1782,7 +1780,7 @@ var propTypes$x = {
1782
1780
  onChangeCuttingGuideProp: PropTypes.func
1783
1781
  };
1784
1782
 
1785
- var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$6, _templateObject5$3;
1783
+ var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$7, _templateObject5$3;
1786
1784
  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) {
1787
1785
  var selectedTab = _ref.selectedTab;
1788
1786
  return selectedTab ? 'none' : "url(".concat(EditorBg, ")");
@@ -1801,7 +1799,7 @@ var InnerContainerWrapper = styled.div(_templateObject3$b || (_templateObject3$b
1801
1799
  var editorWidth = _ref5.editorWidth;
1802
1800
  return editorWidth || 400;
1803
1801
  });
1804
- 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);
1802
+ var Title = styled.p(_templateObject4$7 || (_templateObject4$7 = _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);
1805
1803
  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) {
1806
1804
  var editorHeight = _ref6.editorHeight;
1807
1805
  return editorHeight || 470;
@@ -1955,7 +1953,7 @@ var propTypes$t = {
1955
1953
  disabled: PropTypes.bool
1956
1954
  };
1957
1955
 
1958
- var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$5, _templateObject5$2, _templateObject6;
1956
+ var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$6, _templateObject5$2, _templateObject6;
1959
1957
  var Wrapper = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n cursor: ", ";\n"])), function (_ref) {
1960
1958
  var disabled = _ref.disabled;
1961
1959
  return disabled ? 'not-allowed' : 'pointer';
@@ -1965,7 +1963,7 @@ var TooltipText = styled.div(_templateObject2$j || (_templateObject2$j = _tagged
1965
1963
  return position === 'top' && styled.css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n bottom: 110%;\n left: 50%;\n transform: translateX(-50%);\n "])));
1966
1964
  }, function (_ref3) {
1967
1965
  var position = _ref3.position;
1968
- return position === 'right' && styled.css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n top: 50%;\n left: 105%;\n transform: translateY(-50%);\n "])));
1966
+ return position === 'right' && styled.css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n top: 50%;\n left: 105%;\n transform: translateY(-50%);\n "])));
1969
1967
  }, function (_ref4) {
1970
1968
  var position = _ref4.position;
1971
1969
  return position === 'bottom' && styled.css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n top: 110%;\n left: 50%;\n transform: translateX(-50%);\n "])));
@@ -2043,13 +2041,13 @@ var propTypes$s = {
2043
2041
  tooltip: PropTypes.string
2044
2042
  };
2045
2043
 
2046
- var _templateObject$n, _templateObject2$i, _templateObject3$9, _templateObject4$4;
2044
+ var _templateObject$n, _templateObject2$i, _templateObject3$9, _templateObject4$5;
2047
2045
  var DropDownItem = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
2048
2046
  var IconWrapper$3 = styled.img(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n object-fit: contain;\n"])));
2049
2047
  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"])));
2050
2048
 
2051
2049
  // Individual option in the dropdown
2052
- 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"])));
2050
+ var DropDownOption = styled.div(_templateObject4$5 || (_templateObject4$5 = _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"])));
2053
2051
 
2054
2052
  var DropDown = function DropDown(_ref) {
2055
2053
  var left = _ref.left,
@@ -2272,10 +2270,17 @@ var calculatePercentageValue = function calculatePercentageValue(value, percenta
2272
2270
  return value * percentage / 100;
2273
2271
  };
2274
2272
  var pickImage = function pickImage() {
2273
+ var allowedFormats = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['png', 'jpg', 'jpeg', 'svg', 'webp'];
2275
2274
  return new Promise(function (resolve, reject) {
2275
+ var formats = (allowedFormats || []).map(function (f) {
2276
+ return String(f).trim().toLowerCase();
2277
+ }).filter(Boolean);
2278
+ var accept = formats.map(function (f) {
2279
+ return f.startsWith('.') ? f : ".".concat(f);
2280
+ }).join(',');
2276
2281
  var input = document.createElement('input');
2277
2282
  input.type = 'file';
2278
- input.accept = 'image/*';
2283
+ input.accept = accept || 'image/*';
2279
2284
  input.style.display = 'none';
2280
2285
  input.addEventListener('change', function (event) {
2281
2286
  if (event.target.files.length > 0) {
@@ -3458,11 +3463,11 @@ var propTypes$i = {
3458
3463
  translation: PropTypes.object
3459
3464
  };
3460
3465
 
3461
- var _templateObject$e, _templateObject2$a, _templateObject3$7, _templateObject4$3, _templateObject5$1;
3466
+ var _templateObject$e, _templateObject2$a, _templateObject3$7, _templateObject4$4, _templateObject5$1;
3462
3467
  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"])));
3463
3468
  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);
3464
3469
  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"])));
3465
- var Divider = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n width: 1px;\n height: 80%;\n background: rgba(77, 98, 119, 0.2);\n"])));
3470
+ var Divider = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n width: 1px;\n height: 80%;\n background: rgba(77, 98, 119, 0.2);\n"])));
3466
3471
  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);
3467
3472
 
3468
3473
  var propTypes$h = {
@@ -5200,7 +5205,7 @@ var propTypes$8 = {
5200
5205
  content: PropTypes.node
5201
5206
  };
5202
5207
 
5203
- var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$2, _templateObject5;
5208
+ var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$3, _templateObject5;
5204
5209
  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) {
5205
5210
  var marginTop = _ref.marginTop;
5206
5211
  return marginTop;
@@ -5210,7 +5215,7 @@ var CollapsableContainer = styled.div(_templateObject$8 || (_templateObject$8 =
5210
5215
  });
5211
5216
  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"])));
5212
5217
  var LeftIconWrapper = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n margin-right: 6px;\n display: flex;\n align-items: center;\n"])));
5213
- 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"])));
5218
+ var IconWrapper = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-top: 3px;\n"])));
5214
5219
  var CollapsableContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: ", ";\n"])), function (_ref3) {
5215
5220
  var visible = _ref3.visible;
5216
5221
  return visible ? 'flex' : 'none';
@@ -5251,11 +5256,11 @@ var Collapsable = function Collapsable(_ref) {
5251
5256
  };
5252
5257
  Collapsable.propTypes = propTypes$8;
5253
5258
 
5254
- var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$1;
5259
+ var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$2;
5255
5260
  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"])));
5256
5261
  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"])));
5257
5262
  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"])));
5258
- 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"])));
5263
+ var StyledContainer$5 = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
5259
5264
 
5260
5265
  var TemplateSideBar = function TemplateSideBar(_ref) {
5261
5266
  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3;
@@ -5389,10 +5394,8 @@ var TextSideBar = function TextSideBar(_ref) {
5389
5394
  }
5390
5395
  }), /*#__PURE__*/React.createElement(Collapsable, {
5391
5396
  title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.HELP_TEXT,
5392
- content: renderTextListContent(),
5393
- left: /*#__PURE__*/React.createElement(StyledImage, {
5394
- src: IconInfo
5395
- })
5397
+ content: renderTextListContent()
5398
+ // left={<StyledImage src={IconInfo} />}
5396
5399
  }));
5397
5400
  };
5398
5401
  TextSideBar.propTypes = propTypes$7;
@@ -5407,13 +5410,14 @@ var propTypes$6 = {
5407
5410
  setLoadingUploadImage: PropTypes.func
5408
5411
  };
5409
5412
 
5410
- var _templateObject$5, _templateObject2$3, _templateObject3$3;
5413
+ var _templateObject$5, _templateObject2$3, _templateObject3$3, _templateObject4$1;
5411
5414
  var StyledContainer$3 = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
5412
5415
  var ImagesContainer = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 20px;\n align-items: flex-start;\n"])));
5413
5416
  var SingleItem$1 = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n cursor: pointer;\n align-items: center;\n width: ", ";\n"])), function () {
5414
5417
  var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'calc(50% - 20px)';
5415
5418
  return width;
5416
5419
  });
5420
+ var AllowedFormats = styled.p(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n margin: 0 0 16px;\n font-size: 12px;\n color: #555555;\n"])));
5417
5421
 
5418
5422
  var ImageSideBar = function ImageSideBar(_ref) {
5419
5423
  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5;
@@ -5423,7 +5427,8 @@ var ImageSideBar = function ImageSideBar(_ref) {
5423
5427
  onAddImageToCanvas = _ref.onAddImageToCanvas,
5424
5428
  languageLocale = _ref.languageLocale,
5425
5429
  uploadImageCallBack = _ref.uploadImageCallBack,
5426
- setLoadingUploadImage = _ref.setLoadingUploadImage;
5430
+ setLoadingUploadImage = _ref.setLoadingUploadImage,
5431
+ allowedFormats = _ref.allowedFormats;
5427
5432
  var renderDefaultContent = /*#__PURE__*/React.createElement(ImagesContainer, null, (defaultImagesList === null || defaultImagesList === void 0 ? void 0 : defaultImagesList.length) === 0 && /*#__PURE__*/React.createElement(StyledText, {
5428
5433
  fontSize: 10,
5429
5434
  color: theme.color.gray_535354
@@ -5462,7 +5467,7 @@ var ImageSideBar = function ImageSideBar(_ref) {
5462
5467
  while (1) switch (_context.n) {
5463
5468
  case 0:
5464
5469
  _context.n = 1;
5465
- return pickImage();
5470
+ return pickImage(allowedFormats);
5466
5471
  case 1:
5467
5472
  file = _context.v;
5468
5473
  if (file) {
@@ -5504,9 +5509,17 @@ var ImageSideBar = function ImageSideBar(_ref) {
5504
5509
  left: /*#__PURE__*/React.createElement(StyledImage, {
5505
5510
  src: IconUpload
5506
5511
  }),
5507
- marginBottom: 38,
5512
+ marginBottom: 8,
5508
5513
  onClick: addImageToList
5509
- }), /*#__PURE__*/React.createElement(Collapsable, {
5514
+ }), allowedFormats && function () {
5515
+ var formats = (allowedFormats || []).map(function (f) {
5516
+ return String(f).trim().toLowerCase();
5517
+ }).filter(Boolean);
5518
+ var accept = formats.map(function (f) {
5519
+ return f.startsWith('.') ? f : ".".concat(f);
5520
+ }).join(', ');
5521
+ return /*#__PURE__*/React.createElement(AllowedFormats, null, accept);
5522
+ }(), /*#__PURE__*/React.createElement(Collapsable, {
5510
5523
  title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.DEFAULT,
5511
5524
  content: renderDefaultContent
5512
5525
  }), /*#__PURE__*/React.createElement(Collapsable, {
@@ -5615,7 +5628,8 @@ var QrSideBar = function QrSideBar(_ref) {
5615
5628
  addQrLogo = _ref.addQrLogo,
5616
5629
  elements = _ref.elements,
5617
5630
  qrLogo = _ref.qrLogo,
5618
- languageLocale = _ref.languageLocale;
5631
+ languageLocale = _ref.languageLocale,
5632
+ allowedFormats = _ref.allowedFormats;
5619
5633
  var logoVisible = React.useMemo(function () {
5620
5634
  var _elements$index;
5621
5635
  var index = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
@@ -5645,10 +5659,18 @@ var QrSideBar = function QrSideBar(_ref) {
5645
5659
  left: /*#__PURE__*/React.createElement(StyledImage, {
5646
5660
  src: IconUpload
5647
5661
  }),
5648
- marginBottom: 30,
5662
+ marginBottom: 8,
5649
5663
  marginTop: 24,
5650
5664
  onClick: addQrLogo
5651
- }), qrLogo && /*#__PURE__*/React.createElement(StyledImage, {
5665
+ }), allowedFormats && function () {
5666
+ var formats = (allowedFormats || []).map(function (f) {
5667
+ return String(f).trim().toLowerCase();
5668
+ }).filter(Boolean);
5669
+ var accept = formats.map(function (f) {
5670
+ return f.startsWith('.') ? f : ".".concat(f);
5671
+ }).join(', ');
5672
+ return /*#__PURE__*/React.createElement(AllowedFormats, null, accept);
5673
+ }(), qrLogo && /*#__PURE__*/React.createElement(StyledImage, {
5652
5674
  src: qrLogo,
5653
5675
  height: 89,
5654
5676
  width: 89
@@ -5715,7 +5737,8 @@ var HelperSideBar = function HelperSideBar(_ref) {
5715
5737
  styleProps = _ref.styleProps,
5716
5738
  defaultText = _ref.defaultText,
5717
5739
  languageLocale = _ref.languageLocale,
5718
- onTemplateSelect = _ref.onTemplateSelect;
5740
+ onTemplateSelect = _ref.onTemplateSelect,
5741
+ allowedFormats = _ref.allowedFormats;
5719
5742
  return /*#__PURE__*/React.createElement(SideBarWrapper, {
5720
5743
  visible: selectedSideBarItem && helperSideBarVisible
5721
5744
  }, /*#__PURE__*/React.createElement(SideBarHeader, {
@@ -5745,7 +5768,8 @@ var HelperSideBar = function HelperSideBar(_ref) {
5745
5768
  languageLocale: languageLocale,
5746
5769
  uploadImageCallBack: uploadImageCallBack,
5747
5770
  setLoadingUploadImage: setLoadingUploadImage,
5748
- styleProps: styleProps
5771
+ styleProps: styleProps,
5772
+ allowedFormats: allowedFormats
5749
5773
  }) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.shape) ? /*#__PURE__*/React.createElement(ShapeSideBar, {
5750
5774
  onAddShape: onAddShape,
5751
5775
  languageLocale: languageLocale
@@ -5757,7 +5781,8 @@ var HelperSideBar = function HelperSideBar(_ref) {
5757
5781
  elements: elements,
5758
5782
  qrLogo: qrLogo,
5759
5783
  languageLocale: languageLocale,
5760
- styleProps: styleProps
5784
+ styleProps: styleProps,
5785
+ allowedFormats: allowedFormats
5761
5786
  }) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.whiteLabel) ? /*#__PURE__*/React.createElement(WhiteLabelSideBar, {
5762
5787
  languageLocale: languageLocale,
5763
5788
  styleProps: styleProps
@@ -5873,6 +5898,7 @@ var isPropValid = /* #__PURE__ */memoize(function (prop) {
5873
5898
  * @property {number} [zoomLevel] - Optional zoom level (e.g. 100 for 100%)
5874
5899
  * @property {boolean} [showBackgroundImagePicker] - Used to set background image on entire canvas
5875
5900
  * @property {boolean} [showOpacityPicker] - Related to showBackgroundImagePicker and it's opacity
5901
+ * @property {Array} [allowedFormats] - Allowed formats for image uploading functions
5876
5902
  */
5877
5903
 
5878
5904
  /**
@@ -5911,7 +5937,9 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
5911
5937
  showBackgroundImagePicker = _ref.showBackgroundImagePicker,
5912
5938
  showOpacityPicker = _ref.showOpacityPicker,
5913
5939
  uploadQRLogoImage = _ref.uploadQRLogoImage,
5914
- zoomLevel = _ref.zoomLevel;
5940
+ zoomLevel = _ref.zoomLevel,
5941
+ _ref$allowedFormats = _ref.allowedFormats,
5942
+ allowedFormats = _ref$allowedFormats === void 0 ? ['png', 'jpg', 'jpeg', 'svg', 'webp'] : _ref$allowedFormats;
5915
5943
  var stageRef = React.useRef(null);
5916
5944
  var _useState = React.useState(null),
5917
5945
  _useState2 = _slicedToArray(_useState, 2),
@@ -6857,7 +6885,8 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
6857
6885
  styleProps: styleProps,
6858
6886
  defaultText: defaultText,
6859
6887
  languageLocale: languageLocale,
6860
- onTemplateSelect: onTemplateSelect
6888
+ onTemplateSelect: onTemplateSelect,
6889
+ allowedFormats: allowedFormats
6861
6890
  }), loadingFonts ? null : /*#__PURE__*/React.createElement(Editor, {
6862
6891
  setLoading: setLoading,
6863
6892
  cuttingGuideStroke: (elements === null || elements === void 0 || (_elements$find5 = elements.find(function (e) {