@itcase/ui 1.0.5 → 1.0.6

package/dist/components/Group.js

@@ -73,11 +73,23 @@ function Group(props) {
     prefix: 'width_',
     propsKey: 'width'
   });
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-type_',
+    propsKey: 'borderType'
+  });
   var _useStyles = useStyles.useStyles(props),
     groupStyles = _useStyles.styles,
     groupWrapperStyles = _useStyles.wrapper;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, shapeClass),
+    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass),
     id: id,
     style: Object.assign({}, groupStyles, style)
   }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Icon.js

@@ -34,14 +34,20 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var SVG__default = /*#__PURE__*/_interopDefault(SVG);
 
+var iconConfig = {
+  appearance: {},
+  setAppearance: function setAppearance(newComponent) {
+    iconConfig.appearance = newComponent;
+  }
+};
 var Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, ref) {
   var before = props.before,
     after = props.after,
-    Counter = props.Counter,
+    Badge = props.Badge,
     SvgImage = props.SvgImage,
-    imageSrc = props.imageSrc,
-    simple = props.simple,
-    className = props.className,
+    imageSrc = props.imageSrc;
+    props.simple;
+    var className = props.className,
     href = props.href,
     link = props.link,
     linkTarget = props.linkTarget,
@@ -59,46 +65,58 @@ var Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, r
     }
     return sizes;
   }, []);
-  var bgFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'bgFill'
-  });
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'icon_fill_',
+    prefix: 'fill_',
     propsKey: 'fill'
   });
   var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'icon_fill_hover_',
+    prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  var bgFillSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var fillSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_fill_size_',
-    propsKey: 'bgFillSize'
+    propsKey: 'fillSize'
   });
-  var strokeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var iconFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_',
+    propsKey: 'iconFill'
+  });
+  var iconFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_hover_',
+    propsKey: 'iconFillHover'
+  });
+  var iconStrokeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_stroke_',
-    propsKey: 'stroke'
+    propsKey: 'iconStroke'
   });
-  var strokeHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var iconStrokeHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_stroke_hover_',
-    propsKey: 'strokeHover'
+    propsKey: 'iconStrokeHover'
   });
-  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var iconSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_size_',
-    propsKey: 'size'
+    propsKey: 'iconSize'
   });
   var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_shape_',
     propsKey: 'shape'
   });
-  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
-    propsKey: 'border'
+    propsKey: 'borderColor'
   });
-  var borderHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_hover_',
     propsKey: 'borderHover'
   });
+  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-type_',
+    propsKey: 'borderType'
+  });
   var _useStyles = useStyles.useStyles(props),
     iconStyles = _useStyles.styles;
   var ImageComponent = React.useMemo(function () {
@@ -119,17 +137,17 @@ var Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, r
     return null;
   }, [SvgImage, imageSrc]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'icon', simple && 'icon_type_simple', bgFillClass, bgFillSizeClass, borderClass, borderHoverClass, fillClass, fillHoverClass, shapeClass, strokeClass, strokeHoverClass, Counter && 'icon_type_with-counter', (link || href || onClick) && 'cursor_type_pointer'),
+    className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, iconFillClass, iconFillHoverClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
     ref: ref,
     style: iconStyles,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
+    className: clsx__default.default(link || href ? 'icon__link' : 'icon__item', iconSizeClass),
+    DefaultComponent: "div",
     href: link || href,
-    target: linkTarget,
     rel: linkRel,
-    className: clsx__default.default(link || href ? 'icon__link' : 'icon__item', sizeClass),
-    DefaultComponent: "div"
-  }, before, ImageComponent, after, Counter));
+    target: linkTarget
+  }, before, ImageComponent, after, Badge));
 });
 Icon.propTypes = {
   SvgImage: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.func, PropTypes__default.default.object]),
@@ -182,3 +200,4 @@ function removeFillStroke(code) {
 }
 
 exports.Icon = Icon;
+exports.iconConfig = iconConfig;

package/dist/components/Input.js

@@ -16,8 +16,16 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+var inputConfig = {
+  state: {},
+  setState: function setState(newComponent) {
+    inputConfig.state = newComponent;
+  }
+};
 function Input(props) {
-  var id = props.id,
+  var _inputConfig$state$st, _inputConfig$state$st2, _inputConfig$state$st3;
+  var state = props.state,
+    id = props.id,
     type = props.type,
     className = props.className,
     placeholder = props.placeholder,
@@ -58,12 +66,20 @@ function Input(props) {
     prefix: 'text-weight_',
     propsKey: 'textWeight'
   });
