@itcase/ui 1.0.92 → 1.0.93

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');
@@ -41,6 +42,7 @@ const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) =>
     labelTextColor,
     labelTextActiveColor,
     labelTextSize,
+    labelTextWrap,
     onChange
   } = props;
   const controlRef = React.useRef(null);
@@ -116,7 +118,7 @@ const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) =>
     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", {
@@ -132,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,
@@ -179,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;

package/dist/constants.js

@@ -2,6 +2,7 @@
 
 var alignDirection = require('./constants/componentProps/alignDirection.js');
 var align = require('./constants/componentProps/align.js');
+var alignment = require('./constants/componentProps/alignment.js');
 var borderColorHover = require('./constants/componentProps/borderColorHover.js');
 var borderColor = require('./constants/componentProps/borderColor.js');
 var borderType = require('./constants/componentProps/borderType.js');
@@ -9,8 +10,8 @@ var borderWidth = require('./constants/componentProps/borderWidth.js');
 var captionPosition = require('./constants/componentProps/captionPosition.js');
 var direction = require('./constants/componentProps/direction.js');
 var emojiSize = require('./constants/componentProps/emojiSize.js');
-var fillHover = require('./constants/componentProps/fillHover.js');
 var fillGradient = require('./constants/componentProps/fillGradient.js');
+var fillHover = require('./constants/componentProps/fillHover.js');
 var fill = require('./constants/componentProps/fill.js');
 var fillType = require('./constants/componentProps/fillType.js');
 var flexAlign = require('./constants/componentProps/flexAlign.js');
@@ -23,8 +24,8 @@ var gridJustifySelf = require('./constants/componentProps/gridJustifySelf.js');
 var height = require('./constants/componentProps/height.js');
 var horizontalContentAlign = require('./constants/componentProps/horizontalContentAlign.js');
 var horizontalResizeMode = require('./constants/componentProps/horizontalResizeMode.js');
-var iconSize = require('./constants/componentProps/iconSize.js');
 var iconFillSize = require('./constants/componentProps/iconFillSize.js');
+var iconSize = require('./constants/componentProps/iconSize.js');
 var itemColor = require('./constants/componentProps/itemColor.js');
 var position = require('./constants/componentProps/position.js');
 var resizeMode = require('./constants/componentProps/resizeMode.js');
@@ -57,6 +58,7 @@ var wrap = require('./constants/componentProps/wrap.js');
 
 exports.alignDirectionProps = alignDirection.default;
 exports.alignProps = align.default;
+exports.alignmentProps = alignment.default;
 exports.borderColorHoverProps = borderColorHover.default;
 exports.borderColorProps = borderColor.default;
 exports.borderTypeProps = borderType.default;
@@ -64,8 +66,8 @@ exports.borderWidthProps = borderWidth.default;
 exports.captionPositionProps = captionPosition.default;
 exports.directionProps = direction.default;
 exports.emojiSizeProps = emojiSize.default;
-exports.fillHoverProps = fillHover.default;
 exports.fillGradientProps = fillGradient.default;
+exports.fillHoverProps = fillHover.default;
 exports.fillProps = fill.default;
 exports.fillTypeProps = fillType.default;
 exports.flexAlignProps = flexAlign.default;
@@ -78,8 +80,8 @@ exports.gridJustifySelfProps = gridJustifySelf.default;
 exports.heightProps = height.default;
 exports.horizontalContentAlignProps = horizontalContentAlign.default;
 exports.horizontalResizeModeProps = horizontalResizeMode.default;
-exports.iconSizeProps = iconSize.default;
 exports.iconFillSizeProps = iconFillSize.default;
+exports.iconSizeProps = iconSize.default;
 exports.itemColorProps = itemColor.default;
 exports.positionProps = position.default;
 exports.resizeModeProps = resizeMode.default;

package/dist/css/components/Icon/Icon.css

@@ -1,5 +1,6 @@
 .icon {
   &__item {
+    position: relative;
     display: flex;
     & svg {
       transition: var(--icon-transition);
@@ -143,6 +144,13 @@
     }
   }
 }
+.icon {
+  &__tooltip {
+    min-width: 200px;
+    padding: 8px;
+    border-radius: 8px;
+  }
+}
 :root {
   --icon-transition: all 0.2s ease 0s;
   --icon-size-24-badge-position: 12px, 12px;

package/dist/css/components/Segmented/Segmented.css

@@ -70,7 +70,6 @@
           transition: color 0.5s ease;
           cursor: pointer;
           &-text {
-            @mixin word-wrap;
           }
         }
       }

package/dist/css/components/Select/Select.css

@@ -142,6 +142,7 @@
       display: flex;
       align-items: center;
       align-self: center;
+      gap: 8px;
       cursor: pointer;
       @media (--mobile) {
         align-items: flex-start;

package/dist/css/components/Select/css/__indicators/select__indicators.css

@@ -4,6 +4,7 @@
       display: flex;
       align-items: center;
       align-self: center;
+      gap: 8px;
       cursor: pointer;
       @media (--mobile) {
         align-items: flex-start;