@codacy/ui-components 0.66.25 → 0.66.27

package/lib/Message/Message.js

@@ -1,35 +1,26 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.statusToIconMap = exports.Message = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _Message = require("./Message.styles");
-var _Icons = require("../Icons");
-var _Typography = require("../Typography");
-var _Icon = require("../Icon");
-var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "id", "status"]; // /**
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+// /**
 //  * Description for Message
 //  */
-var statusToIconMap = exports.statusToIconMap = {
-  info: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.InfoIcon, {
+import React from 'react';
+import { MessageWrapper } from './Message.styles';
+import { InfoIcon, WarningIcon, ErrorIcon, SuccessIcon, RocketFilledIcon } from '../Icons';
+import { Paragraph } from '../Typography';
+import { Icon } from '../Icon';
+export const statusToIconMap = {
+  info: /*#__PURE__*/React.createElement(InfoIcon, {
     color: "alerts-info-icon"
   }),
-  warning: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.WarningIcon, {
+  warning: /*#__PURE__*/React.createElement(WarningIcon, {
     color: "alerts-warning-icon"
   }),
-  danger: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ErrorIcon, {
+  danger: /*#__PURE__*/React.createElement(ErrorIcon, {
     color: "alerts-danger-icon"
   }),
-  success: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.SuccessIcon, {
+  success: /*#__PURE__*/React.createElement(SuccessIcon, {
     color: "alerts-success-icon"
   }),
-  attention: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.RocketFilledIcon, {
+  attention: /*#__PURE__*/React.createElement(RocketFilledIcon, {
     color: "alerts-attention-icon"
   })
 };
@@ -37,25 +28,23 @@ var statusToIconMap = exports.statusToIconMap = {
 /**
  * Message Banner
  */
-var Message = exports.Message = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    id = _ref.id,
-    status = _ref.status,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Message.MessageWrapper, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+const Message = /*#__PURE__*/React.forwardRef(({
+  children,
+  id,
+  status,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(MessageWrapper, _extends({
     id: id,
     status: status
-  }, props), {}, {
-    ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
-      icon: function icon() {
-        return statusToIconMap[status];
-      },
-      size: "lg",
-      mr: 3
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Paragraph, {
-      color: "alerts-secondary-text",
-      children: children
-    })]
-  }));
-});
+  }, props, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(Icon, {
+    icon: () => statusToIconMap[status],
+    size: "lg",
+    mr: 3
+  }), /*#__PURE__*/React.createElement(Paragraph, {
+    color: "alerts-secondary-text"
+  }, children));
+});
+export { Message };

package/lib/Message/Message.styles.js

@@ -1,35 +1,22 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MessageWrapper = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _Flexbox = require("../Flexbox");
-var _Link = require("../Link/Link.styles");
-var MessageWrapper = exports.MessageWrapper = /*#__PURE__*/(0, _base["default"])(_Flexbox.Flex, process.env.NODE_ENV === "production" ? {
+import _styled from "@emotion/styled/base";
+import { Flex } from '../Flexbox';
+import { StyledLink } from '../Link/Link.styles';
+export const MessageWrapper = /*#__PURE__*/_styled(Flex, process.env.NODE_ENV === "production" ? {
   target: "ebhqpcy0"
 } : {
   target: "ebhqpcy0",
   label: "codacy"
-})("padding:", function (_ref) {
-  var theme = _ref.theme;
-  return theme.space[2];
-}, ";color:", function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.colors['alerts-secondary-text'];
-}, ";justify-content:center;align-items:center;background-color:", function (_ref3) {
-  var status = _ref3.status,
-    theme = _ref3.theme;
-  return theme.colors["alerts-".concat(status, "-background")];
-}, ";", _Link.StyledLink, "{color:", function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.colors['alerts-secondary-text'];
-}, ";font-weight:", function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.fontWeights['semi-bold'];
-}, ";text-decoration:underline;&:hover{color:", function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colors['alerts-primary-link'];
-}, ";}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9NZXNzYWdlL01lc3NhZ2Uuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUt3RCIsImZpbGUiOiIuLi8uLi9zcmMvTWVzc2FnZS9NZXNzYWdlLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgTWVzc2FnZVByb3BzIH0gZnJvbSAnLi9NZXNzYWdlLnR5cGVzJ1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBTdHlsZWRMaW5rIH0gZnJvbSAnLi4vTGluay9MaW5rLnN0eWxlcydcblxuZXhwb3J0IGNvbnN0IE1lc3NhZ2VXcmFwcGVyID0gc3R5bGVkKEZsZXgpPE1lc3NhZ2VQcm9wcz5gXG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMl19O1xuICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ2FsZXJ0cy1zZWNvbmRhcnktdGV4dCddfTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgc3RhdHVzLCB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbYGFsZXJ0cy0ke3N0YXR1c30tYmFja2dyb3VuZGBdfTtcblxuICAke1N0eWxlZExpbmt9IHtcbiAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ2FsZXJ0cy1zZWNvbmRhcnktdGV4dCddfTtcbiAgICBmb250LXdlaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5mb250V2VpZ2h0c1snc2VtaS1ib2xkJ119O1xuICAgIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ2FsZXJ0cy1wcmltYXJ5LWxpbmsnXX07XG4gICAgfVxuICB9XG5gXG4iXX0= */"));
+})("padding:", ({
+  theme
+}) => theme.space[2], ";color:", ({
+  theme
+}) => theme.colors['alerts-secondary-text'], ";justify-content:center;align-items:center;background-color:", ({
+  status,
+  theme
+}) => theme.colors[`alerts-${status}-background`], ";", StyledLink, "{color:", ({
+  theme
+}) => theme.colors['alerts-secondary-text'], ";font-weight:", ({
+  theme
+}) => theme.fontWeights['semi-bold'], ";text-decoration:underline;&:hover{color:", ({
+  theme
+}) => theme.colors['alerts-primary-link'], ";}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9NZXNzYWdlL01lc3NhZ2Uuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUt3RCIsImZpbGUiOiIuLi8uLi9zcmMvTWVzc2FnZS9NZXNzYWdlLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgTWVzc2FnZVByb3BzIH0gZnJvbSAnLi9NZXNzYWdlLnR5cGVzJ1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBTdHlsZWRMaW5rIH0gZnJvbSAnLi4vTGluay9MaW5rLnN0eWxlcydcblxuZXhwb3J0IGNvbnN0IE1lc3NhZ2VXcmFwcGVyID0gc3R5bGVkKEZsZXgpPE1lc3NhZ2VQcm9wcz5gXG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMl19O1xuICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ2FsZXJ0cy1zZWNvbmRhcnktdGV4dCddfTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgc3RhdHVzLCB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbYGFsZXJ0cy0ke3N0YXR1c30tYmFja2dyb3VuZGBdfTtcblxuICAke1N0eWxlZExpbmt9IHtcbiAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ2FsZXJ0cy1zZWNvbmRhcnktdGV4dCddfTtcbiAgICBmb250LXdlaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5mb250V2VpZ2h0c1snc2VtaS1ib2xkJ119O1xuICAgIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ2FsZXJ0cy1wcmltYXJ5LWxpbmsnXX07XG4gICAgfVxuICB9XG5gXG4iXX0= */"));

