@commercetools-frontend/application-components 22.13.0 → 22.13.1

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

@@ -34,13 +34,14 @@ var SecondaryButton = require('@commercetools-uikit/secondary-button');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var omitBy = require('lodash/omitBy');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
-var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var sentry = require('@commercetools-frontend/sentry');
+var AccessibleButton = require('@commercetools-uikit/accessible-button');
 var Constraints = require('@commercetools-uikit/constraints');
 var actionsGlobal = require('@commercetools-frontend/actions-global');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
 var IconButton = require('@commercetools-uikit/icon-button');
+var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
 var FlatButton = require('@commercetools-uikit/flat-button');
 var reactBroadcast = require('@flopflip/react-broadcast');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
@@ -71,10 +72,11 @@ var PrimaryButton__default = /*#__PURE__*/_interopDefault(PrimaryButton);
 var SecondaryButton__default = /*#__PURE__*/_interopDefault(SecondaryButton);
 var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 var omitBy__default = /*#__PURE__*/_interopDefault(omitBy);
-var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
+var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
 var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
@@ -83,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.13.0";
+var version = "22.13.1";
 
 var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9;
 const appKitSpacing55 = '40px';
@@ -118,6 +120,7 @@ const themesOverrides = {
     heightForTab: '2px',
     lineHeightForNavbarLink: designSystem.designTokens.lineHeight20,
     marginBottomForPageTopBar: designSystem.designTokens.spacing40,
+    marginForCustomViewsSelectorAsTabular: "0 ".concat(appKitSpacing55),
     marginForDialogContainerContents: _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing30, " 0 ")).call(_context, designSystem.designTokens.spacing50, " 0"),
     marginForModalPageHeader: "0 ".concat(appKitSpacing55),
     marginForUserMenuItem: "".concat(designSystem.designTokens.spacing10, " 0"),
@@ -478,6 +481,74 @@ FormDialog.defaultProps = defaultProps$f;
 // The Intl messages can be used for button labels.
 FormDialog.Intl = i18n.sharedMessages;
 
