@tenancy.nz/ui 1.0.2 → 1.0.4

package/dist/cjs/components/Icons.cjs

@@ -3,6 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var styled = require('styled-components');
@@ -11,52 +12,48 @@ var Heading = require('./Heading.cjs');
 var Link = require('./Link.cjs');
 var Text = require('./Text.cjs');
 
-const Code = styled.code`
-  line-height: 1;
-  margin: 0 2px;
-  padding: 3px 5px;
-  white-space: nowrap;
-  border-radius: 3px;
-  font-size: 13px;
-  border: 1px solid #eeeeee;
-  color: rgba(51, 51, 51, 0.9);
-  background-color: #f8f8f8;
-`;
+var _templateObject;
+var Code = styled.code(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  line-height: 1;\n  margin: 0 2px;\n  padding: 3px 5px;\n  white-space: nowrap;\n  border-radius: 3px;\n  font-size: 13px;\n  border: 1px solid #eeeeee;\n  color: rgba(51, 51, 51, 0.9);\n  background-color: #f8f8f8;\n"])));
 function Icons() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { as: "h3", children: "Icons" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Text.default, { color: "inherit", children: [
-      "This design system uses ",
-      /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "@mui/icons-material" }),
-      ", which includes the 1,100+ official Material icons converted to ",
-      /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "SvgIcon" }),
-      " ",
-      "components."
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Text.default, { color: "inherit", children: [
-      "Visit",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Link.default,
-        {
-          href: "https://material-ui.com/components/material-icons/",
-          target: "_blank",
-          rel: "noreferrer",
-          children: "Material UI Documentation"
-        }
-      ),
-      " ",
-      "for full list and examples."
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { as: "h5", children: "Basic usage" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Text.default, { as: "div", children: /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "import AddCircleIcon from '@mui/icons-material/AddCircle';" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Text.default, { as: "div", paragraph: false, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AddCircleIcon, {}),
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx(Text.default, { as: "span", paragraph: false, children: "Add Circle Icon" })
-    ] }) })
-  ] });
+  return /* @__PURE__ */jsxRuntime.jsxs("div", {
+    children: [/* @__PURE__ */jsxRuntime.jsx(Heading.default, {
+      as: "h3",
+      children: "Icons"
+    }), /* @__PURE__ */jsxRuntime.jsxs(Text.default, {
+      color: "inherit",
+      children: ["This design system uses ", /* @__PURE__ */jsxRuntime.jsx(Code, {
+        children: "@mui/icons-material"
+      }), ", which includes the 1,100+ official Material icons converted to ", /* @__PURE__ */jsxRuntime.jsx(Code, {
+        children: "SvgIcon"
+      }), " ", "components."]
+    }), /* @__PURE__ */jsxRuntime.jsxs(Text.default, {
+      color: "inherit",
+      children: ["Visit", " ", /* @__PURE__ */jsxRuntime.jsx(Link.default, {
+        href: "https://material-ui.com/components/material-icons/",
+        target: "_blank",
+        rel: "noreferrer",
+        children: "Material UI Documentation"
+      }), " ", "for full list and examples."]
+    }), /* @__PURE__ */jsxRuntime.jsx("br", {}), /* @__PURE__ */jsxRuntime.jsx(Heading.default, {
+      as: "h5",
+      children: "Basic usage"
+    }), /* @__PURE__ */jsxRuntime.jsx(Text.default, {
+      as: "div",
+      children: /* @__PURE__ */jsxRuntime.jsx(Code, {
+        children: "import AddCircleIcon from '@mui/icons-material/AddCircle';"
+      })
+    }), /* @__PURE__ */jsxRuntime.jsx(Text.default, {
+      as: "div",
+      paragraph: false,
+      children: /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */jsxRuntime.jsx(AddCircleIcon, {}), " ", /* @__PURE__ */jsxRuntime.jsx(Text.default, {
+          as: "span",
+          paragraph: false,
+          children: "Add Circle Icon"
+        })]
+      })
+    })]
+  });
 }
 
 exports.default = Icons;

package/dist/cjs/components/LinearProgress.cjs

@@ -3,12 +3,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var LinearProgress$1 = require('@mui/material/LinearProgress');
 
