@itcase/ui 1.0.85 → 1.0.87

package/dist/{SelectContainer-6GiJFRo0.js → SelectContainer-meg_EXPO.js}

@@ -7672,7 +7672,8 @@ const SelectDropdownIndicator = props => {
 };
 SelectDropdownIndicator.propTypes = {
   selectProps: PropTypes__default.default.shape({
-    dropdownIcon: PropTypes__default.default.string,
+    // "dropdownIcon" is SvgImage(file.svg)
+    dropdownIcon: PropTypes__default.default.oneOfType([PropTypes__default.default.func, PropTypes__default.default.element]),
     dropdownIconFill: PropTypes__default.default.string,
     dropdownIconStroke: PropTypes__default.default.string
   })
@@ -7688,7 +7689,12 @@ SelectDropdownIndicator.__docgenInfo = {
         "name": "shape",
         "value": {
           "dropdownIcon": {
-            "name": "string",
+            "name": "union",
+            "value": [{
+              "name": "func"
+            }, {
+              "name": "element"
+            }],
             "required": false
           },
           "dropdownIconFill": {
@@ -8479,25 +8485,27 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
   });
 });
 SelectContainer.propTypes = {
-  isSearchable: PropTypes__default.default.bool,
-  isClearable: PropTypes__default.default.bool,
-  clearIcon: PropTypes__default.default.string,
+  className: PropTypes__default.default.string,
+  // "clearIcon" is SvgImage(file.svg)
+  clearIcon: PropTypes__default.default.oneOfType([PropTypes__default.default.func, PropTypes__default.default.element]),
   clearIconFill: PropTypes__default.default.string,
   clearIconStroke: PropTypes__default.default.string,
-  className: PropTypes__default.default.string,
   closeMenuOnSelect: PropTypes__default.default.bool,
-  dropdownIcon: PropTypes__default.default.string,
+  // "dropdownIcon" is SvgImage(file.svg)
+  dropdownIcon: PropTypes__default.default.oneOfType([PropTypes__default.default.func, PropTypes__default.default.element]),
   dropdownIconFill: PropTypes__default.default.string,
   dropdownIconStroke: PropTypes__default.default.string,
   filterOption: PropTypes__default.default.func,
   initialValue: PropTypes__default.default.any,
-  set: PropTypes__default.default.string,
-  onChange: PropTypes__default.default.func,
+  inputAfter: PropTypes__default.default.any,
+  inputBefore: PropTypes__default.default.any,
+  isClearable: PropTypes__default.default.bool,
+  isSearchable: PropTypes__default.default.bool,
+  noOptionsText: PropTypes__default.default.string,
   openMenuOnClick: PropTypes__default.default.func,
   options: PropTypes__default.default.arrayOf(PropTypes__default.default.object),
-  inputBefore: PropTypes__default.default.any,
-  inputAfter: PropTypes__default.default.any,
-  noOptionsText: PropTypes__default.default.string
+  set: PropTypes__default.default.string,
+  onChange: PropTypes__default.default.func
 };
 SelectContainer.defaultProps = {
   animationOpen: 'select_animation_open',
@@ -8522,24 +8530,22 @@ SelectContainer.__docgenInfo = {
       },
       "required": false
     },
-    "isSearchable": {
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "isClearable": {
+    "className": {
       "description": "",
       "type": {
-        "name": "bool"
+        "name": "string"
       },
       "required": false
     },
     "clearIcon": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "union",
+        "value": [{
+          "name": "func"
+        }, {
+          "name": "element"
+        }]
       },
       "required": false
     },
@@ -8557,13 +8563,6 @@ SelectContainer.__docgenInfo = {
       },
       "required": false
     },
-    "className": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "closeMenuOnSelect": {
       "description": "",
       "type": {
@@ -8574,7 +8573,12 @@ SelectContainer.__docgenInfo = {
     "dropdownIcon": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "union",
+        "value": [{
+          "name": "func"
+        }, {
+          "name": "element"
+        }]
       },
       "required": false
     },
@@ -8606,17 +8610,38 @@ SelectContainer.__docgenInfo = {
       },
       "required": false
     },
-    "set": {
+    "inputAfter": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "any"
       },
       "required": false
     },
-    "onChange": {
+    "inputBefore": {
       "description": "",
       "type": {
-        "name": "func"
+        "name": "any"
+      },
+      "required": false
+    },
+    "isClearable": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "isSearchable": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "noOptionsText": {
+      "description": "",
+      "type": {
+        "name": "string"
       },
       "required": false
     },
@@ -8637,24 +8662,17 @@ SelectContainer.__docgenInfo = {
       },
       "required": false
     },
