@itcase/ui 1.1.1 → 1.1.2

package/dist/components/Button.js

@@ -140,7 +140,7 @@ const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(pr
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
     className: clsx__default.default(className, 'button', type && `button_type_${type}`, borderWidthClass || buttonConfig.appearance[appearance] && `border-width_${buttonConfig.appearance[appearance].borderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || buttonConfig.appearance[appearance] && `border-color_${buttonConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderTypeClass || buttonConfig.appearance[appearance] && `border-type_${buttonConfig.appearance[appearance].borderType}`.replace(/([A-Z])/g, '-$1').toLowerCase(), 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-testid": `${dataTestId}Button`,
+    "data-test-id": `${dataTestId}Button`,
     "data-tour": dataTour,
     DefaultComponent: "button",
     disabled: isDisabled,
@@ -209,7 +209,7 @@ Button.propTypes = {
   iconSize: PropTypes__default.default.string,
   iconStroke: PropTypes__default.default.string,
   isDisabled: PropTypes__default.default.bool,
-  label: PropTypes__default.default.string,
+  label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
   labelTextColor: PropTypes__default.default.string,
   labelTextColorHover: PropTypes__default.default.string,
   labelTextSize: PropTypes__default.default.string,
@@ -435,7 +435,12 @@ Button.__docgenInfo = {
     "label": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
       },
       "required": false
     },

package/dist/components/Cell.js

@@ -6,12 +6,15 @@ 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 titleSize = require('../constants/componentProps/titleSize.js');
+var textSize = require('../constants/componentProps/textSize.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var textAlign = require('../constants/componentProps/textAlign.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('react-inlinesvg');
 require('./Link.js');
 require('../constants/componentProps/fill.js');
-require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/size.js');
 require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
@@ -32,10 +35,7 @@ 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/textSize.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('lodash/castArray');
@@ -75,6 +75,7 @@ function Cell(props) {
     mode,
     size,
     value,
+    valueTextAlign,
     valueTextSize,
     valueTextColor,
     valueTextWeight,
@@ -82,6 +83,7 @@ function Cell(props) {
     titleTextSize,
     titleTextColor,
     titleTextWeight,
+    titleTextWrap,
     showTitleLabel,
     titleLabelAppearance,
     titleLabel,
@@ -94,7 +96,6 @@ function Cell(props) {
     valueLabelTextSize,
     valueLabelShape,
     valueLabelSize,
-    titleTextWrap,
     valueTextWrap,
     zeroPadding,
     zeroGap,
@@ -189,6 +190,7 @@ function Cell(props) {
     className: "cell__value",
     size: valueTextSize,
     tag: valueTag,
+    textAlign: valueTextAlign,
     textColor: valueTextColor,
     textWeight: valueTextWeight,
     textWrap: valueTextWrap
@@ -223,14 +225,15 @@ Cell.propTypes = {
   titleIcon: PropTypes__default.default.any,
   titleIconFill: PropTypes__default.default.string,
   titleIconStroke: PropTypes__default.default.string,
-  titleTextColor: PropTypes__default.default.string,
-  titleTextSize: PropTypes__default.default.oneOf(size.default),
+  titleTextColor: PropTypes__default.default.oneOf(textColor.default),
+  titleTextSize: PropTypes__default.default.oneOf(titleSize.default),
   value: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.string]),
   valueIcon: PropTypes__default.default.any,
   valueIconFill: PropTypes__default.default.string,
   valueIconStroke: PropTypes__default.default.string,
-  valueTextColor: PropTypes__default.default.string,
-  valueTextSize: PropTypes__default.default.oneOf(size.default),
+  valueTextAlign: PropTypes__default.default.oneOf(textAlign.default),
+  valueTextColor: PropTypes__default.default.oneOf(textColor.default),
+  valueTextSize: PropTypes__default.default.oneOf(textSize.default),
   onClick: PropTypes__default.default.func,
   onMouseEnter: PropTypes__default.default.func
 };
@@ -327,7 +330,9 @@ Cell.__docgenInfo = {
     "titleTextColor": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
       },
       "required": false
     },
@@ -336,7 +341,7 @@ Cell.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "titleSizeProps"
       },
       "required": false
     },
@@ -373,10 +378,21 @@ Cell.__docgenInfo = {
       },
       "required": false
     },
+    "valueTextAlign": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textAlignProps"
+      },
+      "required": false
+    },
     "valueTextColor": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
       },
       "required": false
     },
