@dhis2-ui/modal 7.7.10 → 7.8.0

package/build/cjs/modal/modal.js

@@ -23,56 +23,47 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const scrollBoxCard = {
+const resolveLayerStyles = hide => ({
   styles: /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2814715826"
-  }, [`div.jsx-2814715826{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-height:calc(100vh - ${2 * _uiConstants.spacersNum.dp64}px);max-width:calc(100vw - ${2 * _uiConstants.spacersNum.dp64}px);}`]),
-  className: "jsx-2814715826"
-};
-const centeredContent = {
-  styles: /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1378205604"
-  }, [`.top.jsx-1378205604{padding-top:${_uiConstants.spacers.dp64};}`, `.bottom.jsx-1378205604{padding-bottom:${_uiConstants.spacers.dp64};}`]),
-  className: "jsx-1378205604"
-};
-const layerStyles = {
-  styles: /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "427720588"
-  }, ["div.jsx-427720588{display:none;}"]),
-  className: "jsx-427720588"
-};
+    id: "1884450060",
+    dynamic: [_uiConstants.spacers.dp64, hide ? 'none' : 'block']
+  }, [`div.__jsx-style-dynamic-selector{padding:${_uiConstants.spacers.dp64};display:${hide ? 'none' : 'block'};}`]),
+  className: _style.default.dynamic([["1884450060", [_uiConstants.spacers.dp64, hide ? 'none' : 'block']]])
+});
 
 const Modal = ({
   children,
   className,
   dataTest,
   hide,
+  fluid,
   large,
   onClose,
   position,
   small
 }) => {
+  const layerStyles = resolveLayerStyles(hide);
   return /*#__PURE__*/_react.default.createElement(_layer.Layer, {
     onClick: onClose,
-    className: hide ? layerStyles.className : '',
+    className: layerStyles.className,
     translucent: !hide
   }, /*#__PURE__*/_react.default.createElement(_center.Center, {
-    position: position,
-    className: centeredContent.className
+    position: position
   }, /*#__PURE__*/_react.default.createElement("aside", {
     role: "dialog",
     "aria-modal": "true",
     "data-test": dataTest,
-    className: _style.default.dynamic([["2700832039", [2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64]]]) + " " + ((0, _classnames.default)(className, {
+    className: _style.default.dynamic([["1701687214", [2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64]]]) + " " + ((0, _classnames.default)(className, {
       small,
-      large
+      large,
+      fluid
     }) || "")
-  }, /*#__PURE__*/_react.default.createElement(_card.Card, {
-    className: scrollBoxCard.className
-  }, children)), scrollBoxCard.styles, layerStyles.styles, centeredContent.styles), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2700832039",
-    dynamic: [2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64]
-  }, [`aside.__jsx-style-dynamic-selector{overflow-y:hidden;height:auto;max-height:calc(100vh - ${2 * _uiConstants.spacersNum.dp64}px);max-width:calc(100vw - ${2 * _uiConstants.spacersNum.dp64}px);width:600px;}`, "aside.small.__jsx-style-dynamic-selector{width:400px;}", "aside.large.__jsx-style-dynamic-selector{width:800px;}"]));
+  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["1701687214", [2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64]]])
+  }, children))), layerStyles.styles), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1701687214",
+    dynamic: [2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64]
+  }, [`div.__jsx-style-dynamic-selector{padding:24px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;max-width:calc(100vw - ${2 * _uiConstants.spacersNum.dp64}px);max-height:calc(100vh - ${2 * _uiConstants.spacersNum.dp64}px);}`, `aside.__jsx-style-dynamic-selector{height:auto;width:600px;max-width:calc(100vw - ${2 * _uiConstants.spacersNum.dp64}px);max-height:calc(100vh - ${2 * _uiConstants.spacersNum.dp64}px);}`, "aside.small.__jsx-style-dynamic-selector{width:400px;}", "aside.large.__jsx-style-dynamic-selector{width:800px;}", "aside.fluid.__jsx-style-dynamic-selector{width:auto;}"]));
 };
 
 exports.Modal = Modal;
@@ -84,6 +75,7 @@ Modal.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
+  fluid: _propTypes.default.bool,
   hide: _propTypes.default.bool,
   large: _uiConstants.sharedPropTypes.sizePropType,
   position: _uiConstants.sharedPropTypes.insideAlignmentPropType,