-    "inputBefore": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "inputAfter": {
+    "set": {
       "description": "",
       "type": {
-        "name": "any"
+        "name": "string"
       },
       "required": false
     },
-    "noOptionsText": {
+    "onChange": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "func"
       },
       "required": false
     }

package/dist/components/Accordion.js

@@ -92,10 +92,38 @@ function AccordionItem(props) {
     };
     onClick && onClick(thisItemData);
   }, [onClick, id, title, content, isExpanded]);
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const contentBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'contentBorderColor'
+  });
+  const titleBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'titleBorderColor'
+  });
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'contentFill'
+  });
+  const titleFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'titleFill'
+  });
+  const titleFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'titleFillHover'
+  });
   const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'accordion-item_shape_',
     propsKey: 'shape'
@@ -104,28 +132,28 @@ function AccordionItem(props) {
     styles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('accordion-item', className, fillClass, shapeClass, isExpanded && 'accordion-item_state_open'),
+    className: clsx__default.default('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, isExpanded && 'accordion-item_state_open'),
     style: styles
   }, /*#__PURE__*/React__default.default.createElement(index.Text, {
-    className: clsx__default.default('accordion-item__title', onClickTitle && 'cursor_type_pointer'),
+    className: clsx__default.default('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, onClickTitle && 'cursor_type_pointer'),
     size: titleTextSize,
     textColor: titleTextColor,
     textWeight: titleTextWeight,
     onClick: onClickTitle
   }, title), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "accordion-item__icon",
+    className: clsx__default.default('accordion-item__icon', onClickTitle && 'cursor_type_pointer'),
     onClick: onClickTitle
   }, 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"
+  })), 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, {
     size: contentTextSize,
     textColor: contentTextColor,
     textWeight: contentTextWeight
-  }, content)), afterContent && afterContent);
+  }, content))), afterContent && afterContent);
 }
 
 /* Component default props */
@@ -444,6 +472,10 @@ function Accordion(props) {
     }
     return [];
   }, [children, items, expandedItems, onClickAccordionItem]);
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
   const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'accordion_direction_',
     propsKey: 'direction'
@@ -452,6 +484,10 @@ function Accordion(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'accordion_shape_',
+    propsKey: 'shape'
+  });
 
   /*
    * paddingHorizontalWrapper="16px"
@@ -463,7 +499,7 @@ function Accordion(props) {
     wrapper: accordionWrapperStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'accordion', directionClass, fillClass),
+    className: clsx__default.default(className, 'accordion', borderColorClass, directionClass, fillClass, shapeClass),
     style: accordionStyles
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "accordion__wrapper",
@@ -495,6 +531,7 @@ Accordion.propTypes = {
   initial: PropTypes__default.default.array,
   isMultiple: PropTypes__default.default.bool,
   items: PropTypes__default.default.array,
+  shape: PropTypes__default.default.oneOf(shape.default),
   onClickItem: PropTypes__default.default.func
 };
 
@@ -615,6 +652,15 @@ Accordion.__docgenInfo = {
       },
       "required": false
     },
+    "shape": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
     "onClickItem": {
       "description": "",
       "type": {

package/dist/components/Cell.js

@@ -44,7 +44,7 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Cell(props) {
   const {
     className,
-    isShowTitleIcon,
+    showTitleIcon,
     titleIconFill,
     titleIconFillSize,
     titleIconIconFill,
@@ -53,7 +53,7 @@ function Cell(props) {
     titleIconSrc,
     titleIconShape,
     titleIcon,
-    isShowValueIcon,
+    showValueIcon,
     valueIconFill,
     valueIconFillSize,
     valueIconIconFill,
@@ -78,7 +78,7 @@ function Cell(props) {
     titleTextSize,
     titleTextColor,
     titleTextWeight,
-    isShowTitleLabel,
+    showTitleLabel,
     titleLabelAppearance,
     titleLabel,
     titleLabelTextSize,
@@ -90,9 +90,11 @@ function Cell(props) {
     valueLabelTextSize,
     valueLabelShape,
     valueLabelSize,
-    isZeroPadding,
-    isZeroGap,
-    isReverse,
+    titleTextWrap,
+    valueTextWrap,
+    zeroPadding,
+    zeroGap,
+    reverse,
     onClick,
     onMouseEnter
   } = props;
@@ -145,7 +147,7 @@ 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}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, isZeroPadding && 'cell_reset-padding', isZeroGap && 'cell_reset-gap', isReverse && 'cell_reverse'),
+    className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'),
     onClick: onClick,
     onMouseEnter: onMouseEnter
   }, before && /*#__PURE__*/React__default.default.createElement("div", {
@@ -159,8 +161,9 @@ function Cell(props) {
     size: titleTextSize,
     tag: titleTag,
     textColor: titleTextColor,
-    textWeight: titleTextWeight
-  }, title), isShowTitleIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    textWeight: titleTextWeight,
+    textWrap: titleTextWrap
+  }, title), showTitleIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "cell__icon",
     fill: titleIconFill,
     fillSize: titleIconFillSize,
