@itcase/ui 1.0.15 → 1.0.17

package/dist/components/Avatar.js

@@ -62,8 +62,8 @@ function Avatar(props) {
     iconFill = props.iconFill,
     iconFillHover = props.iconFillHover,
     iconFillSize = props.iconFillSize,
-    firstname = props.firstname,
-    secondname = props.secondname;
+    firstName = props.firstName,
+    secondName = props.secondName;
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -76,6 +76,11 @@ function Avatar(props) {
     prefix: 'avatar_shape_',
     propsKey: 'shape'
   });
+  var avatarChars = React.useMemo(function () {
+    var firstChar = (firstName[0] || '').toUpperCase();
+    var secondChar = (secondName[0] || '').toUpperCase();
+    return "" + firstChar + secondChar;
+  }, [firstName, secondName]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'avatar', shapeClass, size && "avatar_size_" + size, type && "avatar_type_" + type),
     onClick: onClick
@@ -85,12 +90,12 @@ function Avatar(props) {
     className: "avatar__image",
     shape: "circular",
     src: src
-  }) : /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+  }) : avatarChars ? /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "avatar__name",
     size: textSize,
     textColor: textColor,
     textWeight: textWeight
-  }, firstname[0].toUpperCase() + secondname[0].toUpperCase()), icon && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
+  }, avatarChars) : null, icon && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "avatar__icon",
     fill: iconFill,
     fillHover: iconFillHover,

package/dist/components/Button.js

@@ -10,8 +10,9 @@ var shape = require('../constants/componentProps/shape.js');
 var size = require('../constants/componentProps/size.js');
 var type = require('../constants/componentProps/type.js');
 var width = require('../constants/componentProps/width.js');
-var index$1 = require('./Icon.js');
-var index$2 = require('./Text.js');
+var index$2 = require('./Icon.js');
+var index$3 = require('./Text.js');
+var index$1 = require('./Loader.js');
 var index = require('./Link.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../useStyles-e4accb53.js');
@@ -46,7 +47,7 @@ var buttonConfig = {
     buttonConfig.appearance = newComponent;
   }
 };
-function Button(props) {
+var Button = /*#__PURE__*/React__default.default.forwardRef(function Button(props, ref) {
   var before = props.before,
     after = props.after,
     className = props.className,
@@ -59,6 +60,9 @@ function Button(props) {
     label = props.label,
     labelTextColor = props.labelTextColor,
     labelTextSize = props.labelTextSize,
+    loaderSet = props.loaderSet,
+    loaderFill = props.loaderFill,
+    loaderItemFill = props.loaderItemFill,
     link = props.link,
     href = props.href,
     target = props.target,
@@ -73,6 +77,7 @@ function Button(props) {
     iconAfterFill = props.iconAfterFill,
     iconAfterStroke = props.iconAfterStroke,
     type = props.type,
+    loading = props.loading,
     htmlType = props.htmlType,
     isDisabled = props.isDisabled,
     onClick = props.onClick,
@@ -116,11 +121,12 @@ function Button(props) {
   var _useStyles = useStyles.useStyles(props),
     buttonStyles = _useStyles.styles,
     labelStyles = _useStyles.label;
+  console.log(isDisabled);
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
-    className: clsx__default.default(className, 'button', type && "button_type_" + type, borderWidthClass, borderColorClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, elevationClass, Badge && 'button_type_badge', !label && (iconBefore || iconAfter || icon) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && "button_type_with-icon button_type_with-icon_" + size),
-    href: link || href,
+    className: clsx__default.default(className, 'button', type && "button_type_" + type, borderWidthClass, borderColorClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, elevationClass, Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconAfter || icon) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && "button_type_with-icon button_type_with-icon_" + size),
     DefaultComponent: "button",
     disabled: isDisabled,
+    href: link || href,
     rel: rel,
     style: buttonStyles,
     target: target,
@@ -128,36 +134,41 @@ function Button(props) {
     onClick: onClick,
     onMouseDown: onMouseDown
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "button__wrapper"
-  }, before, iconBefore && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    className: "button__wrapper",
+    ref: ref
+  }, loading && /*#__PURE__*/React__default.default.createElement(index$1.Loader, {
+    className: "button__loader",
+    fill: loaderFill,
+    itemFill: loaderItemFill,
+    set: loaderSet
+  }), before, iconBefore && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon_before",
-    SvgImage: iconBefore,
-    size: iconBeforeSize,
     iconFill: iconBeforeFill,
-    iconStroke: iconBeforeStroke
-  }), icon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    iconStroke: iconBeforeStroke,
+    size: iconBeforeSize,
+    SvgImage: iconBefore
+  }), icon && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon",
-    SvgImage: icon,
-    size: iconSize,
     iconFill: iconFill,
-    iconStroke: iconStroke
-  }), (children || label) && /*#__PURE__*/React__default.default.createElement(index$2.Text, {
+    iconStroke: iconStroke,
+    size: iconSize,
+    SvgImage: icon
+  }), (children || label) && /*#__PURE__*/React__default.default.createElement(index$3.Text, {
     className: "button__label",
-    textColor: labelTextColor,
     size: labelTextSize,
-    style: labelStyles
-  }, children || label), iconAfter && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    style: labelStyles,
+    textColor: labelTextColor
+  }, children || label), iconAfter && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon_after",
-    SvgImage: iconAfter,
-    size: iconAfterSize,
     iconFill: iconAfterFill,
-    iconStroke: iconAfterStroke
+    iconStroke: iconAfterStroke,
+    size: iconAfterSize,
+    SvgImage: iconAfter
   }), Badge, after));
-}
+});
 Button.propTypes = {
-  Badge: PropTypes__default.default.element,
-  LinkComponent: PropTypes__default.default.any,
   after: PropTypes__default.default.any,
+  Badge: PropTypes__default.default.element,
   before: PropTypes__default.default.any,
   border: PropTypes__default.default.string,
   borderDesktop: PropTypes__default.default.string,
@@ -192,6 +203,7 @@ Button.propTypes = {
   labelSizeMobile: PropTypes__default.default.oneOf(size.default),
   labelSizeTablet: PropTypes__default.default.oneOf(size.default),
   link: PropTypes__default.default.string,
+  LinkComponent: PropTypes__default.default.any,
   rel: PropTypes__default.default.string,
   shape: PropTypes__default.default.oneOf(shape.default),
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
@@ -221,7 +233,8 @@ Button.defaultProps = {
   htmlType: 'button',
   size: 'm',
   labelSize: 'm',
-  width: 'hug'
+  width: 'hug',
+  loaderSet: 'simple'
 };
 
 exports.Button = Button;

package/dist/components/Code.js

@@ -0,0 +1,150 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var index = require('./Text.js');
+var index$1 = require('./Input.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../useStyles-e4accb53.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+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 currentOtpIndex = 0;
+function Code(props) {
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  var className = props.className,
+    fields = props.fields,
+    before = props.before,
+    errorText = props.errorText,
+    errorTextSize = props.errorTextSize,
+    errorTextColor = props.errorTextColor,
+    errorTextWeight = props.errorTextWeight,
+    inputSize = props.inputSize,
+    inputFill = props.inputFill,
+    inputPlaceholder = props.inputPlaceholder,
+    inputPlaceholderColor = props.inputPlaceholderColor,
+    inputTextSize = props.inputTextSize,
+    inputTextColor = props.inputTextColor,
+    inputTextWeight = props.inputTextWeight,
+    inputBorderColor = props.inputBorderColor,
+    inputBorderWidth = props.inputBorderWidth,
+    inputShape = props.inputShape,
+    onBlur = props.onBlur,
+    onChange = props.onChange,
+    helpText = props.helpText,
+    helpTextSize = props.helpTextSize,
+    helpTextColor = props.helpTextColor,
+    helpTextWeight = props.helpTextWeight,
+    after = props.after;
+  var _useState = React.useState(new Array(fields).fill('')),
+    otp = _useState[0],
+    setOtp = _useState[1];
+  var _useState2 = React.useState(0),
+    activeOtpIndex = _useState2[0],
+    setActiveOtpIndex = _useState2[1];
+  var inputRef = React.useRef(null);
+  var formattedHelpText = React.useMemo(function () {
+    return helpText.replace('{fields}', fields);
+  }, []);
+  var handleChange = function handleChange(e) {
+    var value = e.target.value;
+    var newOtp = [].concat(otp);
+    newOtp[currentOtpIndex] = value.substring(value.length - 1);
+    if (!value) {
+      setActiveOtpIndex(currentOtpIndex - 1);
+    } else {
+      setActiveOtpIndex(currentOtpIndex + 1);
+    }
+    setOtp(newOtp);
+    onChange && onChange(newOtp);
+  };
+  var handleOnKeyDown = function handleOnKeyDown(e) {
+    var index = +e.target.getAttribute('index');
+    currentOtpIndex = index;
+    if (e.key === 'Backspace') {
+      setActiveOtpIndex(currentOtpIndex - 1);
+    }
+  };
+  React.useEffect(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+  }, [activeOtpIndex]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'code', widthClass)
+  }, before, errorText && /*#__PURE__*/React__default.default.createElement(index.Text, {
+    className: "code__error",
+    size: errorTextSize,
+    textColor: errorTextColor,
+    textWeight: errorTextWeight
+  }, errorText), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "code__group"
+  }, otp.map(function (value, index) {
+    return /*#__PURE__*/React__default.default.createElement(index$1.Input, {
+      className: "code__input",
+      key: index,
+      index: index,
+      size: inputSize,
+      fill: inputFill,
+      placeholder: inputPlaceholder,
+      placeholderTextColor: inputPlaceholderColor,
+      textSize: inputTextSize,
+      textColor: inputTextColor,
+      textWeight: inputTextWeight,
+      value: value,
+      borderColor: inputBorderColor,
+      borderWidth: inputBorderWidth,
+      shape: inputShape,
+      onBlur: onBlur,
+      onChange: handleChange,
+      onKeyDown: function onKeyDown(e) {
+        return handleOnKeyDown(e);
+      },
+      inputRef: index === activeOtpIndex ? inputRef : null
+    });
+  })), helpText && /*#__PURE__*/React__default.default.createElement(index.Text, {
+    className: "code__help",
+    size: helpTextSize,
+    textColor: helpTextColor,
+    textWeight: helpTextWeight
+  }, formattedHelpText), after);
+}
+Code.propTypes = {
+  value: PropTypes__default.default.number
+};
+Code.defaultProps = {
+  inputBorderColor: 'surfaceBorderQuaternary',
+  inputFill: 'surfacePrimary',
+  inputPlaceholder: '0',
+  inputPlaceholderTextColor: 'surfaceTextQuaternary',
+  inputShape: 'rounded',
+  inputTextColor: 'surfaceTextPrimary',
+  inputTextSize: 'xxl',
+  helpText: 'Введите {fields} значный код',
+  helpTextSize: 's',
+  helpTextColor: 'surfaceTextTertiary',
+  helpTextWeight: 400
+};
+
+exports.Code = Code;

