@geneui/components 2.11.2 → 2.12.2

package/LinkButton/index.js

@@ -0,0 +1,67 @@
+import React__default, { useCallback, useMemo } from 'react';
+import { c as classnames } from '../index-6ff23041.js';
+import { n as noop } from '../index-a0e4e333.js';
+import Icon from '../Icon/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import 'prop-types';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .linkButton{align-items:center;color:var(--hero);cursor:pointer;display:flex;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;padding:0 .8rem}[data-gene-ui-version=\"2.12.2\"] .linkButton:focus-visible{border-radius:.4rem;outline:.2rem var(--hero) solid}[data-gene-ui-version=\"2.12.2\"] .linkButton__icon{display:inline-block}[data-gene-ui-version=\"2.12.2\"] .linkButton-disable{opacity:.3;pointer-events:none}";
+styleInject(css_248z);
+
+const LinkButton = (_a) => {
+    var { href, onClick, children, iconAfter, className, iconBefore, isDisabled, onMouseDown, ariaLabel } = _a, restProps = __rest(_a, ["href", "onClick", "children", "iconAfter", "className", "iconBefore", "isDisabled", "onMouseDown", "ariaLabel"]);
+    const onClickHandler = useCallback((e) => onClick === null || onClick === void 0 ? void 0 : onClick(e), [onClick]);
+    const onMouseDownHandler = useCallback((e) => onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e), [onMouseDown]);
+    const attributes = useMemo(() => (Object.assign(Object.assign({ className: classnames('linkButton', { 'linkButton-disable': isDisabled }, className), onMouseDown: onMouseDownHandler, onClick: onClickHandler }, (ariaLabel ? { 'aria-label': ariaLabel } : {})), restProps)), [isDisabled, className, onMouseDownHandler, onClickHandler, restProps]);
+    const content = useMemo(() => (React__default.createElement(React__default.Fragment, null,
+        iconBefore && React__default.createElement(Icon, { type: iconBefore, className: "linkButton__icon" }),
+        children,
+        iconAfter && React__default.createElement(Icon, { type: iconAfter, className: "linkButton__icon" }))), [iconBefore, children, iconAfter]);
+    return (React__default.createElement(React__default.Fragment, null, href ? (React__default.createElement("a", Object.assign({}, attributes, { href: href }), content)) : (React__default.createElement("button", Object.assign({}, attributes, { type: "button" }), content))));
+};
+LinkButton.defaultProps = {
+    children: 'LinkButton example',
+    isDisabled: false,
+    onMouseDown: noop
+};
+LinkButton.displayName = 'LinkButton';
+
+export { LinkButton as default };

package/{Menu.js → Menu/index.js}

@@ -1,30 +1,29 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default, { forwardRef, useMemo, useState, useRef, useEffect, useCallback } from 'react';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import { s as screenTypes } from './configs-91c86664.js';
-import { c as classnames } from './index-6ff23041.js';
-import Option from './Option.js';
-import CustomScrollbar from './Scrollbar.js';
-import './globalStyling-9c60a159.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import './dateValidation-67caec66.js';
-import './_commonjsHelpers-24198af3.js';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import { s as screenTypes } from '../configs-fed6ac34.js';
+import Option from '../Option/index.js';
+import CustomScrollbar from '../Scrollbar/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
 import 'react-dom';
-import './useDeviceType-dd51db38.js';
-import './useWindowSize-80369d76.js';
-import './useEllipsisDetection-ef536015.js';
-import './Tooltip.js';
-import './Popover-f4d1cac0.js';
-import './index-ac59cb10.js';
-import './GeneUIProvider.js';
-import './Icon.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../hooks/useEllipsisDetection.js';
+import '../Icon/index.js';
+import '../Tooltip/index.js';
+import '../Popover-f4d1cac0.js';
+import '../index-a0e4e333.js';
+import '../GeneUIProvider/index.js';
 
 const findDeep = function (data, indexStack) {
   let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   return index < indexStack.length ? findDeep(data[indexStack[index]].children, indexStack, index + 1) : data;
 };
 
