@megafon/ui-core 4.11.4 → 4.13.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.13.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.12.0...@megafon/ui-core@4.13.0) (2023-02-22)
+
+
+### Features
+
+* **carousel:** add property for gradient ([9900586](https://github.com/MegafonWebLab/megafon-ui/commit/99005866bc54d60f3447742f129f036391fb3a68))
+
+
+
+
+
+# [4.12.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.11.4...@megafon/ui-core@4.12.0) (2023-02-13)
+
+
+### Features
+
+* **tabs:** add rel prop ([7a4a2de](https://github.com/MegafonWebLab/megafon-ui/commit/7a4a2ded26083cc466de10c362700a6c98a38dfd))
+
+
+
+
+
 ## [4.11.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.11.3...@megafon/ui-core@4.11.4) (2023-02-06)
 
 **Note:** Version bump only for package @megafon/ui-core

package/dist/es/components/Carousel/Carousel.css

@@ -44,6 +44,49 @@
     padding-left: 16px;
   }
 }
+.mfui-carousel__swiper_gradient:before,
+.mfui-carousel__swiper_gradient:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  z-index: 5;
+  width: var(--gap);
+  height: 85%;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-carousel__swiper_gradient:before,
+  .mfui-carousel__swiper_gradient:after {
+    display: none;
+  }
+}
+.mfui-carousel__swiper_gradient:before {
+  left: 0;
+  background: -webkit-gradient(linear, right top, left top, from(transparent), to(var(--gradientColor)));
+  background: linear-gradient(270deg, transparent 0%, var(--gradientColor) 100%);
+}
+.mfui-carousel__swiper_gradient:after {
+  right: 0;
+  background: -webkit-gradient(linear, right top, left top, from(var(--gradientColor)), to(transparent));
+  background: linear-gradient(270deg, var(--gradientColor) 0%, transparent 100%);
+}
+.mfui-carousel__swiper_gradient-color_default {
+  --gradientColor: var(--base);
+}
+.mfui-carousel__swiper_gradient-color_green {
+  --gradientColor: var(--brandGreen);
+}
+.mfui-carousel__swiper_gradient-color_black {
+  --gradientColor: var(--stcBlack);
+}
+.mfui-carousel__swiper_gradient-color_spbSky0 {
+  --gradientColor: var(--spbSky0);
+}
+.mfui-carousel__swiper_gradient-color_spbSky1 {
+  --gradientColor: var(--spbSky1);
+}
+.mfui-carousel__swiper_gradient-color_spbSky2 {
+  --gradientColor: var(--spbSky2);
+}
 .mfui-carousel .swiper-wrapper {
   z-index: 1;
   display: -webkit-box;
@@ -105,6 +148,7 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
@@ -136,9 +180,10 @@
           box-sizing: border-box;
   width: 8px;
   height: 8px;
-  padding: 1px;
   border-radius: 50%;
   cursor: pointer;
+  -webkit-transition: width 0.5s, background-color 0.3s;
+  transition: width 0.5s, background-color 0.3s;
 }
 .mfui-carousel .swiper-pagination-bullet:before {
   content: '';
@@ -146,9 +191,8 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
-}
-.mfui-carousel .swiper-pagination-bullet:not(:last-child) {
-  margin-right: 8px;
+  -webkit-transition: border-radius 0.5s;
+  transition: border-radius 0.5s;
 }
 .mfui-carousel_nav-theme_green .swiper-pagination-bullet:before {
   background-color: var(--stcWhite50);
@@ -157,20 +201,15 @@
   background-color: var(--spbSky2);
 }
 .mfui-carousel .swiper-pagination-bullet-active {
-  padding: 0;
+  width: 20px;
   cursor: default;
 }
-.mfui-carousel_nav-theme_green .swiper-pagination-bullet-active {
-  padding: 0;
-  cursor: default;
+.mfui-carousel .swiper-pagination-bullet-active:before {
+  border-radius: 4px;
 }
 .mfui-carousel_nav-theme_green .swiper-pagination-bullet-active:before {
   background-color: var(--base);
 }
-.mfui-carousel_nav-theme_light .swiper-pagination-bullet-active {
-  padding: 0;
-  cursor: default;
-}
 .mfui-carousel_nav-theme_light .swiper-pagination-bullet-active:before {
-  background-color: var(--brandPurple);
+  background-color: var(--brandGreen);
 }

package/dist/es/components/Carousel/Carousel.d.ts

@@ -1,6 +1,7 @@
-import * as React from 'react';
+import React from 'react';
 import SwiperCore from 'swiper';
 import { PaginationOptions } from 'swiper/types/components/pagination';
+import { GradientTheme } from './useGradient';
 import './Carousel.less';
 export declare const NavTheme: {
     readonly LIGHT: "light";
@@ -82,6 +83,10 @@ export interface ICarouselProps {
     onPrevClick?: (index: number) => void;
     /** Обработчик смены слайда (должен быть обернут в useCallback) */
     onChange?: (currentIndex: number, previousIndex: number, slidesPerView?: number | 'auto') => void;
+    /** Наличие градиента по краям контейнера */
+    gradient?: boolean;
+    /** Цвет градиента */
+    gradientColor?: GradientTheme;
 }
 declare const Carousel: React.FC<ICarouselProps>;
 export default Carousel;

package/dist/es/components/Carousel/Carousel.js

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _defaultSlidesSetting;
 
-import * as React from 'react';
+import React from 'react';
 import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import * as PropTypes from 'prop-types';
@@ -19,6 +19,7 @@ import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import throttleTime from "../../constants/throttleTime";
 import usePrevious from "../../hooks/usePrevious";
 import checkBreakpointsPropTypes from "./checkBreakpointsPropTypes";
+import useGradient, { GradientTheme } from "./useGradient";
 import "./Carousel.css";
 SwiperCore.use([Autoplay, Pagination, EffectFade]);
 export var NavTheme = {
@@ -96,7 +97,11 @@ var Carousel = function Carousel(_ref) {
       onPrevClick = _ref.onPrevClick,
       onChange = _ref.onChange,
       _ref$slideToClickedSl = _ref.slideToClickedSlide,
-      slideToClickedSlide = _ref$slideToClickedSl === void 0 ? false : _ref$slideToClickedSl;
+      slideToClickedSlide = _ref$slideToClickedSl === void 0 ? false : _ref$slideToClickedSl,
+      _ref$gradient = _ref.gradient,
+      gradient = _ref$gradient === void 0 ? false : _ref$gradient,
+      _ref$gradientColor = _ref.gradientColor,
+      gradientColor = _ref$gradientColor === void 0 ? GradientTheme.DEFAULT : _ref$gradientColor;
 
   var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -121,6 +126,11 @@ var Carousel = function Carousel(_ref) {
   var childrenLen = Array.isArray(children) ? children.length : 0;
   var prevChildrenLen = usePrevious(childrenLen) || 0;
   var isChildrenLenDiff = childrenLen !== prevChildrenLen;
+  var gradientStyles = useGradient(gradient, {
+    instance: swiperInstance,
+    slidesSettings: slidesSettings,
+    isLocked: isLocked
+  });
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
         autoplay = _ref2.autoplay;
@@ -245,7 +255,7 @@ var Carousel = function Carousel(_ref) {
     return function () {
       window.removeEventListener('resize', windowResizeHandlerThrottled);
     };
-  }, [swiperInstance]);
+  }, [slidesSettings, swiperInstance]);
   React.useEffect(function () {
     if (swiperInstance && isChildrenLenDiff) {
       handleNavDisplay(swiperInstance);
@@ -256,12 +266,15 @@ var Carousel = function Carousel(_ref) {
     className: cn({
       'nav-theme': navTheme
     }, [className, rootClass]),
-    onClick: handleRootClick
+    onClick: handleRootClick,
+    style: gradientStyles
   }), /*#__PURE__*/React.createElement(Swiper, _extends({}, containerModifier ? {
     containerModifierClass: containerModifier
   } : {}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
     className: cn('swiper', {
-      'default-inner-indents': !innerIndentsClass
+      'default-inner-indents': !innerIndentsClass,
+      gradient: gradient,
+      'gradient-color': gradient && gradientColor
     }, [innerIndentsClass, containerClass]),
     breakpoints: slidesSettings,
     watchSlidesVisibility: true,
@@ -371,6 +384,8 @@ Carousel.propTypes = {
   getSwiper: PropTypes.func,
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  gradient: PropTypes.oneOfType([PropTypes.bool]),
+  gradientColor: PropTypes.oneOf(Object.values(GradientTheme))
 };
 export default Carousel;

package/dist/es/components/Carousel/useGradient.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import SwiperCore from 'swiper';
+import { SlidesSettingsType } from './Carousel';
+declare type SwiperConfig = {
+    instance: SwiperCore | undefined;
+    slidesSettings: SlidesSettingsType;
+    isLocked: boolean;
+};
+export declare enum GradientTheme {
+    DEFAULT = "default",
+    GREEN = "green",
+    BLACK = "black",
+    SPB_SKY_0 = "spbSky0",
+    SPB_SKY_1 = "spbSky1",
+    SPB_SKY_2 = "spbSky2"
+}
+declare const _default: (gradient: boolean, swiper: SwiperConfig) => CSSProperties;
+export default _default;

package/dist/es/components/Carousel/useGradient.js

@@ -0,0 +1,52 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState, useEffect } from 'react';
+import { breakpoints } from '@megafon/ui-helpers';
+import throttle from 'lodash.throttle';
+import throttleTime from "../../constants/throttleTime";
+export var GradientTheme;
+
+(function (GradientTheme) {
+  GradientTheme["DEFAULT"] = "default";
+  GradientTheme["GREEN"] = "green";
+  GradientTheme["BLACK"] = "black";
+  GradientTheme["SPB_SKY_0"] = "spbSky0";
+  GradientTheme["SPB_SKY_1"] = "spbSky1";
+  GradientTheme["SPB_SKY_2"] = "spbSky2";
+})(GradientTheme || (GradientTheme = {}));
+
+export default (function (gradient, swiper) {
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      slidesGap = _useState2[0],
+      setSlidesGap = _useState2[1];
+
+  var swiperInstance = swiper.instance,
+      slidesSettings = swiper.slidesSettings,
+      isLocked = swiper.isLocked;
+  var isGradientEnable = gradient && !isLocked;
+  useEffect(function () {
+    var isTouch = window.innerWidth < breakpoints.DESKTOP_SMALL_START;
+    var isPossibleToSetGap = isGradientEnable && swiperInstance && !isTouch;
+
+    if (!isPossibleToSetGap) {
+      return undefined;
+    }
+
+    var setCurrenSlidesGap = function setCurrenSlidesGap() {
+      var currentBreakpoint = swiperInstance.getBreakpoint(slidesSettings);
+      var currentSpaceBetweenValue = slidesSettings[currentBreakpoint].spaceBetween;
+      setSlidesGap(currentSpaceBetweenValue);
+    };
+
+    setCurrenSlidesGap();
+    var throttledHandler = throttle(setCurrenSlidesGap, throttleTime.resize);
+    window.addEventListener('resize', throttledHandler);
+    return function () {
+      window.removeEventListener('resize', throttledHandler);
+    };
+  }, [gradient, slidesSettings, swiperInstance, isLocked, isGradientEnable]);
+  var gradientStyles = {
+    '--gap': "".concat(slidesGap, "px")
+  };
+  return isGradientEnable ? gradientStyles : {};
+});

package/dist/es/components/NavArrow/NavArrow.css

@@ -9,6 +9,8 @@
   border-radius: 50%;
   outline: none;
   cursor: pointer;
+  -webkit-transition: background-color 0.3s, opacity 0.3s;
+  transition: background-color 0.3s, opacity 0.3s;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -17,6 +19,7 @@
 .mfui-nav-arrow:disabled {
   cursor: default;
   opacity: 0.3;
+  pointer-events: none;
 }
 .mfui-nav-arrow__icon {
   display: block;
@@ -27,12 +30,18 @@
 .mfui-nav-arrow_theme_purple {
   background-color: var(--brandPurple);
 }
-.mfui-nav-arrow_theme_purple:hover:not(:disabled) {
+.mfui-nav-arrow_theme_purple:hover {
   background-color: var(--buttonHoverPurple);
 }
+.mfui-nav-arrow_theme_purple:active {
+  background-color: var(--buttonDown);
+}
 .mfui-nav-arrow_theme_dark {
   background-color: var(--stcBlack20);
 }
-.mfui-nav-arrow_theme_dark:hover:not(:disabled) {
+.mfui-nav-arrow_theme_dark:hover {
   background-color: var(--stcBlack50);
 }
+.mfui-nav-arrow_theme_dark:active {
+  background-color: var(--buttonDown);
+}

package/dist/es/components/Search/Search.d.ts

@@ -22,9 +22,12 @@ export interface ISearchProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        control?: Record<string, string>;
         searchField?: Record<string, string>;
         submit?: Record<string, string>;
         item?: Record<string, string>;
+        itemTitle?: Record<string, string>;
+        notice?: Record<string, string>;
     };
     /** Значение */
     value?: string;

package/dist/es/components/Search/Search.js

@@ -185,12 +185,12 @@ var Search = function Search(_ref) {
       open: isFocused,
       disabled: disabled
     }, [className])
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
     className: cn('control', {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
     }, [classes === null || classes === void 0 ? void 0 : classes.control])
-  }, /*#__PURE__*/React.createElement("label", {
+  }), /*#__PURE__*/React.createElement("label", {
     className: cn('search-wrapper', {
       labeled: !!label,
       'no-label': !label
@@ -238,23 +238,26 @@ var Search = function Search(_ref) {
       onMouseDown: handleSelectSubmit(i),
       onMouseEnter: handleHoverItem(i),
       key: i
-    }), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle, i + 1), {
       className: cn('item-title', [classes === null || classes === void 0 ? void 0 : classes.listItemTitle])
-    }, searchView || highlightString(itemValue)));
-  })))), noticeText && /*#__PURE__*/React.createElement("div", {
+    }), searchView || highlightString(itemValue)));
+  })))), noticeText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice), {
     className: cn('notice', {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
     })
-  }, noticeText));
+  }), noticeText));
 };
 
 Search.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
