@geneui/components 3.0.0-next-9ffcb93-16102024 → 3.0.0-next-48d0ef7-31102024

package/Notification/index.js

@@ -1,120 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default from 'react';
-import { c as classnames } from '../index-031ff73c.js';
-import PropTypes from 'prop-types';
-import '../dateValidation-67caec66.js';
-import 'react-dom';
-import useDeviceType from '../hooks/useDeviceType.js';
-import { s as screenTypes } from '../configs-00612ce0.js';
-import Icon from '../Icon/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../_commonjsHelpers-24198af3.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.3\"] .notifier-block{align-items:flex-start;background:var(--background);border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:1rem;box-shadow:0 .2rem .4rem 0 #0000001a;cursor:pointer;display:flex;height:8.5rem;transition:border-color .3s;width:100%}[data-gene-ui-version=\"2.16.3\"] .notifier-block.mobile-view{border-radius:0;border-width:0 0 1px;box-shadow:none}[data-gene-ui-version=\"2.16.3\"] .notifier-block>li{flex-shrink:0}[data-gene-ui-version=\"2.16.3\"] .notifier-block>li.notifier-icon{align-self:stretch}[data-gene-ui-version=\"2.16.3\"] .notifier-block>li.notifier-content{flex:auto;overflow:hidden;padding:1.2rem 1.4rem;width:10rem}[data-gene-ui-version=\"2.16.3\"] .notifier-block>li.notifier-action{padding:1rem 1.5rem 0 0}html[dir=rtl] .notifier-block>li.notifier-action{padding:1rem 0 0 1.5rem}[data-gene-ui-version=\"2.16.3\"] .notifier-block>li.notifier-action .icon{cursor:pointer}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .notifier-block>li.notifier-action .icon:hover{color:var(--hero)}[data-gene-ui-version=\"2.16.3\"] .notifier-block:hover{border-color:var(--hero)}}[data-gene-ui-version=\"2.16.3\"] .notifier-icon{align-items:center;background:rgba(var(--hero-rgb),.28);border-radius:.9rem 0 0 .9rem;color:var(--background);display:flex;font-size:4.2rem;justify-content:center;width:8.5rem}html[dir=rtl] .notifier-icon{border-radius:0 .9rem .9rem 0}[data-gene-ui-version=\"2.16.3\"] .notifier-block.mobile-view .notifier-icon{border-radius:0}[data-gene-ui-version=\"2.16.3\"] .type-clean .notifier-icon{background:none;color:rgba(var(--hero-rgb),.48)}html:not([dir=rtl]) .type-clean .notifier-icon{border-right:1px solid rgba(var(--background-sc-rgb),.1)}html[dir=rtl] .type-clean .notifier-icon{border-left:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.3\"] .notifier-title{font:600 1.4rem/1.36 var(--font-family);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.16.3\"] .notifier-c-t{margin:.8rem 0 0}[data-gene-ui-version=\"2.16.3\"] .notifier-c-t>ul{display:grid;font:600 1.2rem/1.42 var(--font-family);grid-template-areas:\"c1 c2\";grid-template-columns:auto 1fr}[data-gene-ui-version=\"2.16.3\"] .notifier-c-t>ul>li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.16.3\"] .notifier-c-t>ul>li:first-child{grid-area:c1;opacity:.5;width:6.4rem}[data-gene-ui-version=\"2.16.3\"] .notifier-c-t>ul>li:nth-child(2){grid-area:c2}";
-styleInject(css_248z);
-
-const notificationTypes = ['default', 'clean'];
-function Notification(_ref) {
-  let {
-    type,
-    onClose,
-    closable,
-    content,
-    title,
-    heading,
-    className,
-    screenType,
-    additionalHeading,
-    notificationIcon,
-    onContentClick,
-    description,
-    additionalDescription,
-    ...restProps
-  } = _ref;
-  const {
-    isMobile
-  } = useDeviceType(screenType);
-  return /*#__PURE__*/React__default.createElement("ul", _extends({
-    onClick: onContentClick,
-    className: classnames('notifier-block', className, "type-".concat(type), {
-      'mobile-view': isMobile
-    })
-  }, restProps), type && /*#__PURE__*/React__default.createElement("li", {
-    className: classnames('notifier-icon', notificationIcon)
-  }), /*#__PURE__*/React__default.createElement("li", {
-    className: "notifier-content"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "notifier-title"
-  }, title), content || /*#__PURE__*/React__default.createElement("div", {
-    className: "notifier-c-t"
-  }, heading && /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("span", null, heading)), /*#__PURE__*/React__default.createElement("li", null, description)), additionalHeading && /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("span", null, additionalHeading)), /*#__PURE__*/React__default.createElement("li", null, additionalDescription)))), closable && /*#__PURE__*/React__default.createElement("li", {
-    className: "notifier-action",
-    onClick: onClose
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-close"
-  })));
-}
-Notification.propTypes = {
-  /**
-   * Type of the Notification component.
-   */
-  type: PropTypes.oneOf(notificationTypes),
-  /**
-   * If true displays close button
-   */
-  closable: PropTypes.bool,
-  /**
-   * CSS class name for element
-   */
-  className: PropTypes.string,
-  /**
-   * Fires event when user clicks on close button
-   * (event: Event) => void
-   */
-  onClose: PropTypes.func,
-  /**
-   * Custom content form notification
-   */
-  content: PropTypes.element,
-  /**
-   * Fires when user click on notification modal
-   * (event: Event) => void
-   */
-  onContentClick: PropTypes.func,
-  /**
-   * Heading text for notification modal
-   */
-  heading: PropTypes.string,
-  /**
-   * Descriptions text fro notification
-   */
-  description: PropTypes.string,
-  /**
-   * Controls screen type
-   */
-  screenType: PropTypes.oneOf(screenTypes),
-  /**
-   * Additional heading text for notification
-   */
-  additionalHeading: PropTypes.string,
-  /**
-   * Notification icon
-   */
-  notificationIcon: PropTypes.string.isRequired,
-  /**
-   * Additional info for notification
-   */
-  additionalDescription: PropTypes.string,
-  /**
-   * Title for notification
-   */
-  title: PropTypes.string.isRequired
-};
-Notification.defaultProps = {
-  type: notificationTypes[0],
-  closable: false
-};
-
-export { Notification as default, notificationTypes };

