@itcase/ui 1.0.97 → 1.0.100

package/dist/components/Response.js

@@ -0,0 +1,246 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var SVG = require('react-inlinesvg');
+var borderColor = require('../constants/componentProps/borderColor.js');
+var borderType = require('../constants/componentProps/borderType.js');
+var borderWidth = require('../constants/componentProps/borderWidth.js');
+var fillHover = require('../constants/componentProps/fillHover.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var size = require('../constants/componentProps/size.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var textSize = require('../constants/componentProps/textSize.js');
+var textWeight = require('../constants/componentProps/textWeight.js');
+var titleSize = require('../constants/componentProps/titleSize.js');
+var width = require('../constants/componentProps/width.js');
+var index$3 = require('./Button.js');
+var index = require('./Group.js');
+var index$2 = require('./Text.js');
+var index$1 = require('./Title.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('./Icon.js');
+require('./Link.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../hooks/useStyles.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/wrap.js');
+require('./Loader.js');
+require('../constants/componentProps/direction.js');
+require('../constants/componentProps/stacking.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var SVG__default = /*#__PURE__*/_interopDefault(SVG);
+
+const responseConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    responseConfig.appearance = newComponent;
+  }
+};
+function Response(props) {
+  const {
+    after,
+    before,
+    appearance,
+    imageSrc,
+    className,
+    title,
+    titleTextSize,
+    titleTextWeight,
+    titleTextColor,
+    message,
+    messageTextColor,
+    messageTextSize,
+    primaryButton,
+    primaryButtonAfter,
+    primaryButtonAppearance,
+    primaryButtonBefore,
+    primaryButtonFill,
+    primaryButtonFillHover,
+    primaryButtonLabel,
+    primaryButtonLabelTextColor,
+    primaryButtonLabelTextSize,
+    primaryButtonShape,
+    primaryButtonSize,
+    primaryButtonWidth,
+    secondaryButton,
+    secondaryButtonAfter,
+    secondaryButtonAppearance,
+    secondaryButtonBefore,
+    secondaryButtonFill,
+    secondaryButtonFillHover,
+    secondaryButtonLabel,
+    secondaryButtonLabelTextColor,
+    secondaryButtonLabelTextSize,
+    secondaryButtonShape,
+    secondaryButtonSize,
+    secondaryButtonWidth,
+    onClickPrimaryButton,
+    onClickSecondaryButton
+  } = props;
+  const ImageComponent = React.useMemo(() => {
+    if (imageSrc) {
+      // eslint-disable-next-line react/prop-types
+      if (imageSrc.endsWith('.svg')) {
+        return /*#__PURE__*/React__default.default.createElement(SVG__default.default, {
+          src: imageSrc
+        });
+      }
+      return /*#__PURE__*/React__default.default.createElement("img", {
+        src: imageSrc
+      });
+    }
+    return null;
+  }, [imageSrc]);
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'response_shape_',
+    propsKey: 'shape'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderColorHover'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'response', fillClass, fillHoverClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass)
+  }, before, ImageComponent, /*#__PURE__*/React__default.default.createElement(index.Group, {
+    className: "response__desc",
+    width: "fill"
+  }, title && /*#__PURE__*/React__default.default.createElement(index$1.Title, {
+    className: "response__title",
+    size: titleTextSize || responseConfig.appearance[appearance]?.titleTextSize,
+    textColor: titleTextColor || responseConfig.appearance[appearance]?.titleTextColor,
+    textWeight: titleTextWeight || responseConfig.appearance[appearance]?.titleTextWeight
+  }, title), message && /*#__PURE__*/React__default.default.createElement(index$2.Text, {
+    className: "response__message",
+    size: messageTextSize || responseConfig.appearance[appearance]?.messageTextSize,
+    textColor: messageTextColor || responseConfig.appearance[appearance]?.messageTextColor
+  }, message)), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton) && /*#__PURE__*/React__default.default.createElement(index.Group, {
+    className: "response__button",
+    width: "fill"
+  }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
+    after: primaryButtonAfter,
+    appearance: primaryButtonAppearance || responseConfig.appearance[appearance]?.primaryButtonAppearance,
+    before: primaryButtonBefore,
+    className: "response__button-item",
+    fill: primaryButtonFill,
+    fillHover: primaryButtonFillHover,
+    label: primaryButtonLabel,
+    labelTextColor: primaryButtonLabelTextColor,
+    labelTextSize: primaryButtonLabelTextSize || responseConfig.appearance[appearance]?.primaryButtonLabelTextSize,
+    shape: primaryButtonShape || responseConfig.appearance[appearance]?.primaryButtonShape,
+    size: primaryButtonSize || responseConfig.appearance[appearance]?.primaryButtonSize,
+    width: primaryButtonWidth || responseConfig.appearance[appearance]?.primaryButtonWidth,
+    onClick: onClickPrimaryButton
+  }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
+    after: secondaryButtonAfter,
+    appearance: secondaryButtonAppearance || responseConfig.appearance[appearance]?.secondaryButtonAppearance,
+    before: secondaryButtonBefore,
+    className: "response__button-item",
+    fill: secondaryButtonFill,
+    fillHover: secondaryButtonFillHover,
+    label: secondaryButtonLabel,
+    labelTextColor: secondaryButtonLabelTextColor,
+    labelTextSize: secondaryButtonLabelTextSize || responseConfig.appearance[appearance]?.secondaryButtonLabelTextSize,
+    shape: secondaryButtonShape || responseConfig.appearance[appearance]?.secondaryButtonShape,
+    size: secondaryButtonSize || responseConfig.appearance[appearance]?.secondaryButtonSize,
+    width: secondaryButtonWidth || responseConfig.appearance[appearance]?.secondaryButtonWidth,
+    onClick: onClickSecondaryButton
+  }) : secondaryButton), after);
+}
+Response.propsTypes = {
+  borderColor: PropTypes__default.default.oneOf(borderColor.default),
+  borderType: PropTypes__default.default.oneOf(borderType.default),
+  borderWidth: PropTypes__default.default.oneOf(borderWidth.default),
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillHover: PropTypes__default.default.oneOf(fillHover.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  appearance: PropTypes__default.default.string,
+  imageSrc: PropTypes__default.default.string,
+  title: PropTypes__default.default.string,
+  titleTextSize: PropTypes__default.default.oneOf(titleSize.default),
+  titleTextWeight: PropTypes__default.default.oneOf(textWeight.default),
+  titleTextColor: PropTypes__default.default.oneOf(textColor.default),
+  message: PropTypes__default.default.string,
+  messageTextColor: PropTypes__default.default.oneOf(textColor.default),
+  messageTextSize: PropTypes__default.default.oneOf(textSize.default),
+  primaryButton: PropTypes__default.default.any,
+  primaryButtonAfter: PropTypes__default.default.any,
+  primaryButtonAppearance: PropTypes__default.default.string,
+  primaryButtonBefore: PropTypes__default.default.any,
+  primaryButtonFill: PropTypes__default.default.oneOf(fill.default),
+  primaryButtonFillHover: PropTypes__default.default.oneOf(fillHover.default),
+  primaryButtonLabel: PropTypes__default.default.string,
+  primaryButtonLabelTextColor: PropTypes__default.default.oneOf(textColor.default),
+  primaryButtonLabelTextSize: PropTypes__default.default.oneOf(textSize.default),
+  primaryButtonShape: PropTypes__default.default.oneOf(shape.default),
+  primaryButtonSize: PropTypes__default.default.oneOf(size.default),
+  primaryButtonWidth: PropTypes__default.default.oneOf(width.default),
+  secondaryButton: PropTypes__default.default.any,
+  secondaryButtonAfter: PropTypes__default.default.any,
+  secondaryButtonAppearance: PropTypes__default.default.string,
+  secondaryButtonBefore: PropTypes__default.default.any,
+  secondaryButtonFill: PropTypes__default.default.oneOf(fill.default),
+  secondaryButtonFillHover: PropTypes__default.default.oneOf(fillHover.default),
+  secondaryButtonLabel: PropTypes__default.default.string,
+  secondaryButtonLabelTextColor: PropTypes__default.default.oneOf(textColor.default),
+  secondaryButtonLabelTextSize: PropTypes__default.default.oneOf(textSize.default),
+  secondaryButtonShape: PropTypes__default.default.oneOf(shape.default),
+  secondaryButtonSize: PropTypes__default.default.oneOf(size.default),
+  secondaryButtonWidth: PropTypes__default.default.oneOf(width.default),
+  onClickPrimaryButton: PropTypes__default.default.func,
+  onClickSecondaryButton: PropTypes__default.default.func
+};
+Response.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Response"
+};
+
+exports.Response = Response;
+exports.responseConfig = responseConfig;