package/build/cjs/modal/modal.stories.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ModalThatHidesWithStatefulComponens = exports.LargeModalWithMoreNestedModals = exports.LargeWithSelectComponent = exports.SmallLongTitle = exports.BottomScrollable = exports.MiddleScrollable = exports.TopScrollable = exports.SmallClickableScreenCover = exports.SmallDestructivePrimary = exports.SmallContentPrimary = exports.LargeTitleContentPrimary = exports.MediumTitleContentAction = exports.SmallTitleContentAction = exports.AlignmentBottom = exports.AlignmentMiddle = exports.DefaultContent = exports.default = void 0;
+exports.FluidBottom = exports.FluidMiddle = exports.FluidTop = exports.ModalThatHidesWithStatefulComponens = exports.LargeModalWithMoreNestedModals = exports.LargeWithSelectComponent = exports.SmallLongTitle = exports.BottomScrollable = exports.MiddleScrollable = exports.TopScrollable = exports.SmallClickableScreenCover = exports.SmallDestructivePrimary = exports.SmallContentPrimary = exports.FluidTitleContentPrimary = exports.LargeTitleContentPrimary = exports.MediumTitleContentAction = exports.SmallTitleContentAction = exports.AlignmentBottom = exports.AlignmentMiddle = exports.DefaultContent = exports.default = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
+var _box = require("@dhis2-ui/box");
+
 var _button = require("@dhis2-ui/button");
 
 var _menu = require("@dhis2-ui/menu");
@@ -121,9 +123,9 @@ const AlignmentBottom = args => /*#__PURE__*/_react.default.createElement(_modal
 exports.AlignmentBottom = AlignmentBottom;
 AlignmentBottom.args = {
   onClose,
-  alignment: 'bottom'
+  position: 'bottom'
 };
-AlignmentBottom.storyName = 'Alignment: Bottom';
+AlignmentBottom.storyName = 'Position: Bottom';
 
 const SmallTitleContentAction = args => /*#__PURE__*/_react.default.createElement(_modal.Modal, args, /*#__PURE__*/_react.default.createElement(_index.ModalTitle, null, "This is a small modal with title, content and primary action"), /*#__PURE__*/_react.default.createElement(_index.ModalContent, null, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."), /*#__PURE__*/_react.default.createElement(_index.ModalActions, null, /*#__PURE__*/_react.default.createElement(_button.ButtonStrip, {
   end: true
@@ -180,6 +182,38 @@ LargeTitleContentPrimary.args = {
 };
 LargeTitleContentPrimary.storyName = 'Large: Title, Content, Primary';
 
+const FluidTitleContentPrimary = args => /*#__PURE__*/_react.default.createElement(_modal.Modal, args, /*#__PURE__*/_react.default.createElement(_index.ModalTitle, null, "This is a modal using custom dimensions, with title, content and primary action"), /*#__PURE__*/_react.default.createElement(_index.ModalContent, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexFlow: 'row wrap'
+  }
+}, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: '600px',
+    backgroundColor: '#fea'
+  }
+}, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: '300px',
+    backgroundColor: '#eaf'
+  }
+}, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."))), /*#__PURE__*/_react.default.createElement(_index.ModalActions, null, /*#__PURE__*/_react.default.createElement(_button.ButtonStrip, {
+  end: true
+}, /*#__PURE__*/_react.default.createElement(_button.Button, {
+  onClick: say('Button secondary'),
+  secondary: true
+}, "Secondary action"), /*#__PURE__*/_react.default.createElement(_button.Button, {
+  onClick: say('Button primary'),
+  primary: true
+}, "Primary action"))));
+
+exports.FluidTitleContentPrimary = FluidTitleContentPrimary;
+FluidTitleContentPrimary.args = {
+  fluid: true,
+  position: 'top'
+};
+FluidTitleContentPrimary.storyName = 'Fluid (Custom sizes): Title, Content, Primary';
+
 const SmallContentPrimary = args => /*#__PURE__*/_react.default.createElement(_modal.Modal, args, /*#__PURE__*/_react.default.createElement(_index.ModalContent, null, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."), /*#__PURE__*/_react.default.createElement(_index.ModalActions, null, /*#__PURE__*/_react.default.createElement(_button.ButtonStrip, {
   end: true
 }, /*#__PURE__*/_react.default.createElement(_button.Button, {
@@ -589,4 +623,64 @@ const ModalThatHidesWithStatefulComponens = () => {
   }, "Hide modal")))));
 };
 
