@geneui/components 2.11.1

package/Alert.js

@@ -0,0 +1,98 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import { s as screenTypes } from './configs-91c86664.js';
+import './dateValidation-67caec66.js';
+import 'react-dom';
+import { u as useDeviceType } from './useDeviceType-dd51db38.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\"] .alert-holder{background:var(--background);border-radius:.6rem;width:100%;word-break:break-word}[data-gene-ui-version=\"2.11.0\"] .toaster-holder.top .alert-holder.mobile-view:first-child,[data-gene-ui-version=\"2.11.0\"] .toaster-holder.top .alert-holder.mobile-view:first-child .alert-box{border-top-left-radius:0;border-top-right-radius:0}[data-gene-ui-version=\"2.11.0\"] .toaster-holder.bottom .alert-holder.mobile-view:last-child,[data-gene-ui-version=\"2.11.0\"] .toaster-holder.bottom .alert-holder.mobile-view:last-child .alert-box{border-bottom-left-radius:0;border-bottom-right-radius:0}[data-gene-ui-version=\"2.11.0\"] .alert-box{background:rgba(var(--confirm-rgb),.1);border:1px solid var(--confirm);border-radius:.6rem;display:flex;min-height:4.2rem;padding:.8rem .7rem;width:100%}[data-gene-ui-version=\"2.11.0\"] .alert-box.type-info{--confirm:var(--hero);--confirm-hover:var(--hero-hover);--confirm-sc:var(--hero-sc);--confirm-rgb:var(--hero-rgb);--confirm-sc-rgb:var(--hero-sc-rgb)}[data-gene-ui-version=\"2.11.0\"] .alert-box.type-warning{--confirm:var(--warning);--confirm-hover:var(--warning-hover);--confirm-sc:var(--warning-sc);--confirm-rgb:var(--warning-rgb);--confirm-sc-rgb:var(--warning-sc-rgb)}[data-gene-ui-version=\"2.11.0\"] .alert-box.type-error{--confirm:var(--danger);--confirm-hover:var(--danger-hover);--confirm-sc:var(--danger-sc);--confirm-rgb:var(--danger-rgb);--confirm-sc-rgb:var(--danger-sc-rgb)}[data-gene-ui-version=\"2.11.0\"] .alert-box.type-note{--confirm:var(--note);--confirm-hover:var(--note-hover);--confirm-sc:var(--note-sc);--confirm-rgb:var(--note-rgb);--confirm-sc-rgb:var(--note-sc-rgb)}[data-gene-ui-version=\"2.11.0\"] .alert-box.type-message{--confirm:var(--message);--confirm-hover:var(--message-hover);--confirm-sc:var(--message-sc);--confirm-rgb:var(--message-rgb);--confirm-sc-rgb:var(--message-sc-rgb)}[data-gene-ui-version=\"2.11.0\"] .alert-holder.mobile-view .alert-box{border-bottom-color:rgba(var(--background-sc-rgb),.1);border-width:0 0 1px}[data-gene-ui-version=\"2.11.0\"] .toaster-holder:not(.top,.bottom,.center) .alert-holder.mobile-view .alert-box{border-radius:0}[data-gene-ui-version=\"2.11.0\"] .alert-box>li{flex-shrink:0;padding:0 .7rem}[data-gene-ui-version=\"2.11.0\"] .alert-box>li.ab-c-c{align-self:center;flex:auto;margin:.4rem 0}[data-gene-ui-version=\"2.11.0\"] .alert-box>li.ab-bc-icon-c{max-width:100%}[data-gene-ui-version=\"2.11.0\"] .alert-box>li a,[data-gene-ui-version=\"2.11.0\"] .alert-box>li.ab-bc-icon-c{color:var(--confirm)}[data-gene-ui-version=\"2.11.0\"] .alert-box .bc-icon-close{cursor:pointer}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .alert-box .bc-icon-close:hover{color:var(--confirm)}}[data-gene-ui-version=\"2.11.0\"] .alert-box a{color:var(--hero);font-weight:600}[data-gene-ui-version=\"2.11.0\"] .alert-box-title{font:600 1.4rem/1.8rem var(--font-family)}[data-gene-ui-version=\"2.11.0\"] .alert-text{font:600 1.2rem/1.42 var(--font-family);margin:.8rem 0 0}";
+styleInject(css_248z);
+
+const alertTypes = ['success', 'info', 'warning', 'error', 'note', 'message'];
+function Alert(_ref) {
+  let {
+    type,
+    title,
+    onClose,
+    message,
+    screenType,
+    iconProps,
+    swapIcon,
+    className,
+    ...rest
+  } = _ref;
+  const {
+    isMobile
+  } = useDeviceType(screenType);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames('alert-holder', {
+      'mobile-view': isMobile
+    }, className)
+  }, rest), /*#__PURE__*/React__default.createElement("ul", {
+    className: classnames('alert-box', "type-".concat(type))
+  }, (swapIcon || iconProps) && /*#__PURE__*/React__default.createElement("li", {
+    className: "ab-bc-icon-c"
+  }, swapIcon || /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-".concat(type === 'warning' ? 'info' : type).concat(iconProps.isFilled ? '-fill' : '')
+  })), /*#__PURE__*/React__default.createElement("li", {
+    className: "ab-c-c"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "alert-box-title"
+  }, title), message && /*#__PURE__*/React__default.createElement("div", {
+    className: "alert-text"
+  }, message)), !!onClose && /*#__PURE__*/React__default.createElement("li", {
+    className: "ab-action-c",
+    onClick: onClose
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-close"
+  }))));
+}
+Alert.propTypes = {
+  /**
+   * Alert type is for specifying information message to be delivered. Also a corresponding "Icon" atom will be displayed
+   */
+  type: propTypesExports.oneOf(alertTypes),
+  /**
+   * Main field to describe alert information. Any valid React node
+   */
+  title: propTypesExports.node.isRequired,
+  /**
+   * Additional classname
+   */
+  className: propTypesExports.string,
+  /**
+   * Use this field for describing information more verbose. Any valid React node
+   */
+  message: propTypesExports.node,
+  /**
+   * The switch between mobile and desktop version of Alert will be applied automatically, when the prop is not specified.
+   * When the prop is present it must be changed from outside.
+   */
+  screenType: propTypesExports.oneOf(screenTypes),
+  /**
+   * When function is passed an "Icon" atom("type": "bc-icon-close") will be displayed((event: Event) => void).
+   */
+  onClose: propTypesExports.func,
+  /**
+   * Same as "Icon" atom props
+   */
+  iconProps: propTypesExports.shape({
+    ...Icon.propTypes
+  }),
+  /**
+   * Use this prop for replace main "Icon". Note that when the prop is specified "type" prop will not work(will be overlooked).
+   */
+  swapIcon: propTypesExports.node
+};
+Alert.defaultProps = {
+  type: 'info'
+};
+
+export { alertTypes, Alert as default };

