@arbisoft/react-design-tool 1.0.41 → 1.0.43

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 +59 -30
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/esm/index.js +59 -30
  5. package/dist/esm/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/esm/index.js CHANGED
@@ -541,8 +541,6 @@ var IconGraph = "data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%2
541
541
 
542
542
  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";
543
543
 
544
- 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";
545
-
546
544
  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";
547
545
 
548
546
  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";
@@ -1780,7 +1778,7 @@ var propTypes$x = {
1780
1778
  onChangeCuttingGuideProp: PropTypes.func
1781
1779
  };
1782
1780
 
1783
- var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$6, _templateObject5$3;
1781
+ var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$7, _templateObject5$3;
1784
1782
  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) {
1785
1783
  var selectedTab = _ref.selectedTab;
1786
1784
  return selectedTab ? 'none' : "url(".concat(EditorBg, ")");
@@ -1799,7 +1797,7 @@ var InnerContainerWrapper = styled.div(_templateObject3$b || (_templateObject3$b
1799
1797
  var editorWidth = _ref5.editorWidth;
1800
1798
  return editorWidth || 400;
1801
1799
  });
1802
- 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);
1800
+ 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);
1803
1801
  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) {
1804
1802
  var editorHeight = _ref6.editorHeight;
1805
1803
  return editorHeight || 470;
@@ -1953,7 +1951,7 @@ var propTypes$t = {
1953
1951
  disabled: PropTypes.bool
1954
1952
  };
1955
1953
 
1956
- var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$5, _templateObject5$2, _templateObject6;
1954
+ var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$6, _templateObject5$2, _templateObject6;
1957
1955
  var Wrapper = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n cursor: ", ";\n"])), function (_ref) {
1958
1956
  var disabled = _ref.disabled;
1959
1957
  return disabled ? 'not-allowed' : 'pointer';
@@ -1963,7 +1961,7 @@ var TooltipText = styled.div(_templateObject2$j || (_templateObject2$j = _tagged
1963
1961
  return position === 'top' && css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n bottom: 110%;\n left: 50%;\n transform: translateX(-50%);\n "])));
1964
1962
  }, function (_ref3) {
1965
1963
  var position = _ref3.position;
1966
- return position === 'right' && css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n top: 50%;\n left: 105%;\n transform: translateY(-50%);\n "])));
1964
+ return position === 'right' && css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n top: 50%;\n left: 105%;\n transform: translateY(-50%);\n "])));
1967
1965
  }, function (_ref4) {
1968
1966
  var position = _ref4.position;
1969
1967
  return position === 'bottom' && css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n top: 110%;\n left: 50%;\n transform: translateX(-50%);\n "])));
@@ -2041,13 +2039,13 @@ var propTypes$s = {
2041
2039
  tooltip: PropTypes.string
2042
2040
  };
2043
2041
 
2044
- var _templateObject$n, _templateObject2$i, _templateObject3$9, _templateObject4$4;
2042
+ var _templateObject$n, _templateObject2$i, _templateObject3$9, _templateObject4$5;
2045
2043
  var DropDownItem = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
2046
2044
  var IconWrapper$3 = styled.img(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n object-fit: contain;\n"])));
2047
2045
  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"])));
2048
2046
 
2049
2047
  // Individual option in the dropdown
2050
- 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"])));
2048
+ 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"])));
2051
2049
 
2052
2050
  var DropDown = function DropDown(_ref) {
2053
2051
  var left = _ref.left,
@@ -2270,10 +2268,17 @@ var calculatePercentageValue = function calculatePercentageValue(value, percenta
2270
2268
  return value * percentage / 100;
2271
2269
  };
2272
2270
  var pickImage = function pickImage() {
2271
+ var allowedFormats = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['png', 'jpg', 'jpeg', 'svg', 'webp'];
2273
2272
  return new Promise(function (resolve, reject) {
2273
+ var formats = (allowedFormats || []).map(function (f) {
2274
+ return String(f).trim().toLowerCase();
2275
+ }).filter(Boolean);
2276
+ var accept = formats.map(function (f) {
2277
+ return f.startsWith('.') ? f : ".".concat(f);
2278
+ }).join(',');
2274
2279
  var input = document.createElement('input');
2275
2280
  input.type = 'file';
2276
- input.accept = 'image/*';
2281
+ input.accept = accept || 'image/*';
2277
2282
  input.style.display = 'none';
2278
2283
  input.addEventListener('change', function (event) {
2279
2284
  if (event.target.files.length > 0) {
@@ -3456,11 +3461,11 @@ var propTypes$i = {
3456
3461
  translation: PropTypes.object
3457
3462
  };
3458
3463
 
3459
- var _templateObject$e, _templateObject2$a, _templateObject3$7, _templateObject4$3, _templateObject5$1;
3464
+ var _templateObject$e, _templateObject2$a, _templateObject3$7, _templateObject4$4, _templateObject5$1;
3460
3465
  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"])));
3461
3466
  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);
3462
3467
  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"])));
3463
- var Divider = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n width: 1px;\n height: 80%;\n background: rgba(77, 98, 119, 0.2);\n"])));
3468
+ var Divider = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n width: 1px;\n height: 80%;\n background: rgba(77, 98, 119, 0.2);\n"])));
3464
3469
  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);
3465
3470
 
3466
3471
  var propTypes$h = {
@@ -5198,7 +5203,7 @@ var propTypes$8 = {
5198
5203
  content: PropTypes.node
5199
5204
  };
5200
5205
 
5201
- var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$2, _templateObject5;
5206
+ var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$3, _templateObject5;
5202
5207
  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) {
5203
5208
  var marginTop = _ref.marginTop;
5204
5209
  return marginTop;
@@ -5208,7 +5213,7 @@ var CollapsableContainer = styled.div(_templateObject$8 || (_templateObject$8 =
5208
5213
  });
5209
5214
  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"])));
5210
5215
  var LeftIconWrapper = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n margin-right: 6px;\n display: flex;\n align-items: center;\n"])));
5211
- 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"])));
5216
+ 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"])));
5212
5217
  var CollapsableContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: ", ";\n"])), function (_ref3) {
5213
5218
  var visible = _ref3.visible;
5214
5219
  return visible ? 'flex' : 'none';
@@ -5249,11 +5254,11 @@ var Collapsable = function Collapsable(_ref) {
5249
5254
  };
5250
5255
  Collapsable.propTypes = propTypes$8;
5251
5256
 
5252
- var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$1;
5257
+ var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$2;
5253
5258
  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"])));
5254
5259
  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"])));
5255
5260
  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"])));
5256
- 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"])));
5261
+ 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"])));
5257
5262
 
5258
5263
  var TemplateSideBar = function TemplateSideBar(_ref) {
5259
5264
  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3;
@@ -5387,10 +5392,8 @@ var TextSideBar = function TextSideBar(_ref) {
5387
5392
  }
5388
5393
  }), /*#__PURE__*/React.createElement(Collapsable, {
5389
5394
  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,
5390
- content: renderTextListContent(),
5391
- left: /*#__PURE__*/React.createElement(StyledImage, {
5392
- src: IconInfo
5393
- })
5395
+ content: renderTextListContent()
5396
+ // left={<StyledImage src={IconInfo} />}
5394
5397
  }));
5395
5398
  };
5396
5399
  TextSideBar.propTypes = propTypes$7;
@@ -5405,13 +5408,14 @@ var propTypes$6 = {
5405
5408
  setLoadingUploadImage: PropTypes.func
5406
5409
  };
5407
5410
 
5408
- var _templateObject$5, _templateObject2$3, _templateObject3$3;
5411
+ var _templateObject$5, _templateObject2$3, _templateObject3$3, _templateObject4$1;
5409
5412
  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"])));
5410
5413
  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"])));
5411
5414
  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 () {
5412
5415
  var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'calc(50% - 20px)';
5413
5416
  return width;
5414
5417
  });
5418
+ var AllowedFormats = styled.p(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n margin: 0 0 16px;\n font-size: 12px;\n color: #555555;\n"])));
5415
5419
 
5416
5420
  var ImageSideBar = function ImageSideBar(_ref) {
5417
5421
  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5;
@@ -5421,7 +5425,8 @@ var ImageSideBar = function ImageSideBar(_ref) {
5421
5425
  onAddImageToCanvas = _ref.onAddImageToCanvas,
5422
5426
  languageLocale = _ref.languageLocale,
5423
5427
  uploadImageCallBack = _ref.uploadImageCallBack,
5424
- setLoadingUploadImage = _ref.setLoadingUploadImage;
5428
+ setLoadingUploadImage = _ref.setLoadingUploadImage,
5429
+ allowedFormats = _ref.allowedFormats;
5425
5430
  var renderDefaultContent = /*#__PURE__*/React.createElement(ImagesContainer, null, (defaultImagesList === null || defaultImagesList === void 0 ? void 0 : defaultImagesList.length) === 0 && /*#__PURE__*/React.createElement(StyledText, {
5426
5431
  fontSize: 10,
5427
5432
  color: theme.color.gray_535354
@@ -5460,7 +5465,7 @@ var ImageSideBar = function ImageSideBar(_ref) {
5460
5465
  while (1) switch (_context.n) {
5461
5466
  case 0:
5462
5467
  _context.n = 1;
5463
- return pickImage();
5468
+ return pickImage(allowedFormats);
5464
5469
  case 1:
5465
5470
  file = _context.v;
5466
5471
  if (file) {
@@ -5504,7 +5509,15 @@ var ImageSideBar = function ImageSideBar(_ref) {
5504
5509
  }),
5505
5510
  marginBottom: 38,
5506
5511
  onClick: addImageToList
5507
- }), /*#__PURE__*/React.createElement(Collapsable, {
5512
+ }), allowedFormats && function () {
5513
+ var formats = (allowedFormats || []).map(function (f) {
5514
+ return String(f).trim().toLowerCase();
5515
+ }).filter(Boolean);
5516
+ var accept = formats.map(function (f) {
5517
+ return f.startsWith('.') ? f : ".".concat(f);
5518
+ }).join(', ');
5519
+ return /*#__PURE__*/React.createElement(AllowedFormats, null, accept);
5520
+ }(), /*#__PURE__*/React.createElement(Collapsable, {
5508
5521
  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,
5509
5522
  content: renderDefaultContent
5510
5523
  }), /*#__PURE__*/React.createElement(Collapsable, {
@@ -5613,7 +5626,8 @@ var QrSideBar = function QrSideBar(_ref) {
5613
5626
  addQrLogo = _ref.addQrLogo,
5614
5627
  elements = _ref.elements,
5615
5628
  qrLogo = _ref.qrLogo,
5616
- languageLocale = _ref.languageLocale;
5629
+ languageLocale = _ref.languageLocale,
5630
+ allowedFormats = _ref.allowedFormats;
5617
5631
  var logoVisible = useMemo(function () {
5618
5632
  var _elements$index;
5619
5633
  var index = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
@@ -5646,7 +5660,15 @@ var QrSideBar = function QrSideBar(_ref) {
5646
5660
  marginBottom: 30,
5647
5661
  marginTop: 24,
5648
5662
  onClick: addQrLogo
5649
- }), qrLogo && /*#__PURE__*/React.createElement(StyledImage, {
5663
+ }), allowedFormats && function () {
5664
+ var formats = (allowedFormats || []).map(function (f) {
5665
+ return String(f).trim().toLowerCase();
5666
+ }).filter(Boolean);
5667
+ var accept = formats.map(function (f) {
5668
+ return f.startsWith('.') ? f : ".".concat(f);
5669
+ }).join(', ');
5670
+ return /*#__PURE__*/React.createElement(AllowedFormats, null, accept);
5671
+ }(), qrLogo && /*#__PURE__*/React.createElement(StyledImage, {
5650
5672
  src: qrLogo,
5651
5673
  height: 89,
5652
5674
  width: 89
@@ -5713,7 +5735,8 @@ var HelperSideBar = function HelperSideBar(_ref) {
5713
5735
  styleProps = _ref.styleProps,
5714
5736
  defaultText = _ref.defaultText,
5715
5737
  languageLocale = _ref.languageLocale,
5716
- onTemplateSelect = _ref.onTemplateSelect;
5738
+ onTemplateSelect = _ref.onTemplateSelect,
5739
+ allowedFormats = _ref.allowedFormats;
5717
5740
  return /*#__PURE__*/React.createElement(SideBarWrapper, {
5718
5741
  visible: selectedSideBarItem && helperSideBarVisible
5719
5742
  }, /*#__PURE__*/React.createElement(SideBarHeader, {
@@ -5743,7 +5766,8 @@ var HelperSideBar = function HelperSideBar(_ref) {
5743
5766
  languageLocale: languageLocale,
5744
5767
  uploadImageCallBack: uploadImageCallBack,
5745
5768
  setLoadingUploadImage: setLoadingUploadImage,
5746
- styleProps: styleProps
5769
+ styleProps: styleProps,
5770
+ allowedFormats: allowedFormats
5747
5771
  }) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.shape) ? /*#__PURE__*/React.createElement(ShapeSideBar, {
5748
5772
  onAddShape: onAddShape,
5749
5773
  languageLocale: languageLocale
@@ -5755,7 +5779,8 @@ var HelperSideBar = function HelperSideBar(_ref) {
5755
5779
  elements: elements,
5756
5780
  qrLogo: qrLogo,
5757
5781
  languageLocale: languageLocale,
5758
- styleProps: styleProps
5782
+ styleProps: styleProps,
5783
+ allowedFormats: allowedFormats
5759
5784
  }) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.whiteLabel) ? /*#__PURE__*/React.createElement(WhiteLabelSideBar, {
5760
5785
  languageLocale: languageLocale,
5761
5786
  styleProps: styleProps
@@ -5871,6 +5896,7 @@ var isPropValid = /* #__PURE__ */memoize(function (prop) {
5871
5896
  * @property {number} [zoomLevel] - Optional zoom level (e.g. 100 for 100%)
5872
5897
  * @property {boolean} [showBackgroundImagePicker] - Used to set background image on entire canvas
5873
5898
  * @property {boolean} [showOpacityPicker] - Related to showBackgroundImagePicker and it's opacity
5899
+ * @property {Array} [allowedFormats] - Allowed formats for image uploading functions
5874
5900
  */
5875
5901
 
5876
5902
  /**
@@ -5909,7 +5935,9 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
5909
5935
  showBackgroundImagePicker = _ref.showBackgroundImagePicker,
5910
5936
  showOpacityPicker = _ref.showOpacityPicker,
5911
5937
  uploadQRLogoImage = _ref.uploadQRLogoImage,
5912
- zoomLevel = _ref.zoomLevel;
5938
+ zoomLevel = _ref.zoomLevel,
5939
+ _ref$allowedFormats = _ref.allowedFormats,
5940
+ allowedFormats = _ref$allowedFormats === void 0 ? ['png', 'jpg', 'jpeg', 'svg', 'webp'] : _ref$allowedFormats;
5913
5941
  var stageRef = useRef(null);
5914
5942
  var _useState = useState(null),
5915
5943
  _useState2 = _slicedToArray(_useState, 2),
@@ -6855,7 +6883,8 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
6855
6883
  styleProps: styleProps,
6856
6884
  defaultText: defaultText,
6857
6885
  languageLocale: languageLocale,
6858
- onTemplateSelect: onTemplateSelect
6886
+ onTemplateSelect: onTemplateSelect,
6887
+ allowedFormats: allowedFormats
6859
6888
  }), loadingFonts ? null : /*#__PURE__*/React.createElement(Editor, {
6860
6889
  setLoading: setLoading,
6861
6890
  cuttingGuideStroke: (elements === null || elements === void 0 || (_elements$find5 = elements.find(function (e) {