+function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const primaryDefaultProps = {
+  label: i18n.sharedMessages.confirm,
+  isDisabled: false,
+  dataAttributes: {}
+};
+const useFormattedLabel = label => {
+  const intl = reactIntl.useIntl();
+  return typeof label === 'string' ? label : intl.formatMessage(label);
+};
+const FormPrimaryButton = props => {
+  const label = useFormattedLabel(props.label);
+  return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$4({
+    label: label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled
+  }, filterDataAttributes(props.dataAttributes)));
+};
+FormPrimaryButton.propTypes = {};
+FormPrimaryButton.displayName = 'FormPrimaryButton';
+FormPrimaryButton.defaultProps = primaryDefaultProps;
+const secondaryDefaultProps = {
+  label: i18n.sharedMessages.cancel,
+  isDisabled: false,
+  dataAttributes: {}
+};
+const FormSecondaryButton = props => {
+  const label = useFormattedLabel(props.label);
+  return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$4({
+    label: label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled,
+    iconLeft: props.iconLeft
+  }, filterDataAttributes(props.dataAttributes)));
+};
+FormSecondaryButton.propTypes = {};
+FormSecondaryButton.displayName = 'FormSecondaryButton';
+FormSecondaryButton.defaultProps = secondaryDefaultProps;
+const deleteDefaultProps = {
+  label: i18n.sharedMessages.delete,
+  isDisabled: false,
+  dataAttributes: {}
+};
+const FormDeleteButton = props => {
+  const label = useFormattedLabel(props.label);
+  return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$4({
+    icon: jsxRuntime.jsx(icons.BinLinearIcon, {}),
+    label: label,
+    onClick: props.onClick,
+    isDisabled: props.isDisabled
+  }, filterDataAttributes(props.dataAttributes)));
+};
+FormDeleteButton.propTypes = {};
+FormDeleteButton.displayName = 'FormDeleteButton';
+FormDeleteButton.defaultProps = deleteDefaultProps;
+
+const messages$4 = reactIntl.defineMessages({
+  back: {
+    id: 'Components.ModalPage.TopBar.Back',
+    defaultMessage: 'Go Back'
+  },
+  close: {
+    id: 'Components.ModalPage.TopBar.Close',
+    defaultMessage: 'Close Modal Page'
+  }
+});
+
 const defaultProps$e = {
   titleSize: 'small',
   truncate: false
@@ -551,98 +622,6 @@ PageHeaderTitle.propTypes = {};
 PageHeaderTitle.displayName = 'PageHeaderTitle';
 PageHeaderTitle.defaultProps = defaultProps$e;
 
-const PageHeader = props => {
-  return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin:", designTokens.marginForModalPageHeader, ";padding:", designTokens.paddingForModalPageHeader, ";border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";&>*+*{margin-left:", designTokens.marginLeftForModalPageHeaderControls, ";}" + ("" ), "" ),
-    children: [jsxRuntime.jsx(PageHeaderTitle, {
-      title: props.title,
-      titleSize: "big",
-      subtitle: props.subtitle,
-      truncate: true
-    }), props.children]
-  });
-};
-PageHeader.propTypes = {};
-PageHeader.displayName = 'PageHeader';
-
-const ContentWrapper$1 = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1b7jwn01"
-} )("flex:1;flex-basis:0;margin:", designTokens.marginForPageContent, ";overflow:auto;" + ("" ));
-const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1b7jwn00"
-} )({
-  name: "kdbhus",
-  styles: "height:100%;display:flex;flex-direction:column"
-} );
-
-function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const primaryDefaultProps = {
-  label: i18n.sharedMessages.confirm,
-  isDisabled: false,
-  dataAttributes: {}
-};
-const useFormattedLabel = label => {
-  const intl = reactIntl.useIntl();
-  return typeof label === 'string' ? label : intl.formatMessage(label);
-};
-const FormPrimaryButton = props => {
-  const label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$4({
-    label: label,
-    onClick: props.onClick,
-    isDisabled: props.isDisabled
-  }, filterDataAttributes(props.dataAttributes)));
-};
-FormPrimaryButton.propTypes = {};
-FormPrimaryButton.displayName = 'FormPrimaryButton';
-FormPrimaryButton.defaultProps = primaryDefaultProps;
-const secondaryDefaultProps = {
-  label: i18n.sharedMessages.cancel,
-  isDisabled: false,
-  dataAttributes: {}
-};
-const FormSecondaryButton = props => {
-  const label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$4({
-    label: label,
-    onClick: props.onClick,
-    isDisabled: props.isDisabled,
-    iconLeft: props.iconLeft
-  }, filterDataAttributes(props.dataAttributes)));
-};
-FormSecondaryButton.propTypes = {};
-FormSecondaryButton.displayName = 'FormSecondaryButton';
-FormSecondaryButton.defaultProps = secondaryDefaultProps;
-const deleteDefaultProps = {
-  label: i18n.sharedMessages.delete,
-  isDisabled: false,
-  dataAttributes: {}
-};
-const FormDeleteButton = props => {
-  const label = useFormattedLabel(props.label);
-  return jsxRuntime.jsx(IconButton__default["default"], _objectSpread$4({
-    icon: jsxRuntime.jsx(icons.BinLinearIcon, {}),
-    label: label,
-    onClick: props.onClick,
-    isDisabled: props.isDisabled
-  }, filterDataAttributes(props.dataAttributes)));
-};
-FormDeleteButton.propTypes = {};
-FormDeleteButton.displayName = 'FormDeleteButton';
-FormDeleteButton.defaultProps = deleteDefaultProps;
-
-const messages$4 = reactIntl.defineMessages({
-  back: {
-    id: 'Components.ModalPage.TopBar.Back',
-    defaultMessage: 'Go Back'
-  },
-  close: {
-    id: 'Components.ModalPage.TopBar.Close',
-    defaultMessage: 'Close Modal Page'
-  }
-});
-
 // Component to have a larger clickable surface
 var _ref2$2 = {
   name: "1rxhroq",
@@ -707,13 +686,146 @@ ModalPageTopBar.propTypes = {};
 ModalPageTopBar.displayName = 'ModalPageTopBar';
 ModalPageTopBar.defaultProps = defaultProps$d;
 
+const stylesBySize = {
+  '10': {
+    width: '600px',
+    transitionTime: 200
+  },
+  '20': {
+    width: '900px',
+    transitionTime: 200
+  },
+  '30': {
+    width: '1200px',
+    transitionTime: 200
+  },
+  scale: {
+    width: '100%',
+    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 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 = {
+  name: "1ffv7m4",
+  styles: "transform:translate3d(0, 0, 0)!important"
+} ;
+const getAfterOpenContainerAnimation = () => _ref3;
+var _ref2$1 = {
+  name: "1d9ftqx",
+  styles: "opacity:1!important"
+} ;
+const getAfterOpenOverlayAnimation = () => _ref2$1;
+const getBeforeCloseContainerAnimation = props => /*#__PURE__*/react.css("transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    ,\n    0,\n    0\n  )!important;" + ("" ), "" );
+var _ref$3 = {
+  name: "728dx5",
+  styles: "opacity:0!important"
+} ;
+const getBeforeCloseOverlayAnimation = () => _ref$3;
+
+function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const getDefaultParentSelector = () => document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
+const getOverlayElement = (props, contentElement) =>
+// Assign the `data-role` to the overlay container, which is used as
+// the CSS selector in the `<PortalsContainer>`.
+jsxRuntime.jsx("div", _objectSpread$3(_objectSpread$3({}, props), {}, {
+  "data-role": "modal-overlay",
+  children: contentElement
+}));
+
+// NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
+// However, we need to explicitly define this otherwise the prop-types babel plugin
+// does not recognize the object shape.
 const defaultProps$c = {
+  size: 'scale',
+  getParentSelector: getDefaultParentSelector,
+  shouldDelayOnClose: true
+};
+const ModalPage = props => {
+  const _useState = react$1.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    forceClose = _useState2[0],
+    setForceClose = _useState2[1];
+  const closingTimer = react$1.useRef();
+  react$1.useEffect(() => {
+    if (props.isOpen === true) setForceClose(false);
+    return () => {
+      if (closingTimer.current) {
+        clearTimeout(closingTimer.current);
+      }
+    };
+  }, [props.isOpen]);
+  const onClose = props.onClose;
+  const TRANSITION_DURATION = stylesBySize[props.size].transitionTime;
+  const handleClose = react$1.useCallback(event => {
+    if (props.shouldDelayOnClose) {
+      // In this case we want the closing animation to be shown
+      // and therefore we need wait for it to be completed
+      // before calling `onClose`.
+      setForceClose(true);
+      closingTimer.current = _setTimeout__default["default"](() => {
+        onClose && onClose(event);
+      }, TRANSITION_DURATION);
+      return;
+    }
+    onClose && onClose(event);
+  }, [onClose, props.shouldDelayOnClose, TRANSITION_DURATION]);
+  return jsxRuntime.jsx(react.ClassNames, {
+    children: _ref => {
+      var _props$afterOpenStyle;
+      let makeClassName = _ref.css;
+      return jsxRuntime.jsxs(Modal__default["default"], {
+        isOpen: forceClose === true ? false : props.isOpen,
+        onRequestClose: handleClose,
+        shouldCloseOnOverlayClick: Boolean(props.onClose),
+        shouldCloseOnEsc: Boolean(props.onClose),
+        overlayElement: getOverlayElement,
+        overlayClassName: {
+          base: makeClassName(getOverlayStyles(props)),
+          afterOpen: makeClassName(getAfterOpenOverlayAnimation()),
+          beforeClose: makeClassName(getBeforeCloseOverlayAnimation())
+        },
+        className: {
+          base: makeClassName(getContainerStyles(props)),
+          afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName((_props$afterOpenStyle = props.afterOpenStyles) !== null && _props$afterOpenStyle !== void 0 ? _props$afterOpenStyle : getAfterOpenContainerAnimation()),
+          beforeClose: makeClassName(getBeforeCloseContainerAnimation(props))
+        },
+        contentLabel: props.title,
+        parentSelector: props.getParentSelector,
+        ariaHideApp: false
+        // Adjust this value if the (beforeClose) animation duration is changed
+        ,
+        closeTimeoutMS: TRANSITION_DURATION,
+        style: {
+          // stylelint-disable-next-line selector-type-no-unknown
+          overlay: {
+            zIndex: props.zIndex
+          }
+        },
+        children: [!props.hideTopBar && jsxRuntime.jsx(ModalPageTopBar, {
+          color: props.topBarColor,
+          onClose: handleClose,
+          currentPathLabel: props.currentPathLabel,
+          previousPathLabel: props.previousPathLabel,
+          hidePathLabel: props.hidePathLabel
+        }), props.children]
+      });
+    }
+  });
+};
+ModalPage.propTypes = {};
+ModalPage.displayName = 'ModalPage';
+ModalPage.defaultProps = defaultProps$c;
+
+const defaultProps$b = {
   size: 10,
   hideControls: false,
   onPrimaryButtonClick: () => {},
   onSecondaryButtonClick: () => {}
 };
-const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+const ContentWrapper$1 = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e18jo6y41"
 } )("height:100%;padding:", designSystem.designTokens.spacing50, ";" + ("" ));
 const HeaderWrapper = /*#__PURE__*/_styled__default["default"]("div", {
@@ -729,7 +841,6 @@ function Drawer(props) {
     size: props.size,
     title: props.title,
     afterOpenStyles: props.afterOpenStyles,
-    customViewLocatorCode: props.customViewLocatorCode,
     getParentSelector: props.getParentSelector,
     shouldDelayOnClose: props.shouldDelayOnClose,
     topBarColor: props.topBarColor,
@@ -770,14 +881,14 @@ function Drawer(props) {
           })]
         })]
       })
