@megafon/ui-core 5.16.0 → 5.18.0

package/dist/es/components/ListData/ListDataGroup.js

@@ -0,0 +1,195 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.find-index.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.values.js";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React from 'react';
+import { closestCenter, DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import ListDataSortable, { ActivatorNodes, GapSizes } from "./components/ListDataSortable";
+import { restrictToElement, restrictToVerticalAxis } from "./helpers";
+import { ListDataPropType } from "./ListData";
+import "./ListDataGroup.css";
+var SCREEN_READER_INSTRUCTION = "\u0427\u0442\u043E\u0431\u044B \u0432\u044B\u0431\u0440\u0430\u0442\u044C \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442, \u043D\u0430\u0436\u043C\u0438\u0442\u0435 \u043F\u0440\u043E\u0431\u0435\u043B.\n    \u041F\u0440\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0438 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043A\u043B\u0430\u0432\u0438\u0448\u0438 \u0441\u043E \u0441\u0442\u0440\u0435\u043B\u043A\u0430\u043C\u0438 \u0434\u043B\u044F \u043F\u0435\u0440\u0435\u043C\u0435\u0449\u0435\u043D\u0438\u044F \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430.\n    \u0421\u043D\u043E\u0432\u0430 \u043D\u0430\u0436\u043C\u0438\u0442\u0435 \u043F\u0440\u043E\u0431\u0435\u043B, \u0447\u0442\u043E\u0431\u044B \u043F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u0432 \u0435\u0433\u043E \u043D\u043E\u0432\u043E\u0435 \u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0438\u043B\u0438 \u043D\u0430\u0436\u043C\u0438\u0442\u0435 escape \u0434\u043B\u044F \u043E\u0442\u043C\u0435\u043D\u044B.";
+var cn = cnCreate('mfui-list-data-group');
+
+var ListDataGroup = function ListDataGroup(_ref) {
+  var items = _ref.items,
+      _ref$activatorNode = _ref.activatorNode,
+      activatorNode = _ref$activatorNode === void 0 ? ActivatorNodes.CONTROL : _ref$activatorNode,
+      _ref$gap = _ref.gap,
+      gap = _ref$gap === void 0 ? GapSizes.NONE : _ref$gap,
+      _ref$showDivider = _ref.showDivider,
+      showDivider = _ref$showDivider === void 0 ? false : _ref$showDivider,
+      onDragStart = _ref.onDragStart,
+      onDragEnd = _ref.onDragEnd,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      dragOverlayProps = _ref.dragOverlayProps,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+
+  var _React$useState = React.useState(items),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      itemsList = _React$useState2[0],
+      setItemsList = _React$useState2[1];
+
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      activeId = _React$useState4[0],
+      setActiveId = _React$useState4[1];
+
+  var _React$useState5 = React.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      dragEndEvent = _React$useState6[0],
+      setDragEndEvent = _React$useState6[1];
+
+  var boundaryRef = React.useRef(null);
+  var sensors = useSensors(useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }), useSensor(TouchSensor, {
+    activationConstraint: {
+      delay: 250,
+      tolerance: 5
+    }
+  }), useSensor(MouseSensor));
+  var handleDragStart = React.useCallback(function (event) {
+    var active = event.active;
+    setActiveId(active.id);
+    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
+  }, [setActiveId, onDragStart]);
+  var handleDragCancel = React.useCallback(function () {
+    setActiveId(null);
+  }, [setActiveId]);
+  var handleDragEnd = React.useCallback(function (event) {
+    var active = event.active,
+        over = event.over;
+
+    if ((over === null || over === void 0 ? void 0 : over.id) && active.id !== over.id) {
+      setItemsList(function (prevItemsList) {
+        var oldIndex = prevItemsList.findIndex(function (item) {
+          return item.id === active.id;
+        });
+        var newIndex = prevItemsList.findIndex(function (item) {
+          return item.id === over.id;
+        });
+        return arrayMove(prevItemsList, oldIndex, newIndex);
+      });
+    }
+
+    setActiveId(null);
+    setDragEndEvent(event);
+  }, []);
+  React.useEffect(function () {
+    if (dragEndEvent) {
+      onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(itemsList, dragEndEvent);
+      setDragEndEvent(null);
+    }
+  }, [itemsList, onDragEnd, dragEndEvent]);
+
+  var renderSortableItem = function renderSortableItem(_a, index, isDragOverlay) {
+    var id = _a.id,
+        item = __rest(_a, ["id"]);
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: id,
+      className: cn('item', {
+        divider: showDivider
+      })
+    }, /*#__PURE__*/React.createElement(ListDataSortable, {
+      id: id,
+      item: item,
+      activatorNode: activatorNode,
+      gap: gap,
+      disabled: disabled || (item === null || item === void 0 ? void 0 : item.disabled),
+      isDragOverlay: isDragOverlay,
+      classes: {
+        root: classes.cell,
+        control: classes.control
+      },
+      dataAttrs: {
+        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.cell, index + 1)),
+        control: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control, index + 1))
+      }
+    }));
+  };
+
+  var renderDragOverlay = function renderDragOverlay() {
+    var activeIndex = itemsList.findIndex(function (item) {
+      return item.id === activeId;
+    });
+    var activeItem = itemsList[activeIndex];
+
+    if (activeItem) {
+      return renderSortableItem(activeItem, activeIndex, true);
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/React.createElement(DndContext, {
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    onDragCancel: handleDragCancel,
+    modifiers: [restrictToElement(boundaryRef), restrictToVerticalAxis],
+    accessibility: {
+      screenReaderInstructions: {
+        draggable: SCREEN_READER_INSTRUCTION
+      }
+    }
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: itemsList,
+    strategy: verticalListSortingStrategy
+  }, /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className, classes.root]),
+    ref: boundaryRef
+  }), itemsList.map(function (item, index) {
+    return renderSortableItem(item, index);
+  }))), /*#__PURE__*/React.createElement(DragOverlay, dragOverlayProps, activeId ? renderDragOverlay() : null));
+};
+
+ListDataGroup.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape(_extends({
+    id: PropTypes.string.isRequired
+  }, ListDataPropType)).isRequired).isRequired,
+  activatorNode: PropTypes.oneOf(Object.values(ActivatorNodes)),
+  gap: PropTypes.oneOf(Object.values(GapSizes)),
+  showDivider: PropTypes.bool,
+  onDragStart: PropTypes.func,
+  onDragEnd: PropTypes.func,
+  disabled: PropTypes.bool,
+  dragOverlayProps: PropTypes.shape({
+    className: PropTypes.string,
+    zIndex: PropTypes.number
+  }),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    cell: PropTypes.string,
+    control: PropTypes.string
+  }),
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
+export default ListDataGroup;