-exports.ModalThatHidesWithStatefulComponens = ModalThatHidesWithStatefulComponens;
+exports.ModalThatHidesWithStatefulComponens = ModalThatHidesWithStatefulComponens;
+
+const FluidTop = args => /*#__PURE__*/_react.default.createElement(_modal.Modal, args, /*#__PURE__*/_react.default.createElement(_index.ModalTitle, null, "This is a modal using custom dimensions, with title, content and primary action"), /*#__PURE__*/_react.default.createElement(_index.ModalContent, null, /*#__PURE__*/_react.default.createElement(_box.Box, {
+  width: "666px",
+  height: "666px"
+}, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.")), /*#__PURE__*/_react.default.createElement(_index.ModalActions, null, /*#__PURE__*/_react.default.createElement(_button.ButtonStrip, {
+  end: true
+}, /*#__PURE__*/_react.default.createElement(_button.Button, {
+  onClick: say('Button secondary'),
+  secondary: true
+}, "Secondary action"), /*#__PURE__*/_react.default.createElement(_button.Button, {
+  onClick: say('Button primary'),
+  primary: true
+}, "Primary action"))));
+
+exports.FluidTop = FluidTop;
+FluidTop.args = {
+  fluid: true,
+  position: 'top'
+};
+FluidTop.storyName = 'Fluid (Top)';
+
+const FluidMiddle = args => /*#__PURE__*/_react.default.createElement(_modal.Modal, args, /*#__PURE__*/_react.default.createElement(_index.ModalTitle, null, "This is a modal using custom dimensions, with title, content and primary action"), /*#__PURE__*/_react.default.createElement(_index.ModalContent, null, /*#__PURE__*/_react.default.createElement(_box.Box, {
+  width: "666px",
+  height: "666px"
+}, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.")), /*#__PURE__*/_react.default.createElement(_index.ModalActions, null, /*#__PURE__*/_react.default.createElement(_button.ButtonStrip, {
+  end: true
+}, /*#__PURE__*/_react.default.createElement(_button.Button, {
+  onClick: say('Button secondary'),
+  secondary: true
+}, "Secondary action"), /*#__PURE__*/_react.default.createElement(_button.Button, {
+  onClick: say('Button primary'),
+  primary: true
+}, "Primary action"))));
+
+exports.FluidMiddle = FluidMiddle;
+FluidMiddle.args = {
+  fluid: true,
+  position: 'middle'
+};
+FluidMiddle.storyName = 'Fluid (Middle)';
+
+const FluidBottom = args => /*#__PURE__*/_react.default.createElement(_modal.Modal, args, /*#__PURE__*/_react.default.createElement(_index.ModalTitle, null, "This is a modal using custom dimensions, with title, content and primary action"), /*#__PURE__*/_react.default.createElement(_index.ModalContent, null, /*#__PURE__*/_react.default.createElement(_box.Box, {
+  width: "666px",
+  height: "666px"
+}, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.")), /*#__PURE__*/_react.default.createElement(_index.ModalActions, null, /*#__PURE__*/_react.default.createElement(_button.ButtonStrip, {
+  end: true
+}, /*#__PURE__*/_react.default.createElement(_button.Button, {
+  onClick: say('Button secondary'),
+  secondary: true
+}, "Secondary action"), /*#__PURE__*/_react.default.createElement(_button.Button, {
+  onClick: say('Button primary'),
+  primary: true
+}, "Primary action"))));
+
+exports.FluidBottom = FluidBottom;
+FluidBottom.args = {
+  fluid: true,
+  position: 'bottom'
+};
+FluidBottom.storyName = 'Fluid (Bottom)';