-    }), jsxRuntime.jsx(ContentWrapper, {
+    }), jsxRuntime.jsx(ContentWrapper$1, {
       children: props.children
     })]
   });
 }
 Drawer.propTypes = {};
 Drawer.displayName = 'Drawer';
-Drawer.defaultProps = defaultProps$c;
+Drawer.defaultProps = defaultProps$b;
 // Static export of pre-configured form control buttons to easily re-use
 // them in the custom controls.
 Drawer.FormPrimaryButton = FormPrimaryButton;
@@ -928,15 +1039,41 @@ const useCustomViewsConnector = _ref => {
   };
 };
 
-function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const COMPONENT_HEIGHT = '56px';
+function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const COMPONENT_HEIGHT = '52px';
 const Wrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e16cb3zv1"
-} )("height:", props => props.shouldRender ? COMPONENT_HEIGHT : '0', ";overflow:hidden;transition:height 0.3s ease-in-out;" + ("" ));
+  target: "e16cb3zv3"
+} )("height:", props => props.shouldRender ? COMPONENT_HEIGHT : '0', ";overflow:hidden;transition:margin 0.3s ease-in-out,height 0.3s ease-in-out;margin:", props => props.shouldRender ? props.margin : '0', ";" + ("" ));
 const Container$2 = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e16cb3zv2"
