@itcase/ui 1.0.81 → 1.0.83

package/dist/components/Accordion.js

@@ -7,7 +7,8 @@ var castArray = require('lodash/castArray');
 var fill = require('../constants/componentProps/fill.js');
 var direction = require('../constants/componentProps/direction.js');
 var shape = require('../constants/componentProps/shape.js');
-var index = require('./Icon.js');
+var index$1 = require('./Icon.js');
+var index = require('./Text.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 require('react-inlinesvg');
@@ -30,6 +31,8 @@ require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -70,6 +73,12 @@ function AccordionItem(props) {
     beforeContent,
     afterContent,
     className,
+    titleTextSize,
+    titleTextColor,
+    titleTextWeight,
+    contentTextSize,
+    contentTextColor,
+    contentTextWeight,
     isExpanded,
     onClick
   } = props;
@@ -97,19 +106,26 @@ function AccordionItem(props) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('accordion-item', className, fillClass, shapeClass, isExpanded && 'accordion-item_state_open'),
     style: styles
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "accordion-item__title",
+  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+    className: clsx__default.default('accordion-item__title', onClickTitle && 'cursor_type_pointer'),
+    size: titleTextSize,
+    textColor: titleTextColor,
+    textWeight: titleTextWeight,
     onClick: onClickTitle
   }, title), /*#__PURE__*/React__default.default.createElement("div", {
     className: "accordion-item__icon",
     onClick: onClickTitle
-  }, icon || /*#__PURE__*/React__default.default.createElement(index.Icon, {
+  }, icon || /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     iconFill: iconFill,
     size: "16",
     SvgImage: icon16.chevron_down
   })), beforeContent && beforeContent, isExpanded && /*#__PURE__*/React__default.default.createElement("div", {
     className: "accordion-item__content"
-  }, children || content), afterContent && afterContent);
+  }, children || content && /*#__PURE__*/React__default.default.createElement(index.Text, {
+    size: contentTextSize,
+    textColor: contentTextColor,
+    textWeight: contentTextWeight
+  }, content)), afterContent && afterContent);
 }
 
 /* Component default props */
@@ -144,7 +160,7 @@ AccordionItem.propTypes = {
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
-  title: PropTypes__default.default.any,
+  title: PropTypes__default.default.string,
   onClick: PropTypes__default.default.func
 };
 
@@ -356,7 +372,7 @@ AccordionItem.__docgenInfo = {
     "title": {
       "description": "",
       "type": {
-        "name": "any"
+        "name": "string"
       },
       "required": false
     },

package/dist/components/Badge.js

@@ -76,19 +76,15 @@ function Badge(props) {
     prefix: 'badge_shape_',
     propsKey: 'shape'
   });