package/dist/es/components/ListData/components/ListDataSortable.css

@@ -0,0 +1,79 @@
+.mfui-list-data-sortable {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mfui-list-data-sortable__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  border-radius: 12px;
+}
+.mfui-list-data-sortable__item {
+  padding-right: 0;
+}
+.mfui-list-data-sortable__control {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin: 12px 16px 12px 8px;
+}
+.mfui-list-data-sortable__icon {
+  width: 32px;
+  height: 32px;
+  fill: var(--spbSky2);
+}
+.mfui-list-data-sortable_gap_small {
+  padding: 2px 0;
+}
+.mfui-list-data-sortable_gap_medium {
+  padding: 4px 0;
+}
+.mfui-list-data-sortable_gap_large {
+  padding: 6px 0;
+}
+.mfui-list-data-sortable_dragging {
+  opacity: 0;
+}
+.mfui-list-data-sortable_drag-overlay .mfui-list-data-sortable__wrapper {
+  background-color: var(--spbSky0);
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
+.mfui-list-data-sortable_activator_cell:not(.mfui-list-data-sortable_disabled) {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+.mfui-list-data-sortable_activator_cell:not(.mfui-list-data-sortable_disabled).mfui-list-data-sortable_drag-overlay {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+.mfui-list-data-sortable_activator_control:not(.mfui-list-data-sortable_disabled) .mfui-list-data-sortable__control {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+.mfui-list-data-sortable_activator_control:not(.mfui-list-data-sortable_disabled).mfui-list-data-sortable_drag-overlay .mfui-list-data-sortable__control {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}

package/dist/es/components/ListData/components/ListDataSortable.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { UniqueIdentifier } from '@dnd-kit/core';
+import { IListDataProps } from '../ListData';
+import './ListDataSortable.less';
+export declare const ActivatorNodes: {
+    readonly CELL: "cell";
+    readonly CONTROL: "control";
+};
+export declare type ActivatorNodesType = typeof ActivatorNodes[keyof typeof ActivatorNodes];
+export declare const GapSizes: {
+    readonly NONE: "none";
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+export declare type GapSizesType = typeof GapSizes[keyof typeof GapSizes];
+export interface IListDataSortableProps {
+    id: UniqueIdentifier;
+    item: IListDataProps;
+    activatorNode: ActivatorNodesType;
+    disabled?: boolean;
+    isDragOverlay?: boolean;
+    gap?: GapSizesType;
+    classes?: {
+        root?: string;
+        control?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        control?: Record<string, string>;
+    };
+}
+declare const ListDataSortable: React.FC<IListDataSortableProps>;
+export default ListDataSortable;

package/dist/es/components/ListData/components/ListDataSortable.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.date.to-string.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.object.values.js";
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cnCreate } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import ListData, { ListDataPropType } from "../ListData";
+import "./ListDataSortable.css";
+
+var DragIcon = function DragIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 14H8v-2h16v2zm0 6H8v-2h16v2z"
+  }));
+};
+
+export var ActivatorNodes = {
+  CELL: 'cell',
+  CONTROL: 'control'
+};
+export var GapSizes = {
+  NONE: 'none',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+var cn = cnCreate('mfui-list-data-sortable');
+
+var ListDataSortable = function ListDataSortable(_ref) {
+  var id = _ref.id,
+      item = _ref.item,
+      activatorNode = _ref.activatorNode,
+      gap = _ref.gap,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      isDragOverlay = _ref.isDragOverlay,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+
+  var _useSortable = useSortable({
+    id: id,
+    disabled: disabled
+  }),
+      attributes = _useSortable.attributes,
+      listeners = _useSortable.listeners,
+      setNodeRef = _useSortable.setNodeRef,
+      setActivatorNodeRef = _useSortable.setActivatorNodeRef,
+      transform = _useSortable.transform,
+      transition = _useSortable.transition,
+      isDragging = _useSortable.isDragging;
+
+  var isCellActivator = activatorNode === ActivatorNodes.CELL;
+  var isControlActivator = activatorNode === ActivatorNodes.CONTROL;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      gap: gap,
+      disabled: disabled,
+      activator: activatorNode,
+      dragging: isDragging,
+      'drag-overlay': isDragOverlay
+    }, [classes.root])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, isCellActivator ? listeners : null, isCellActivator ? attributes : null, {
+    style: {
+      transform: CSS.Transform.toString(transform),
+      transition: transition
+    },
+    ref: setNodeRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, /*#__PURE__*/React.createElement(ListData, _extends({}, item, {
+    className: cn('item', [item === null || item === void 0 ? void 0 : item.className])
+  })), /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('control', [classes.control])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control, isControlActivator ? listeners : null, isControlActivator ? attributes : null, {
+    ref: isControlActivator ? setActivatorNodeRef : undefined
+  }), /*#__PURE__*/React.createElement(DragIcon, {
+    className: cn('icon')
+  }))));
+};
+
+ListDataSortable.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  item: PropTypes.shape(ListDataPropType).isRequired,
+  activatorNode: PropTypes.oneOf(Object.values(ActivatorNodes)).isRequired,
+  disabled: PropTypes.bool,
+  isDragOverlay: PropTypes.bool,
+  gap: PropTypes.oneOf(Object.values(GapSizes)),
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    control: PropTypes.string
+  }),
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
+export default ListDataSortable;