package/build/cjs/modal/modal.test.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _modal = require("./modal.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Modal', () => {
+  describe('Regular dimensions', () => {
+    it('has the correct dimension styles in its default state', () => {
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, null));
+
+      const modalEl = _react.screen.getByRole('dialog');
+
+      const style = window.getComputedStyle(modalEl);
+      expect(style.height).toBe('auto');
+      expect(style.maxHeight).toBe('calc(100vh - 128px)');
+      expect(style.maxWidth).toBe('calc(100vw - 128px)');
+      expect(style.width).toBe('600px');
+    });
+    it('has the correct dimension styles when the "small" prop is provided', () => {
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+        small: true
+      }));
+
+      const modalEl = _react.screen.getByRole('dialog');
+
+      console.log('modalEl.outerWidth', modalEl.offsetWidth);
+      const style = window.getComputedStyle(modalEl);
+      expect(style.height).toBe('auto');
+      expect(style.maxHeight).toBe('calc(100vh - 128px)');
+      expect(style.maxWidth).toBe('calc(100vw - 128px)');
+      expect(style.width).toBe('400px');
+    });
+    it('has the correct dimension styles when the "large" prop is provided', () => {
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+        large: true
+      }));
+
+      const modalEl = _react.screen.getByRole('dialog');
+
+      const style = window.getComputedStyle(modalEl);
+      expect(style.height).toBe('auto');
+      expect(style.maxHeight).toBe('calc(100vh - 128px)');
+      expect(style.maxWidth).toBe('calc(100vw - 128px)');
+      expect(style.width).toBe('800px');
+    });
+    it('has the correct dimension styles when the "fluid" prop is provided', () => {
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+        fluid: true
+      }));
+
+      const modalEl = _react.screen.getByRole('dialog');
+
+      const style = window.getComputedStyle(modalEl);
+      expect(style.height).toBe('auto');
+      expect(style.maxHeight).toBe('calc(100vh - 128px)');
+      expect(style.maxWidth).toBe('calc(100vw - 128px)');
+      expect(style.width).toBe('auto');
+    });
+  });
+});

package/build/cjs/modal-actions/modal-actions.js

