@itcase/ui 1.0.14 → 1.0.16

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');
@@ -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,8 +121,9 @@ 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),
+    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),
     href: link || href,
     DefaultComponent: "button",
     disabled: isDisabled,
@@ -129,24 +135,29 @@ function Button(props) {
     onMouseDown: onMouseDown
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "button__wrapper"
-  }, before, iconBefore && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+  }, loading && /*#__PURE__*/React__default.default.createElement(index$1.Loader, {
+    className: "button__loader",
+    set: loaderSet,
+    fill: loaderFill,
+    itemFill: loaderItemFill
+  }), 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, {
+  }), 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, {
+  }), (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, {
+  }, children || label), iconAfter && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon_after",
     SvgImage: iconAfter,
     size: iconAfterSize,
@@ -221,7 +232,8 @@ Button.defaultProps = {
   htmlType: 'button',
   size: 'm',
   labelSize: 'm',
-  width: 'hug'
+  width: 'hug',
+  loaderSet: 'simple'
 };
 
 exports.Button = Button;

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

@@ -12,8 +12,8 @@ var index$2 = require('./Icon.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
-var size = require('../constants/componentProps/size.js');
-var textColor = require('../constants/componentProps/textColor.js');
+var size$1 = require('../constants/componentProps/size.js');
+var textColor$1 = require('../constants/componentProps/textColor.js');
 var textWeight = require('../constants/componentProps/textWeight.js');
 require('../hooks/useDeviceTargetClass.js');
 require('../hooks/useMediaQueries.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');
@@ -10174,7 +10175,12 @@ function DatePickerInput(props) {
   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')
   }, /*#__PURE__*/React__namespace.default.createElement(Xt, Object.assign({
-    customInput: /*#__PURE__*/React__namespace.default.createElement(DatePickerСustomInput, inputProps),
+    customInput: /*#__PURE__*/React__namespace.default.createElement(DatePickerСustomInput, Object.assign({}, inputProps, {
+      size: size,
+      textSize: textSize,
+      textColor: textColor,
+      label: label
+    })),
     endDate: (datePickerProps == null ? void 0 : datePickerProps.selectsRange) && endDate,
     locale: ru,
     selected: startDate,
@@ -10193,8 +10199,8 @@ var DatePickerСustomInput = /*#__PURE__*/React.forwardRef(function (props, ref)
 });
 DatePickerСustomInput.displayName = 'DatePickerСustomInput';
 DatePickerInput.propTypes = {
-  size: PropTypes__default.default.oneOf(size.default),
-  textColor: PropTypes__default.default.oneOf(textColor.default),
+  size: PropTypes__default.default.oneOf(size$1.default),
+  textColor: PropTypes__default.default.oneOf(textColor$1.default),
   textWeight: PropTypes__default.default.oneOf(textWeight.default)
 };
 

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/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/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,

package/dist/components/Notification.js

@@ -3,31 +3,7 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
-var index = require('./Title.js');
-var index$1 = require('./Text.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../context/UIContext.js');
 var Notifications = require('../context/Notifications.js');
-require('../constants/componentProps/fill.js');
-require('../constants/componentProps/textAlign.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/titleSize.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/wrap.js');
-require('../useStyles-e4accb53.js');
-require('../hooks/styleAttributes.js');
-require('lodash/castArray');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/size.js');
 require('uuid');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -39,37 +15,20 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function NotificationItem(props) {
   var after = props.after,
     before = props.before,
-    set = props.set;
-    props.status;
-    var size = props.size,
+    set = props.set,
+    status = props.status,
+    size = props.size,
     text = props.text,
-    textColor = props.textColor,
-    textSize = props.textSize,
-    title = props.title,
-    titleColor = props.titleColor,
-    titleSize = props.titleSize,
-    type = props.type;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'status'
-  });
-  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
+    title = props.title;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('notification__item', type && "notification_set_" + type, set && "notification_set_" + set, size && "notification_set_" + size, fillClass && fillClass + "-primary", fillHoverClass)
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "notification__item-wrapper"
+    className: clsx__default.default('notification__item', status && "notification__item_status_" + status, set && "notification__item_set_" + set, size && "notification__item_set_" + size)
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "notification__item-wrapper"
+  }, title && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "notification__item-title"
+  }, title), text && /*#__PURE__*/React__default.default.createElement("div", {
     className: "notification__item-text"
-  }, /*#__PURE__*/React__default.default.createElement(index.Title, {
-    size: titleSize,
-    textColor: titleColor
-  }, title), /*#__PURE__*/React__default.default.createElement(index$1.Text, {
-    size: textSize,
-    textColor: textColor
-  }, text)), after));
+  }, text)), after);
 }
 NotificationItem.propTypes = {
   className: PropTypes__default.default.string,
@@ -77,11 +36,7 @@ NotificationItem.propTypes = {
   set: PropTypes__default.default.string,
   status: PropTypes__default.default.string,
   text: PropTypes__default.default.string,
-  textColor: PropTypes__default.default.string,
-  textSize: PropTypes__default.default.string,
   title: PropTypes__default.default.string,
-  titleColor: PropTypes__default.default.string,
-  titleSize: PropTypes__default.default.string,
   after: PropTypes__default.default.any,
   before: PropTypes__default.default.any
 };
@@ -92,10 +47,7 @@ function NotificationList(props) {
     hideNotifications = _useNotificationsAPI.hideNotifications;
   var className = props.className,
     size = props.size,
-    textColor = props.textColor,
-    textSize = props.textSize,
-    titleColor = props.titleColor,
-    titleSize = props.titleSize,
+    type = props.type,
     set = props.set;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('notification', className)
@@ -104,12 +56,9 @@ function NotificationList(props) {
   }, notifications.map(function (notification, i) {
     return /*#__PURE__*/React__default.default.createElement(NotificationItem, {
       key: i,
-      textColor: notification.textColor || textColor,
-      textSize: textSize,
-      set: set,
-      size: size,
-      titleColor: titleColor,
-      titleSize: titleSize,
+      type: notification.type || type,
+      set: notification.set || set,
+      size: notification.size || size,
       title: notification.title,
       text: notification.text,
       status: notification.status,

package/dist/components/Select.js

@@ -2986,6 +2986,14 @@ function _taggedTemplateLiteral(strings, raw) {
   }));
 }
 
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
 function rectToClientRect(rect) {
   return {
     ...rect,
@@ -2996,18 +3004,6 @@ function rectToClientRect(rect) {
   };
 }
 
-function getWindow(node) {
-  var _node$ownerDocument;
-  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
-}
-
-function getComputedStyle$1(element) {
-  return getWindow(element).getComputedStyle(element);
-}
-
-function isNode(value) {
-  return value instanceof getWindow(value).Node;
-}
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || '').toLowerCase();
@@ -3017,16 +3013,29 @@ function getNodeName(node) {
   // https://github.com/floating-ui/floating-ui/issues/2317
   return '#document';
 }
-
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
 function isHTMLElement(value) {
   return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
 }
-function isShadowRoot(node) {
+function isShadowRoot(value) {
   // Browsers without `ShadowRoot` support.
   if (typeof ShadowRoot === 'undefined') {
     return false;
   }
-  return node instanceof getWindow(node).ShadowRoot || node instanceof ShadowRoot;
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
 function isOverflowElement(element) {
   const {
@@ -3037,22 +3046,54 @@ function isOverflowElement(element) {
   } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
 }
-function isSafari() {
+function isWebKit() {
   if (typeof CSS === 'undefined' || !CSS.supports) return false;
   return CSS.supports('-webkit-backdrop-filter', 'none');
 }
 function isLastTraversableNode(node) {
   return ['html', 'body', '#document'].includes(getNodeName(node));
 }
-
-const min = Math.min;
-const max = Math.max;
-const round = Math.round;
-const floor = Math.floor;
-const createCoords = v => ({
-  x: v,
-  y: v
-});
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
+}
 
 function getCssDimensions(element) {
   const css = getComputedStyle$1(element);
@@ -3075,10 +3116,6 @@ function getCssDimensions(element) {
   };
 }
 
-function isElement(value) {
-  return value instanceof Element || value instanceof getWindow(value).Element;
-}
-
 function unwrapElement(element) {
   return !isElement(element) ? element.contextElement : element;
 }
@@ -3114,7 +3151,7 @@ function getScale(element) {
 const noOffsets = /*#__PURE__*/createCoords(0);
 function getVisualOffsets(element) {
   const win = getWindow(element);
-  if (!isSafari() || !win.visualViewport) {
+  if (!isWebKit() || !win.visualViewport) {
     return noOffsets;
   }
   return {
@@ -3163,7 +3200,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== win) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -3183,52 +3220,6 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   });
 }
 
-function getDocumentElement(node) {
-  var _ref;
-  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
-}
-
-function getParentNode(node) {
-  if (getNodeName(node) === 'html') {
-    return node;
-  }
-  const result =
-  // Step into the shadow DOM of the parent of a slotted node.
-  node.assignedSlot ||
-  // DOM Element detected.
-  node.parentNode ||
-  // ShadowRoot detected.
-  isShadowRoot(node) && node.host ||
-  // Fallback.
-  getDocumentElement(node);
-  return isShadowRoot(result) ? result.host : result;
-}
-
-function getNearestOverflowAncestor(node) {
-  const parentNode = getParentNode(node);
-  if (isLastTraversableNode(parentNode)) {
-    return node.ownerDocument ? node.ownerDocument.body : node.body;
-  }
-  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
-    return parentNode;
-  }
-  return getNearestOverflowAncestor(parentNode);
-}
-
-function getOverflowAncestors(node, list) {
-  var _node$ownerDocument;
-  if (list === void 0) {
-    list = [];
-  }
-  const scrollableAncestor = getNearestOverflowAncestor(node);
-  const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
-  const win = getWindow(scrollableAncestor);
-  if (isBody) {
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
-  }
-  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
-}
-
 // https://samthor.au/2021/observing-dom/
 function observeMove(element, onMove) {
   let io = null;

package/dist/components/Swiper.js

@@ -627,13 +627,13 @@ function Observer(_ref) {
   const init = () => {
     if (!swiper.params.observer) return;
     if (swiper.params.observeParents) {
-      const containerParents = elementParents(swiper.el);
+      const containerParents = elementParents(swiper.hostEl);
       for (let i = 0; i < containerParents.length; i += 1) {
         attach(containerParents[i]);
       }
     }
     // Observe container
-    attach(swiper.el, {
+    attach(swiper.hostEl, {
       childList: swiper.params.observeSlideChildren
     });
 
@@ -2233,11 +2233,13 @@ function loopFix(_temp) {
           swiper.slideTo(activeIndex + slidesPrepended, 0, false, true);
           if (setTranslate) {
             swiper.touches[swiper.isHorizontal() ? 'startX' : 'startY'] += diff;
+            swiper.touchEventsData.currentTranslate = swiper.translate;
           }
         }
       } else {
         if (setTranslate) {
           swiper.slideToLoop(slideRealIndex, 0, false, true);
+          swiper.touchEventsData.currentTranslate = swiper.translate;
         }
       }
     } else if (appendSlidesIndexes.length > 0 && isNext) {
@@ -2251,6 +2253,7 @@ function loopFix(_temp) {
           swiper.slideTo(activeIndex - slidesAppended, 0, false, true);
           if (setTranslate) {
             swiper.touches[swiper.isHorizontal() ? 'startX' : 'startY'] += diff;
+            swiper.touchEventsData.currentTranslate = swiper.translate;
           }
         }
       } else {
@@ -3815,7 +3818,7 @@ let Swiper$2 = class Swiper {
       return false;
     }
     el.swiper = swiper;
-    if (el.parentNode && el.parentNode.host) {
+    if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === 'SWIPER-CONTAINER') {
       swiper.isElement = true;
     }
     const getWrapperSelector = () => {
@@ -3841,7 +3844,7 @@ let Swiper$2 = class Swiper {
     Object.assign(swiper, {
       el,
       wrapperEl,
-      slidesEl: swiper.isElement ? el.parentNode.host : wrapperEl,
+      slidesEl: swiper.isElement && !el.parentNode.host.slideSlots ? el.parentNode.host : wrapperEl,
       hostEl: swiper.isElement ? el.parentNode.host : el,
       mounted: true,
       // RTL
@@ -4236,8 +4239,7 @@ function getParams(obj, splitEvents) {
   };
   const events = {};
   const passedParams = {};
-  extend(params, Swiper$2.defaults);
-  extend(params, Swiper$2.extendedDefaults);
+  extend(params, defaults);
   params._emitClasses = true;
   params.init = false;
   const rest = {};
@@ -4352,7 +4354,7 @@ const updateOnVirtualData = swiper => {
 };
 
 /**
- * Swiper React 10.0.4
+ * Swiper React 10.1.0
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -4360,7 +4362,7 @@ const updateOnVirtualData = swiper => {
  *
  * Released under the MIT License
  *
- * Released on: July 8, 2023
+ * Released on: August 1, 2023
  */
 
 

package/dist/css/components/Button/Button.css

@@ -69,9 +69,7 @@
     &_loading {
       ^^&__loader {
         display: flex;
-      }
-      ^^&__text {
-        visibility: hidden;
+        position: absolute;
       }
     }
   }

package/dist/css/components/Choice/Choice.css

@@ -14,7 +14,7 @@
       &:hover {
         background: var(--choice-item-background-hover);
       }
-      &last-child {
+      &:last-child {
         border-right: 0;
       }
       &_state_active {

package/dist/css/components/DatePicker/DatePicker.css

@@ -885,6 +885,7 @@
   }
 }
 .datepicker {
+  width: 100%;
   border-radius: var(--date-picker-day-border-radius);
   ^^^^^& .input {
     border-radius: var(--date-picker-day-border-radius);

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

@@ -4,6 +4,8 @@
   justify-content: center;
   align-items: center;
   gap: 32px;
+  align-self: center;
+  margin-top: 200px;
   &__message {
     text-align: center;
   }

package/dist/css/components/Grid/Grid.css

@@ -1,4 +1,5 @@
 .grid {
+  display: grid;
   width: 100%;
   position: relative;
   &__before {

package/dist/css/components/Loader/Loader.css

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

package/dist/css/components/Notification/Notification.css

@@ -1,18 +1,62 @@
 .notification {
-  &__item {
-    padding: 12px;
-    &-text {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-    }
-  }
 }
 .notification {
   &&_type_global {
-    position: absolute;
+    width: 100%;
+    position: fixed;
     left: 0;
     top: 0;
+    padding: 0;
+    background: none;
+    z-index: 1000;
+    ^&__wrapper {
+      width: 100%;
+      align-items: flex-end;
+      display: flex;
+    }
+  }
+}
+.notification__item {
+  &_set {
+    &_float {
+      width: 320px;
+      margin: 16px 24px;
+    }
+  }
+}
+.notification__item {
+  &_status {
+    &_success {
+      ^^&-wrapper {
+        border-radius: 8px;
+        @mixin elevation-8;
+        padding: 12px 16px;
+        background: var(--color-success-primary);
+        ^^^&-title {
+          color: var(--color-success-text-secondary);
+          @mixin h5;
+        }
+        ^^^&-text {
+          color: var(--color-success-text-secondary);
+          @mixin text-s;
+        }
+      }
+    }
+    &_error {
+      ^^&-wrapper {
+        border-radius: 8px;
+        @mixin elevation-8;
+        padding: 12px 16px;
+        background: var(--color-error-primary);
+        ^^^&-title {
+          color: var(--color-error-text-secondary);
+          @mixin h5;
+        }
+        ^^^&-text {
+          color: var(--color-error-text-secondary);
+          @mixin text-s;
+        }
+      }
+    }
   }
 }

package/dist/css/components/Search/Search.css

@@ -35,6 +35,7 @@
     grid-column: 1/3;
     grid-row-start: 1;
     z-index: 2;
+    padding: 1.25px 0 !important;
     &:focus {
       outline: 0;
     }
@@ -65,7 +66,7 @@
     z-index: 2;
   }
   &&_state_focus,
-  &&_state_filled, {
+  &&_state_filled {
     ^&__input {
       &-wrapper {
         left: 0;

package/dist/css/components/Search/css/search-input/search-input.css

@@ -24,6 +24,7 @@
     grid-column: 1/3;
     grid-row-start: 1;
     z-index: 2;
+    padding: 1.25px 0 !important;
     &:focus {
       outline: 0;
     }
@@ -54,7 +55,7 @@
     z-index: 2;
   }
   &&_state_focus,
-  &&_state_filled, {
+  &&_state_filled {
     ^&__input {
       &-wrapper {
         left: 0;

package/dist/css/components/Segmented/Segmented.css

@@ -24,6 +24,7 @@
         min-width: 120px;
         position: relative;
         display: flex;
+        align-items: center;
         &::after {
           width: 1px;
           height: 100%;
@@ -33,7 +34,7 @@
           top: 0;
           right: 0;
         }
-        &:nth-last-child(-n+2) {
+        &:nth-last-child(-n + 2) {
           &::after {
             display: none;
           }

package/dist/css/components/Swiper/Swiper.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 10.0.4
+ * Swiper 10.1.0
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: July 8, 2023
+ * Released on: August 1, 2023
  */
 
 /* FONT_START */
@@ -686,6 +686,8 @@ button.swiper-pagination-bullet {
   display: none;
 }
 
+/* Zoom container styles start */
+
 .swiper-zoom-container {
   width: 100%;
   height: 100%;
@@ -703,6 +705,8 @@ button.swiper-pagination-bullet {
   object-fit: contain;
 }
 
+/* Zoom container styles end */
+
 .swiper-slide-zoomed {
   cursor: move;
   touch-action: none;

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

@@ -11,6 +11,18 @@
           }
         }
       }
+      &-item {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            background: var(--color-$(type)-item-$(color));
+            @each $alpha in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 75, 80, 85, 90, 95  {
+              &$(alpha) {
+                background: var(--color-$(type)-item-$(color)-$(alpha));
+              }
+            }
+          }
+        }
+      }
     }
   }
   @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error, info, warning {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -40,7 +40,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.1.2",
+    "@itcase/common": "^1.1.3",
     "clsx": "^2.0.0",
     "html5-boilerplate": "^8.0.0",
     "js-cookie": "^3.0.5",
@@ -56,7 +56,7 @@
     "react-responsive": "^9.0.2",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.7.4",
-    "swiper": "^10.0.4",
+    "swiper": "^10.1.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -77,7 +77,7 @@
     "babel-loader": "^9.1.3",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "8.45.0",
+    "eslint": "8.46.0",
     "eslint-config-prettier": "^8.9.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-babel": "^5.3.1",
@@ -86,7 +86,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^8.0.3",
@@ -116,7 +116,7 @@
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.0.0",
     "react-datepicker": "^4.16.0",
-    "rollup": "^3.26.3",
+    "rollup": "^3.27.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^21.0.7",
     "stylelint": "^15.10.2",