@itcase/ui 1.0.91 → 1.0.93

package/dist/components/Empty.js

@@ -32,6 +32,11 @@ require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
 require('./Loader.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');

package/dist/components/FormField.js

@@ -15,7 +15,7 @@ require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 var index$4 = require('./Switch.js');
-var SelectContainer = require('../SelectContainer-meg_EXPO.js');
+var SelectContainer = require('../SelectContainer-umrbJtB5.js');
 require('../constants/componentProps/fill.js');
 require('../constants/componentProps/width.js');
 require('lodash/maxBy');
@@ -38,12 +38,17 @@ require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
 require('react-select');
 require('../defineProperty-ujK-k7aM.js');
 require('react-dom');
+require('./Badge.js');
 require('./Group.js');
 require('../constants/componentProps/stacking.js');
-require('../constants/componentProps/wrap.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/Icon.js

@@ -13,6 +13,7 @@ var borderType = require('../constants/componentProps/borderType.js');
 var iconSize = require('../constants/componentProps/iconSize.js');
 var shape = require('../constants/componentProps/shape.js');
 var strokeColor = require('../constants/componentProps/strokeColor.js');
+var index$1 = require('./Tooltip.js');
 require('../constants/componentProps/size.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textGradient.js');
@@ -28,6 +29,13 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('./Text.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -43,6 +51,7 @@ const iconConfig = {
   }
 };
 const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, ref) {
+  const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
   const {
     before,
     after,
@@ -58,6 +67,12 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     linkRel,
     width,
     height,
+    showTooltip,
+    tooltipText,
+    tooltipTextSize,
+    tooltipTitle,
+    tooltipTitleSize,
+    tooltipAppearance,
     onClick
   } = props;
   const svgSizes = React.useMemo(() => {
@@ -138,6 +153,10 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
+  const alignmentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'alignment_',
+    propsKey: 'alignment'
+  });
   const {
     styles: iconStyles
   } = useStyles.useStyles(props);
@@ -164,14 +183,23 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     id: id,
     ref: ref,
     style: iconStyles,
-    onClick: onClick
+    onClick: onClick,
+    onMouseEnter: () => setIsTooltipVisible(true),
+    onMouseLeave: () => setIsTooltipVisible(false)
   }, /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
     className: clsx__default.default(link || href ? 'icon__link' : 'icon__item', iconSizeClass),
     DefaultComponent: "div",
     href: link || href,
     rel: linkRel,
     target: linkTarget
-  }, before, ImageComponent, after, Badge));
+  }, before, ImageComponent, after, Badge, isTooltipVisible && showTooltip && /*#__PURE__*/React__default.default.createElement(index$1.Tooltip, {
+    className: clsx__default.default(className, 'icon__tooltip', alignmentClass),
+    appearance: tooltipAppearance,
+    text: tooltipText,
+    textSize: tooltipTextSize,
+    title: tooltipTitle,
+    titleSize: tooltipTitleSize
+  })));
 });
 Icon.propTypes = {
   borderColor: PropTypes__default.default.oneOf(borderColor.default),

package/dist/components/InputPassword.js

@@ -28,6 +28,14 @@ require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Text.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
 require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Label.js

@@ -104,7 +104,7 @@ function Label(props) {
     styles: labelStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'label', fillClass || labelConfig.appearance[appearance] && `fill_${labelConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelConfig.appearance[appearance] && `fill_hover_${labelConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'label', fillClass || labelConfig.appearance[appearance] && `fill_${labelConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelConfig.appearance[appearance] && `fill_hover_${labelConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     style: labelStyles,
     onClick: onClick

package/dist/components/LanguageSelector.js

@@ -29,6 +29,14 @@ require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Text.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/Loader.js

@@ -28,6 +28,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+// TODO: is better to use context?
 const loaderConfig = {
   appearance: {},
   setAppearance: newComponent => {
@@ -67,18 +68,24 @@ function Loader(props) {
   const {
     styles: loader
   } = useStyles.useStyles(props);
-  const itemFill = itemFillClass || loaderConfig.appearance[appearance] && `fill_${loaderConfig.appearance[appearance].itemFillClass.replace(/([A-Z])/g, '-$1')}`.toLowerCase();
+
+  /*
+   * TODO: set temporary variables by other way
+   */
+  const temporaryFillClass = fillClass || loaderConfig.appearance[appearance] && `fill_${loaderConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase();
+  const temporaryItemFillClass = itemFillClass || loaderConfig.appearance[appearance] && `fill_${loaderConfig.appearance[appearance].itemFill?.replace(/([A-Z])/g, '-$1')}`.toLowerCase();
+  /* - */
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('loader', positionClass, widthClass, heightClass, fillClass || loaderConfig.appearance[appearance] && `fill_${loaderConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), className, set && `loader_set_${set}`),
+    className: clsx__default.default('loader', positionClass, widthClass, heightClass, temporaryFillClass, className, set && `loader_set_${set}`),
     style: loader
   }, children || /*#__PURE__*/React__default.default.createElement("div", {
     className: "loader__inner"
   }, /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default('loader__item', itemFill)
+    className: clsx__default.default('loader__item', temporaryItemFillClass)
   }), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default('loader__item', itemFill)
+    className: clsx__default.default('loader__item', temporaryItemFillClass)
   }), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default('loader__item', itemFill)
+    className: clsx__default.default('loader__item', temporaryItemFillClass)
   })), text && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "loader__text",
     size: textSize,
@@ -86,19 +93,20 @@ function Loader(props) {
   }, text));
 }
 Loader.propTypes = {
-  className: PropTypes__default.default.string,
+  appearance: PropTypes__default.default.string,
   children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  set: PropTypes__default.default.string,
   text: PropTypes__default.default.string,
-  textSize: PropTypes__default.default.string,
   textColor: PropTypes__default.default.string,
-  set: PropTypes__default.default.string
+  textSize: PropTypes__default.default.string
 };
 Loader.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Loader",
   "props": {
-    "className": {
+    "appearance": {
       "description": "",
       "type": {
         "name": "string"
@@ -112,14 +120,21 @@ Loader.__docgenInfo = {
       },
       "required": false
     },
-    "text": {
+    "className": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "textSize": {
+    "set": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "text": {
       "description": "",
       "type": {
         "name": "string"
@@ -133,7 +148,7 @@ Loader.__docgenInfo = {
       },
       "required": false
     },
-    "set": {
+    "textSize": {
       "description": "",
       "type": {
         "name": "string"

package/dist/components/MenuItem.js

@@ -135,7 +135,7 @@ function MenuItem(props) {
     styles: menuItem
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass, className, sizeClass, fillClass || appearance && `fill_${menuItemConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && `menu-item_set_${set}`, justifyContentClass),
+    className: clsx__default.default('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass, className, sizeClass, fillClass || appearance && `fill_${menuItemConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && `menu-item_set_${set}`, justifyContentClass),
     style: menuItem,
     onClick: onClick,
     onMouseEnter: onMouseEnter

package/dist/components/Notification.js

@@ -72,7 +72,7 @@ function NotificationItem(props) {
     propsKey: 'fill'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('notification__item', status && `notification__item_status_${status}`, set && `notification__item_set_${set}`, size && `notification__item_set_${size}`, closeButton && 'notification__item_type_close-button', fillClass || notificationItemConfig.appearance[appearance] && `fill_${notificationItemConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    className: clsx__default.default('notification__item', status && `notification__item_status_${status}`, set && `notification__item_set_${set}`, size && `notification__item_set_${size}`, closeButton && 'notification__item_type_close-button', fillClass || notificationItemConfig.appearance[appearance] && `fill_${notificationItemConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
     "data-tour": dataTour
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'notification__item-wrapper')

package/dist/components/Search.js

@@ -31,6 +31,11 @@ require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('react-scrollbars-custom');

package/dist/components/Segmented.js

@@ -5,6 +5,7 @@ var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index = require('./Text.js');
 var fill = require('../constants/componentProps/fill.js');
+var textWrap = require('../constants/componentProps/textWrap.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textColorActive.js');
@@ -40,10 +41,16 @@ const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) =>
     size,
     labelTextColor,
     labelTextActiveColor,
-    labelTextSize
+    labelTextSize,
+    labelTextWrap,
+    onChange
   } = props;
   const controlRef = React.useRef(null);
   const segmentsRefs = React.useMemo(() => new Map(segments.map(item => [item.value, /*#__PURE__*/React.createRef()])), [segments]);
+  const onChangeValue = React.useCallback(item => {
+    onChange && onChange(item.value, name);
+    setActiveSegment && setActiveSegment(item);
+  }, [name, onChange, setActiveSegment]);
   React.useEffect(() => {
     let offsetWidth = 0;
     let offsetLeft = 0;
@@ -106,12 +113,12 @@ const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) =>
     name: name,
     type: "radio",
     value: item.value,
-    onChange: () => setActiveSegment(item)
+    onChange: () => onChangeValue(item)
   }), /*#__PURE__*/React__default.default.createElement("label", {
     className: clsx__default.default('segmented__item-label'),
     htmlFor: item.label
   }, /*#__PURE__*/React__default.default.createElement(index.Text, {
-    className: "segmented__item-label-text",
+    className: clsx__default.default('segmented__item-label-text', labelTextWrap && `word-wrap_${labelTextWrap}`),
     size: labelTextSize,
     textColor: item.value === activeSegment.value ? labelTextActiveColor : labelTextColor
   }, item.label)))), /*#__PURE__*/React__default.default.createElement("div", {
@@ -127,6 +134,7 @@ Segmented.propTypes = {
    * цвет бэкграунда выбранного элемента
    */
   indicatorFill: PropTypes__default.default.oneOf(fill.default),
+  labelTextWrap: PropTypes__default.default.oneOf(textWrap.default),
   name: PropTypes__default.default.string,
   segments: PropTypes__default.default.array,
   setActiveSegment: PropTypes__default.default.func,
@@ -174,6 +182,15 @@ Segmented.__docgenInfo = {
       },
       "required": false
     },
+    "labelTextWrap": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textWrapProps"
+      },
+      "required": false
+    },
     "name": {
       "description": "",
       "type": {

package/dist/components/Select.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var SelectContainer = require('../SelectContainer-meg_EXPO.js');
+var SelectContainer = require('../SelectContainer-umrbJtB5.js');
 require('react');
 require('prop-types');
 require('clsx');
@@ -13,33 +13,38 @@ require('lodash/camelCase');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('./Icon.js');
-require('react-inlinesvg');
-require('./Link.js');
-require('../constants/componentProps/fill.js');
-require('../constants/componentProps/size.js');
+require('./Badge.js');
+require('../constants/componentProps/shape.js');
+require('./Text.js');
 require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/size.js');
 require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('./Icon.js');
+require('react-inlinesvg');
+require('./Link.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
 require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.js');
-require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
-require('./Text.js');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
 require('./Group.js');
 require('../constants/componentProps/direction.js');
 require('../constants/componentProps/stacking.js');
-require('../constants/componentProps/wrap.js');
 require('../constants/componentProps/width.js');
 require('./Divider.js');
 
@@ -50,6 +55,7 @@ exports.SelectClearIndicator = SelectContainer.SelectClearIndicator;
 exports.SelectControl = SelectContainer.SelectControl;
 exports.SelectDropdownIndicator = SelectContainer.SelectDropdownIndicator;
 exports.SelectGroupHeading = SelectContainer.SelectGroupHeading;
+exports.SelectIndicatorsContainer = SelectContainer.SelectIndicatorsContainer;
 exports.SelectInput = SelectContainer.SelectInput;
 exports.SelectMenu = SelectContainer.SelectMenu;
 exports.SelectMultiValueContainer = SelectContainer.SelectMultiValueContainer;

package/dist/components/SiteMenu.js

@@ -30,6 +30,11 @@ require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 

package/dist/components/Tab.js

@@ -139,7 +139,7 @@ function Tab(props) {
     styles: tab
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', fillClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, reset && 'tab-reset', set && `tab_set_${set}`, justifyContentClass, onClick && 'cursor_type_pointer'),
+    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', fillClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, reset && 'tab-reset', set && `tab_set_${set}`, justifyContentClass, onClick && 'cursor_type_pointer'),
     "data-tour": dataTour,
     style: tab,
     onClick: onClick,

package/dist/components/Tile.js

@@ -39,6 +39,7 @@ require('../constants/componentProps/type.js');
 require('../constants/componentProps/underline.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');

package/dist/components/Tooltip.js

@@ -35,10 +35,17 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const tooltipConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    tooltipConfig.appearance = newComponent;
+  }
+};
 function Tooltip(props) {
   const {
     before,
     after,
+    appearance,
     className,
     text,
     title,
@@ -70,23 +77,35 @@ function Tooltip(props) {
     prefix: 'tooltip_size_',
     propsKey: 'size'
   });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
   const {
     styles: tooltipStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'tooltip', fillClass, shapeClass, alignDirectionClass, alignClass, sizeClass, arrowPosition && `tooltip_type_arrow tooltip_arrow_position_${arrowPosition}`, type && `tooltip_type_${type}`, set && `tooltip_set_${set}`),
+    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
-  }, /*#__PURE__*/React__default.default.createElement("div", {
+  }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: "tooltip__inner"
-  }, before, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
+  }, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
     className: "tooltip__title",
-    textColor: titleTextColor,
-    size: titleSize
+    size: titleSize,
+    textColor: titleTextColor || tooltipConfig.appearance[appearance]?.titleTextColor
   }, title), text && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "tooltip__text",
-    textColor: textColor,
-    size: textSize
-  }, text), after));
+    size: textSize,
+    textColor: textColor || tooltipConfig.appearance[appearance]?.textColor
+  }, text)), after);
 }
 Tooltip.propTypes = {
   children: PropTypes__default.default.any,
@@ -99,16 +118,16 @@ Tooltip.propTypes = {
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  size: PropTypes__default.default.oneOf(size.default),
+  sizeDesktop: PropTypes__default.default.oneOf(size.default),
+  sizeMobile: PropTypes__default.default.oneOf(size.default),
+  sizeTablet: PropTypes__default.default.oneOf(size.default),
   text: PropTypes__default.default.any,
+  textColor: PropTypes__default.default.oneOf(size.default),
   textSize: PropTypes__default.default.oneOf(size.default),
   textSizeDesktop: PropTypes__default.default.oneOf(size.default),
   textSizeMobile: PropTypes__default.default.oneOf(size.default),
   textSizeTablet: PropTypes__default.default.oneOf(size.default),
-  textColor: PropTypes__default.default.oneOf(size.default),
-  size: PropTypes__default.default.oneOf(size.default),
-  sizeDesktop: PropTypes__default.default.oneOf(size.default),
-  sizeMobile: PropTypes__default.default.oneOf(size.default),
-  sizeTablet: PropTypes__default.default.oneOf(size.default),
   type: PropTypes__default.default.string
 };
 Tooltip.defaultProps = {
@@ -212,14 +231,16 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "text": {
+    "size": {
       "description": "",
       "type": {
-        "name": "any"
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
       },
       "required": false
     },
-    "textSize": {
+    "sizeDesktop": {
       "description": "",
       "type": {
         "name": "enum",
@@ -228,7 +249,7 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "textSizeDesktop": {
+    "sizeMobile": {
       "description": "",
       "type": {
         "name": "enum",
@@ -237,7 +258,7 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "textSizeMobile": {
+    "sizeTablet": {
       "description": "",
       "type": {
         "name": "enum",
@@ -246,12 +267,10 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "textSizeTablet": {
+    "text": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "sizeProps"
+        "name": "any"
       },
       "required": false
     },
@@ -264,7 +283,7 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "size": {
+    "textSize": {
       "description": "",
       "type": {
         "name": "enum",
@@ -273,7 +292,7 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "sizeDesktop": {
+    "textSizeDesktop": {
       "description": "",
       "type": {
         "name": "enum",
@@ -282,7 +301,7 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "sizeMobile": {
+    "textSizeMobile": {
       "description": "",
       "type": {
         "name": "enum",
@@ -291,7 +310,7 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "sizeTablet": {
+    "textSizeTablet": {
       "description": "",
       "type": {
         "name": "enum",
@@ -311,3 +330,4 @@ Tooltip.__docgenInfo = {
 };
 
 exports.Tooltip = Tooltip;
+exports.tooltipConfig = tooltipConfig;

package/dist/constants/componentProps/alignment.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const alignmentProps = [null, 'topLeft', 'topCenter', 'topRight', 'leftCenter', 'rightCenter', 'bottomRight', 'bottomCenter', 'bottomLeft'];
+
+exports.default = alignmentProps;