-function LinearProgress({ ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(LinearProgress$1, { ...rest });
+function LinearProgress(_ref) {
+  var rest = _rollupPluginBabelHelpers.extends({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref), _ref));
+  return /* @__PURE__ */jsxRuntime.jsx(LinearProgress$1, _rollupPluginBabelHelpers.objectSpread2({}, rest));
 }
 
 exports.default = LinearProgress;

package/dist/cjs/components/Link.cjs

@@ -3,14 +3,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var PropTypes = require('prop-types');
 var Link_styled = require('./Link.styled.cjs');
 
-function Link({ children, color = "primary", underline = "none", ...others }) {
-  const rest = { color, underline, ...others };
-  return /* @__PURE__ */ jsxRuntime.jsx(Link_styled.StyledLink, { ...rest, children });
+var _excluded = ["children", "color", "underline"];
+function Link(_ref) {
+  var children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    _ref$underline = _ref.underline,
+    underline = _ref$underline === void 0 ? "none" : _ref$underline,
+    others = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var rest = _rollupPluginBabelHelpers.objectSpread2({
+    color: color,
+    underline: underline
+  }, others);
+  return /* @__PURE__ */jsxRuntime.jsx(Link_styled.StyledLink, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+    children: children
+  }));
 }
 Link.propTypes = {
   /**
@@ -20,14 +33,7 @@ Link.propTypes = {
   /**
    * The color of the link.
    */
-  color: PropTypes.oneOf([
-    "error",
-    "inherit",
-    "primary",
-    "secondary",
-    "textPrimary",
-    "textSecondary"
-  ]),
+  color: PropTypes.oneOf(["error", "inherit", "primary", "secondary", "textPrimary", "textSecondary"]),
   /**
    * When the link should have an underline.
    */

package/dist/cjs/components/Link.styled.cjs

@@ -1,10 +1,12 @@
 "use strict";
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var styled = require('styled-components');
 
-const colour = (color, theme) => {
-  const colors = {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var colour = function colour(color, theme) {
+  var colors = {
     error: theme.palette.error.main,
     inherit: "inherit",
     primary: theme.palette.primary.main,
@@ -17,23 +19,11 @@ const colour = (color, theme) => {
   }
   return colors.inherit;
 };
-const StyledLink = styled.a`
-  ${({ color, underline, theme }) => styled.css`
-    font-family: ${theme.typography.fontFamily};
-    font-weight: 500;
-    text-decoration: none;
-    ${underline === "hover" && styled.css`
-      &:hover {
-        text-decoration: underline;
-      }
-    `}
-    ${underline === "always" && styled.css`
-      text-decoration: underline;
-    `}
-    ${color && styled.css`
-      color: ${colour(color, theme)};
-    `}
-  `}
-`;
+var StyledLink = styled.a(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var color = _ref.color,
+    underline = _ref.underline,
+    theme = _ref.theme;
+  return styled.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-family: ", ";\n    font-weight: 500;\n    text-decoration: none;\n    ", "\n    ", "\n    ", "\n  "])), theme.typography.fontFamily, underline === "hover" && styled.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      &:hover {\n        text-decoration: underline;\n      }\n    "]))), underline === "always" && styled.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      text-decoration: underline;\n    "]))), color && styled.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      color: ", ";\n    "])), colour(color, theme)));
+});
 
 exports.StyledLink = StyledLink;

package/dist/cjs/components/Media.cjs

@@ -8,19 +8,22 @@ require('react');
 var PropTypes = require('prop-types');
 var Media_styled = require('./Media.styled.cjs');
 