+    control: PropTypes.objectOf(PropTypes.string.isRequired),
     searchField: PropTypes.objectOf(PropTypes.string.isRequired),
     submit: PropTypes.objectOf(PropTypes.string.isRequired),
-    item: PropTypes.objectOf(PropTypes.string.isRequired)
+    item: PropTypes.objectOf(PropTypes.string.isRequired),
+    itemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
+    notice: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   value: PropTypes.string,
   label: PropTypes.string,

package/dist/es/components/Select/Select.d.ts

@@ -75,9 +75,13 @@ export interface ISelectProps<T extends SelectItemValueType> {
     dataAttrs?: {
         root?: Record<string, string>;
         label?: Record<string, string>;
+        control?: Record<string, string>;
         title?: Record<string, string>;
+        titleInner?: Record<string, string>;
         input?: Record<string, string>;
         noticeText?: Record<string, string>;
+        list?: Record<string, string>;
+        listInner?: Record<string, string>;
         listItem?: Record<string, string>;
         listItemTitle?: Record<string, string>;
         notFound?: Record<string, string>;
@@ -120,15 +124,27 @@ declare const Select: {
             label: PropTypes.Requireable<{
                 [x: string]: string;
             }>;
+            control: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
             title: PropTypes.Requireable<{
                 [x: string]: string;
             }>;
+            titleInner: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
             input: PropTypes.Requireable<{
                 [x: string]: string;
             }>;
             noticeText: PropTypes.Requireable<{
                 [x: string]: string;
             }>;
+            list: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            listInner: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
             listItem: PropTypes.Requireable<{
                 [x: string]: string;
             }>;

package/dist/es/components/Select/Select.js

@@ -200,6 +200,7 @@ var Select = function Select(_ref) {
       comparableInputValue: title,
       items: items
     });
+    e.persist();
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, item);
     onClosed === null || onClosed === void 0 ? void 0 : onClosed();
   };