@@ -385,7 +401,7 @@ Cell.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textSizeProps"
       },
       "required": false
     },

package/dist/components/DatePicker.js

@@ -9183,13 +9183,14 @@ function DatePickerClearButton(props, ref) {
   } = props;
   const onClick = React.useCallback(event => {
     datepickerRef?.current?.onClearClick(event);
+    datepickerRef?.current?.handleFocus(event);
   }, []);
   return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, clearLabel && /*#__PURE__*/React__namespace.default.createElement(index$3.Label, {
     className: clsx__default.default('react-datepicker__clear-label', onClick && 'cursor_type_pointer'),
     label: clearLabel,
-    labelTextSize: clearLabelTextSize,
     labelTextColor: clearLabelTextColor,
     labelTextColorHover: clearLabelTextColorHover,
+    labelTextSize: clearLabelTextSize,
     onClick: onClick
   }), (clearIcon || clearIconSrc) && /*#__PURE__*/React__namespace.default.createElement(index$4.Icon, {
     className: clsx__default.default('react-datepicker__clear-icon', onClick && 'cursor_type_pointer'),

package/dist/components/FormField.js

@@ -115,7 +115,7 @@ function FormField(props) {
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'form-field', set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, directionClass),
-    "data-testId": dataTestId,
+    "data-test-id": dataTestId,
     style: formFieldStyles
   }, label && /*#__PURE__*/React__default.default.createElement("label", {
     htmlFor: id,
@@ -140,10 +140,10 @@ function FormField(props) {
     size: clearIconSize
   }), afterItem), /*#__PURE__*/React__default.default.createElement(index$2.Divider, {
     className: "form-field__item-divider",
-    width: dividerWidth,
     direction: dividerDirection,
+    fill: dividerFill,
     size: dividerSize,
-    fill: dividerFill
+    width: dividerWidth
   })), message && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__message"
   }, /*#__PURE__*/React__default.default.createElement(index.Text, {

package/dist/components/Grid.js

@@ -36,7 +36,7 @@ function Grid(props) {
     children,
     className,
     horizontalResizing,
-    scroll,
+    horizontalScroll,
     onClick,
     type,
     useGridSystem,
@@ -102,7 +102,7 @@ function Grid(props) {
     gridWrapperInner: gridWrapperInnerStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'grid', useGridSystem && `grid_state_system`, scroll && `grid_scroll_${scroll}`, type && `grid_type_${type}`, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`),
+    className: clsx__default.default(className, 'grid', useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`),
     "data-tour": dataTour,
     id: id,
     style: gridStyles,

package/dist/components/Icon.js

@@ -54,26 +54,26 @@ const iconConfig = {
 const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props, ref) {
   const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
   const {
-    before,
-    after,
     Badge,
     SvgImage,
-    id,
-    imageSrc,
-    dataTour,
+    after,
+    before,
     className,
+    dataTour,
+    height,
     href,
+    id,
+    imageSrc,
     link,
-    linkTarget,
     linkRel,
-    width,
-    height,
+    linkTarget,
     showTooltip,
+    tooltipAppearance,
     tooltipText,
     tooltipTextSize,
     tooltipTitle,
     tooltipTitleSize,
-    tooltipAppearance,
+    width,
     onClick
   } = props;
   const svgSizes = React.useMemo(() => {
@@ -85,7 +85,7 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
       sizes.height = height;
     }
     return sizes;
-  }, []);
+  }, [height, width]);
   const cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'cursor_',
     propsKey: 'cursor'
@@ -177,7 +177,7 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
       });
     }
     return null;
