@itcase/ui 1.0.84 → 1.0.86

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

@@ -5,6 +5,7 @@ var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index$1 = require('./Icon.js');
 var index = require('./Text.js');
+var index$2 = require('./Label.js');
 var size = require('../constants/componentProps/size.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('react-inlinesvg');
@@ -31,6 +32,7 @@ require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.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 }; }
@@ -42,18 +44,24 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Cell(props) {
   const {
     className,
-    titleIcon,
-    titleIconSize,
-    titleIconSrc,
-    titleIconBgFill,
+    isShowTitleIcon,
     titleIconFill,
+    titleIconFillSize,
+    titleIconIconFill,
+    titleIconFillHover,
     titleIconStroke,
-    valueIcon,
-    valueIconSize,
-    valueIconSrc,
-    valueIconBgFill,
+    titleIconSrc,
+    titleIconShape,
+    titleIcon,
+    isShowValueIcon,
     valueIconFill,
+    valueIconFillSize,
+    valueIconIconFill,
+    valueIconFillHover,
     valueIconStroke,
+    valueIconSrc,
+    valueIconShape,
+    valueIcon,
     isActive,
     isDisabled,
     set,
@@ -70,6 +78,21 @@ function Cell(props) {
     titleTextSize,
     titleTextColor,
     titleTextWeight,
+    isShowTitleLabel,
+    titleLabelAppearance,
+    titleLabel,
+    titleLabelTextSize,
+    titleLabelShape,
+    titleLabelSize,
+    isShowValueLabel,
+    valueLabelAppearance,
+    valueLabel,
+    valueLabelTextSize,
+    valueLabelShape,
+    valueLabelSize,
+    isZeroPadding,
+    isZeroGap,
+    isReverse,
     onClick,
     onMouseEnter
   } = props;
@@ -122,7 +145,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),
+    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'),
     onClick: onClick,
     onMouseEnter: onMouseEnter
   }, before && /*#__PURE__*/React__default.default.createElement("div", {
@@ -137,14 +160,22 @@ function Cell(props) {
     tag: titleTag,
     textColor: titleTextColor,
     textWeight: titleTextWeight
-  }, title), (titleIcon || titleIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
-    bgFill: titleIconBgFill,
+  }, title), isShowTitleIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "cell__icon",
-    iconFill: titleIconFill,
-    iconSize: titleIconSize,
+    fill: titleIconFill,
+    fillSize: titleIconFillSize,
+    iconFill: titleIconIconFill,
+    iconFillHover: titleIconFillHover,
     iconStroke: titleIconStroke,
     imageSrc: titleIconSrc,
+    shape: titleIconShape,
     SvgImage: titleIcon
+  }), isShowTitleLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
+    appearance: titleLabelAppearance,
+    label: titleLabel,
+    labelTextSize: titleLabelTextSize,
+    shape: titleLabelShape,
+    size: titleLabelSize
   })), value && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__data"
   }, /*#__PURE__*/React__default.default.createElement(index.Text, {
@@ -153,14 +184,22 @@ function Cell(props) {
     tag: valueTag,
     textColor: valueTextColor,
     textWeight: valueTextWeight
-  }, value), (valueIcon || valueIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
-    bgFill: valueIconBgFill,
+  }, value), isShowValueIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "cell__icon",
-    iconFill: valueIconFill,
-    iconSize: valueIconSize,
+    fill: valueIconFill,
+    fillSize: valueIconFillSize,
+    iconFill: valueIconIconFill,
+    iconFillHover: valueIconFillHover,
     iconStroke: valueIconStroke,
     imageSrc: valueIconSrc,
+    shape: valueIconShape,
     SvgImage: valueIcon
+  }), isShowValueLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
+    appearance: valueLabelAppearance,
+    label: valueLabel,
+    labelTextSize: valueLabelTextSize,
+    shape: valueLabelShape,
+    size: valueLabelSize
   }))), after && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__after"
   }, after));
@@ -171,14 +210,10 @@ Cell.propTypes = {
   children: PropTypes__default.default.any,
   className: 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,
@@ -253,13 +288,6 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "titleIconBgFill": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "titleIconFill": {
       "description": "",
       "type": {
@@ -267,13 +295,6 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "titleIconSize": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "titleIconStroke": {
       "description": "",
       "type": {
@@ -288,13 +309,6 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "valueIconBgFill": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "valueIconFill": {
       "description": "",
       "type": {
@@ -302,13 +316,6 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
-    "valueIconSize": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "valueIconStroke": {
       "description": "",
       "type": {

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 }; }
@@ -43,6 +54,12 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     labelTextSize,
     before,
     after,
+    icon,
+    activeIcon,
+    iconSize,
+    activeIconItemFill,
+    iconItemFill,
+    iconStroke,
     isMultiple
   } = props;
   const controlRef = React.useRef(null);
@@ -99,15 +116,21 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
   }), /*#__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,
+    iconSize: iconSize,
+    stroke: iconStroke,
+    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 +141,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 +168,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 +203,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/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/Notification.js

@@ -85,8 +85,8 @@ function NotificationItem(props) {
     size: textSize,
     textColor: textColor || notificationItemConfig.appearance[appearance] && notificationItemConfig.appearance[appearance].textColor.replace(/([A-Z])/g, '-$1').toLowerCase()
   }, text), closeButton && /*#__PURE__*/React__default.default.createElement("div", {
-    onClick: () => onClickClose && onClickClose(id),
-    className: clsx__default.default('notification__item-close', onClickClose && 'cursor_type_pointer')
+    className: clsx__default.default('notification__item-close', onClickClose && 'cursor_type_pointer'),
+    onClick: () => onClickClose && onClickClose(id)
   }, closeButton)), after);
 }
 NotificationItem.propTypes = {

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/size.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const sizeProps = [null, 'normal', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', '16', '24', '32', '40', '56', '64', '96', '144'];
+const sizeProps = [null, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
 
 exports.default = sizeProps;

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/Cell/Cell.css

@@ -16,12 +16,24 @@
       &_vertical {
         display: flex;
         flex-direction: column;
+        gap: var(--cell-vertical-gap, 4px);
       }
       &_horizontal {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        gap: 20px;
+        gap: var(--cell-horizontal-gap, 20px);
+      }
+    }
+  }
+}
+.cell {
+  &_size {
+    @each $size in s, m, l, xl {
+      &_$(size) {
+        ^^&__wrapper {
+          padding: var(--cell-size-$(size)-padding);
+        }
       }
     }
   }
@@ -39,3 +51,30 @@
     }
   }
 }
+.cell {
+  &_reset-gap {
+    ^&__wrapper {
+      gap: 0;
+    }
+  }
+}
+.cell {
+  &_reset-padding {
+    ^&__wrapper {
+      padding: 0;
+    }
+  }
+}
+.cell {
+  &_reverse {
+    ^&__wrapper {
+      flex-direction: column-reverse;
+    }
+  }
+}
+:root {
+  --cell-size-s-padding: 6px;
+  --cell-size-m-padding: 6px;
+  --cell-size-l-padding: 6px;
+  --cell-size-xl-padding: 12px;
+}

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/package.json

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