package/dist/es/components/ListData/helpers.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ClientRect, Modifier } from '@dnd-kit/core';
+import type { Transform } from '@dnd-kit/utilities';
+export declare const restrictToBoundingRect: (transform: Transform, rect: ClientRect, boundingRect: ClientRect) => Transform;
+export declare const restrictToVerticalAxis: Modifier;
+export declare const restrictToElement: (boundaryRef: React.RefObject<HTMLDivElement>) => Modifier;

package/dist/es/components/ListData/helpers.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+export var restrictToBoundingRect = function restrictToBoundingRect(transform, rect, boundingRect) {
+  var value = _extends({}, transform);
+
+  if (rect.top + transform.y <= boundingRect.top) {
+    value.y = boundingRect.top - rect.top;
+  } else if (rect.bottom + transform.y >= boundingRect.top + boundingRect.height) {
+    value.y = boundingRect.top + boundingRect.height - rect.bottom;
+  }
+
+  if (rect.left + transform.x <= boundingRect.left) {
+    value.x = boundingRect.left - rect.left;
+  } else if (rect.right + transform.x >= boundingRect.left + boundingRect.width) {
+    value.x = boundingRect.left + boundingRect.width - rect.right;
+  }
+
+  return value;
+};
+export var restrictToVerticalAxis = function restrictToVerticalAxis(_ref) {
+  var transform = _ref.transform;
+  return _extends(_extends({}, transform), {
+    x: 0
+  });
+};
+export var restrictToElement = function restrictToElement(boundaryRef) {
+  return function (_ref2) {
+    var transform = _ref2.transform,
+        draggingNodeRect = _ref2.draggingNodeRect;
+
+    var _a;
+
+    var boundaryRect = (_a = boundaryRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+
+    if (!draggingNodeRect || !boundaryRect) {
+      return transform;
+    }
+
+    return restrictToBoundingRect(transform, draggingNodeRect, boundaryRect);
+  };
+};

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

@@ -39,6 +39,7 @@ export interface ISearchProps {
         itemTitle?: Record<string, string>;
         notice?: Record<string, string>;
         popularItem?: Record<string, string>;
+        clearButton?: Record<string, string>;
     };
     /** Значение */
     value?: string;

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

@@ -324,11 +324,11 @@ var Search = function Search(_ref) {
   };
 
   var renderClearButton = function renderClearButton() {
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.clearButton), {
       onClick: handleClearClick,
       type: "button",
       className: cn('clear')
-    }, /*#__PURE__*/React.createElement(ClearIcon, {
+    }), /*#__PURE__*/React.createElement(ClearIcon, {
       className: cn('clear-icon')
     }));
   };