@@ -7,8 +7,6 @@ exports.ModalActions = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
-var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -20,11 +18,10 @@ const ModalActions = ({
   dataTest
 }) => /*#__PURE__*/_react.default.createElement("div", {
   "data-test": dataTest,
-  className: _style.default.dynamic([["1459377348", [_uiConstants.spacers.dp24, _uiConstants.spacers.dp24, _uiConstants.spacers.dp24]]])
+  className: "jsx-1854645064"
 }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "1459377348",
-  dynamic: [_uiConstants.spacers.dp24, _uiConstants.spacers.dp24, _uiConstants.spacers.dp24]
-}, [`div.__jsx-style-dynamic-selector{padding:0 ${_uiConstants.spacers.dp24} ${_uiConstants.spacers.dp24} ${_uiConstants.spacers.dp24};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}`]));
+  id: "1854645064"
+}, ["div.jsx-1854645064{-webkit-order:3;-ms-flex-order:3;order:3;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;}"]));
 
 exports.ModalActions = ModalActions;
 ModalActions.defaultProps = {

package/build/cjs/modal-content/modal-content.js

@@ -21,11 +21,11 @@ const ModalContent = ({
   dataTest
 }) => /*#__PURE__*/_react.default.createElement("div", {
   "data-test": dataTest,
-  className: _style.default.dynamic([["936713121", [_uiConstants.spacers.dp24, _uiConstants.spacers.dp24]]]) + " " + (className || "")
+  className: _style.default.dynamic([["2007936047", [_uiConstants.spacers.dp24]]]) + " " + (className || "")
 }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "936713121",
-  dynamic: [_uiConstants.spacers.dp24, _uiConstants.spacers.dp24]
-}, [`div.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin:${_uiConstants.spacers.dp24} 0;padding:0 ${_uiConstants.spacers.dp24};overflow-y:auto;}`]));
+  id: "2007936047",
+  dynamic: [_uiConstants.spacers.dp24]
+}, [`div.__jsx-style-dynamic-selector{-webkit-order:2;-ms-flex-order:2;order:2;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;margin:${_uiConstants.spacers.dp24} 0;overflow-y:auto;}`]));
 
 exports.ModalContent = ModalContent;
 ModalContent.defaultProps = {

package/build/cjs/modal-title/modal-title.js

@@ -22,11 +22,11 @@ const ModalTitle = ({
   dataTest
 }) => /*#__PURE__*/_react.default.createElement("h1", {
   "data-test": dataTest,
-  className: _style.default.dynamic([["3436098789", [_uiConstants.colors.grey900, _uiConstants.spacers.dp24, _uiConstants.spacers.dp24, _uiConstants.spacers.dp24]]]) + " " + ((0, _classnames.default)('title') || "")
+  className: _style.default.dynamic([["1318387758", [_uiConstants.colors.grey900]]]) + " " + ((0, _classnames.default)('title') || "")
 }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "3436098789",
-  dynamic: [_uiConstants.colors.grey900, _uiConstants.spacers.dp24, _uiConstants.spacers.dp24, _uiConstants.spacers.dp24]
-}, [`h1.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey900};font-size:20px;font-weight:500;line-height:24px;margin:0;padding:${_uiConstants.spacers.dp24} ${_uiConstants.spacers.dp24} 0 ${_uiConstants.spacers.dp24};}`]));
+  id: "1318387758",
+  dynamic: [_uiConstants.colors.grey900]
+}, [`h1.__jsx-style-dynamic-selector{-webkit-order:1;-ms-flex-order:1;order:1;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;color:${_uiConstants.colors.grey900};font-size:20px;font-weight:500;line-height:24px;margin:0;}`]));
 
 exports.ModalTitle = ModalTitle;
 ModalTitle.defaultProps = {

package/build/es/modal/modal.js

@@ -6,55 +6,48 @@ import { spacers, spacersNum, sharedPropTypes } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-const scrollBoxCard = {
-  styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2814715826"
-  }, [`div.jsx-2814715826{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-height:calc(100vh - ${2 * spacersNum.dp64}px);max-width:calc(100vw - ${2 * spacersNum.dp64}px);}`]),
-  className: "jsx-2814715826"
-};
-const centeredContent = {
-  styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1378205604"
-  }, [`.top.jsx-1378205604{padding-top:${spacers.dp64};}`, `.bottom.jsx-1378205604{padding-bottom:${spacers.dp64};}`]),
-  className: "jsx-1378205604"
-};
-const layerStyles = {
+
+const resolveLayerStyles = hide => ({
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "427720588"
-  }, ["div.jsx-427720588{display:none;}"]),
-  className: "jsx-427720588"
-};
+    id: "1884450060",
+    dynamic: [spacers.dp64, hide ? 'none' : 'block']
+  }, [`div.__jsx-style-dynamic-selector{padding:${spacers.dp64};display:${hide ? 'none' : 'block'};}`]),
+  className: _JSXStyle.dynamic([["1884450060", [spacers.dp64, hide ? 'none' : 'block']]])
+});
+
 export const Modal = ({
   children,
   className,
   dataTest,
   hide,
+  fluid,
   large,
   onClose,
   position,
   small
 }) => {
+  const layerStyles = resolveLayerStyles(hide);
   return /*#__PURE__*/React.createElement(Layer, {
     onClick: onClose,
-    className: hide ? layerStyles.className : '',
+    className: layerStyles.className,
     translucent: !hide
   }, /*#__PURE__*/React.createElement(Center, {
-    position: position,
-    className: centeredContent.className
+    position: position
   }, /*#__PURE__*/React.createElement("aside", {
     role: "dialog",
     "aria-modal": "true",
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["2700832039", [2 * spacersNum.dp64, 2 * spacersNum.dp64]]]) + " " + (cx(className, {
+    className: _JSXStyle.dynamic([["1701687214", [2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64]]]) + " " + (cx(className, {
       small,
-      large
+      large,
+      fluid
     }) || "")
-  }, /*#__PURE__*/React.createElement(Card, {
-    className: scrollBoxCard.className
-  }, children)), scrollBoxCard.styles, layerStyles.styles, centeredContent.styles), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2700832039",
-    dynamic: [2 * spacersNum.dp64, 2 * spacersNum.dp64]
-  }, [`aside.__jsx-style-dynamic-selector{overflow-y:hidden;height:auto;max-height:calc(100vh - ${2 * spacersNum.dp64}px);max-width:calc(100vw - ${2 * spacersNum.dp64}px);width:600px;}`, "aside.small.__jsx-style-dynamic-selector{width:400px;}", "aside.large.__jsx-style-dynamic-selector{width:800px;}"]));
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1701687214", [2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64]]])
+  }, children))), layerStyles.styles), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1701687214",
+    dynamic: [2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64]
+  }, [`div.__jsx-style-dynamic-selector{padding:24px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;max-width:calc(100vw - ${2 * spacersNum.dp64}px);max-height:calc(100vh - ${2 * spacersNum.dp64}px);}`, `aside.__jsx-style-dynamic-selector{height:auto;width:600px;max-width:calc(100vw - ${2 * spacersNum.dp64}px);max-height:calc(100vh - ${2 * spacersNum.dp64}px);}`, "aside.small.__jsx-style-dynamic-selector{width:400px;}", "aside.large.__jsx-style-dynamic-selector{width:800px;}", "aside.fluid.__jsx-style-dynamic-selector{width:auto;}"]));
 };
 Modal.defaultProps = {
   dataTest: 'dhis2-uicore-modal',
@@ -64,6 +57,7 @@ Modal.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
+  fluid: PropTypes.bool,
   hide: PropTypes.bool,
   large: sharedPropTypes.sizePropType,
   position: sharedPropTypes.insideAlignmentPropType,

package/build/es/modal/modal.stories.js

@@ -1,4 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
+import { Box } from '@dhis2-ui/box';
 import { Button, ButtonStrip } from '@dhis2-ui/button';
 import { FlyoutMenu, MenuDivider, MenuItem, MenuSectionHeader } from '@dhis2-ui/menu';
 import { SingleSelect, SingleSelectOption } from '@dhis2-ui/select';
@@ -89,9 +90,9 @@ AlignmentMiddle.storyName = 'Alignment: Middle';
 export const AlignmentBottom = args => /*#__PURE__*/React.createElement(Modal, args, /*#__PURE__*/React.createElement(ModalContent, null, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."));
 AlignmentBottom.args = {
   onClose,
-  alignment: 'bottom'
+  position: 'bottom'
 };
-AlignmentBottom.storyName = 'Alignment: Bottom';
+AlignmentBottom.storyName = 'Position: Bottom';
 export const SmallTitleContentAction = args => /*#__PURE__*/React.createElement(Modal, args, /*#__PURE__*/React.createElement(ModalTitle, null, "This is a small modal with title, content and primary action"), /*#__PURE__*/React.createElement(ModalContent, null, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, {
   end: true
 }, /*#__PURE__*/React.createElement(Button, {
@@ -138,6 +139,35 @@ LargeTitleContentPrimary.args = {
   large: true
 };
 LargeTitleContentPrimary.storyName = 'Large: Title, Content, Primary';
+export const FluidTitleContentPrimary = args => /*#__PURE__*/React.createElement(Modal, args, /*#__PURE__*/React.createElement(ModalTitle, null, "This is a modal using custom dimensions, with title, content and primary action"), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: 'flex',
+    flexFlow: 'row wrap'
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    width: '600px',
+    backgroundColor: '#fea'
+  }
+}, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."), /*#__PURE__*/React.createElement("div", {
+  style: {
+    width: '300px',
+    backgroundColor: '#eaf'
+  }
+}, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."))), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, {
+  end: true
+}, /*#__PURE__*/React.createElement(Button, {
+  onClick: say('Button secondary'),
+  secondary: true
+}, "Secondary action"), /*#__PURE__*/React.createElement(Button, {
+  onClick: say('Button primary'),
+  primary: true
+}, "Primary action"))));
+FluidTitleContentPrimary.args = {
+  fluid: true,
+  position: 'top'
+};
+FluidTitleContentPrimary.storyName = 'Fluid (Custom sizes): Title, Content, Primary';
 export const SmallContentPrimary = args => /*#__PURE__*/React.createElement(Modal, args, /*#__PURE__*/React.createElement(ModalContent, null, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, {
   end: true
 }, /*#__PURE__*/React.createElement(Button, {
@@ -519,4 +549,55 @@ export const ModalThatHidesWithStatefulComponens = () => {
     onClick: () => setHide(true),
     primary: true
   }, "Hide modal")))));