package/Avatar.js

@@ -0,0 +1,77 @@
+import React__default from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import { g as getInitials, n as noop } from './index-ac59cb10.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';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .user-avatar-c{--size:2.6rem;background:var(--background-sc) no-repeat 50% 50%/cover;border-radius:.3rem;box-shadow:0 0 0 0 rgba(var(--background-sc-rgb),.2);color:var(--background);font:600 calc(var(--size)/2.3)/var(--size) var(--font-family);height:var(--size);text-align:center;transition:box-shadow .3s;width:var(--size)}[data-gene-ui-version=\"2.11.0\"] .user-avatar-c.clickable{cursor:pointer}[data-gene-ui-version=\"2.11.0\"] .user-avatar-c.clickable:hover{box-shadow:0 0 0 .3rem rgba(var(--background-sc-rgb),.2)}[data-gene-ui-version=\"2.11.0\"] .user-avatar-c:not(.color-default){background:var(--background) no-repeat 50% 50%/cover;box-shadow:0 0 0 0 rgba(var(--background-rgb),.2);color:var(--background-sc)}[data-gene-ui-version=\"2.11.0\"] .user-avatar-c:not(.color-default).clickable:hover{box-shadow:0 0 0 .3rem rgba(var(--background-rgb),.2)}[data-gene-ui-version=\"2.11.0\"] .user-avatar-c.color-green{--background:var(--confirm);--background-hover:var(--confirm-hover);--background-sc:var(--confirm-sc);--background-rgb:var(--confirm-rgb);--background-sc-rgb:var(--confirm-sc-rgb)}[data-gene-ui-version=\"2.11.0\"] .user-avatar-c.color-red{--background:var(--danger);--background-hover:var(--danger-hover);--background-sc:var(--danger-sc);--background-rgb:var(--danger-rgb);--background-sc-rgb:var(--danger-sc-rgb)}[data-gene-ui-version=\"2.11.0\"] .user-avatar-c.shape-circle{border-radius:100%}[data-gene-ui-version=\"2.11.0\"] .user-avatar-c.text-small{font-size:calc(var(--size)/2.5)}[data-gene-ui-version=\"2.11.0\"] .user-avatar-c[class*=bc-icon-]{font-size:calc(var(--size)/2);line-height:var(--size)}[data-gene-ui-version=\"2.11.0\"] .user-avatar-c.size-small{--size:2.2rem}[data-gene-ui-version=\"2.11.0\"] .user-avatar-c.size-medium{--size:3.6rem}[data-gene-ui-version=\"2.11.0\"] .user-avatar-c.size-big{--size:4.6rem}";
+styleInject(css_248z);
+
+function Avatar(_ref) {
+  let {
+    src,
+    icon,
+    size,
+    color,
+    shape,
+    onClick,
+    children
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('user-avatar-c', {
+      ["size-".concat(size)]: size,
+      ["color-".concat(color)]: color,
+      ["shape-".concat(shape)]: shape,
+      [icon]: !src && icon,
+      'text-small': typeof children === 'string' && children.length > 1,
+      clickable: !!onClick
+    }),
+    style: {
+      backgroundImage: src ? "url(".concat(src, ")") : ''
+    },
+    onClick: onClick
+  }, !src && !icon && children && getInitials(children));
+}
+Avatar.propTypes = {
+  /**
+   * Background image source
+   */
+  src: propTypesExports.string,
+  /**
+   * The property will show icon. This property will work when "src" is not specified.
+   */
+  icon: propTypesExports.string,
+  /**
+   * The property will show first two letters in upper case. This will work when "src" or "icon" are not specified.
+   */
+  children: propTypesExports.string,
+  /**
+   * Avatar size
+   */
+  size: propTypesExports.oneOf(['small', 'default', 'medium', 'big']),
+  /**
+   * Avatar color
+   */
+  color: propTypesExports.oneOf(['default', 'green', 'red']),
+  /**
+   * Avatar shape
+   */
+  shape: propTypesExports.oneOf(['circle', 'square']),
+  /**
+   *
+   * Handle click event on avatar component((event: Event) => void 0).
+   */
+  onClick: propTypesExports.func
+};
+Avatar.defaultProps = {
+  onClick: noop,
+  size: 'default',
+  color: 'default',
+  shape: 'circle'
+};
+
+export { Avatar as default };

