@geneui/components 2.11.1 → 2.12.1

package/ModuleTitle/index.js

@@ -0,0 +1,143 @@
+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 { d as moduleTitleConfig } from '../configs-fed6ac34.js';
+import { n as noop } from '../index-a0e4e333.js';
+import Icon from '../Icon/index.js';
+import Tooltip from '../Tooltip/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import '../Popover-f4d1cac0.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../GeneUIProvider/index.js';
+
+var css_248z = "[data-gene-ui-version=\"2.12.1\"] .module-header{background:var(--background);display:flex;flex-shrink:0;height:5rem;padding:0 .5rem 0 2rem;width:100%}html[dir=rtl] .module-header{padding:0 2rem 0 .5rem}[data-gene-ui-version=\"2.12.1\"] .module-header.headerBorder.p-top{border-bottom:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.12.1\"] .module-header.headerBorder.p-top.cr-position-radius{border-radius:2rem 2rem 0 0}[data-gene-ui-version=\"2.12.1\"] .module-header.headerBorder.p-bottom{border-top:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.12.1\"] .module-header.headerBorder.p-bottom.cr-position-radius{border-radius:0 0 2rem 2rem}[data-gene-ui-version=\"2.12.1\"] .module-header.cr-full-radius{border-radius:2rem}[data-gene-ui-version=\"2.12.1\"] .module-header>li{align-items:center;display:flex}[data-gene-ui-version=\"2.12.1\"] .module-header>li.left-content{flex:auto;overflow:hidden;position:relative}[data-gene-ui-version=\"2.12.1\"] .module-header>li.left-content .left-inner{max-width:100%}[data-gene-ui-version=\"2.12.1\"] .module-header>li.left-content .left-inner:nth-last-child(2){max-width:calc(100% - 3.2rem)}[data-gene-ui-version=\"2.12.1\"] .module-header>li.left-content .left-inner-icon{margin-inline-start:.8rem}[data-gene-ui-version=\"2.12.1\"] .module-header>li.right-content{flex-shrink:0}[data-gene-ui-version=\"2.12.1\"] .module-header.s-small{height:3rem}[data-gene-ui-version=\"2.12.1\"] .module-header.s-small .module-description-title .m-title,[data-gene-ui-version=\"2.12.1\"] .module-header.s-small .module-title{font-size:1.2rem;line-height:normal}[data-gene-ui-version=\"2.12.1\"] .module-header.s-medium{height:4rem}[data-gene-ui-version=\"2.12.1\"] .module-header.s-extra-big{height:6rem}[data-gene-ui-version=\"2.12.1\"] .module-title{font:600 1.4rem/1.8rem var(--font-family)}[data-gene-ui-version=\"2.12.1\"] .module-title:before{background:var(--hero);content:\"\";display:block;height:.3rem;position:absolute;width:3.4rem}html:not([dir=rtl]) .module-title:before{left:0}html[dir=rtl] .module-title:before{right:0}[data-gene-ui-version=\"2.12.1\"] .p-top .module-title:before{bottom:0}[data-gene-ui-version=\"2.12.1\"] .p-bottom .module-title:before{top:0}[data-gene-ui-version=\"2.12.1\"] .module-title-without-border{font:600 1.4rem/1.8rem var(--font-family)}[data-gene-ui-version=\"2.12.1\"] .module-description-title{width:100%}[data-gene-ui-version=\"2.12.1\"] .module-description-title .m-description{font:600 1.2rem/1.6rem var(--font-family)}[data-gene-ui-version=\"2.12.1\"] .module-description-title .m-title{font:600 1.6rem/2.8rem var(--font-family)}";
+styleInject(css_248z);
+
+function IconWithTooltip(_ref) {
+  let {
+    toolTip,
+    children
+  } = _ref;
+  return toolTip ? /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: toolTip
+  }, children) : children;
+}
+function ModuleTitle(_ref2) {
+  let {
+    size,
+    title,
+    color,
+    hideBeforeBorder,
+    position,
+    children,
+    className,
+    description,
+    cornerRadius,
+    headerBorder,
+    titleIcon,
+    titleIconTooltip,
+    onTitleIconClick,
+    ...restProps
+  } = _ref2;
+  return /*#__PURE__*/React__default.createElement("ul", _extends({
+    className: classnames('module-header', "cr-".concat(cornerRadius), "p-".concat(position), "s-".concat(size), className, {
+      headerBorder
+    })
+  }, restProps), /*#__PURE__*/React__default.createElement("li", {
+    className: "left-content",
+    style: {
+      '--hero': color || ''
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "left-inner"
+  }, description ? /*#__PURE__*/React__default.createElement("div", {
+    className: "module-description-title"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "m-description ellipsis-text"
+  }, description), /*#__PURE__*/React__default.createElement("div", {
+    className: "m-title ellipsis-text"
+  }, title)) : title && /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('ellipsis-text', {
+      'module-title-without-border': hideBeforeBorder,
+      'module-title': !hideBeforeBorder
+    }),
+    title: typeof title === 'string' ? title : ''
+  }, title)), titleIcon && /*#__PURE__*/React__default.createElement(IconWithTooltip, {
+    toolTip: titleIconTooltip
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "left-inner-icon"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: titleIcon,
+    onClick: onTitleIconClick
+  })))), /*#__PURE__*/React__default.createElement("li", {
+    className: "right-content"
+  }, children));
+}
+ModuleTitle.propTypes = {
+  /**
+   * Title property. Any valid React node.
+   */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Additonal description. Any valid React node
+   */
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * ModuleTitle sizing
+   */
+  size: PropTypes.oneOf(moduleTitleConfig.size),
+  /**
+   * Addional className
+   */
+  className: PropTypes.string,
+  /**
+   * Hide border after title
+   */
+  hideBeforeBorder: PropTypes.bool,
+  /**
+   * Hide header main border
+   */
+  headerBorder: PropTypes.bool,
+  /**
+   * ModuleTitle positioning
+   */
+  position: PropTypes.oneOf(moduleTitleConfig.position),
+  /**
+   * ModuleTitle corner radius
+   */
+  cornerRadius: PropTypes.oneOf(moduleTitleConfig.cornerRadius),
+  /**
+   * Module title content can be passed as child. Any valid React node.
+   */
+  children: PropTypes.node,
+  /**
+   * Use this prop to override ModuleTitle's underline color. Will not work when "descroiption" prop is specified
+   */
+  color: PropTypes.string,
+  /**
+   * Will add an "Icon" atom to the left side of ModuleTitle. Valid values are the same as "type" prop for "Icon" atom
+   */
+  titleIcon: PropTypes.string,
+  /**
+   * Tooltip for icon
+   */
+  titleIconTooltip: PropTypes.string,
+  /**
+   * Title Icon onClick event
+   */
+  onTitleIconClick: PropTypes.func
+};
+ModuleTitle.defaultProps = {
+  onTitleIconClick: noop,
+  headerBorder: true,
+  size: moduleTitleConfig.size[2],
+  position: moduleTitleConfig.position[0],
+  cornerRadius: moduleTitleConfig.cornerRadius[0]
+};
+
+export { ModuleTitle as default };

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