+} )("background-color:", designSystem.designTokens.colorNeutral98, ";padding:10px ", designSystem.designTokens.spacing30, ";border:1px solid ", designSystem.designTokens.colorNeutral95, ";border-radius:", designSystem.designTokens.borderRadius8, ";" + ("" ));
+const hoverAndSelectedStateStyles = /*#__PURE__*/react.css("box-shadow:", designSystem.designTokens.shadow1, ";background-color:", designSystem.designTokens.colorSurface, ";color:", designSystem.designTokens.colorPrimary30, ";" + ("" ), "" );
+const CustomViewSelectorItem = props => {
+  return jsxRuntime.jsx(AccessibleButton__default["default"], {
+    css: /*#__PURE__*/react.css("display:flex;align-items:center;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing25, ";height:30px;border-radius:", designSystem.designTokens.borderRadius6, ";color:", designSystem.designTokens.colorPrimary, ";", props.selected && hoverAndSelectedStateStyles, " :hover{", hoverAndSelectedStateStyles, ";}" + ("" ), "" ),
+    onClick: props.onClick,
+    label: props.label,
+    children: jsxRuntime.jsx(Text__default["default"].Detail, {
+      tone: "inherit",
+      fontWeight: props.selected ? 'bold' : 'regular',
+      children: props.label
+    })
+  });
+};
+CustomViewSelectorItem.propTypes = {};
+const SelectorLabel = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e16cb3zv1"
+} )({
+  name: "1i68o0s",
+  styles: "display:flex;align-items:center;gap:6px;div{font-weight:300;}"
+} );
+const Separator = /*#__PURE__*/_styled__default["default"]("span", {
   target: "e16cb3zv0"
-} )("background-color:", designSystem.designTokens.colorAccent98, ";padding:", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing60, ";" + ("" ));
+} )({
+  name: "1lsblg0",
+  styles: "width:1px;height:18px;background-color:#cccccc"
+} );
 function CustomViewSelector(props) {
   const _useState = react$1.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -964,30 +1101,34 @@ function CustomViewSelector(props) {
   }
   return jsxRuntime.jsx(Wrapper, {
     shouldRender: customViews.length > 0,
+    margin: props.margin || '0',
     children: jsxRuntime.jsx(Container$2, {
       children: jsxRuntime.jsxs(Constraints__default["default"].Horizontal, {
         max: "scale",
         children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
-          scale: "m",
-          justifyContent: "flex-end",
+          scale: "s",
+          justifyContent: "flex-start",
           alignItems: "center",
-          children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
-            scale: "xs",
-            alignItems: "center",
-            children: [jsxRuntime.jsx(icons.SidebarCollapseIcon, {
+          children: [jsxRuntime.jsxs(SelectorLabel, {
+            children: [jsxRuntime.jsx(icons.WindowEyeIcon, {
               size: "medium",
               color: "neutral60"
             }), jsxRuntime.jsx(Text__default["default"].Detail, {
               tone: "secondary",
               intlMessage: messages$2.title
             })]
-          }), _mapInstanceProperty__default["default"](customViews).call(customViews, customView => jsxRuntime.jsx(SecondaryButton__default["default"], {
-            label: customView.defaultLabel,
-            size: "medium",
-            onClick: () => {
-              setSelectedCustomView(customView);
-            }
-          }, customView.id))]
+          }), _mapInstanceProperty__default["default"](customViews).call(customViews, (customView, index) => {
+            const isNotLastItem = index !== customViews.length - 1;
+            return jsxRuntime.jsxs(react$1.Fragment, {
+              children: [jsxRuntime.jsx(CustomViewSelectorItem, {
+                selected: (selectedCustomView === null || selectedCustomView === void 0 ? void 0 : selectedCustomView.id) === customView.id,
+                onClick: () => {
+                  setSelectedCustomView(customView);
+                },
+                label: customView.defaultLabel
+              }), isNotLastItem && jsxRuntime.jsx(Separator, {})]
+            }, customView.id);
+          })]
         }), selectedCustomView && jsxRuntime.jsx(CustomViewLoader, {
           customView: selectedCustomView,
           onClose: () => {
@@ -999,150 +1140,46 @@ function CustomViewSelector(props) {
   });
 }
 CustomViewSelector.propTypes = {};
+CustomViewSelector.displayName = 'CustomViewSelector';
 const CustomViewSelectorOrNothing = props => {
   if (!props.customViewLocatorCode) {
     return null;
   }
-  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$3(_objectSpread$3({}, props), {}, {
+  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$2(_objectSpread$2({}, props), {}, {
     customViewLocatorCode: props.customViewLocatorCode
   }));
 };
 CustomViewSelectorOrNothing.propTypes = {};
 
-const stylesBySize = {
-  '10': {
-    width: '600px',
-    transitionTime: 200
-  },
-  '20': {
-    width: '900px',
-    transitionTime: 200
-  },
-  '30': {
-    width: '1200px',
-    transitionTime: 200
-  },
-  scale: {
-    width: '100%',
-    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 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 = {
-  name: "1ffv7m4",
-  styles: "transform:translate3d(0, 0, 0)!important"
-} ;
-const getAfterOpenContainerAnimation = () => _ref3;
-var _ref2$1 = {
-  name: "1d9ftqx",
-  styles: "opacity:1!important"
-} ;
-const getAfterOpenOverlayAnimation = () => _ref2$1;
-const getBeforeCloseContainerAnimation = props => /*#__PURE__*/react.css("transform:translate3d(\n    ", props.size !== 'scale' ? stylesBySize[props.size].width : '30px', ",\n    ,\n    0,\n    0\n  )!important;" + ("" ), "" );
-var _ref$3 = {
-  name: "728dx5",
-  styles: "opacity:0!important"
-} ;
-const getBeforeCloseOverlayAnimation = () => _ref$3;
-
-function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const getDefaultParentSelector = () => document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
-const getOverlayElement = (props, contentElement) =>
-// Assign the `data-role` to the overlay container, which is used as
-// the CSS selector in the `<PortalsContainer>`.
-jsxRuntime.jsx("div", _objectSpread$2(_objectSpread$2({}, props), {}, {
-  "data-role": "modal-overlay",
-  children: contentElement
-}));
-
-// NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
-// However, we need to explicitly define this otherwise the prop-types babel plugin
-// does not recognize the object shape.
-const defaultProps$b = {
-  size: 'scale',
-  getParentSelector: getDefaultParentSelector,
-  shouldDelayOnClose: true
-};
-const ModalPage = props => {
-  const _useState = react$1.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    forceClose = _useState2[0],
-    setForceClose = _useState2[1];
-  const closingTimer = react$1.useRef();
-  react$1.useEffect(() => {
-    if (props.isOpen === true) setForceClose(false);
-    return () => {
-      if (closingTimer.current) {
-        clearTimeout(closingTimer.current);
-      }
-    };
-  }, [props.isOpen]);
-  const onClose = props.onClose;
-  const TRANSITION_DURATION = stylesBySize[props.size].transitionTime;
-  const handleClose = react$1.useCallback(event => {
-    if (props.shouldDelayOnClose) {
-      // In this case we want the closing animation to be shown
-      // and therefore we need wait for it to be completed
-      // before calling `onClose`.
-      setForceClose(true);
-      closingTimer.current = _setTimeout__default["default"](() => {
-        onClose && onClose(event);
-      }, TRANSITION_DURATION);
-      return;
-    }
-    onClose && onClose(event);
-  }, [onClose, props.shouldDelayOnClose, TRANSITION_DURATION]);
-  return jsxRuntime.jsx(react.ClassNames, {
-    children: _ref => {
-      var _props$afterOpenStyle;
-      let makeClassName = _ref.css;
-      return jsxRuntime.jsxs(Modal__default["default"], {
-        isOpen: forceClose === true ? false : props.isOpen,
-        onRequestClose: handleClose,
-        shouldCloseOnOverlayClick: Boolean(props.onClose),
-        shouldCloseOnEsc: Boolean(props.onClose),
-        overlayElement: getOverlayElement,
-        overlayClassName: {
-          base: makeClassName(getOverlayStyles(props)),
-          afterOpen: makeClassName(getAfterOpenOverlayAnimation()),
-          beforeClose: makeClassName(getBeforeCloseOverlayAnimation())
-        },
-        className: {
-          base: makeClassName(getContainerStyles(props)),
-          afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName((_props$afterOpenStyle = props.afterOpenStyles) !== null && _props$afterOpenStyle !== void 0 ? _props$afterOpenStyle : getAfterOpenContainerAnimation()),
-          beforeClose: makeClassName(getBeforeCloseContainerAnimation(props))
-        },
-        contentLabel: props.title,
-        parentSelector: props.getParentSelector,
-        ariaHideApp: false
-        // Adjust this value if the (beforeClose) animation duration is changed
-        ,
-        closeTimeoutMS: TRANSITION_DURATION,
-        style: {
-          // stylelint-disable-next-line selector-type-no-unknown
-          overlay: {
-            zIndex: props.zIndex
-          }
-        },
-        children: [jsxRuntime.jsx(CustomViewSelectorOrNothing, {
-          customViewLocatorCode: props.customViewLocatorCode
-        }), !props.hideTopBar && jsxRuntime.jsx(ModalPageTopBar, {
-          color: props.topBarColor,
-          onClose: handleClose,
-          currentPathLabel: props.currentPathLabel,
-          previousPathLabel: props.previousPathLabel,
-          hidePathLabel: props.hidePathLabel
-        }), props.children]
-      });
-    }
+const PageHeader = props => {
+  return jsxRuntime.jsxs("div", {
+    css: /*#__PURE__*/react.css("margin:", designTokens.marginForModalPageHeader, ";padding:", designTokens.paddingForModalPageHeader, ";border-bottom:1px solid ", designTokens.borderColorForModalPageHeaderDivider, ";" + ("" ), "" ),
+    children: [jsxRuntime.jsxs("div", {
+      css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;&>*+*{margin-left:", designTokens.marginLeftForModalPageHeaderControls, ";}" + ("" ), "" ),
+      children: [jsxRuntime.jsx(PageHeaderTitle, {
+        title: props.title,
+        titleSize: "big",
+        subtitle: props.subtitle,
+        truncate: true
+      }), props.children]
+    }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+      margin: "".concat(designSystem.designTokens.spacing40, " 0 0 0"),
+      customViewLocatorCode: props.customViewLocatorCode
+    })]
   });
 };
-ModalPage.propTypes = {};
-ModalPage.displayName = 'ModalPage';
-ModalPage.defaultProps = defaultProps$b;
+PageHeader.propTypes = {};
+PageHeader.displayName = 'PageHeader';
+
+const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1b7jwn01"
+} )("flex:1;flex-basis:0;margin:", designTokens.marginForPageContent, ";overflow:auto;" + ("" ));
+const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1b7jwn00"
+} )({
+  name: "kdbhus",
+  styles: "height:100%;display:flex;flex-direction:column"
+} );
 
 const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
   title: props.title,
@@ -1154,11 +1191,11 @@ const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
   shouldDelayOnClose: props.shouldDelayOnClose,
   getParentSelector: props.getParentSelector,
   afterOpenStyles: props.afterOpenStyles,
-  customViewLocatorCode: props.customViewLocatorCode,
   children: [jsxRuntime.jsx(PageHeader, {
     title: props.title,
-    subtitle: props.subtitle
-  }), jsxRuntime.jsx(ContentWrapper$1, {
+    subtitle: props.subtitle,
+    customViewLocatorCode: props.customViewLocatorCode
+  }), jsxRuntime.jsx(ContentWrapper, {
     children: props.children
   })]
 });
@@ -1175,15 +1212,15 @@ const CustomFormModalPage = props => jsxRuntime.jsxs(ModalPage, {
   getParentSelector: props.getParentSelector,
   shouldDelayOnClose: props.shouldDelayOnClose,
   afterOpenStyles: props.afterOpenStyles,
-  customViewLocatorCode: props.customViewLocatorCode,
   children: [jsxRuntime.jsx(PageHeader, {
     title: props.title,
     subtitle: props.subtitle,
+    customViewLocatorCode: props.customViewLocatorCode,
     children: !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
       alignItems: "flex-end",
       children: props.formControls
     })
-  }), jsxRuntime.jsx(ContentWrapper$1, {
+  }), jsxRuntime.jsx(ContentWrapper, {
     children: props.children
   })]
 });
@@ -1258,7 +1295,7 @@ const useCustomViewLocatorSelector = function () {
 };
 
 const TabControls = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "elpldre1"
+  target: "elpldre2"
 } )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
 const ControlsContainter = props => jsxRuntime.jsxs("div", {
   css: /*#__PURE__*/react.css("display:flex;align-items:flex-end;justify-content:space-between;margin-top:", designTokens.marginTopForTabControls, ";" + ("" ), "" ),
@@ -1280,8 +1317,11 @@ const defaultProps$9 = {
 };
 TabularPageContainer.defaultProps = defaultProps$9;
 const FormControlsContainer = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "elpldre0"
+  target: "elpldre1"
 } )("margin-bottom:", designSystem.designTokens.spacingM, ";" + ("" ));
+const CustomViewsSelectorWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "elpldre0"
+} )("margin:", designTokens.marginForCustomViewsSelectorAsTabular, ";" + ("" ));
 
 const defaultProps$8 = {
   hideControls: false
@@ -1300,7 +1340,6 @@ const TabularModalPage = props => {
     getParentSelector: props.getParentSelector,
     shouldDelayOnClose: props.shouldDelayOnClose,
     afterOpenStyles: props.afterOpenStyles,
-    customViewLocatorCode: currentCustomViewLocatorCode,
     children: [jsxRuntime.jsxs(TabularPageContainer, {
       color: "neutral",
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
@@ -1317,7 +1356,12 @@ const TabularModalPage = props => {
           })
         })
       })]
