@codacy/ui-components 0.64.16 → 0.64.18

package/lib/Modal/ConfirmationModal.js

@@ -1,47 +1,71 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+"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"];
-import React, { useCallback, useRef } from 'react';
-import { Modal } from '.';
-import { Button, ButtonGroup, IconAndText, Subheader } from '..';
-export var ConfirmationModal = function ConfirmationModal(_ref) {
+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 = _objectWithoutProperties(_ref, _excluded);
-
-  var cancelRef = useRef(null);
-  var handleCancel = useCallback(function () {
+    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 () {
     if (onCancel) onCancel();
     dialog.hide();
   }, [onCancel, dialog]);
-  return /*#__PURE__*/React.createElement(Modal, Object.assign({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Modal, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     focusRef: cancelRef
-  }, dialog), /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Subheader, null, icon ? /*#__PURE__*/React.createElement(IconAndText, {
-    icon: icon,
-    iconProps: {
-      color: "icon-".concat(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: variant,
-    onClick: onConfirm,
-    isLoading: isLoading
-  }, confirmText), /*#__PURE__*/React.createElement(Button, {
-    variant: "link",
-    color: "subtle",
-    onClick: handleCancel,
-    ref: cancelRef
-  }, cancelText))));
+  }, 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: variant,
+          onClick: onConfirm,
+          isLoading: isLoading,
+          children: confirmText
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Button, {
+          variant: "link",
+          color: "subtle",
+          onClick: handleCancel,
+          ref: cancelRef,
+          children: cancelText
+        })]
+      })
+    })]
+  }));
 };

package/lib/Modal/Modal.js

@@ -1,45 +1,51 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+"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"];
-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';
+  _excluded2 = ["headerImg", "title", "description", "id", "children"],
+  _excluded3 = ["children"],
+  _excluded4 = ["atTop", "atBottom", "scroll", "height"],
+  _excluded5 = ["children"];
 var defaultModalPadding = 6;
-
 function findChild(ofType, children) {
-  return React.Children.toArray(children).find(function (child) {
-    return child && isObject(child) && 'type' in child && isObject(child.type) && child.type.name === ofType.name;
+  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;
   });
 }
-
 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 = _objectWithoutProperties(_ref, _excluded);
-
+    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)
   };
@@ -47,105 +53,112 @@ var ModalComponent = function ModalComponent(_ref) {
   var childHeader = findChild(ModalHeader, children);
   var childBody = findChild(ModalBody, children);
   var childFooter = findChild(ModalFooter, children);
-  return /*#__PURE__*/React.createElement(DialogBackdrop, Object.assign({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.DialogBackdrop, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     role: "presentation",
-    as: Overlay
-  }, dialog), /*#__PURE__*/React.createElement(Dialog, Object.assign({}, 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
-  }))));
+    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
+        })
+      })]
+    }))
+  }));
 };
-
 var ModalHeader = function ModalHeader(_ref2) {
   var headerImg = _ref2.headerImg,
-      title = _ref2.title,
-      description = _ref2.description,
-      id = _ref2.id,
-      children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
+    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)
   };
-  return /*#__PURE__*/React.createElement(ModalHeaderBox, Object.assign({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ModalHeaderBox, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     px: defaultModalPadding,
     pt: defaultModalPadding
-  }, 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
+  }, 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]
+    })]
+  }));
+};
 
+// On future usages we should start using these components
 
 var ModalBody = function ModalBody(_ref3) {
   var children = _ref3.children,
-      props = _objectWithoutProperties(_ref3, _excluded3);
-
-  var _useScrollContainer = useScrollContainer(),
-      atTop = _useScrollContainer.atTop,
-      atBottom = _useScrollContainer.atBottom,
-      scroll = _useScrollContainer.scroll,
-      height = _useScrollContainer.height,
-      divProps = _objectWithoutProperties(_useScrollContainer, _excluded4);
-
-  return /*#__PURE__*/React.createElement(ModalBodyBox, Object.assign({
+    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"])({
     px: defaultModalPadding,
     moreTop: !atTop,
     moreBottom: !atBottom
-  }, props, divProps), children);
+  }, props), divProps), {}, {
+    children: children
+  }));
 };
-
 var ModalFooter = function ModalFooter(_ref4) {
   var children = _ref4.children,
-      props = _objectWithoutProperties(_ref4, _excluded5);
-
-  return /*#__PURE__*/React.createElement(ModalFooterBox, Object.assign({
+    props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded5);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ModalFooterBox, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     px: defaultModalPadding,
     pb: defaultModalPadding
-  }, props), children);
+  }, props), {}, {
+    children: children
+  }));
 };
