@geneui/components 2.11.2 → 2.12.2

package/Tabs/index.js

@@ -0,0 +1,235 @@
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import Icon from '../Icon/index.js';
+import { c as childrenOf } from '../index-a0e4e333.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
+import 'react-dom';
+
+function Tab(props) {
+  const {
+    title,
+    icon,
+    active,
+    onClose,
+    disabled,
+    activeKey,
+    closeTitleText,
+    defaultActiveKey,
+    ...restProps
+  } = props;
+  const ref = useRef(null);
+  const isCloseable = props.hasOwnProperty('onClose') && typeof onClose === 'function';
+  useEffect(() => {
+    if (active && activeKey && defaultActiveKey !== activeKey && (defaultActiveKey || defaultActiveKey === 0)) {
+      ref.current.scrollIntoView({
+        behavior: 'smooth',
+        inline: 'nearest',
+        block: 'start'
+      });
+    }
+  }, [active, activeKey, defaultActiveKey]);
+  return /*#__PURE__*/React__default.createElement("li", _extends({
+    ref: ref,
+    className: classnames({
+      active,
+      disabled
+    })
+  }, restProps), icon && /*#__PURE__*/React__default.createElement(Icon, {
+    type: icon,
+    className: "tab-icon"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "ellipsis-text"
+  }, title), isCloseable && /*#__PURE__*/React__default.createElement("button", {
+    onClick: e => {
+      e.stopPropagation();
+      onClose();
+    },
+    className: "tab-close-button",
+    title: closeTitleText
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-close"
+  })));
+}
+Tab.propTypes = {
+  /**
+   * Title for 'Tab'.
+   */
+  title: PropTypes.node,
+  /**
+   * Active/Passive state of 'Tab'
+   */
+  active: PropTypes.bool,
+  /**
+   * Disabled state of 'Tab'
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Icon of 'Tab'
+   */
+  icon: PropTypes.string,
+  /**
+   * Content padding for specific 'Tab'
+   */
+  contentPadding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Prop for specifying which tab is active
+   */
+  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Prop for default active tab
+   */
+  defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Shows close button and triggers function onClick
+   */
+  onClose: PropTypes.func,
+  /**
+   * Shows title hovering the close button
+   */
+  closeTitleText: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+};
+Tab.defaultProps = {
+  disabled: false
+};
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .tabs-holder{align-items:flex-start;display:flex;width:100%}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.reversed{flex-direction:row-reverse}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.horizontal{flex-direction:column}[data-gene-ui-version=\"2.12.2\"] .tabs-head{display:flex;flex-shrink:0;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.horizontal>.tabs-head{width:100%}[data-gene-ui-version=\"2.12.2\"] .tabs-head>.tabs-wrapper{flex:auto}[data-gene-ui-version=\"2.12.2\"] .tabs-head>.tabs-actions{align-items:center;box-shadow:inset 0 -1px 0 0 rgba(var(--background-sc-rgb),.06);color:var(--hero);display:flex;flex-shrink:0}[data-gene-ui-version=\"2.12.2\"] .tabs-head>.tabs-actions>*{margin-inline-end:2rem}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper{overflow-x:auto;width:100%}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper::-webkit-scrollbar{display:none;height:0;width:0}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper>.tabs-content.equal-tabs,[data-gene-ui-version=\"2.12.2\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{min-width:100%}[data-gene-ui-version=\"2.12.2\"] .tabs-content{display:inline-flex;font-weight:600;line-height:4.2rem;text-align:center;vertical-align:top}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content{flex-direction:column;text-align:start}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content .tab-icon{display:none}[data-gene-ui-version=\"2.12.2\"] .tabs-content>li{align-items:center;cursor:pointer;display:flex;justify-content:center;padding:0 2rem;position:relative;transition:color .3s,box-shadow .3s,border-color .3s,background-color,.3s}[data-gene-ui-version=\"2.12.2\"] .tabs-content>li .tab-icon{flex-shrink:0;margin-inline-end:1.4rem;margin-inline-start:-.4rem}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content>li{justify-content:flex-start;padding:0 3rem 0 2rem}html[dir=rtl] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content>li{padding:0 2rem 0 3rem}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.type-basic.tabs-content>li{justify-content:flex-end}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content>li{padding:0 2rem 0 3rem}html[dir=rtl] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content>li{padding:0 3rem 0 2rem}[data-gene-ui-version=\"2.12.2\"] .tabs-content>li.disabled{opacity:.5}[data-gene-ui-version=\"2.12.2\"] .tabs-content>li.active,[data-gene-ui-version=\"2.12.2\"] .tabs-content>li.disabled{pointer-events:none}[data-gene-ui-version=\"2.12.2\"] .tabs-content>li .tab-close-button{align-items:center;background:rgba(var(--background-sc-rgb),.07);border-radius:100%;color:var(--background-sc);cursor:pointer;display:flex;height:1.6rem;justify-content:center;margin-inline-end:-1.6rem;margin-inline-start:.8rem;pointer-events:auto;transition:color .3s,background-color .3s;width:1.6rem}[data-gene-ui-version=\"2.12.2\"] .tabs-content>li .tab-close-button .icon{font-size:1.2rem}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .tabs-content>li .tab-close-button:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.12.2\"] .tabs-content.active .tab-close-button{background:rgba(var(--hero-rgb),.1);color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .tabs-content.active .tab-close-button:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.12.2\"] .tabs-content.equal-tabs>li{flex:1;min-width:12rem}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.equal-tabs>li{width:13rem}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.equal-tabs.type-text>li{width:12rem}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-basic{box-shadow:inset 0 -1px 0 0 rgba(var(--background-sc-rgb),.06);line-height:4.6rem;padding:0 2rem}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{box-shadow:inset -1px 0 0 rgba(var(--background-sc-rgb),.06);padding:2rem 0;text-align:end}html[dir=rtl] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{box-shadow:inset 1px 0 0 rgba(var(--background-sc-rgb),.06)}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{box-shadow:inset 1px 0 0 rgba(var(--background-sc-rgb),.06);text-align:start}html[dir=rtl] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{box-shadow:inset -1px 0 0 rgba(var(--background-sc-rgb),.06)}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-basic>li{box-shadow:inset 0 0 0 var(--hero);flex:inherit}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-basic>li.active{box-shadow:inset 0 -.4rem 0 0 var(--hero)}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-basic>li.active{box-shadow:inset -.3rem 0 0 var(--hero)}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-basic>li.active,html[dir=rtl] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-basic>li.active{box-shadow:inset .3rem 0 0 var(--hero)}html[dir=rtl] .tabs-holder.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-basic>li.active{box-shadow:inset -.3rem 0 0 var(--hero)}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-box>li{border:1px solid #0000;border-radius:1rem 1rem 0 0;line-height:4.1rem}[data-gene-ui-version=\"2.12.2\"] .tabs-holder:not(.vertical)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li+*{margin:0 0 0 .2rem}html[dir=rtl] .tabs-holder:not(.vertical)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li+*{margin:0 .2rem 0 0}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li{border-radius:1rem 0 0 1rem}html[dir=rtl] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li{border-radius:0 1rem 1rem 0}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li+*{margin:.2rem 0 0}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li{border-radius:0 1rem 1rem 0}html[dir=rtl] .tabs-holder.vertical.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li{border-radius:1rem 0 0 1rem}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-box>li:hover{border-color:rgba(var(--background-sc-rgb),.1)}}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-box>li.active{border-color:rgba(var(--background-sc-rgb),.1)}@media (hover:hover){html:not([dir=rtl]) .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li:hover{border-right-color:#0000}html:not([dir=rtl]) .tabs-holder.vertical.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li:hover,html[dir=rtl] .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li:hover{border-left-color:#0000}html[dir=rtl] .tabs-holder.vertical.reversed>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li:hover{border-right-color:#0000}}[data-gene-ui-version=\"2.12.2\"] .tabs-holder:not(.vertical)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active{border-bottom-color:var(--background)}html:not([dir=rtl]) .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active{border-right-color:var(--background)}html:not([dir=rtl]) .tabs-holder.reversed.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active,html[dir=rtl] .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active{border-left-color:var(--background)}html[dir=rtl] .tabs-holder.reversed.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li.active{border-right-color:var(--background)}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-button{box-shadow:inset 0 0 0 1px rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-button:not(.equal-tabs)>li{padding:0 2rem}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-button>li{box-shadow:inset 0 0 0 0 var(--hero)}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-button>li.active{box-shadow:inset 0 0 0 1px var(--hero)}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-text.equal-tabs>li{min-width:10rem}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-text.equal-tabs>li{min-width:12rem}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-text>li{line-height:2.8rem;padding:0 1.5rem}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-text>li{padding:0 2rem}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-text>li+*{margin:1rem 0 0}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-text>li.active{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-box>li.active,[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-button>li.active{color:var(--hero)}[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-button,[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-button>li,[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-text,[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-text>li{border-radius:2rem}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-button>li:not(.active):hover,[data-gene-ui-version=\"2.12.2\"] .tabs-content.type-text>li:not(.active):hover{color:var(--hero)}}[data-gene-ui-version=\"2.12.2\"] .tabs-content-holder{width:100%}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-content-holder{flex:auto}[data-gene-ui-version=\"2.12.2\"] .tabs-content-holder.c-type-box{align-self:stretch;border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:0 0 1rem 1rem;margin:-1px 0 0}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical>.tabs-content-holder.c-type-box{border-radius:1rem}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical:not(.reversed)>.tabs-content-holder.c-type-box{border-radius:0 1rem 1rem 0;margin:0 0 0 -1px}[data-gene-ui-version=\"2.12.2\"] .tabs-holder.vertical.reversed>.tabs-content-holder.c-type-box,html[dir=rtl] .tabs-holder.vertical:not(.reversed)>.tabs-content-holder.c-type-box{border-radius:1rem 0 0 1rem;margin:0 -1px 0 0}html[dir=rtl] .tabs-holder.vertical.reversed>.tabs-content-holder.c-type-box{border-radius:0 1rem 1rem 0;margin:0 0 0 -1px}[data-gene-ui-version=\"2.12.2\"] .external-link{align-items:center;display:flex;font-weight:600}[data-gene-ui-version=\"2.12.2\"] .external-link>*+*{margin-inline-start:.2rem}";
+styleInject(css_248z);
+
+function Tabs(props) {
+  const {
+    type,
+    actions,
+    position,
+    children,
+    fixedSize,
+    onChange,
+    className,
+    defaultActiveKey,
+    contentClassName,
+    contentPadding
+  } = props;
+  const holderRef = useRef(null);
+  const isControlled = ('activeKey' in props);
+  const [active, setActive] = useState(() => defaultActiveKey || getDefaultActiveKey(children));
+  const activeKey = isControlled ? props.activeKey : active;
+  const handleClick = useCallback(key => {
+    !isControlled && setActive(key);
+    onChange && onChange(key);
+    (holderRef === null || holderRef === void 0 ? void 0 : holderRef.current) && holderRef.current.scrollTo(0, 0);
+  }, [onChange, isControlled, holderRef.current]);
+  const {
+    tabs,
+    content,
+    tabContentPadding
+  } = useMemo(() => getTabsAndContent(children, activeKey, defaultActiveKey, handleClick), [children, activeKey, handleClick]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('tabs-holder', className, {
+      vertical: position !== 'top',
+      reversed: position === 'right',
+      horizontal: position === 'top'
+    })
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "tabs-head"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "tabs-wrapper"
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    className: classnames('tabs-content', "type-".concat(type), {
+      'equal-tabs': fixedSize
+    })
+  }, tabs)), actions && position === 'top' && /*#__PURE__*/React__default.createElement("div", {
+    className: "tabs-actions"
+  }, actions)), /*#__PURE__*/React__default.createElement("div", {
+    ref: holderRef,
+    className: classnames('tabs-content-holder', contentClassName, {
+      'c-type-box': type === 'box'
+    }),
+    style: {
+      padding: "".concat((tabContentPadding || contentPadding) / 10, "rem")
+    }
+  }, content));
+}
+Tabs.propTypes = {
+  /**
+   * Any valid react node, will be shown at right side of tab menu bar.
+   */
+  actions: PropTypes.node,
+  /**
+   * Prop for specifying which tab is active
+   */
+  activeKey: PropTypes.string,
+  /**
+   * Prop for default active tab
+   */
+  defaultActiveKey: PropTypes.string,
+  /**
+   * Style of tab menu bar
+   */
+  type: PropTypes.oneOf(['basic', 'box', 'button', 'text']),
+  /**
+   * Position of tab menu bar
+   */
+  position: PropTypes.oneOf(['top', 'left', 'right']),
+  /**
+   * Size of tabs will be fixed when the value is true
+   */
+  fixedSize: PropTypes.bool,
+  /**
+   * Callback function, fired when tab changes
+   */
+  onChange: PropTypes.func,
+  /**
+   * Any valid react node
+   */
+  children: childrenOf([Tab]),
+  /**
+   * Additional classname for content wrapper
+   */
+  contentClassName: PropTypes.string,
+  /**
+   * Padding value for content wrapper
+   */
+  contentPadding: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Tabs.defaultProps = {
+  type: 'basic',
+  position: 'top',
+  fixedSize: false,
+  contentPadding: 19
+};
+function getDefaultActiveKey(children) {
+  let defaultActiveKey;
+  React__default.Children.forEach(children, child => {
+    if (!defaultActiveKey && !child.props.disabled) {
+      defaultActiveKey = child.key;
+    }
+  });
+  return defaultActiveKey;
+}
+function getTabsAndContent(children, activeKey, defaultActiveKey, handleClick) {
+  let content;
+  let tabContentPadding;
+  const tabs = React__default.Children.map(children, child => {
+    const active = child.key === activeKey;
+    if (active) {
+      content = child.props.children;
+      tabContentPadding = child.props.contentPadding;
+    }
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      onClick: () => handleClick(child.key),
+      defaultActiveKey,
+      activeKey,
+      active
+    });
+  });
+  return {
+    tabs,
+    content,
+    tabContentPadding
+  };
+}
+
+export { Tab, Tabs };

