@itcase/ui 1.1.2 → 1.1.4

package/dist/components/Cell.js

@@ -82,6 +82,7 @@ function Cell(props) {
     title,
     titleTextSize,
     titleTextColor,
+    titleTextTruncate,
     titleTextWeight,
     titleTextWrap,
     showTitleLabel,
@@ -166,6 +167,7 @@ function Cell(props) {
     size: titleTextSize,
     tag: titleTag,
     textColor: titleTextColor,
+    textTruncate: titleTextTruncate,
     textWeight: titleTextWeight,
     textWrap: titleTextWrap
   }, title), (titleIcon || titleIconSrc) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {

package/dist/components/Input.js

@@ -108,13 +108,6 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
     prefix: 'width_',
     propsKey: 'width'
   });
-
-  // const disabledClasses = {
-  //   'borderColorClass': 'borderColorDisabledClass',
-  //   'placeholderTextColorClass': 'placeholderTextColorDisabledClass',
-  //   'textColorClass': 'textColorDisabledClass'
-  // }
-
   return /*#__PURE__*/React__default.default.createElement("input", {
     className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputConfig.appearance[appearance] && `input_shape_${inputConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputConfig.appearance[appearance] && `text_size_${inputConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputConfig.appearance[appearance] && `input_size_${inputConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputConfig.appearance[appearance]?.borderColor && `border-color_${inputConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputConfig.appearance[appearance]?.textColor && `text-color_${inputConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputConfig.state[state]?.borderColor && `border-color_disabled_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
     type: type,

package/dist/components/InputMask.js

@@ -0,0 +1,233 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+
+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);
+
+const inputMaskConfig = {
+  state: {},
+  setState: newComponent => {
+    inputMaskConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    inputMaskConfig.appearance = newComponent;
+  }
+};
+const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(props, ref) {
+  const {
+    appearance,
+    state,
+    id,
+    index,
+    dataTestId,
+    type,
+    className,
+    name,
+    placeholder,
+    isDisabled,
+    value,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input_size_',
+    propsKey: 'size'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input_shape_',
+    propsKey: 'shape'
+  });
+  const textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'textSize'
+  });
+  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'textColor'
+  });
+  const textColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_disabled_',
+    propsKey: 'textColor'
+  });
+  const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'caret-color_',
+    propsKey: 'caret'
+  });
+  const placeholderTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_',
+    propsKey: 'placeholderTextColor'
+  });
+  const placeholderTextColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_disabled_',
+    propsKey: 'placeholderTextColorDisabled'
+  });
+  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'textWeight'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderWidthDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_disabled_',
+    propsKey: 'borderWidthDisabled'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_disabled_',
+    propsKey: 'borderColorDisabled'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement("input", {
+    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputMaskConfig.appearance[appearance] && `input_shape_${inputMaskConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputMaskConfig.appearance[appearance] && `text_size_${inputMaskConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputMaskConfig.appearance[appearance] && `input_size_${inputMaskConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputMaskConfig.appearance[appearance]?.borderColor && `border-color_${inputMaskConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputMaskConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputMaskConfig.appearance[appearance]?.textColor && `text-color_${inputMaskConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? borderColorClass || inputMaskConfig.state[state]?.borderColor && `border-color_${inputMaskConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputMaskConfig.state[state]?.borderColor && `border-color_disabled_${inputMaskConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputMaskConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputMaskConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputMaskConfig.state[state]?.textColor && `text-color_${inputMaskConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputMaskConfig.state[state]?.textColor && `text-color_${inputMaskConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    type: type,
+    id: id,
+    index: index,
+    ref: ref,
+    disabled: isDisabled,
+    placeholder: placeholder,
+    "data-test-id": dataTestId || (name ? `${name}Input` : 'input'),
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
+  });
+});
+Input.propTypes = {
+  id: PropTypes__default.default.string,
+  className: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  value: PropTypes__default.default.string,
+  checked: PropTypes__default.default.bool,
+  isDisabled: PropTypes__default.default.bool,
+  onBlur: PropTypes__default.default.func,
+  onChange: PropTypes__default.default.func,
+  onKeyDown: PropTypes__default.default.func,
+  type: PropTypes__default.default.string
+};
+Input.defaultProps = {
+  size: 'm',
+  type: 'text'
+};
+Input.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Input",
+  "props": {
+    "size": {
+      "defaultValue": {
+        "value": "'m'",
+        "computed": false
+      },
+      "required": false
+    },
+    "type": {
+      "defaultValue": {
+        "value": "'text'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "placeholder": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "value": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "checked": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "isDisabled": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "onBlur": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onChange": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onKeyDown": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Input = Input;
+exports.inputMaskConfig = inputMaskConfig;

package/dist/components/InputPassword.js

@@ -55,7 +55,7 @@ const inputPasswordConfig = {
     inputPasswordConfig.appearance = newComponent;
   }
 };
-function InputPassword(props) {
+function InputMask(props) {
   const {
     appearance,
     state,
@@ -152,7 +152,7 @@ function InputPassword(props) {
     onClick: revealeHandler
   }));
 }
-InputPassword.propTypes = {
+InputMask.propTypes = {
   id: PropTypes__default.default.string,
   className: PropTypes__default.default.string,
   placeholder: PropTypes__default.default.string,
@@ -164,14 +164,14 @@ InputPassword.propTypes = {
   onKeyDown: PropTypes__default.default.func,
   type: PropTypes__default.default.string
 };
-InputPassword.defaultProps = {
+InputMask.defaultProps = {
   size: 'm',
   type: 'text'
 };
-InputPassword.__docgenInfo = {
+InputMask.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "InputPassword",
+  "displayName": "InputMask",
   "props": {
     "size": {
       "defaultValue": {
@@ -257,5 +257,5 @@ InputPassword.__docgenInfo = {
   }
 };
 
-exports.InputPassword = InputPassword;
+exports.InputMask = InputMask;
 exports.inputPasswordConfig = inputPasswordConfig;

package/dist/components/Label.js

@@ -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, 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 || labelAppearanceItem.shape && `label_shape_${labelAppearanceItem.shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderClass, borderTypeClass, sizeClass || labelAppearanceItem.size && `label_size_${labelAppearanceItem.size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), 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,
@@ -146,12 +146,12 @@ function Label(props) {
     className: "label__inner"
   }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "label__label",
-    size: labelTextSize,
+    size: labelTextSize || labelAppearanceItem.labelTextSize,
     textColor: labelTextColor || labelAppearanceItem.labelTextColor,
     textColorHover: labelTextColorHover || labelAppearanceItem.labelTextColorHover,
     textWeight: labelTextWeight || labelAppearanceItem.labelTextWeight,
     textWrap: labelTextWrap
-  }, label) : /*#__PURE__*/React__default.default.createElement("div", {
+  }, label || labelAppearanceItem.label) : /*#__PURE__*/React__default.default.createElement("div", {
     className: "label__label"
   }, label), children, showTooltip && /*#__PURE__*/React__default.default.createElement(index$1.Tooltip, {
     alignment: tooltipAlignment,

package/dist/components/Response.js

@@ -21,13 +21,13 @@ var index = require('./Group.js');
 var index$2 = require('./Text.js');
 var index$1 = require('./Title.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
 require('./Icon.js');
 require('./Link.js');
 require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/underline.js');
-require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -98,6 +98,7 @@ function Response(props) {
     secondaryButtonShape,
     secondaryButtonSize,
     secondaryButtonWidth,
+    set,
     onClickPrimaryButton,
     onClickSecondaryButton
   } = props;
@@ -143,50 +144,54 @@ function Response(props) {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
+  const {
+    styles: responseStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'response', fillClass, fillHoverClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass)
-  }, before, ImageComponent, /*#__PURE__*/React__default.default.createElement(index.Group, {
+    className: clsx__default.default(className, 'response', fillClass || responseConfig.appearance[appearance] && `fill_${responseConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || responseConfig.appearance[appearance] && `fill_hover_${responseConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass || responseConfig.appearance[appearance] && `fill_hover_${responseConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, set && `response_set_${set}`),
+    style: responseStyles
+  }, before, ImageComponent || responseConfig.appearance[appearance]?.imageSrc, /*#__PURE__*/React__default.default.createElement(index.Group, {
     className: "response__desc",
     width: "fill"
   }, title && /*#__PURE__*/React__default.default.createElement(index$1.Title, {
     className: "response__title",
-    size: titleTextSize || responseConfig.appearance[appearance]?.titleTextSize,
+    size: titleTextSize || responseConfig.appearance[appearance]?.titleTextSize || 'h2',
     textColor: titleTextColor || responseConfig.appearance[appearance]?.titleTextColor,
-    textWeight: titleTextWeight || responseConfig.appearance[appearance]?.titleTextWeight
+    textWeight: titleTextWeight || responseConfig.appearance[appearance]?.titleTextWeight || '600'
   }, title), message && /*#__PURE__*/React__default.default.createElement(index$2.Text, {
     className: "response__message",
-    size: messageTextSize || responseConfig.appearance[appearance]?.messageTextSize,
+    size: messageTextSize || responseConfig.appearance[appearance]?.messageTextSize || 'xxl',
     textColor: messageTextColor || responseConfig.appearance[appearance]?.messageTextColor
-  }, message)), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton) && /*#__PURE__*/React__default.default.createElement(index.Group, {
+  }, message)), (primaryButtonLabel || responseConfig.appearance[appearance]?.primaryButtonLabel || primaryButton || secondaryButtonLabel || responseConfig.appearance[appearance]?.secondaryButtonLabel || secondaryButton) && /*#__PURE__*/React__default.default.createElement(index.Group, {
     className: "response__button",
     width: "fill"
-  }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
+  }, primaryButtonLabel || responseConfig.appearance[appearance].primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
     after: primaryButtonAfter,
-    appearance: primaryButtonAppearance || responseConfig.appearance[appearance]?.primaryButtonAppearance,
+    appearance: primaryButtonAppearance || responseConfig.appearance[appearance]?.primaryButtonAppearance || 'dev',
     before: primaryButtonBefore,
     className: "response__button-item",
     fill: primaryButtonFill,
     fillHover: primaryButtonFillHover,
-    label: primaryButtonLabel,
+    label: primaryButtonLabel || responseConfig.appearance[appearance].primaryButtonLabel,
     labelTextColor: primaryButtonLabelTextColor,
     labelTextSize: primaryButtonLabelTextSize || responseConfig.appearance[appearance]?.primaryButtonLabelTextSize,
     shape: primaryButtonShape || responseConfig.appearance[appearance]?.primaryButtonShape,
     size: primaryButtonSize || responseConfig.appearance[appearance]?.primaryButtonSize,
-    width: primaryButtonWidth || responseConfig.appearance[appearance]?.primaryButtonWidth,
+    width: primaryButtonWidth || responseConfig.appearance[appearance]?.primaryButtonWidth || 'fill',
     onClick: onClickPrimaryButton
-  }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
+  }) : primaryButton, secondaryButtonLabel || responseConfig.appearance[appearance]?.secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
     after: secondaryButtonAfter,
-    appearance: secondaryButtonAppearance || responseConfig.appearance[appearance]?.secondaryButtonAppearance,
+    appearance: secondaryButtonAppearance || responseConfig.appearance[appearance]?.secondaryButtonAppearance || 'dev',
     before: secondaryButtonBefore,
     className: "response__button-item",
     fill: secondaryButtonFill,
     fillHover: secondaryButtonFillHover,
-    label: secondaryButtonLabel,
+    label: secondaryButtonLabel || responseConfig.appearance[appearance].secondaryButtonLabel,
     labelTextColor: secondaryButtonLabelTextColor,
     labelTextSize: secondaryButtonLabelTextSize || responseConfig.appearance[appearance]?.secondaryButtonLabelTextSize,
     shape: secondaryButtonShape || responseConfig.appearance[appearance]?.secondaryButtonShape,
     size: secondaryButtonSize || responseConfig.appearance[appearance]?.secondaryButtonSize,
-    width: secondaryButtonWidth || responseConfig.appearance[appearance]?.secondaryButtonWidth,
+    width: secondaryButtonWidth || responseConfig.appearance[appearance]?.secondaryButtonWidth || 'fill',
     onClick: onClickSecondaryButton
   }) : secondaryButton), after);
 }

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,6 +97,9 @@ 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,

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