-  const typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'badge_type_',
-    propsKey: 'type'
-  });
   const {
     styles: badgeStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
     style: badgeStyles,
-    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, typeClass)
+    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)
   }, children || value && /*#__PURE__*/React__default.default.createElement(index.Text, {
-    textColor: textColor || badgeConfig.appearance[appearance] && badgeConfig.appearance[appearance].textColor?.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    size: textSize
+    size: textSize,
+    textColor: textColor || badgeConfig.appearance[appearance] && badgeConfig.appearance[appearance].textColor?.replace(/([A-Z])/g, '-$1').toLowerCase()
   }, value));
 }
 Badge.propTypes = {

package/dist/components/Button.js

@@ -132,7 +132,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, 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].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}`),
     "data-tour": dataTour,
     DefaultComponent: "button",
     disabled: isDisabled,

package/dist/components/Cell.js

@@ -3,8 +3,8 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
-var index = require('./Icon.js');
-var index$1 = require('./Text.js');
+var index$1 = require('./Icon.js');
+var index = require('./Text.js');
 var size = require('../constants/componentProps/size.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('react-inlinesvg');
@@ -42,18 +42,18 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Cell(props) {
   const {
     className,
-    iconAfter,
-    iconAfterSize,
-    iconAfterSrc,
-    iconBefore,
-    iconBeforeSize,
-    iconBeforeSrc,
-    iconBeforeBgFill,
-    iconBeforeFill,
-    iconBeforeStroke,
-    iconAfterBgFill,
-    iconAfterFill,
-    iconAfterStroke,
+    titleIcon,
+    titleIconSize,
+    titleIconSrc,
+    titleIconBgFill,
+    titleIconFill,
+    titleIconStroke,
+    valueIcon,
+    valueIconSize,
+    valueIconSrc,
+    valueIconBgFill,
+    valueIconFill,
+    valueIconStroke,
     isActive,
     isDisabled,
     set,
@@ -114,7 +114,7 @@ function Cell(props) {
     propsKey: 'bgShape'
   });
   const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'cell_direction_',
+    prefix: 'cell__wrapper_direction_',
     propsKey: 'direction'
   });
   const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -122,42 +122,46 @@ function Cell(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, directionClass, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass),
+    className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass),
     onClick: onClick,
     onMouseEnter: onMouseEnter
   }, before && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__before"
   }, before), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('cell__wrapper', fillClass, fillHoverClass, isActive && fillActiveClass, isDisabled && fillDisabledClass, shapeClass)
-  }, (iconBefore || iconBeforeSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
-    bgFill: iconBeforeBgFill,
-    className: "cell__icon-before",
-    fill: iconBeforeFill,
-    size: iconBeforeSize,
-    stroke: iconBeforeStroke,
-    SvgImage: iconBefore
-  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('cell__wrapper', directionClass, fillClass, fillHoverClass, isActive && fillActiveClass, isDisabled && fillDisabledClass, shapeClass)
+  }, title && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__data"
-  }, title && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "cell__title",
     size: titleTextSize,
     tag: titleTag,
     textColor: titleTextColor,
     textWeight: titleTextWeight
-  }, title), value && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+  }, title), (titleIcon || titleIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    bgFill: titleIconBgFill,
+    className: "cell__icon",
+    iconFill: titleIconFill,
+    iconSize: titleIconSize,
+    iconStroke: titleIconStroke,
+    imageSrc: titleIconSrc,
+    SvgImage: titleIcon
+  })), value && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "cell__data"
+  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "cell__value",
     size: valueTextSize,
     tag: valueTag,
     textColor: valueTextColor,
     textWeight: valueTextWeight
-  }, value)), (iconAfter || iconAfterSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
-    bgFill: iconAfterBgFill,
-    className: "cell__icon-after",
-    fill: iconAfterFill,
-    size: iconAfterSize,
-    stroke: iconAfterStroke,
-    SvgImage: iconAfter
-  })), after && /*#__PURE__*/React__default.default.createElement("div", {
+  }, value), (valueIcon || valueIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    bgFill: valueIconBgFill,
+    className: "cell__icon",
+    iconFill: valueIconFill,
+    iconSize: valueIconSize,
+    iconStroke: valueIconStroke,
+    imageSrc: valueIconSrc,
+    SvgImage: valueIcon
+  }))), after && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__after"
   }, after));
 }
@@ -166,16 +170,16 @@ Cell.propTypes = {
   before: PropTypes__default.default.any,
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
-  iconAfter: PropTypes__default.default.any,
-  iconAfterBgFill: PropTypes__default.default.string,
-  iconAfterFill: PropTypes__default.default.string,
-  iconAfterSize: PropTypes__default.default.string,
-  iconAfterStroke: PropTypes__default.default.string,
-  iconBefore: PropTypes__default.default.any,
-  iconBeforeBgFill: PropTypes__default.default.string,
-  iconBeforeFill: PropTypes__default.default.string,
-  iconBeforeSize: PropTypes__default.default.string,
-  iconBeforeStroke: PropTypes__default.default.string,
+  titleIcon: PropTypes__default.default.any,
+  titleIconBgFill: PropTypes__default.default.string,
+  titleIconFill: PropTypes__default.default.string,
+  titleIconSize: PropTypes__default.default.string,
+  titleIconStroke: PropTypes__default.default.string,
+  valueIcon: PropTypes__default.default.any,
+  valueIconBgFill: PropTypes__default.default.string,
+  valueIconFill: PropTypes__default.default.string,
+  valueIconSize: PropTypes__default.default.string,
+  valueIconStroke: PropTypes__default.default.string,
   isActive: PropTypes__default.default.bool,
   isDisabled: PropTypes__default.default.bool,
   title: PropTypes__default.default.string,
@@ -242,70 +246,70 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "iconAfter": {
+    "titleIcon": {
       "description": "",
       "type": {
         "name": "any"
       },
       "required": false
     },
-    "iconAfterBgFill": {
+    "titleIconBgFill": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "iconAfterFill": {
+    "titleIconFill": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "iconAfterSize": {
+    "titleIconSize": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "iconAfterStroke": {
+    "titleIconStroke": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "iconBefore": {
+    "valueIcon": {
       "description": "",
       "type": {
         "name": "any"
       },
       "required": false
     },
-    "iconBeforeBgFill": {
+    "valueIconBgFill": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "iconBeforeFill": {
+    "valueIconFill": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "iconBeforeSize": {
+    "valueIconSize": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "iconBeforeStroke": {
+    "valueIconStroke": {
       "description": "",
       "type": {
         "name": "string"

package/dist/components/Choice.js

@@ -40,7 +40,9 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
     size,
     labelTextColor,
     labelTextActiveColor,
-    labelTextSize
+    labelTextSize,
+    before,
+    after
   } = props;
   const controlRef = React.useRef(null);
   const optionsRefs = React.useMemo(() => new Map(options.map(item => [item.value, /*#__PURE__*/React.createRef()])), [options]);
@@ -92,10 +94,10 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
   }), /*#__PURE__*/React__default.default.createElement("label", {
     className: clsx__default.default('choice__item-label'),
     htmlFor: item.label
-  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+  }, before, /*#__PURE__*/React__default.default.createElement(index.Text, {
     size: labelTextSize,
     textColor: item.value === active.value ? labelTextActiveColor : labelTextColor
-  }, item.label))))));
+  }, item.label), after)))));
 });
 Choice.displayName = 'Choice';
 Choice.propTypes = {

package/dist/components/ContextMenu.js

@@ -197,7 +197,7 @@ function ContextMenuItem(props) {
     propsKey: 'fillHover'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'context-menu__item', fillClass, fillHoverClass),
+    className: clsx__default.default(className, 'context-menu__item', fillClass, fillHoverClass, onClick && 'cursor_type_pointer'),
     id: id,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/DatePicker.js

@@ -10116,6 +10116,7 @@ function DatePickerInput(props) {
     clearIconItemFill,
     clearIconShape,
     clearIconSize,
+    clearIconSrc,
     clearIconStroke,
     clearLabel,
     clearLabelTextColor,
@@ -10227,6 +10228,7 @@ function DatePickerInput(props) {
       clearIconItemFillHover: clearIconItemFillHover,
       clearIconShape: clearIconShape,
       clearIconSize: clearIconSize,
+      clearIconSrc: clearIconSrc,
       clearIconStroke: clearIconStroke,
       clearLabel: clearLabel,
       clearLabelTextColor: clearLabelTextColor,
@@ -10291,7 +10293,8 @@ function DatePickerClearButton(props, ref) {
     clearIconShape,
     clearIconSize,
     clearIconStroke,
-    clearIcon
+    clearIcon,
+    clearIconSrc
   } = props;
   const onClick = React.useCallback(event => {
     datepickerRef?.current?.onClearClick(event);
@@ -10303,13 +10306,14 @@ function DatePickerClearButton(props, ref) {
     labelTextColor: clearLabelTextColor,
     labelTextColorHover: clearLabelTextColorHover,
     onClick: onClick
-  }), clearIcon && /*#__PURE__*/React__namespace.default.createElement(index$2.Icon, {
+  }), (clearIcon || clearIconSrc) && /*#__PURE__*/React__namespace.default.createElement(index$2.Icon, {
     className: clsx__default.default('react-datepicker__clear-icon', onClick && 'cursor_type_pointer'),
     fill: clearIconFill,
     fillHover: clearIconFillHover,
     fillSize: clearIconFillSize,
     iconFill: clearIconItemFill,
     iconFillHover: clearIconItemFillHover,
+    imageSrc: clearIconSrc,
     shape: clearIconShape,
     size: clearIconSize,
     stroke: clearIconStroke,

package/dist/components/Dropdown.js

@@ -258,7 +258,7 @@ function DropdownItem(props) {
     styles: dropdownItem
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass, className, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass, shapeClass, typeClass, widthClass, set && `dropdown__item_set_${set}`, justifyContentClass),
+    className: clsx__default.default('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass, className, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass, shapeClass, typeClass, widthClass, onClick && 'cursor_type_pointer', set && `dropdown__item_set_${set}`, justifyContentClass),
     style: dropdownItem,
     onClick: onClick,
     onMouseEnter: onMouseEnter

package/dist/components/Label.js

@@ -51,7 +51,9 @@ function Label(props) {
     before,
     after,
     dataTour,
-    type
+    type,
+    cursor,
+    onClick
   } = props;
   const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
@@ -65,6 +67,10 @@ function Label(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'label_size_',
     propsKey: 'size'
@@ -81,6 +87,10 @@ function Label(props) {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
   const wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'word-wrap_',
     propsKey: 'labelTextWrap'
@@ -89,9 +99,10 @@ 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(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, alignDirectionClass, alignClass, type && `label_type_${type}`, set && `label_set_${set}`),
+    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, type && `label_type_${type}`, set && `label_set_${set}`, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
-    style: labelStyles
+    style: labelStyles,
+    onClick: onClick
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: "label__inner"
   }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {

package/dist/components/Search.js

@@ -70,30 +70,16 @@ const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Sear
     onFocus,
     onKeyDown
   } = props;
-
-  // const inputRef = useRef(null)
-  // const [searchValue, setSearchValue] = useState('')
-
   const onChangeSearchInput = React.useCallback(event => {
-    // setSearchValue(event.target.value)
     onChange && onChange(event.target.value);
   }, [onChange]);
   const onClickClearIcon = React.useCallback(event => {
     event.stopPropagation();
-    // setSearchValue('')
     onChange && onChange('');
     if (onClickClean) {
       onClickClean();
     }
   }, [onChange, onClickClean]);
-
-  // TODO:
-  // useStateAsRef(ref, {
-  //   input: inputRef.current,
-  //   value: searchValue,
-  //   setValue: setSearchValue,
-  // })
-
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -167,19 +153,19 @@ const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Sear
     style: searchInputStyles
   }, before, (iconBefore || iconBeforeSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     className: "search-input__icon search-input__icon-before",
-    SvgImage: iconBefore,
+    iconFill: iconBeforeFill,
+    iconStroke: iconBeforeStroke,
     imageSrc: iconBeforeSrc,
     size: iconBeforeSize,
-    iconFill: iconBeforeFill,
-    iconStroke: iconBeforeStroke
+    SvgImage: iconBefore
   }), /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('search-input__wrapper', inputFillClass, inputShapeClass)
   }, /*#__PURE__*/React__default.default.createElement("input", {
     className: clsx__default.default('search-input__value', (inputTextSizeClass || inputWeightClass || inputTextColorClass || inputTextStyleClass) && 'text', inputTextSizeClass, inputWeightClass, inputTextColorClass, inputTextStyleClass),
+    ref: ref,
     required: true,
     type: "text",
     value: value,
-    ref: ref,
     onFocus: onFocus,
     onChange: onChangeSearchInput,
     onKeyDown: onKeyDown
@@ -191,8 +177,8 @@ const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Sear
     textWeight: placeholderWeightClass,
     textStyle: placeholderStyleClass,
     textColor: placeholderColorClass
-  }, placeholder || 'Search')), (iconClear || iconClearSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
-    className: "search-input__clear",
+  }, placeholder || 'Search')), value && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    className: clsx__default.default('search-input__clear', onClickClearIcon && 'cursor_type_pointer'),
     SvgImage: iconClear,
     imageSrc: iconClearSrc,
     size: iconClearSize,
@@ -209,10 +195,7 @@ const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Sear
 });
 SearchInput.DEFAULT_REF_STATE = {
   input: null
-  // value: '',
-  // setValue: () => {},
 };
-
 SearchInput.propTypes = {
   after: PropTypes__default.default.any,
   before: PropTypes__default.default.any,

package/dist/components/Select.js

@@ -7996,6 +7996,7 @@ const SelectOption = props => {
     data
   } = props;
   const {
+    menuItemSize,
     optionFill,
     optionFillHover,
     optionBorder,
@@ -8008,7 +8009,7 @@ const SelectOption = props => {
     optionAfter
   } = 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', optionFill, optionBorder, optionBorderType, optionFillHover, optionShape)
+    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, {
     className: "select__menu-list-item_option",
     size: optionTextSize,
@@ -8271,6 +8272,7 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     isCreatable,
     isMulti,
     isSearchable,
+    menuItemSize,
     noOptionsText,
     openMenuOnClick,
     options,
@@ -8433,6 +8435,7 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     isSearchable: isSearchable,
     set: set,
     optionFill: optionFillClass,
+    menuItemSize: menuItemSize,
     optionFillHover: optionFillHoverClass,
     optionTextSize: optionTextSizeClass,
     optionTextColor: optionTextColorClass,