-    }), jsxRuntime.jsx(ContentWrapper$1, {
+    }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
+      children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+        margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
+        customViewLocatorCode: currentCustomViewLocatorCode
+      })
+    }), jsxRuntime.jsx(ContentWrapper, {
       children: props.children
     })]
   });
@@ -1363,6 +1407,10 @@ const DetailPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
 const HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "etkdonc0"
 } )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
+const getCustomViewsSelectorMargin = hasContentBelow => {
+  var _context;
+  return _concatInstanceProperty__default["default"](_context = "".concat(designSystem.designTokens.spacing40, " 0 ")).call(_context, hasContentBelow ? designSystem.designTokens.spacing40 : '0', " 0");
+};
 
 // NOTE: the `MessageDescriptor` type is exposed by `react-intl`.
 // However, we need to explicitly define this otherwise the prop-types babel plugin
@@ -1373,9 +1421,7 @@ const defaultProps$6 = {
 const CustomFormDetailPage = props => {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsx(CustomViewSelectorOrNothing, {
-      customViewLocatorCode: props.customViewLocatorCode
-    }), jsxRuntime.jsxs(DetailPageContainer, {
+    children: [jsxRuntime.jsxs(DetailPageContainer, {
       children: [jsxRuntime.jsx(PageTopBar, {
         color: "neutral",
         previousPathLabel: props.previousPathLabel,
@@ -1384,13 +1430,16 @@ const CustomFormDetailPage = props => {
         title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
         subtitle: props.subtitle,
         titleSize: "big"
+      }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+        margin: getCustomViewsSelectorMargin(!props.hideControls && !!props.formControls),
+        customViewLocatorCode: props.customViewLocatorCode
       }), !props.hideControls && props.formControls && jsxRuntime.jsx(HeaderControlsWrapper, {
         children: jsxRuntime.jsx(Spacings__default["default"].Inline, {
           justifyContent: "flex-end",
           children: props.formControls
         })
       })]
-    }), jsxRuntime.jsx(ContentWrapper$1, {
+    }), jsxRuntime.jsx(ContentWrapper, {
       children: props.children
     })]
   });
@@ -1472,9 +1521,7 @@ const TabularDetailPage = props => {
   const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
     currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsx(CustomViewSelectorOrNothing, {
-      customViewLocatorCode: currentCustomViewLocatorCode
-    }), jsxRuntime.jsxs(TabularPageContainer, {
+    children: [jsxRuntime.jsxs(TabularPageContainer, {
       color: "neutral",
       children: [jsxRuntime.jsx(PageTopBar, {
         color: "neutral",
@@ -1493,7 +1540,12 @@ const TabularDetailPage = props => {
           })
         })
       })]
-    }), jsxRuntime.jsx(ContentWrapper$1, {
+    }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
+      children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+        margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
+        customViewLocatorCode: currentCustomViewLocatorCode
+      })
+    }), jsxRuntime.jsx(ContentWrapper, {
       children: props.children
     })]
   });