@@ -1,46 +1,48 @@
 import React__default, { memo, useState, useRef, useMemo, useCallback, useEffect } from 'react';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import { n as noop } from './index-ac59cb10.js';
-import Icon from './Icon.js';
-import Option from './Option.js';
-import { P as Popover } from './index-a4635754.js';
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
-import './dateValidation-67caec66.js';
-import { d as debounce } from './debounce-4419bc2f.js';
+import PropTypes from 'prop-types';
+import { n as noop } from '../index-a0e4e333.js';
+import useDeviceType from '../hooks/useDeviceType.js';
+import Icon from '../Icon/index.js';
+import Option from '../Option/index.js';
+import Popover from '../Popover/index.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import '../dateValidation-67caec66.js';
+import { d as debounce } from '../debounce-4419bc2f.js';
 import 'react-dom';
-import { u as useDeviceType } from './useDeviceType-dd51db38.js';
-import Menu from './Menu.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import './index-6ff23041.js';
-import './globalStyling-9c60a159.js';
-import './configs-91c86664.js';
-import './useEllipsisDetection-ef536015.js';
-import './Tooltip.js';
-import './Popover-f4d1cac0.js';
-import './_commonjsHelpers-24198af3.js';
-import './GeneUIProvider.js';
-import './useWindowSize-80369d76.js';
-import './index-122432cd.js';
-import './Portal.js';
-import './Scrollbar.js';
-import './guid-8ddf77b3.js';
+import Menu from '../Menu/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../configs-fed6ac34.js';
+import '../hooks/useWindowSize.js';
+import '../index-6ff23041.js';
+import '../hooks/useEllipsisDetection.js';
+import '../Tooltip/index.js';
+import '../Popover-f4d1cac0.js';
+import '../_commonjsHelpers-24198af3.js';
+import '../GeneUIProvider/index.js';
+import '../index-122432cd.js';
+import '../hooks/useUpdatableRef.js';
+import '../hooks/useForceUpdate.js';
+import '../Portal/index.js';
+import '../Scrollbar/index.js';
+import '../guid-8ddf77b3.js';
 
 const getTitle = (id, data) => {
   if (data) {
     const matchedDatum = data.find(datum => datum.id === id);
-    return matchedDatum && matchedDatum.title ? matchedDatum.title : data.map(datum => getTitle(id, datum.data)).filter(Boolean)[0];
+    return matchedDatum && matchedDatum.title ? matchedDatum : data.map(datum => getTitle(id, datum.data)).filter(Boolean)[0];
   }
 };
 const getTitlesArray = (ids, data) => ids.map(id => getTitle(id, data)).filter(Boolean);