+  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
   var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("input", {
-    className: clsx__default.default(className, 'input', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, sizeClass),
+    className: clsx__default.default(className, 'input', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, borderWidthClass, borderColorClass, sizeClass, ((_inputConfig$state$st = inputConfig.state[state]) == null ? void 0 : _inputConfig$state$st.fillClass) && ("fill_" + inputConfig.state[state].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), ((_inputConfig$state$st2 = inputConfig.state[state]) == null ? void 0 : _inputConfig$state$st2.borderColor) && ("border-color_" + inputConfig.state[state].borderColor).replace(/([A-Z])/g, '-$1').toLowerCase(), ((_inputConfig$state$st3 = inputConfig.state[state]) == null ? void 0 : _inputConfig$state$st3.shape) && "shape_" + inputConfig.state[state].shape),
     type: type,
     id: id,
     disabled: disabled,
@@ -92,3 +108,4 @@ Input.defaultProps = {
 };
 
 exports.Input = Input;
+exports.inputConfig = inputConfig;

package/dist/components/Label.js

@@ -31,8 +31,15 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+var labelConfig = {
+  appearance: {},
+  setAppearance: function setAppearance(newComponent) {
+    labelConfig.appearance = newComponent;
+  }
+};
 function Label(props) {
-  var children = props.children,
+  var appearance = props.appearance,
+    children = props.children,
     className = props.className,
     label = props.label,
     labelTextSize = props.labelTextSize,
@@ -71,13 +78,13 @@ function Label(props) {
   var _useStyles = useStyles.useStyles(props),
     labelStyles = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'label', fillClass, shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && "label_type_" + type, set && "label_set_" + set),
+    className: clsx__default.default(className, 'label', fillClass || appearance && ("fill_" + labelConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && "label_type_" + type, set && "label_set_" + set),
     style: labelStyles
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "label__inner"
   }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "label__label",
-    textColor: labelTextColor,
+    textColor: labelTextColor || appearance && labelConfig.appearance[appearance].labelTextColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
     size: labelTextSize,
     textWrap: labelTextWrap
   }, label) : /*#__PURE__*/React__default.default.createElement("div", {
@@ -124,3 +131,4 @@ Label.defaultProps = {
 };
 
 exports.Label = Label;
+exports.labelConfig = labelConfig;

package/dist/components/Logo.js

@@ -21,24 +21,35 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Logo(props) {
-  var children = props.children,
-    className = props.className;
-    props.isLink;
-    var logoSrc = props.logoSrc;
+  var className = props.className,
+    LinkComponent = props.LinkComponent,
+    size = props.size,
+    link = props.link,
+    href = props.href,
+    target = props.target,
+    rel = props.rel,
+    source = props.source,
+    src = props.src;
   var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'logo_align-items_',
     propsKey: 'alignItems'
   });
   var _useStyles = useStyles.useStyles(props),
-    logo = _useStyles.styles,
-    logoStyles = _useStyles.logo;
+    logo = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'logo', alignItemsClass),
+    className: clsx__default.default(className, 'logo', alignItemsClass, size && "logo_size_" + size),
     style: logo
-  }, children, /*#__PURE__*/React__default.default.createElement("img", {
-    className: "logo__link-second",
-    src: logoSrc,
-    style: logoStyles
+  }, link || href ? /*#__PURE__*/React__default.default.createElement(LinkComponent, {
+    className: 'logo__link',
+    href: link || href,
+    target: target,
+    rel: rel
+  }, /*#__PURE__*/React__default.default.createElement("img", {
+    className: "logo__image",
+    src: src || source
+  })) : /*#__PURE__*/React__default.default.createElement("img", {
+    className: "logo__image",
+    src: src || source
   }));
 }
 Logo.propTypes = {
@@ -46,8 +57,9 @@ Logo.propTypes = {
   className: PropTypes__default.default.string,
   isLink: PropTypes__default.default.bool,
   logoSrc: PropTypes__default.default.string,
-  LinkComponent: PropTypes__default.default.any,
   href: PropTypes__default.default.string,
+  src: PropTypes__default.default.string,
+  source: PropTypes__default.default.string,
   link: PropTypes__default.default.string,
   target: PropTypes__default.default.string,
   rel: PropTypes__default.default.string

package/dist/components/MenuItem.js

@@ -33,8 +33,16 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+var menuItemConfig = {
+  appearance: {},
+  setAppearance: function setAppearance(newComponent) {
+    menuItemConfig.appearance = newComponent;
+  }
+};
 function MenuItem(props) {
   var isActive = props.isActive,
+    isHover = props.isHover,
+    appearance = props.appearance,
     after = props.after,
     before = props.before,
     children = props.children,
@@ -122,7 +130,7 @@ function MenuItem(props) {
   var _useStyles = useStyles.useStyles(props),
     menuItem = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('menu-item', isActive && 'menu-item_state_active', directionClass, className, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "menu-item_set_" + set, justifyContentClass),
+    className: clsx__default.default('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass, className, sizeClass, fillClass || appearance && ("fill_" + menuItemConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "menu-item_set_" + set, justifyContentClass),
     style: menuItem,
     onClick: onClick,
     onMouseEnter: onMouseEnter
@@ -139,7 +147,7 @@ function MenuItem(props) {
     textGradient: textGradient,
     size: textSize,
     textWeight: textWeight,
-    textColor: textColor,
+    textColor: textColor || appearance && menuItemConfig.appearance[appearance].textColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
     textWrap: textWrap,
     textColorHover: textColorHover,
     textStyle: textStyle
@@ -207,3 +215,4 @@ MenuItem.defaultProps = {
 };
 
 exports.MenuItem = MenuItem;
+exports.menuItemConfig = menuItemConfig;

package/dist/components/Modal.js

@@ -2,68 +2,246 @@
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var ReactDOM = require('react-dom');
+var require$$2 = require('react-dom');
 var clsx = require('clsx');
+require('./Icon.js');
+require('./Text.js');
+var index = require('./Fader.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../context/UIContext.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var index$1 = require('./Loader.js');
+require('react-inlinesvg');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
+require('../useStyles-e4accb53.js');
+require('../hooks/styleAttributes.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/fillGradient.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+var require$$2__default = /*#__PURE__*/_interopDefault(require$$2);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var Modal = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
+var getOrCreateModalElement = function getOrCreateModalElement(modalQuerySelector, className) {
+  if (className === void 0) {
+    className = '';
+  }
+  // prettier-ignore
+  var classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
+  var modalElement = document.querySelector(modalQuerySelector);
+  if (!modalElement) {
+    // Add modal element into the DOM on mount.
+    modalElement = document.createElement('div');
+    modalElement.setAttribute('id', 'modal-global');
+    modalElement.classList.add('modal');
+    if (classList.length) {
+      var _modalElement$classLi;
+      (_modalElement$classLi = modalElement.classList).add.apply(_modalElement$classLi, classList);
+    }
+    document.body.prepend(modalElement);
+  }
+  return modalElement;
+};
+
+// Modal component that is an abstraction around the portal API.
+var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props, ref) {
   var children = props.children,
     className = props.className,
-    classNameWrapper = props.classNameWrapper,
-    onOpen = props.onOpen,
-    onClose = props.onClose,
-    containerRef = props.containerRef;
-  var _useState = React.useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var _useState2 = React.useState(null),
-    modalsNode = _useState2[0],
-    setModalsNode = _useState2[1];
-  var open = React.useCallback(function () {
+    closeButton = props.closeButton,
+    contentClassName = props.contentClassName,
+    id = props.id,
+    isFader = props.isFader,
+    faderFill = props.faderFill,
+    faderFillGradient = props.faderFillGradient,
+    faderOpacity = props.faderOpacity,
+    initialIsOpen = props.isOpen,
+    isScrollOnOpen = props.isScrollOnOpen,
+    isSetFocusOnOpen = props.isSetFocusOnOpen,
+    modalQuerySelector = props.modalQuerySelector,
+    isOutsideClose = props.isOutsideClose,
+    onCloseModal = props.onCloseModal,
+    onOpenModal = props.onOpenModal;
+
+  // Query DOM element
+  var _useState = React.useState(null),
+    modalElement = _useState[0],
+    setModalElement = _useState[1];
+  React.useLayoutEffect(function () {
+    var element = getOrCreateModalElement(modalQuerySelector, className);
+    setModalElement(element);
+    if (element) {
+      addModalProps(element);
+    }
+  }, []);
+  var modalContentRef = React.useRef(null);
+  var modalFaderRef = React.useRef(null);
+  var _useState2 = React.useState(initialIsOpen),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var addModalProps = React.useCallback(function (element) {
+    // Change class need in "useEffect"
+    if (isOpen) {
+      // Show modal
+      element.classList.add('modal_state_visible');
+      // Scroll to opened modal
+      if (isScrollOnOpen) {
+        // modalContentRef.current.style.top = `${window.visualViewport.pageTop}px`
+        element.scrollIntoView({
+          block: 'center',
+          behavior: 'smooth'
+        });
+      }
+
+      // "setTimeout" in this implementation is needs for set focus on modal
+      // after "onMouseDown" event on button
+      if (isSetFocusOnOpen) {
+        setTimeout(function () {
+          return modalContentRef.current.focus();
+        }, 0);
+      }
+    } else if (!element.children.length) {
+      // Hide modal if has no children
+      element.classList.remove('modal_state_visible');
+    }
+  }, [isOpen, isSetFocusOnOpen]);
+  React.useEffect(function () {
+    if (!modalElement) {
+      return;
+    }
+    addModalProps(modalElement);
+  }, [isOpen]); // eslint-disable-line
+
+  // Show modal with children content
+  var openModal = React.useCallback(function () {
     setIsOpen(true);
-    onOpen && onOpen();
-  }, [onOpen]);
-  var close = React.useCallback(function () {
+
+    // Callback
+    if (typeof onOpenModal === 'function') {
+      onOpenModal();
+    }
+
+    /* SHOW TARGET POPUP ABOVE OTHERS POPUPS IF TARGET ALREADY OPENED
+      // If current modal is already opened
+      // Move content to end of modal root container. For order in DOM.
+      const modalContentElement = modalContentRef.current
+      if (modalContentElement) {
+        modalContentElement.parentNode.appendChild(modalContentElement)
+      }
+      // Also move fader to end of modal root container after container
+      const modalFaderElement = modalFaderRef.current
+      if (modalFaderElement) {
+        modalFaderElement.parentNode.appendChild(modalFaderElement)
+      }
+    */
+  }, [onOpenModal]);
+
+  // Hide modal and unmount children content
+  var closeModal = React.useCallback(function (event) {
+    if (event === void 0) {
+      event = {};
+    }
+    var hasRelatedTarget = event.relatedTarget && modalElement.contains(event.relatedTarget);
+    if (hasRelatedTarget) {
+      return event;
+    }
     setIsOpen(false);
-    onClose && onClose();
-  }, [onClose]);
+
+    // Callback
+    if (typeof onCloseModal === 'function') {
+      onCloseModal();
+    }
+  }, [modalElement, onCloseModal]);
+
+  // Save ref things
   React.useImperativeHandle(ref, function () {
     return {
       isOpen: isOpen,
-      open: open,
-      close: close
+      openModal: openModal,
+      closeModal: closeModal,
+      modalElement: modalElement
     };
   });
-  React.useEffect(function () {
-    setModalsNode(document.getElementById('modals'));
-  }, []);
-  if (!isOpen || !(modalsNode || containerRef)) {
-    return null;
-  }
-  return /*#__PURE__*/ReactDOM__default.default.createPortal( /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('modal', className),
-    onClick: close
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('modal__wrapper', classNameWrapper),
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, children)), (containerRef == null ? void 0 : containerRef.current) || modalsNode);
+  var contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'contentFill'
+  });
+
+  // Use a portal to render the children into the element
+  return modalElement && /*#__PURE__*/require$$2__default.default.createPortal(
+  // Any valid React child: JSX, strings, arrays, etc.
+  isOpen ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('modal-content', contentClassName, contentFillClass),
+    id: id,
+    ref: modalContentRef,
+    tabIndex: 0,
+    onBlur: isOutsideClose ? undefined : closeModal
+  }, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "modal-content__close",
+    onClick: closeModal
+  }, closeButton), children), /*#__PURE__*/React__default.default.createElement(index.Fader, {
+    ref: modalFaderRef,
+    fill: faderFill,
+    fillGradient: faderFillGradient,
+    opacity: faderOpacity,
+    className: "modal__fader",
+    isFader: isFader
+  })) : null,
+  // A DOM element
+  modalElement);
 });
 Modal.propTypes = {
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
-  classNameWrapper: PropTypes__default.default.string,
-  containerRef: PropTypes__default.default.any,
-  onClose: PropTypes__default.default.func,
-  onOpen: PropTypes__default.default.func
+  closeIcon: PropTypes__default.default.string,
+  closeText: PropTypes__default.default.string,
+  faderFill: PropTypes__default.default.string,
+  faderFillGradient: PropTypes__default.default.string,
+  faderOpacity: PropTypes__default.default.string,
+  contentClassName: PropTypes__default.default.string,
+  id: PropTypes__default.default.string,
+  isFader: PropTypes__default.default.bool,
+  isScrollOnOpen: PropTypes__default.default.bool,
+  isSetFocusOnOpen: PropTypes__default.default.bool,
+  modalQuerySelector: PropTypes__default.default.string,
+  isOutsideClose: PropTypes__default.default.bool,
+  onCloseModal: PropTypes__default.default.func,
+  onOpenModal: PropTypes__default.default.func
+};
+Modal.defaultProps = {
+  isFader: true,
+  isOpen: false,
+  isScrollOnOpen: true,
+  isSetFocusOnOpen: true,
+  modalQuerySelector: '#modal-global'
 };
-Modal.displayName = 'Modal';
+
+function ModalLoader(props) {
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: "modal-loading"
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "modal-loading__inner"
+  }, /*#__PURE__*/React__default.default.createElement(index$1.Loader, null)));
+}
 
 exports.Modal = Modal;
+exports.ModalLoader = ModalLoader;

package/dist/components/Profile.js

@@ -24,16 +24,22 @@ require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/castArray');
+require('./Icon.js');
+require('react-inlinesvg');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
 require('../constants/componentProps/size.js');
 require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/textAlign.js');
-require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/titleSize.js');
-require('../constants/componentProps/type.js');
 require('../constants/componentProps/wrap.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }