@itcase/ui 1.0.96 → 1.0.99

package/dist/components/Swiper.js

@@ -506,6 +506,7 @@ function getDevice(overrides) {
 let browser;
 function calcBrowser() {
   const window = getWindow();
+  const device = getDevice();
   let needPerspectiveFix = false;
   function isSafari() {
     const ua = window.navigator.userAgent.toLowerCase();
@@ -518,10 +519,14 @@ function calcBrowser() {
       needPerspectiveFix = major < 16 || major === 16 && minor < 2;
     }
   }
+  const isWebView = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(window.navigator.userAgent);
+  const isSafariBrowser = isSafari();
+  const need3dFix = isSafariBrowser || isWebView && device.ios;
   return {
-    isSafari: needPerspectiveFix || isSafari(),
+    isSafari: needPerspectiveFix || isSafariBrowser,
     needPerspectiveFix,
-    isWebView: /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(window.navigator.userAgent)
+    need3dFix,
+    isWebView
   };
 }
 function getBrowser() {
@@ -1827,7 +1832,7 @@ function slideTo(index, speed, runCallbacks, internal, initial) {
     wrapperEl,
     enabled
   } = swiper;
-  if (swiper.animating && params.preventInteractionOnTransition || !enabled && !internal && !initial) {
+  if (swiper.animating && params.preventInteractionOnTransition || !enabled && !internal && !initial || swiper.destroyed) {
     return false;
   }
   const skip = Math.min(swiper.params.slidesPerGroupSkip, slideIndex);
@@ -1967,6 +1972,7 @@ function slideToLoop(index, speed, runCallbacks, internal) {
     index = indexAsNumber;
   }
   const swiper = this;
+  if (swiper.destroyed) return;
   const gridEnabled = swiper.grid && swiper.params.grid && swiper.params.grid.rows > 1;
   let newIndex = index;
   if (swiper.params.loop) {
@@ -2035,7 +2041,7 @@ function slideNext(speed, runCallbacks, internal) {
     params,
     animating
   } = swiper;
-  if (!enabled) return swiper;
+  if (!enabled || swiper.destroyed) return swiper;
   let perGroup = params.slidesPerGroup;
   if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {
     perGroup = Math.max(swiper.slidesPerViewDynamic('current', true), 1);
@@ -2079,7 +2085,7 @@ function slidePrev(speed, runCallbacks, internal) {
     enabled,
     animating
   } = swiper;
-  if (!enabled) return swiper;
+  if (!enabled || swiper.destroyed) return swiper;
   const isVirtual = swiper.virtual && params.virtual.enabled;
   if (params.loop) {
     if (animating && !isVirtual && params.loopPreventsSliding) return false;
@@ -2139,6 +2145,7 @@ function slideReset(speed, runCallbacks, internal) {
     runCallbacks = true;
   }
   const swiper = this;
+  if (swiper.destroyed) return;
   return swiper.slideTo(swiper.activeIndex, speed, runCallbacks, internal);
 }
 
@@ -2154,6 +2161,7 @@ function slideToClosest(speed, runCallbacks, internal, threshold) {
     threshold = 0.5;
   }
   const swiper = this;
+  if (swiper.destroyed) return;
   let index = swiper.activeIndex;
   const skip = Math.min(swiper.params.slidesPerGroupSkip, index);
   const snapIndex = skip + Math.floor((index - skip) / swiper.params.slidesPerGroup);
@@ -2182,6 +2190,7 @@ function slideToClosest(speed, runCallbacks, internal, threshold) {
 
 function slideToClickedSlide() {
   const swiper = this;
+  if (swiper.destroyed) return;
   const {
     params,
     slidesEl
@@ -3538,6 +3547,7 @@ var defaults = {
   init: true,
   direction: 'horizontal',
   oneWayMovement: false,
+  swiperElementNodeName: 'SWIPER-CONTAINER',
   touchEventsTarget: 'wrapper',
   initialSlide: 0,
   speed: 300,
@@ -3978,11 +3988,11 @@ let Swiper$2 = class Swiper {
     let spv = 1;
     if (typeof params.slidesPerView === 'number') return params.slidesPerView;
     if (params.centeredSlides) {
-      let slideSize = slides[activeIndex] ? slides[activeIndex].swiperSlideSize : 0;
+      let slideSize = slides[activeIndex] ? Math.ceil(slides[activeIndex].swiperSlideSize) : 0;
       let breakLoop;
       for (let i = activeIndex + 1; i < slides.length; i += 1) {
         if (slides[i] && !breakLoop) {
-          slideSize += slides[i].swiperSlideSize;
+          slideSize += Math.ceil(slides[i].swiperSlideSize);
           spv += 1;
           if (slideSize > swiperSize) breakLoop = true;
         }
@@ -4119,7 +4129,7 @@ let Swiper$2 = class Swiper {
       return false;
     }
     el.swiper = swiper;
-    if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === 'SWIPER-CONTAINER') {
+    if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === swiper.params.swiperElementNodeName.toUpperCase()) {
       swiper.isElement = true;
     }
     const getWrapperSelector = () => {
@@ -4311,7 +4321,7 @@ Object.keys(prototypes).forEach(prototypeGroup => {
 Swiper$2.use([Resize, Observer]);
 
 /* underscore in name -> watch for changes */
-const paramsList = ['eventsPrefix', 'injectStyles', 'injectStylesUrls', 'modules', 'init', '_direction', 'oneWayMovement', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', 'breakpointsBase', '_spaceBetween', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopAdditionalSlides', 'loopAddBlankSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideFullyVisibleClass', 'slideNextClass', 'slidePrevClass', 'slideBlankClass', 'wrapperClass', 'lazyPreloaderClass', 'lazyPreloadPrevNext', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',
+const paramsList = ['eventsPrefix', 'injectStyles', 'injectStylesUrls', 'modules', 'init', '_direction', 'oneWayMovement', 'swiperElementNodeName', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', 'breakpointsBase', '_spaceBetween', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopAdditionalSlides', 'loopAddBlankSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideFullyVisibleClass', 'slideNextClass', 'slidePrevClass', 'slideBlankClass', 'wrapperClass', 'lazyPreloaderClass', 'lazyPreloadPrevNext', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',
 // modules
 'a11y', '_autoplay', '_controller', 'coverflowEffect', 'cubeEffect', 'fadeEffect', 'flipEffect', 'creativeEffect', 'cardsEffect', 'hashNavigation', 'history', 'keyboard', 'mousewheel', '_navigation', '_pagination', 'parallax', '_scrollbar', '_thumbs', 'virtual', 'zoom', 'control'];
 
@@ -4666,15 +4676,15 @@ const updateOnVirtualData = swiper => {
 };
 
 /**
- * Swiper React 11.0.5
+ * Swiper React 11.0.6
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
- * Copyright 2014-2023 Vladimir Kharlampidi
+ * Copyright 2014-2024 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: November 22, 2023
+ * Released on: February 5, 2024
  */
 
 
@@ -4896,7 +4906,7 @@ const Swiper$1 = /*#__PURE__*/React.forwardRef(function (_temp, externalElRef) {
       scrollbarEl: scrollbarElRef.current,
       swiper: swiperRef.current
     }, swiperParams);
-    if (onSwiper) onSwiper(swiperRef.current);
+    if (onSwiper && !swiperRef.current.destroyed) onSwiper(swiperRef.current);
     // eslint-disable-next-line
     return () => {
       if (swiperRef.current && !swiperRef.current.destroyed) {

package/dist/components/Text.js

@@ -27,9 +27,16 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const textConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    textConfig.appearance = newComponent;
+  }
+};
 function Text(props) {
   const {
     after,
+    appearance,
     before,
     children,
     className,
@@ -60,6 +67,10 @@ function Text(props) {
     prefix: 'text-color_',
     propsKey: 'textColor'
   });
+  const textAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-align_',
+    propsKey: 'textAlign'
+  });
   const textColorActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-color_active_',
     propsKey: 'textColorActive'
@@ -89,7 +100,7 @@ function Text(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'text', sizeClass, weightClass, textColorClass, textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && `text_type_${type}`, mode && `text_mode_${mode}`, widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'text', sizeClass || textConfig.appearance[appearance] && `text_size_${textConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, textAlignClass, textColorClass || textConfig.appearance[appearance] && `text-color_${textConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && `text_type_${type}`, mode && `text_mode_${mode}`, widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     htmlFor: htmlFor,
     style: textStyles,
@@ -346,3 +357,4 @@ Text.__docgenInfo = {
 };
 
 exports.Text = Text;
+exports.textConfig = textConfig;

package/dist/components/Textarea.js

@@ -23,10 +23,15 @@ const textareaConfig = {
   state: {},
   setState: newComponent => {
     textareaConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    textareaConfig.appearance = newComponent;
   }
 };
 function Textarea(props) {
   const {
+    appearance,
     id,
     className,
     placeholder,
@@ -82,7 +87,7 @@ function Textarea(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("textarea", {
-    className: clsx__default.default(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, borderColorClass || textareaConfig.state[state]?.borderColor && `border-color_${textareaConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorHoverClass, placeholderTextColorClass || textareaConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${textareaConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), sizeClass, shapeClass, textSizeClass, textColorClass || textareaConfig.state[state]?.textColor && `text-color_${textareaConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass),
+    className: clsx__default.default(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, borderColorClass || textareaConfig.state[state]?.borderColor && `border-color_${textareaConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || textareaConfig.appearance[appearance]?.borderColor && `border-color_${textareaConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorHoverClass || textareaConfig.appearance[appearance]?.borderHover && `border-color_hover_${textareaConfig.appearance[appearance].borderHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || textareaConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${textareaConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || textareaConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${textareaConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), sizeClass, shapeClass || textareaConfig.appearance[appearance]?.shape && `textarea_shape_${textareaConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || textareaConfig.appearance[appearance]?.textSize && `text_size_${textareaConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || textareaConfig.state[state]?.textColor && `text-color_${textareaConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || textareaConfig.appearance[appearance]?.textColor && `text-color_${textareaConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass),
     id: id,
     disabled: disabled,
     placeholder: placeholder,

package/dist/components/Title.js

@@ -29,6 +29,12 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const titleConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    titleConfig.appearance = newComponent;
+  }
+};
 function Title(props) {
   const {
     dataTour,
@@ -42,6 +48,7 @@ function Title(props) {
     onClick
   } = props;
   const {
+    appearance,
     mode,
     size,
     sizeMobile,
@@ -114,7 +121,7 @@ function Title(props) {
     return size;
   }, [isMobile, isTablet, isDesktop]);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'title', fillColorClass, size && `title_size_${size}`, mode && `title_mode_${mode}`, textColorClass, textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && `word-wrap_${textWrap}`),
+    className: clsx__default.default(className, 'title', fillColorClass, size && `title_size_${size}`, mode && `title_mode_${mode}`, textColorClass || titleConfig.appearance[appearance] && `text-color_${titleConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && `word-wrap_${textWrap}`),
     "data-tour": dataTour,
     onClick: onClick,
     style: titleStyles
@@ -151,7 +158,7 @@ Title.propTypes = {
   onClick: PropTypes__default.default.func
 };
 Title.defaultProps = {
-  size: 'h1'
+  size: 'h3'
 };
 Title.__docgenInfo = {
   "description": "",
@@ -160,7 +167,7 @@ Title.__docgenInfo = {
   "props": {
     "size": {
       "defaultValue": {
-        "value": "'h1'",
+        "value": "'h3'",
         "computed": false
       },
       "description": "",
@@ -390,3 +397,4 @@ Title.__docgenInfo = {
 };
 
 exports.Title = Title;
+exports.titleConfig = titleConfig;

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;
     }
   }
+  &__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;

package/dist/css/components/Chips/Chips.css

@@ -13,31 +13,31 @@
 .chips {
   &&_size {
     &_xxs {
-      padding: 2px 6px;
+      padding: var(--chips-size-xxs-padding, 2px 6px);
       @mixin text-s;
     }
     &_xs {
-      padding: 2px 6px;
+      padding: var(--chips-size-xs-padding, 2px 6px);
       @mixin text-s;
     }
     &_s {
-      padding: 2px 6px;
+      padding: var(--chips-size-s-padding, 2px 6px);
       @mixin text-s;
     }
     &_m {
-      padding: 2px 6px;
+      padding: var(--chips-size-m-padding, 2px 6px);
       @mixin text-m;
     }
     &_l {
-      padding: 2px 6px;
+      padding: var(--chips-size-l-padding, 2px 6px);
       @mixin text-l;
     }
     &_xl {
-      padding: 2px 6px;
+      padding: var(--chips-size-xl-padding, 2px 6px);
       @mixin text-l;
     }
     &_xxl {
-      padding: 6px 12px;
+      padding: var(--chips-size-xxl-padding, 6px 12px);
       @mixin text-xxl;
     }
   }