package/Tag/index.js

@@ -0,0 +1,102 @@
+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 { f as tagConfig } from '../configs-fed6ac34.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .static-title-holder{align-items:flex-start;display:inline-flex;flex-direction:column;max-width:100%;vertical-align:top}[data-gene-ui-version=\"2.12.2\"] .static-title-holder .st-t{font:600 1.4rem/1.8rem var(--font-family);margin:0 0 .4rem;opacity:.5;padding:0 var(--static-title-padding,0)}[data-gene-ui-version=\"2.12.2\"] .static-title-holder .st-c{max-width:100%}[data-gene-ui-version=\"2.12.2\"] .static-title-holder .st-c:nth-child(2){align-items:center;display:flex;min-height:3.2rem}[data-gene-ui-version=\"2.12.2\"] .static-title-holder.f-full-width,[data-gene-ui-version=\"2.12.2\"] .static-title-holder.f-full-width .st-c{width:100%}[data-gene-ui-version=\"2.12.2\"] .tag-c{--color:var(--hero);align-items:center;background:var(--background);color:var(--color);display:flex;flex-direction:row-reverse;flex-shrink:0;font:600 1.4rem/1.8rem var(--font-family);height:var(--size);justify-content:center;max-width:100%;padding:0 1rem;position:relative;text-align:center;transition:color .3s;-webkit-user-select:none;user-select:none;width:100%}[data-gene-ui-version=\"2.12.2\"] .tag-c.s-small{--size:2.4rem;font-size:1.2rem}html:not([dir=rtl]) .tag-c.s-small .icon{margin-left:1px}html[dir=rtl] .tag-c.s-small .icon{margin-right:1px}[data-gene-ui-version=\"2.12.2\"] .tag-c.s-medium{--size:2.6rem}html:not([dir=rtl]) .tag-c.s-medium .icon{margin-left:.5rem}html[dir=rtl] .tag-c.s-medium .icon{margin-right:.5rem}[data-gene-ui-version=\"2.12.2\"] .tag-c.s-big{--size:3rem}html:not([dir=rtl]) .tag-c.s-big .icon{margin-left:.5rem}html[dir=rtl] .tag-c.s-big .icon{margin-right:.5rem}[data-gene-ui-version=\"2.12.2\"] .tag-c.f-compact{min-width:var(--size)}[data-gene-ui-version=\"2.12.2\"] .tag-c.f-compact.s-small{padding:0 .4rem}[data-gene-ui-version=\"2.12.2\"] .tag-c.f-compact.s-medium{padding:0 .5rem}[data-gene-ui-version=\"2.12.2\"] .tag-c.f-compact.s-big{padding:0 .7rem}html:not([dir=rtl]) .tag-c:not(.f-compact).s-small .icon{margin-right:-.9rem}html[dir=rtl] .tag-c:not(.f-compact).s-small .icon{margin-left:-.9rem}html:not([dir=rtl]) .tag-c:not(.f-compact).s-medium .icon{margin-right:-.7rem}html[dir=rtl] .tag-c:not(.f-compact).s-medium .icon{margin-left:-.7rem}html:not([dir=rtl]) .tag-c:not(.f-compact).s-big .icon{margin-right:-.2rem}html[dir=rtl] .tag-c:not(.f-compact).s-big .icon{margin-left:-.2rem}[data-gene-ui-version=\"2.12.2\"] .tag-c.cr-full-radius{border-radius:1.4rem}[data-gene-ui-version=\"2.12.2\"] .tag-c.cr-smooth-radius{border-radius:.6rem}[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-simple{--color:var(--background-sc)}[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-simple .tag-backdrop:before{opacity:.1}[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-simple .tag-backdrop:after{content:none}[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-minimal .tag-backdrop{--color:var(--background-sc)}[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-minimal .tag-backdrop:before{opacity:.03}[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-minimal .tag-backdrop:after{opacity:.07}[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-outline .tag-backdrop:before{content:none}[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-colored .tag-backdrop:before{opacity:.1}[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-clean{--color:var(--background-sc)}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-clean:hover{--color:var(--hero)}}[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-clean .tag-backdrop:after,[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-clean .tag-backdrop:before{content:none}[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-light .tag-backdrop:before{opacity:.1}[data-gene-ui-version=\"2.12.2\"] .tag-c:not(.active).a-light .tag-backdrop:after{border:0}[data-gene-ui-version=\"2.12.2\"] .tag-c.active{color:var(--hero-sc)}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .tag-c:hover .tag-backdrop{opacity:.6}}[data-gene-ui-version=\"2.12.2\"] .tag-c .icon,[data-gene-ui-version=\"2.12.2\"] .tag-c .tag-cc{position:relative;transition:opacity .3s;z-index:1}[data-gene-ui-version=\"2.12.2\"] .tag-c .icon{cursor:pointer;opacity:.5}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .tag-c .icon:hover{opacity:1}[data-gene-ui-version=\"2.12.2\"] .tag-c .icon:hover~.tag-cp{opacity:.6}}[data-gene-ui-version=\"2.12.2\"] .tag-backdrop{border-radius:inherit;height:100%;left:0;position:absolute;top:0;transition:opacity .3s;width:100%}[data-gene-ui-version=\"2.12.2\"] .tag-backdrop:after,[data-gene-ui-version=\"2.12.2\"] .tag-backdrop:before{border-radius:inherit;content:\"\";display:block;height:100%;left:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.12.2\"] .tag-backdrop:before{background:var(--color);transition:background .3s,opacity .3s}[data-gene-ui-version=\"2.12.2\"] .tag-backdrop:after{border:1px solid var(--color);transition:border-color .3s,opacity .3s}";
+styleInject(css_248z);
+
+function Tag(_ref) {
+  let {
+    label,
+    name,
+    cornerRadius,
+    size,
+    color,
+    appearance,
+    flexibility,
+    selected,
+    className,
+    cursor,
+    icons,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("ul", _extends({
+    className: classnames('static-title-holder', className, "f-".concat(flexibility))
+  }, restProps), label && /*#__PURE__*/React__default.createElement("li", {
+    className: "st-t"
+  }, label), /*#__PURE__*/React__default.createElement("li", {
+    className: "st-c"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('tag-c', "cr-".concat(cornerRadius), "a-".concat(appearance), "f-".concat(flexibility), "s-".concat(size), {
+      active: selected,
+      'pointer-events-none': !icons
+    }),
+    style: {
+      '--hero': color,
+      cursor
+    }
+  }, icons || null, /*#__PURE__*/React__default.createElement("div", {
+    className: "tag-cp tag-cc ellipsis-text"
+  }, name), /*#__PURE__*/React__default.createElement("div", {
+    className: "tag-backdrop"
+  }))));
+}
+Tag.propTypes = {
+  /**
+   * Label for 'Tag'.
+   */
+  label: PropTypes.string,
+  /**
+   * Cursor type for 'Tag'.
+   */
+  cursor: PropTypes.string,
+  /**
+   * Name for 'Tag'.
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * Border type of corners
+   */
+  cornerRadius: PropTypes.oneOf(tagConfig.cornerRadius),
+  /**
+   * Chooses how to show 'Tag'
+   */
+  flexibility: PropTypes.oneOf(tagConfig.flexibility),
+  /**
+   * Switches between different sizes of 'Tag'.
+   */
+  size: PropTypes.oneOf(tagConfig.size),
+  /**
+   * Color/theming for 'Tag'.
+   */
+  color: PropTypes.string,
+  /**
+   * Switches between different views of 'Tag'.
+   */
+  appearance: PropTypes.oneOf(tagConfig.appearance),
+  /**
+   * Selected state
+   */
+  selected: PropTypes.bool,
+  /**
+   * External/Additional className
+   */
+  className: PropTypes.string,
+  /**
+   * Showing icons
+   */
+  icons: PropTypes.node
+};
+Tag.defaultProps = {
+  cornerRadius: tagConfig.cornerRadius[0],
+  flexibility: tagConfig.flexibility[0],
+  size: tagConfig.size[1],
+  appearance: tagConfig.appearance[0],
+  selected: false,
+  cursor: 'pointer'
+};
+
+export { Tag as default };

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { p as propTypesExports } from './index-e0af0caf.js';
+import PropTypes from 'prop-types';
 
 function TextLink(_ref) {
   let {
@@ -12,11 +12,11 @@ TextLink.propTypes = {
   /**
    * Any valid React node
    */
-  children: propTypesExports.string.isRequired,
+  children: PropTypes.string.isRequired,
   /**
    * Additional className
    */
-  className: propTypesExports.string
+  className: PropTypes.string
 };
 
 export { TextLink as default };

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

@@ -1,25 +1,26 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default from 'react';
-import { n as noop } from './index-ac59cb10.js';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import { i as inputConfig, s as screenTypes } from './configs-91c86664.js';
-import ExtendedInput from './ExtendedInput.js';
-import './globalStyling-9c60a159.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import './dateValidation-67caec66.js';
-import './_commonjsHelpers-24198af3.js';
+import PropTypes from 'prop-types';
+import { n as noop } from '../index-a0e4e333.js';
+import { i as inputConfig, s as screenTypes } from '../configs-fed6ac34.js';
+import ExtendedInput from '../ExtendedInput/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
 import 'react-dom';
-import './index-6ff23041.js';
-import './useDeviceType-dd51db38.js';
-import './useWindowSize-80369d76.js';
-import './index-897d8240.js';
-import './useKeyDown-38102ae7.js';
-import './useClickOutside-5183e396.js';
-import './Scrollbar.js';
-import './Icon.js';
-import './Tooltip.js';
-import './Popover-f4d1cac0.js';
-import './GeneUIProvider.js';
+import '../index-6ff23041.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../hooks/useEllipsisDetection.js';
+import '../Icon/index.js';
+import '../SuggestionList/index.js';
+import '../hooks/useKeyDown.js';
+import '../hooks/useClickOutside.js';
+import '../config-0ca92874.js';
+import '../Scrollbar/index.js';
+import '../Tooltip/index.js';
+import '../Popover-f4d1cac0.js';
+import '../GeneUIProvider/index.js';
 
 var css_248z = "";
 styleInject(css_248z);
@@ -33,172 +34,172 @@ Textarea.propTypes = {
   /**
    * Additional className
    */
-  className: propTypesExports.string,
+  className: PropTypes.string,
   /**
    * Control ExtendedInput disabled state with this prop
    */
-  disabled: propTypesExports.bool,
+  disabled: PropTypes.bool,
   /**
    * Borders will be colored on when "isValid" and this props are set to "true"
    */
-  colorBorderOnError: propTypesExports.bool,
+  colorBorderOnError: PropTypes.bool,
   /**
    * Shows an icon to clear ExtendedInput's value when set to "true"
    */
-  showClearIcon: propTypesExports.bool,
+  showClearIcon: PropTypes.bool,
   /**
    * Use this props in combo with "icon" prop. This will fire on icon click when set to "true"
    */
-  clickableIcon: propTypesExports.bool,
+  clickableIcon: PropTypes.bool,
   /**
    * Shows an error icon when "isValid" is set to "false" and this prop is set to "true"
    */
-  showErrorIcon: propTypesExports.bool,
+  showErrorIcon: PropTypes.bool,
   /**
    *.
    */
-  showClickableTooltipOnError: propTypesExports.bool,
+  showClickableTooltipOnError: PropTypes.bool,
   /**
    * ExtendedInput borders are colored when "isValid" and this props are set to "true"
    */
-  colorOnValid: propTypesExports.bool,
+  colorOnValid: PropTypes.bool,
   /**
    * ExtendedInput will display an icon when "isValid" and this props are set to "true"
    */
-  showIconOnValid: propTypesExports.bool,
+  showIconOnValid: PropTypes.bool,
   /**
    * Shows the "errorText" value in "Tooltip" when set to "true"
    */
-  showErrorWithTooltip: propTypesExports.bool,
+  showErrorWithTooltip: PropTypes.bool,
   /**
    * Control ExtendedInput validation. For more info see "ValidatableNumberInput", "ValidatableTextInput"(integrated ExtendedInputs with "Form" organism).
    */
-  isValid: propTypesExports.bool,
+  isValid: PropTypes.bool,
   /**
    * Use this prop to specify error message. This will be displayed when "isValid" is set to "false"
    */
-  errorText: propTypesExports.string,
+  errorText: PropTypes.string,
   /**
    * Use this prop to specify tooltip message.
    */
-  tooltipText: propTypesExports.string,
+  tooltipText: PropTypes.string,
   /**
    * Valid values are same as "Icon" type
    */
-  icon: propTypesExports.string,
+  icon: PropTypes.string,
   /**
    * ExtendedInput placeholder
    */
-  placeholder: propTypesExports.string,
+  placeholder: PropTypes.string,
   /**
    * Control items direction
    */
-  itemsDirection: propTypesExports.oneOf(inputConfig.itemsDirection),
+  itemsDirection: PropTypes.oneOf(inputConfig.itemsDirection),
   /**
    * Use this prop to control ExtendedInput state. Note that when you specify this prop, the ExtendedInput will not functionate itself
    */
-  value: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * ExtendedInput appearance
    */
-  appearance: propTypesExports.oneOf(inputConfig.appearance),
+  appearance: PropTypes.oneOf(inputConfig.appearance),
   /**
    * ExtendedInput size
    */
-  inputSize: propTypesExports.oneOf(inputConfig.size),
+  inputSize: PropTypes.oneOf(inputConfig.size),
   /**
    * ExtendedInput corner radius
    */
-  cornerRadius: propTypesExports.oneOf(inputConfig.cornerRadius),
+  cornerRadius: PropTypes.oneOf(inputConfig.cornerRadius),
   /**
    * Will make ExtendedInput readonly when set to "true"
    */
-  readOnly: propTypesExports.bool,
+  readOnly: PropTypes.bool,
   /**
    * How to display inscription in relation to it's parent in ExtendedInput
    */
-  flexibility: propTypesExports.oneOf(inputConfig.flexibility),
+  flexibility: PropTypes.oneOf(inputConfig.flexibility),
   /**
    * This prop will only applied once as defaultState for "value" when ExtendedInput mounts.
    * Note that specifying this prop is not mean controlling it.
    */
-  defaultValue: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * Shows an "Icon" to remove ExtendedInput's value
    */
-  canClear: propTypesExports.bool,
+  canClear: PropTypes.bool,
   /**
    * Fires an event on clear "Icon" click((element: Element) => void)
    */
-  onClear: propTypesExports.func,
+  onClear: PropTypes.func,
   /**
    * Fires an event on ExtendedInput change((event: Event) => void)
    */
-  onChange: propTypesExports.func,
+  onChange: PropTypes.func,
   /**
    * Specify a label for ExtendedInput
    */
-  label: propTypesExports.string,
+  label: PropTypes.string,
   /**
    * Specify a "label" appearance
    */
-  labelAppearance: propTypesExports.oneOf(inputConfig.labelAppearance),
+  labelAppearance: PropTypes.oneOf(inputConfig.labelAppearance),
   /**
    * Will add an additional description field
    */
-  description: propTypesExports.node,
+  description: PropTypes.node,
   /**
    * Fires an event on ExtendInput <input /> click((event: Event => void))
    */
-  onClick: propTypesExports.func,
+  onClick: PropTypes.func,
   /**
    * Typing will be blocked when set to "true". Note design is different from "readonly" prop's design
    */
-  writeProtected: propTypesExports.bool,
+  writeProtected: PropTypes.bool,
   /**
    * Callback fires when input is focused
    */
-  onFocus: propTypesExports.func,
+  onFocus: PropTypes.func,
   /**
    * Callback fires when input loose focus
    */
-  onBlur: propTypesExports.func,
+  onBlur: PropTypes.func,
   /**
    * Callback fires when click in icon
    */
-  onIconClick: propTypesExports.func,
+  onIconClick: PropTypes.func,
   /**
    * Define is input required or no.
    */
-  required: propTypesExports.bool,
+  required: PropTypes.bool,
   /**
    * The switch between mobile and desktop version
    */
-  screenType: propTypesExports.oneOf(screenTypes),
+  screenType: PropTypes.oneOf(screenTypes),
   /**
    * Define is  need input info icon required.
    */
-  withInfoIcon: propTypesExports.bool,
+  withInfoIcon: PropTypes.bool,
   /**
    * ExtendedInput info icon title.
    */
-  infoIconTitle: propTypesExports.string,
+  infoIconTitle: PropTypes.string,
   /**
    * Max Length of input Value
    */
-  maxLength: propTypesExports.number,
+  maxLength: PropTypes.number,
   /**
    * Show Remaining Length of input value, works only with maxLength
    */
-  showRemainingLength: propTypesExports.bool,
+  showRemainingLength: PropTypes.bool,
   /**
    * Suggestion Data
    */
-  suggestionData: propTypesExports.arrayOf(propTypesExports.shape({
-    key: propTypesExports.string.isRequired,
-    data: propTypesExports.arrayOf(propTypesExports.shape({
-      label: propTypesExports.string.isRequired,
-      value: propTypesExports.string.isRequired
+  suggestionData: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    data: PropTypes.arrayOf(PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired
     }))
   }))
 };