package/Option/index.js

@@ -1,184 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { useRef } from 'react';
-import PropTypes from 'prop-types';
-import { c as classnames } from '../index-031ff73c.js';
-import { o as optionConfig, s as screenTypes } from '../configs-00612ce0.js';
-import '../dateValidation-67caec66.js';
-import 'react-dom';
-import useDeviceType from '../hooks/useDeviceType.js';
-import { u as useEllipsisDetection } from '../useEllipsisDetection-c1c9ad94.js';
-import Icon from '../Icon/index.js';
-import { T as Tooltip } from '../index-65217440.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../_commonjsHelpers-24198af3.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.3\"] .option-container{align-items:center;cursor:pointer;display:flex;min-height:4rem;overflow:hidden;padding:0 1.4rem;position:relative;transition:background .4s;-webkit-user-select:none;user-select:none;width:100%;z-index:0}[data-gene-ui-version=\"2.16.3\"] .option-container>*{transition:color .4s}[data-gene-ui-version=\"2.16.3\"] .option-container.mobile-view{min-height:4.8rem;padding:0 2rem}[data-gene-ui-version=\"2.16.3\"] .option-container.border-top{border-top:1px solid}[data-gene-ui-version=\"2.16.3\"] .option-container.border-bottom{border-bottom:1px solid}[data-gene-ui-version=\"2.16.3\"] .option-container.border-bottom,[data-gene-ui-version=\"2.16.3\"] .option-container.border-top{border-color:rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.3\"] .option-container.sticky-bottom,[data-gene-ui-version=\"2.16.3\"] .option-container.sticky-top{position:-webkit-sticky;position:sticky;z-index:1}[data-gene-ui-version=\"2.16.3\"] .option-container.sticky-top{top:0}[data-gene-ui-version=\"2.16.3\"] .option-container.sticky-bottom{bottom:0}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .option-container.hovered:hover,[data-gene-ui-version=\"2.16.3\"] .option-container:hover:hover{background:rgba(var(--background-sc-rgb),.05)}}[data-gene-ui-version=\"2.16.3\"] .option-container.hovered{background:rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.16.3\"] .option-container.active,[data-gene-ui-version=\"2.16.3\"] .option-container.c-hero{color:var(--hero)}[data-gene-ui-version=\"2.16.3\"] .option-container.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.16.3\"] .option-container a{display:block;line-height:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.16.3\"] .option-container a.active~*{color:var(--hero)}[data-gene-ui-version=\"2.16.3\"] .option-container-relative{position:relative}[data-gene-ui-version=\"2.16.3\"] .option-left-elements{align-items:center;display:flex;flex-shrink:0;justify-content:center;margin-inline-end:1.2rem;min-height:2.4rem;min-width:2.4rem}[data-gene-ui-version=\"2.16.3\"] .option-right-elements{flex-shrink:0;margin-inline-start:1.2rem}[data-gene-ui-version=\"2.16.3\"] .option-right-elements .bc-icon-selected{transition:transform .4s}[data-gene-ui-version=\"2.16.3\"] .option-container:not(.mobile-view) .option-right-elements .bc-icon-selected{margin-inline-end:-.4rem}[data-gene-ui-version=\"2.16.3\"] .option-container:not(.active) .option-right-elements .bc-icon-selected{transform:scale(0)}[data-gene-ui-version=\"2.16.3\"] .mobile-view .bc-icon-selected{margin-inline-end:.8rem!important}[data-gene-ui-version=\"2.16.3\"] .option-texts{align-items:center;display:flex;flex:auto;font:600 1.4rem/2rem var(--font-family);overflow:hidden}[data-gene-ui-version=\"2.16.3\"] .option-texts>li{flex-shrink:0}[data-gene-ui-version=\"2.16.3\"] .option-texts>li:first-child{flex:auto;overflow:hidden}[data-gene-ui-version=\"2.16.3\"] .option-texts>li.assigned-value{margin-inline-start:1rem;opacity:.7}[data-gene-ui-version=\"2.16.3\"] .option-description{font:600 1.2rem/1.6rem var(--font-family);opacity:.7}[data-gene-ui-version=\"2.16.3\"] .option-title-center{text-align:center}[data-gene-ui-version=\"2.16.3\"] .option-title-end{text-align:end}";
-styleInject(css_248z);
-
-function Option(props) {
-  const {
-    title,
-    description,
-    className,
-    icon,
-    color,
-    active,
-    checkMark,
-    forwardMark,
-    leftCustomElement,
-    rightCustomElement,
-    assignedValue,
-    border,
-    sticky,
-    content,
-    onClick,
-    screenType,
-    forwardedRef,
-    disabled,
-    titlePosition,
-    ...restProps
-  } = props;
-  const titleRef = useRef(null);
-  const hasTooltip = useEllipsisDetection(titleRef);
-  const descriptionRef = useRef(null);
-  const hasDescriptionTooltip = useEllipsisDetection(descriptionRef);
-  const {
-    isMobile
-  } = useDeviceType(screenType);
-  return /*#__PURE__*/React__default.createElement("label", _extends({
-    className: classnames('option-container', className, "border-".concat(border), "sticky-".concat(sticky), "c-".concat(color), {
-      'mobile-view': isMobile,
-      'option-container-relative': titlePosition === optionConfig.titlePosition.center,
-      active,
-      disabled
-    }),
-    onClick: onClick,
-    ref: forwardedRef
-  }, restProps), content, (icon || leftCustomElement) && /*#__PURE__*/React__default.createElement("div", {
-    className: "option-left-elements"
-  }, icon && /*#__PURE__*/React__default.createElement(Icon, {
-    type: icon
-  }), leftCustomElement), /*#__PURE__*/React__default.createElement("ul", {
-    className: "option-texts"
-  }, /*#__PURE__*/React__default.createElement("li", null, title && /*#__PURE__*/React__default.createElement(Tooltip, {
-    text: title,
-    isVisible: hasTooltip
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('option-title', 'ellipsis-text', {
-      'option-title-center': titlePosition === optionConfig.titlePosition.center,
-      'option-title-end': titlePosition === optionConfig.titlePosition.end
-    }),
-    ref: titleRef
-  }, title)), description && /*#__PURE__*/React__default.createElement(Tooltip, {
-    text: description,
-    isVisible: hasDescriptionTooltip
-  }, /*#__PURE__*/React__default.createElement("div", {
-    ref: descriptionRef,
-    className: "option-description ellipsis-text"
-  }, description))), assignedValue && /*#__PURE__*/React__default.createElement("li", {
-    className: "assigned-value"
-  }, assignedValue)), (checkMark || forwardMark || rightCustomElement) && /*#__PURE__*/React__default.createElement("div", {
-    className: "option-right-elements"
-  }, checkMark && /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-selected"
-  }), forwardMark && /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-arrow-right"
-  }), rightCustomElement));
-}
-Option.defaultProps = {
-  color: optionConfig.color[0],
-  border: optionConfig.border[0],
-  sticky: optionConfig.sticky[0],
-  titlePosition: optionConfig.titlePosition.start,
-  screenType: screenTypes[0]
-};
-Option.propTypes = {
-  /**
-   * Title of the option
-   */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /**
-   * Description of the option which is displayed on the bottom of the title with small caps
-   */
-  description: PropTypes.string,
-  /**
-   * Adds additional className to the option
-   */
-  className: PropTypes.string,
-  /**
-   * Adds icon on the right side of the option
-   */
-  icon: PropTypes.string,
-  /**
-   * Changes text colors
-   */
-  color: PropTypes.oneOf(optionConfig.color),
-  /**
-   * Changes color to hero
-   */
-  active: PropTypes.bool,
-  /**
-   * Adds check icon and displays it when the option is active
-   */
-  checkMark: PropTypes.bool,
-  /**
-   * Adds to right arrow icon
-   */
-  forwardMark: PropTypes.bool,
-  /**
-   * Any element you can add to the left side
-   */
-  leftCustomElement: PropTypes.any,
-  /**
-   * Any element you can add to the right side
-   */
-  rightCustomElement: PropTypes.any,
-  /**
-   * Information you can display on the right side of the option
-   */
-  assignedValue: PropTypes.string,
-  /**
-   * Adds border to the option
-   */
-  border: PropTypes.oneOf(optionConfig.border),
-  /**
-   * Makes item sticky to scrolling element based on the position you choose
-   */
-  sticky: PropTypes.oneOf(optionConfig.sticky),
-  /**
-   * Additional elements for rendering in option
-   */
-  content: PropTypes.any,
-  /**
-   * Fires event when user click on one of the menu items;
-   * (event: Event, item: Object) => void
-   */
-  onClick: PropTypes.func,
-  /**
-   * Controls screen type
-   */
-  screenType: PropTypes.oneOf(screenTypes),
-  /**
-   * Controls button disable state
-   */
-  disabled: PropTypes.bool,
-  /**
-   * ref for label
-   */
-  forwardedRef: PropTypes.oneOfType([PropTypes.func,
-  // for callback ref
-  PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  }) // for createRef() object
-  ]),
-  /**
-   * Chose position for title
-   */
-  titlePosition: PropTypes.oneOf(['start', 'center', 'end'])
-};
-
-export { Option as default };

