@commercetools-frontend/application-components 22.14.0 → 22.14.2

package/dist/commercetools-frontend-application-components.cjs.prod.js

@@ -85,7 +85,7 @@ var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthori
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.14.0";
+var version = "22.14.2";
 
 var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9;
 const appKitSpacing55 = '40px';
@@ -574,7 +574,12 @@ const stylesBySize = {
     transitionTime: 300
   }
 };
-const getContainerStyles = props => /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:", props.size !== 'scale' ? "".concat(stylesBySize[props.size].width, " !important") : stylesBySize.scale.width, ";display:flex;flex-direction:column;background-color:", designSystem.customProperties.colorSurface, ";box-shadow:0px 0px 40px 0px rgba(0, 0, 0, 0.1);outline:0;transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    0,\n    0\n  );transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + ("" ), "" );
+const getContainerStyles = props => {
+  var _context;
+  return /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:", props.size !== 'scale' ? // In case we're using a specific size, we want it to be used until there's no space left.
+  // In such scenario, we want the modal to be as wide as possible, but using the shared indentation width size.
+  _concatInstanceProperty__default["default"](_context = "min(".concat(stylesBySize[props.size].width, ", calc(100% - ")).call(_context, constants.PORTALS_CONTAINER_INDENTATION_SIZE, ")) !important") : stylesBySize.scale.width, ";display:flex;flex-direction:column;background-color:", designSystem.customProperties.colorSurface, ";box-shadow:0px 0px 40px 0px rgba(0, 0, 0, 0.1);outline:0;transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    0,\n    0\n  );transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + ("" ), "" );
+};
 const getOverlayStyles = props => /*#__PURE__*/react.css("position:absolute;z-index:", typeof props.zIndex === 'number' ? // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
 "".concat(props.zIndex, " !important") : 'auto', ";top:0;left:0;width:100%;height:100%;background-color:hsla(195, 35%, 20%, 0.05);opacity:0;transition:transform ", stylesBySize[props.size].transitionTime, "ms ease;" + ("" ), "" );
 var _ref3 = {
@@ -1044,7 +1049,7 @@ PageHeader.displayName = 'PageHeader';
 
 const ContentWrapper$1 = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1b7jwn01"
-} )("flex:1;flex-basis:0;margin:", designTokens.marginForPageContent, ";overflow:auto;" + ("" ));
+} )("flex:1;flex-basis:0%;margin:", designTokens.marginForPageContent, ";overflow:auto;" + ("" ));
 const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1b7jwn00"
 } )({
@@ -1492,7 +1497,7 @@ TabularDetailPage.PageHeaderTitle = PageHeaderTitle;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 TabularDetailPage.Intl = i18n.sharedMessages;
 
-const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-ef7101c4.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-9a989ce1.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
@@ -1502,7 +1507,7 @@ const Divider = /*#__PURE__*/_styled__default["default"]("hr", {
 } )("background-color:", designTokens.backgroundColorForMainPageDivider, ";height:1px;border:0;" + ("" ));
 const MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf0"
-} )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForPageContent, ";" + ("" ));
+} )("flex:1;flex-basis:0%;overflow:auto;margin:", designTokens.marginForPageContent, ";" + ("" ));
 
 const headerRowMargin = "".concat(designSystem.designTokens.spacing40, " 0 0 0");
 const CustomFormMainPage = props => {
@@ -1880,7 +1885,7 @@ const defaultProps = {
 };
 const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e18jo6y41"
-} )("height:100%;padding:", designSystem.designTokens.spacing50, ";" + ("" ));
+} )("flex:1;flex-basis:0;margin:", designTokens.marginForPageContent, ";overflow:auto;" + ("" ));
 const HeaderWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e18jo6y40"
 } )("padding:", designSystem.designTokens.spacing40, " 40px;border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";" + ("" ));
@@ -1950,8 +1955,6 @@ Drawer.FormSecondaryButton = FormSecondaryButton;
 // The Intl messages can be used for button labels.
 Drawer.Intl = i18n.sharedMessages;
 
-// The width of each indentation level.
-const indentationSize = '48px';
 const useObserverElementDimensions = element => {
   const _useState = react$1.useState({
       height: 0,
@@ -2038,7 +2041,7 @@ const PortalsContainer = /*#__PURE__*/react$1.forwardRef((props, ref) => {
        * Furthermore, the "modal overlay" containers (not "dialog") get assigned
        * the correct indentation level width.
        */
-      stackingLayer => /*#__PURE__*/react.css("#", constants.PORTALS_CONTAINER_ID, " .ReactModalPortal[data-level='", stackingLayer.stackingLevel, "'] [data-role$='overlay']{z-index:calc(\n                    ", baseModalZIndex, " + ", stackingLayer.stackingLevel, "\n                  );}#", constants.PORTALS_CONTAINER_ID, " .ReactModalPortal[data-level='", stackingLayer.stackingLevel, "'] [data-role='modal-overlay'] [role='dialog']{width:calc(\n                    100% -\n                      (", indentationSize, " * ", stackingLayer.indentationLevel, ")\n                  );}" + ("" ), "" )), "" ]
+      stackingLayer => /*#__PURE__*/react.css("#", constants.PORTALS_CONTAINER_ID, " .ReactModalPortal[data-level='", stackingLayer.stackingLevel, "'] [data-role$='overlay']{z-index:calc(\n                    ", baseModalZIndex, " + ", stackingLayer.stackingLevel, "\n                  );}#", constants.PORTALS_CONTAINER_ID, " .ReactModalPortal[data-level='", stackingLayer.stackingLevel, "'] [data-role='modal-overlay'] [role='dialog']{width:calc(\n                    100% -\n                      (\n                        ", constants.PORTALS_CONTAINER_INDENTATION_SIZE, " *\n                          ", stackingLayer.indentationLevel, "\n                      )\n                  );}" + ("" ), "" )), "" ]
     }), jsxRuntime.jsx("div", {
       id: constants.PORTALS_CONTAINER_ID,
       ref: portalsContainerRef