@@ -1512,7 +1564,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-295bf2b5.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-609304bf.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
@@ -1524,33 +1576,38 @@ const MainPageContent = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf0"
 } )("flex:1;flex-basis:0;overflow:auto;margin:", designTokens.marginForPageContent, ";" + ("" ));
 
-const defaultProps$3 = {
-  hideControls: false,
-  hideDivider: false
-};
+const headerRowMargin = "".concat(designSystem.designTokens.spacing40, " 0 0 0");
 const CustomFormMainPage = props => {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsx(CustomViewSelectorOrNothing, {
-      customViewLocatorCode: props.customViewLocatorCode
-    }), jsxRuntime.jsx(MainPageContainer, {
-      children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
-        scale: "l",
-        children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
-          title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
-          subtitle: props.subtitle,
-          titleSize: "big"
-        }), !props.hideControls && props.formControls && jsxRuntime.jsx(Spacings__default["default"].Inline, {
+    children: [jsxRuntime.jsxs(MainPageContainer, {
+      children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
+        title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
+        subtitle: props.subtitle,
+        titleSize: "big"
+      }), jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+        margin: headerRowMargin,
+        customViewLocatorCode: props.customViewLocatorCode
+      }), !props.hideControls && props.formControls && jsxRuntime.jsx("div", {
+        css: /*#__PURE__*/react.css("margin:", headerRowMargin, ";" + ("" ), "" ),
+        children: jsxRuntime.jsx(Spacings__default["default"].Inline, {
           justifyContent: "flex-end",
           children: props.formControls
-        }), !props.hideDivider && jsxRuntime.jsx(Divider, {})]
-      })
+        })
+      }), !props.hideDivider && jsxRuntime.jsx("div", {
+        css: /*#__PURE__*/react.css("&>", Divider, "{margin:", headerRowMargin, ";}" + ("" ), "" ),
+        children: jsxRuntime.jsx(Divider, {})
+      })]
     }), jsxRuntime.jsx(MainPageContent, {
       children: props.children
     })]
   });
 };
 CustomFormMainPage.propTypes = {};