package/Badge.js

@@ -0,0 +1,76 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useMemo } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import { badgeConfig } from './configs.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .badge{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;position:relative}[data-gene-ui-version=\"2.11.0\"] .badge__content{background:var(--danger);border-radius:3rem;color:var(--danger-sc);display:block;font:600 1rem/1.6rem var(--font-family);min-width:1.6rem;padding:0 .5rem;text-align:center}[data-gene-ui-version=\"2.11.0\"] .badge__content-children{position:absolute;top:-.8rem}html:not([dir=rtl]) .badge__content-children{right:-.8rem}html[dir=rtl] .badge__content-children{left:-.8rem}[data-gene-ui-version=\"2.11.0\"] .badge__content-dot{height:1rem;min-height:1rem;min-width:1rem;top:-.5rem;width:1rem}html:not([dir=rtl]) .badge__content-dot{right:-.5rem}html[dir=rtl] .badge__content-dot{left:-.5rem}[data-gene-ui-version=\"2.11.0\"] .badge__content-medium{line-height:1.8rem;min-height:1.8rem;min-width:1.8rem}[data-gene-ui-version=\"2.11.0\"] .badge__content-big{line-height:2.2rem;min-height:2.2rem;min-width:2.2rem}[data-gene-ui-version=\"2.11.0\"] .badge__content-huge{font-size:1.3rem;line-height:2.6rem;min-height:2.6rem;min-width:2.6rem}[data-gene-ui-version=\"2.11.0\"] .badge__content-big,[data-gene-ui-version=\"2.11.0\"] .badge__content-huge,[data-gene-ui-version=\"2.11.0\"] .badge__content-medium{top:-1rem}html:not([dir=rtl]) .badge__content-big,html:not([dir=rtl]) .badge__content-huge,html:not([dir=rtl]) .badge__content-medium{right:-1rem}html[dir=rtl] .badge__content-big,html[dir=rtl] .badge__content-huge,html[dir=rtl] .badge__content-medium{left:-1rem}[data-gene-ui-version=\"2.11.0\"] .badge__content-primary{background:var(--hero)}";
+styleInject(css_248z);
+
+const getShowValue = (count, maxCount) => {
+  if (count !== 0 && !count) return null;
+  if (!maxCount) return count;
+  return count > maxCount ? "".concat(maxCount, "+") : count;
+};
+function Badge(_ref) {
+  let {
+    children,
+    size,
+    color,
+    count,
+    dot,
+    maxCount,
+    className,
+    ...restProps
+  } = _ref;
+  const show = useMemo(() => dot ? '' : getShowValue(count, maxCount), [dot, count, maxCount]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: "badge"
+  }, restProps), show !== null && /*#__PURE__*/React__default.createElement("span", {
+    className: classnames('badge__content', className, {
+      ["badge__content-".concat(size)]: size,
+      ["badge__content-".concat(color)]: color,
+      ["badge__content-dot"]: dot,
+      ["badge__content-children"]: children
+    })
+  }, show), children);
+}
+Badge.propTypes = {
+  /**
+   * Any valid React node
+   */
+  children: propTypesExports.node,
+  /**
+   * Any custom class name
+   */
+  className: propTypesExports.string,
+  /**
+   * Badge size
+   */
+  size: propTypesExports.oneOf(badgeConfig.size),
+  /**
+   * Badge color
+   */
+  color: propTypesExports.oneOf(badgeConfig.color),
+  /**
+   * Shows the specified number on the badge
+   */
+  count: propTypesExports.number,
+  /**
+   * Set this property to have only dot instead of number
+   */
+  dot: propTypesExports.bool,
+  /**
+   * When the "count" is greater than "maxCount" Badge will show "maxCount" value and "+"
+   */
+  maxCount: propTypesExports.number
+};
+Badge.defaultProps = {
+  dot: false,
+  size: badgeConfig.size[0],
+  color: badgeConfig.color[0]
+};
+
+export { Badge as default };

