@itcase/ui 1.0.91 → 1.0.93

package/dist/{SelectContainer-meg_EXPO.js → SelectContainer-umrbJtB5.js}

@@ -7,10 +7,11 @@ var Select$1 = require('react-select');
 var defineProperty = require('./defineProperty-ujK-k7aM.js');
 var ReactDOM = require('react-dom');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var index$2 = require('./components/Badge.js');
 var index$1 = require('./components/Icon.js');
-var index$2 = require('./components/Text.js');
-var index$3 = require('./components/Group.js');
-var index$4 = require('./components/Divider.js');
+var index$3 = require('./components/Text.js');
+var index$4 = require('./components/Group.js');
+var index$5 = require('./components/Divider.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -7658,6 +7659,28 @@ SelectControl.__docgenInfo = {
   }
 };
 
+const SelectIndicatorsContainer = props => {
+  const {
+    badgeAppearance,
+    badgeSize,
+    badgeTextSize,
+    showBadge,
+    value
+  } = props.selectProps;
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.IndicatorsContainer, props, showBadge && value?.length > 0 ? /*#__PURE__*/React__namespace.default.createElement(index$2.Badge, {
+    appearance: badgeAppearance,
+    size: badgeSize,
+    textSize: badgeTextSize,
+    value: value.length
+  }) : null, props.children);
+};
+SelectIndicatorsContainer.propTypes = {};
+SelectIndicatorsContainer.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SelectIndicatorsContainer"
+};
+
 const SelectDropdownIndicator = props => {
   const {
     dropdownIcon,
@@ -7722,7 +7745,7 @@ const SelectGroupHeading = props => {
   } = props.selectProps;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.GroupHeading, Object.assign({}, props, {
     className: clsx__default.default('select__menu-group-heading', headingFill, headingFillHover)
-  }), /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  }), /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
     size: headingTextSize,
     textWeight: headingTextWeight,
     textColor: headingTextColor
@@ -7857,7 +7880,7 @@ const SelectMultiValueContainer = props => {
     multipleItemFill,
     multipleItemFillHover
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueContainer, props, /*#__PURE__*/React__namespace.default.createElement(index$3.Group, {
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueContainer, props, /*#__PURE__*/React__namespace.default.createElement(index$4.Group, {
     className: "select__multi-value-wrapper",
     direction: "horizontal",
     alignItems: "center",
@@ -7877,7 +7900,7 @@ const SelectMultiValueLabel = props => {
     multipleItemTextSize,
     multipleItemTextColor
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueLabel, props, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueLabel, props, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
     size: multipleItemTextSize,
     textColor: multipleItemTextColor
   }, props.data.label));
@@ -7917,7 +7940,7 @@ const SelectNoOptions = props => {
   } = props.selectProps;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.NoOptionsMessage, Object.assign({}, props, {
     className: clsx__default.default(optionFill, optionBorder, optionBorderType)
-  }), /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  }), /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
     size: noOptionsTextSize,
     textColor: noOptionsTextColor
   }, noOptionsText));
@@ -7991,13 +8014,13 @@ const SelectOption = props => {
   } = props.selectProps;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Option, Object.assign({}, props, {
     className: clsx__default.default('select__menu-list-item', isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionFill, optionBorder, optionBorderType, optionFillHover, optionShape)
-  }), optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  }), optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
     className: "select__menu-list-item_option",
     size: optionTextSize,
     textColor: optionTextColor
   }, label), isSelected && /*#__PURE__*/React__namespace.default.createElement("div", {
     className: "select__menu-list-item_selected"
-  }, optionSelected), optionAfter, showDivider && /*#__PURE__*/React__namespace.default.createElement(index$4.Divider, {
+  }, optionSelected), optionAfter, showDivider && /*#__PURE__*/React__namespace.default.createElement(index$5.Divider, {
     direction: dividerDirection,
     fill: dividerFill,
     size: dividerSize,
@@ -8076,7 +8099,7 @@ const SelectPlaceholder = props => {
     placeholderTextSize,
     placeholderTextColor
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Placeholder, props, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Placeholder, props, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
     size: placeholderTextSize,
     textColor: placeholderTextColor
   }, props.children));
@@ -8128,7 +8151,7 @@ const SelectSingleValue = props => {
     inputTextSize,
     inputTextColor
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.SingleValue, props, data.optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.SingleValue, props, data.optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
     size: inputTextSize,
     textColor: inputTextColor
   }, props.children), data.optionAfter);
@@ -8234,6 +8257,9 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     className,
     after,
     before,