package/dist/es/components/Snackbar/SnackbarTimer/SnackbarTimer.css

@@ -7,6 +7,7 @@ h5 {
 }
 .mfui-snackbar-timer {
   color: var(--base);
+  margin-right: 8px;
 }
 @-webkit-keyframes snackbar-progress-bar {
   0% {
@@ -35,7 +36,6 @@ h5 {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin-right: 8px;
   width: 24px;
   height: 24px;
 }

package/dist/es/index.d.ts

@@ -23,6 +23,9 @@ export { default as GridColumn } from './components/Grid/GridColumn';
 export { default as Header } from './components/Header/Header';
 export { default as Link } from './components/Link/Link';
 export { default as List } from './components/List/List';
+export { default as ListData } from './components/ListData/ListData';
+export { default as ListDataGroup } from './components/ListData/ListDataGroup';
+export { default as ListDataSortable } from './components/ListData/components/ListDataSortable';
 export { default as ListItem } from './components/List/ListItem';
 export { default as Logo } from './components/Logo/Logo';
 export { default as Month } from './components/Calendar/components/Month/Month';
@@ -48,6 +51,7 @@ export { default as SliderDisplayValue } from './components/Sliders/components/S
 export { default as SliderRange } from './components/Sliders/SliderRange/SliderRange';
 export { default as SliderRatio } from './components/Sliders/SliderRatio/SliderRatio';
 export { default as SliderScale } from './components/Sliders/components/SliderScale/SliderScale';
+export { default as slidesSettings } from './components/Banner/slidesSettings';
 export { default as Snackbar } from './components/Snackbar/Snackbar';
 export { default as SnackbarTimer } from './components/Snackbar/SnackbarTimer/SnackbarTimer';
 export { default as Switcher } from './components/Switcher/Switcher';

package/dist/es/index.js

@@ -23,6 +23,9 @@ export { default as GridColumn } from "./components/Grid/GridColumn";
 export { default as Header } from "./components/Header/Header";
 export { default as Link } from "./components/Link/Link";
 export { default as List } from "./components/List/List";
+export { default as ListData } from "./components/ListData/ListData";
+export { default as ListDataGroup } from "./components/ListData/ListDataGroup";
+export { default as ListDataSortable } from "./components/ListData/components/ListDataSortable";
 export { default as ListItem } from "./components/List/ListItem";
 export { default as Logo } from "./components/Logo/Logo";
 export { default as Month } from "./components/Calendar/components/Month/Month";
@@ -48,6 +51,7 @@ export { default as SliderDisplayValue } from "./components/Sliders/components/S
 export { default as SliderRange } from "./components/Sliders/SliderRange/SliderRange";
 export { default as SliderRatio } from "./components/Sliders/SliderRatio/SliderRatio";
 export { default as SliderScale } from "./components/Sliders/components/SliderScale/SliderScale";
+export { default as slidesSettings } from "./components/Banner/slidesSettings";
 export { default as Snackbar } from "./components/Snackbar/Snackbar";
 export { default as SnackbarTimer } from "./components/Snackbar/SnackbarTimer/SnackbarTimer";
 export { default as Switcher } from "./components/Switcher/Switcher";

package/dist/lib/components/Banner/Banner.css

@@ -6,6 +6,9 @@
   display: -ms-flexbox;
   display: flex;
 }
+.mfui-banner .mfui-banner__swiper-container {
+  position: relative;
+}
 .mfui-banner__swiper {
   overflow: hidden;
 }
@@ -24,16 +27,18 @@
     height: 400px;
   }
 }
