@geneui/components 2.11.1

package/Modal.js

@@ -0,0 +1,251 @@
+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 'react-dom';
+import './Icon.js';
+import './GeneUIProvider.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.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=\"2.11.0\"] .modal-splash.p-top{padding-top:0}[data-gene-ui-version=\"2.11.0\"] .modal-splash.p-bottom{padding-bottom:0}[data-gene-ui-version=\"2.11.0\"] .modal-splash.light-background{background:#fff9}[data-gene-ui-version=\"2.11.0\"] .modal-splash.dark-background{background:#0006}[data-gene-ui-version=\"2.11.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=\"2.11.0\"] .modal-content.s-default{width:35rem}[data-gene-ui-version=\"2.11.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=\"2.11.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=\"2.11.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=\"2.11.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=\"2.11.0\"] .modal-head .modal-close{top:50%;transform:translateY(-50%)}[data-gene-ui-version=\"2.11.0\"] .a-compact .modal-head{border-bottom:0;line-height:1.6rem;margin:2.6rem 0 .6rem;min-height:inherit}[data-gene-ui-version=\"2.11.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=\"2.11.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=\"2.11.0\"] .modal-footer>*{margin:0 .5rem}";
+styleInject(css_248z);
+
+const sizes = ['default', 'content-size'];
+const backgrounds = ['transparent', 'light-background', 'dark-background'];
+const appearances = ['default', 'compact'];
+const positions = ['center', 'top', 'bottom'];
+const KEYBOARD_ENTER_KEY = 13;
+const KEYBOARD_ESC_KEY = 27;
+function Modal(_ref) {
+  let {
+    visible,
+    size,
+    background,
+    appearance,
+    withPortal,
+    portalContainer,
+    customActions,
+    position,
+    closable,
+    cancelText,
+    okText,
+    title,
+    width,
+    zIndex,
+    children,
+    onOK,
+    onCancel,
+    footer,
+    isOkActive,
+    className,
+    disableFooter,
+    needEnter,
+    closeOnClickOutside,
+    onClose,
+    isOkButtonLoading,
+    ...rest
+  } = _ref;
+  const modalSplashRef = useRef(null);
+  const [mouseDown, setMouseDown] = useState(false);
+
+  // We need this 2 functions, because must be closed only when
+  // mouseDown and mouseUp are outside of modal
+  const handleMouseDown = useCallback(e => e.target === modalSplashRef.current && setMouseDown(true), [modalSplashRef.current]);
+  const handleMouseUp = useCallback(e => {
+    if (mouseDown && e.target === modalSplashRef.current) {
+      closeOnClickOutside && onCancel(e);
+      setMouseDown(false);
+    } else if (e.target !== modalSplashRef.current) {
+      setMouseDown(false);
+    }
+  }, [closeOnClickOutside, onCancel, modalSplashRef.current, mouseDown]);
+  useKeyDown(e => {
+    if (visible) {
+      e.keyCode === KEYBOARD_ESC_KEY && onCancel(e);
+      e.keyCode === KEYBOARD_ENTER_KEY && isOkActive && needEnter && onOK(e);
+    }
+  }, [visible, isOkActive, onCancel, onOK], {
+    current: window
+  }, ['Escape', 'Enter']);
+  const Content = /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames('modal-splash', "".concat(background), "a-".concat(appearance), "p-".concat(position), className),
+    onMouseDown: handleMouseDown,
+    onMouseUp: handleMouseUp,
+    style: {
+      zIndex
+    },
+    ref: modalSplashRef
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('modal-content', "s-".concat(size)),
+    style: {
+      width
+    }
+  }, closable && !title && /*#__PURE__*/React__default.createElement(Button, {
+    icon: "bc-icon-close",
+    size: "medium",
+    className: "modal-close",
+    appearance: "minimal",
+    color: "default",
+    onClick: onClose || onCancel
+  }), (title || customActions) && /*#__PURE__*/React__default.createElement("div", {
+    className: "modal-head"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "ellipsis-text"
+  }, title), closable && /*#__PURE__*/React__default.createElement(Button, {
+    icon: "bc-icon-close",
+    size: "medium",
+    className: "modal-close",
+    appearance: "minimal",
+    color: "default",
+    onClick: onClose || onCancel
+  }), customActions), children && /*#__PURE__*/React__default.createElement("div", {
+    className: "modal-body"
+  }, children), !disableFooter && /*#__PURE__*/React__default.createElement("div", {
+    className: "modal-footer"
+  }, footer || /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+    appearance: "minimal",
+    size: "medium",
+    color: "default",
+    onClick: onCancel
+  }, cancelText), /*#__PURE__*/React__default.createElement(Button, {
+    disabled: !isOkActive || isOkButtonLoading,
+    size: "medium",
+    onClick: onOK,
+    loading: isOkButtonLoading
+  }, okText)))));
+  const portalWrapper = withPortal ? /*#__PURE__*/React__default.createElement(Portal, {
+    isOpen: visible,
+    container: portalContainer
+  }, Content) : Content;
+  return visible && portalWrapper;
+}
+Modal.propTypes = {
+  /**
+   * Displays modal if [true]
+   */
+  visible: propTypesExports.bool,
+  /**
+   * Controls modal size
+   */
+  size: propTypesExports.oneOf(sizes),
+  /**
+   * Controls background color of modal
+   */
+  background: propTypesExports.oneOf(backgrounds),
+  /**
+   * Controls divider between modal's header and body
+   */
+  appearance: propTypesExports.oneOf(appearances),
+  /**
+   * Controls modal position on screen
+   */
+  position: propTypesExports.oneOf(positions),
+  /**
+   * Displays close button on modal,
+   * Fires onCancel function when clicked
+   */
+  closable: propTypesExports.bool,
+  /**
+   * Disables footer in modal
+   */
+  disableFooter: propTypesExports.bool,
+  /**
+   * Enables footers Ok button in modal
+   */
+  isOkActive: propTypesExports.bool,
+  /**
+   * Custom text for cancel button
+   */
+  cancelText: propTypesExports.string,
+  /**
+   * Custom text for ok button
+   */
+  okText: propTypesExports.string,
+  /**
+   * Custom title for modal
+   */
+  title: propTypesExports.any,
+  /**
+   * Wraps component with Portal component if [true]
+   */
+  withPortal: propTypesExports.bool,
+  portalContainer: propTypesExports.any,
+  /**
+   * Custom value to override default css value
+   */
+  width: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  /**
+   * Custom  zIndex value to overRide default css value
+   */
+  zIndex: propTypesExports.number,
+  /**
+   * Valid React elements for modal body
+   */
+  children: propTypesExports.node,
+  /**
+   * Additional classname
+   */
+  className: propTypesExports.string,
+  /**
+   * Fires event when user clicks on ok button
+   * (event: Event) => void
+   */
+  onOK: propTypesExports.func,
+  /**
+   * Fires event when user clicks on Cancel button
+   * (event: Event) => void
+   */
+  onCancel: propTypesExports.func,
+  /**
+   * Custom footer element for modal
+   */
+  footer: propTypesExports.element,
+  /**
+   * Pass [true] if you need to hide a modal when people click outside of it's content
+   */
+  closeOnClickOutside: propTypesExports.bool,
+  /**
+   * Custom action elements for modal's header
+   */
+  customActions: propTypesExports.node,
+  /**
+   * Enable keyboard Enter
+   */
+  needEnter: propTypesExports.bool,
+  /**
+   * Fires event when user clicks on Close icon
+   * (event: Event) => void
+   */
+  onClose: propTypesExports.func,
+  /**
+   * Loader for ok button
+   */
+  isOkButtonLoading: propTypesExports.bool
+};
+Modal.defaultProps = {
+  visible: false,
+  size: sizes[0],
+  onOK: noop,
+  onCancel: noop,
+  background: backgrounds[2],
+  appearance: appearances[0],
+  position: positions[0],
+  closable: true,
+  cancelText: 'Cancel',
+  okText: 'OK',
+  closeOnClickOutside: true,
+  isOkActive: true,
+  disableFooter: false,
+  needEnter: true,
+  isOkButtonLoading: false
+};
+
+export { Modal as default };

