@geneui/components 2.11.1

package/Tabs.js

@@ -0,0 +1,236 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import Icon from './Icon.js';
+import { c as childrenOf } from './index-ac59cb10.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './globalStyling-9c60a159.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: propTypesExports.node,
+  /**
+   * Active/Passive state of 'Tab'
+   */
+  active: propTypesExports.bool,
+  /**
+   * Disabled state of 'Tab'
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * Icon of 'Tab'
+   */
+  icon: propTypesExports.string,
+  /**
+   * Content padding for specific 'Tab'
+   */
+  contentPadding: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  /**
+   * Prop for specifying which tab is active
+   */
+  activeKey: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  /**
+   * Prop for default active tab
+   */
+  defaultActiveKey: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  /**
+   * Shows close button and triggers function onClick
+   */
+  onClose: propTypesExports.func,
+  /**
+   * Shows title hovering the close button
+   */
+  closeTitleText: propTypesExports.oneOfType([propTypesExports.func, propTypesExports.string])
+};
+Tab.defaultProps = {
+  disabled: false
+};
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .tabs-holder{align-items:flex-start;display:flex;width:100%}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.reversed{flex-direction:row-reverse}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.horizontal{flex-direction:column}[data-gene-ui-version=\"2.11.0\"] .tabs-head{display:flex;flex-shrink:0;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.horizontal>.tabs-head{width:100%}[data-gene-ui-version=\"2.11.0\"] .tabs-head>.tabs-wrapper{flex:auto}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .tabs-head>.tabs-actions>*{margin-inline-end:2rem}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper{overflow-x:auto;width:100%}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper::-webkit-scrollbar{display:none;height:0;width:0}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper>.tabs-content.equal-tabs,[data-gene-ui-version=\"2.11.0\"] .tabs-holder.horizontal>.tabs-head>.tabs-wrapper>.tabs-content.type-basic{min-width:100%}[data-gene-ui-version=\"2.11.0\"] .tabs-content{display:inline-flex;font-weight:600;line-height:4.2rem;text-align:center;vertical-align:top}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content{flex-direction:column;text-align:start}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content .tab-icon{display:none}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .tabs-content>li .tab-icon{flex-shrink:0;margin-inline-end:1.4rem;margin-inline-start:-.4rem}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .tabs-holder.vertical:not(.reversed)>.tabs-head>.tabs-wrapper>.type-basic.tabs-content>li{justify-content:flex-end}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .tabs-content>li.disabled{opacity:.5}[data-gene-ui-version=\"2.11.0\"] .tabs-content>li.active,[data-gene-ui-version=\"2.11.0\"] .tabs-content>li.disabled{pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .tabs-content>li .tab-close-button .icon{font-size:1.2rem}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .tabs-content>li .tab-close-button:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.11.0\"] .tabs-content.active .tab-close-button{background:rgba(var(--hero-rgb),.1);color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .tabs-content.active .tab-close-button:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.11.0\"] .tabs-content.equal-tabs>li{flex:1;min-width:12rem}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.equal-tabs>li{width:13rem}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.equal-tabs.type-text>li{width:12rem}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .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.11.0\"] .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.11.0\"] .tabs-content.type-basic>li{box-shadow:inset 0 0 0 var(--hero);flex:inherit}[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-basic>li.active{box-shadow:inset 0 -.4rem 0 0 var(--hero)}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .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.11.0\"] .tabs-content.type-box>li{border:1px solid #0000;border-radius:1rem 1rem 0 0;line-height:4.1rem}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .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.11.0\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-box>li+*{margin:.2rem 0 0}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .tabs-content.type-box>li:hover{border-color:rgba(var(--background-sc-rgb),.1)}}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .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.11.0\"] .tabs-content.type-button{box-shadow:inset 0 0 0 1px rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-button:not(.equal-tabs)>li{padding:0 2rem}[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-button>li{box-shadow:inset 0 0 0 0 var(--hero)}[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-button>li.active{box-shadow:inset 0 0 0 1px var(--hero)}[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-text.equal-tabs>li{min-width:10rem}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-text.equal-tabs>li{min-width:12rem}[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-text>li{line-height:2.8rem;padding:0 1.5rem}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-text>li{padding:0 2rem}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.vertical>.tabs-head>.tabs-wrapper>.tabs-content.type-text>li+*{margin:1rem 0 0}[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-text>li.active{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-box>li.active,[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-button>li.active{color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-button,[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-button>li,[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-text,[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-text>li{border-radius:2rem}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-button>li:not(.active):hover,[data-gene-ui-version=\"2.11.0\"] .tabs-content.type-text>li:not(.active):hover{color:var(--hero)}}[data-gene-ui-version=\"2.11.0\"] .tabs-content-holder{width:100%}[data-gene-ui-version=\"2.11.0\"] .tabs-holder.vertical>.tabs-content-holder{flex:auto}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .tabs-holder.vertical>.tabs-content-holder.c-type-box{border-radius:1rem}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .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.11.0\"] .external-link{align-items:center;display:flex;font-weight:600}[data-gene-ui-version=\"2.11.0\"] .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: propTypesExports.node,
+  /**
+   * Prop for specifying which tab is active
+   */
+  activeKey: propTypesExports.string,
+  /**
+   * Prop for default active tab
+   */
+  defaultActiveKey: propTypesExports.string,
+  /**
+   * Style of tab menu bar
+   */
+  type: propTypesExports.oneOf(['basic', 'box', 'button', 'text']),
+  /**
+   * Position of tab menu bar
+   */
+  position: propTypesExports.oneOf(['top', 'left', 'right']),
+  /**
+   * Size of tabs will be fixed when the value is true
+   */
+  fixedSize: propTypesExports.bool,
+  /**
+   * Callback function, fired when tab changes
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Any valid react node
+   */
+  children: childrenOf([Tab]),
+  /**
+   * Additional classname for content wrapper
+   */
+  contentClassName: propTypesExports.string,
+  /**
+   * Padding value for content wrapper
+   */
+  contentPadding: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.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.js

@@ -0,0 +1,103 @@
+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 { t as tagConfig } from './configs-91c86664.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\"] .static-title-holder{align-items:flex-start;display:inline-flex;flex-direction:column;max-width:100%;vertical-align:top}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .static-title-holder .st-c{max-width:100%}[data-gene-ui-version=\"2.11.0\"] .static-title-holder .st-c:nth-child(2){align-items:center;display:flex;min-height:3.2rem}[data-gene-ui-version=\"2.11.0\"] .static-title-holder.f-full-width,[data-gene-ui-version=\"2.11.0\"] .static-title-holder.f-full-width .st-c{width:100%}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .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.11.0\"] .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.11.0\"] .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.11.0\"] .tag-c.f-compact{min-width:var(--size)}[data-gene-ui-version=\"2.11.0\"] .tag-c.f-compact.s-small{padding:0 .4rem}[data-gene-ui-version=\"2.11.0\"] .tag-c.f-compact.s-medium{padding:0 .5rem}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .tag-c.cr-full-radius{border-radius:1.4rem}[data-gene-ui-version=\"2.11.0\"] .tag-c.cr-smooth-radius{border-radius:.6rem}[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-simple{--color:var(--background-sc)}[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-simple .tag-backdrop:before{opacity:.1}[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-simple .tag-backdrop:after{content:none}[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-minimal .tag-backdrop{--color:var(--background-sc)}[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-minimal .tag-backdrop:before{opacity:.03}[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-minimal .tag-backdrop:after{opacity:.07}[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-outline .tag-backdrop:before{content:none}[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-colored .tag-backdrop:before{opacity:.1}[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-clean{--color:var(--background-sc)}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-clean:hover{--color:var(--hero)}}[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-clean .tag-backdrop:after,[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-clean .tag-backdrop:before{content:none}[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-light .tag-backdrop:before{opacity:.1}[data-gene-ui-version=\"2.11.0\"] .tag-c:not(.active).a-light .tag-backdrop:after{border:0}[data-gene-ui-version=\"2.11.0\"] .tag-c.active{color:var(--hero-sc)}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .tag-c:hover .tag-backdrop{opacity:.6}}[data-gene-ui-version=\"2.11.0\"] .tag-c .icon,[data-gene-ui-version=\"2.11.0\"] .tag-c .tag-cc{position:relative;transition:opacity .3s;z-index:1}[data-gene-ui-version=\"2.11.0\"] .tag-c .icon{cursor:pointer;opacity:.5}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .tag-c .icon:hover{opacity:1}[data-gene-ui-version=\"2.11.0\"] .tag-c .icon:hover~.tag-cp{opacity:.6}}[data-gene-ui-version=\"2.11.0\"] .tag-backdrop{border-radius:inherit;height:100%;left:0;position:absolute;top:0;transition:opacity .3s;width:100%}[data-gene-ui-version=\"2.11.0\"] .tag-backdrop:after,[data-gene-ui-version=\"2.11.0\"] .tag-backdrop:before{border-radius:inherit;content:\"\";display:block;height:100%;left:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.11.0\"] .tag-backdrop:before{background:var(--color);transition:background .3s,opacity .3s}[data-gene-ui-version=\"2.11.0\"] .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: propTypesExports.string,
+  /**
+   * Cursor type for 'Tag'.
+   */
+  cursor: propTypesExports.string,
+  /**
+   * Name for 'Tag'.
+   */
+  name: propTypesExports.string.isRequired,
+  /**
+   * Border type of corners
+   */
+  cornerRadius: propTypesExports.oneOf(tagConfig.cornerRadius),
+  /**
+   * Chooses how to show 'Tag'
+   */
+  flexibility: propTypesExports.oneOf(tagConfig.flexibility),
+  /**
+   * Switches between different sizes of 'Tag'.
+   */
+  size: propTypesExports.oneOf(tagConfig.size),
+  /**
+   * Color/theming for 'Tag'.
+   */
+  color: propTypesExports.string,
+  /**
+   * Switches between different views of 'Tag'.
+   */
+  appearance: propTypesExports.oneOf(tagConfig.appearance),
+  /**
+   * Selected state
+   */
+  selected: propTypesExports.bool,
+  /**
+   * External/Additional className
+   */
+  className: propTypesExports.string,
+  /**
+   * Showing icons
+   */
+  icons: propTypesExports.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

@@ -0,0 +1,22 @@
+import React__default from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+
+function TextLink(_ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("span", props, children);
+}
+TextLink.propTypes = {
+  /**
+   * Any valid React node
+   */
+  children: propTypesExports.string.isRequired,
+  /**
+   * Additional className
+   */
+  className: propTypesExports.string
+};
+
+export { TextLink as default };

package/Textarea.js

@@ -0,0 +1,239 @@
+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 'react-dom';
+import './index-6ff23041.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './index-5cea9a7d.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';
+
+var css_248z = "";
+styleInject(css_248z);
+
+function Textarea(props) {
+  return /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({}, props, {
+    type: "textarea"
+  }));
+}
+Textarea.propTypes = {
+  /**
+   * Additional className
+   */
+  className: propTypesExports.string,
+  /**
+   * Control ExtendedInput disabled state with this prop
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * Borders will be colored on when "isValid" and this props are set to "true"
+   */
+  colorBorderOnError: propTypesExports.bool,
+  /**
+   * Shows an icon to clear ExtendedInput's value when set to "true"
+   */
+  showClearIcon: propTypesExports.bool,
+  /**
+   * Use this props in combo with "icon" prop. This will fire on icon click when set to "true"
+   */
+  clickableIcon: propTypesExports.bool,
+  /**
+   * Shows an error icon when "isValid" is set to "false" and this prop is set to "true"
+   */
+  showErrorIcon: propTypesExports.bool,
+  /**
+   *.
+   */
+  showClickableTooltipOnError: propTypesExports.bool,
+  /**
+   * ExtendedInput borders are colored when "isValid" and this props are set to "true"
+   */
+  colorOnValid: propTypesExports.bool,
+  /**
+   * ExtendedInput will display an icon when "isValid" and this props are set to "true"
+   */
+  showIconOnValid: propTypesExports.bool,
+  /**
+   * Shows the "errorText" value in "Tooltip" when set to "true"
+   */
+  showErrorWithTooltip: propTypesExports.bool,
+  /**
+   * Control ExtendedInput validation. For more info see "ValidatableNumberInput", "ValidatableTextInput"(integrated ExtendedInputs with "Form" organism).
+   */
+  isValid: propTypesExports.bool,
+  /**
+   * Use this prop to specify error message. This will be displayed when "isValid" is set to "false"
+   */
+  errorText: propTypesExports.string,
+  /**
+   * Use this prop to specify tooltip message.
+   */
+  tooltipText: propTypesExports.string,
+  /**
+   * Valid values are same as "Icon" type
+   */
+  icon: propTypesExports.string,
+  /**
+   * ExtendedInput placeholder
+   */
+  placeholder: propTypesExports.string,
+  /**
+   * Control items direction
+   */
+  itemsDirection: propTypesExports.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]),
+  /**
+   * ExtendedInput appearance
+   */
+  appearance: propTypesExports.oneOf(inputConfig.appearance),
+  /**
+   * ExtendedInput size
+   */
+  inputSize: propTypesExports.oneOf(inputConfig.size),
+  /**
+   * ExtendedInput corner radius
+   */
+  cornerRadius: propTypesExports.oneOf(inputConfig.cornerRadius),
+  /**
+   * Will make ExtendedInput readonly when set to "true"
+   */
+  readOnly: propTypesExports.bool,
+  /**
+   * How to display inscription in relation to it's parent in ExtendedInput
+   */
+  flexibility: propTypesExports.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]),
+  /**
+   * Shows an "Icon" to remove ExtendedInput's value
+   */
+  canClear: propTypesExports.bool,
+  /**
+   * Fires an event on clear "Icon" click((element: Element) => void)
+   */
+  onClear: propTypesExports.func,
+  /**
+   * Fires an event on ExtendedInput change((event: Event) => void)
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Specify a label for ExtendedInput
+   */
+  label: propTypesExports.string,
+  /**
+   * Specify a "label" appearance
+   */
+  labelAppearance: propTypesExports.oneOf(inputConfig.labelAppearance),
+  /**
+   * Will add an additional description field
+   */
+  description: propTypesExports.node,
+  /**
+   * Fires an event on ExtendInput <input /> click((event: Event => void))
+   */
+  onClick: propTypesExports.func,
+  /**
+   * Typing will be blocked when set to "true". Note design is different from "readonly" prop's design
+   */
+  writeProtected: propTypesExports.bool,
+  /**
+   * Callback fires when input is focused
+   */
+  onFocus: propTypesExports.func,
+  /**
+   * Callback fires when input loose focus
+   */
+  onBlur: propTypesExports.func,
+  /**
+   * Callback fires when click in icon
+   */
+  onIconClick: propTypesExports.func,
+  /**
+   * Define is input required or no.
+   */
+  required: propTypesExports.bool,
+  /**
+   * The switch between mobile and desktop version
+   */
+  screenType: propTypesExports.oneOf(screenTypes),
+  /**
+   * Define is  need input info icon required.
+   */
+  withInfoIcon: propTypesExports.bool,
+  /**
+   * ExtendedInput info icon title.
+   */
+  infoIconTitle: propTypesExports.string,
+  /**
+   * Max Length of input Value
+   */
+  maxLength: propTypesExports.number,
+  /**
+   * Show Remaining Length of input value, works only with maxLength
+   */
+  showRemainingLength: propTypesExports.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
+    }))
+  }))
+};
+Textarea.defaultProps = {
+  step: 1,
+  placeholder: '',
+  itemsDirection: inputConfig.itemsDirection[0],
+  appearance: inputConfig.appearance[0],
+  inputSize: inputConfig.size[1],
+  cornerRadius: inputConfig.cornerRadius[0],
+  readOnly: false,
+  flexibility: inputConfig.flexibility[0],
+  colorBorderOnError: true,
+  showErrorIcon: false,
+  showClickableTooltipOnError: true,
+  showErrorWithTooltip: false,
+  colorOnValid: false,
+  showIconOnValid: false,
+  canClear: false,
+  isValid: true,
+  onChange: noop,
+  onClick: noop,
+  onClear: noop,
+  onFocus: noop,
+  onBlur: noop,
+  onIconClick: noop,
+  withInfoIcon: false,
+  infoIconTitle: '',
+  label: '',
+  labelAppearance: inputConfig.labelAppearance[0],
+  description: '',
+  writeProtected: false,
+  defaultValue: '',
+  screenType: screenTypes[0]
+};
+Textarea.displayName = 'Textarea';
+
+export { Textarea as default };