package/lib/Message/Message.types.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/lib/Message/index.js

@@ -1,16 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Message = require("./Message");
-Object.keys(_Message).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Message[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Message[key];
-    }
-  });
-});
+export * from './Message';

package/lib/Modal/ConfirmationModal.js

@@ -1,75 +1,48 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ConfirmationModal = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _ = require(".");
-var _2 = require("..");
-var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["title", "confirmText", "onConfirm", "cancelText", "onCancel", "variant", "icon", "isLoading", "children"];
-var ConfirmationModal = exports.ConfirmationModal = function ConfirmationModal(_ref) {
-  var title = _ref.title,
-    confirmText = _ref.confirmText,
-    onConfirm = _ref.onConfirm,
-    _ref$cancelText = _ref.cancelText,
-    cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
-    onCancel = _ref.onCancel,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    icon = _ref.icon,
-    isLoading = _ref.isLoading,
-    children = _ref.children,
-    dialog = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var cancelRef = (0, _react.useRef)(null);
-  var handleCancel = (0, _react.useCallback)(function () {
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useCallback, useRef } from 'react';
+import { Modal } from '.';
+import { Button, ButtonGroup, IconAndText, Subheader } from '..';
+export const ConfirmationModal = ({
+  title,
+  confirmText,
+  onConfirm,
+  cancelText = 'Cancel',
+  onCancel,
+  variant = 'primary',
+  icon,
+  isLoading,
+  children,
+  ...dialog
+}) => {
+  const cancelRef = useRef(null);
+  const handleCancel = useCallback(() => {
     if (onCancel) onCancel();
     dialog.hide();
   }, [onCancel, dialog]);
-  var variantToColor = {
+  const variantToColor = {
     primary: 'brand',
     danger: 'danger'
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Modal, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+  return /*#__PURE__*/React.createElement(Modal, _extends({
     focusRef: cancelRef
-  }, dialog), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Modal.Header, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Subheader, {
-        children: icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.IconAndText, {
-          icon: icon,
-          iconProps: {
-            color: "icon-".concat(variant)
-          },
-          children: title
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-          children: title
-        })
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Modal.Body, {
-      mt: 4,
-      children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Modal.Footer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_2.ButtonGroup, {
-        mt: 5,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Button, {
-          variant: "primary",
-          color: variantToColor[variant],
-          onClick: onConfirm,
-          isLoading: isLoading,
-          children: confirmText
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Button, {
-          variant: "text",
-          color: "secondary",
-          onClick: handleCancel,
-          ref: cancelRef,
-          children: cancelText
-        })]
-      })
-    })]
-  }));
+  }, dialog), /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Subheader, null, icon ? /*#__PURE__*/React.createElement(IconAndText, {
+    icon: icon,
+    iconProps: {
+      color: `icon-${variant}`
+    }
+  }, title) : /*#__PURE__*/React.createElement(React.Fragment, null, title))), /*#__PURE__*/React.createElement(Modal.Body, {
+    mt: 4
+  }, children), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    mt: 5
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "primary",
+    color: variantToColor[variant],
+    onClick: onConfirm,
+    isLoading: isLoading
+  }, confirmText), /*#__PURE__*/React.createElement(Button, {
+    variant: "text",
+    color: "secondary",
+    onClick: handleCancel,
+    ref: cancelRef
+  }, cancelText))));
 };