package/ModuleTitle.js

@@ -0,0 +1,99 @@
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-e0af0caf.js';
+import './index-6ff23041.js';
+import './configs-91c86664.js';
+import './index-ac59cb10.js';
+import './Icon.js';
+import './globalStyling-9c60a159.js';
+export { M as default } from './index-0cf65939.js';
+import './Grid.js';
+import './Tabs.js';
+import './Steps.js';
+import './Timeline.js';
+import './RadioGroup.js';
+import './Checkbox.js';
+import './Card.js';
+import './Tag.js';
+import './Alert.js';
+import './Tooltip.js';
+import './index-00fe8887.js';
+import './Slider.js';
+import './Pagination.js';
+import './ExtendedInput.js';
+import './Editor.js';
+import './ValidatableUploader.js';
+import './ValidatableRadio.js';
+import './ValidatableCheckbox.js';
+import './ValidatableSwitcher.js';
+import './ValidatableNumberInput.js';
+import './ValidatableTextInput.js';
+import './ValidatableDatePicker.js';
+import './Notification.js';
+import './Modal.js';
+import './Collapse.js';
+import './Status.js';
+import './Menu.js';
+import './Progress.js';
+import './MobileNavigation.js';
+import './MobilePopup.js';
+import './index-d9e8a888.js';
+import './Products.js';
+import './Search.js';
+import './index-5e722d91.js';
+import './Breadcrumb.js';
+import './Section.js';
+import './ColorPicker.js';
+import './NavigationMenu.js';
+import './Textarea.js';
+import './AdvancedSearch.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './style-inject.es-746bb8ed.js';
+import './useEllipsisDetection-ef536015.js';
+import './Switcher.js';
+import './useKeyDown-38102ae7.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+import './useMount-6fef51a5.js';
+import './objectWithoutPropertiesLoose-299691d8.js';
+import './rangeAndSlider-20599da4.js';
+import './clsx.m-2bb6df4b.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './useClickOutside-5183e396.js';
+import './index-a4635754.js';
+import './Popover-f4d1cac0.js';
+import './index-122432cd.js';
+import './GeneUIProvider.js';
+import './Portal.js';
+import './Scrollbar.js';
+import './index-5cea9a7d.js';
+import './BusyLoader.js';
+import './index-702bf24a.js';
+import './debounce-4419bc2f.js';
+import './Empty.js';
+import './index-a59530cd.js';
+import './Button.js';
+import './Divider.js';
+import './Avatar.js';
+import './TextLink.js';
+import './Label.js';
+import './Radio.js';
+import './Paper.js';
+import './Badge.js';
+import './configs.js';
+import './SkeletonLoader.js';
+import './Time.js';
+import './localization-4ba17032.js';
+import './Title.js';
+import './Image.js';
+import './KeyValue.js';
+import './Option.js';
+import './index-b7a33c58.js';
+import './QRCode.js';
+import './useWidth-9f4647f8.js';
+import './checkTimeValidation-e56771be.js';
+import './DatePicker.js';
+import './LinkButton.js';