-var css_248z = "[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper{min-width:18rem;overflow:hidden;white-space:nowrap;width:100%}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper>ul{display:flex;min-width:100%;transform:translateX(calc(var(--translate-x)*-1));transition:transform .3s}html[dir=rtl] .menu-items-wrapper>ul{transform:translateX(var(--translate-x))}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper>ul.reversed>li:first-child{order:0}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper>ul.reversed>li:nth-child(2){order:2}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper>ul.reversed>li:nth-child(3){order:1}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper>ul>li{display:flex;flex-direction:column;flex-shrink:0;width:100%}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper .divider.type-horizontal{margin:0;width:100%}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper .divider.type-horizontal.full-width{margin:1rem 0;width:100%}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper .menu-item{align-items:center;cursor:pointer;display:flex;font:600 1.4rem/2rem var(--font-family);padding:1rem 1.4rem;transition:color .3s,background .3s}[data-gene-ui-version=\"1.0.0\"] .popover-positioner.mobile-view .menu-items-wrapper .menu-item{padding:1.4rem 2rem}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper .menu-item.highlighted{color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper .menu-item:hover{background:rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper .menu-item.act-direction:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper .menu-item .icon{margin:-.2rem 0}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper .menu-item .icon.menu-custom-icon{margin-inline-end:1rem}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper .menu-item.header{flex-direction:row-reverse}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper .menu-text{flex:auto}[data-gene-ui-version=\"1.0.0\"] .menu-items-wrapper .menu-text .small-text{font-size:1.2rem;line-height:1.4rem;opacity:.7}";
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper{min-width:18rem;overflow:hidden;white-space:nowrap;width:100%}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper>ul{display:flex;min-width:100%;transform:translateX(calc(var(--translate-x)*-1));transition:transform .3s}html[dir=rtl] .menu-items-wrapper>ul{transform:translateX(var(--translate-x))}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper>ul.reversed>li:first-child{order:0}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper>ul.reversed>li:nth-child(2){order:2}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper>ul.reversed>li:nth-child(3){order:1}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper>ul>li{display:flex;flex-direction:column;flex-shrink:0;width:100%}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper .divider.type-horizontal{margin:0;width:100%}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper .divider.type-horizontal.full-width{margin:1rem 0;width:100%}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper .menu-item{align-items:center;cursor:pointer;display:flex;font:600 1.4rem/2rem var(--font-family);padding:1rem 1.4rem;transition:color .3s,background .3s}[data-gene-ui-version=\"2.12.2\"] .popover-positioner.mobile-view .menu-items-wrapper .menu-item{padding:1.4rem 2rem}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper .menu-item.highlighted{color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper .menu-item:hover{background:rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper .menu-item.act-direction:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper .menu-item .icon{margin:-.2rem 0}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper .menu-item .icon.menu-custom-icon{margin-inline-end:1rem}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper .menu-item.header{flex-direction:row-reverse}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper .menu-text{flex:auto}[data-gene-ui-version=\"2.12.2\"] .menu-items-wrapper .menu-text .small-text{font-size:1.2rem;line-height:1.4rem;opacity:.7}";
 styleInject(css_248z);
 
 const findHeaderByIndexStack = (data, indexStack) => {
@@ -246,38 +245,38 @@ Menu.propTypes = {
    * used for the atoms/Option component.<br/>
    * Add <code>maxHeight</code> to data to add scrollbar with maxHeight(px)
    */
-  data: propTypesExports.arrayOf(propTypesExports.shape({
-    component: propTypesExports.node,
-    maxHeight: propTypesExports.number,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    component: PropTypes.node,
+    maxHeight: PropTypes.number,
     ...Option.propTypes
   })),
   /**
    * Fires event when user click on header elements;
    * (event: Event, item: Object) => void
    */
-  onBack: propTypesExports.func,
+  onBack: PropTypes.func,
   /**
    * Fires event when user click on option elements;
    * (event: Event, item: Object) => void
    */
-  onNext: propTypesExports.func,
+  onNext: PropTypes.func,
   /**
    * Fires event when user click on elements;
    * (event: Event, item: Object) => void
    */
-  onSelect: propTypesExports.func,
+  onSelect: PropTypes.func,
   /**
    * Controls screen type
    */
-  screenType: propTypesExports.oneOf(screenTypes),
+  screenType: PropTypes.oneOf(screenTypes),
   /**
    * auto scroll to activeElement
    */
-  scrollToActiveElement: propTypesExports.bool,
+  scrollToActiveElement: PropTypes.bool,
   /**
    * Initial selected options indexes array
    */
-  initialIndexStack: propTypesExports.arrayOf(propTypesExports.string)
+  initialIndexStack: PropTypes.arrayOf(PropTypes.string)
 };
 
 export { Menu as default };

package/MobileNavigation/index.js

@@ -0,0 +1,94 @@
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import Badge from '../Badge/index.js';
+import Icon from '../Icon/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../configs-fed6ac34.js';
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .mob-navigation-bar{background:var(--background);border-top:1px solid rgba(var(--background-sc-rgb),.06);bottom:0;font:600 1rem/1.4rem var(--font-family);left:0;position:fixed;text-align:center;width:100%;z-index:200}[data-gene-ui-version=\"2.12.2\"] .mob-navigation-bar>ul{display:table;table-layout:fixed;width:100%}[data-gene-ui-version=\"2.12.2\"] .mob-navigation-bar>ul>li{display:table-cell;overflow:hidden;padding:.8rem 0 .4rem;position:relative;transition:color .3s,opacity .3s}[data-gene-ui-version=\"2.12.2\"] .mob-navigation-bar>ul>li .badge{margin:0 auto;position:absolute;top:.8rem;width:5.2rem}[data-gene-ui-version=\"2.12.2\"] .mob-navigation-bar>ul>li .badge-right .badge{right:calc(50% - 2.5rem)}[data-gene-ui-version=\"2.12.2\"] .mob-navigation-bar>ul>li .badge-left .badge{left:calc(50% - 2.5rem)}[data-gene-ui-version=\"2.12.2\"] .mob-navigation-bar>ul>li:before{background:var(--hero);border-radius:0 0 .5rem .5rem;content:\"\";display:block;height:.3rem;left:calc(50% - 2.6rem);position:absolute;top:0;transform:translateY(-100%);transition:transform .3s;width:5.2rem}[data-gene-ui-version=\"2.12.2\"] .mob-navigation-bar>ul>li.active{color:var(--hero)}[data-gene-ui-version=\"2.12.2\"] .mob-navigation-bar>ul>li.active:before{transform:translateY(0)}[data-gene-ui-version=\"2.12.2\"] .mob-navigation-bar>ul>li.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.12.2\"] .mob-navigation-bar .icon{margin:0 0 .2rem}";
+styleInject(css_248z);
+
+function MobileNavigation(_ref) {
+  let {
+    list,
+    activeSlug,
+    onChange,
+    className,
+    ...restProps
+  } = _ref;
+  const handleClick = event => {
+    const {
+      index
+    } = event.currentTarget.dataset;
+    const item = list[index];
+    onChange && onChange(item);
+  };
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames('mob-navigation-bar', className)
+  }, restProps), /*#__PURE__*/React__default.createElement("ul", null, list.map((item, index) => /*#__PURE__*/React__default.createElement("li", {
+    key: item.slug,
+    "data-index": index,
+    className: classnames({
+      active: item.slug === activeSlug,
+      disabled: item.disabled
+    }),
+    onClick: !item.disabled ? handleClick : null
+  }, item.badge && /*#__PURE__*/React__default.createElement("div", {
+    className: "badge-".concat(item.badge.position || 'right')
+  }, /*#__PURE__*/React__default.createElement(Badge, {
+    size: "default",
+    maxCount: item.badge.maxCount,
+    count: item.badge.count
+  })), /*#__PURE__*/React__default.createElement(Icon, {
+    type: item.icon
+  }), /*#__PURE__*/React__default.createElement("p", {
+    className: "ellipsis-text"
+  }, item.title)))));
+}
+MobileNavigation.propTypes = {
+  /**
+   * Array of menu items data
+   */
+  list: PropTypes.arrayOf(PropTypes.shape({
+    /**
+     * Title for navigation item
+     */
+    title: PropTypes.string,
+    /**
+     *
+     */
+    slug: PropTypes.string,
+    /**
+     * Icon for navigation item
+     */
+    icon: PropTypes.string,
+    /**
+     * Notification Badge
+     * count - the value of badge
+     * maxCount - if the count is greater than the max count, the Badge shows maxCount+
+     * position - position of Badge
+     */
+    badge: PropTypes.shape({
+      count: PropTypes.number,
+      maxCount: PropTypes.number,
+      position: PropTypes.oneOf(['left', 'right'])
+    })
+  }).isRequired),
+  /**
+   * Initially selected item
+   */
+  activeSlug: PropTypes.string,
+  /**
+   * CSS class name for element
+   */
+  className: PropTypes.string,
+  /**
+   * Fires event when user click on one of the items
+   * (item: Object) => void
+   */
+  onChange: PropTypes.func
+};
+
+export { MobileNavigation as default };