package/Breadcrumb.js

@@ -0,0 +1,128 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useState, useCallback, Fragment } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import { n as noop } from './index-ac59cb10.js';
+import Button from './Button.js';
+import { P as Popover } from './index-a4635754.js';
+import Icon from './Icon.js';
+import Menu from './Menu.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 './Popover-f4d1cac0.js';
+import './index-122432cd.js';
+import './useDeviceType-dd51db38.js';
+import './configs-91c86664.js';
+import './useWindowSize-80369d76.js';
+import './GeneUIProvider.js';
+import './Portal.js';
+import './Scrollbar.js';
+import './guid-8ddf77b3.js';
+import './Option.js';
+import './useEllipsisDetection-ef536015.js';
+import './Tooltip.js';
+
+function BreadcrumbItem(_ref) {
+  let {
+    data,
+    active,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("button", {
+    onClick: onClick,
+    className: classnames('breadcrumbs-link', {
+      active
+    })
+  }, data.title);
+}
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .bread-crumbs-holder{align-items:center;display:flex;font-weight:600;justify-content:flex-start;min-height:3.6rem;width:100%}[data-gene-ui-version=\"2.11.0\"] .bread-crumbs-holder>*+:not(button){margin:0 0 0 1rem}html[dir=rtl] .bread-crumbs-holder>*+:not(button){margin:0 1rem 0 0}[data-gene-ui-version=\"2.11.0\"] .bread-crumbs-holder>button{margin:0 .4rem}[data-gene-ui-version=\"2.11.0\"] .bread-crumbs-holder>button+.icon,html[dir=rtl] .bread-crumbs-holder>button+.icon{margin:0}[data-gene-ui-version=\"2.11.0\"] .breadcrumbs-link{color:inherit;cursor:pointer}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .breadcrumbs-link:hover{color:var(--hero)}}[data-gene-ui-version=\"2.11.0\"] .breadcrumbs-link.active{color:var(--hero)}";
+styleInject(css_248z);
+
+function Breadcrumb(_ref) {
+  let {
+    data,
+    onClick,
+    collapsed,
+    className,
+    separator,
+    ...restProps
+  } = _ref;
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [firstItem, ...others] = data;
+  const handlePopoverItemClick = useCallback((_, item) => {
+    onClick(item);
+    setIsPopoverOpen(false);
+  }, [onClick]);
+  const handlePopoverToggle = useCallback(() => {
+    setIsPopoverOpen(prev => !prev);
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames('bread-crumbs-holder', className)
+  }, restProps), collapsed && data.length > 4 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+    onClick: () => onClick(firstItem),
+    data: firstItem
+  }), separator, /*#__PURE__*/React__default.createElement(Popover, {
+    isOpen: isPopoverOpen,
+    align: "start",
+    extendTargetWidth: false,
+    Content: /*#__PURE__*/React__default.createElement(Menu, {
+      onSelect: handlePopoverItemClick,
+      data: others.slice(0, -2)
+    })
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    onClick: handlePopoverToggle,
+    icon: "bc-icon-more-horizontal",
+    appearance: "minimal",
+    color: "default"
+  })), separator, others.slice(-2).map((item, i) => /*#__PURE__*/React__default.createElement(Fragment, {
+    key: item.slug
+  }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+    onClick: () => onClick(item),
+    active: i === 1,
+    key: item.slug,
+    data: item
+  }), i !== 1 && separator))) : data.map((item, i) => /*#__PURE__*/React__default.createElement(Fragment, {
+    key: item.slug
+  }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+    onClick: () => onClick(item),
+    active: data.length - 1 === i,
+    data: item
+  }), data.length - 1 !== i && separator)));
+}
+Breadcrumb.propTypes = {
+  /**
+   * Data items to display
+   */
+  data: propTypesExports.arrayOf(propTypesExports.shape({
+    title: propTypesExports.node.isRequired
+  })).isRequired,
+  /**
+   * Additional className
+   */
+  className: propTypesExports.string,
+  /**
+   * Breadcrumbs will render collapsed view when "data" length is greater than 4, when set to "true"
+   */
+  collapsed: propTypesExports.bool,
+  /**
+   * Fires an event on breadcrumb item click((item: data[item] => void))
+   */
+  onClick: propTypesExports.func,
+  /**
+   * Use this prop to define the middle component between breadcrumb items.
+   */
+  separator: propTypesExports.node
+};
+Breadcrumb.defaultProps = {
+  collapsed: false,
+  onClick: noop,
+  separator: /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-arrow-right"
+  })
+};
+
+export { Breadcrumb as default };

