@itcase/ui 1.1.1 → 1.1.3

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

@@ -47,9 +47,16 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const searchInputConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    searchInputConfig.appearance = newComponent;
+  }
+};
 const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function SearchInput(props, ref) {
   const {
     after,
+    appearance,
     before,
     className,
     size,
@@ -146,7 +153,7 @@ const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Sear
     styles: searchInputStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("label", {
-    className: clsx__default.default(className, 'search-input', shapeClass, fillClass, widthClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, size && `search-input_size_${size}`, type && `search-input_type_${type}`),
+    className: clsx__default.default(className, 'search-input', shapeClass || searchInputConfig.appearance[appearance] && `search_shape_${searchInputConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillClass || searchInputConfig.appearance[appearance] && `fill_${searchInputConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), widthClass, borderColorClass || searchInputConfig.appearance[appearance] && `border-color_${searchInputConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorHoverClass || searchInputConfig.appearance[appearance] && `border-color_hover_${searchInputConfig.appearance[appearance].borderHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderWidthClass, borderTypeClass, size && `search-input_size_${size}`, type && `search-input_type_${type}`),
     "data-tour": dataTour,
     style: searchInputStyles
   }, before, (iconBefore || iconBeforeSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
@@ -172,7 +179,7 @@ const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Sear
   }, /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: clsx__default.default('search-input__placeholder-value'),
     size: placeholderTextSize,
-    textColor: placeholderTextColor,
+    textColor: placeholderTextColor || searchInputConfig.appearance[appearance].placeholderTextColor,
     textStyle: placeholderTextStyle,
     textWeight: placeholderTextWeight
   }, placeholder || 'Search')), value && /*#__PURE__*/React__default.default.createElement(index.Icon, {
@@ -229,7 +236,8 @@ SearchInput.propTypes = {
 };
 SearchInput.defaultProps = {
   placeholderTextSize: 'm',
-  inputTextSize: 'm'
+  inputTextSize: 'm',
+  size: 'normal'
 };
 SearchInput.__docgenInfo = {
   "description": "",
@@ -258,6 +266,13 @@ SearchInput.__docgenInfo = {
       },
       "required": false
     },
+    "size": {
+      "defaultValue": {
+        "value": "'normal'",
+        "computed": false
+      },
+      "required": false
+    },
     "after": {
       "description": "",
       "type": {
@@ -553,3 +568,4 @@ SearchResult.__docgenInfo = {
 
 exports.SearchInput = SearchInput;
 exports.SearchResult = SearchResult;
+exports.searchInputConfig = searchInputConfig;

package/dist/components/Tab.js

@@ -141,7 +141,7 @@ function Tab(props) {
     styles: tab
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', fillClass || (isDisabled ? fillDisabledClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fillDisabled}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass || (isDisabled ? null : tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase()), className, sizeClass, fillActiveClass, fillActiveHoverClass, shapeClass, typeClass, widthClass, reset && 'tab-reset', set && `tab_set_${set}`, justifyContentClass, onClick && 'cursor_type_pointer'),
+    className: clsx__default.default('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', fillClass || (isDisabled ? fillDisabledClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fillDisabled}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass || (isDisabled ? null : tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase()), className, sizeClass || tabConfig.appearance[appearance] && `tab_size_${tabConfig.appearance[appearance]?.size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillActiveClass, fillActiveHoverClass, shapeClass, typeClass || tabConfig.appearance[appearance] && `tab_type_${tabConfig.appearance[appearance].type}`.replace(/([A-Z])/g, '-$1').toLowerCase(), widthClass, reset && 'tab-reset', set && `tab_set_${set}`, justifyContentClass, onClick && 'cursor_type_pointer'),
     "data-tour": dataTour,
     style: tab,
     onClick: onClick,
@@ -154,9 +154,9 @@ function Tab(props) {
     target: target
   }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, before, children || /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
     className: "tab__wrapper"
-  }, label && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+  }, (label || tabConfig.appearance[appearance].label) && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "tab__label",
-    size: labelTextSize,
+    size: labelTextSize || tabConfig.appearance[appearance].labelTextSize,
     textColor: isDisabled ? labelColorDisabled || tabConfig.appearance[appearance].labelColorDisabled : labelColor || tabConfig.appearance[appearance].labelColor,
     textColorActive: isActive && (labelColorActive || tabConfig.appearance[appearance].labelColorActive),
     textColorGradient: labelTextGradient,
@@ -164,11 +164,11 @@ function Tab(props) {
     textStyle: labelTextStyle,
     textWeight: labelTextWeight,
     textWrap: labelTextWrap
-  }, dividerFillActive, " ", label), badgeValue && /*#__PURE__*/React__default.default.createElement(index$2.Badge, {
-    appearance: badgeAppearance,
-    size: badgeSize,
-    textSize: badgeTextSize,
-    value: badgeValue
+  }, dividerFillActive, " ", label || tabConfig.appearance[appearance].label), (badgeValue || tabConfig.appearance[appearance].badgeValue) && /*#__PURE__*/React__default.default.createElement(index$2.Badge, {
+    appearance: badgeAppearance || tabConfig.appearance[appearance].badgeAppearance,
+    size: badgeSize || tabConfig.appearance[appearance].badgeSize,
+    textSize: badgeTextSize || tabConfig.appearance[appearance].badgeTextSize,
+    value: badgeValue || tabConfig.appearance[appearance].badgeValue
   })), /*#__PURE__*/React__default.default.createElement(index$3.Divider, {
     direction: dividerDirection,
     fill: isDisabled ? dividerFillDisabled || tabConfig.appearance[appearance].dividerFillDisabled : dividerFill || tabConfig.appearance[appearance].dividerFill,

package/dist/components/Text.js

@@ -49,9 +49,6 @@ function Text(props) {
     type,
     onClick
   } = props;
-  const {
-    styles: textStyles
-  } = useStyles.useStyles(props);
   const cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'cursor_',
     propsKey: 'cursor'
@@ -100,13 +97,16 @@ function Text(props) {
     prefix: 'width_',
     propsKey: 'width'
   });
+  const {
+    styles: textStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(className, 'text', sizeClass || textConfig.appearance[appearance] && `text_size_${textConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, textAlignClass, textColorClass || textConfig.appearance[appearance] && `text-color_${textConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && `text_type_${type}`, mode && `text_mode_${mode}`, widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     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/InputMask/Input.css

@@ -0,0 +1,77 @@
+.input {
+  min-width: unset;
+  padding: 0;
+  margin: 0;
+  border: none;
+  position: relative;
+  box-shadow: none;
+  appearance: none;
+  outline: 0;
+  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 {
+    background: var(--input-state-hover-background);
+    border: solid 1px var(--input-state-hover-border);
+  }
+  &&_state {
+    &_success {
+      background: var(--input-state-success-background);
+      border: solid 1px var(--input-state-success-border);
+    }
+    &_error {
+      background: var(--input-state-error-background);
+      border: solid 1px var(--input-state-error-border);
+    }
+    &_focus {
+      background: var(--input-state-focus-background);
+      border: solid 1px var(--input-state-focus-border);
+    }
+  }
+}
+.input {
+  &_shape {
+    &_rounded {
+      border-radius: var(--input-shape-rounded, 4px);
+      position: relative;
+    }
+    &_underline {
+      border-left: none !important;
+      border-top: none !important;
+      border-right: none !important;
+      position: relative;
+    }
+  }
+}
+.input {
+  &&_size {
+    @each $size in xs, s, m, l, xl, xxl, normal, tiny, compact, large {
+      &_$(size) {
+        padding: var(--input-size-$(size)-padding);
+      }
+    }
+  }
+}
+.input {
+  &_type {
+    &_number {
+      appearance: none;
+      &[type='number'] {
+        appearance: textfield;
+      }
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        appearance: none;
+      }
+    }
+  }
+}

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

@@ -2,8 +2,8 @@
   position: relative;
   display: flex;
   flex-flow: column wrap;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   &__inner {
     position: relative;
     display: flex;

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 {