@@ -355,11 +356,11 @@ var Select = function Select(_ref) {
       role: "button",
       tabIndex: 0,
       onClick: handleSelectClick
-    }), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleInner), {
       className: cn('title-inner', {
         'hide-value': !item
       }, [classes === null || classes === void 0 ? void 0 : classes.titleInner])
-    }, /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: cn('title-value')
     }, inputTitle), label && renderLabel()));
   };
@@ -379,14 +380,14 @@ var Select = function Select(_ref) {
 
   var renderChildren = function renderChildren() {
     var currentItems = type === SelectTypes.COMBOBOX ? itemsList : items;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
       className: cn('list', [classes.list])
-    }, /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listInner), {
       className: cn('list-inner', {
         "short": shortList
       }, [classes.listInner]),
       ref: itemWrapperNode
-    }, currentItems.map(function (_ref3, i) {
+    }), currentItems.map(function (_ref3, i) {
       var title = _ref3.title,
           value = _ref3.value,
           view = _ref3.view,
@@ -423,12 +424,12 @@ var Select = function Select(_ref) {
     ref: selectNode
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
     className: cn('control', {
       labeled: !!label
     }, classes.control),
     onKeyDown: handleKeyDown
-  }, type === SelectTypes.COMBOBOX && renderCombobox(), type === SelectTypes.CLASSIC && renderTitle()), renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.noticeText), {
+  }), type === SelectTypes.COMBOBOX && renderCombobox(), type === SelectTypes.CLASSIC && renderTitle()), renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.noticeText), {
     className: cn('text', {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
@@ -461,9 +462,13 @@ Select.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     label: PropTypes.objectOf(PropTypes.string.isRequired),
+    control: PropTypes.objectOf(PropTypes.string.isRequired),
     title: PropTypes.objectOf(PropTypes.string.isRequired),
+    titleInner: PropTypes.objectOf(PropTypes.string.isRequired),
     input: PropTypes.objectOf(PropTypes.string.isRequired),
     noticeText: PropTypes.objectOf(PropTypes.string.isRequired),
+    list: PropTypes.objectOf(PropTypes.string.isRequired),
+    listInner: PropTypes.objectOf(PropTypes.string.isRequired),
     listItem: PropTypes.objectOf(PropTypes.string.isRequired),
     listItemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
     notFound: PropTypes.objectOf(PropTypes.string.isRequired)

package/dist/es/components/Switcher/Switcher.d.ts

@@ -6,6 +6,7 @@ export interface ISwitcherProps {
     dataAttrs?: {
         root?: Record<string, string>;
         input?: Record<string, string>;
+        loader?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;
@@ -13,7 +14,7 @@ export interface ISwitcherProps {
     checked?: boolean;
     /** Отключение переключателя */
     disabled?: boolean;
-    /** Cостояние загрузки */
+    /** Состояние загрузки */
     showLoader?: boolean;
     /** Размер текста лейбла */
     textSize?: 'small' | 'medium';

package/dist/es/components/Switcher/Switcher.js

@@ -50,9 +50,9 @@ var Switcher = function Switcher(_ref) {
     onClick: handleChange,
     onKeyDown: handleChange,
     tabIndex: isInteractiveDisabled ? undefined : 0
-  }), showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
+  }), showLoader && !disabled && /*#__PURE__*/React.createElement("div", _extends({
     className: cn('loader')
-  }), /*#__PURE__*/React.createElement("div", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader))), /*#__PURE__*/React.createElement("div", {
     className: cn('pointer')
   })), isRightContent && /*#__PURE__*/React.createElement("div", {
     className: cn('content', {
@@ -64,7 +64,8 @@ var Switcher = function Switcher(_ref) {
 Switcher.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
-    input: PropTypes.objectOf(PropTypes.string.isRequired)
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    loader: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
   textSize: PropTypes.oneOf(['small', 'medium']),

package/dist/es/components/Tabs/Tab.d.ts

@@ -6,6 +6,8 @@ export interface ITabProps {
     icon?: React.ReactNode;
     /** Ссылка */
     href?: string;
+    /** Rel - атрибут тега <a> */
+    rel?: string;
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;

package/dist/es/components/Tabs/Tab.js

@@ -15,6 +15,7 @@ Tab.propTypes = {
   title: PropTypes.string,
   icon: PropTypes.node,
   href: PropTypes.string,
+  rel: PropTypes.string,
   renderTabWrapper: PropTypes.func
 };
 export default Tab;

package/dist/es/components/Tabs/Tabs.js

@@ -271,10 +271,16 @@ var Tabs = function Tabs(_ref) {
     var rootRefNode = rootRef.current;
     rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(outerObserveContainer || rootRefNode));
   }, [outerObserveContainer]);
-  var renderTab = React.useCallback(function (index, title, icon, href, attr) {
+  var renderTab = React.useCallback(function (_ref3, index) {
+    var title = _ref3.title,
+        icon = _ref3.icon,
+        href = _ref3.href,
+        rel = _ref3.rel,
+        attr = _ref3.attr;
     var ElementType = href ? 'a' : 'div';
     return /*#__PURE__*/React.createElement(ElementType, _extends({
       href: href,
+      rel: rel,
       className: cn('tab-inner', {
         current: currentIndex === index,
         'with-icon': !!icon
@@ -292,9 +298,16 @@ var Tabs = function Tabs(_ref) {
           title = _child$props.title,
           icon = _child$props.icon,
           href = _child$props.href,
+          rel = _child$props.rel,
           renderTabWrapper = _child$props.renderTabWrapper,
           data = _child$props.dataAttrs;
-      var tab = renderTab(i, title, icon, href, data === null || data === void 0 ? void 0 : data.inner);
+      var tab = renderTab({
+        title: title,
+        icon: icon,
+        href: href,
+        rel: rel,
+        attr: data === null || data === void 0 ? void 0 : data.inner
+      }, i);
       var activeTabClassName = currentIndex === i ? classes === null || classes === void 0 ? void 0 : classes.activeTab : undefined;
       return /*#__PURE__*/React.createElement(SwiperSlide, {
         className: cn('slide')

package/dist/es/components/TextField/TextField.d.ts

@@ -77,6 +77,7 @@ export declare type TextFieldProps = {
         notice?: Record<string, string>;
         input?: Record<string, string>;
         iconBox?: Record<string, string>;
+        resizer?: Record<string, string>;
     };
     /** Атрибут элемента input */
     inputMode?: 'numeric' | 'tel' | 'decimal' | 'email' | 'url' | 'search' | 'none';

package/dist/es/components/TextField/TextField.js

@@ -465,10 +465,10 @@ var TextField = function TextField(_ref) {
     className: cn('field-wrapper', {
       textarea: textarea && textareaType
     })
-  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", {
+  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", _extends({
     className: cn('resizer'),
     ref: resizerRef
-  }, /*#__PURE__*/React.createElement(ResizeIcon, null))), /*#__PURE__*/React.createElement("div", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.resizer)), /*#__PURE__*/React.createElement(ResizeIcon, null))), /*#__PURE__*/React.createElement("div", {
     className: cn('field-bottom-wrapper', {
       filled: !!currentNoticeText || !!symbolCounter
     })
@@ -527,7 +527,8 @@ TextField.propTypes = {
     label: PropTypes.objectOf(PropTypes.string.isRequired),
     notice: PropTypes.objectOf(PropTypes.string.isRequired),
     input: PropTypes.objectOf(PropTypes.string.isRequired),
-    iconBox: PropTypes.objectOf(PropTypes.string.isRequired)
+    iconBox: PropTypes.objectOf(PropTypes.string.isRequired),
+    resizer: PropTypes.objectOf(PropTypes.string.isRequired)
   })
 };
 export default TextField;

package/dist/es/index.d.ts

@@ -43,4 +43,5 @@ export { default as Tile } from './components/Tile/Tile';
 export { default as Timer } from './components/Badges/components/TimerBadge/Timer/Timer';
 export { default as TimerBadge } from './components/Badges/components/TimerBadge/TimerBadge';
 export { default as Tooltip } from './components/Tooltip/Tooltip';
+export { default as useGradient } from './components/Carousel/useGradient';
 export { default as usePagination } from './components/Pagination/usePagination';

package/dist/es/index.js

@@ -43,4 +43,5 @@ export { default as Tile } from "./components/Tile/Tile";
 export { default as Timer } from "./components/Badges/components/TimerBadge/Timer/Timer";
 export { default as TimerBadge } from "./components/Badges/components/TimerBadge/TimerBadge";
 export { default as Tooltip } from "./components/Tooltip/Tooltip";
+export { default as useGradient } from "./components/Carousel/useGradient";
 export { default as usePagination } from "./components/Pagination/usePagination";