package/lib/Modal/Modal.js

@@ -1,164 +1,134 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useModal = exports.Modal = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _CloseButton = require("../CloseButton");
-var _styles = require("./styles");
-var _Dialog = require("reakit/Dialog");
-var _Typography = require("../Typography");
-var _Flexbox = require("../Flexbox");
-var _ = require("..");
-var _lodash = require("lodash");
-var _ScrollableContent = require("../ScrollableContent");
-var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["title", "description", "role", "headerImg", "size", "vPos", "focusRef", "children", "tabIndex", "showCloseButton", "p"],
-  _excluded2 = ["headerImg", "title", "description", "id", "children"],
-  _excluded3 = ["children"],
-  _excluded4 = ["atTop", "atBottom", "scroll", "height"],
-  _excluded5 = ["children"];
-var defaultModalPadding = 6;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import { CloseButton } from '../CloseButton';
+import { Overlay, ModalBox, CloseBtnLocation, ModalHeaderBox, ModalBodyBox, ModalFooterBox } from './styles';
+import { useDialogState, Dialog, DialogBackdrop } from 'reakit/Dialog';
+import { Subheader, Paragraph } from '../Typography';
+import { Box } from '../Flexbox';
+import { Img } from '..';
+import { isObject } from 'lodash';
+import { useScrollContainer } from '../ScrollableContent';
+const defaultModalPadding = 6;
 function findChild(ofType, children) {
-  return _react["default"].Children.toArray(children).find(function (child) {
-    return child && (0, _lodash.isObject)(child) && 'type' in child && (0, _lodash.isObject)(child.type) && child.type.name === ofType.name;
-  });
+  return React.Children.toArray(children).find(child => child && isObject(child) && 'type' in child && isObject(child.type) && child.type.name === ofType.name);
 }
