@arbisoft/react-design-tool 1.0.70 → 1.0.72

package/dist/cjs/index.js

@@ -350,7 +350,14 @@ var propTypes$z = {
   defaultText: PropTypes.string,
   onSave: PropTypes.func,
   saveButtonText: PropTypes.string,
-  locale: PropTypes.oneOf(['en', 'ru', 'pl', 'de', 'es', 'fr', 'it'])
+  locale: PropTypes.oneOf(['en', 'ru', 'pl', 'de', 'es', 'fr', 'it']),
+  canvasSize: PropTypes.shape({
+    mode: PropTypes.oneOf(['preset', 'custom']),
+    preset: PropTypes.string,
+    widthMm: PropTypes.number,
+    heightMm: PropTypes.number
+  }),
+  onCanvasSizeChange: PropTypes.func
 };
 
 /**
@@ -615,6 +622,125 @@ var pageSizesDimensions = _defineProperty(_defineProperty(_defineProperty(_defin
   width: 460,
   height: 648
 });
+var STANDARD_PAPER_SIZES_MM = {
+  A3: {
+    width: 297,
+    height: 420
+  },
+  A4: {
+    width: 210,
+    height: 297
+  },
+  A5: {
+    width: 148,
+    height: 210
+  },
+  Letter: {
+    width: 215.9,
+    height: 279.4
+  },
+  Legal: {
+    width: 215.9,
+    height: 355.6
+  },
+  Ledger: {
+    width: 431.8,
+    height: 279.4
+  },
+  B5: {
+    width: 176,
+    height: 250
+  },
+  C5: {
+    width: 162,
+    height: 229
+  }
+};
+var CANVAS_SIZE_MODES = {
+  preset: 'preset',
+  custom: 'custom'
+};
+var CUSTOM_CANVAS_PRESET_KEY = 'Custom';
+var MM_TO_PX_RATIO = pageSizesDimensions[pageSizes.A4].width / STANDARD_PAPER_SIZES_MM.A4.width;
+var MIN_CUSTOM_MM = 10;
+var MAX_CUSTOM_MM = 2000;
+var isValidPresetSize = function isValidPresetSize(size) {
+  return Boolean(size && pageSizesDimensions[size]);
+};
+var clampMm = function clampMm(value) {
+  var parsed = Number(value);
+  if (!Number.isFinite(parsed)) return null;
+  var clamped = Math.max(MIN_CUSTOM_MM, Math.min(MAX_CUSTOM_MM, parsed));
+  return Number(clamped.toFixed(2));
+};
+var mmToPx = function mmToPx(mm) {
+  var safeMm = clampMm(mm);
+  if (!safeMm) return null;
+  return Math.round(safeMm * MM_TO_PX_RATIO);
+};
+var getPresetMmDimensions = function getPresetMmDimensions(preset) {
+  return STANDARD_PAPER_SIZES_MM[preset] || null;
+};
+var getCanvasSizeLabel = function getCanvasSizeLabel(canvasSize) {
+  if (!canvasSize) return pageSizes.A4;
+  if (canvasSize.mode === CANVAS_SIZE_MODES.custom) {
+    return "".concat(canvasSize.widthMm, " x ").concat(canvasSize.heightMm, " mm");
+  }
+  return canvasSize.preset || pageSizes.A4;
+};
+var normalizeCanvasSize = function normalizeCanvasSize() {
+  var _pageSizesDimensions$, _pageSizesDimensions$2, _getPresetMmDimension, _getPresetMmDimension2;
+  var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var fallbackPreset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : pageSizes.A4;
+  var fallback = {
+    mode: CANVAS_SIZE_MODES.preset,
+    preset: fallbackPreset,
+    widthPx: ((_pageSizesDimensions$ = pageSizesDimensions[fallbackPreset]) === null || _pageSizesDimensions$ === void 0 ? void 0 : _pageSizesDimensions$.width) || pageSizesDimensions[pageSizes.A4].width,
+    heightPx: ((_pageSizesDimensions$2 = pageSizesDimensions[fallbackPreset]) === null || _pageSizesDimensions$2 === void 0 ? void 0 : _pageSizesDimensions$2.height) || pageSizesDimensions[pageSizes.A4].height,
+    widthMm: ((_getPresetMmDimension = getPresetMmDimensions(fallbackPreset)) === null || _getPresetMmDimension === void 0 ? void 0 : _getPresetMmDimension.width) || STANDARD_PAPER_SIZES_MM.A4.width,
+    heightMm: ((_getPresetMmDimension2 = getPresetMmDimensions(fallbackPreset)) === null || _getPresetMmDimension2 === void 0 ? void 0 : _getPresetMmDimension2.height) || STANDARD_PAPER_SIZES_MM.A4.height
+  };
+  if (!input) return fallback;
+  if (typeof input === 'string' && isValidPresetSize(input)) {
+    var mmDims = getPresetMmDimensions(input) || getPresetMmDimensions(fallbackPreset);
+    return {
+      mode: CANVAS_SIZE_MODES.preset,
+      preset: input,
+      widthPx: pageSizesDimensions[input].width,
+      heightPx: pageSizesDimensions[input].height,
+      widthMm: mmDims === null || mmDims === void 0 ? void 0 : mmDims.width,
+      heightMm: mmDims === null || mmDims === void 0 ? void 0 : mmDims.height
+    };
+  }
+  var mode = input.mode || (isValidPresetSize(input.size) ? CANVAS_SIZE_MODES.preset : null);
+  var preset = input.preset || input.size;
+  if (mode === CANVAS_SIZE_MODES.preset && isValidPresetSize(preset)) {
+    var _mmDims = getPresetMmDimensions(preset) || getPresetMmDimensions(fallbackPreset);
+    return {
+      mode: CANVAS_SIZE_MODES.preset,
+      preset: preset,
+      widthPx: pageSizesDimensions[preset].width,
+      heightPx: pageSizesDimensions[preset].height,
+      widthMm: _mmDims === null || _mmDims === void 0 ? void 0 : _mmDims.width,
+      heightMm: _mmDims === null || _mmDims === void 0 ? void 0 : _mmDims.height
+    };
+  }
+  var widthMm = clampMm(input.widthMm);
+  var heightMm = clampMm(input.heightMm);
+  var widthPx = mmToPx(widthMm);
+  var heightPx = mmToPx(heightMm);
+  if (mode === CANVAS_SIZE_MODES.custom && widthPx && heightPx) {
+    return {
+      mode: CANVAS_SIZE_MODES.custom,
+      preset: CUSTOM_CANVAS_PRESET_KEY,
+      widthMm: widthMm,
+      heightMm: heightMm,
+      widthPx: widthPx,
+      heightPx: heightPx
+    };
+  }
+  return fallback;
+};
 
 var sideBarpillsList = {
   template: 'Template',
@@ -658,24 +784,6 @@ var textList = [{
   fontStyle: 'normal',
   textAlign: 'left',
   width: 220
-}, {
-  text: 'LOCATION_BREADCRUMB',
-  fontFamily: 'Open Sans',
-  fontSize: 12,
-  color: '#6D737B',
-  fontWeight: theme.fontWeights[400],
-  textDecoration: 'normal',
-  fontStyle: 'normal',
-  textAlign: 'left'
-}, {
-  text: 'DOMAIN',
-  fontFamily: 'Plus Jakarta Sans',
-  fontSize: 10,
-  color: '#333333',
-  fontWeight: theme.fontWeights[400],
-  textDecoration: 'normal',
-  fontStyle: 'normal',
-  textAlign: 'left'
 }];
 var elementTypes = {
   pageSize: 'pageSize',
@@ -812,7 +920,7 @@ var LOCATION_BREADCRUMB$8 = "property > building > room";
 var DOMAIN$8 = "www.domain.com";
 var SHOW_PROPERTY_LOCATION$8 = "Show Property Label";
 var LOCATION_HELPER$8 = "Enable this to show the property’s location label on the canvas, or disable it to hide it.";
-var SHOW_QR_ID$8 = "Show QR Id";
+var SHOW_QR_ID$8 = "Show QR ID";
 var QR_ID_HELPER$8 = "Enable this to display the unique QR Code ID on the canvas, or disable it to remove it.";
 var MONOCHROME_COLOR$8 = "Tint Color";
 var MONOCHROME_STRENGTH$8 = "Tint Strength";
@@ -2266,6 +2374,7 @@ var propTypes$w = {
   onChangeTextProperty: PropTypes.func,
   onSetPageSize: PropTypes.func,
   selectedPageSize: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  selectedPageSizeLabel: PropTypes.string,
   loadingImages: PropTypes.bool,
   loadingFonts: PropTypes.bool,
   uploadImageCallBack: PropTypes.func,
@@ -2277,7 +2386,7 @@ var propTypes$w = {
   outsideBoundaryPreviewPadding: PropTypes.number
 };
 
-var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$7, _templateObject5$4;
+var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$8, _templateObject5$5;
 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, ")");
@@ -2296,8 +2405,8 @@ var InnerContainerWrapper = styled.div(_templateObject3$b || (_templateObject3$b
   var editorWidth = _ref5.editorWidth;
   return editorWidth || 400;
 });
-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);
-var EditorBox = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    min-height: ", "px;\n    min-width: ", "px;\n    background: ", ";\n    box-shadow: 1.317px 1.317px 1.317px 0px rgba(0, 0, 0, 0.08);\n    // transition: all 0.1s ease-in-out;\n    overflow: hidden;\n"])), function (_ref6) {
+var Title = styled.p(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    align-self: flex-start;\n    font-size: 14px;\n    font-family: ", ";\n    font-weight: ", ";\n    color: ", ";\n    padding: 0 6px;\n    border-bottom-width: 0;\n"])), theme.color.gray_E8E8E8, theme.fonts.primary, theme.fontWeights[300], theme.color.gray_7A7979);
+var EditorBox = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    min-height: ", "px;\n    min-width: ", "px;\n    background: ", ";\n    box-shadow: 1.317px 1.317px 1.317px 0px rgba(0, 0, 0, 0.08);\n    // transition: all 0.1s ease-in-out;\n    overflow: hidden;\n"])), function (_ref6) {
   var editorHeight = _ref6.editorHeight;
   return editorHeight || 470;
 }, function (_ref7) {
@@ -2349,6 +2458,7 @@ var propTypes$v = {
   onChangeTextProperty: PropTypes.func,
   onSetPageSize: PropTypes.func,
   selectedPageSize: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  selectedPageSizeLabel: PropTypes.string,
   translation: PropTypes.object,
   uploadImageCallBack: PropTypes.func,
   setLoadingUploadImage: PropTypes.func,
@@ -2375,6 +2485,7 @@ var propTypes$u = {
   onChangeBackgroundImageOpacity: PropTypes.func,
   onSetPageSize: PropTypes.func,
   selectedPageSize: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  selectedPageSizeLabel: PropTypes.string,
   languageLocale: PropTypes.string,
   uploadImageCallBack: PropTypes.func,
   setLoadingUploadImage: PropTypes.func,
@@ -2448,7 +2559,7 @@ var StyledContainer$6 = styled.div(_templateObject$p || (_templateObject$p = _ta
   return disabled ? 'none' : 'all';
 });
 
-var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$6, _templateObject5$3, _templateObject6$1, _templateObject7$1;
+var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$7, _templateObject5$4, _templateObject6$2, _templateObject7$2;
 var Wrapper = styled.span(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n    position: relative;\n    display: inline-flex;\n    cursor: ", ";\n"])), function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? 'not-allowed' : 'pointer';
@@ -2456,16 +2567,16 @@ var Wrapper = styled.span(_templateObject$o || (_templateObject$o = _taggedTempl
 var Floating = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral(["\n    background-color: rgba(0, 0, 0, 0.75);\n    color: #fff;\n    border-radius: 6px;\n    /* wrapping */\n    white-space: normal;\n    word-break: break-word;\n    overflow-wrap: anywhere;\n    /* defaults (can be overridden via inline style in component) */\n    font-family: ", ";\n    font-weight: ", ";\n    pointer-events: none;\n    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);\n"])), theme.fonts.primary, theme.fontWeights[400]);
 styled.div(_templateObject3$a || (_templateObject3$a = _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(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n            bottom: 110%;\n            left: 50%;\n            transform: translateX(-50%);\n        "])));
+  return position === 'top' && styled.css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n            bottom: 110%;\n            left: 50%;\n            transform: translateX(-50%);\n        "])));
 }, function (_ref3) {
   var position = _ref3.position;
-  return position === 'right' && styled.css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n            top: 50%;\n            left: 105%;\n            transform: translateY(-50%);\n        "])));
+  return position === 'right' && styled.css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n            top: 50%;\n            left: 105%;\n            transform: translateY(-50%);\n        "])));
 }, function (_ref4) {
   var position = _ref4.position;
-  return position === 'bottom' && styled.css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n            top: 110%;\n            left: 50%;\n            transform: translateX(-50%);\n        "])));
+  return position === 'bottom' && styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n            top: 110%;\n            left: 50%;\n            transform: translateX(-50%);\n        "])));
 }, function (_ref5) {
   var position = _ref5.position;
-  return position === 'left' && styled.css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n            top: 50%;\n            right: 105%;\n            transform: translateY(-50%);\n        "])));
+  return position === 'left' && styled.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n            top: 50%;\n            right: 105%;\n            transform: translateY(-50%);\n        "])));
 }, Wrapper);
 
 var Tooltip = function Tooltip(_ref) {
@@ -2625,13 +2736,13 @@ var propTypes$s = {
   tooltip: PropTypes.string
 };
 
-var _templateObject$n, _templateObject2$i, _templateObject3$9, _templateObject4$5;
+var _templateObject$n, _templateObject2$i, _templateObject3$9, _templateObject4$6;
 var DropDownItem = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"])));
 var IconWrapper$3 = styled.img(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n    object-fit: contain;\n"])));
 var DropDownList = styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n    position: absolute;\n    left: 0;\n    top: 50;\n    background-color: white;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    border-radius: 4px;\n    margin-top: 5px;\n    z-index: 10;\n    width: 100%;\n    max-height: 200px;\n    overflow-y: auto;\n    z-index: 9999;\n"])));
 
 // Individual option in the dropdown
-var DropDownOption = styled.div(_templateObject4$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"])));
+var DropDownOption = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n    padding: 8px 16px;\n    cursor: pointer;\n    font-size: 14px;\n    color: #333333;\n    &:hover {\n        background-color: #f0f0f0;\n    }\n    &:active {\n        background-color: #e0e0e0;\n    }\n"])));
 
 var DropDown = function DropDown(_ref) {
   var left = _ref.left,
@@ -2699,10 +2810,18 @@ var DropDown = function DropDown(_ref) {
 };
 DropDown.propTypes = propTypes$s;
 
-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 _templateObject$m, _templateObject2$h, _templateObject3$8, _templateObject4$5, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8, _templateObject9, _templateObject0, _templateObject1;
+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: flex-end;\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 CustomSizeRow = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-end;\n  gap: 10px;\n  margin-left: 8px;\n  margin-right: 12px;\n"])));
+var CustomSizeField = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n"])));
+var CustomSizeFieldLabel = styled.span(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 9px;\n  line-height: 11px;\n  font-weight: ", ";\n  font-family: ", ";\n"])), theme.color.gray_545454, theme.fontWeights[500], theme.fonts.primary);
+var CustomSizeInputWrap = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 108px;\n  height: 40px;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  box-sizing: border-box;\n  transition: border-color 0.15s ease;\n\n  &:focus-within {\n    border-color: ", ";\n  }\n"])), theme.color.gray_200, theme.color.white, theme.color.primary);
+var CustomSizeInput = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 8px;\n  padding: 6px 32px 6px 10px;\n  box-sizing: border-box;\n  background: transparent;\n  color: ", ";\n  font-size: 14px;\n  line-height: 20px;\n  font-family: ", ";\n  color-scheme: light;\n  appearance: textfield;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), theme.color.gray_700, theme.fonts.primary);
+var CustomSizeUnit = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  right: 10px;\n  transform: translateY(-50%);\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  font-family: ", ";\n  pointer-events: none;\n"])), theme.color.gray_545454, theme.fonts.primary);
+var CustomSizeSeparator = styled.span(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 20px;\n  line-height: 20px;\n  font-weight: ", ";\n  padding-bottom: 8px;\n  font-family: ", ";\n"])), theme.color.gray_700, theme.fontWeights[400], theme.fonts.primary);
+var CustomSizeError = styled.span(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n  color: #d32f2f;\n  font-size: 11px;\n  margin-left: 4px;\n"])));
 
 var propTypes$r = {
   backgroundColor: PropTypes.string,
@@ -3351,6 +3470,7 @@ var TemplateToolBar = function TemplateToolBar(_ref) {
     onChangeBackgroundImageOpacity = _ref.onChangeBackgroundImageOpacity,
     onSetPageSize = _ref.onSetPageSize,
     selectedPageSize = _ref.selectedPageSize,
+    selectedPageSizeLabel = _ref.selectedPageSizeLabel,
     languageLocale = _ref.languageLocale,
     uploadImageCallBack = _ref.uploadImageCallBack,
     setLoadingUploadImage = _ref.setLoadingUploadImage,
@@ -3363,6 +3483,62 @@ var TemplateToolBar = function TemplateToolBar(_ref) {
     showBackgroundImagePicker = _ref$showBackgroundIm === void 0 ? true : _ref$showBackgroundIm,
     _ref$showOpacityPicke = _ref.showOpacityPicker,
     showOpacityPicker = _ref$showOpacityPicke === void 0 ? true : _ref$showOpacityPicke;
+  var DEFAULT_CUSTOM_MM = 100;
+  var _useState = React.useState(DEFAULT_CUSTOM_MM),
+    _useState2 = _slicedToArray(_useState, 2),
+    customWidthMm = _useState2[0],
+    setCustomWidthMm = _useState2[1];
+  var _useState3 = React.useState(DEFAULT_CUSTOM_MM),
+    _useState4 = _slicedToArray(_useState3, 2),
+    customHeightMm = _useState4[0],
+    setCustomHeightMm = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showCustomSizeInputs = _useState6[0],
+    setShowCustomSizeInputs = _useState6[1];
+  var _useState7 = React.useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    customSizeError = _useState8[0],
+    setCustomSizeError = _useState8[1];
+  var selectedLabel = selectedPageSizeLabel || (selectedPageSize === null || selectedPageSize === void 0 ? void 0 : selectedPageSize.preset) || selectedPageSize;
+  var sizeOptions = React.useMemo(function () {
+    return [].concat(_toConsumableArray(Object.keys(pageSizes)), [CUSTOM_CANVAS_PRESET_KEY]);
+  }, []);
+  React.useEffect(function () {
+    var isCustom = (selectedPageSize === null || selectedPageSize === void 0 ? void 0 : selectedPageSize.mode) === CANVAS_SIZE_MODES.custom;
+    setShowCustomSizeInputs(Boolean(isCustom));
+    if (isCustom) {
+      setCustomWidthMm((selectedPageSize === null || selectedPageSize === void 0 ? void 0 : selectedPageSize.widthMm) || DEFAULT_CUSTOM_MM);
+      setCustomHeightMm((selectedPageSize === null || selectedPageSize === void 0 ? void 0 : selectedPageSize.heightMm) || DEFAULT_CUSTOM_MM);
+    }
+  }, [selectedPageSize]);
+  var applyCustomSize = function applyCustomSize() {
+    var widthValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : customWidthMm;
+    var heightValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : customHeightMm;
+    var showError = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var widthMm = Number(widthValue);
+    var heightMm = Number(heightValue);
+    var isValidRange = widthMm >= 10 && widthMm <= 2000 && heightMm >= 10 && heightMm <= 2000;
+    if (!Number.isFinite(widthMm) || !Number.isFinite(heightMm) || !isValidRange) {
+      if (showError) setCustomSizeError('10-2000 mm');
+      return;
+    }
+    setCustomSizeError('');
+    onSetPageSize === null || onSetPageSize === void 0 || onSetPageSize({
+      mode: CANVAS_SIZE_MODES.custom,
+      widthMm: widthMm,
+      heightMm: heightMm
+    });
+  };
+  var handleCustomInputKeyDown = function handleCustomInputKeyDown(e) {
+    if (e.key !== 'Enter') return;
+    e.preventDefault();
+    applyCustomSize(customWidthMm, customHeightMm, true);
+  };
+  var handleCustomRowBlur = function handleCustomRowBlur(e) {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    applyCustomSize(customWidthMm, customHeightMm, true);
+  };
   var selectBackgroundColor = function selectBackgroundColor(e) {
     onSetBackgroundColor(e);
   };
@@ -3412,13 +3588,43 @@ var TemplateToolBar = function TemplateToolBar(_ref) {
   }();
   return /*#__PURE__*/React.createElement(RowContainer$4, null, /*#__PURE__*/React.createElement(DropDown, {
     gap: 20,
-    left: /*#__PURE__*/React.createElement(Label$1, null, selectedPageSize),
-    list: Object.keys(pageSizes),
+    left: /*#__PURE__*/React.createElement(Label$1, null, selectedLabel),
+    list: sizeOptions,
     onSelect: function onSelect(e) {
+      if (e === CUSTOM_CANVAS_PRESET_KEY) {
+        setShowCustomSizeInputs(true);
+        return;
+      }
+      setCustomSizeError('');
+      setShowCustomSizeInputs(false);
       onSetPageSize && onSetPageSize(e);
     },
     tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.PAGE_SIZE
-  }), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
+  }), showCustomSizeInputs ? /*#__PURE__*/React.createElement(CustomSizeRow, {
+    onBlur: handleCustomRowBlur
+  }, /*#__PURE__*/React.createElement(CustomSizeField, null, /*#__PURE__*/React.createElement(CustomSizeFieldLabel, null, "Width"), /*#__PURE__*/React.createElement(CustomSizeInputWrap, null, /*#__PURE__*/React.createElement(CustomSizeInput, {
+    value: customWidthMm,
+    onChange: function onChange(e) {
+      var nextWidth = e.target.value;
+      setCustomWidthMm(nextWidth);
+      applyCustomSize(nextWidth, customHeightMm, false);
+    },
+    onKeyDown: handleCustomInputKeyDown,
+    type: "number",
+    min: 10,
+    max: 2000
+  }), /*#__PURE__*/React.createElement(CustomSizeUnit, null, "mm"))), /*#__PURE__*/React.createElement(CustomSizeSeparator, null, "x"), /*#__PURE__*/React.createElement(CustomSizeField, null, /*#__PURE__*/React.createElement(CustomSizeFieldLabel, null, "Height"), /*#__PURE__*/React.createElement(CustomSizeInputWrap, null, /*#__PURE__*/React.createElement(CustomSizeInput, {
+    value: customHeightMm,
+    onChange: function onChange(e) {
+      var nextHeight = e.target.value;
+      setCustomHeightMm(nextHeight);
+      applyCustomSize(customWidthMm, nextHeight, false);
+    },
+    onKeyDown: handleCustomInputKeyDown,
+    type: "number",
+    min: 10,
+    max: 2000
+  }), /*#__PURE__*/React.createElement(CustomSizeUnit, null, "mm"))), customSizeError ? /*#__PURE__*/React.createElement(CustomSizeError, null, customSizeError) : null) : null, /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
     gap: 11,
     tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.BACKGROUND_COLOR,
     tooltipPosition: 'bottom'
@@ -3995,6 +4201,7 @@ var TopToolBar = function TopToolBar(_ref) {
     onChangeTextProperty = _ref.onChangeTextProperty,
     onSetPageSize = _ref.onSetPageSize,
     selectedPageSize = _ref.selectedPageSize,
+    selectedPageSizeLabel = _ref.selectedPageSizeLabel,
     languageLocale = _ref.languageLocale,
     uploadImageCallBack = _ref.uploadImageCallBack,
     setLoadingUploadImage = _ref.setLoadingUploadImage,
@@ -4020,6 +4227,7 @@ var TopToolBar = function TopToolBar(_ref) {
     backgroundImageOpacity: backgroundImageOpacity,
     onSetPageSize: onSetPageSize,
     selectedPageSize: selectedPageSize,
+    selectedPageSizeLabel: selectedPageSizeLabel,
     languageLocale: languageLocale,
     uploadImageCallBack: uploadImageCallBack,
     setLoadingUploadImage: setLoadingUploadImage,
@@ -5366,6 +5574,7 @@ var Editor = function Editor(_ref) {
     onChangeTextProperty = _ref.onChangeTextProperty,
     onSetPageSize = _ref.onSetPageSize,
     selectedPageSize = _ref.selectedPageSize,
+    selectedPageSizeLabel = _ref.selectedPageSizeLabel,
     loadingImages = _ref.loadingImages,
     loadingFonts = _ref.loadingFonts,
     uploadImageCallBack = _ref.uploadImageCallBack,
@@ -5384,7 +5593,7 @@ var Editor = function Editor(_ref) {
     _ref$showOutsideBound = _ref.showOutsideBoundaryPreview,
     showOutsideBoundaryPreview = _ref$showOutsideBound === void 0 ? false : _ref$showOutsideBound,
     _ref$outsideBoundaryP = _ref.outsideBoundaryPreviewPadding,
-    outsideBoundaryPreviewPadding = _ref$outsideBoundaryP === void 0 ? 120 : _ref$outsideBoundaryP;
+    outsideBoundaryPreviewPadding = _ref$outsideBoundaryP === void 0 ? 80 : _ref$outsideBoundaryP;
   var transformerRef = React.useRef(null);
   var previewPadding = React.useMemo(function () {
     return showOutsideBoundaryPreview ? Math.max(0, Number(outsideBoundaryPreviewPadding) || 0) : 0;
@@ -5721,6 +5930,7 @@ var Editor = function Editor(_ref) {
     onChangeTextProperty: onChangeTextProperty,
     onSetPageSize: onSetPageSize,
     selectedPageSize: selectedPageSize,
+    selectedPageSizeLabel: selectedPageSizeLabel,
     languageLocale: languageLocale,
     uploadImageCallBack: uploadImageCallBack,
     setLoadingUploadImage: setLoadingUploadImage,
@@ -6712,13 +6922,15 @@ var isPropValid = /* #__PURE__ */memoize(function (prop) {
  * @property {Array} [allowedFormats] - Allowed formats for image uploading functions
  * @property {boolean} showQrIdToggle (boolean, default false) → controls visibility of the QR ID toggle
  * @property {string | number} qrId (string | number | null, default null) → the value to render when toggled on
+ * @property {{ mode: 'preset' | 'custom', preset?: string, widthMm?: number, heightMm?: number }} [canvasSize]
+ * @property {Function} [onCanvasSizeChange]
  */
 
 /**
  * @type {React.ForwardRefExoticComponent<StudioProps & React.RefAttributes<HTMLDivElement>>}
  */
 var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _elements$elements$fi, _elements$find5, _elements$find6, _elements$find7;
+  var _elements$elements$fi, _elements$find, _elements$find2, _elements$find3;
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
     _ref$defaultQrLogo = _ref.defaultQrLogo,
@@ -6739,7 +6951,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$showOutsideBound = _ref.showOutsideBoundaryPreview,
     showOutsideBoundaryPreview = _ref$showOutsideBound === void 0 ? false : _ref$showOutsideBound,
     _ref$outsideBoundaryP = _ref.outsideBoundaryPreviewPadding,
-    outsideBoundaryPreviewPadding = _ref$outsideBoundaryP === void 0 ? 120 : _ref$outsideBoundaryP,
+    outsideBoundaryPreviewPadding = _ref$outsideBoundaryP === void 0 ? 80 : _ref$outsideBoundaryP,
     onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
     _ref$qrLink = _ref.qrLink,
     qrLink = _ref$qrLink === void 0 ? 'www.google.com' : _ref$qrLink,
@@ -6762,7 +6974,9 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$showQrIdToggle = _ref.showQrIdToggle,
     showQrIdToggle = _ref$showQrIdToggle === void 0 ? false : _ref$showQrIdToggle,
     _ref$qrId = _ref.qrId,
-    qrId = _ref$qrId === void 0 ? null : _ref$qrId;
+    qrId = _ref$qrId === void 0 ? null : _ref$qrId,
+    canvasSize = _ref.canvasSize,
+    onCanvasSizeChange = _ref.onCanvasSizeChange;
   var stageRef = React.useRef(null);
   var elementCacheRef = React.useRef({});
   var qrIdActiveRef = React.useRef(false);
@@ -6888,14 +7102,31 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     currentQrId = _useState58[0],
     setCurrentQrId = _useState58[1];
   var overallLoading = loadingFonts || loadingImages || loadingUploadImage || loading;
-  var getPageDims = React.useCallback(function () {
-    var _base$find;
+  var getPageSizeElement = React.useCallback(function () {
     var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
-    var sizeKey = (base === null || base === void 0 || (_base$find = base.find(function (e) {
+    return base === null || base === void 0 ? void 0 : base.find(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _base$find === void 0 ? void 0 : _base$find.size) || pageSizes.A4;
-    return pageSizesDimensions[sizeKey] || pageSizesDimensions[pageSizes.A4];
+    });
   }, [elements]);
+  var getNormalizedCanvasSize = React.useCallback(function () {
+    var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
+    var canvasSizeInput = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : canvasSize;
+    if (canvasSizeInput) {
+      return normalizeCanvasSize(canvasSizeInput, pageSizes.A4);
+    }
+    var pageSizeElem = base === null || base === void 0 ? void 0 : base.find(function (e) {
+      return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
+    });
+    return normalizeCanvasSize(pageSizeElem, pageSizes.A4);
+  }, [elements, canvasSize]);
+  var getPageDims = React.useCallback(function () {
+    var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
+    var normalized = getNormalizedCanvasSize(base);
+    return {
+      width: normalized.widthPx,
+      height: normalized.heightPx
+    };
+  }, [elements, getNormalizedCanvasSize]);
   var findById = React.useCallback(function (id) {
     var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : elements;
     return base.find(function (e) {
@@ -7111,9 +7342,47 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
   }, []);
   React.useEffect(function () {
-    LoadImages(elementsList);
-    setElements(elementsList);
-    var foundLoc = elementsList === null || elementsList === void 0 ? void 0 : elementsList.find(function (e) {
+    var incomingPageSizeElem = elementsList === null || elementsList === void 0 ? void 0 : elementsList.find(function (e) {
+      return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
+    });
+    var nextCanvasSize = canvasSize ? normalizeCanvasSize(canvasSize, pageSizes.A4) : normalizeCanvasSize(incomingPageSizeElem, pageSizes.A4);
+    var nextElements = elementsList.map(function (elem) {
+      if (elem.type !== elementTypes.pageSize) return elem;
+      var nextPageSize = _objectSpread2({}, elem);
+      if (nextCanvasSize.mode === CANVAS_SIZE_MODES.custom) {
+        delete nextPageSize.size;
+        nextPageSize.mode = CANVAS_SIZE_MODES.custom;
+        nextPageSize.widthMm = nextCanvasSize.widthMm;
+        nextPageSize.heightMm = nextCanvasSize.heightMm;
+      } else {
+        delete nextPageSize.mode;
+        delete nextPageSize.widthMm;
+        delete nextPageSize.heightMm;
+        nextPageSize.size = nextCanvasSize.preset;
+      }
+      return nextPageSize;
+    });
+    if (!nextElements.some(function (elem) {
+      return elem.type === elementTypes.pageSize;
+    })) {
+      var injectedPageSize = {
+        type: elementTypes.pageSize,
+        id: "element".concat(Date.now()),
+        size: nextCanvasSize.preset || pageSizes.A4,
+        cuttingGuideStroke: 0,
+        cuttingGuideStrokeColor: theme.color.black
+      };
+      if (nextCanvasSize.mode === CANVAS_SIZE_MODES.custom) {
+        delete injectedPageSize.size;
+        injectedPageSize.mode = CANVAS_SIZE_MODES.custom;
+        injectedPageSize.widthMm = nextCanvasSize.widthMm;
+        injectedPageSize.heightMm = nextCanvasSize.heightMm;
+      }
+      nextElements.unshift(injectedPageSize);
+    }
+    LoadImages(nextElements);
+    setElements(nextElements);
+    var foundLoc = nextElements === null || nextElements === void 0 ? void 0 : nextElements.find(function (e) {
       return e.id === LOCATION_ELEMENT_ID && e.type === elementTypes.text;
     });
     if (foundLoc) {
@@ -7122,7 +7391,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         rest = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
       elementCacheRef.current[LOCATION_ELEMENT_ID] = _objectSpread2({}, rest);
     }
-  }, _toConsumableArray(elementsList));
+  }, [canvasSize].concat(_toConsumableArray(elementsList)));
   var LoadImages = function LoadImages(elems) {
     setLoadingImages(true);
     preloadRelevantImages(elems).then(function (_ref5) {
@@ -7138,17 +7407,15 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
   };
   var editorHeight = React.useMemo(function () {
-    var _pageSizesDimensions, _elements$find;
-    return calculatePercentageValue((_pageSizesDimensions = pageSizesDimensions[(elements === null || elements === void 0 || (_elements$find = elements.find(function (e) {
-      return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _elements$find === void 0 ? void 0 : _elements$find.size) || (pageSizes === null || pageSizes === void 0 ? void 0 : pageSizes.A4)]) === null || _pageSizesDimensions === void 0 ? void 0 : _pageSizesDimensions.height, zoomPercentage);
-  }, [zoomPercentage, elements]);
+    var _getPageDims2 = getPageDims(elements),
+      height = _getPageDims2.height;
+    return calculatePercentageValue(height, zoomPercentage);
+  }, [zoomPercentage, elements, getPageDims]);
   var editorWidth = React.useMemo(function () {
-    var _pageSizesDimensions2, _elements$find2;
-    return calculatePercentageValue((_pageSizesDimensions2 = pageSizesDimensions[(elements === null || elements === void 0 || (_elements$find2 = elements.find(function (e) {
-      return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _elements$find2 === void 0 ? void 0 : _elements$find2.size) || (pageSizes === null || pageSizes === void 0 ? void 0 : pageSizes.A4)]) === null || _pageSizesDimensions2 === void 0 ? void 0 : _pageSizesDimensions2.width, zoomPercentage);
-  }, [zoomPercentage, elements]);
+    var _getPageDims3 = getPageDims(elements),
+      width = _getPageDims3.width;
+    return calculatePercentageValue(width, zoomPercentage);
+  }, [zoomPercentage, elements, getPageDims]);
   var normalizedOutsidePreviewPadding = React.useMemo(function () {
     return Math.max(0, Number(outsideBoundaryPreviewPadding) || 0);
   }, [outsideBoundaryPreviewPadding]);
@@ -7162,11 +7429,11 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   }, [showOutsideBoundaryPreview, normalizedOutsidePreviewPadding, editorWidth, editorHeight]);
   var selectedPageSize = React.useMemo(function () {
-    var _elements$find3;
-    return (elements === null || elements === void 0 || (_elements$find3 = elements.find(function (e) {
-      return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _elements$find3 === void 0 ? void 0 : _elements$find3.size) || (pageSizes === null || pageSizes === void 0 ? void 0 : pageSizes.A4);
-  }, [elements]);
+    return getNormalizedCanvasSize(elements);
+  }, [elements, getNormalizedCanvasSize]);
+  var selectedPageSizeLabel = React.useMemo(function () {
+    return getCanvasSizeLabel(selectedPageSize);
+  }, [selectedPageSize]);
   var hasLocationText = React.useMemo(function () {
     return elements.some(function (e) {
       return e.type === elementTypes.text && e.id === LOCATION_ELEMENT_ID;
@@ -7295,20 +7562,30 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     saveHistory([].concat(_toConsumableArray(elemClone), [newElement]));
   };
   var onSetPageSize = function onSetPageSize(newSize) {
-    var _elements$find4;
     if (!newSize) return;
-    var oldSize = (elements === null || elements === void 0 || (_elements$find4 = elements.find(function (e) {
-      return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _elements$find4 === void 0 ? void 0 : _elements$find4.size) || pageSizes.A4;
-    var oldDims = pageSizesDimensions[oldSize];
-    var newDims = pageSizesDimensions[newSize];
-    var scaleX = newDims.width / oldDims.width;
-    var scaleY = newDims.height / oldDims.height;
+    var oldDims = getNormalizedCanvasSize(elements);
+    var newDims = normalizeCanvasSize(newSize, pageSizes.A4);
+    var scaleX = newDims.widthPx / oldDims.widthPx;
+    var scaleY = newDims.heightPx / oldDims.heightPx;
+    var pageSizeElem = getPageSizeElement(elements);
+    var pageSizeId = (pageSizeElem === null || pageSizeElem === void 0 ? void 0 : pageSizeElem.id) || "element".concat(Date.now());
     var scaledElements = elements.map(function (elem) {
       if (elem.type === elementTypes.pageSize) {
-        return _objectSpread2(_objectSpread2({}, elem), {}, {
-          size: newSize
-        }); // Just update the size
+        var nextPageElem = _objectSpread2(_objectSpread2({}, elem), {}, {
+          id: pageSizeId
+        });
+        if (newDims.mode === CANVAS_SIZE_MODES.custom) {
+          delete nextPageElem.size;
+          nextPageElem.mode = CANVAS_SIZE_MODES.custom;
+          nextPageElem.widthMm = newDims.widthMm;
+          nextPageElem.heightMm = newDims.heightMm;
+        } else {
+          delete nextPageElem.mode;
+          delete nextPageElem.widthMm;
+          delete nextPageElem.heightMm;
+          nextPageElem.size = newDims.preset;
+        }
+        return nextPageElem;
       }
       var scaled = _objectSpread2({}, elem);
 
@@ -7328,7 +7605,39 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
       return scaled;
     });
+    if (!scaledElements.some(function (elem) {
+      return elem.type === elementTypes.pageSize;
+    })) {
+      var newPageElement = {
+        type: elementTypes.pageSize,
+        id: pageSizeId,
+        size: newDims.preset || pageSizes.A4,
+        cuttingGuideStroke: 0,
+        cuttingGuideStrokeColor: theme.color.black
+      };
+      if (newDims.mode === CANVAS_SIZE_MODES.custom) {
+        delete newPageElement.size;
+        newPageElement.mode = CANVAS_SIZE_MODES.custom;
+        newPageElement.widthMm = newDims.widthMm;
+        newPageElement.heightMm = newDims.heightMm;
+      }
+      scaledElements.unshift(newPageElement);
+    }
     saveHistory(removeImageProperty(scaledElements));
+    if (typeof onCanvasSizeChange === 'function') {
+      if (newDims.mode === CANVAS_SIZE_MODES.custom) {
+        onCanvasSizeChange({
+          mode: CANVAS_SIZE_MODES.custom,
+          widthMm: newDims.widthMm,
+          heightMm: newDims.heightMm
+        });
+      } else {
+        onCanvasSizeChange({
+          mode: CANVAS_SIZE_MODES.preset,
+          preset: newDims.preset
+        });
+      }
+    }
   };
   var _onChangeCuttingGuideProp = function onChangeCuttingGuideProp(type, value) {
     var elemClone = JSON.parse(JSON.stringify(elements));
@@ -7967,12 +8276,12 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onToggleQrIdText: toggleQrIdText
   }), loadingFonts ? null : /*#__PURE__*/React.createElement(Editor, {
     setLoading: setLoading,
-    cuttingGuideStroke: (elements === null || elements === void 0 || (_elements$find5 = elements.find(function (e) {
+    cuttingGuideStroke: (elements === null || elements === void 0 || (_elements$find = elements.find(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _elements$find5 === void 0 ? void 0 : _elements$find5.cuttingGuideStroke) || 0,
-    cuttingGuideStrokeColor: (elements === null || elements === void 0 || (_elements$find6 = elements.find(function (e) {
+    })) === null || _elements$find === void 0 ? void 0 : _elements$find.cuttingGuideStroke) || 0,
+    cuttingGuideStrokeColor: (elements === null || elements === void 0 || (_elements$find2 = elements.find(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _elements$find6 === void 0 ? void 0 : _elements$find6.cuttingGuideStrokeColor) || (theme === null || theme === void 0 ? void 0 : theme.color.black),
+    })) === null || _elements$find2 === void 0 ? void 0 : _elements$find2.cuttingGuideStrokeColor) || (theme === null || theme === void 0 ? void 0 : theme.color.black),
     onChangeCuttingGuideProp: function onChangeCuttingGuideProp(type, value) {
       _onChangeCuttingGuideProp(type, value);
     },
@@ -8019,9 +8328,9 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     stageRef: stageRef,
     saveHistory: saveHistory,
     onChangeBackgroundImageOpacity: onChangeBackgroundImageOpacity,
-    backgroundImageOpacity: (elements === null || elements === void 0 || (_elements$find7 = elements.find(function (e) {
+    backgroundImageOpacity: (elements === null || elements === void 0 || (_elements$find3 = elements.find(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
-    })) === null || _elements$find7 === void 0 ? void 0 : _elements$find7.opacity) || backgroundImageOpacity,
+    })) === null || _elements$find3 === void 0 ? void 0 : _elements$find3.opacity) || backgroundImageOpacity,
     onDeleteSelectedElement: onDeleteSelectedElement,
     onCopySelectedElement: onCopySelectedElement,
     onToggleLockElement: onToggleLockElement,
@@ -8031,6 +8340,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChangeTextProperty: onChangeTextProperty,
     onSetPageSize: onSetPageSize,
     selectedPageSize: selectedPageSize,
+    selectedPageSizeLabel: selectedPageSizeLabel,
     loadingImages: loadingImages,
     loadingFonts: loadingFonts,
     uploadImageCallBack: uploadImageCallBack,