-function Media({ as = "div", skeleton = false, src, title = "" }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Media_styled.StyledMediaEl, { children: [
-    skeleton && /* @__PURE__ */ jsxRuntime.jsx(Media_styled.StyledMediaSkeleton, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Media_styled.StyledMedia,
-      {
-        as,
-        src: !skeleton ? src : "",
-        title,
-        alt: as === "img" ? title : ""
-      }
-    )
-  ] });
+function Media(_ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? "div" : _ref$as,
+    _ref$skeleton = _ref.skeleton,
+    skeleton = _ref$skeleton === void 0 ? false : _ref$skeleton,
+    src = _ref.src,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title;
+  return /* @__PURE__ */jsxRuntime.jsxs(Media_styled.StyledMediaEl, {
+    children: [skeleton && /* @__PURE__ */jsxRuntime.jsx(Media_styled.StyledMediaSkeleton, {}), /* @__PURE__ */jsxRuntime.jsx(Media_styled.StyledMedia, {
+      as: as,
+      src: !skeleton ? src : "",
+      title: title,
+      alt: as === "img" ? title : ""
+    })]
+  });
 }
 Media.propTypes = {
   /**

package/dist/cjs/components/Media.styled.cjs

@@ -1,45 +1,21 @@
 "use strict";
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var styled = require('styled-components');
 var animations = require('../utils/animations.cjs');
 
-const StyledMediaEl = styled.div`
-  ${({ theme }) => styled.css`
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background: ${theme.palette.grey[200]};
-  `}
-`;
-const StyledMediaSkeleton = styled.div`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-
-  z-index: 1;
-  ${animations.inlineGlow}
-`;
-const StyledMedia = styled.div`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  ${({ as, src }) => styled.css`
-    ${as !== "img" && styled.css`
-      display: block;
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-      background-image: url(${src});
-    `}
-
-    ${as === "img" && styled.css`
-      object-fit: cover;
-    `}
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var StyledMediaEl = styled.div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return styled.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background: ", ";\n  "])), theme.palette.grey[200]);
+});
+var StyledMediaSkeleton = styled.div(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n\n  z-index: 1;\n  ", "\n"])), animations.inlineGlow);
+var StyledMedia = styled.div(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  ", "\n"])), function (_ref2) {
+  var as = _ref2.as,
+    src = _ref2.src;
+  return styled.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    ", "\n\n    ", "\n  "])), as !== "img" && styled.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      display: block;\n      background-size: cover;\n      background-repeat: no-repeat;\n      background-position: center;\n      background-image: url(", ");\n    "])), src), as === "img" && styled.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      object-fit: cover;\n    "]))));
+});
 
 exports.StyledMedia = StyledMedia;
 exports.StyledMediaEl = StyledMediaEl;

package/dist/cjs/components/Modal.cjs

@@ -3,6 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var BaseModal = require('./BaseModal.cjs');
 var Heading = require('./Heading.cjs');
@@ -13,16 +14,22 @@ var ModalHeader = require('./ModalHeader.cjs');
 var Skeleton = require('./Skeleton.cjs');
 var boolean = require('../utils/helpers/boolean.cjs');
 
-function Modal({
-  actions = void 0,
-  content = void 0,
-  children = void 0,
-  heading = void 0,
-  loading = false,
-  onClose = void 0,
-  ...rest
-}) {
-  const handleClose = (e, action) => {
+var _excluded = ["actions", "content", "children", "heading", "loading", "onClose"];
+function Modal(_ref) {
+  var _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? void 0 : _ref$actions,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? void 0 : _ref$content,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? void 0 : _ref$children,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? void 0 : _ref$heading,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? void 0 : _ref$onClose,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var handleClose = function handleClose(e, action) {
     if (action === "backdropClick") {
       return;
     }
@@ -30,27 +37,46 @@ function Modal({
       onClose(e);
     }
   };
-  const header = boolean.isString(heading) ? /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { as: "h3", gutterBottom: false, children: heading }) : heading;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    BaseModal.default,
-    {
-      ...rest,
+  var header = boolean.isString(heading) ? /* @__PURE__ */jsxRuntime.jsx(Heading.default, {
+    as: "h3",
+    gutterBottom: false,
+    children: heading
+  }) : heading;
+  return /* @__PURE__ */jsxRuntime.jsxs(BaseModal.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+    onClose: handleClose,
+    slotProps: {
+      paper: {
+        sx: {
+          padding: {
+            xs: "16px",
+            md: "32px"
+          }
+        }
+      }
+    },
+    children: [heading && /* @__PURE__ */jsxRuntime.jsxs(ModalHeader.default, {
       onClose: handleClose,
-      slotProps: { paper: { sx: { padding: { xs: "16px", md: "32px" } } } },
-      children: [
-        heading && /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader.default, { onClose: handleClose, children: [
-          loading && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.default, { variant: "text", height: 20, width: 250 }),
-          !loading && header
-        ] }),
-        !loading && /* @__PURE__ */ jsxRuntime.jsxs(ModalContent.default, { disableGutter: true, children: [
-          children,
-          content
-        ] }),
-        actions && /* @__PURE__ */ jsxRuntime.jsx(ModalActions.default, { sx: { marginTop: { xs: "20px", md: "40px" } }, children: actions }),
-        loading && /* @__PURE__ */ jsxRuntime.jsx(ModalContent.default, { disableGutter: true, children: /* @__PURE__ */ jsxRuntime.jsx(LinearProgress.default, {}) })
-      ]
-    }
-  );
+      children: [loading && /* @__PURE__ */jsxRuntime.jsx(Skeleton.default, {
+        variant: "text",
+        height: 20,
+        width: 250
+      }), !loading && header]
+    }), !loading && /* @__PURE__ */jsxRuntime.jsxs(ModalContent.default, {
+      disableGutter: true,
+      children: [children, content]
+    }), actions && /* @__PURE__ */jsxRuntime.jsx(ModalActions.default, {
+      sx: {
+        marginTop: {
+          xs: "20px",
+          md: "40px"
+        }
+      },
+      children: actions
+    }), loading && /* @__PURE__ */jsxRuntime.jsx(ModalContent.default, {
+      disableGutter: true,
+      children: /* @__PURE__ */jsxRuntime.jsx(LinearProgress.default, {})
+    })]
+  }));
 }
 
 exports.default = Modal;

package/dist/cjs/components/ModalActions.cjs

@@ -3,21 +3,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var DialogActions = require('@mui/material/DialogActions');
 