-
-var useModal = function useModal(id, visibleOnMount) {
-  return useDialogState({
+var useModal = exports.useModal = function useModal(id, visibleOnMount) {
+  return (0, _Dialog.useDialogState)({
     baseId: id,
     animated: true,
     visible: visibleOnMount
   });
 };
-
-var Modal = Object.assign(ModalComponent, {
+var Modal = exports.Modal = Object.assign(ModalComponent, {
   Header: ModalHeader,
   Body: ModalBody,
   Footer: ModalFooter
-});
-export { Modal, useModal };
+});

package/lib/Modal/index.js

@@ -1,2 +1,27 @@
-export * from './Modal';
-export * from './ConfirmationModal';
+"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];
+    }
+  });
+});

package/lib/Modal/styles.d.ts

@@ -1,66 +1,49 @@
 /// <reference types="react" />
-import { CodacyTheme } from '../theme';
 import { ModalProps } from './types';
-export declare const Overlay: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: CodacyTheme | undefined;
-}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, Record<string, unknown>, CodacyTheme>;
-export declare const ModalBox: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<import("..").ColorProps & import("..").LayoutProps & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("..").As & {
-    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, CodacyTheme> | undefined;
-}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    theme?: object | undefined;
-}, "key" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & Pick<import("..").FlexProps, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps | keyof import("..").FlexboxProps> & {
-    theme?: object | undefined;
-}, Pick<ModalProps, "size" | "vPos">, CodacyTheme>;
-export declare const ModalHeaderBox: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<import("..").ColorProps & import("..").LayoutProps & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("..").As & {
-    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, CodacyTheme> | undefined;
-}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    theme?: object | undefined;
-}, "key" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & Pick<import("..").FlexProps, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps | keyof import("..").FlexboxProps> & {
-    theme?: object | undefined;
-}, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<import("..").ColorProps & import("..").LayoutProps & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("..").As & {
-    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, CodacyTheme> | undefined;
-}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    theme?: object | undefined;
-}, "key" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & Pick<import("..").FlexProps, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps | keyof import("..").FlexboxProps> & {
-    theme?: object | undefined;
-}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps | keyof import("..").FlexboxProps>, object>;
-export declare const ModalBodyBox: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<import("..").ColorProps & import("..").LayoutProps & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("..").As & {
-    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, CodacyTheme> | undefined;
-}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    theme?: object | undefined;
-}, "key" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & Pick<import("..").BoxProps, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps | keyof import("..").FlexboxProps | keyof import("..").GridboxProps> & {
-    theme?: object | undefined;
-}, {
+export declare const Overlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").ClassAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Record<string, unknown>, {}, {}>;
+export declare const ModalBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("..").As & {
+    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("..").FlexboxProps & Pick<ModalProps, "size" | "vPos">, {}, {}>;
+export declare const ModalHeaderBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("..").As & {
+    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("..").FlexboxProps, {}, {}>;
+export declare const ModalBodyBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("..").As & {
+    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("..").FlexboxProps & import("..").GridboxProps & {
     moreTop: boolean;
     moreBottom: boolean;
-}, CodacyTheme>;
-export declare const ModalFooterBox: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<import("..").ColorProps & import("..").LayoutProps & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("..").As & {
-    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, CodacyTheme> | undefined;
-}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    theme?: object | undefined;
-}, "key" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & Pick<import("..").BoxProps, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps | keyof import("..").FlexboxProps | keyof import("..").GridboxProps> & {
-    theme?: object | undefined;
-}, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<import("..").ColorProps & import("..").LayoutProps & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("..").As & {
-    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, CodacyTheme> | undefined;
-}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    theme?: object | undefined;
-}, "key" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & Pick<import("..").BoxProps, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps | keyof import("..").FlexboxProps | keyof import("..").GridboxProps> & {
-    theme?: object | undefined;
-}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps | keyof import("..").FlexboxProps | keyof import("..").GridboxProps>, object>;
-export declare const CloseBtnLocation: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}, {}, {}>;
+export declare const ModalFooterBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("..").As & {
+    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("..").FlexboxProps & import("..").GridboxProps, {}, {}>;
+export declare const CloseBtnLocation: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     padding: number;
-}, CodacyTheme>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;