package/NavigationMenu.js

@@ -0,0 +1,212 @@
+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 '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';
+
+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];
+  }
+};
+const getTitlesArray = (ids, data) => ids.map(id => getTitle(id, data)).filter(Boolean);
+const navigationOptionsToMenuMenu = navigationOptions => navigationOptions.map(_ref => {
+  let {
+    data,
+    ...rest
+  } = _ref;
+  return {
+    ...rest,
+    ...(data ? {
+      children: navigationOptionsToMenuMenu(data)
+    } : {})
+  };
+});
+const indexStackFromItems = (stack, items, selectedItemId) => {
+  if (!(items !== null && items !== void 0 && items.length)) {
+    return [];
+  }
+  for (const itemIndex in items) {
+    const item = items[itemIndex];
+    if (item.id === selectedItemId) {
+      return stack;
+    }
+    if (item.children) {
+      const currentIndexStack = indexStackFromItems([...stack, Number(itemIndex)], item.children, selectedItemId);
+      if (currentIndexStack.length) {
+        return currentIndexStack;
+      }
+    }
+  }
+  return [];
+};
+
+function NavigationMenuContent(_ref) {
+  let {
+    depth,
+    path,
+    options,
+    onChange,
+    splitedValue
+  } = _ref;
+  const [activeItem, setActiveItem] = useState();
+  const navigationRef = useRef(null);
+  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 initialIndexStack = useMemo(() => indexStackFromItems([], mobileOptions, optionId), [mobileOptions, activeItem]);
+  const {
+    isMobile
+  } = useDeviceType();
+  const onMouseEnterHandler = useCallback(debounce(_ref2 => {
+    let {
+      isColaps,
+      item
+    } = _ref2;
+    if (!isHovered.current) return;
+    isColaps ? setActiveItem(item) : setActiveItem(null);
+  }, 200), [isHovered, setActiveItem]);
+  useEffect(() => {
+    if (optionId && options !== null && options !== void 0 && options.length) {
+      const item = options.find(item => item.id === optionId);
+      item && setActiveItem(item);
+    }
+  }, [optionId, options]);
+  const onItemClick = item => {
+    onChange(path ? "".concat(path, "/").concat(item.id) : item.id, item);
+    setActiveItem(item);
+  };
+  if (isMobile) {
+    return /*#__PURE__*/React__default.createElement(Menu, {
+      data: mobileOptions,
+      onSelect: (_, item) => onItemClick(item),
+      selectedItem: activeItem,
+      initialIndexStack: initialIndexStack
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (options === null || options === void 0 ? void 0 : options.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
+    className: "bc-navigation-menu_content-menu",
+    ref: navigationRef,
+    onMouseEnter: () => isHovered.current = true,
+    onMouseLeave: () => isHovered.current = false
+  }, options.map(item => {
+    const isColaps = !!(item.data && item.data.length);
+    return item.isHidden !== true && /*#__PURE__*/React__default.createElement(Option, _extends({}, item, {
+      key: item.id,
+      active: optionId === item.id,
+      forwardMark: isColaps,
+      onClick: () => !isColaps && onItemClick(item),
+      onMouseEnter: () => onMouseEnterHandler({
+        isColaps,
+        item
+      })
+    }));
+  })), activeItem && /*#__PURE__*/React__default.createElement(NavigationMenuContent, {
+    depth: depth + 1,
+    path: path ? "".concat(path, "/").concat(activeItem.id) : activeItem.id,
+    options: activeItem.data,
+    onChange: onChange,
+    splitedValue: isActiveItem && splitedValue
+  }));
+}
+NavigationMenuContent.defaultProps = {
+  depth: 0
+};
+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}";
+styleInject(css_248z);
+
+function NavigationMenu(_ref) {
+  let {
+    data,
+    value,
+    onChange,
+    disabled
+  } = _ref;
+  const [isOpen, setIsOpen] = useState(false);
+  const splitedValue = useMemo(() => value && value.split('/').filter(Boolean), [value]);
+  const title = useMemo(() => getTitlesArray(splitedValue, data), [splitedValue, data]);
+  const handleChange = useCallback(function () {
+    setIsOpen(false);
+    onChange(...arguments);
+  }, [onChange]);
+  const handleToggle = useCallback(() => setIsOpen(prev => !prev), []);
+  return /*#__PURE__*/React__default.createElement(Popover, {
+    isOpen: isOpen,
+    extendTargetWidth: false,
+    toggleHandler: handleToggle,
+    fullHeight: true,
+    children: /*#__PURE__*/React__default.createElement("button", {
+      className: "bc-navigation-menu",
+      disabled: disabled
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "bc-navigation-menu_head"
+    }, title.map((item, index) => /*#__PURE__*/React__default.createElement("span", {
+      key: index,
+      className: "bc-navigation-menu_layer"
+    }, item))), /*#__PURE__*/React__default.createElement(Icon, {
+      type: "bc-icon-arrow-down"
+    })),
+    Content: /*#__PURE__*/React__default.createElement("div", {
+      className: "bc-navigation-menu_content"
+    }, /*#__PURE__*/React__default.createElement(NavigationMenuContent$1, {
+      options: data,
+      onChange: handleChange,
+      splitedValue: splitedValue
+    }))
+  });
+}
+NavigationMenu.propTypes = {
+  /**
+   * This is where you send data (options) for the menu, if you need to send
+   * 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,
+  /**
+   * 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,
+  /**
+   * 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,
+  /**
+   * Disabled status for the navigation menu button
+   */
+  disabled: propTypesExports.bool
+};
+NavigationMenu.defaultProps = {
+  onChange: noop
+};
+
+export { NavigationMenu as default };