+const defaultProps$3 = {
+  hideControls: false,
+  hideDivider: false
+};
 CustomFormMainPage.displayName = 'CustomFormMainPage';
 CustomFormMainPage.defaultProps = defaultProps$3;
 
@@ -1631,9 +1688,7 @@ const TabularMainPage = props => {
   const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
     currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsx(CustomViewSelectorOrNothing, {
-      customViewLocatorCode: currentCustomViewLocatorCode
-    }), jsxRuntime.jsxs(TabularPageContainer, {
+    children: [jsxRuntime.jsxs(TabularPageContainer, {
       color: "surface",
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
         title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
@@ -1648,7 +1703,12 @@ const TabularMainPage = props => {
           })
         })
       })]
-    }), jsxRuntime.jsx(ContentWrapper$1, {
+    }), jsxRuntime.jsx(CustomViewsSelectorWrapper, {
+      children: jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+        margin: "".concat(designSystem.designTokens.spacing30, " 0 0 0"),
+        customViewLocatorCode: currentCustomViewLocatorCode
+      })
+    }), jsxRuntime.jsx(ContentWrapper, {
       css: /*#__PURE__*/react.css("background-color:", designTokens.backgroundColorForTabularMainPageContent, ";" + ("" ), "" ),
       children: props.children
     })]