@@ -170,7 +173,7 @@ function Cell(props) {
     imageSrc: titleIconSrc,
     shape: titleIconShape,
     SvgImage: titleIcon
-  }), isShowTitleLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
+  }), showTitleLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
     appearance: titleLabelAppearance,
     label: titleLabel,
     labelTextSize: titleLabelTextSize,
@@ -183,8 +186,9 @@ function Cell(props) {
     size: valueTextSize,
     tag: valueTag,
     textColor: valueTextColor,
-    textWeight: valueTextWeight
-  }, value), isShowValueIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    textWeight: valueTextWeight,
+    textWrap: valueTextWrap
+  }, value), showValueIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "cell__icon",
     fill: valueIconFill,
     fillSize: valueIconFillSize,

package/dist/components/Choice.js

@@ -4,6 +4,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index = require('./Text.js');
+var index$1 = require('./Icon.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textColorActive.js');
@@ -20,6 +21,16 @@ require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+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('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -35,6 +46,7 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     type,
     options,
     active,
+    isDisabled,
     set,
     setActiveSegment,
     size,
@@ -43,6 +55,14 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     labelTextSize,
     before,
     after,
+    icon,
+    iconFillDisabled,
+    iconStrokeDisabled,
+    activeIcon,
+    iconSize,
+    activeIconItemFill,
+    iconItemFill,
+    iconStroke,
     isMultiple
   } = props;
   const controlRef = React.useRef(null);
@@ -93,21 +113,30 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     className: "choice__item-radio",
     id: `${name}-${item.value}`,
     name: name,
+    disabled: isDisabled,
     type: isMultiple ? 'checkbox' : 'radio',
     value: item.value,
     onChange: event => onChange(event, item)
   }), /*#__PURE__*/React__default.default.createElement("label", {
     className: clsx__default.default('choice__item-label'),
     htmlFor: `${name}-${item.value}`
-  }, before, /*#__PURE__*/React__default.default.createElement(index.Text, {
+  }, before, item.label && /*#__PURE__*/React__default.default.createElement(index.Text, {
     size: labelTextSize,
     textColor: item.value === active.value ? labelTextActiveColor : labelTextColor
-  }, item.label), after)))));
+  }, item.label), (icon || activeIcon) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    className: "choice__item-icon",
+    iconFill: item.value === active.value ? activeIconItemFill : iconItemFill,
+    iconFillDisabled: isDisabled && iconFillDisabled,
+    iconSize: iconSize,
+    iconStroke: iconStroke,
+    iconStrokeDisabled: isDisabled && iconStrokeDisabled,
+    SvgImage: item.value === active.value ? activeIcon : icon
+  }), after)))));
 });
 Choice.propTypes = {
   active: PropTypes__default.default.shape({
-    value: PropTypes__default.default.string,
-    label: PropTypes__default.default.string
+    value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
+    label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element])
   }),
   after: PropTypes__default.default.any,
   before: PropTypes__default.default.any,
@@ -118,8 +147,8 @@ Choice.propTypes = {
   labelTextSize: PropTypes__default.default.string,
   name: PropTypes__default.default.string,
   options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    value: PropTypes__default.default.string,
-    label: PropTypes__default.default.string
+    value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
+    label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element])
   })),
   set: PropTypes__default.default.string,
   setActiveSegment: PropTypes__default.default.func,