-};
+};
+export const FluidTop = args => /*#__PURE__*/React.createElement(Modal, args, /*#__PURE__*/React.createElement(ModalTitle, null, "This is a modal using custom dimensions, with title, content and primary action"), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(Box, {
+  width: "666px",
+  height: "666px"
+}, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.")), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, {
+  end: true
+}, /*#__PURE__*/React.createElement(Button, {
+  onClick: say('Button secondary'),
+  secondary: true
+}, "Secondary action"), /*#__PURE__*/React.createElement(Button, {
+  onClick: say('Button primary'),
+  primary: true
+}, "Primary action"))));
+FluidTop.args = {
+  fluid: true,
+  position: 'top'
+};
+FluidTop.storyName = 'Fluid (Top)';
+export const FluidMiddle = args => /*#__PURE__*/React.createElement(Modal, args, /*#__PURE__*/React.createElement(ModalTitle, null, "This is a modal using custom dimensions, with title, content and primary action"), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(Box, {
+  width: "666px",
+  height: "666px"
+}, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.")), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, {
+  end: true
+}, /*#__PURE__*/React.createElement(Button, {
+  onClick: say('Button secondary'),
+  secondary: true
+}, "Secondary action"), /*#__PURE__*/React.createElement(Button, {
+  onClick: say('Button primary'),
+  primary: true
+}, "Primary action"))));
+FluidMiddle.args = {
+  fluid: true,
+  position: 'middle'
+};
+FluidMiddle.storyName = 'Fluid (Middle)';
+export const FluidBottom = args => /*#__PURE__*/React.createElement(Modal, args, /*#__PURE__*/React.createElement(ModalTitle, null, "This is a modal using custom dimensions, with title, content and primary action"), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(Box, {
+  width: "666px",
+  height: "666px"
+}, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.")), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, {
+  end: true
+}, /*#__PURE__*/React.createElement(Button, {
+  onClick: say('Button secondary'),
+  secondary: true
+}, "Secondary action"), /*#__PURE__*/React.createElement(Button, {
+  onClick: say('Button primary'),
+  primary: true
+}, "Primary action"))));
+FluidBottom.args = {
+  fluid: true,
+  position: 'bottom'
+};
+FluidBottom.storyName = 'Fluid (Bottom)';