-  }, [SvgImage, imageSrc]);
+  }, [SvgImage, svgSizes, imageSrc]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     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,
@@ -194,8 +194,8 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
     rel: linkRel,
     target: linkTarget
   }, before, ImageComponent, after, Badge, isTooltipVisible && showTooltip && /*#__PURE__*/React__default.default.createElement(index$1.Tooltip, {
-    className: clsx__default.default(className, 'icon__tooltip', alignmentClass),
     appearance: tooltipAppearance,
+    className: clsx__default.default(className, 'icon__tooltip', alignmentClass),
     text: tooltipText,
     textSize: tooltipTextSize,
     title: tooltipTitle,
@@ -203,13 +203,18 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
   })));
 });
 Icon.propTypes = {
+  after: PropTypes__default.default.any,
+  // "bool" type is valid for condition constructions, e.g. "Boolean(some) && <Badge>"
+  Badge: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.bool]),
+  before: PropTypes__default.default.any,
   borderColor: PropTypes__default.default.oneOf(borderColor.default),
   borderType: PropTypes__default.default.oneOf(borderType.default),
   className: PropTypes__default.default.string,
+  dataTour: PropTypes__default.default.string,
   fill: PropTypes__default.default.oneOf(fill.default),
   fillDesktop: PropTypes__default.default.oneOf(fill.default),
   fillMobile: PropTypes__default.default.oneOf(fill.default),
-  fillSize: PropTypes__default.default.string,
+  fillSize: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
   fillSizeDesktop: PropTypes__default.default.string,
   fillSizeMobile: PropTypes__default.default.string,
   fillSizeTablet: PropTypes__default.default.string,
@@ -220,6 +225,7 @@ Icon.propTypes = {
   iconStrokeDesktop: PropTypes__default.default.oneOf(strokeColor.default),
   iconStrokeMobile: PropTypes__default.default.oneOf(strokeColor.default),
   iconStrokeTablet: PropTypes__default.default.oneOf(strokeColor.default),
+  id: PropTypes__default.default.string,
   imageSrc: PropTypes__default.default.string,
   link: PropTypes__default.default.string,
   LinkComponent: PropTypes__default.default.any,
@@ -229,11 +235,17 @@ Icon.propTypes = {
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  showTooltip: PropTypes__default.default.bool,
   size: PropTypes__default.default.oneOf(iconSize.default),
   sizeDesktop: PropTypes__default.default.oneOf(iconSize.default),
   sizeMobile: PropTypes__default.default.oneOf(iconSize.default),
   sizeTablet: PropTypes__default.default.oneOf(iconSize.default),
-  SvgImage: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.func, PropTypes__default.default.object]),
+  SvgImage: PropTypes__default.default.oneOfType([PropTypes__default.default.elementType, PropTypes__default.default.func, PropTypes__default.default.object]),
+  tooltipAppearance: PropTypes__default.default.string,
+  tooltipText: PropTypes__default.default.string,
+  tooltipTextSize: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
+  tooltipTitle: PropTypes__default.default.string,
+  tooltipTitleSize: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
   width: PropTypes__default.default.string,
   onClick: PropTypes__default.default.func
 };