package/Notification.js

@@ -0,0 +1,120 @@
+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 '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';
+
+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}";
+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: propTypesExports.oneOf(notificationTypes),
+  /**
+   * If true displays close button
+   */
+  closable: propTypesExports.bool,
+  /**
+   * CSS class name for element
+   */
+  className: propTypesExports.string,
+  /**
+   * Fires event when user clicks on close button
+   * (event: Event) => void
+   */
+  onClose: propTypesExports.func,
+  /**
+   * Custom content form notification
+   */
+  content: propTypesExports.element,
+  /**
+   * Fires when user click on notification modal
+   * (event: Event) => void
+   */
+  onContentClick: propTypesExports.func,
+  /**
+   * Heading text for notification modal
+   */
+  heading: propTypesExports.string,
+  /**
+   * Descriptions text fro notification
+   */
+  description: propTypesExports.string,
+  /**
+   * Controls screen type
+   */
+  screenType: propTypesExports.oneOf(screenTypes),
+  /**
+   * Additional heading text for notification
+   */
+  additionalHeading: propTypesExports.string,
+  /**
+   * Notification icon
+   */
+  notificationIcon: propTypesExports.string.isRequired,
+  /**
+   * Additional info for notification
+   */
+  additionalDescription: propTypesExports.string,
+  /**
+   * Title for notification
+   */
+  title: propTypesExports.string.isRequired
+};
+Notification.defaultProps = {
+  type: notificationTypes[0],
+  closable: false
+};
+
+export { Notification as default, notificationTypes };