-function ModalActions({
-  align = "flex-end",
-  children,
-  gutter = true,
-  sx = {}
-}) {
-  const styles = {
-    justifyContent: align,
-    ...gutter && { gap: "8px" },
-    ...sx
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogActions, { disableSpacing: !gutter, sx: styles, children });
+function ModalActions(_ref) {
+  var _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "flex-end" : _ref$align,
+    children = _ref.children,
+    _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? true : _ref$gutter,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx;
+  var styles = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    justifyContent: align
+  }, gutter && {
+    gap: "8px"
+  }), sx);
+  return /* @__PURE__ */jsxRuntime.jsx(DialogActions, {
+    disableSpacing: !gutter,
+    sx: styles,
+    children: children
+  });
 }
 
 exports.default = ModalActions;

package/dist/cjs/components/ModalContent.cjs

@@ -3,20 +3,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var PropTypes = require('prop-types');
 var DialogContent = require('@mui/material/DialogContent');
 
-function ModalContent({
-  children,
-  disableGutter = false,
-  sx = {}
-}) {
-  const styles = {
-    ...disableGutter && { padding: 0 },
-    ...sx
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { dividers: false, sx: styles, children });
+function ModalContent(_ref) {
+  var children = _ref.children,
+    _ref$disableGutter = _ref.disableGutter,
+    disableGutter = _ref$disableGutter === void 0 ? false : _ref$disableGutter,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx;
+  var styles = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, disableGutter && {
+    padding: 0
+  }), sx);
+  return /* @__PURE__ */jsxRuntime.jsx(DialogContent, {
+    dividers: false,
+    sx: styles,
+    children: children
+  });
 }
 ModalContent.propTypes = {
   /**

package/dist/cjs/components/ModalHeader.cjs

@@ -3,22 +3,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var iconsMaterial = require('@mui/icons-material');
 var Box = require('./Box.cjs');
 var IconButton = require('./IconButton.cjs');
 var ModalHeader_styled = require('./ModalHeader.styled.cjs');
 
-function ModalHeader({
-  children,
-  closeIcon = void 0,
-  onClose = void 0,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader_styled.default, { ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Box.default, { overflow: "hidden", width: "100%", marginRight: "8px", marginLeft: "0px", children }),
-    onClose && /* @__PURE__ */ jsxRuntime.jsx(Box.default, { children: /* @__PURE__ */ jsxRuntime.jsx(IconButton.default, { color: "inherit", size: "small", onClick: onClose, children: !closeIcon ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Close, {}) : closeIcon }) })
-  ] });
+var _excluded = ["children", "closeIcon", "onClose"];
+function ModalHeader(_ref) {
+  var children = _ref.children,
+    _ref$closeIcon = _ref.closeIcon,
+    closeIcon = _ref$closeIcon === void 0 ? void 0 : _ref$closeIcon,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? void 0 : _ref$onClose,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /* @__PURE__ */jsxRuntime.jsxs(ModalHeader_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+    children: [/* @__PURE__ */jsxRuntime.jsx(Box.default, {
+      overflow: "hidden",
+      width: "100%",
+      marginRight: "8px",
+      marginLeft: "0px",
+      children: children
+    }), onClose && /* @__PURE__ */jsxRuntime.jsx(Box.default, {
+      children: /* @__PURE__ */jsxRuntime.jsx(IconButton.default, {
+        color: "inherit",
+        size: "small",
+        onClick: onClose,
+        children: !closeIcon ? /* @__PURE__ */jsxRuntime.jsx(iconsMaterial.Close, {}) : closeIcon
+      })
+    })]
+  }));
 }
 
 exports.default = ModalHeader;

package/dist/cjs/components/ModalHeader.styled.cjs

@@ -3,27 +3,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var react = require('@emotion/react');
 var styles = require('@mui/material/styles');
 var object = require('../utils/helpers/object.cjs');
 
-const StyledModalHeader = styles.styled(
-  "div"
-)`
-  ${({ disableGap, theme, transparent }) => react.css`
-    display: flex;
-    align-items: center;
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 9;
-    background: ${transparent ? "transparent" : object.getObjectProp(theme, "vars.palette.background.paper")};
-    color: ${object.getObjectProp(theme, "vars.palette.text.secondary")};
-
-    ${!disableGap && react.css`
-      margin-bottom: 8px;
-    `};
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3;
+var StyledModalHeader = styles.styled("div")(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var disableGap = _ref.disableGap,
+    theme = _ref.theme,
+    transparent = _ref.transparent;
+  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: 9;\n    background: ", ";\n    color: ", ";\n\n    ", ";\n  "])), transparent ? "transparent" : object.getObjectProp(theme, "vars.palette.background.paper"), object.getObjectProp(theme, "vars.palette.text.secondary"), !disableGap && react.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      margin-bottom: 8px;\n    "]))));
+});
 
 exports.default = StyledModalHeader;