-var ModalComponent = function ModalComponent(_ref) {
-  var title = _ref.title,
-    description = _ref.description,
-    _ref$role = _ref.role,
-    role = _ref$role === void 0 ? 'dialog' : _ref$role,
-    headerImg = _ref.headerImg,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'xs' : _ref$size,
-    _ref$vPos = _ref.vPos,
-    vPos = _ref$vPos === void 0 ? 'top' : _ref$vPos,
-    focusRef = _ref.focusRef,
-    children = _ref.children,
-    tabIndex = _ref.tabIndex,
-    _ref$showCloseButton = _ref.showCloseButton,
-    showCloseButton = _ref$showCloseButton === void 0 ? false : _ref$showCloseButton,
-    _ref$p = _ref.p,
-    p = _ref$p === void 0 ? defaultModalPadding : _ref$p,
-    dialog = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var labelProps = {
-    'aria-labelledby': "modal-title-".concat(dialog.baseId)
+const ModalComponent = ({
+  title,
+  description,
+  role = 'dialog',
+  headerImg,
+  size = 'xs',
+  vPos = 'top',
+  focusRef,
+  children,
+  tabIndex,
+  showCloseButton = false,
+  p = defaultModalPadding,
+  ...dialog
+}) => {
+  const labelProps = {
+    'aria-labelledby': `modal-title-${dialog.baseId}`
   };
-  var isAlert = role === 'alertdialog';
-  var childHeader = findChild(ModalHeader, children);
-  var childBody = findChild(ModalBody, children);
-  var childFooter = findChild(ModalFooter, children);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.DialogBackdrop, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+  const isAlert = role === 'alertdialog';
+  const childHeader = findChild(ModalHeader, children);
+  const childBody = findChild(ModalBody, children);
+  const childFooter = findChild(ModalFooter, children);
+  return /*#__PURE__*/React.createElement(DialogBackdrop, _extends({
     role: "presentation",
-    as: _styles.Overlay
-  }, dialog), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.Dialog, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, dialog), labelProps), {}, {
-      as: _styles.ModalBox,
-      id: dialog.baseId,
-      role: role,
-      hideOnEsc: !isAlert,
-      hideOnClickOutside: !isAlert,
-      unstable_initialFocusRef: focusRef,
-      tabIndex: tabIndex,
-      size: size,
-      vPos: vPos,
-      children: [!!childHeader ? childHeader : /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeader, {
-        headerImg: headerImg,
-        title: title,
-        description: description,
-        pt: defaultModalPadding,
-        px: defaultModalPadding,
-        id: dialog.baseId
-      }), childBody ? childBody : /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalBody, {
-        pt: defaultModalPadding / 2,
-        pb: defaultModalPadding,
-        children: children
-      }), childFooter, (!isAlert || showCloseButton) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.CloseBtnLocation, {
-        padding: defaultModalPadding,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloseButton.CloseButton, {
-          onClick: dialog.hide
-        })
-      })]
-    }))
-  }));
+    as: Overlay
+  }, dialog), /*#__PURE__*/React.createElement(Dialog, _extends({}, dialog, labelProps, {
+    as: ModalBox,
+    id: dialog.baseId,
+    role: role,
+    hideOnEsc: !isAlert,
+    hideOnClickOutside: !isAlert,
+    unstable_initialFocusRef: focusRef,
+    tabIndex: tabIndex,
+    size: size,
+    vPos: vPos
+  }), !!childHeader ? childHeader : /*#__PURE__*/React.createElement(ModalHeader, {
+    headerImg: headerImg,
+    title: title,
+    description: description,
+    pt: defaultModalPadding,
+    px: defaultModalPadding,
+    id: dialog.baseId
+  }), childBody ? childBody : /*#__PURE__*/React.createElement(ModalBody, {
+    pt: defaultModalPadding / 2,
+    pb: defaultModalPadding
+  }, children), childFooter, (!isAlert || showCloseButton) && /*#__PURE__*/React.createElement(CloseBtnLocation, {
+    padding: defaultModalPadding
+  }, /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: dialog.hide
+  }))));
 };