package/{MobilePopup.js → MobilePopup/index.js}

@@ -1,29 +1,30 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default, { useState, useCallback, forwardRef } from 'react';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import { c as classnames } from './index-6ff23041.js';
-import { n as noop } from './index-ac59cb10.js';
-import Icon from './Icon.js';
-import Portal from './Portal.js';
-import './dateValidation-67caec66.js';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import { n as noop } from '../index-a0e4e333.js';
+import Icon from '../Icon/index.js';
+import Portal from '../Portal/index.js';
+import '../dateValidation-67caec66.js';
 import 'react-dom';
-import './configs-91c86664.js';
-import { u as useClickOutside } from './useClickOutside-5183e396.js';
-import { P as Popover } from './index-084588e9.js';
-import Menu from './Menu.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import './globalStyling-9c60a159.js';
-import './GeneUIProvider.js';
-import './_commonjsHelpers-24198af3.js';
-import './Popover-f4d1cac0.js';
-import './index-122432cd.js';
-import './useDeviceType-dd51db38.js';
-import './useWindowSize-80369d76.js';
-import './Scrollbar.js';
-import './guid-8ddf77b3.js';
-import './Option.js';
-import './useEllipsisDetection-ef536015.js';
-import './Tooltip.js';
+import '../configs-fed6ac34.js';
+import useClickOutside from '../hooks/useClickOutside.js';
+import Popover from '../Popover/index.js';
+import Menu from '../Menu/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../GeneUIProvider/index.js';
+import '../_commonjsHelpers-24198af3.js';
+import '../Popover-f4d1cac0.js';
+import '../index-122432cd.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../hooks/useUpdatableRef.js';
+import '../hooks/useForceUpdate.js';
+import '../Scrollbar/index.js';
+import '../guid-8ddf77b3.js';
+import '../Option/index.js';
+import '../hooks/useEllipsisDetection.js';
+import '../Tooltip/index.js';
 
 function ActionMenu(_ref) {
   let {
@@ -57,7 +58,7 @@ function ActionMenu(_ref) {
   return children;
 }
 
-var css_248z = "[data-gene-ui-version=\"1.0.0\"] .m-popup-holder{height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:400}[data-gene-ui-version=\"1.0.0\"] .m-popup-backdrop{animation:m-popup-backdrop-reveal .3s forwards;background-color:#0003;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}@keyframes m-popup-backdrop-reveal{to{opacity:1}}[data-gene-ui-version=\"1.0.0\"] .m-popup-c{animation:m-popup-c-reveal .4s .25s forwards;background:var(--background);border-radius:1rem 1rem 0 0;bottom:0;box-shadow:0 -1px .2rem 0 #0000000d;display:flex;flex-direction:column;left:0;max-height:calc(100% - 2rem);padding:0 1.6rem;position:absolute;right:0;transform:translate3d(0,100%,0)}@keyframes m-popup-c-reveal{to{transform:translateZ(0)}}[data-gene-ui-version=\"1.0.0\"] .m-popup-head{border-bottom:1px solid rgba(var(--background-sc-rgb),.1);display:grid;font-weight:700;grid-template-columns:1fr auto 1fr;height:5.1rem;position:relative}[data-gene-ui-version=\"1.0.0\"] .m-popup-head>li{align-items:center;display:flex;overflow:hidden}[data-gene-ui-version=\"1.0.0\"] .m-popup-head>li:first-child .mp-action .icon{margin-inline-end:1rem}[data-gene-ui-version=\"1.0.0\"] .m-popup-head>li:last-child .mp-action{flex-direction:row-reverse}[data-gene-ui-version=\"1.0.0\"] .m-popup-head>li:last-child .mp-action .icon{margin-inline-start:1rem}[data-gene-ui-version=\"1.0.0\"] .m-popup-head>li:nth-child(2){padding:0 1rem}[data-gene-ui-version=\"1.0.0\"] .m-popup-head>li:not(:nth-child(2)){min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}[data-gene-ui-version=\"1.0.0\"] .m-popup-head>li:nth-child(3){justify-content:flex-end}[data-gene-ui-version=\"1.0.0\"] .m-popup-head>li .mp-action{align-items:center;color:var(--hero);cursor:pointer;display:flex;font:600 1.4rem/3.6rem var(--font-family);overflow:hidden}[data-gene-ui-version=\"1.0.0\"] .m-popup-content{-webkit-overflow-scrolling:auto;flex:auto;margin:0 -1.6rem;overflow-y:auto;padding:0 1.6rem env(safe-area-inset-bottom);transition:padding .4s;width:calc(100% + 3.2rem)}";
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .m-popup-holder{height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:400}[data-gene-ui-version=\"2.12.2\"] .m-popup-backdrop{animation:m-popup-backdrop-reveal .3s forwards;background-color:#0003;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}@keyframes m-popup-backdrop-reveal{to{opacity:1}}[data-gene-ui-version=\"2.12.2\"] .m-popup-c{animation:m-popup-c-reveal .4s .25s forwards;background:var(--background);border-radius:1rem 1rem 0 0;bottom:0;box-shadow:0 -1px .2rem 0 #0000000d;display:flex;flex-direction:column;left:0;max-height:calc(100% - 2rem);padding:0 1.6rem;position:absolute;right:0;transform:translate3d(0,100%,0)}@keyframes m-popup-c-reveal{to{transform:translateZ(0)}}[data-gene-ui-version=\"2.12.2\"] .m-popup-head{border-bottom:1px solid rgba(var(--background-sc-rgb),.1);display:grid;font-weight:700;grid-template-columns:1fr auto 1fr;height:5.1rem;position:relative}[data-gene-ui-version=\"2.12.2\"] .m-popup-head>li{align-items:center;display:flex;overflow:hidden}[data-gene-ui-version=\"2.12.2\"] .m-popup-head>li:first-child .mp-action .icon{margin-inline-end:1rem}[data-gene-ui-version=\"2.12.2\"] .m-popup-head>li:last-child .mp-action{flex-direction:row-reverse}[data-gene-ui-version=\"2.12.2\"] .m-popup-head>li:last-child .mp-action .icon{margin-inline-start:1rem}[data-gene-ui-version=\"2.12.2\"] .m-popup-head>li:nth-child(2){padding:0 1rem}[data-gene-ui-version=\"2.12.2\"] .m-popup-head>li:not(:nth-child(2)){min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}[data-gene-ui-version=\"2.12.2\"] .m-popup-head>li:nth-child(3){justify-content:flex-end}[data-gene-ui-version=\"2.12.2\"] .m-popup-head>li .mp-action{align-items:center;color:var(--hero);cursor:pointer;display:flex;font:600 1.4rem/3.6rem var(--font-family);overflow:hidden}[data-gene-ui-version=\"2.12.2\"] .m-popup-content{-webkit-overflow-scrolling:auto;flex:auto;margin:0 -1.6rem;overflow-y:auto;padding:0 1.6rem env(safe-area-inset-bottom);transition:padding .4s;width:calc(100% + 3.2rem)}";
 styleInject(css_248z);
 
 const MobilePopUp = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -118,26 +119,26 @@ MobilePopUp.propTypes = {
    * Fires event when user clicks on right action button
    * (event: SyntheticEvent) => void
    */
-  rightActionClick: propTypesExports.func,
+  rightActionClick: PropTypes.func,
   /**
    * Fires event when user clicks on left action button
    * (event: SyntheticEvent) => void
    */
-  leftActionClick: propTypesExports.func,
+  leftActionClick: PropTypes.func,
   /**
    * Container for portal
    */
-  portalContainer: propTypesExports.any,
+  portalContainer: PropTypes.any,
   /**
    * Props for right action
    *  iconType: String
    *  text: String
    *  menuOptions: Option atom's props
    */
-  rightAction: propTypesExports.oneOfType([propTypesExports.any, propTypesExports.shape({
-    iconType: propTypesExports.string,
-    text: propTypesExports.string,
-    menuOptions: propTypesExports.arrayOf(propTypesExports.object)
+  rightAction: PropTypes.oneOfType([PropTypes.any, PropTypes.shape({
+    iconType: PropTypes.string,
+    text: PropTypes.string,
+    menuOptions: PropTypes.arrayOf(PropTypes.object)
   })]),
   /**
    * Props for left action
@@ -145,31 +146,31 @@ MobilePopUp.propTypes = {
    *  text: String
    *  menuOptions: Option atom's props
    */
-  leftAction: propTypesExports.oneOfType([propTypesExports.any, propTypesExports.shape({
-    iconType: propTypesExports.string,
-    text: propTypesExports.string,
-    menuOptions: propTypesExports.arrayOf(propTypesExports.object)
+  leftAction: PropTypes.oneOfType([PropTypes.any, PropTypes.shape({
+    iconType: PropTypes.string,
+    text: PropTypes.string,
+    menuOptions: PropTypes.arrayOf(PropTypes.object)
   })]),
   /**
    * Additional classname
    */
-  className: propTypesExports.string,
+  className: PropTypes.string,
   /**
    * Displays popup if [true]
    */
-  isOpened: propTypesExports.bool,
+  isOpened: PropTypes.bool,
   /**
    * Valid React elements for popup body
    */
-  children: propTypesExports.node,
+  children: PropTypes.node,
   /**
    * Custom title for popup
    */
-  title: propTypesExports.string,
+  title: PropTypes.string,
   /*
    * Backdrop click event handler
    */
-  onBackdropClick: propTypesExports.func
+  onBackdropClick: PropTypes.func
 };
 MobilePopUp.defaultProps = {
   onBackdropClick: noop,

package/{Modal.js → Modal/index.js}

@@ -1,21 +1,20 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default, { useRef, useState, useCallback } from 'react';
-import { c as classnames } from './index-6ff23041.js';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import { n as noop } from './index-ac59cb10.js';
-import { u as useKeyDown } from './useKeyDown-38102ae7.js';
-import './configs-91c86664.js';
-import Button from './Button.js';
-import Portal from './Portal.js';
-import './globalStyling-9c60a159.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import './dateValidation-67caec66.js';
-import './_commonjsHelpers-24198af3.js';
+import { c as classnames } from '../index-6ff23041.js';
+import PropTypes from 'prop-types';
+import { n as noop } from '../index-a0e4e333.js';
+import useKeyDown from '../hooks/useKeyDown.js';
+import '../configs-fed6ac34.js';
+import Button from '../Button/index.js';
+import Portal from '../Portal/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
 import 'react-dom';
-import './Icon.js';
-import './GeneUIProvider.js';
+import '../Icon/index.js';
+import '../GeneUIProvider/index.js';
 
-var css_248z = "[data-gene-ui-version=\"1.0.0\"] .modal-splash{animation:modal-splash .3s forwards;display:flex;height:calc(100% - var(--header-height, 0px));left:0;opacity:0;overflow-y:auto;padding:2.8rem;position:fixed;top:var(--header-height,0);width:100%;z-index:300}@keyframes modal-splash{to{opacity:1}}[data-gene-ui-version=\"1.0.0\"] .modal-splash.p-top{padding-top:0}[data-gene-ui-version=\"1.0.0\"] .modal-splash.p-bottom{padding-bottom:0}[data-gene-ui-version=\"1.0.0\"] .modal-splash.light-background{background:#fff9}[data-gene-ui-version=\"1.0.0\"] .modal-splash.dark-background{background:#0006}[data-gene-ui-version=\"1.0.0\"] .modal-content{animation:modal-content .4s .1s forwards;background:var(--background);border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:2rem;box-shadow:0 .2rem .4rem 0 #0000001a;display:flex;flex-direction:column;margin:auto;max-width:100%;opacity:0;position:relative}@keyframes modal-content{to{opacity:1}}[data-gene-ui-version=\"1.0.0\"] .modal-content.s-default{width:35rem}[data-gene-ui-version=\"1.0.0\"] .modal-content .modal-close{position:absolute;top:.5rem}html:not([dir=rtl]) .modal-content .modal-close{right:1.6rem}html[dir=rtl] .modal-content .modal-close{left:1.6rem}[data-gene-ui-version=\"1.0.0\"] .modal-splash.p-top .modal-content{align-self:flex-start;border-top-left-radius:0;border-top-right-radius:0;margin:0 auto}[data-gene-ui-version=\"1.0.0\"] .modal-splash.p-bottom .modal-content{align-self:flex-end;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:0 -.2rem .4rem 0 #0000001a;margin:0 auto}[data-gene-ui-version=\"1.0.0\"] .modal-head{align-items:center;border-bottom:1px solid rgba(var(--background-sc-rgb),.1);display:flex;font:700 1.4rem/1.8rem var(--font-family);justify-content:center;min-height:4rem;padding:0 5.4rem;position:relative;text-align:center;width:100%}[data-gene-ui-version=\"1.0.0\"] .modal-head .modal-close{top:50%;transform:translateY(-50%)}[data-gene-ui-version=\"1.0.0\"] .a-compact .modal-head{border-bottom:0;line-height:1.6rem;margin:2.6rem 0 .6rem;min-height:inherit}[data-gene-ui-version=\"1.0.0\"] .modal-body{color:rgba(var(--background-sc-rgb),.62);font:600 1.2rem/1.42 var(--font-family);padding:2rem;width:100%}[data-gene-ui-version=\"1.0.0\"] .modal-footer{border-top:1px solid rgba(var(--background-sc-rgb),.1);display:flex;justify-content:center;padding:1.5rem 2.5rem;width:100%}[data-gene-ui-version=\"1.0.0\"] .modal-footer>*{margin:0 .5rem}";
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .modal-splash{animation:modal-splash .3s forwards;display:flex;height:calc(100% - var(--header-height, 0px));left:0;opacity:0;overflow-y:auto;padding:2.8rem;position:fixed;top:var(--header-height,0);width:100%;z-index:300}@keyframes modal-splash{to{opacity:1}}[data-gene-ui-version=\"2.12.2\"] .modal-splash.p-top{padding-top:0}[data-gene-ui-version=\"2.12.2\"] .modal-splash.p-bottom{padding-bottom:0}[data-gene-ui-version=\"2.12.2\"] .modal-splash.light-background{background:#fff9}[data-gene-ui-version=\"2.12.2\"] .modal-splash.dark-background{background:#0006}[data-gene-ui-version=\"2.12.2\"] .modal-content{animation:modal-content .4s .1s forwards;background:var(--background);border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:2rem;box-shadow:0 .2rem .4rem 0 #0000001a;display:flex;flex-direction:column;margin:auto;max-width:100%;opacity:0;position:relative}@keyframes modal-content{to{opacity:1}}[data-gene-ui-version=\"2.12.2\"] .modal-content.s-default{width:35rem}[data-gene-ui-version=\"2.12.2\"] .modal-content .modal-close{position:absolute;top:.5rem}html:not([dir=rtl]) .modal-content .modal-close{right:1.6rem}html[dir=rtl] .modal-content .modal-close{left:1.6rem}[data-gene-ui-version=\"2.12.2\"] .modal-splash.p-top .modal-content{align-self:flex-start;border-top-left-radius:0;border-top-right-radius:0;margin:0 auto}[data-gene-ui-version=\"2.12.2\"] .modal-splash.p-bottom .modal-content{align-self:flex-end;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:0 -.2rem .4rem 0 #0000001a;margin:0 auto}[data-gene-ui-version=\"2.12.2\"] .modal-head{align-items:center;border-bottom:1px solid rgba(var(--background-sc-rgb),.1);display:flex;font:700 1.4rem/1.8rem var(--font-family);justify-content:center;min-height:4rem;padding:0 5.4rem;position:relative;text-align:center;width:100%}[data-gene-ui-version=\"2.12.2\"] .modal-head .modal-close{top:50%;transform:translateY(-50%)}[data-gene-ui-version=\"2.12.2\"] .a-compact .modal-head{border-bottom:0;line-height:1.6rem;margin:2.6rem 0 .6rem;min-height:inherit}[data-gene-ui-version=\"2.12.2\"] .modal-body{color:rgba(var(--background-sc-rgb),.62);font:600 1.2rem/1.42 var(--font-family);padding:2rem;width:100%}[data-gene-ui-version=\"2.12.2\"] .modal-footer{border-top:1px solid rgba(var(--background-sc-rgb),.1);display:flex;justify-content:center;padding:1.5rem 2.5rem;width:100%}[data-gene-ui-version=\"2.12.2\"] .modal-footer>*{margin:0 .5rem}";
 styleInject(css_248z);
 
 const sizes = ['default', 'content-size'];
@@ -131,104 +130,104 @@ Modal.propTypes = {
   /**
    * Displays modal if [true]
    */
-  visible: propTypesExports.bool,
+  visible: PropTypes.bool,
   /**
    * Controls modal size
    */
-  size: propTypesExports.oneOf(sizes),
+  size: PropTypes.oneOf(sizes),
   /**
    * Controls background color of modal
    */
-  background: propTypesExports.oneOf(backgrounds),
+  background: PropTypes.oneOf(backgrounds),
   /**
    * Controls divider between modal's header and body
    */
-  appearance: propTypesExports.oneOf(appearances),
+  appearance: PropTypes.oneOf(appearances),
   /**
    * Controls modal position on screen
    */
-  position: propTypesExports.oneOf(positions),
+  position: PropTypes.oneOf(positions),
   /**
    * Displays close button on modal,
    * Fires onCancel function when clicked
    */
-  closable: propTypesExports.bool,
+  closable: PropTypes.bool,
   /**
    * Disables footer in modal
    */
-  disableFooter: propTypesExports.bool,
+  disableFooter: PropTypes.bool,
   /**
    * Enables footers Ok button in modal
    */
-  isOkActive: propTypesExports.bool,
+  isOkActive: PropTypes.bool,
   /**
    * Custom text for cancel button
    */
-  cancelText: propTypesExports.string,
+  cancelText: PropTypes.string,
   /**
    * Custom text for ok button
    */
-  okText: propTypesExports.string,
+  okText: PropTypes.string,
   /**
    * Custom title for modal
    */
-  title: propTypesExports.any,
+  title: PropTypes.any,
   /**
    * Wraps component with Portal component if [true]
    */
-  withPortal: propTypesExports.bool,
-  portalContainer: propTypesExports.any,
+  withPortal: PropTypes.bool,
+  portalContainer: PropTypes.any,
   /**
    * Custom value to override default css value
    */
-  width: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * Custom  zIndex value to overRide default css value
    */
-  zIndex: propTypesExports.number,
+  zIndex: PropTypes.number,
   /**
    * Valid React elements for modal body
    */
-  children: propTypesExports.node,
+  children: PropTypes.node,
   /**
    * Additional classname
    */
-  className: propTypesExports.string,
+  className: PropTypes.string,
   /**
    * Fires event when user clicks on ok button
    * (event: Event) => void
    */
-  onOK: propTypesExports.func,
+  onOK: PropTypes.func,
   /**
    * Fires event when user clicks on Cancel button
    * (event: Event) => void
    */
-  onCancel: propTypesExports.func,
+  onCancel: PropTypes.func,
   /**
    * Custom footer element for modal
    */
-  footer: propTypesExports.element,
+  footer: PropTypes.element,
   /**
    * Pass [true] if you need to hide a modal when people click outside of it's content
    */
-  closeOnClickOutside: propTypesExports.bool,
+  closeOnClickOutside: PropTypes.bool,
   /**
    * Custom action elements for modal's header
    */
-  customActions: propTypesExports.node,
+  customActions: PropTypes.node,
   /**
    * Enable keyboard Enter
    */
-  needEnter: propTypesExports.bool,
+  needEnter: PropTypes.bool,
   /**
    * Fires event when user clicks on Close icon
    * (event: Event) => void
    */
-  onClose: propTypesExports.func,
+  onClose: PropTypes.func,
   /**
    * Loader for ok button
    */
-  isOkButtonLoading: propTypesExports.bool
+  isOkButtonLoading: PropTypes.bool
 };
 Modal.defaultProps = {
   visible: false,