@@ -145,11 +174,23 @@ Choice.__docgenInfo = {
         "name": "shape",
         "value": {
           "value": {
-            "name": "string",
+            "name": "union",
+            "value": [{
+              "name": "string"
+            }, {
+              "name": "number"
+            }, {
+              "name": "bool"
+            }],
             "required": false
           },
           "label": {
-            "name": "string",
+            "name": "union",
+            "value": [{
+              "name": "string"
+            }, {
+              "name": "element"
+            }],
             "required": false
           }
         }
@@ -168,11 +209,23 @@ Choice.__docgenInfo = {
           "name": "shape",
           "value": {
             "value": {
-              "name": "string",
+              "name": "union",
+              "value": [{
+                "name": "string"
+              }, {
+                "name": "number"
+              }, {
+                "name": "bool"
+              }],
               "required": false
             },
             "label": {
-              "name": "string",
+              "name": "union",
+              "value": [{
+                "name": "string"
+              }, {
+                "name": "element"
+              }],
               "required": false
             }
           }

package/dist/components/Dropdown.js

@@ -112,11 +112,10 @@ function Dropdown(props) {
     className: clsx__default.default(className, 'dropdown', set && `dropdown_set_${set}`, shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
     ref: dropdownRef,
     style: styles
-  }, children &&
-  
-  // Add "onAnimationEnd" only for wrapper for ignore dropdown button
-  React__default.default.createElement("div", {
-    className: clsx__default.default('dropdown__wrapper', fillClass, fillHoverClass),
+  }, children && /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('dropdown__wrapper', fillClass, fillHoverClass)
+    // Add "onAnimationEnd" only for wrapper for ignore dropdown button
+    ,
     onAnimationEnd: onAnimationEnd
   }, children));
 }

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-6GiJFRo0.js');
+var SelectContainer = require('../SelectContainer-meg_EXPO.js');
 require('../constants/componentProps/fill.js');
 require('../constants/componentProps/width.js');
 require('lodash/maxBy');

package/dist/components/Icon.js

@@ -82,6 +82,10 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
   const fillSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_fill_size_',
     propsKey: 'fillSize'
@@ -94,6 +98,10 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     prefix: 'icon_fill_hover_',
     propsKey: 'iconFillHover'
   });
+  const iconFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_fill_disabled_',
+    propsKey: 'iconFillDisabled'
+  });
   const iconStrokeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_stroke_',
     propsKey: 'iconStroke'
@@ -102,6 +110,10 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     prefix: 'icon_stroke_hover_',
     propsKey: 'iconStrokeHover'
   });
+  const iconStrokeDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'icon_stroke_disabled_',
+    propsKey: 'iconStrokeDisabled'
+  });
   const iconSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'icon_size_',
     propsKey: 'iconSize'
@@ -147,7 +159,7 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     return null;
   }, [SvgImage, imageSrc]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, iconFillClass, iconFillHoverClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
+    className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, iconStrokeDisabledClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
     "data-tour": dataTour,
     id: id,
     ref: ref,

package/dist/components/Input.js

@@ -30,7 +30,7 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     type,
     className,
     placeholder,
-    disabled,
+    isDisabled,
     value,
     onBlur,
     onChange,
@@ -41,6 +41,10 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
   const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'input_size_',
     propsKey: 'size'
@@ -57,6 +61,10 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     prefix: 'text-color_',
     propsKey: 'textColor'
   });
+  const textColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_disabled_',
+    propsKey: 'textColor'
+  });
   const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'caret-color_',
     propsKey: 'caret'
@@ -65,6 +73,10 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     prefix: 'placeholder-text-color_',
     propsKey: 'placeholderTextColor'
   });
+  const placeholderTextColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_disabled_',
+    propsKey: 'placeholderTextColorDisabled'
+  });
   const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-weight_',
     propsKey: 'textWeight'
@@ -73,21 +85,36 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
+  const borderWidthDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_disabled_',
+    propsKey: 'borderWidthDisabled'
+  });
   const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
+  const borderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_disabled_',
+    propsKey: 'borderColorDisabled'
+  });
   const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