-var ModalHeader = function ModalHeader(_ref2) {
-  var headerImg = _ref2.headerImg,
-    title = _ref2.title,
-    description = _ref2.description,
-    id = _ref2.id,
-    children = _ref2.children,
-    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  var titleProps = id && {
-    id: "modal-title-".concat(id)
+const ModalHeader = ({
+  headerImg,
+  title,
+  description,
+  id,
+  children,
+  ...props
+}) => {
+  const titleProps = id && {
+    id: `modal-title-${id}`
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ModalHeaderBox, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+  return /*#__PURE__*/React.createElement(ModalHeaderBox, _extends({
     px: defaultModalPadding,
     pt: defaultModalPadding
-  }, props), {}, {
-    children: [headerImg && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Img, {
-      src: headerImg.src,
-      alt: headerImg.alt,
-      width: headerImg.width,
-      transparent: true,
-      mr: 4
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flexbox.Box, {
-      pr: 5,
-      flexGrow: 1,
-      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Subheader, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, titleProps), {}, {
-        children: title
-      })), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Paragraph, {
-        mt: 2,
-        as: "div",
-        children: description
-      }), children]
-    })]
-  }));
+  }, props), headerImg && /*#__PURE__*/React.createElement(Img, {
+    src: headerImg.src,
+    alt: headerImg.alt,
+    width: headerImg.width,
+    transparent: true,
+    mr: 4
+  }), /*#__PURE__*/React.createElement(Box, {
+    pr: 5,
+    flexGrow: 1
+  }, title && /*#__PURE__*/React.createElement(Subheader, titleProps, title), description && /*#__PURE__*/React.createElement(Paragraph, {
+    mt: 2,
+    as: "div"
+  }, description), children));
 };
 
 // On future usages we should start using these components
 
-var ModalBody = function ModalBody(_ref3) {
-  var children = _ref3.children,
-    props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
-  var _useScrollContainer = (0, _ScrollableContent.useScrollContainer)(),
-    atTop = _useScrollContainer.atTop,
-    atBottom = _useScrollContainer.atBottom,
-    scroll = _useScrollContainer.scroll,
-    height = _useScrollContainer.height,
-    divProps = (0, _objectWithoutProperties2["default"])(_useScrollContainer, _excluded4);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ModalBodyBox, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+const ModalBody = ({
+  children,
+  ...props
+}) => {
+  const {
+    atTop,
+    atBottom,
+    scroll,
+    height,
+    ...divProps
+  } = useScrollContainer();
+  return /*#__PURE__*/React.createElement(ModalBodyBox, _extends({
     px: defaultModalPadding,
     moreTop: !atTop,
     moreBottom: !atBottom
-  }, props), divProps), {}, {
-    children: children
-  }));
+  }, props, divProps), children);
 };
-var ModalFooter = function ModalFooter(_ref4) {
-  var children = _ref4.children,
-    props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded5);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ModalFooterBox, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+const ModalFooter = ({
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(ModalFooterBox, _extends({
     px: defaultModalPadding,
     pb: defaultModalPadding
-  }, props), {}, {
-    children: children
-  }));
+  }, props), children);
 };
-var useModal = exports.useModal = function useModal(id, visibleOnMount) {
-  return (0, _Dialog.useDialogState)({
+const useModal = (id, visibleOnMount) => {
+  return useDialogState({
     baseId: id,
     animated: true,
     visible: visibleOnMount
   });
 };
-var Modal = exports.Modal = Object.assign(ModalComponent, {
+const Modal = Object.assign(ModalComponent, {
   Header: ModalHeader,
   Body: ModalBody,
   Footer: ModalFooter
-});
+});
+export { Modal, useModal };

package/lib/Modal/index.js

@@ -1,27 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Modal = require("./Modal");
-Object.keys(_Modal).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Modal[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Modal[key];
-    }
-  });
-});
-var _ConfirmationModal = require("./ConfirmationModal");
-Object.keys(_ConfirmationModal).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ConfirmationModal[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _ConfirmationModal[key];
-    }
-  });
-});
+export * from './Modal';
+export * from './ConfirmationModal';