package/dist/components/Select.js

@@ -6,7 +6,7 @@ var index$1 = require('./Icon.js');
 var Select$1 = require('react-select');
 var clsx = require('clsx');
 var ReactDOM = require('react-dom');
-var floatingUi_dom = require('../floating-ui.dom-D_Zct5p2.js');
+var floatingUi_dom = require('../floating-ui.dom-C34fOuI9.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var index$2 = require('./Badge.js');
 var index$3 = require('./Text.js');
@@ -135,34 +135,34 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _typeof(obj) {
+function _typeof(o) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
 }
 
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : String(i);
 }
 
 function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
+  key = toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -176,26 +176,26 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
 }
 
 function _classCallCheck(instance, Constructor) {
@@ -210,7 +210,7 @@ function _defineProperties(target, props) {
     descriptor.enumerable = descriptor.enumerable || false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+    Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
   }
 }
 function _createClass(Constructor, protoProps, staticProps) {
@@ -255,15 +255,12 @@ function _getPrototypeOf(o) {
 }
 
 function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
   try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {
+    return !!t;
+  })();
 }
 
 function _assertThisInitialized(self) {
@@ -2676,7 +2673,7 @@ var Emotion$1 = Emotion;
 
 var pkg = {
 	name: "@emotion/react",
-	version: "11.11.1",
+	version: "11.11.3",
 	main: "dist/emotion-react.cjs.js",
 	module: "dist/emotion-react.esm.js",
 	browser: {
@@ -2749,7 +2746,7 @@ var pkg = {
 		"@babel/runtime": "^7.18.3",
 		"@emotion/babel-plugin": "^11.11.0",
 		"@emotion/cache": "^11.11.0",
-		"@emotion/serialize": "^1.1.2",
+		"@emotion/serialize": "^1.1.3",
 		"@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
 		"@emotion/utils": "^1.2.1",
 		"@emotion/weak-memoize": "^0.3.1",
@@ -2765,7 +2762,7 @@ var pkg = {
 	},
 	devDependencies: {
 		"@definitelytyped/dtslint": "0.0.112",
-		"@emotion/css": "11.11.0",
+		"@emotion/css": "11.11.2",
 		"@emotion/css-prettifier": "1.1.3",
 		"@emotion/server": "11.11.0",
 		"@emotion/styled": "11.11.0",
@@ -3126,31 +3123,31 @@ function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
     try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
     } finally {
       try {
-        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
       } finally {
-        if (_d) throw _e;
+        if (o) throw n;
       }
     }
-    return _arr;
+    return a;
   }
 }
 

package/dist/components/Tooltip.js

@@ -41,11 +41,12 @@ const tooltipConfig = {
     tooltipConfig.appearance = newComponent;
   }
 };
-function Tooltip(props) {
+const Tooltip = /*#__PURE__*/React__default.default.forwardRef(function Tooltip(props, ref) {
   const {
     before,
     after,
     appearance,
+    children,
     className,
     text,
     title,
@@ -57,6 +58,37 @@ function Tooltip(props) {
     textColor,
     textSize
   } = props;
+  const tooltipTimeoutHideRef = React.useRef(null);
+  const isTooltipCloseAnimationInProgressRef = React.useRef(false);
+  const [isTooltipVisible, setIsTooltipVisible] = React.useState(null);
+  const openTooltip = React.useCallback(() => {
+    if (!isTooltipCloseAnimationInProgressRef.current) {
+      clearTimeout(tooltipTimeoutHideRef.current);
+      setIsTooltipVisible(true);
+    }
+  }, []);
+  const closeTooltip = React.useCallback(() => {
+    // Make a small delay to be able to move cursor on the tooltip without
+    // triggering a close, because the label and the tooltip have  space between
+    tooltipTimeoutHideRef.current = setTimeout(() => {
+      setIsTooltipVisible(prevState => {
+        const newState = false;
+        if (prevState === true) {
+          isTooltipCloseAnimationInProgressRef.current = true;
+        }
+        return newState;
+      });
+    }, 250);
+  }, []);
+  const onAnimationEnd = React.useCallback(() => {
+    isTooltipCloseAnimationInProgressRef.current = false;
+  }, []);
+  React.useImperativeHandle(ref, () => ({
+    openTooltip,
+    closeTooltip
+  }), [openTooltip, closeTooltip]);
+
+  /* STYLES */
   const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'alignDirection'
@@ -89,31 +121,50 @@ function Tooltip(props) {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
+  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const alignmentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'alignment_',
+    propsKey: 'alignment'
+  });
   const {
     styles: tooltipStyles
   } = useStyles.useStyles(props);
+  const tooltipAppearanceItem = tooltipConfig.appearance[appearance] || {};
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'tooltip', fillClass || tooltipConfig.appearance[appearance] && `fill_${tooltipConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, alignDirectionClass, alignClass, borderWidthClass, borderColorClass, borderTypeClass, sizeClass, arrowPosition && `tooltip_type_arrow tooltip_arrow_position_${arrowPosition}`, type && `tooltip_type_${type}`, set && `tooltip_set_${set}`),
-    style: tooltipStyles
+    className: clsx__default.default(className, 'tooltip', isTooltipVisible === true && 'tooltip_state_open', isTooltipVisible === false && 'tooltip_state_close', fillClass || tooltipAppearanceItem.fillClass && `fill_${tooltipAppearanceItem.fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, alignDirectionClass, alignClass, alignmentClass, borderWidthClass, borderColorClass, borderTypeClass, elevationClass, sizeClass, arrowPosition && `tooltip_type_arrow tooltip_arrow_position_${arrowPosition}`, type && `tooltip_type_${type}`, set && `tooltip_set_${set}`, widthClass),
+    style: tooltipStyles,
+    onAnimationEnd: onAnimationEnd
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: "tooltip__inner"
   }, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
     className: "tooltip__title",
     size: titleSize,
-    textColor: titleTextColor || tooltipConfig.appearance[appearance]?.titleTextColor
+    textColor: titleTextColor || tooltipAppearanceItem.titleTextColor
   }, title), text && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "tooltip__text",
     size: textSize,
-    textColor: textColor || tooltipConfig.appearance[appearance]?.textColor
-  }, text)), after);
-}
+    textColor: textColor || tooltipAppearanceItem.textColor
+  }, text), children), after);
+});
 Tooltip.propTypes = {
+  after: PropTypes__default.default.string,
+  appearance: PropTypes__default.default.string,
+  arrowPosition: PropTypes__default.default.string,
+  before: PropTypes__default.default.string,
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
   fill: PropTypes__default.default.oneOf(fill.default),
   fillDesktop: PropTypes__default.default.oneOf(fill.default),
   fillMobile: PropTypes__default.default.oneOf(fill.default),
   fillTablet: PropTypes__default.default.oneOf(fill.default),
+  set: PropTypes__default.default.string,
   shape: PropTypes__default.default.oneOf(shape.default),
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
@@ -128,20 +179,42 @@ Tooltip.propTypes = {
   textSizeDesktop: PropTypes__default.default.oneOf(size.default),
   textSizeMobile: PropTypes__default.default.oneOf(size.default),
   textSizeTablet: PropTypes__default.default.oneOf(size.default),
+  title: PropTypes__default.default.string,
+  titleSize: PropTypes__default.default.string,
+  titleTextColor: PropTypes__default.default.string,
   type: PropTypes__default.default.string
 };
-Tooltip.defaultProps = {
-  label: 'Label'
-};
+Tooltip.defaultProps = {};
 Tooltip.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Tooltip",
   "props": {
-    "label": {
-      "defaultValue": {
-        "value": "'Label'",
-        "computed": false
+    "after": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "appearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "arrowPosition": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "string"
       },
       "required": false
     },
@@ -195,6 +268,13 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
+    "set": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "shape": {
       "description": "",
       "type": {
@@ -319,6 +399,27 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
+    "title": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "titleSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "titleTextColor": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "type": {
       "description": "",
       "type": {

package/dist/css/components/Avatar/Avatar.css

@@ -14,6 +14,13 @@
       bottom: 0;
     }
   }
+  div&__dropdown {
+    margin: 10px 0 0 0;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    z-index: 100;
+  }
 }
 .avatar {
   &&_mode {

package/dist/css/components/Cell/Cell.css

@@ -1,5 +1,6 @@
 .cell {
   &__wrapper {
+    min-width: auto;
     ^&__data {
       display: flex;
       flex-flow: row nowrap;