+
+  // const disabledClasses = {
+  //   'borderColorClass': 'borderColorDisabledClass',
+  //   'placeholderTextColorClass': 'placeholderTextColorDisabledClass',
+  //   'textColorClass': 'textColorDisabledClass'
+  // }
+
   return /*#__PURE__*/React__default.default.createElement("input", {
-    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, shapeClass, textSizeClass, weightClass, widthClass, borderWidthClass, sizeClass, borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass, textSizeClass, weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass, !isDisabled ? borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputConfig.state[state]?.borderColor && `border-color_disabled_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
     type: type,
     id: id,
     index: index,
     ref: ref,
-    disabled: disabled,
+    disabled: isDisabled,
     placeholder: placeholder,
     value: value,
     onBlur: onBlur,
@@ -102,7 +129,7 @@ Input.propTypes = {
   placeholder: PropTypes__default.default.string,
   value: PropTypes__default.default.string,
   checked: PropTypes__default.default.bool,
-  disabled: PropTypes__default.default.bool,
+  isDisabled: PropTypes__default.default.bool,
   onBlur: PropTypes__default.default.func,
   onChange: PropTypes__default.default.func,
   onKeyDown: PropTypes__default.default.func,
@@ -170,7 +197,7 @@ Input.__docgenInfo = {
       },
       "required": false
     },
-    "disabled": {
+    "isDisabled": {
       "description": "",
       "type": {
         "name": "bool"

package/dist/components/Select.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var SelectContainer = require('../SelectContainer-6GiJFRo0.js');
+var SelectContainer = require('../SelectContainer-meg_EXPO.js');
 require('react');
 require('prop-types');
 require('clsx');

package/dist/constants/componentProps/textWeight.js

@@ -1,5 +1,7 @@
 'use strict';
 
-const textWeightProps = ['normal', 'bold', 'light', 'lighter', 'bolder', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'];
+const textWeightProps = ['normal', 'bold', 'light', 'lighter', 'bolder', /* eslint-disable */
+'100', 100, '200', 200, '300', 300, '400', 400, '500', 500, '600', 600, '700', 700, '800', 800, '900', 900, '950', 950
+/* eslint-enable */];
 
 exports.default = textWeightProps;

package/dist/context/Notifications.js

@@ -77,12 +77,16 @@ function NotificationsProvider(props) {
       setTimeout(() => hideNotifications(id), closeByTime);
     }
     return id;
+    // eslint-disable-next-line
   }, []);
   const notificationsAPI = React.useMemo(() => ({
     showNotification: showNotification,
     hideNotifications: hideNotifications,
     notificationStatuses: STATUSES
-  }), []);
+  }),
+  // Functions is never changes, no sense to set as dependencies
+  // eslint-disable-next-line
+  []);
   return /*#__PURE__*/React__default.default.createElement(NotificationsAPIContext.Provider, {
     value: notificationsAPI
   }, /*#__PURE__*/React__default.default.createElement(NotificationsContext.Provider, {

package/dist/css/components/Accordion/Accordion.css

@@ -29,6 +29,21 @@
     }
   }
 }
+.accordion {
+  &_shape {
+    &_rounded {
+      border-radius: var(--accordion-shape-rounded, 6px);
+      ^^&-item {
+        &:first-child {
+          border-radius: var(--accordion-shape-rounded, 6px) var(--accordion-shape-rounded, 6px) 0 0;
+        }
+        &:last-child {
+          border-radius: 0 0 var(--accordion-shape-rounded, 6px) var(--accordion-shape-rounded, 6px);
+        }
+      }
+    }
+  }
+}
 .accordion-item {
   min-width: 170px;
   padding: 10px 12px;
@@ -39,7 +54,7 @@
     flex: 1;
   }
   &__icon {
-    align-self: center;
+    align-self: flex-start;
     transform-origin: 50% 50%;
     transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
   }

package/dist/css/components/Choice/Choice.css

@@ -64,6 +64,9 @@
     transition: color 0.5s ease;
     cursor: pointer;
   }
+  &-icon {
+    padding: var(--choice-item-icon-padding);
+  }
 }
 :root {
   --choice-item-background-hover: var(--color-surface-secondary);

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -31,4 +31,7 @@
     transition: color 0.5s ease;
     cursor: pointer;
   }
+  &-icon {
+    padding: var(--choice-item-icon-padding);
+  }
 }

package/dist/css/components/Input/Input.css

@@ -1,32 +1,40 @@
 .input {
-  border: none;
-  appearance: none;
+  min-width: unset;
   padding: 0;
   margin: 0;
-  min-width: unset;
+  border: none;
+  position: relative;
   box-shadow: none;
+  appearance: none;
   outline: 0;
-  position: relative;
   caret-color: var(--input-caret-color);
+  &:disabled {
+    background: var(--input-state-disabled-background, #ECECEC);
+    border: solid 1px var(--input-state-disabled-border, #747474);
+    &:hover {
+      background: var(--input-state-disabled-background, #ECECEC);
+      border: solid 1px var(--input-state-disabled-border, #747474);
+    }
+  }
   &:focus {
     outline: none;
   }
   &:hover {
-    border: solid 1px var(--input-state-hover-border);
     background: var(--input-state-hover-background);
+    border: solid 1px var(--input-state-hover-border);
   }
   &&_state {
     &_success {
-      border: solid 1px var(--input-state-success-border);
       background: var(--input-state-success-background);
+      border: solid 1px var(--input-state-success-border);
     }
     &_error {
-      border: solid 1px var(--input-state-error-border);
       background: var(--input-state-error-background);
+      border: solid 1px var(--input-state-error-border);
     }
     &_focus {
-      border: solid 1px var(--input-state-focus-border);
       background: var(--input-state-focus-background);
+      border: solid 1px var(--input-state-focus-border);
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.85",
+  "version": "1.0.87",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",