package/BusyLoader.js

@@ -0,0 +1,69 @@
+import React__default from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import Icon from './Icon.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .loader-holder{align-items:center;color:var(--hero);display:flex;flex-direction:column;margin:auto;position:relative;text-align:center}[data-gene-ui-version=\"2.11.0\"] .loader-holder.p-static{margin:6rem}[data-gene-ui-version=\"2.11.0\"] .loader-holder.p-absolute{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}[data-gene-ui-version=\"2.11.0\"] .loader-holder .s-medium{font-size:2.8rem}[data-gene-ui-version=\"2.11.0\"] .loader-holder .s-big{font-size:5.4rem}[data-gene-ui-version=\"2.11.0\"] .loader-text{font:600 1.6rem/2rem var(--font-family);margin:1rem 0 0}[data-gene-ui-version=\"2.11.0\"] .bubble-loader{animation:sk-rotate 2s linear infinite;height:6.6rem;position:relative;width:6.6rem}@keyframes sk-rotate{to{transform:rotate(1turn)}}[data-gene-ui-version=\"2.11.0\"] .bubble-loader .dot{animation:sk-bounce 2s ease-in-out infinite;background:var(--hero);border-radius:100%;height:60%;position:absolute;top:0;width:60%}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}[data-gene-ui-version=\"2.11.0\"] .bubble-loader .dot2{animation-delay:-1s;bottom:0;top:auto}[data-gene-ui-version=\"2.11.0\"] .bar-loader{height:.6rem;left:0;overflow:hidden;position:fixed;top:calc(var(--header-height, .6rem) - .6rem);width:100%}[data-gene-ui-version=\"2.11.0\"] .bar-loader:before{animation:bar-loader .8s linear infinite;background:linear-gradient(270deg,#7eb8ff 30%,#8d14e6 50%,#7eb8ff 70%) no-repeat 50% 50%/100vw .6rem;content:\"\";display:block;height:100%;left:50%;max-width:0;opacity:0;overflow:hidden;position:absolute;top:0;transform:translateX(-50%);width:100%}@keyframes bar-loader{0%,to{opacity:0}10%,90%{opacity:1}0%{max-width:0}to{max-width:100%}}";
+styleInject(css_248z);
+
+function BubbleLoader() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "bubble-loader"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "dot dot1"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "dot dot2"
+  }));
+}
+function BusyLoader(props) {
+  const {
+    type,
+    isBusy,
+    children,
+    className,
+    loadingText,
+    spinnerSize
+  } = props;
+  return type === 'bar' ? /*#__PURE__*/React__default.createElement("div", {
+    className: "bar-loader"
+  }) : isBusy ? /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('loader-holder', className)
+  }, type === 'spinner' ? /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-loader s-".concat(spinnerSize)
+  }) : /*#__PURE__*/React__default.createElement(BubbleLoader, null), loadingText && /*#__PURE__*/React__default.createElement("div", {
+    className: "loader-text"
+  }, loadingText)) : children;
+}
+BusyLoader.propTypes = {
+  /**
+   * Show loader
+   */
+  isBusy: propTypesExports.bool,
+  /**
+   * Any valid React node. Renders when "isBusy" is set to false
+   */
+  children: propTypesExports.node,
+  /**
+   * Show some text when loading
+   */
+  loadingText: propTypesExports.string,
+  /**
+   * Loader available type/style
+   */
+  type: propTypesExports.oneOf(['spinner', 'bubbles', 'bar']),
+  /**
+   * Loader size
+   */
+  spinnerSize: propTypesExports.oneOf(['small', 'medium', 'big'])
+};
+BusyLoader.defaultProps = {
+  isBusy: true,
+  children: null,
+  type: 'spinner',
+  spinnerSize: 'small'
+};
+
+export { BusyLoader as default };