@@ -19,3 +19,11 @@
     gap: 16px;
   }
 }
+.response {
+  &_set {
+    &_message {
+      margin: 200px 0 0 0;
+      align-self: center;
+    }
+  }
+}

package/dist/css/styles/align/align_vertical-reverse.css

@@ -7,12 +7,12 @@
         align-items: flex-start;
       }
       &-center {
-        align-items: center;
         text-align: center;
+        align-items: center;
       }
       &-right {
-        align-items: flex-end;
         text-align: right;
+        align-items: flex-end;
       }
     }
     &^&_left {
@@ -20,14 +20,14 @@
       align-items: flex-start;
     }
     &^&_center {
+      text-align: center;
       justify-content: center;
       align-items: center;
-      text-align: center;
     }
     &^&_right {
+      text-align: right;
       justify-content: center;
       align-items: flex-end;
-      text-align: right;
     }
     &^&_bottom {
       &-left {
@@ -35,14 +35,14 @@
         align-items: flex-start;
       }
       &-center {
+        text-align: center;
         justify-content: flex-end;
         align-items: center;
-        text-align: center;
       }
       &-right {
+        text-align: right;
         justify-content: flex-end;
         align-items: flex-end;
-        text-align: right;
       }
     }
   }

package/dist/css/styles/align/align_vertical.css