@@ -1920,6 +1980,7 @@ const PortalsContainer = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   const containerSelectorToPreventScrollingOnOpen = (_props$containerSelec = props.containerSelectorToPreventScrollingOnOpen) !== null && _props$containerSelec !== void 0 ? _props$containerSelec : 'main';
   const zIndex = (_props$zIndex = props.zIndex) !== null && _props$zIndex !== void 0 ? _props$zIndex : 10000;
   const baseModalZIndex = (_props$baseModalZInde = props.baseModalZIndex) !== null && _props$baseModalZInde !== void 0 ? _props$baseModalZInde : 1000;
+  const modalWidthTransition = 'width 150ms cubic-bezier(1, 0, 0.58, 1)';
   const portalsContainerRef = react$1.useRef(null);
   const globalNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 || (_current = ref.current) === null || _current === void 0 ? void 0 : _current.notificationsGlobalRef);
   const pageNotificationsElementDimensions = useObserverElementDimensions(ref === null || ref === void 0 || (_current2 = ref.current) === null || _current2 === void 0 ? void 0 : _current2.notificationsPageRef);
@@ -1963,7 +2024,7 @@ const PortalsContainer = /*#__PURE__*/react$1.forwardRef((props, ref) => {
     children: [jsxRuntime.jsx(react.Global
     // Apply some global styles, based on the `.ReactModal__Body--open` class.
     , {
-      styles: [/*#__PURE__*/react.css(".ReactModal__Body--open ", containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                  100% - ", offsetTop, " -\n                    ", globalNotificationsElementDimensions.height, "px -\n                    ", pageNotificationsElementDimensions.height, "px\n                );width:calc(100% - ", offsetLeft, ");top:calc(\n                  ", offsetTop, " +\n                    ", globalNotificationsElementDimensions.height, "px +\n                    ", pageNotificationsElementDimensions.height, "px\n                );right:0;bottom:0;z-index:", zIndex, ";}.ReactModal__Body--open.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", offsetLeftOnExpandedMenu, ");}" + ("" ), "" ),
+      styles: [/*#__PURE__*/react.css(".ReactModal__Body--open ", containerSelectorToPreventScrollingOnOpen, "{overflow:hidden;}.ReactModal__Body--open #", constants.PORTALS_CONTAINER_ID, "{position:fixed;height:calc(\n                  100% - ", offsetTop, " -\n                    ", globalNotificationsElementDimensions.height, "px -\n                    ", pageNotificationsElementDimensions.height, "px\n                );width:calc(100% - ", offsetLeft, ");top:calc(\n                  ", offsetTop, " +\n                    ", globalNotificationsElementDimensions.height, "px +\n                    ", pageNotificationsElementDimensions.height, "px\n                );right:0;bottom:0;z-index:", zIndex, ";transition:", modalWidthTransition, ";}.ReactModal__Body--open.body__menu-open #", constants.PORTALS_CONTAINER_ID, "{width:calc(100% - ", offsetLeftOnExpandedMenu, ");transition:", modalWidthTransition, ";}" + ("" ), "" ),
       // Apply styles for stacking layers.
       ..._mapInstanceProperty__default["default"](stackingLayers).call(stackingLayers,
       /**