-const navigationOptionsToMenuMenu = navigationOptions => navigationOptions.map(_ref => {
+const navigationOptionsToMenu = (navigationOptions, optionId) => navigationOptions.map(_ref => {
   let {
     data,
     ...rest
   } = _ref;
   return {
     ...rest,
+    active: (optionId === null || optionId === void 0 ? void 0 : optionId.toString()) === rest.id.toString(),
     ...(data ? {
-      children: navigationOptionsToMenuMenu(data)
+      children: navigationOptionsToMenu(data, optionId)
     } : {})
   };
 });
@@ -76,7 +78,7 @@ function NavigationMenuContent(_ref) {
   const isHovered = useRef(true);
   const optionId = useMemo(() => splitedValue === null || splitedValue === void 0 ? void 0 : splitedValue[depth], [depth, splitedValue]);
   const isActiveItem = useMemo(() => (activeItem === null || activeItem === void 0 ? void 0 : activeItem.id) && optionId === activeItem.id, [activeItem, optionId]);
-  const mobileOptions = useMemo(() => options ? navigationOptionsToMenuMenu(options) : undefined, [options]);
+  const mobileOptions = useMemo(() => options ? navigationOptionsToMenu(options, optionId) : undefined, [options, optionId]);
   const initialIndexStack = useMemo(() => indexStackFromItems([], mobileOptions, optionId), [mobileOptions, activeItem]);
   const {
     isMobile
@@ -137,7 +139,7 @@ NavigationMenuContent.defaultProps = {
 };
 var NavigationMenuContent$1 = /*#__PURE__*/memo(NavigationMenuContent);
 
-var css_248z = "[data-gene-ui-version=\"2.11.0\"] .bc-navigation-menu{--size:3.6rem;align-items:center;border:1px solid #0000;border-radius:var(--button-external-size,var(--size));color:#fff;cursor:pointer;display:flex;font:600 1.4rem/2rem var(--font-family);justify-content:center;min-height:var(--button-external-size,var(--size));min-width:var(--button-external-size,var(--size));padding:0 1rem;position:relative;transition:color .3s,background .3s,opacity .2s;-webkit-user-select:none;user-select:none}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .bc-navigation-menu:hover{background:#ffffff1a}}[data-gene-ui-version=\"2.11.0\"] .bc-navigation-menu.active{background:#ffffff1a}[data-gene-ui-version=\"2.11.0\"] .bc-navigation-menu:disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .bc-navigation-menu_head{align-items:center;display:flex;justify-content:center;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .bc-navigation-menu_layer{align-items:center;display:flex;margin:0 .8rem;opacity:.7}[data-gene-ui-version=\"2.11.0\"] .bc-navigation-menu_layer:last-child{opacity:1}[data-gene-ui-version=\"2.11.0\"] .bc-navigation-menu_layer:not(.bc-navigation-menu_layer:last-child):after{background-color:#fff;content:\"\";display:block;height:2.3rem;margin-left:1.5rem;transform:rotate(15deg);width:1px}[data-gene-ui-version=\"2.11.0\"] .bc-navigation-menu_layer.active{opacity:1}[data-gene-ui-version=\"2.11.0\"] .bc-navigation-menu_content{display:flex;padding:1rem 0}[data-gene-ui-version=\"2.11.0\"] .bc-navigation-menu_content-menu{width:25.8rem}[data-gene-ui-version=\"2.11.0\"] .bc-navigation-menu_content-menu:not(.bc-navigation-menu_content-menu:last-child){border-right:1px solid #0000001a}";
+var css_248z = "[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu{--size:3.6rem;align-items:center;border:1px solid #0000;border-radius:var(--button-external-size,var(--size));color:#fff;cursor:pointer;display:flex;font:600 1.4rem/2rem var(--font-family);justify-content:center;min-height:var(--button-external-size,var(--size));min-width:var(--button-external-size,var(--size));padding:0 1rem;position:relative;transition:color .3s,background .3s,opacity .2s;-webkit-user-select:none;user-select:none}@media (hover:hover){[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu:hover{background:#ffffff1a}}[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu.active{background:#ffffff1a}[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu:disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu_head{align-items:center;display:flex;justify-content:center;pointer-events:none}[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu_layer{align-items:center;display:flex;margin:0 .8rem;opacity:.7}[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu_layer.active,[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu_layer:last-child{opacity:1}[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu_content{display:flex;padding:1rem 0}[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu_content-menu{width:25.8rem}[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu_content-menu:not(.bc-navigation-menu_content-menu:last-child){border-right:1px solid #0000001a}[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu_title-wrapper{align-items:center;display:flex;justify-content:center}[data-gene-ui-version=\"2.12.1\"] .bc-navigation-menu_title-wrapper:not(.bc-navigation-menu_title-wrapper:last-child):after{background-color:#fff;content:\"\";display:block;height:2.3rem;margin-inline:.6rem;transform:rotate(15deg);width:1px}";
 styleInject(css_248z);
 
 function NavigationMenu(_ref) {
@@ -148,6 +150,9 @@ function NavigationMenu(_ref) {
     disabled
   } = _ref;
   const [isOpen, setIsOpen] = useState(false);
+  const {
+    isMobile
+  } = useDeviceType();
   const splitedValue = useMemo(() => value && value.split('/').filter(Boolean), [value]);
   const title = useMemo(() => getTitlesArray(splitedValue, data), [splitedValue, data]);
   const handleChange = useCallback(function () {
@@ -165,10 +170,14 @@ function NavigationMenu(_ref) {
       disabled: disabled
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "bc-navigation-menu_head"
-    }, title.map((item, index) => /*#__PURE__*/React__default.createElement("span", {
+    }, title.map((item, index) => /*#__PURE__*/React__default.createElement("div", {
+      className: "bc-navigation-menu_title-wrapper"
+    }, (item === null || item === void 0 ? void 0 : item.icon) && isMobile && /*#__PURE__*/React__default.createElement(Icon, {
+      type: item.icon
+    }), /*#__PURE__*/React__default.createElement("span", {
       key: index,
       className: "bc-navigation-menu_layer"
-    }, item))), /*#__PURE__*/React__default.createElement(Icon, {
+    }, item.title)))), /*#__PURE__*/React__default.createElement(Icon, {
       type: "bc-icon-arrow-down"
     })),
     Content: /*#__PURE__*/React__default.createElement("div", {
@@ -186,24 +195,24 @@ NavigationMenu.propTypes = {
    * nested options, send the date to the option in the same structure as the options.
    * example => data={[{ id: 'item_1', title: 'Item 1', isHidden: false, data: [ { id: 'item_1_1', title: 'Item 1.1', isHidden: false } ]}]}
    */
-  data: propTypesExports.arrayOf(propTypesExports.shape(Option.propTypes)).isRequired,
+  data: PropTypes.arrayOf(PropTypes.shape(Option.propTypes)).isRequired,
   /**
    * For value you need to send id selectable options id,
    * and if you select the nested option, then you need to send the id to the hierarchy.
    * example => 'item_1/item_1_1'
    */
-  value: propTypesExports.string.isRequired,
+  value: PropTypes.string.isRequired,
   /**
    * onChange handler is called by clicking on the option
    * This callback gives you the option you clicked on and its id and
    * if it is nested then the give and parent option id are associated with a forward slash.
    * (id: NavigationMenu.value, item: Option) => void
    */
-  onChange: propTypesExports.func,
+  onChange: PropTypes.func,
   /**
    * Disabled status for the navigation menu button
    */
-  disabled: propTypesExports.bool
+  disabled: PropTypes.bool
 };
 NavigationMenu.defaultProps = {
   onChange: noop

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

@@ -1,18 +1,17 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default from 'react';
-import { c as classnames } from './index-6ff23041.js';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import './dateValidation-67caec66.js';
+import { c as classnames } from '../index-6ff23041.js';
+import PropTypes from 'prop-types';
+import '../dateValidation-67caec66.js';
 import 'react-dom';
-import { u as useDeviceType } from './useDeviceType-dd51db38.js';
-import { s as screenTypes } from './configs-91c86664.js';
-import Icon from './Icon.js';
-import './globalStyling-9c60a159.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import './_commonjsHelpers-24198af3.js';
-import './useWindowSize-80369d76.js';
+import useDeviceType from '../hooks/useDeviceType.js';
+import { s as screenTypes } from '../configs-fed6ac34.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';
 
-var css_248z = "[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .notifier-block.mobile-view{border-radius:0;border-width:0 0 1px;box-shadow:none}[data-gene-ui-version=\"2.11.0\"] .notifier-block>li{flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .notifier-block>li.notifier-icon{align-self:stretch}[data-gene-ui-version=\"2.11.0\"] .notifier-block>li.notifier-content{flex:auto;overflow:hidden;padding:1.2rem 1.4rem;width:10rem}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .notifier-block>li.notifier-action .icon{cursor:pointer}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .notifier-block>li.notifier-action .icon:hover{color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .notifier-block:hover{border-color:var(--hero)}}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .notifier-block.mobile-view .notifier-icon{border-radius:0}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .notifier-title{font:600 1.4rem/1.36 var(--font-family);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.11.0\"] .notifier-c-t{margin:.8rem 0 0}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .notifier-c-t>ul>li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.11.0\"] .notifier-c-t>ul>li:first-child{grid-area:c1;opacity:.5;width:6.4rem}[data-gene-ui-version=\"2.11.0\"] .notifier-c-t>ul>li:nth-child(2){grid-area:c2}";
+var css_248z = "[data-gene-ui-version=\"2.12.1\"] .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.12.1\"] .notifier-block.mobile-view{border-radius:0;border-width:0 0 1px;box-shadow:none}[data-gene-ui-version=\"2.12.1\"] .notifier-block>li{flex-shrink:0}[data-gene-ui-version=\"2.12.1\"] .notifier-block>li.notifier-icon{align-self:stretch}[data-gene-ui-version=\"2.12.1\"] .notifier-block>li.notifier-content{flex:auto;overflow:hidden;padding:1.2rem 1.4rem;width:10rem}[data-gene-ui-version=\"2.12.1\"] .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.12.1\"] .notifier-block>li.notifier-action .icon{cursor:pointer}@media (hover:hover){[data-gene-ui-version=\"2.12.1\"] .notifier-block>li.notifier-action .icon:hover{color:var(--hero)}[data-gene-ui-version=\"2.12.1\"] .notifier-block:hover{border-color:var(--hero)}}[data-gene-ui-version=\"2.12.1\"] .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.12.1\"] .notifier-block.mobile-view .notifier-icon{border-radius:0}[data-gene-ui-version=\"2.12.1\"] .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.12.1\"] .notifier-title{font:600 1.4rem/1.36 var(--font-family);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.12.1\"] .notifier-c-t{margin:.8rem 0 0}[data-gene-ui-version=\"2.12.1\"] .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.12.1\"] .notifier-c-t>ul>li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.12.1\"] .notifier-c-t>ul>li:first-child{grid-area:c1;opacity:.5;width:6.4rem}[data-gene-ui-version=\"2.12.1\"] .notifier-c-t>ul>li:nth-child(2){grid-area:c2}";
 styleInject(css_248z);
 
 const notificationTypes = ['default', 'clean'];
@@ -60,57 +59,57 @@ Notification.propTypes = {
   /**
    * Type of the Notification component.
    */
-  type: propTypesExports.oneOf(notificationTypes),
+  type: PropTypes.oneOf(notificationTypes),
   /**
    * If true displays close button
    */
-  closable: propTypesExports.bool,
+  closable: PropTypes.bool,
   /**
    * CSS class name for element
    */
-  className: propTypesExports.string,
+  className: PropTypes.string,
   /**
    * Fires event when user clicks on close button
    * (event: Event) => void
    */
-  onClose: propTypesExports.func,
+  onClose: PropTypes.func,
   /**
    * Custom content form notification
    */
-  content: propTypesExports.element,
+  content: PropTypes.element,
   /**
    * Fires when user click on notification modal
    * (event: Event) => void
    */
-  onContentClick: propTypesExports.func,
+  onContentClick: PropTypes.func,
   /**
    * Heading text for notification modal
    */
-  heading: propTypesExports.string,
+  heading: PropTypes.string,
   /**
    * Descriptions text fro notification
    */
-  description: propTypesExports.string,
+  description: PropTypes.string,
   /**
    * Controls screen type
    */
-  screenType: propTypesExports.oneOf(screenTypes),
+  screenType: PropTypes.oneOf(screenTypes),
   /**
    * Additional heading text for notification
    */
-  additionalHeading: propTypesExports.string,
+  additionalHeading: PropTypes.string,
   /**
    * Notification icon
    */
-  notificationIcon: propTypesExports.string.isRequired,
+  notificationIcon: PropTypes.string.isRequired,
   /**
    * Additional info for notification
    */
-  additionalDescription: propTypesExports.string,
+  additionalDescription: PropTypes.string,
   /**
    * Title for notification
    */
-  title: propTypesExports.string.isRequired
+  title: PropTypes.string.isRequired
 };
 Notification.defaultProps = {
   type: notificationTypes[0],

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

@@ -1,23 +1,22 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default, { useRef } from 'react';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import { c as classnames } from './index-6ff23041.js';
-import { o as optionConfig, s as screenTypes } from './configs-91c86664.js';
-import './dateValidation-67caec66.js';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import { o as optionConfig, s as screenTypes } from '../configs-fed6ac34.js';
+import '../dateValidation-67caec66.js';
 import 'react-dom';
-import { u as useDeviceType } from './useDeviceType-dd51db38.js';
-import { u as useEllipsisDetection } from './useEllipsisDetection-ef536015.js';
-import Tooltip from './Tooltip.js';
-import Icon from './Icon.js';
-import './globalStyling-9c60a159.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import './_commonjsHelpers-24198af3.js';
-import './useWindowSize-80369d76.js';
-import './Popover-f4d1cac0.js';
-import './index-ac59cb10.js';
-import './GeneUIProvider.js';
+import useDeviceType from '../hooks/useDeviceType.js';
+import useEllipsisDetection from '../hooks/useEllipsisDetection.js';
+import Icon from '../Icon/index.js';
+import Tooltip from '../Tooltip/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../_commonjsHelpers-24198af3.js';
+import '../hooks/useWindowSize.js';
+import '../Popover-f4d1cac0.js';
+import '../index-a0e4e333.js';
+import '../GeneUIProvider/index.js';
 
-var css_248z = "[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .option-container>*{transition:color .4s}[data-gene-ui-version=\"2.11.0\"] .option-container.mobile-view{min-height:4.8rem;padding:0 2rem}[data-gene-ui-version=\"2.11.0\"] .option-container.border-top{border-top:1px solid}[data-gene-ui-version=\"2.11.0\"] .option-container.border-bottom{border-bottom:1px solid}[data-gene-ui-version=\"2.11.0\"] .option-container.border-bottom,[data-gene-ui-version=\"2.11.0\"] .option-container.border-top{border-color:rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.11.0\"] .option-container.sticky-bottom,[data-gene-ui-version=\"2.11.0\"] .option-container.sticky-top{position:-webkit-sticky;position:sticky;z-index:1}[data-gene-ui-version=\"2.11.0\"] .option-container.sticky-top{top:0}[data-gene-ui-version=\"2.11.0\"] .option-container.sticky-bottom{bottom:0}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .option-container.hovered:hover,[data-gene-ui-version=\"2.11.0\"] .option-container:hover:hover{background:rgba(var(--background-sc-rgb),.05)}}[data-gene-ui-version=\"2.11.0\"] .option-container.hovered{background:rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.11.0\"] .option-container.active,[data-gene-ui-version=\"2.11.0\"] .option-container.c-hero{color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .option-container.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .option-container a{display:block;height:100%;left:0;line-height:4rem;overflow:hidden;padding:0 1.4rem;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:100%;z-index:1}[data-gene-ui-version=\"2.11.0\"] .option-container a.active~*{color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .option-container-relative{position:relative}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .option-right-elements{flex-shrink:0;margin-inline-start:1.2rem}[data-gene-ui-version=\"2.11.0\"] .option-right-elements .bc-icon-selected{transition:transform .4s}[data-gene-ui-version=\"2.11.0\"] .option-container:not(.mobile-view) .option-right-elements .bc-icon-selected{margin-inline-end:-.4rem}[data-gene-ui-version=\"2.11.0\"] .option-container:not(.active) .option-right-elements .bc-icon-selected{transform:scale(0)}[data-gene-ui-version=\"2.11.0\"] .mobile-view .bc-icon-selected{margin-inline-end:.8rem!important}[data-gene-ui-version=\"2.11.0\"] .option-texts{align-items:center;display:flex;flex:auto;font:600 1.4rem/2rem var(--font-family);overflow:hidden}[data-gene-ui-version=\"2.11.0\"] .option-texts>li{flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .option-texts>li:first-child{flex:auto;overflow:hidden}[data-gene-ui-version=\"2.11.0\"] .option-texts>li.assigned-value{margin-inline-start:1rem;opacity:.7}[data-gene-ui-version=\"2.11.0\"] .option-description{font:600 1.2rem/1.6rem var(--font-family);opacity:.7}[data-gene-ui-version=\"2.11.0\"] .option-title-center{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}[data-gene-ui-version=\"2.11.0\"] .option-title-end{text-align:end}";
+var css_248z = "[data-gene-ui-version=\"2.12.1\"] .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.12.1\"] .option-container>*{transition:color .4s}[data-gene-ui-version=\"2.12.1\"] .option-container.mobile-view{min-height:4.8rem;padding:0 2rem}[data-gene-ui-version=\"2.12.1\"] .option-container.border-top{border-top:1px solid}[data-gene-ui-version=\"2.12.1\"] .option-container.border-bottom{border-bottom:1px solid}[data-gene-ui-version=\"2.12.1\"] .option-container.border-bottom,[data-gene-ui-version=\"2.12.1\"] .option-container.border-top{border-color:rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.12.1\"] .option-container.sticky-bottom,[data-gene-ui-version=\"2.12.1\"] .option-container.sticky-top{position:-webkit-sticky;position:sticky;z-index:1}[data-gene-ui-version=\"2.12.1\"] .option-container.sticky-top{top:0}[data-gene-ui-version=\"2.12.1\"] .option-container.sticky-bottom{bottom:0}@media (hover:hover){[data-gene-ui-version=\"2.12.1\"] .option-container.hovered:hover,[data-gene-ui-version=\"2.12.1\"] .option-container:hover:hover{background:rgba(var(--background-sc-rgb),.05)}}[data-gene-ui-version=\"2.12.1\"] .option-container.hovered{background:rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.12.1\"] .option-container.active,[data-gene-ui-version=\"2.12.1\"] .option-container.c-hero{color:var(--hero)}[data-gene-ui-version=\"2.12.1\"] .option-container.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.12.1\"] .option-container a{display:block;line-height:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.12.1\"] .option-container a.active~*{color:var(--hero)}[data-gene-ui-version=\"2.12.1\"] .option-container-relative{position:relative}[data-gene-ui-version=\"2.12.1\"] .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.12.1\"] .option-right-elements{flex-shrink:0;margin-inline-start:1.2rem}[data-gene-ui-version=\"2.12.1\"] .option-right-elements .bc-icon-selected{transition:transform .4s}[data-gene-ui-version=\"2.12.1\"] .option-container:not(.mobile-view) .option-right-elements .bc-icon-selected{margin-inline-end:-.4rem}[data-gene-ui-version=\"2.12.1\"] .option-container:not(.active) .option-right-elements .bc-icon-selected{transform:scale(0)}[data-gene-ui-version=\"2.12.1\"] .mobile-view .bc-icon-selected{margin-inline-end:.8rem!important}[data-gene-ui-version=\"2.12.1\"] .option-texts{align-items:center;display:flex;flex:auto;font:600 1.4rem/2rem var(--font-family);overflow:hidden}[data-gene-ui-version=\"2.12.1\"] .option-texts>li{flex-shrink:0}[data-gene-ui-version=\"2.12.1\"] .option-texts>li:first-child{flex:auto;overflow:hidden}[data-gene-ui-version=\"2.12.1\"] .option-texts>li.assigned-value{margin-inline-start:1rem;opacity:.7}[data-gene-ui-version=\"2.12.1\"] .option-description{font:600 1.2rem/1.6rem var(--font-family);opacity:.7}[data-gene-ui-version=\"2.12.1\"] .option-title-center{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}[data-gene-ui-version=\"2.12.1\"] .option-title-end{text-align:end}";
 styleInject(css_248z);
 
 function Option(props) {
@@ -101,86 +100,85 @@ Option.propTypes = {
   /**
    * Title of the option
    */
-  title: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * Description of the option which is displayed on the bottom of the title with small caps
    */
-  description: propTypesExports.string,
+  description: PropTypes.string,
   /**
    * Adds additional className to the option
    */
-  className: propTypesExports.string,
+  className: PropTypes.string,
   /**
    * Adds icon on the right side of the option
    */
-  icon: propTypesExports.string,
+  icon: PropTypes.string,
   /**
    * Changes text colors
    */
-  color: propTypesExports.oneOf(optionConfig.color),
+  color: PropTypes.oneOf(optionConfig.color),
   /**
    * Changes color to hero
    */
-  active: propTypesExports.bool,
+  active: PropTypes.bool,
   /**
    * Adds check icon and displays it when the option is active
    */
-  checkMark: propTypesExports.bool,
+  checkMark: PropTypes.bool,
   /**
    * Adds to right arrow icon
    */
-  forwardMark: propTypesExports.bool,
+  forwardMark: PropTypes.bool,
   /**
    * Any element you can add to the left side
    */
-  leftCustomElement: propTypesExports.any,
+  leftCustomElement: PropTypes.any,
   /**
    * Any element you can add to the right side
    */
-  rightCustomElement: propTypesExports.any,
+  rightCustomElement: PropTypes.any,
   /**
    * Information you can display on the right side of the option
    */
-  assignedValue: propTypesExports.string,
+  assignedValue: PropTypes.string,
   /**
    * Adds border to the option
    */
-  border: propTypesExports.oneOf(optionConfig.border),
+  border: PropTypes.oneOf(optionConfig.border),
   /**
    * Makes item sticky to scrolling element based on the position you choose
    */
-  sticky: propTypesExports.oneOf(optionConfig.sticky),
+  sticky: PropTypes.oneOf(optionConfig.sticky),
   /**
    * Additional elements for rendering in option
    */
-  content: propTypesExports.any,
+  content: PropTypes.any,
   /**
    * Fires event when user click on one of the menu items;
    * (event: Event, item: Object) => void
    */
-  onClick: propTypesExports.func,
+  onClick: PropTypes.func,
   /**
    * Controls screen type
    */
-  screenType: propTypesExports.oneOf(screenTypes),
+  screenType: PropTypes.oneOf(screenTypes),
   /**
    * Controls button disable state
    */
-  disabled: propTypesExports.bool,
+  disabled: PropTypes.bool,
   /**
    * ref for label
    */
-  forwardedRef: propTypesExports.oneOfType([propTypesExports.func,
+  forwardedRef: PropTypes.oneOfType([PropTypes.func,
   // for callback ref
-  propTypesExports.shape({
-    current: propTypesExports.instanceOf(Element)
+  PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
   }) // for createRef() object
   ]),
-
   /**
    * Chose position for title
    */
-  titlePosition: propTypesExports.oneOf(['start', 'center', 'end'])
+  titlePosition: PropTypes.oneOf(['start', 'center', 'end'])
 };
 
 export { Option as default };