@@ -259,6 +271,32 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "Badge": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "element"
+        }, {
+          "name": "bool"
+        }]
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
     "borderColor": {
       "description": "",
       "type": {
@@ -284,6 +322,13 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
+    "dataTour": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "fill": {
       "description": "",
       "type": {
@@ -314,7 +359,12 @@ Icon.__docgenInfo = {
     "fillSize": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
       },
       "required": false
     },
@@ -398,6 +448,13 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "imageSrc": {
       "description": "",
       "type": {
@@ -462,6 +519,13 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
+    "showTooltip": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "size": {
       "description": "",
       "type": {
@@ -503,7 +567,7 @@ Icon.__docgenInfo = {
       "type": {
         "name": "union",
         "value": [{
-          "name": "element"
+          "name": "elementType"
         }, {
           "name": "func"
         }, {
@@ -512,6 +576,51 @@ Icon.__docgenInfo = {
       },
       "required": false
     },
+    "tooltipAppearance": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipText": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipTextSize": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false
+    },
+    "tooltipTitle": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "tooltipTitleSize": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false
+    },
     "width": {
       "description": "",
       "type": {

package/dist/components/Input.js

@@ -123,7 +123,7 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     ref: ref,
     disabled: isDisabled,
     placeholder: placeholder,
-    "data-testid": dataTestId || (name ? `${name}Input` : 'input'),
+    "data-test-id": dataTestId || (name ? `${name}Input` : 'input'),
     value: value,
     onBlur: onBlur,
     onChange: onChange,

package/dist/components/Label.js

@@ -112,7 +112,7 @@ function Label(props) {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
-  const textAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'label_text-align_',
     propsKey: 'textAlign'
   });
@@ -136,7 +136,7 @@ function Label(props) {
   // } = labelAppearanceItem
 
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'label', fillClass || labelAppearanceItem.fill && `fill_${labelAppearanceItem.fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelAppearanceItem.fillHover && `fill_hover_${labelAppearanceItem.fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'label', fillClass || labelAppearanceItem.fill && `fill_${labelAppearanceItem.fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelAppearanceItem.fillHover && `fill_hover_${labelAppearanceItem.fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     style: labelStyles,
     onClick: onClick,

package/dist/components/Modal.js

@@ -4,7 +4,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var ReactDOM = require('react-dom');
 var clsx = require('clsx');
-var index = require('./Fader.js');
+var index = require('./Overlay.js');
 var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var index$1 = require('./Loader.js');
@@ -59,11 +59,11 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     closeButton,
     contentClassName,
     id,
-    isFader,
-    faderClassName,
-    faderFill,
-    faderFillGradient,
-    faderOpacity,
+    isOverlay,
+    overlayClassName,
+    overlayFill,
+    overlayFillGradient,
+    overlayOpacity,
     isOpen: initialIsOpen,
     isScrollOnOpen,
     isSetFocusOnOpen,
@@ -83,7 +83,7 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     }
   }, []);
   const modalContentRef = React.useRef(null);
-  const modalFaderRef = React.useRef(null);
+  const modalOverlayRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(initialIsOpen);
   const addModalProps = React.useCallback(element => {
     // Change class need in "useEffect"
@@ -132,10 +132,10 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
       if (modalContentElement) {
         modalContentElement.parentNode.appendChild(modalContentElement)
       }
-      // Also move fader to end of modal root container after container
-      const modalFaderElement = modalFaderRef.current
-      if (modalFaderElement) {
-        modalFaderElement.parentNode.appendChild(modalFaderElement)
+      // Also move overlay to end of modal root container after container
+      const modalOverlayElement = modalOverlayRef.current
+      if (modalOverlayElement) {
+        modalOverlayElement.parentNode.appendChild(modalOverlayElement)
       }
     */
   }, [onOpenModal]);
@@ -206,13 +206,13 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     onClick: closeModal
   }, closeButton), /*#__PURE__*/React__default.default.createElement("div", {
     className: "modal-content__wrapper"
-  }, children)), /*#__PURE__*/React__default.default.createElement(index.Fader, {
-    className: clsx__default.default('modal__fader', 'fader_type_modal', faderClassName),
-    fill: faderFill,
-    fillGradient: faderFillGradient,
-    isFader: isFader,
-    opacity: faderOpacity,
-    ref: modalFaderRef
+  }, children)), /*#__PURE__*/React__default.default.createElement(index.Overlay, {
+    className: clsx__default.default('modal__overlay', 'overlay_type_modal', overlayClassName),
+    fill: overlayFill,
+    fillGradient: overlayFillGradient,
+    isOverlay: isOverlay,
+    opacity: overlayOpacity,
+    ref: modalOverlayRef
   })) : null,
   // A DOM element
   modalElement);
@@ -224,11 +224,11 @@ Modal.propTypes = {
   closeText: PropTypes__default.default.string,
   contentClassName: PropTypes__default.default.string,
   debug: PropTypes__default.default.bool,
-  faderFill: PropTypes__default.default.string,
-  faderFillGradient: PropTypes__default.default.string,
-  faderOpacity: PropTypes__default.default.string,
+  overlayFill: PropTypes__default.default.string,
+  overlayFillGradient: PropTypes__default.default.string,
+  overlayOpacity: PropTypes__default.default.string,
   id: PropTypes__default.default.string,
-  isFader: PropTypes__default.default.bool,
+  isOverlay: PropTypes__default.default.bool,
   isScrollOnOpen: PropTypes__default.default.bool,
   isSetFocusOnOpen: PropTypes__default.default.bool,
   modalQuerySelector: PropTypes__default.default.string,
@@ -236,7 +236,7 @@ Modal.propTypes = {
   onOpenModal: PropTypes__default.default.func
 };
 Modal.defaultProps = {
-  isFader: true,
+  isOverlay: true,
   isOpen: false,
   isScrollOnOpen: true,
   isSetFocusOnOpen: true,
@@ -247,7 +247,7 @@ Modal.__docgenInfo = {
   "methods": [],
   "displayName": "Modal",
   "props": {
-    "isFader": {
+    "isOverlay": {
       "defaultValue": {
         "value": "true",
         "computed": false
@@ -340,21 +340,21 @@ Modal.__docgenInfo = {
       },
       "required": false
     },
-    "faderFill": {
+    "overlayFill": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "faderFillGradient": {
+    "overlayFillGradient": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "faderOpacity": {
+    "overlayOpacity": {
       "description": "",
       "type": {
         "name": "string"

package/dist/components/{Fader.js → Overlay.js}

@@ -22,10 +22,10 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-function Fader(props) {
+function Overlay(props) {
   const {
     className,
-    isFader,
+    isOverlay,
     type
   } = props;
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -41,19 +41,15 @@ function Fader(props) {
     propsKey: 'opacity'
   });
   const {
-    styles: faderStyles
+    styles: overlayStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'fader', opacityClass, isFader && 'fader_state_visible', type && `${className}_type_${type}`, fillClass, fillGradientClass),
-    style: faderStyles
+    className: clsx__default.default(className, 'overlay', opacityClass, isOverlay && 'overlay_state_visible', type && `${className}_type_${type}`, fillClass, fillGradientClass),
+    style: overlayStyles
   }, "\xA0");
 }
-Fader.propTypes = {
+Overlay.propTypes = {
   className: PropTypes__default.default.string,
-  opacity: PropTypes__default.default.string,
-  opacityDesktop: PropTypes__default.default.string,
-  opacityMobile: PropTypes__default.default.string,
-  opacityTablet: PropTypes__default.default.string,
   fill: PropTypes__default.default.oneOf(fill.default),
   fillMobile: PropTypes__default.default.oneOf(fill.default),
   fillTablet: PropTypes__default.default.oneOf(fill.default),
@@ -62,13 +58,17 @@ Fader.propTypes = {
   fillGradientMobile: PropTypes__default.default.oneOf(fillGradient.default),
   fillGradientTablet: PropTypes__default.default.oneOf(fillGradient.default),
   fillGradientDesktop: PropTypes__default.default.oneOf(fillGradient.default),
+  opacity: PropTypes__default.default.string,
+  opacityDesktop: PropTypes__default.default.string,
+  opacityMobile: PropTypes__default.default.string,
+  opacityTablet: PropTypes__default.default.string,
   type: PropTypes__default.default.string,
-  isFader: PropTypes__default.default.any
+  isOverlay: PropTypes__default.default.any
 };
-Fader.__docgenInfo = {
+Overlay.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "Fader",
+  "displayName": "Overlay",
   "props": {
     "className": {
       "description": "",
@@ -77,34 +77,6 @@ Fader.__docgenInfo = {
       },
       "required": false
     },
-    "opacity": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "opacityDesktop": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "opacityMobile": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "opacityTablet": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "fill": {
       "description": "",
       "type": {
@@ -177,6 +149,34 @@ Fader.__docgenInfo = {
       },
       "required": false
     },
+    "opacity": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "opacityDesktop": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "opacityMobile": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "opacityTablet": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "type": {
       "description": "",
       "type": {
@@ -184,7 +184,7 @@ Fader.__docgenInfo = {
       },
       "required": false
     },
-    "isFader": {
+    "isOverlay": {
       "description": "",
       "type": {
         "name": "any"
@@ -194,4 +194,4 @@ Fader.__docgenInfo = {
   }
 };
 
-exports.Fader = Fader;
+exports.Overlay = Overlay;

package/dist/components/ScrollOnDrag.js

@@ -0,0 +1,290 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var borderColor = require('../constants/componentProps/borderColor.js');
+var borderType = require('../constants/componentProps/borderType.js');
+var borderWidth = require('../constants/componentProps/borderWidth.js');
+var fillHover = require('../constants/componentProps/fillHover.js');
+var fill = require('../constants/componentProps/fill.js');
+var height = require('../constants/componentProps/height.js');
+var width = require('../constants/componentProps/width.js');
+var useStyles = require('../hooks/useStyles.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var isProduction = process.env.NODE_ENV === 'production';
+var prefix = 'Invariant failed';
+function invariant(condition, message) {
+    if (condition) {
+        return;
+    }
+    if (isProduction) {
+        throw new Error(prefix);
+    }
+    var provided = typeof message === 'function' ? message() : message;
+    var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+    throw new Error(value);
+}
+
+const maxHorizontalScroll = dom => dom.scrollWidth - dom.clientWidth;
+const maxVerticalScroll = dom => dom.scrollHeight - dom.clientHeight;
+var useScrollOnDrag = ((domRef, {
+  onDragStart = () => {},
+  onDragEnd = () => {},
+  runScroll = ({
+    dx,
+    dy
+  }) => {
+    const offsetX = Math.min(maxHorizontalScroll(domRef.current), domRef.current.scrollLeft + dx);
+    domRef.current.scrollLeft = offsetX; // eslint-disable-line no-param-reassign
+
+    const offsetY = Math.min(maxVerticalScroll(domRef.current), domRef.current.scrollTop + dy);
+    domRef.current.scrollTop = offsetY; // eslint-disable-line no-param-reassign
+  }
+} = {}) => {
+  const internalState = React.useRef({
+    lastMouseX: null,
+    lastMouseY: null,
+    isMouseDown: false,
+    isScrolling: false
+  });
+  const scroll = React.useCallback(({
+    dx,
+    dy
+  }) => {
+    !(domRef.current !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, `Trying to scroll to the bottom, but no element was found.
+      Did you call this scrollBottom before the component with this hook finished mounting?`) : invariant(false) : void 0;
+    runScroll({
+      dx,
+      dy
+    });
+  }, [runScroll]);
+  const onMouseDown = React.useCallback(e => {
+    internalState.current.isMouseDown = true;
+    internalState.current.lastMouseX = e.clientX;
+    internalState.current.lastMouseY = e.clientY;
+  }, []);
+  const onMouseUp = () => {
+    internalState.current.isMouseDown = false;
+    internalState.current.lastMouseX = null;
+    internalState.current.lastMouseY = null;
+    if (internalState.current.isScrolling) {
+      internalState.current.isScrolling = false;
+      onDragEnd();
+    }
+  };
+  const onMouseMove = e => {
+    if (!internalState.current.isMouseDown) {
+      return;
+    }
+    if (!internalState.current.isScrolling) {
+      internalState.current.isScrolling = true;
+      onDragStart();
+    }
+
+    // diff is negative because we want to scroll in the opposite direction of the movement
+    const dx = -(e.clientX - internalState.current.lastMouseX);
+    const dy = -(e.clientY - internalState.current.lastMouseY);
+    internalState.current.lastMouseX = e.clientX;
+    internalState.current.lastMouseY = e.clientY;
+    scroll({
+      dx,
+      dy
+    });
+  };
+  React.useEffect(() => {
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('mousemove', onMouseMove);
+    return () => {
+      window.removeEventListener('mouseup', onMouseUp);
+      window.removeEventListener('mousemove', onMouseMove);
+    };
+  }, []);
+  return {
+    events: {
+      onMouseDown
+    }
+  };
+});
+
+function ScrollOnDrag(props) {
+  const {
+    children,
+    className,
+    speed
+  } = props;
+  const ref = React.useRef(null);
+  const fun = ref => ({
+    dx
+  }) => {
+    ref.current.scrollLeft += dx * speed; // eslint-disable-line no-param-reassign
+  };
+  const {
+    events
+  } = useScrollOnDrag(ref, {
+    runScroll: fun(ref)
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'height'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
+  const {
+    styles: groupStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({
+    className: clsx__default.default(className, 'scrolldrag', borderColorClass, borderTypeClass, borderWidthClass, elevationClass, fillClass, fillHoverClass, heightClass, widthClass)
+  }, events, {
+    ref: ref,
+    style: groupStyles
+  }), children);
+}
+ScrollOnDrag.propTypes = {
+  borderColor: PropTypes__default.default.oneOf(borderColor.default),
+  borderType: PropTypes__default.default.oneOf(borderType.default),
+  borderWidth: PropTypes__default.default.oneOf(borderWidth.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  elevation: PropTypes__default.default.oneOf(),
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillHover: PropTypes__default.default.oneOf(fillHover.default),
+  height: PropTypes__default.default.oneOf(height.default),
+  width: PropTypes__default.default.oneOf(width.default)
+};
+ScrollOnDrag.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ScrollOnDrag",
+  "props": {
+    "borderColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderColorProps"
+      },
+      "required": false
+    },
+    "borderType": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderTypeProps"
+      },
+      "required": false
+    },
+    "borderWidth": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderWidthProps"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "elevation": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "PropTypes.oneOf()"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillHover": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillHoverProps"
+      },
+      "required": false
+    },
+    "height": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "heightProps"
+      },
+      "required": false
+    },
+    "width": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.ScrollOnDrag = ScrollOnDrag;

package/dist/components/Text.js

@@ -106,7 +106,7 @@ function Text(props) {
     htmlFor: htmlFor,
     style: textStyles,
     onClick: onClick,
-    "data-testid": dataTestId
+    "data-test-id": dataTestId
   }, before, children, after);
 }
 Text.propTypes = {

package/dist/constants/componentProps/borderWidth.js

@@ -1,5 +1,7 @@
 'use strict';
 
-const borderWidthProps = [null, '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
+const borderWidthProps = [null, /* eslint-disable */
+'1', 1, '2', 2, '3', 3, '4', 4, '5', 5, '6', 6, '7', 7, '8', 8, '9', 9, '10', 10
+/* eslint-enable */];
 
 exports.default = borderWidthProps;

package/dist/constants/componentProps/emojiSize.js

@@ -1,5 +1,7 @@
 'use strict';
 
-const emojiSizeProps = [null, '16', '24', '32', '40', '56', '64', '144'];
+const emojiSizeProps = [null, /* eslint-disable */
+'16', 16, '24', 24, '32', 32, '40', 40, '56', 56, '64', 64, '144', 144
+/* eslint-enable */];
 
 exports.default = emojiSizeProps;

package/dist/constants/componentProps/iconFillSize.js

@@ -1,5 +1,7 @@
 'use strict';
 
-const iconFillProps = [null, '14', '16', '24', '32', '40', '60', '64', '144'];
+const iconFillProps = [null, /* eslint-disable */
+'14', 14, '16', 16, '24', 24, '32', 32, '40', 40, '60', 60, '64', 64, '144', 144
+/* eslint-enable */];
 
 exports.default = iconFillProps;

package/dist/constants/componentProps/iconSize.js

@@ -1,5 +1,7 @@
 'use strict';
 
-const iconSizeProps = [null, '14', '16', '24', '32', '40', '60', '64', '144'];
+const iconSizeProps = [null, /* eslint-disable */
+'14', 14, '16', 16, '24', 24, '32', 32, '40', 40, '60', 60, '64', 64, '144', 144
+/* eslint-enable */];
 
 exports.default = iconSizeProps;

package/dist/constants/componentProps/sizePX.js

@@ -1,5 +1,7 @@
 'use strict';
 
-const sizePXProps = [null, '14', '16', '24', '32', '40', '48', '56', '60', '64', '72', '80', '96', '112', '144', '240'];
+const sizePXProps = [null, /* eslint-disable */
+'14', 14, '16', 16, '24', 24, '32', 32, '40', 40, '48', 48, '56', 56, '60', 60, '64', 64, '72', 72, '80', 80, '96', 96, '112', 112, '144', 144, '240', 240
+/* eslint-enable */];
 
 exports.default = sizePXProps;

package/dist/css/components/DatePicker/DatePicker.css

@@ -829,11 +829,11 @@
               }
             }
             &--in-selecting-range:not(
-            .react-datepicker__day--in-range,
-            .react-datepicker__month-text--in-range,
-            .react-datepicker__quarter-text--in-range,
-            .react-datepicker__year-text--in-range
-          ) {
+                .react-datepicker__day--in-range,
+                .react-datepicker__month-text--in-range,
+                .react-datepicker__quarter-text--in-range,
+                .react-datepicker__year-text--in-range
+              ) {
               background: var(--date-picker-day-selected-background);
               & .button__label {
                 color: var(--date-picker-day-selected-text-color);
@@ -878,6 +878,12 @@
                 &:hover {
                   border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
                 }
+                &.react-datepicker__day--today {
+                  border-radius: var(--date-picker-day-today-border-radius) !important;
+                  &:hover {
+                    border-radius: var(--date-picker-day-today-border-radius) !important;
+                  }
+                }
               }
               &.react-datepicker__day--selecting-range-start.react-datepicker__day--selecting-range-end {
                 border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
@@ -1165,6 +1171,7 @@
   --date-picker-day-range-end-border-radius: 0 12px 12px 0;
   --date-picker-day-range-start-end-border-radius: 12px;
   --date-picker-day-today-background: var(--color-surface-secondary);
+  --date-picker-day-today-border-radius: 12px;
   --date-picker-day-today-text-color: var(--color-surface-text-primary);
   --date-picker-day-weekend-background: var(--color-surface-primary);
   --date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);

package/dist/css/components/Group/Group.css

@@ -74,14 +74,6 @@
   }
 }
 
-.group {
-  & .width {
-    &_fixed {
-      width: 300px;
-    }
-  }
-}
-
 .group {
   &_wrap {
     @each $val in nowrap, wrap, wrap-reverse {

package/dist/css/components/Label/Label.css

@@ -67,25 +67,6 @@ div.label {
     z-index: 12;
   }
 }
-.label {
-  &&_text-align {
-    &_left {
-      ^^&__inner {
-        text-align: left;
-      }
-    }
-    &_center {
-      ^^&__inner {
-        text-align: center;
-      }
-    }
-    &_right {
-      ^^&__inner {
-        text-align: right;
-      }
-    }
-  }
-}
 .label {
   &&_width {
     &_fixed {

package/dist/css/components/Modal/Modal.css

@@ -3,12 +3,12 @@
   min-height: 100%;
   position: fixed;
   display: none;
-  top: 0;
-  left: 0;
   justify-content: center;
   align-items: center;
+  left: 0;
+  top: 0;
   z-index: 1000000;
-  &__fader {
+  &__overlay {
     z-index: -1;
   }
   &&_state_visible {

package/dist/css/components/{Fader/Fader.css → Overlay/Overlay.css}

@@ -1,26 +1,26 @@
-.fader {
+.overlay {
   width: 100%;
   height: 100%;
-  background: var(--fader-fill);
+  background: var(--overlay-fill);
   position: absolute;
   left: 0;
   top: 0;
   z-index: 1;
-  backdrop-filter: blur(var(--fader-blur, 10px));
+  backdrop-filter: blur(var(--overlay-blur, 10px));
 }
-.fader {
+.overlay {
   &&_state {
     &_visible {
       position: fixed;
       visibility: visible !important;
-      animation-name: faderFadeIn;
+      animation-name: overlayFadeIn;
     }
     &_hidden {
-      animation-name: faderFaderOut;
+      animation-name: overlayFaderOut;
     }
   }
 }
-@keyframes faderFadeIn {
+@keyframes overlayFadeIn {
   from {
     opacity: 0%;
   }
@@ -28,7 +28,7 @@
     opacity: 100%;
   }
 }
-@keyframes faderFaderOut {
+@keyframes overlayFaderOut {
   from {
     opacity: 100%;
   }
@@ -36,8 +36,8 @@
     opacity: 0%;
   }
 }
-.fader {
+.overlay {
   &&_type_click {
-    opacity: 0;
+    opacity: 0%;
   }
 }

package/dist/css/components/ScrollOnDrag/ScrollOnDrag.css

@@ -0,0 +1,6 @@
+.scrolldrag {
+  white-space: nowrap;
+  padding: 0 5px;
+  display: inline-block;
+  overflow: scroll hidden;
+}

package/dist/stories/ModalConfirm.stories.js

@@ -15,7 +15,7 @@ export default {
 export const Default = {
   args: {
     isOpen: true,
-    isFader: true,
+    isOverlay: true,
     isOutsideClose: true,
     shape: 'rounded',
     elevation: 8,

package/dist/stories/ModalDefault.stories.js

@@ -13,7 +13,7 @@ export default {
 export const Default = {
   args: {
     isOpen: true,
-    isFader: true,
+    isOverlay: true,
     isOutsideClose: true,
     shape: 'rounded',
     elevation: 8,

package/package.json

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