-.mfui-banner_auto-height .mfui-banner__slide {
-  height: auto;
+.mfui-banner__slide-content {
+  margin-right: -1px;
+  border-right: 1px solid transparent;
 }
-@media screen and (min-width: 1024px) {
-  .mfui-banner .swiper-slide-visible {
-    opacity: 1;
-    -webkit-transition: opacity 0.4s;
-    transition: opacity 0.4s;
+@media screen and (max-width: 1023px) {
+  .mfui-banner__slide-content {
+    height: 100%;
   }
 }
+.mfui-banner_auto-height .mfui-banner__slide {
+  height: auto;
+}
 .mfui-banner__arrow {
   position: absolute;
   top: 50%;
@@ -107,32 +112,27 @@
   scale: 1.125;
 }
 .mfui-banner__pagination {
-  position: absolute;
-  bottom: 24px;
   left: 50%;
   z-index: 10;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  gap: 8px;
+  gap: 12px;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  padding: 6px 10px;
-  border-radius: 12px;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-}
-@media screen and (min-width: 1024px) {
-  .mfui-banner__pagination {
-    bottom: 16px;
-  }
+  margin-top: 32px;
 }
 .mfui-banner__pagination_bottom-offset {
+  position: absolute;
   bottom: 60px;
+  left: 50%;
+  z-index: 10;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-banner__pagination_bottom-offset {
@@ -154,31 +154,42 @@
     bottom: 72px;
   }
 }
-.mfui-banner__pagination_theme_light {
-  background-color: var(--stcWhite20);
+.mfui-banner_radius_rounded .mfui-banner__swiper {
+  border-radius: 24px;
 }
-.mfui-banner__pagination_theme_dark {
-  background-color: var(--stcBlack20);
+@media screen and (max-width: 767px) {
+  .mfui-banner_show-next-slide .mfui-banner__swiper {
+    margin-right: -16px;
+    margin-left: -16px;
+    padding-right: 32px;
+    padding-left: 16px;
+    border-radius: 0;
+  }
 }
-.mfui-banner_radius_rounded {
-  border-radius: 24px;
+@media screen and (max-width: 767px) {
+  .mfui-banner_show-next-slide .mfui-banner__slide-content {
+    margin-right: 0;
+    border-right: none;
+  }
 }
-.mfui-banner_radius_rounded .mfui-banner__swiper {
-  border-radius: 24px;
+@media screen and (max-width: 767px) {
+  .mfui-banner_show-next-slide.mfui-banner_radius_rounded .mfui-banner__slide-content {
+    border-radius: 24px;
+  }
 }
-.mfui-banner_background-color_green {
+.mfui-banner_background-color_green .mfui-banner__swiper {
   background-color: var(--brandGreen);
 }
-.mfui-banner_background-color_purple {
+.mfui-banner_background-color_purple .mfui-banner__swiper {
   background-color: var(--brandPurple);
 }
-.mfui-banner_background-color_gradient {
+.mfui-banner_background-color_gradient .mfui-banner__swiper {
   background: -webkit-gradient(linear, right top, left top, from(#ADA6BA), to(#F6F2F9));
   background: linear-gradient(270deg, #ADA6BA 0%, #F6F2F9 100%);
 }
-.mfui-banner_background-color_light {
+.mfui-banner_background-color_light .mfui-banner__swiper {
   background-color: #F6F2F9;
 }
-.mfui-banner_background-color_spbSky0 {
+.mfui-banner_background-color_spbSky0 .mfui-banner__swiper {
   background-color: var(--spbSky0);
 }