package/Button.js

@@ -0,0 +1,130 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import Icon from './Icon.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .btn{--size:3.6rem;align-items:center;border:1px solid #0000;border-radius:var(--button-external-border-radius,var(--button-external-size,var(--size)));color:inherit;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));position:relative;transition:color .3s,background .3s,opacity .2s;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.11.0\"] .btn:focus-visible{border-radius:var(--button-external-border-radius,var(--button-external-size,var(--size)));outline:.2rem var(--hero) solid}[data-gene-ui-version=\"2.11.0\"] .btn:disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .btn.s-medium{--size:3.2rem;font-size:1.2rem}[data-gene-ui-version=\"2.11.0\"] .btn.s-big{--size:4.2rem}[data-gene-ui-version=\"2.11.0\"] .btn.cr-smooth{border-radius:var(--button-external-border-radius,.4rem)}[data-gene-ui-version=\"2.11.0\"] .btn>*+*{margin:0 0 0 .4rem}html[dir=rtl] .btn>*+*{margin:0 .4rem 0 0}[data-gene-ui-version=\"2.11.0\"] .btn.id-end{flex-direction:row-reverse}[data-gene-ui-version=\"2.11.0\"] .btn.id-end>*+*{margin:0 .7rem 0 0}html[dir=rtl] .btn.id-end>*+*{margin:0 0 0 .7rem}[data-gene-ui-version=\"2.11.0\"] .btn:not(.c-icon){padding:0 2rem}[data-gene-ui-version=\"2.11.0\"] .btn:not(.c-icon).f-content-size{padding:0 1.3rem}[data-gene-ui-version=\"2.11.0\"] .btn:not(.c-icon).f-default{min-width:10rem}[data-gene-ui-version=\"2.11.0\"] .btn:not(.c-icon).f-full-width{width:100%}[data-gene-ui-version=\"2.11.0\"] .btn:not(.c-icon).loading-padding{padding:0 .6rem}[data-gene-ui-version=\"2.11.0\"] .btn.c-confirm{--hero:var(--confirm);--hero-sc:var(--confirm-sc);--hero-hover:var(--confirm-hover)}[data-gene-ui-version=\"2.11.0\"] .btn.c-danger{--hero:var(--danger);--hero-sc:var(--danger-sc);--hero-hover:var(--danger-hover)}[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-outline{border-color:var(--hero);color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-outline:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-outline:active{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-minimal:not(.c-default){color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-minimal:hover{background:rgba(var(--background-sc-rgb),.03)}}[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-minimal.active{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-grayscale:not(:disabled){background:rgba(var(--background-sc-rgb),.01)}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-grayscale:not(:disabled):hover{background:rgba(var(--background-sc-rgb),.03)}}[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-grayscale:not(:disabled).active{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-grayscale:not(.c-default){color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-clean:not(.c-default){color:rgba(var(--background-sc-rgb),.6)}[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-clean:not(:disabled){background:rgba(var(--hero-rgb),.1);color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-clean:not(:disabled):hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.11.0\"] .btn:not(.active).a-clean:not(:disabled).active{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.11.0\"] .btn:not(.a-grayscale).with-shadow{box-shadow:0 .2rem .4rem 0 #0000001a}[data-gene-ui-version=\"2.11.0\"] .btn.a-grayscale:not(:disabled){box-shadow:0 1px 0 0 #00000029}[data-gene-ui-version=\"2.11.0\"] .btn.a-default,[data-gene-ui-version=\"2.11.0\"] .btn.active{background:var(--hero);color:var(--hero-sc)}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .btn.a-default:hover,[data-gene-ui-version=\"2.11.0\"] .btn.active:hover{background:var(--hero-hover)}}[data-gene-ui-version=\"2.11.0\"] .btn.loading-state>:not(.btn-loader-holder){color:#0000!important}[data-gene-ui-version=\"2.11.0\"] .btn .btn-loader-holder{left:50%;margin:0;position:absolute;top:50%;transform:translate(-50%,-50%)}";
+styleInject(css_248z);
+
+const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    appearance,
+    size,
+    flexibility,
+    color,
+    itemsDirection,
+    cornerRadius,
+    icon,
+    active,
+    className,
+    withShadow,
+    loading,
+    ariaLabel,
+    ...restProps
+  } = _ref;
+  const noChildren = !children && children !== 0;
+  return /*#__PURE__*/React__default.createElement("button", _extends({
+    className: classnames('btn', className, "a-".concat(appearance), "s-".concat(size), "f-".concat(flexibility), "c-".concat(color), "id-".concat(itemsDirection), "cr-".concat(cornerRadius), {
+      active,
+      'c-icon': !!icon && noChildren,
+      'with-shadow': withShadow,
+      'loading-padding': !noChildren && !icon && loading
+    }),
+    ref: ref
+  }, ariaLabel ? {
+    'aria-label': ariaLabel
+  } : {}, restProps), icon && (loading ? /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-loader"
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    type: icon
+  })), !noChildren && (!icon && loading ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-loader"
+  }), /*#__PURE__*/React__default.createElement("span", null, children)) : /*#__PURE__*/React__default.createElement("span", {
+    className: "ellipsis-text"
+  }, children)), loading && noChildren && /*#__PURE__*/React__default.createElement("div", {
+    className: "btn-loader-holder"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-loader"
+  })));
+});
+const ButtonConfig = {
+  appearance: ['default', 'outline', 'minimal', 'grayscale', 'clean'],
+  size: ['default', 'medium', 'big'],
+  color: ['primary', 'confirm', 'danger', 'default'],
+  flexibility: ['default', 'content-size', 'full-width'],
+  itemsDirection: ['start', 'end'],
+  cornerRadius: ['round', 'smooth']
+};
+Button.propTypes = {
+  /**
+   * Any valid React node
+   */
+  children: propTypesExports.node,
+  /**
+   * The way how the Button should be displayed
+   */
+  appearance: propTypesExports.oneOf(ButtonConfig.appearance),
+  /**
+   * Button size
+   */
+  size: propTypesExports.oneOf(ButtonConfig.size),
+  /**
+   * How to display inscription in relation to it's parent in Button
+   */
+  flexibility: propTypesExports.oneOf(ButtonConfig.flexibility),
+  /**
+   * Button color
+   */
+  color: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.oneOf(ButtonConfig.color)]),
+  /**
+   * Button children direction either from the start, or from the end
+   */
+  itemsDirection: propTypesExports.oneOf(ButtonConfig.itemsDirection),
+  /**
+   * Button corner radius
+   */
+  cornerRadius: propTypesExports.oneOf(ButtonConfig.cornerRadius),
+  /**
+   * The property will add an "Icon" as Button child. The valid values can be found in "Icon" atom
+   */
+  icon: propTypesExports.string,
+  /**
+   * Button disabled state
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * Button active state
+   */
+  active: propTypesExports.bool,
+  /**
+   * Adding shadow to button
+   */
+  withShadow: propTypesExports.bool,
+  /**
+   * Button additianl className
+   */
+  className: propTypesExports.string,
+  /**
+   * Button text transforms to spinner
+   */
+  loading: propTypesExports.bool,
+  /**
+   * aria-label for button.
+   */
+  ariaLabel: propTypesExports.string
+};
+Button.defaultProps = {
+  appearance: ButtonConfig.appearance[0],
+  size: ButtonConfig.size[0],
+  flexibility: ButtonConfig.flexibility[0],
+  color: ButtonConfig.color[0],
+  itemsDirection: ButtonConfig.itemsDirection[0],
+  cornerRadius: ButtonConfig.cornerRadius[0]
+};
+Button.displayName = 'Button';
+
+export { Button as default };