package/build/es/modal/modal.test.js

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Modal } from './modal.js';
+describe('Modal', () => {
+  describe('Regular dimensions', () => {
+    it('has the correct dimension styles in its default state', () => {
+      render( /*#__PURE__*/React.createElement(Modal, null));
+      const modalEl = screen.getByRole('dialog');
+      const style = window.getComputedStyle(modalEl);
+      expect(style.height).toBe('auto');
+      expect(style.maxHeight).toBe('calc(100vh - 128px)');
+      expect(style.maxWidth).toBe('calc(100vw - 128px)');
+      expect(style.width).toBe('600px');
+    });
+    it('has the correct dimension styles when the "small" prop is provided', () => {
+      render( /*#__PURE__*/React.createElement(Modal, {
+        small: true
+      }));
+      const modalEl = screen.getByRole('dialog');
+      console.log('modalEl.outerWidth', modalEl.offsetWidth);
+      const style = window.getComputedStyle(modalEl);
+      expect(style.height).toBe('auto');
+      expect(style.maxHeight).toBe('calc(100vh - 128px)');
+      expect(style.maxWidth).toBe('calc(100vw - 128px)');
+      expect(style.width).toBe('400px');
+    });
+    it('has the correct dimension styles when the "large" prop is provided', () => {
+      render( /*#__PURE__*/React.createElement(Modal, {
+        large: true
+      }));
+      const modalEl = screen.getByRole('dialog');
+      const style = window.getComputedStyle(modalEl);
+      expect(style.height).toBe('auto');
+      expect(style.maxHeight).toBe('calc(100vh - 128px)');
+      expect(style.maxWidth).toBe('calc(100vw - 128px)');
+      expect(style.width).toBe('800px');
+    });
+    it('has the correct dimension styles when the "fluid" prop is provided', () => {
+      render( /*#__PURE__*/React.createElement(Modal, {
+        fluid: true
+      }));
+      const modalEl = screen.getByRole('dialog');
+      const style = window.getComputedStyle(modalEl);
+      expect(style.height).toBe('auto');
+      expect(style.maxHeight).toBe('calc(100vh - 128px)');
+      expect(style.maxWidth).toBe('calc(100vw - 128px)');
+      expect(style.width).toBe('auto');
+    });
+  });
+});