package/Overlay/index.js

@@ -1,187 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { useState, useMemo, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { c as classnames } from '../index-031ff73c.js';
-import { e as positions } from '../configs-00612ce0.js';
-import { n as noop } from '../index-5f37f281.js';
-import useKeyDown from '../hooks/useKeyDown.js';
-import useClickOutside from '../hooks/useClickOutside.js';
-import CustomScrollbar from '../Scrollbar/index.js';
-import Button from '../Button/index.js';
-import Divider from '../Divider/index.js';
-import ModuleTitle from '../ModuleTitle/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../tslib.es6-f211516f.js';
-import '../Icon/index.js';
-import '../index-65217440.js';
-import '../GeneUIProvider/index.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.3\"] .overlay-back-drop{animation:fadeIn 1s forwards;background:rgba(var(--background-rgb),.6);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:299}@keyframes fadeIn{to{opacity:1}}[data-gene-ui-version=\"2.16.3\"] .overlay-holder{display:flex;flex-direction:column;position:fixed;transition:width .4s,height .4s;z-index:300}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-horizontal{animation:slideInX .4s linear forwards;background:var(--background);bottom:0;top:var(--header-height,0)}@keyframes slideInX{to{transform:translateX(0)}}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-horizontal.p-left{box-shadow:.5rem 0 .6rem 0 #0000000d;transform:translateX(-120%)}html:not([dir=rtl]) .overlay-holder.t-horizontal.p-left{left:0}html[dir=rtl] .overlay-holder.t-horizontal.p-left{box-shadow:-.5rem 0 .6rem 0 #0000000d;right:0;transform:translateX(120%)}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-horizontal.p-left .overlay-close{border-radius:0 .4rem .4rem 0;box-shadow:.5rem 0 .6rem 0 #0000000d}html:not([dir=rtl]) .overlay-holder.t-horizontal.p-left .overlay-close{left:100%}html[dir=rtl] .overlay-holder.t-horizontal.p-left .overlay-close{border-radius:.4rem 0 0 .4rem;box-shadow:-.5rem 0 .6rem 0 #0000000d;right:100%}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-horizontal.p-right{box-shadow:-.5rem 0 .6rem 0 #0000000d;transform:translateX(120%)}html:not([dir=rtl]) .overlay-holder.t-horizontal.p-right{right:0}html[dir=rtl] .overlay-holder.t-horizontal.p-right{box-shadow:.5rem 0 .6rem 0 #0000000d;left:0;transform:translateX(-120%)}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-horizontal.p-right .overlay-close{border-radius:.4rem 0 0 .4rem;box-shadow:-.5rem 0 .6rem 0 #0000000d}html:not([dir=rtl]) .overlay-holder.t-horizontal.p-right .overlay-close{right:100%}html[dir=rtl] .overlay-holder.t-horizontal.p-right .overlay-close{border-radius:0 .4rem .4rem 0;box-shadow:.5rem 0 .6rem 0 #0000000d;left:100%}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-horizontal.s-half{width:50%}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-horizontal.s-wide{width:75%}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-horizontal.s-minimal{width:30rem}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-vertical{animation:slideInY .4s linear forwards;background:var(--background);height:25vh;left:0;width:100%}@keyframes slideInY{to{transform:translateY(0)}}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-vertical.s-extended{height:50vh}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-vertical.p-top{border-radius:0 0 2rem 2rem;box-shadow:0 .3rem .6rem 0 #0000000d;top:0;transform:translateY(-120%)}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-vertical.p-top .extend-reduce{box-shadow:0 .3rem .6rem 0 #0000000d;top:100%;transform:translate(-50%,-50%)}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-vertical.p-bottom{border-radius:2rem 2rem 0 0;bottom:0;box-shadow:0 -.3rem .6rem 0 #0000000d;flex-direction:column-reverse;transform:translateY(120%)}[data-gene-ui-version=\"2.16.3\"] .overlay-holder.t-vertical.p-bottom .extend-reduce{bottom:100%;box-shadow:0 -.3rem .6rem 0 #0000000d;transform:translate(-50%,50%)}[data-gene-ui-version=\"2.16.3\"] .overlay-head{flex-shrink:0;position:relative;z-index:1}[data-gene-ui-version=\"2.16.3\"] .overlay-close{align-items:center;background:var(--background);display:flex;height:6rem;justify-content:center;position:absolute;top:0;width:6rem}[data-gene-ui-version=\"2.16.3\"] .overlay-body{display:flex;flex:auto;flex-direction:column;position:relative}[data-gene-ui-version=\"2.16.3\"] .overlay-body>.scroll-holder{height:100%;left:0;position:absolute!important;top:0;width:100%}[data-gene-ui-version=\"2.16.3\"] .overlay-body>.scroll-holder>.scroll-content{align-items:stretch;display:flex;flex-direction:column;justify-content:flex-start}[data-gene-ui-version=\"2.16.3\"] .overlay-body .overlay-content{flex:auto;padding:2.1rem 1.9rem}[data-gene-ui-version=\"2.16.3\"] .overlay-body .overlay-footer{display:flex;flex-shrink:0;justify-content:flex-end}[data-gene-ui-version=\"2.16.3\"] .overlay-body .overlay-footer>*{margin:1rem}[data-gene-ui-version=\"2.16.3\"] .extend-reduce{background:var(--background);border-radius:3.6rem;color:var(--hero);cursor:pointer;font:600 1.4rem/1.8rem var(--font-family);height:3.6rem;left:50%;min-width:14rem;padding:0 2rem;position:absolute;text-align:center;transition:color .3s,background .3s}[data-gene-ui-version=\"2.16.3\"] .extend-reduce:hover{background:var(--hero);color:var(--hero-sc)}";
-styleInject(css_248z);
-
-const horizontalSizes = ['half', 'wide', 'minimal'];
-function Overlay(_ref) {
-  let {
-    position,
-    title,
-    description,
-    horizontalSize,
-    headerActions,
-    footer,
-    children,
-    onClose,
-    onClickOutside,
-    className,
-    closeText,
-    reduceText,
-    extendText,
-    withBackDrop,
-    onToggle,
-    isExtended,
-    ...restProps
-  } = _ref;
-  const setRef = useClickOutside(onClickOutside);
-  const [extended, setExtended] = useState(!!isExtended);
-  const isControlled = useMemo(() => typeof isExtended === 'boolean', [isExtended]);
-  const isVertical = useMemo(() => position === 'top' || position === 'bottom', [position]);
-  const toggleExtended = useCallback(() => setExtended(prev => !prev), []);
-  const handleToggle = useCallback(event => {
-    isControlled ? onToggle(event, extended) : toggleExtended();
-  }, [onToggle, extended]);
-  useKeyDown(e => onClose(e), [], {
-    current: window
-  }, ['Escape']);
-  useEffect(() => {
-    setExtended(isExtended);
-  }, [isExtended]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(className, 'overlay-holder', "p-".concat(position), {
-      't-vertical': isVertical,
-      't-horizontal': !isVertical,
-      's-extended': isVertical && extended,
-      ["s-".concat(horizontalSize)]: !isVertical
-    })
-  }, restProps, {
-    ref: setRef
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "overlay-head"
-  }, /*#__PURE__*/React__default.createElement(ModuleTitle, {
-    size: "extra-big",
-    title: title,
-    description: description,
-    position: isVertical ? position : 'top',
-    cornerRadius: isVertical ? 'position-radius' : 'no-radius'
-  }, headerActions, isVertical && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    onClick: onClose,
-    appearance: "minimal"
-  }, closeText))), !isVertical && /*#__PURE__*/React__default.createElement("div", {
-    className: "overlay-close"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    onClick: onClose,
-    icon: "bc-icon-close",
-    appearance: "minimal",
-    color: "default"
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "overlay-body"
-  }, /*#__PURE__*/React__default.createElement(CustomScrollbar, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "overlay-content"
-  }, children), isVertical && /*#__PURE__*/React__default.createElement("div", {
-    className: "overlay-footer"
-  }, footer)), isVertical && /*#__PURE__*/React__default.createElement("button", {
-    onClick: handleToggle,
-    className: "extend-reduce"
-  }, extended ? reduceText : extendText))), withBackDrop && /*#__PURE__*/React__default.createElement("div", {
-    className: "overlay-back-drop"
-  }));
-}
-Overlay.propTypes = {
-  /**
-   * Controls position of the element
-   */
-  position: PropTypes.oneOf(positions),
-  /**
-   * Title for element
-   */
-  title: PropTypes.string,
-  /**
-   * Description text for element
-   */
-  description: PropTypes.string,
-  /**
-   * Controls size of the element
-   */
-  horizontalSize: PropTypes.oneOf(horizontalSizes),
-  /**
-   * Header action bar,
-   * React valid elements
-   */
-  headerActions: PropTypes.node,
-  /**
-   * Overlay footer
-   * React valid elements
-   */
-  footer: PropTypes.node,
-  /**
-   * Overlay content
-   * Valid React elements
-   */
-  children: PropTypes.node,
-  /**
-   * Fires event when user click on close button
-   * (event: Event) => void
-   */
-  onClose: PropTypes.func,
-  /**
-   * CSS class for element
-   */
-  className: PropTypes.string,
-  /**
-   * Custom text for close button
-   */
-  closeText: PropTypes.string,
-  /**
-   * Custom text for reduce button
-   */
-  reduceText: PropTypes.string,
-  /**
-   * Custom text for extend button
-   */
-  extendText: PropTypes.string,
-  /**
-   * Fires event when user click on outside of content
-   * (event: Event) => void
-   */
-  onClickOutside: PropTypes.func,
-  /**
-   * Adds a white layer on the background when Overlay opens
-   */
-  withBackDrop: PropTypes.bool,
-  /**
-   * with onToggle prop you wash the event listener pressing the open and close button
-   * (event: Event, extend: Boolean) => void
-   */
-  onToggle: PropTypes.func,
-  /**
-   * using isExtended props you can control the opening of the component
-   * if you add this prop then the component becomes controlled from outside
-   */
-  isExtended: PropTypes.bool
-};
-Overlay.defaultProps = {
-  position: positions[2],
-  horizontalSize: horizontalSizes[0],
-  closeText: 'Close',
-  reduceText: 'Reduce',
-  onClickOutside: noop,
-  extendText: 'Extend',
-  onClose: noop,
-  onToggle: noop,
-  withBackDrop: false
-};
-
-export { Overlay as default };