package/dist/components/CookiesWarning.js

@@ -33,6 +33,7 @@ require('../constants/componentProps/strokeColor.js');
 require('./Link.js');
 require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/underline.js');
+require('./Loader.js');
 require('../constants/componentProps/direction.js');
 require('../constants/componentProps/stacking.js');
 require('../constants/componentProps/wrap.js');

package/dist/components/DatePicker.js

@@ -31,6 +31,7 @@ require('../constants/componentProps/horizontalResizeMode.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/width.js');
+require('./Loader.js');
 require('./Link.js');
 require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/underline.js');
@@ -10117,6 +10118,7 @@ function DatePickerInput(props) {
   };
   var renderDayContents = function renderDayContents(day, date) {
     return /*#__PURE__*/React__namespace.default.createElement(index$1.Button, {
+      className: "react-datepicker__day-button",
       size: datePickerProps.daySize,
       label: date.getDate(),
       labelTextColor: datePickerProps.dayTextColor,
@@ -10170,9 +10172,8 @@ function DatePickerInput(props) {
       onClick: increaseMonth
     }));
   };
-  console.log('datePickerProps', datePickerProps);
   return /*#__PURE__*/React__namespace.default.createElement("div", {
-    className: clsx__default.default(className, 'datepicker', datePickerProps.monthsShown && 'datepicker_type_multiple-months', (datePickerProps == null ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button')
+    className: clsx__default.default(className, 'datepicker', (datePickerProps == null ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps == null ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button')
   }, /*#__PURE__*/React__namespace.default.createElement(Xt, Object.assign({
     customInput: /*#__PURE__*/React__namespace.default.createElement(DatePickerСustomInput, inputProps),
     endDate: (datePickerProps == null ? void 0 : datePickerProps.selectsRange) && endDate,

package/dist/components/Dropdown.js

@@ -62,12 +62,12 @@ function Dropdown(props) {
   var onAnimationEnd = React.useCallback(function (event) {
     // When component is change his visibility(display) in DOM,
     // animation of close can run unnecessary on showing element.
-    console.info('------  onAnimationEnd   -------------');
-    console.log('event: ', event);
-    console.log('event.target: ', event.target);
-    console.log('isOpen: ', isOpen);
-    console.log('animationOpen: ', animationOpen);
-    console.log('animationClose: ', animationClose);
+    // console.info('------  onAnimationEnd   -------------')
+    // console.log('event: ', event)
+    // console.log('event.target: ', event.target)
+    // console.log('isOpen: ', isOpen)
+    // console.log('animationOpen: ', animationOpen)
+    // console.log('animationClose: ', animationClose)
     // const dropdownElement = dropdownRef.current
     // console.log('dropdownElement', dropdownElement)
     // console.log('dropdownElement hasClass', dropdownElement.hasClass(animationClose))
@@ -80,7 +80,7 @@ function Dropdown(props) {
 
   // Close dropdown by click outside
   React.useEffect(function () {
-    console.info('---------   useEffect  Dropdown   -------');
+    // console.info('---------   useEffect  Dropdown   -------')
     // Add a handler to keep track of the click target.
     function onClickWindow(event) {
       var dropdownElement = dropdownRef.current;
@@ -99,7 +99,7 @@ function Dropdown(props) {
     // Add event listener for current dropdown on first render
     window.addEventListener('click', onClickWindow);
     return function () {
-      console.info('---------  UNMOUNT  useEffect  Dropdown   -------');
+      // console.info('---------  UNMOUNT  useEffect  Dropdown   -------')
       // Remove event listener for current dropdown on unmount
       window.removeEventListener('click', onClickWindow);
     };
@@ -123,10 +123,12 @@ function Dropdown(props) {
   });
   var _useStyles = useStyles.useStyles(props),
     styles = _useStyles.styles;
-  console.warn('======   Dropdown  ========');
-  console.log('props: ', props);
-  console.log('isOpen: ', isOpen);
-  console.log('animationState: ', animationState);
+
+  // console.warn('======   Dropdown  ========')
+  // console.log('props: ', props)
+  // console.log('isOpen: ', isOpen)
+  // console.log('animationState: ', animationState)
+
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'dropdown', set && "dropdown_set_" + set, shapeClass, fillClass, fillHoverClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
     ref: dropdownRef,

package/dist/components/Empty.js

@@ -32,6 +32,7 @@ require('../constants/componentProps/textWeight.js');
 require('../constants/componentProps/underline.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
+require('./Loader.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 

package/dist/components/FormField.js

@@ -16,6 +16,8 @@ require('lodash/camelCase');
 require('../context/UIContext.js');
 var index$4 = require('./Switch.js');
 var index$5 = require('./Select.js');
+require('react-select');
+require('./Group.js');
 require('../constants/componentProps/fill.js');
 require('../constants/componentProps/width.js');
 require('lodash/maxBy');
@@ -36,9 +38,10 @@ require('./Link.js');
 require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/underline.js');
-require('react-select');
 require('../defineProperty-f9e5e1f3.js');
 require('react-dom');
+require('../constants/componentProps/stacking.js');
+require('../constants/componentProps/wrap.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/Group.js

@@ -65,6 +65,10 @@ function Group(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_shape_',
     propsKey: 'shape'
@@ -101,7 +105,7 @@ function Group(props) {
     groupStyles = _useStyles.styles,
     groupWrapperStyles = _useStyles.wrapper;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
+    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
     id: id,
     style: Object.assign({}, groupStyles, style)
   }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Image.js

@@ -65,8 +65,12 @@ function Image(props) {
     prefix: 'height_',
     propsKey: 'imageHeight'
   });
-  var borderColorImageClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
+    propsKey: 'border'
+  });
+  var borderColorImageClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color-image_',
     propsKey: 'borderColorImage'
   });
   var _useStyles = useStyles.useStyles(props),
@@ -85,7 +89,7 @@ function Image(props) {
     alt: alt,
     title: title,
     style: imageStyles,
-    className: clsx__default.default('image__item', widthClass, heightClass, imgClassName, borderColorImageClass),
+    className: clsx__default.default('image__item', widthClass, heightClass, imgClassName, borderClass, borderColorImageClass),
     onError: onError
   }), overlay, caption, children), after);
 }
@@ -93,6 +97,7 @@ Image.propTypes = {
   after: PropTypes__default.default.any,
   alt: PropTypes__default.default.string,
   before: PropTypes__default.default.any,
+  border: PropTypes__default.default.string,
   borderColorImage: PropTypes__default.default.oneOf(borderColor.default),
   borderColorImageDesktop: PropTypes__default.default.oneOf(borderColor.default),
   borderColorImageMobile: PropTypes__default.default.oneOf(borderColor.default),

package/dist/components/Input.js

@@ -26,11 +26,13 @@ function Input(props) {
   var _inputConfig$state$st, _inputConfig$state$st2, _inputConfig$state$st3;
   var state = props.state,
     id = props.id,
+    index = props.index,
     type = props.type,
     className = props.className,
     placeholder = props.placeholder,
     disabled = props.disabled,
     value = props.value,
+    inputRef = props.inputRef,
     onBlur = props.onBlur,
     onChange = props.onChange,
     onFocus = props.onFocus,
@@ -83,6 +85,8 @@ function Input(props) {
     className: clsx__default.default(className, 'input', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, borderWidthClass, borderColorClass, sizeClass, ((_inputConfig$state$st = inputConfig.state[state]) == null ? void 0 : _inputConfig$state$st.fillClass) && ("fill_" + inputConfig.state[state].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), ((_inputConfig$state$st2 = inputConfig.state[state]) == null ? void 0 : _inputConfig$state$st2.borderColor) && ("border-color_" + inputConfig.state[state].borderColor).replace(/([A-Z])/g, '-$1').toLowerCase(), ((_inputConfig$state$st3 = inputConfig.state[state]) == null ? void 0 : _inputConfig$state$st3.shape) && "shape_" + inputConfig.state[state].shape),
     type: type,
     id: id,
+    index: index,
+    ref: inputRef,
     disabled: disabled,
     placeholder: placeholder,
     value: value,

package/dist/components/Loader.js

@@ -34,20 +34,24 @@ function Loader(props) {
     text = props.text,
     textSize = props.textSize,
     textColor = props.textColor;
+  var itemFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'itemFill'
+  });
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('loader', className, set && "loader_set_" + set)
+    className: clsx__default.default('loader', fillClass, className, set && "loader_set_" + set)
   }, children || /*#__PURE__*/React__default.default.createElement("div", {
     className: "loader__inner"
   }, /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default('loader__item', fillClass)
+    className: clsx__default.default('loader__item', itemFillClass)
   }), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default('loader__item', fillClass)
+    className: clsx__default.default('loader__item', itemFillClass)
   }), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default('loader__item', fillClass)
+    className: clsx__default.default('loader__item', itemFillClass)
   })), text && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "loader__text",
     size: textSize,