@itcase/ui 1.0.95 → 1.0.97

package/dist/components/Swiper.js

@@ -506,6 +506,7 @@ function getDevice(overrides) {
 let browser;
 function calcBrowser() {
   const window = getWindow();
+  const device = getDevice();
   let needPerspectiveFix = false;
   function isSafari() {
     const ua = window.navigator.userAgent.toLowerCase();
@@ -518,10 +519,14 @@ function calcBrowser() {
       needPerspectiveFix = major < 16 || major === 16 && minor < 2;
     }
   }
+  const isWebView = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(window.navigator.userAgent);
+  const isSafariBrowser = isSafari();
+  const need3dFix = isSafariBrowser || isWebView && device.ios;
   return {
-    isSafari: needPerspectiveFix || isSafari(),
+    isSafari: needPerspectiveFix || isSafariBrowser,
     needPerspectiveFix,
-    isWebView: /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(window.navigator.userAgent)
+    need3dFix,
+    isWebView
   };
 }
 function getBrowser() {
@@ -1827,7 +1832,7 @@ function slideTo(index, speed, runCallbacks, internal, initial) {
     wrapperEl,
     enabled
   } = swiper;
-  if (swiper.animating && params.preventInteractionOnTransition || !enabled && !internal && !initial) {
+  if (swiper.animating && params.preventInteractionOnTransition || !enabled && !internal && !initial || swiper.destroyed) {
     return false;
   }
   const skip = Math.min(swiper.params.slidesPerGroupSkip, slideIndex);
@@ -1967,6 +1972,7 @@ function slideToLoop(index, speed, runCallbacks, internal) {
     index = indexAsNumber;
   }
   const swiper = this;
+  if (swiper.destroyed) return;
   const gridEnabled = swiper.grid && swiper.params.grid && swiper.params.grid.rows > 1;
   let newIndex = index;
   if (swiper.params.loop) {
@@ -2035,7 +2041,7 @@ function slideNext(speed, runCallbacks, internal) {
     params,
     animating
   } = swiper;
-  if (!enabled) return swiper;
+  if (!enabled || swiper.destroyed) return swiper;
   let perGroup = params.slidesPerGroup;
   if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {
     perGroup = Math.max(swiper.slidesPerViewDynamic('current', true), 1);
@@ -2079,7 +2085,7 @@ function slidePrev(speed, runCallbacks, internal) {
     enabled,
     animating
   } = swiper;
-  if (!enabled) return swiper;
+  if (!enabled || swiper.destroyed) return swiper;
   const isVirtual = swiper.virtual && params.virtual.enabled;
   if (params.loop) {
     if (animating && !isVirtual && params.loopPreventsSliding) return false;
@@ -2139,6 +2145,7 @@ function slideReset(speed, runCallbacks, internal) {
     runCallbacks = true;
   }
   const swiper = this;
+  if (swiper.destroyed) return;
   return swiper.slideTo(swiper.activeIndex, speed, runCallbacks, internal);
 }
 
@@ -2154,6 +2161,7 @@ function slideToClosest(speed, runCallbacks, internal, threshold) {
     threshold = 0.5;
   }
   const swiper = this;
+  if (swiper.destroyed) return;
   let index = swiper.activeIndex;
   const skip = Math.min(swiper.params.slidesPerGroupSkip, index);
   const snapIndex = skip + Math.floor((index - skip) / swiper.params.slidesPerGroup);
@@ -2182,6 +2190,7 @@ function slideToClosest(speed, runCallbacks, internal, threshold) {
 
 function slideToClickedSlide() {
   const swiper = this;
+  if (swiper.destroyed) return;
   const {
     params,
     slidesEl
@@ -3538,6 +3547,7 @@ var defaults = {
   init: true,
   direction: 'horizontal',
   oneWayMovement: false,
+  swiperElementNodeName: 'SWIPER-CONTAINER',
   touchEventsTarget: 'wrapper',
   initialSlide: 0,
   speed: 300,
@@ -3978,11 +3988,11 @@ let Swiper$2 = class Swiper {
     let spv = 1;
     if (typeof params.slidesPerView === 'number') return params.slidesPerView;
     if (params.centeredSlides) {
-      let slideSize = slides[activeIndex] ? slides[activeIndex].swiperSlideSize : 0;
+      let slideSize = slides[activeIndex] ? Math.ceil(slides[activeIndex].swiperSlideSize) : 0;
       let breakLoop;
       for (let i = activeIndex + 1; i < slides.length; i += 1) {
         if (slides[i] && !breakLoop) {
-          slideSize += slides[i].swiperSlideSize;
+          slideSize += Math.ceil(slides[i].swiperSlideSize);
           spv += 1;
           if (slideSize > swiperSize) breakLoop = true;
         }
@@ -4119,7 +4129,7 @@ let Swiper$2 = class Swiper {
       return false;
     }
     el.swiper = swiper;
-    if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === 'SWIPER-CONTAINER') {
+    if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === swiper.params.swiperElementNodeName.toUpperCase()) {
       swiper.isElement = true;
     }
     const getWrapperSelector = () => {
@@ -4311,7 +4321,7 @@ Object.keys(prototypes).forEach(prototypeGroup => {
 Swiper$2.use([Resize, Observer]);
 
 /* underscore in name -> watch for changes */
-const paramsList = ['eventsPrefix', 'injectStyles', 'injectStylesUrls', 'modules', 'init', '_direction', 'oneWayMovement', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', 'breakpointsBase', '_spaceBetween', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopAdditionalSlides', 'loopAddBlankSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideFullyVisibleClass', 'slideNextClass', 'slidePrevClass', 'slideBlankClass', 'wrapperClass', 'lazyPreloaderClass', 'lazyPreloadPrevNext', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',
+const paramsList = ['eventsPrefix', 'injectStyles', 'injectStylesUrls', 'modules', 'init', '_direction', 'oneWayMovement', 'swiperElementNodeName', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', 'breakpointsBase', '_spaceBetween', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopAdditionalSlides', 'loopAddBlankSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideFullyVisibleClass', 'slideNextClass', 'slidePrevClass', 'slideBlankClass', 'wrapperClass', 'lazyPreloaderClass', 'lazyPreloadPrevNext', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',
 // modules
 'a11y', '_autoplay', '_controller', 'coverflowEffect', 'cubeEffect', 'fadeEffect', 'flipEffect', 'creativeEffect', 'cardsEffect', 'hashNavigation', 'history', 'keyboard', 'mousewheel', '_navigation', '_pagination', 'parallax', '_scrollbar', '_thumbs', 'virtual', 'zoom', 'control'];
 
@@ -4666,15 +4676,15 @@ const updateOnVirtualData = swiper => {
 };
 
 /**
- * Swiper React 11.0.5
+ * Swiper React 11.0.6
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
- * Copyright 2014-2023 Vladimir Kharlampidi
+ * Copyright 2014-2024 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: November 22, 2023
+ * Released on: February 5, 2024
  */
 
 
@@ -4896,7 +4906,7 @@ const Swiper$1 = /*#__PURE__*/React.forwardRef(function (_temp, externalElRef) {
       scrollbarEl: scrollbarElRef.current,
       swiper: swiperRef.current
     }, swiperParams);
-    if (onSwiper) onSwiper(swiperRef.current);
+    if (onSwiper && !swiperRef.current.destroyed) onSwiper(swiperRef.current);
     // eslint-disable-next-line
     return () => {
       if (swiperRef.current && !swiperRef.current.destroyed) {

package/dist/components/Tab.js

@@ -48,6 +48,7 @@ const tabConfig = {
 function Tab(props) {
   const {
     isActive,
+    isDisabled,
     isHover,
     appearance,
     after,
@@ -63,6 +64,7 @@ function Tab(props) {
     labelColor,
     labelTextColorHover,
     labelColorActive,
+    labelColorDisabled,
     labelTextGradient,
     labelTextSize,
     labelTextWrap,
@@ -139,7 +141,7 @@ function Tab(props) {
     styles: tab
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', fillClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, reset && 'tab-reset', set && `tab_set_${set}`, justifyContentClass, onClick && 'cursor_type_pointer'),
+    className: clsx__default.default('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', fillClass || (isDisabled ? fillDisabledClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fillDisabled}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass || (isDisabled ? null : tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase()), className, sizeClass, fillActiveClass, fillActiveHoverClass, shapeClass, typeClass, widthClass, reset && 'tab-reset', set && `tab_set_${set}`, justifyContentClass, onClick && 'cursor_type_pointer'),
     "data-tour": dataTour,
     style: tab,
     onClick: onClick,
@@ -155,7 +157,7 @@ function Tab(props) {
   }, label && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "tab__label",
     size: labelTextSize,
-    textColor: labelColor || tabConfig.appearance[appearance].labelColor,
+    textColor: isDisabled ? labelColorDisabled || tabConfig.appearance[appearance].labelColorDisabled : labelColor || tabConfig.appearance[appearance].labelColor,
     textColorActive: isActive && (labelColorActive || tabConfig.appearance[appearance].labelColorActive),
     textColorGradient: labelTextGradient,
     textColorHover: labelTextColorHover,
@@ -169,10 +171,9 @@ function Tab(props) {
     value: badgeValue
   })), /*#__PURE__*/React__default.default.createElement(index$3.Divider, {
     direction: dividerDirection,
-    fill: dividerFill || tabConfig.appearance[appearance].dividerFill,
+    fill: isDisabled ? dividerFillDisabled || tabConfig.appearance[appearance].dividerFillDisabled : dividerFill || tabConfig.appearance[appearance].dividerFill,
     fillActive: isActive && (dividerFillActive || tabConfig.appearance[appearance].dividerFillActive),
     fillActiveHover: dividerFillActiveHover,
-    fillDisabled: dividerFillDisabled,
     fillHover: isHover && (dividerFillHover || tabConfig.appearance[appearance].dividerFillHover),
     size: dividerSize,
     width: "fill"

package/dist/components/Text.js

@@ -27,9 +27,16 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const textConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    textConfig.appearance = newComponent;
+  }
+};
 function Text(props) {
   const {
     after,
+    appearance,
     before,
     children,
     className,
@@ -60,6 +67,10 @@ function Text(props) {
     prefix: 'text-color_',
     propsKey: 'textColor'
   });
+  const textAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-align_',
+    propsKey: 'textAlign'
+  });
   const textColorActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-color_active_',
     propsKey: 'textColorActive'
@@ -89,7 +100,7 @@ function Text(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'text', sizeClass, weightClass, textColorClass, textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && `text_type_${type}`, mode && `text_mode_${mode}`, widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'text', sizeClass || textConfig.appearance[appearance] && `text_size_${textConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, textAlignClass, textColorClass || textConfig.appearance[appearance] && `text-color_${textConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && `text_type_${type}`, mode && `text_mode_${mode}`, widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     htmlFor: htmlFor,
     style: textStyles,
@@ -346,3 +357,4 @@ Text.__docgenInfo = {
 };
 
 exports.Text = Text;
+exports.textConfig = textConfig;

package/dist/components/Textarea.js

@@ -23,10 +23,15 @@ const textareaConfig = {
   state: {},
   setState: newComponent => {
     textareaConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    textareaConfig.appearance = newComponent;
   }
 };
 function Textarea(props) {
   const {
+    appearance,
     id,
     className,
     placeholder,
@@ -82,7 +87,7 @@ function Textarea(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("textarea", {
-    className: clsx__default.default(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, borderColorClass || textareaConfig.state[state]?.borderColor && `border-color_${textareaConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorHoverClass, placeholderTextColorClass || textareaConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${textareaConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), sizeClass, shapeClass, textSizeClass, textColorClass || textareaConfig.state[state]?.textColor && `text-color_${textareaConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass),
+    className: clsx__default.default(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, borderColorClass || textareaConfig.state[state]?.borderColor && `border-color_${textareaConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || textareaConfig.appearance[appearance]?.borderColor && `border-color_${textareaConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorHoverClass || textareaConfig.appearance[appearance]?.borderHover && `border-color_hover_${textareaConfig.appearance[appearance].borderHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || textareaConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${textareaConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || textareaConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${textareaConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), sizeClass, shapeClass || textareaConfig.appearance[appearance]?.shape && `textarea_shape_${textareaConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || textareaConfig.appearance[appearance]?.textSize && `text_size_${textareaConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || textareaConfig.state[state]?.textColor && `text-color_${textareaConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || textareaConfig.appearance[appearance]?.textColor && `text-color_${textareaConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass),
     id: id,
     disabled: disabled,
     placeholder: placeholder,

package/dist/components/Title.js

@@ -29,6 +29,12 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const titleConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    titleConfig.appearance = newComponent;
+  }
+};
 function Title(props) {
   const {
     dataTour,
@@ -42,6 +48,7 @@ function Title(props) {
     onClick
   } = props;
   const {
+    appearance,
     mode,
     size,
     sizeMobile,
@@ -114,7 +121,7 @@ function Title(props) {
     return size;
   }, [isMobile, isTablet, isDesktop]);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'title', fillColorClass, size && `title_size_${size}`, mode && `title_mode_${mode}`, textColorClass, textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && `word-wrap_${textWrap}`),
+    className: clsx__default.default(className, 'title', fillColorClass, size && `title_size_${size}`, mode && `title_mode_${mode}`, textColorClass || titleConfig.appearance[appearance] && `text-color_${titleConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && `word-wrap_${textWrap}`),
     "data-tour": dataTour,
     onClick: onClick,
     style: titleStyles
@@ -151,7 +158,7 @@ Title.propTypes = {
   onClick: PropTypes__default.default.func
 };
 Title.defaultProps = {
-  size: 'h1'
+  size: 'h3'
 };
 Title.__docgenInfo = {
   "description": "",
@@ -160,7 +167,7 @@ Title.__docgenInfo = {
   "props": {
     "size": {
       "defaultValue": {
-        "value": "'h1'",
+        "value": "'h3'",
         "computed": false
       },
       "description": "",
@@ -390,3 +397,4 @@ Title.__docgenInfo = {
 };
 
 exports.Title = Title;
+exports.titleConfig = titleConfig;

package/dist/css/components/Cell/Cell.css

@@ -56,7 +56,6 @@
 .cell {
   &&_state {
     &_disabled {
-      border: solid 1px red;
     }
   }
 }

package/dist/css/components/Chips/Chips.css

@@ -13,31 +13,31 @@
 .chips {
   &&_size {
     &_xxs {
-      padding: 2px 6px;
+      padding: var(--chips-size-xxs-padding, 2px 6px);
       @mixin text-s;
     }
     &_xs {
-      padding: 2px 6px;
+      padding: var(--chips-size-xs-padding, 2px 6px);
       @mixin text-s;
     }
     &_s {
-      padding: 2px 6px;
+      padding: var(--chips-size-s-padding, 2px 6px);
       @mixin text-s;
     }
     &_m {
-      padding: 2px 6px;
+      padding: var(--chips-size-m-padding, 2px 6px);
       @mixin text-m;
     }
     &_l {
-      padding: 2px 6px;
+      padding: var(--chips-size-l-padding, 2px 6px);
       @mixin text-l;
     }
     &_xl {
-      padding: 2px 6px;
+      padding: var(--chips-size-xl-padding, 2px 6px);
       @mixin text-l;
     }
     &_xxl {
-      padding: 6px 12px;
+      padding: var(--chips-size-xxl-padding, 6px 12px);
       @mixin text-xxl;
     }
   }

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

@@ -12,54 +12,15 @@
   top: 6px;
   width: 9px;
 }
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
-  margin-left: -4px;
-  position: absolute;
-  width: 0;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
-  box-sizing: content-box;
-  position: absolute;
-  border: 8px solid transparent;
-  height: 0;
-  width: 1px;
-  content: "";
-  z-index: -1;
-  border-width: 8px;
-  left: -8px;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
-  border-bottom-color: #aeaeae;
-}
 .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
-  top: 0;
-  margin-top: -8px;
-}
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
-  border-top: none;
-  border-bottom-color: #f0f0f0;
-}
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
-  top: 0;
-}
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
-  top: -1px;
-  border-bottom-color: #aeaeae;
+  fill: #f0f0f0;
+  color: #f0f0f0;
+  stroke: #aeaeae;
 }
 .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
-  bottom: 0;
-  margin-bottom: -8px;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
-  border-bottom: none;
-  border-top-color: #fff;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
-  bottom: 0;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
-  bottom: -1px;
-  border-top-color: #aeaeae;
+  fill: #fff;
+  color: #fff;
+  stroke: #aeaeae;
 }
 .react-datepicker-wrapper {
   display: inline-block;
@@ -75,9 +36,7 @@
   border-radius: 0.3rem;
   display: inline-block;
   position: relative;
-}
-.react-datepicker--time-only .react-datepicker__triangle {
-  left: 35px;
+  line-height: initial;
 }
 .react-datepicker--time-only .react-datepicker__time-container {
   border-left: 0;
@@ -87,36 +46,9 @@
   border-bottom-left-radius: 0.3rem;
   border-bottom-right-radius: 0.3rem;
 }
-.react-datepicker__triangle {
-  position: absolute;
-  left: 50px;
-}
 .react-datepicker-popper {
   z-index: 1;
-}
-.react-datepicker-popper[data-placement^=bottom] {
-  padding-top: 10px;
-}
-.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
-  left: auto;
-  right: 50px;
-}
-.react-datepicker-popper[data-placement^=top] {
-  padding-bottom: 10px;
-}
-.react-datepicker-popper[data-placement^=right] {
-  padding-left: 8px;
-}
-.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
-  left: auto;
-  right: 42px;
-}
-.react-datepicker-popper[data-placement^=left] {
-  padding-right: 8px;
-}
-.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
-  left: 42px;
-  right: auto;
+  line-height: 0;
 }
 .react-datepicker__header {
   text-align: center;
@@ -442,10 +374,10 @@
   background-color: #ff6803;
   color: #fff;
 }
-.react-datepicker__day--holidays .holiday-overlay,
-.react-datepicker__month-text--holidays .holiday-overlay,
-.react-datepicker__quarter-text--holidays .holiday-overlay,
-.react-datepicker__year-text--holidays .holiday-overlay {
+.react-datepicker__day--holidays .overlay,
+.react-datepicker__month-text--holidays .overlay,
+.react-datepicker__quarter-text--holidays .overlay,
+.react-datepicker__year-text--holidays .overlay {
   position: absolute;
   bottom: 100%;
   left: 50%;
@@ -465,10 +397,10 @@
 .react-datepicker__year-text--holidays:hover {
   background-color: #cf5300;
 }
-.react-datepicker__day--holidays:hover .holiday-overlay,
-.react-datepicker__month-text--holidays:hover .holiday-overlay,
-.react-datepicker__quarter-text--holidays:hover .holiday-overlay,
-.react-datepicker__year-text--holidays:hover .holiday-overlay {
+.react-datepicker__day--holidays:hover .overlay,
+.react-datepicker__month-text--holidays:hover .overlay,
+.react-datepicker__quarter-text--holidays:hover .overlay,
+.react-datepicker__year-text--holidays:hover .overlay {
   visibility: visible;
   opacity: 1;
 }
@@ -577,6 +509,23 @@
 .react-datepicker__year-text--disabled:hover {
   background-color: transparent;
 }
+.react-datepicker__day--disabled .overlay,
+.react-datepicker__month-text--disabled .overlay,
+.react-datepicker__quarter-text--disabled .overlay,
+.react-datepicker__year-text--disabled .overlay {
+  position: absolute;
+  bottom: 70%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: #fff;
+  padding: 4px;
+  border-radius: 4px;
+  white-space: nowrap;
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s, opacity 0.3s ease-in-out;
+}
 .react-datepicker__input-container {
   position: relative;
   display: inline-block;

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

@@ -111,6 +111,14 @@
     }
   }
 }
+.grid {
+  &_scroll_horizontal {
+    min-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-accent-secondary) var(--color-surface-tertiary);
+  }
+}
 .grid {
   &_shape {
     &_rounded {

package/dist/css/components/Label/Label.css

@@ -33,7 +33,6 @@
     background-position: -200%;
   }
 }
-/* mode && `avatar_mode_${mode}`, */
 .label {
   &_shape {
     &_rounded {

package/dist/css/components/Select/Select.css

@@ -259,7 +259,6 @@
             }
           }
           &--is-disabled {
-            border: solid 1px red;
           }
         }
       }

package/dist/css/components/Select/css/__menu/select__menu.css

@@ -51,7 +51,6 @@
             }
           }
           &--is-disabled {
-            border: solid 1px red;
           }
         }
       }

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

@@ -1,13 +1,13 @@
 /**
- * Swiper 11.0.5
+ * Swiper 11.0.6
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
- * Copyright 2014-2023 Vladimir Kharlampidi
+ * Copyright 2014-2024 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: November 22, 2023
+ * Released on: February 5, 2024
  */
 
 /* FONT_START */
@@ -923,7 +923,7 @@ div.swiper-block {
   position: relative;
   &__swiper {
     & .swiper-wrapper {
-      border: solid 1px red;
+      box-sizing: border-box;
     }
   }
   &__wrapper {

package/dist/css/components/Tab/Tab.css

@@ -55,9 +55,11 @@ div.tab-reset {
 }
 .tab {
   &_size {
-    @each $size in normal, compact, xxs, xs, s, m, l, xl, xxl, {
+    @each $size in normal, compact, xxs, xs, s, m, l, xl, xxl {
       &_$(size) {
         ^^&__wrapper {
+          display: flex;
+          align-items: center;
           padding: var(--tab-size-$(size)-padding);
           gap: var(--tab-size-$(size)-gap);
         }

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

@@ -7,17 +7,17 @@
         align-items: flex-start;
       }
       &-center {
-        align-items: center;
         text-align: center;
+        align-items: center;
       }
       &-right {
-        align-items: flex-end;
         text-align: right;
+        align-items: flex-end;
       }
       &-auto {
-        align-items: center;
-        text-align: center;
         justify-content: space-between;
+        text-align: center;
+        align-items: center;
       }
     }
     &^&_left {

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

@@ -2,8 +2,7 @@
   @each $type in accent, primary, secondary, tertiary, surface, success, error {
     &_$(type) {
       &-border {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active,
-          disabled, hover, invert {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover, invert {
           &-$(color) {
             border-width: 1px;
             border-color: var(--color-$(type)-border-$(color));