@@ -15,8 +15,8 @@
         align-items: flex-end;
       }
       &-auto {
-        justify-content: space-between;
         text-align: center;
+        justify-content: space-between;
         align-items: center;
       }
     }
@@ -25,19 +25,19 @@
       align-items: flex-start;
     }
     &^&_center {
+      text-align: center;
       justify-content: center;
       align-items: center;
-      text-align: center;
       &-auto {
-      align-items: center;
-      text-align: center;
+        text-align: center;
         justify-content: space-between;
+        align-items: center;
       }
     }
     &^&_right {
+      text-align: right;
       justify-content: center;
       align-items: flex-end;
-      text-align: right;
     }
     &^&_bottom {
       &-left {
@@ -45,19 +45,19 @@
         align-items: flex-start;
       }
       &-center {
+        text-align: center;
         justify-content: flex-end;
         align-items: center;
-        text-align: center;
       }
       &-right {
+        text-align: right;
         justify-content: flex-end;
         align-items: flex-end;
-        text-align: right;
       }
       &-auto {
-        align-items: center;
         text-align: center;
         justify-content: space-between;
+        align-items: center;
       }
     }
   }

package/dist/css/styles/border-color/border-color.css

@@ -1,5 +1,5 @@
 .border-color {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
     &_$(type) {
       &-border {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover, invert {

package/dist/css/styles/border-color/border-color_focus.css

@@ -1,9 +1,9 @@
 .border-color {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
     &_focus {
       &_$(type) {
         &-border {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover {
             &-$(color) {
               &:focus {
                 outline: 0;

package/dist/css/styles/border-color/border-color_hover.css

@@ -1,6 +1,6 @@
 .border-color {
   &_hover {
-    @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         &-border {
           @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {

package/dist/css/styles/caret-color/caret-color.css

@@ -1,5 +1,5 @@
 .caret-color {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
     &_$(type) {
       &-item {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {

package/dist/css/styles/fill/fill.css

@@ -1,5 +1,5 @@
 .fill {
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning, gradient {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
     &_$(type) {
       &-item {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
@@ -27,7 +27,7 @@
       }
     }
   }
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
     &_$(type) {
       &-primary {
         background: var(--color-$(type)-primary);

package/dist/css/styles/fill/fill_active.css

@@ -1,6 +1,6 @@
 .fill {
   &_active {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active  {
           &-$(color) {
@@ -9,7 +9,7 @@
         }
       }
     }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         &-primary {
           &-active {

package/dist/css/styles/fill/fill_active_hover.css

@@ -1,7 +1,7 @@
 .fill {
   &_active {
     &_hover {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
         &_$(type) {
           @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
             &-$(color) {
@@ -12,7 +12,7 @@
           }
         }
       }
-      @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
         &_$(type) {
           &-primary {
             background: var(--color-$(type)-primary);

package/dist/css/styles/fill/fill_disabled.css

@@ -1,6 +1,6 @@
 .fill {
   &_disabled {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
           &-$(color) {
@@ -11,7 +11,7 @@
         }
       }
     }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         &-primary {
           background: var(--color-$(type)-primary);

package/dist/css/styles/fill/fill_hover.css

@@ -1,6 +1,6 @@
 .fill {
   &_hover {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
           &-$(color) {
@@ -16,7 +16,7 @@
         }
       }
     }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         &-primary {
           &:hover {

package/dist/stories/NotFound.stories.js

@@ -1,6 +1,5 @@
 import { buttonConfig } from '@itcase/ui/components/Button'
-import { Empty } from '@itcase/ui/components/Empty'
-import { Image } from '@itcase/ui/components/Image'
+import { Response } from '@itcase/ui/components/Response'
 import {
   fillHoverProps,
   fillProps,
@@ -17,7 +16,7 @@ buttonConfig.setAppearance(buttonAppearance)
 
 export default {
   title: 'Components / NotFound',
-  component: Empty,
+  component: Response,
   argTypes: {
     advancedProps: { control: 'boolean' },
     buttonAfter: {
@@ -80,7 +79,7 @@ export default {
 
 export const Default = {
   args: {
-    before: <Image alt="search_sign" src="assets/img/search.svg" />,
+    imageSrc: 'assets/img/search.svg',
     message: 'Nothing found',
     messageTextColor: 'surfaceTextPrimary',
     messageTextSize: 'l',

package/package.json

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

package/dist/components/Empty.js

@@ -1,229 +0,0 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var size = require('../constants/componentProps/size.js');
-var fill = require('../constants/componentProps/fill.js');
-var shape = require('../constants/componentProps/shape.js');
-var width = require('../constants/componentProps/width.js');
-var textColor = require('../constants/componentProps/textColor.js');
-var index$1 = require('./Button.js');
-var index = require('./Text.js');
-require('clsx');
-require('./Icon.js');
-require('react-inlinesvg');
-require('./Link.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
-require('../hooks/useStyles.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('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
-require('../constants/componentProps/borderColor.js');
-require('../constants/componentProps/borderType.js');
-require('../constants/componentProps/iconSize.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('./Loader.js');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-
-function Empty(props) {
-  const {
-    before,
-    message,
-    messageTextColor,
-    messageTextSize,
-    buttonAfter,
-    buttonAppearance,
-    buttonBefore,
-    buttonFill,
-    buttonFillHover,
-    buttonLabel,
-    buttonLabelTextColor,
-    buttonLabelTextSize,
-    buttonShape,
-    buttonSize,
-    buttonWidth
-  } = props;
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: "empty"
-  }, before, message && /*#__PURE__*/React__default.default.createElement(index.Text, {
-    className: "empty__message",
-    size: messageTextSize,
-    textColor: messageTextColor
-  }, message), buttonLabel && /*#__PURE__*/React__default.default.createElement(index$1.Button, {
-    after: buttonAfter,
-    appearance: buttonAppearance,
-    before: buttonBefore,
-    className: "empty__button",
-    fill: buttonFill,
-    fillHover: buttonFillHover,
-    label: buttonLabel,
-    labelTextColor: buttonLabelTextColor,
-    labelTextSize: buttonLabelTextSize,
-    shape: buttonShape,
-    size: buttonSize,
-    width: buttonWidth
-  }));
-}
-Empty.propTypes = {
-  before: PropTypes__default.default.any,
-  buttonAfter: PropTypes__default.default.any,
-  buttonBefore: PropTypes__default.default.any,
-  buttonFill: PropTypes__default.default.oneOf(fill.default),
-  buttonFillHover: PropTypes__default.default.oneOf(fill.default),
-  buttonLabel: PropTypes__default.default.string,
-  buttonLabelTextColor: PropTypes__default.default.oneOf(textColor.default),
-  buttonLabelTextSize: PropTypes__default.default.oneOf(size.default),
-  buttonShape: PropTypes__default.default.oneOf(shape.default),
-  buttonSize: PropTypes__default.default.oneOf(size.default),
-  buttonWidth: PropTypes__default.default.oneOf(width.default),
-  message: PropTypes__default.default.string,
-  messageTextColor: PropTypes__default.default.oneOf(textColor.default),
-  messageTextSize: PropTypes__default.default.oneOf(size.default)
-};
-Empty.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Empty",
-  "props": {
-    "before": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "buttonAfter": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "buttonBefore": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "buttonFill": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "buttonFillHover": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "buttonLabel": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "buttonLabelTextColor": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "textColorProps"
-      },
-      "required": false
-    },
-    "buttonLabelTextSize": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "sizeProps"
-      },
-      "required": false
-    },
-    "buttonShape": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "buttonSize": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "sizeProps"
-      },
-      "required": false
-    },
-    "buttonWidth": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "widthProps"
-      },
-      "required": false
-    },
-    "message": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "messageTextColor": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "textColorProps"
-      },
-      "required": false
-    },
-    "messageTextSize": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "sizeProps"
-      },
-      "required": false
-    }
-  }
-};
-
-exports.Empty = Empty;

package/dist/css/components/Empty/Empty.css

@@ -1,21 +0,0 @@
-.empty {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-  gap: 32px;
-  align-self: center;
-  margin-top: 200px;
-  &__message {
-    text-align: center;
-  }
-  &__button {
-    margin-top: auto;
-  }
-  & .image,
-  .image__wrapper,
-  .image__item {
-    pointer-events: none;
-    user-select: none;
-  }
-}

package/dist/stories/Empty.stories.js

@@ -1,115 +0,0 @@
-import { buttonConfig } from '@itcase/ui/components/Button'
-import { Empty } from '@itcase/ui/components/Empty'
-import { Image } from '@itcase/ui/components/Image'
-import {
-  fillHoverProps,
-  fillProps,
-  shapeProps,
-  sizeProps,
-  textColorProps,
-  textSizeProps,
-  widthProps,
-} from '@itcase/ui/constants'
-
-import buttonAppearance from 'src/components/Button/appearance.json'
-
-buttonConfig.setAppearance(buttonAppearance)
-
-export default {
-  title: 'Atoms / Empty',
-  component: Empty,
-  argTypes: {
-    advancedProps: { control: 'boolean' },
-    buttonAfter: {
-      if: { arg: 'advancedProps' },
-    },
-    buttonBefore: {
-      if: { arg: 'advancedProps' },
-    },
-    buttonFill: {
-      options: fillProps,
-      control: 'select',
-    },
-    buttonFillHover: {
-      options: fillHoverProps,
-      control: 'select',
-    },
-    buttonLabelTextColor: {
-      options: textColorProps,
-      control: 'select',
-    },
-    buttonLabelTextSize: {
-      options: textSizeProps,
-      control: 'inline-radio',
-    },
-    buttonShape: {
-      options: shapeProps,
-      control: 'inline-radio',
-    },
-    buttonSize: {
-      options: sizeProps,
-      control: 'inline-radio',
-    },
-    buttonWidth: {
-      options: widthProps,
-      control: 'inline-radio',
-    },
-    messageTextColor: {
-      options: textColorProps,
-      control: 'select',
-    },
-    messageTextSize: {
-      options: textSizeProps,
-      control: 'inline-radio',
-    },
-    buttonAppearance: {
-      options: [
-        null,
-        'accent',
-        'primary',
-        'secondary',
-        'surfacePrimary',
-        'surfaceSecondary',
-        'surfaceTertiary',
-        'surfaceDisabled',
-      ],
-      control: 'inline-radio',
-    },
-  },
-}
-
-export const Default = {
-  args: {
-    // before: <Image alt="search_sign" src="assets/img/search.svg" />,
-    message: 'message',
-    messageTextColor: 'surfaceTextPrimary',
-    messageTextSize: 'l',
-    buttonLabel: 'Label',
-    buttonLabelTextSize: 'm',
-    buttonShape: 'rounded',
-    buttonSize: 'xxl',
-    buttonWidth: 'fixed',
-    buttonAppearance: 'surfaceDisabled',
-  },
-}
-
-export const Accent = {
-  args: {
-    ...Default.args,
-    buttonAppearance: 'accent',
-  },
-}
-
-export const Primary = {
-  args: {
-    ...Default.args,
-    buttonAppearance: 'primary',
-  },
-}
-
-export const Secondary = {
-  args: {
-    ...Default.args,
-    buttonAppearance: 'secondary',
-  },
-}