+    badgeAppearance,
+    badgeSize,
+    badgeTextSize,
     hideSelectedOptions,
     menuAfter,
     menuBefore,
@@ -8273,6 +8299,7 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     placeholderTextSize,
     placeholderTextColor,
     set,
+    showBadge,
     value,
     onChange
   } = props;
@@ -8397,75 +8424,77 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     className: clsx__default.default(className, 'select', fillClass, fillHoverClass, shapeClass, borderColorClass, sizeClass, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`),
     classNamePrefix: "select",
     styles: clearStyle,
-    value: value,
     after: after,
+    badgeAppearance: badgeAppearance,
+    badgeSize: badgeSize,
+    badgeTextSize: badgeTextSize,
     before: before,
-    menuAfter: menuAfter,
-    menuBefore: menuBefore,
-    elevation: elevation,
-    isClearable: isClearable,
-    openMenuOnClick: openMenuOnClick,
     clearIcon: clearIcon,
     clearIconFill: clearIconFill,
     clearIconStroke: clearIconStroke,
     closeMenuOnSelect: closeMenuOnSelect ?? false,
     defaultValue: initialValue,
-    showDivider: showDivider,
     dividerDirection: dividerDirection,
     dividerFill: dividerFill,
     dividerSize: dividerSize,
     dropdownIcon: dropdownIcon,
     dropdownIconFill: dropdownIconFill,
     dropdownIconStroke: dropdownIconStroke,
+    elevation: elevation,
     filterOption: filterOption,
-    hideSelectedOptions: hideSelectedOptions,
-    isMulti: isMulti,
-    isSearchable: isSearchable,
-    set: set,
-    optionFill: optionFillClass,
-    menuItemSize: menuItemSize,
-    optionFillHover: optionFillHoverClass,
-    optionTextSize: optionTextSizeClass,
-    optionTextColor: optionTextColorClass,
-    optionShape: optionShapeClass,
-    optionBorder: optionBorderClass,
-    optionBorderType: optionBorderTypeClass,
-    optionSelected: optionSelected,
-    optionBefore: optionBefore,
-    optionAfter: optionAfter,
-    inputBefore: inputBefore,
-    inputAfter: inputAfter,
-    inputFill: inputFillClass,
-    inputTextSize: inputTextSizeClass,
-    inputTextColor: inputTextColorClass,
-    inputCaretColor: inputCaretColorClass,
-    inputShape: inputShapeClass,
-    inputBorderColor: inputBorderColorClass,
-    inputBorderColorHover: inputBorderColorHoverClass,
-    placeholder: placeholder,
-    placeholderTextSize: placeholderTextSize,
-    placeholderTextColor: placeholderTextColor,
-    noOptionsTextSize: noOptionsTextSizeClass,
-    noOptionsTextColor: noOptionsTextColorClass,
-    noOptionsText: noOptionsText,
-    noOptionsFill: optionFillClass,
-    noOptionBorder: optionBorderClass,
-    noOptionBorderType: optionBorderTypeClass,
     headingFill: headingFillClass,
     headingFillHover: headingFillHoverClass,
-    headingTextSize: headingTextSizeClass,
     headingTextColor: headingTextColorClass,
+    headingTextSize: headingTextSizeClass,
     headingTextWeight: headingTextWeightClass,
+    hideSelectedOptions: hideSelectedOptions,
+    inputAfter: inputAfter,
+    inputBefore: inputBefore,
+    inputBorderColor: inputBorderColorClass,
+    inputBorderColorHover: inputBorderColorHoverClass,
+    inputCaretColor: inputCaretColorClass,
+    inputFill: inputFillClass,
+    inputShape: inputShapeClass,
+    inputTextColor: inputTextColorClass,
+    inputTextSize: inputTextSizeClass,
+    menuAfter: menuAfter,
+    menuBefore: menuBefore,
+    menuItemSize: menuItemSize,
     multipleItemFill: multipleItemFill,
     multipleItemFillHover: multipleItemFillHover,
-    multipleItemTextSize: multipleItemTextSizeClass,
-    multipleItemTextColor: multipleItemTextColorClass,
     multipleItemIcon: multipleItemIcon,
     multipleItemIconFill: multipleItemIconFill,
+    multipleItemTextColor: multipleItemTextColorClass,
+    multipleItemTextSize: multipleItemTextSizeClass,
+    noOptionBorder: optionBorderClass,
+    noOptionBorderType: optionBorderTypeClass,
+    noOptionsFill: optionFillClass,
+    noOptionsText: noOptionsText,
+    noOptionsTextColor: noOptionsTextColorClass,
+    noOptionsTextSize: noOptionsTextSizeClass,
+    openMenuOnClick: openMenuOnClick,
+    optionAfter: optionAfter,
+    optionBefore: optionBefore,
+    optionBorder: optionBorderClass,
+    optionBorderType: optionBorderTypeClass,
+    optionFill: optionFillClass,
+    optionFillHover: optionFillHoverClass,
     options: options,
+    optionSelected: optionSelected,
+    optionShape: optionShapeClass,
+    optionTextColor: optionTextColorClass,
+    optionTextSize: optionTextSizeClass,
+    placeholder: placeholder,
+    placeholderTextColor: placeholderTextColor,
+    placeholderTextSize: placeholderTextSize,
     ref: selectRef,
+    set: set,
+    showDivider: showDivider,
+    showBadge: showBadge,
+    value: value,
     components: {
       Control: SelectControl,
+      IndicatorsContainer: SelectIndicatorsContainer,
       ClearIndicator: SelectClearIndicator,
       DropdownIndicator: SelectDropdownIndicator,
       IndicatorSeparator: () => null,
@@ -8481,6 +8510,9 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
       NoOptionsMessage: SelectNoOptions,
       GroupHeading: SelectGroupHeading
     },
+    isClearable: isClearable,
+    isMulti: isMulti,
+    isSearchable: isSearchable,
     onChange: onChange
   });
 });
@@ -8684,6 +8716,7 @@ exports.SelectContainer = SelectContainer;
 exports.SelectControl = SelectControl;
 exports.SelectDropdownIndicator = SelectDropdownIndicator;
 exports.SelectGroupHeading = SelectGroupHeading;
+exports.SelectIndicatorsContainer = SelectIndicatorsContainer;
 exports.SelectInput = SelectInput;
 exports.SelectMenu = SelectMenu;
 exports.SelectMultiValueContainer = SelectMultiValueContainer;

package/dist/components/Accordion.js

@@ -31,6 +31,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('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 
@@ -43,20 +48,31 @@ var castArray__default = /*#__PURE__*/_interopDefault(castArray);
 
 var ChevronDown16 = function ChevronDown16(props) {
   return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M2.50398 4.75303C2.81229 4.41566 3.31216 4.41566 3.62047 4.75303L8.1611 9.72163C8.22276 9.7891 8.32274 9.7891 8.3844 9.72163L12.925 4.75303C13.2333 4.41566 13.7332 4.41566 14.0415 4.75303C14.3498 5.09039 14.3498 5.63737 14.0415 5.97474L9.50088 10.9433C8.8226 11.6856 7.7229 11.6856 7.04462 10.9433L2.50398 5.97474C2.19567 5.63737 2.19567 5.09039 2.50398 4.75303Z"
+    d: "M8 11C8.23051 11 8.42712 10.9233 8.60339 10.764L13.7763 6.16224C13.9254 6.03835 14 5.87316 14 5.68437C14 5.30088 13.661 5 13.2136 5C12.9966 5 12.8 5.0767 12.6508 5.20649L8 9.35398L3.34915 5.20649C3.19322 5.0767 2.99661 5 2.77966 5C2.33898 5 2 5.30089 2 5.68437C2 5.87316 2.07458 6.03835 2.22373 6.16224L7.39661 10.764C7.57288 10.9233 7.76949 10.9941 8 11Z"
   }));
 };
 ChevronDown16.defaultProps = {
-  width: "17",
+  width: "16",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+var ChevronTop16 = function ChevronTop16(props) {
+  return /*#__PURE__*/React__default.default.createElement("svg", props, /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M8 5C7.76949 5 7.57288 5.0767 7.39661 5.23599L2.22373 9.83776C2.07458 9.96165 2 10.1268 2 10.3156C2 10.6991 2.33898 11 2.78644 11C3.00339 11 3.2 10.9233 3.34915 10.7935L8 6.64602L12.6508 10.7935C12.8068 10.9233 13.0034 11 13.2203 11C13.661 11 14 10.6991 14 10.3156C14 10.1268 13.9254 9.96165 13.7763 9.83776L8.60339 5.23599C8.42712 5.0767 8.23051 5.0059 8 5Z"
+  }));
+};
+ChevronTop16.defaultProps = {
+  width: "16",
   height: "16",
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
   stroke: "none"
 };
 const icon16 = {
-  chevron_down: ChevronDown16
+  ChevronDown: ChevronDown16,
+  ChevronTop: ChevronTop16
 };
 
 /* React, PropTypes, other third-party modules */
@@ -79,6 +95,7 @@ function AccordionItem(props) {
     contentTextSize,
     contentTextColor,
     contentTextWeight,
+    size,
     isExpanded,
     onClick
   } = props;
@@ -132,7 +149,7 @@ function AccordionItem(props) {
     styles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, isExpanded && 'accordion-item_state_open'),
+    className: clsx__default.default('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && `accordion-item_size_${size}`, isExpanded && 'accordion-item_state_open'),
     style: styles
   }, /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: clsx__default.default('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, onClickTitle && 'cursor_type_pointer'),
@@ -146,7 +163,7 @@ function AccordionItem(props) {
   }, icon || /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     iconFill: iconFill,
     size: "16",
-    SvgImage: icon16.chevron_down
+    SvgImage: icon16.ChevronDown
   })), beforeContent && beforeContent, isExpanded && (/*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('accordion-item__content', contentBorderColorClass, contentFillClass)
   }, children || content && /*#__PURE__*/React__default.default.createElement(index.Text, {
@@ -488,6 +505,10 @@ function Accordion(props) {
     prefix: 'accordion_shape_',
     propsKey: 'shape'
   });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
 
   /*
    * paddingHorizontalWrapper="16px"
@@ -499,7 +520,7 @@ function Accordion(props) {
     wrapper: accordionWrapperStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'accordion', borderColorClass, directionClass, fillClass, shapeClass),
+    className: clsx__default.default(className, 'accordion', borderColorClass, directionClass, fillClass, shapeClass, widthClass),
     style: accordionStyles
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "accordion__wrapper",

package/dist/components/Avatar.js

@@ -35,6 +35,11 @@ require('../constants/componentProps/underline.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('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Badge.js

@@ -80,7 +80,7 @@ function Badge(props) {
     styles: badgeStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'badge', !value && 'badge_type_status', borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass || badgeConfig.appearance[appearance] && `fill_${badgeConfig.appearance[appearance].fillClass}`?.replace(/([A-Z])/g, '-$1').toLowerCase(), positionClass, sizeClass, shapeClass),
+    className: clsx__default.default(className, 'badge', !value && 'badge_type_status', borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass || badgeConfig.appearance[appearance] && `fill_${badgeConfig.appearance[appearance].fill}`?.replace(/([A-Z])/g, '-$1').toLowerCase(), positionClass, sizeClass, shapeClass),
     style: badgeStyles
   }, children || value && /*#__PURE__*/React__default.default.createElement(index.Text, {
     size: textSize,

package/dist/components/Breadcrumbs.js

@@ -19,22 +19,27 @@ require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
-require('../constants/componentProps/size.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
-require('lodash/castArray');
+require('../constants/componentProps/wrap.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('lodash/castArray');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../constants/componentProps/size.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/underline.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/Button.js

@@ -19,18 +19,23 @@ require('react-inlinesvg');
 require('../constants/componentProps/borderColor.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/textColor.js');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/underline.js');
-require('lodash/castArray');
-require('lodash/camelCase');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/underline.js');
+require('lodash/castArray');
+require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
@@ -132,7 +137,7 @@ const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(pr
     label: labelStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
-    className: clsx__default.default(className, 'button', type && `button_type_${type}`, borderWidthClass, borderColorClass, borderTypeClass, fillClass || buttonConfig.appearance[appearance] && `fill_${buttonConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || buttonConfig.appearance[appearance] && `fill_hover_${buttonConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, sizeClass, widthClass, elevationClass, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc || icon || iconSrc) && 'button_type_icon', label && (after || before || icon || iconAfter || iconAfterSrc || iconBefore || iconBeforeSrc || iconSrc) && `button_type_with-icon button_type_with-icon_${size}`),
+    className: clsx__default.default(className, 'button', type && `button_type_${type}`, borderWidthClass, borderColorClass, borderTypeClass, fillClass || buttonConfig.appearance[appearance] && `fill_${buttonConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || buttonConfig.appearance[appearance] && `fill_hover_${buttonConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, sizeClass, widthClass, elevationClass, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc || icon || iconSrc) && 'button_type_icon', label && (after || before || icon || iconAfter || iconAfterSrc || iconBefore || iconBeforeSrc || iconSrc) && `button_type_with-icon button_type_with-icon_${size}`),
     "data-tour": dataTour,
     DefaultComponent: "button",
     disabled: isDisabled,

package/dist/components/Cell.js

@@ -30,9 +30,13 @@ 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('../constants/componentProps/textAlign.js');
 require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -44,10 +48,9 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Cell(props) {
   const {
     className,
-    showTitleIcon,
     titleIconFill,
     titleIconFillSize,
-    titleIconIconFill,
+    titleIconItemFill,
     titleIconFillHover,
     titleIconStroke,
     titleIconSrc,
@@ -55,7 +58,7 @@ function Cell(props) {
     titleIcon,
     valueIconFill,
     valueIconFillSize,
-    valueIconIconFill,
+    valueIconItemFill,
     valueIconFillHover,
     valueIconStroke,
     valueIconSrc,
@@ -83,7 +86,7 @@ function Cell(props) {
     titleLabelTextSize,
     titleLabelShape,
     titleLabelSize,
-    isShowValueLabel,
+    showValueLabel,
     valueLabelAppearance,
     valueLabel,
     valueLabelTextSize,
@@ -162,11 +165,11 @@ function Cell(props) {
     textColor: titleTextColor,
     textWeight: titleTextWeight,
     textWrap: titleTextWrap
-  }, title), showTitleIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+  }, title), (titleIcon || titleIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "cell__icon",
     fill: titleIconFill,
     fillSize: titleIconFillSize,
-    iconFill: titleIconIconFill,
+    iconFill: titleIconItemFill,
     iconFillHover: titleIconFillHover,
     iconStroke: titleIconStroke,
     imageSrc: titleIconSrc,
@@ -187,17 +190,17 @@ function Cell(props) {
     textColor: valueTextColor,
     textWeight: valueTextWeight,
     textWrap: valueTextWrap
-  }, value), valueIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+  }, value), (valueIcon || valueIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "cell__icon",
     fill: valueIconFill,
     fillSize: valueIconFillSize,
-    iconFill: valueIconIconFill,
+    iconFill: valueIconItemFill,
     iconFillHover: valueIconFillHover,
     iconStroke: valueIconStroke,
     imageSrc: valueIconSrc,
     shape: valueIconShape,
     SvgImage: valueIcon
-  }), isShowValueLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
+  }), showValueLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
     appearance: valueLabelAppearance,
     label: valueLabel,
     labelTextSize: valueLabelTextSize,

package/dist/components/Chips.js

@@ -85,7 +85,7 @@ function Chips(props) {
     styles: chipsStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'chips', fillClass || chipsConfig.appearance[appearance] && `fill_${chipsConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || chipsConfig.appearance[appearance] && `fill_hover_${chipsConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`),
+    className: clsx__default.default(className, 'chips', fillClass || chipsConfig.appearance[appearance] && `fill_${chipsConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || chipsConfig.appearance[appearance] && `fill_hover_${chipsConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`),
     style: chipsStyles,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Choice.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('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/ContextMenu.js

@@ -33,6 +33,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('../constants/componentProps/direction.js');
 require('../constants/componentProps/width.js');
 

package/dist/components/CookiesWarning.js

@@ -32,11 +32,15 @@ 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('./Loader.js');
 require('../constants/componentProps/width.js');
 require('../constants/componentProps/direction.js');
 require('../constants/componentProps/stacking.js');
-require('../constants/componentProps/wrap.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/castArray');

package/dist/components/DatePicker.js

@@ -41,6 +41,10 @@ require('react-inlinesvg');
 require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/Dropdown.js

@@ -105,11 +105,15 @@ function Dropdown(props) {
     prefix: 'elevation_',
     propsKey: 'elevation'
   });
+  const alignmentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'alignment_',
+    propsKey: 'alignment'
+  });
   const {
     styles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'dropdown', set && `dropdown_set_${set}`, shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
+    className: clsx__default.default(className, 'dropdown', alignmentClass, set && `dropdown_set_${set}`, shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
     ref: dropdownRef,
     style: styles
   }, children && /*#__PURE__*/React__default.default.createElement("div", {
@@ -125,7 +129,8 @@ Dropdown.propTypes = {
 };
 Dropdown.defaultProps = {
   animationOpen: 'dropdown_animation_open',
-  animationClose: 'dropdown_animation_close'
+  animationClose: 'dropdown_animation_close',
+  set: 'normal'
 };
 Dropdown.__docgenInfo = {
   "description": "",
@@ -146,6 +151,13 @@ Dropdown.__docgenInfo = {
       },
       "required": false
     },
+    "set": {
+      "defaultValue": {
+        "value": "'normal'",
+        "computed": false
+      },
+      "required": false
+    },
     "className": {
       "description": "",
       "type": {