package/build/es/modal-actions/modal-actions.js

@@ -1,5 +1,4 @@
 import _JSXStyle from "styled-jsx/style";
-import { spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 export const ModalActions = ({
@@ -7,11 +6,10 @@ export const ModalActions = ({
   dataTest
 }) => /*#__PURE__*/React.createElement("div", {
   "data-test": dataTest,
-  className: _JSXStyle.dynamic([["1459377348", [spacers.dp24, spacers.dp24, spacers.dp24]]])
+  className: "jsx-1854645064"
 }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "1459377348",
-  dynamic: [spacers.dp24, spacers.dp24, spacers.dp24]
-}, [`div.__jsx-style-dynamic-selector{padding:0 ${spacers.dp24} ${spacers.dp24} ${spacers.dp24};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}`]));
+  id: "1854645064"
+}, ["div.jsx-1854645064{-webkit-order:3;-ms-flex-order:3;order:3;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;}"]));
 ModalActions.defaultProps = {
   dataTest: 'dhis2-uicore-modalactions'
 };

package/build/es/modal-content/modal-content.js

@@ -8,11 +8,11 @@ export const ModalContent = ({
   dataTest
 }) => /*#__PURE__*/React.createElement("div", {
   "data-test": dataTest,
-  className: _JSXStyle.dynamic([["936713121", [spacers.dp24, spacers.dp24]]]) + " " + (className || "")
+  className: _JSXStyle.dynamic([["2007936047", [spacers.dp24]]]) + " " + (className || "")
 }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "936713121",
-  dynamic: [spacers.dp24, spacers.dp24]
-}, [`div.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin:${spacers.dp24} 0;padding:0 ${spacers.dp24};overflow-y:auto;}`]));
+  id: "2007936047",
+  dynamic: [spacers.dp24]
+}, [`div.__jsx-style-dynamic-selector{-webkit-order:2;-ms-flex-order:2;order:2;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;margin:${spacers.dp24} 0;overflow-y:auto;}`]));
 ModalContent.defaultProps = {
   dataTest: 'dhis2-uicore-modalcontent'
 };

package/build/es/modal-title/modal-title.js

@@ -1,5 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-import { colors, spacers } from '@dhis2/ui-constants';
+import { colors } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -8,11 +8,11 @@ export const ModalTitle = ({
   dataTest
 }) => /*#__PURE__*/React.createElement("h1", {
   "data-test": dataTest,
-  className: _JSXStyle.dynamic([["3436098789", [colors.grey900, spacers.dp24, spacers.dp24, spacers.dp24]]]) + " " + (cx('title') || "")
+  className: _JSXStyle.dynamic([["1318387758", [colors.grey900]]]) + " " + (cx('title') || "")
 }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "3436098789",
-  dynamic: [colors.grey900, spacers.dp24, spacers.dp24, spacers.dp24]
-}, [`h1.__jsx-style-dynamic-selector{color:${colors.grey900};font-size:20px;font-weight:500;line-height:24px;margin:0;padding:${spacers.dp24} ${spacers.dp24} 0 ${spacers.dp24};}`]));
+  id: "1318387758",
+  dynamic: [colors.grey900]
+}, [`h1.__jsx-style-dynamic-selector{-webkit-order:1;-ms-flex-order:1;order:1;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;color:${colors.grey900};font-size:20px;font-weight:500;line-height:24px;margin:0;}`]));
 ModalTitle.defaultProps = {
   dataTest: 'dhis2-uicore-modaltitle'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/modal",
-    "version": "7.7.10",
+    "version": "7.8.0",
     "description": "UI Modal",
     "repository": {
         "type": "git",
@@ -32,11 +32,11 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/card": "7.7.10",
-        "@dhis2-ui/center": "7.7.10",
-        "@dhis2-ui/layer": "7.7.10",
-        "@dhis2-ui/portal": "7.7.10",
-        "@dhis2/ui-constants": "7.7.10",
+        "@dhis2-ui/card": "7.8.0",
+        "@dhis2-ui/center": "7.8.0",
+        "@dhis2-ui/layer": "7.8.0",
+        "@dhis2-ui/portal": "7.8.0",
+        "@dhis2/ui-constants": "7.8.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },