@geneui/components 2.11.2 → 2.12.2

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.2\"] .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.2\"] .module-header.headerBorder.p-top{border-bottom:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.12.2\"] .module-header.headerBorder.p-top.cr-position-radius{border-radius:2rem 2rem 0 0}[data-gene-ui-version=\"2.12.2\"] .module-header.headerBorder.p-bottom{border-top:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.12.2\"] .module-header.headerBorder.p-bottom.cr-position-radius{border-radius:0 0 2rem 2rem}[data-gene-ui-version=\"2.12.2\"] .module-header.cr-full-radius{border-radius:2rem}[data-gene-ui-version=\"2.12.2\"] .module-header>li{align-items:center;display:flex}[data-gene-ui-version=\"2.12.2\"] .module-header>li.left-content{flex:auto;overflow:hidden;position:relative}[data-gene-ui-version=\"2.12.2\"] .module-header>li.left-content .left-inner{max-width:100%}[data-gene-ui-version=\"2.12.2\"] .module-header>li.left-content .left-inner:nth-last-child(2){max-width:calc(100% - 3.2rem)}[data-gene-ui-version=\"2.12.2\"] .module-header>li.left-content .left-inner-icon{margin-inline-start:.8rem}[data-gene-ui-version=\"2.12.2\"] .module-header>li.right-content{flex-shrink:0}[data-gene-ui-version=\"2.12.2\"] .module-header.s-small{height:3rem}[data-gene-ui-version=\"2.12.2\"] .module-header.s-small .module-description-title .m-title,[data-gene-ui-version=\"2.12.2\"] .module-header.s-small .module-title{font-size:1.2rem;line-height:normal}[data-gene-ui-version=\"2.12.2\"] .module-header.s-medium{height:4rem}[data-gene-ui-version=\"2.12.2\"] .module-header.s-extra-big{height:6rem}[data-gene-ui-version=\"2.12.2\"] .module-title{font:600 1.4rem/1.8rem var(--font-family)}[data-gene-ui-version=\"2.12.2\"] .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.2\"] .p-top .module-title:before{bottom:0}[data-gene-ui-version=\"2.12.2\"] .p-bottom .module-title:before{top:0}[data-gene-ui-version=\"2.12.2\"] .module-title-without-border{font:600 1.4rem/1.8rem var(--font-family)}[data-gene-ui-version=\"2.12.2\"] .module-description-title{width:100%}[data-gene-ui-version=\"2.12.2\"] .module-description-title .m-description{font:600 1.2rem/1.6rem var(--font-family)}[data-gene-ui-version=\"2.12.2\"] .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,29 +1,30 @@
 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 { u as useDeviceType } from './useDeviceType-dd51db38.js';
-import Icon from './Icon.js';
-import Option from './Option.js';
-import { P as Popover } from './index-084588e9.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 Menu from './Menu.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import './configs-91c86664.js';
-import './useWindowSize-80369d76.js';
-import './index-6ff23041.js';
-import './globalStyling-9c60a159.js';
-import './useEllipsisDetection-ef536015.js';
-import './Tooltip.js';
-import './Popover-f4d1cac0.js';
-import './_commonjsHelpers-24198af3.js';
-import './GeneUIProvider.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) {
@@ -138,7 +139,7 @@ NavigationMenuContent.defaultProps = {
 };
 var NavigationMenuContent$1 = /*#__PURE__*/memo(NavigationMenuContent);
 
-var css_248z = "[data-gene-ui-version=\"1.0.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=\"1.0.0\"] .bc-navigation-menu:hover{background:#ffffff1a}}[data-gene-ui-version=\"1.0.0\"] .bc-navigation-menu.active{background:#ffffff1a}[data-gene-ui-version=\"1.0.0\"] .bc-navigation-menu:disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"1.0.0\"] .bc-navigation-menu_head{align-items:center;display:flex;justify-content:center;pointer-events:none}[data-gene-ui-version=\"1.0.0\"] .bc-navigation-menu_layer{align-items:center;display:flex;margin:0 .8rem;opacity:.7}[data-gene-ui-version=\"1.0.0\"] .bc-navigation-menu_layer.active,[data-gene-ui-version=\"1.0.0\"] .bc-navigation-menu_layer:last-child{opacity:1}[data-gene-ui-version=\"1.0.0\"] .bc-navigation-menu_content{display:flex;padding:1rem 0}[data-gene-ui-version=\"1.0.0\"] .bc-navigation-menu_content-menu{width:25.8rem}[data-gene-ui-version=\"1.0.0\"] .bc-navigation-menu_content-menu:not(.bc-navigation-menu_content-menu:last-child){border-right:1px solid #0000001a}[data-gene-ui-version=\"1.0.0\"] .bc-navigation-menu_title-wrapper{align-items:center;display:flex;justify-content:center}[data-gene-ui-version=\"1.0.0\"] .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}";
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .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.2\"] .bc-navigation-menu:hover{background:#ffffff1a}}[data-gene-ui-version=\"2.12.2\"] .bc-navigation-menu.active{background:#ffffff1a}[data-gene-ui-version=\"2.12.2\"] .bc-navigation-menu:disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.12.2\"] .bc-navigation-menu_head{align-items:center;display:flex;justify-content:center;pointer-events:none}[data-gene-ui-version=\"2.12.2\"] .bc-navigation-menu_layer{align-items:center;display:flex;margin:0 .8rem;opacity:.7}[data-gene-ui-version=\"2.12.2\"] .bc-navigation-menu_layer.active,[data-gene-ui-version=\"2.12.2\"] .bc-navigation-menu_layer:last-child{opacity:1}[data-gene-ui-version=\"2.12.2\"] .bc-navigation-menu_content{display:flex;padding:1rem 0}[data-gene-ui-version=\"2.12.2\"] .bc-navigation-menu_content-menu{width:25.8rem}[data-gene-ui-version=\"2.12.2\"] .bc-navigation-menu_content-menu:not(.bc-navigation-menu_content-menu:last-child){border-right:1px solid #0000001a}[data-gene-ui-version=\"2.12.2\"] .bc-navigation-menu_title-wrapper{align-items:center;display:flex;justify-content:center}[data-gene-ui-version=\"2.12.2\"] .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) {
@@ -194,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/index.js

@@ -0,0 +1,119 @@
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default from 'react';
+import { c as classnames } from '../index-6ff23041.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-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.12.2\"] .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.2\"] .notifier-block.mobile-view{border-radius:0;border-width:0 0 1px;box-shadow:none}[data-gene-ui-version=\"2.12.2\"] .notifier-block>li{flex-shrink:0}[data-gene-ui-version=\"2.12.2\"] .notifier-block>li.notifier-icon{align-self:stretch}[data-gene-ui-version=\"2.12.2\"] .notifier-block>li.notifier-content{flex:auto;overflow:hidden;padding:1.2rem 1.4rem;width:10rem}[data-gene-ui-version=\"2.12.2\"] .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.2\"] .notifier-block>li.notifier-action .icon{cursor:pointer}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .notifier-block>li.notifier-action .icon:hover{color:var(--hero)}[data-gene-ui-version=\"2.12.2\"] .notifier-block:hover{border-color:var(--hero)}}[data-gene-ui-version=\"2.12.2\"] .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.2\"] .notifier-block.mobile-view .notifier-icon{border-radius:0}[data-gene-ui-version=\"2.12.2\"] .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.2\"] .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.2\"] .notifier-c-t{margin:.8rem 0 0}[data-gene-ui-version=\"2.12.2\"] .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.2\"] .notifier-c-t>ul>li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.12.2\"] .notifier-c-t>ul>li:first-child{grid-area:c1;opacity:.5;width:6.4rem}[data-gene-ui-version=\"2.12.2\"] .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

@@ -0,0 +1,184 @@
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useRef } from 'react';
+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 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.12.2\"] .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.2\"] .option-container>*{transition:color .4s}[data-gene-ui-version=\"2.12.2\"] .option-container.mobile-view{min-height:4.8rem;padding:0 2rem}[data-gene-ui-version=\"2.12.2\"] .option-container.border-top{border-top:1px solid}[data-gene-ui-version=\"2.12.2\"] .option-container.border-bottom{border-bottom:1px solid}[data-gene-ui-version=\"2.12.2\"] .option-container.border-bottom,[data-gene-ui-version=\"2.12.2\"] .option-container.border-top{border-color:rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.12.2\"] .option-container.sticky-bottom,[data-gene-ui-version=\"2.12.2\"] .option-container.sticky-top{position:-webkit-sticky;position:sticky;z-index:1}[data-gene-ui-version=\"2.12.2\"] .option-container.sticky-top{top:0}[data-gene-ui-version=\"2.12.2\"] .option-container.sticky-bottom{bottom:0}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .option-container.hovered:hover,[data-gene-ui-version=\"2.12.2\"] .option-container:hover:hover{background:rgba(var(--background-sc-rgb),.05)}}[data-gene-ui-version=\"2.12.2\"] .option-container.hovered{background:rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.12.2\"] .option-container.active,[data-gene-ui-version=\"2.12.2\"] .option-container.c-hero{color:var(--hero)}[data-gene-ui-version=\"2.12.2\"] .option-container.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.12.2\"] .option-container a{display:block;line-height:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.12.2\"] .option-container a.active~*{color:var(--hero)}[data-gene-ui-version=\"2.12.2\"] .option-container-relative{position:relative}[data-gene-ui-version=\"2.12.2\"] .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.2\"] .option-right-elements{flex-shrink:0;margin-inline-start:1.2rem}[data-gene-ui-version=\"2.12.2\"] .option-right-elements .bc-icon-selected{transition:transform .4s}[data-gene-ui-version=\"2.12.2\"] .option-container:not(.mobile-view) .option-right-elements .bc-icon-selected{margin-inline-end:-.4rem}[data-gene-ui-version=\"2.12.2\"] .option-container:not(.active) .option-right-elements .bc-icon-selected{transform:scale(0)}[data-gene-ui-version=\"2.12.2\"] .mobile-view .bc-icon-selected{margin-inline-end:.8rem!important}[data-gene-ui-version=\"2.12.2\"] .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.2\"] .option-texts>li{flex-shrink:0}[data-gene-ui-version=\"2.12.2\"] .option-texts>li:first-child{flex:auto;overflow:hidden}[data-gene-ui-version=\"2.12.2\"] .option-texts>li.assigned-value{margin-inline-start:1rem;opacity:.7}[data-gene-ui-version=\"2.12.2\"] .option-description{font:600 1.2rem/1.6rem var(--font-family);opacity:.7}[data-gene-ui-version=\"2.12.2\"] .option-title-center{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}[data-gene-ui-version=\"2.12.2\"] .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 };