@itcase/ui 1.0.82 → 1.0.84

package/dist/components/Swiper.js

@@ -1070,6 +1070,7 @@ function updateSlides() {
   if (params.watchSlidesProgress) {
     swiper.updateSlidesOffset();
   }
+  swiper.emit('slidesUpdated');
   if (!isVirtual && !params.cssMode && (params.effect === 'slide' || params.effect === 'fade')) {
     const backFaceHiddenClass = `${params.containerModifierClass}backface-hidden`;
     const hasClassBackfaceClassAdded = swiper.el.classList.contains(backFaceHiddenClass);
@@ -3030,16 +3031,17 @@ function onTouchEnd(event) {
   }
 
   // Find current slide
+  const swipeToLast = currentPos >= -swiper.maxTranslate() && !swiper.params.loop;
   let stopIndex = 0;
   let groupSize = swiper.slidesSizesGrid[0];
   for (let i = 0; i < slidesGrid.length; i += i < params.slidesPerGroupSkip ? 1 : params.slidesPerGroup) {
     const increment = i < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup;
     if (typeof slidesGrid[i + increment] !== 'undefined') {
-      if (currentPos >= slidesGrid[i] && currentPos < slidesGrid[i + increment]) {
+      if (swipeToLast || currentPos >= slidesGrid[i] && currentPos < slidesGrid[i + increment]) {
         stopIndex = i;
         groupSize = slidesGrid[i + increment] - slidesGrid[i];
       }
-    } else if (currentPos >= slidesGrid[i]) {
+    } else if (swipeToLast || currentPos >= slidesGrid[i]) {
       stopIndex = i;
       groupSize = slidesGrid[slidesGrid.length - 1] - slidesGrid[slidesGrid.length - 2];
     }
@@ -4664,7 +4666,7 @@ const updateOnVirtualData = swiper => {
 };
 
 /**
- * Swiper React 11.0.4
+ * Swiper React 11.0.5
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -4672,7 +4674,7 @@ const updateOnVirtualData = swiper => {
  *
  * Released under the MIT License
  *
- * Released on: November 9, 2023
+ * Released on: November 22, 2023
  */
 
 

package/dist/components/Tab.js

@@ -67,6 +67,7 @@ function Tab(props) {
     labelTextSize,
     labelTextWrap,
     labelTextStyle,
+    reset,
     labelTextWeight,
     dataTour,
     dividerFill,
@@ -138,7 +139,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].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && `tab_set_${set}`, justifyContentClass, onClick && 'cursor_type_pointer'),
+    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', fillClass || tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHoverClass}`.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'),
     "data-tour": dataTour,
     style: tab,
     onClick: onClick,
@@ -154,8 +155,8 @@ function Tab(props) {
   }, label && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "tab__label",
     size: labelTextSize,
-    textColor: labelColor || tabConfig.appearance[appearance] && tabConfig.appearance[appearance].labelColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    textColorActive: isActive && (labelColorActive || tabConfig.appearance[appearance] && tabConfig.appearance[appearance].labelColorActive.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    textColor: labelColor || tabConfig.appearance[appearance].labelColor,
+    textColorActive: isActive && (labelColorActive || tabConfig.appearance[appearance].labelColorActive),
     textColorGradient: labelTextGradient,
     textColorHover: labelTextColorHover,
     textStyle: labelTextStyle,
@@ -168,11 +169,11 @@ function Tab(props) {
     value: badgeValue
   })), /*#__PURE__*/React__default.default.createElement(index$3.Divider, {
     direction: dividerDirection,
-    fill: dividerFill || tabConfig.appearance[appearance] && tabConfig.appearance[appearance].dividerFill.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    fillActive: isActive && (dividerFillActive || tabConfig.appearance[appearance] && tabConfig.appearance[appearance].dividerFillActive.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    fill: dividerFill || tabConfig.appearance[appearance].dividerFill,
+    fillActive: isActive && (dividerFillActive || tabConfig.appearance[appearance].dividerFillActive),
     fillActiveHover: dividerFillActiveHover,
     fillDisabled: dividerFillDisabled,
-    fillHover: isHover && (dividerFillHover || tabConfig.appearance[appearance] && tabConfig.appearance[appearance].dividerFillHover.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    fillHover: isHover && (dividerFillHover || tabConfig.appearance[appearance].dividerFillHover),
     size: dividerSize,
     width: "fill"
   })), after)));
@@ -188,7 +189,7 @@ Tab.propTypes = {
   fillTablet: PropTypes__default.default.oneOf(fill.default),
   href: PropTypes__default.default.string,
   isActive: PropTypes__default.default.bool,
-  label: PropTypes__default.default.string,
+  label: PropTypes__default.default.oneOfType([PropTypes__default.default.element, PropTypes__default.default.string]),
   labelColor: PropTypes__default.default.oneOf(textColor.default),
   labelColorActive: PropTypes__default.default.oneOf(textColorActive.default),
   labelTextColorHover: PropTypes__default.default.oneOf(textColorHover.default),
@@ -343,7 +344,12 @@ Tab.__docgenInfo = {
     "label": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "union",
+        "value": [{
+          "name": "element"
+        }, {
+          "name": "string"
+        }]
       },
       "required": false
     },

package/dist/constants/componentProps/textColor.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const textColorProps = [null, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInvert'];
+const textColorProps = [null, false, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInvert'];
 
 exports.default = textColorProps;

package/dist/constants/componentProps/textColorActive.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const textColorActiveProps = [null, false, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary'];
+const textColorActiveProps = [null, false, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInvert'];
 
 exports.default = textColorActiveProps;

package/dist/constants/componentProps/textColorHover.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const textColorHoverProps = [null, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInvert'];
+const textColorHoverProps = [null, false, 'accentTextPrimary', 'accentTextSecondary', 'accentTextTertiary', 'primaryTextPrimary', 'primaryTextSecondary', 'primaryTextTertiary', 'secondaryTextPrimary', 'secondaryTextSecondary', 'secondaryTextTertiary', 'tertiaryTextPrimary', 'tertiaryTextSecondary', 'surfaceTextPrimary', 'surfaceTextAccent', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextAccent', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary', 'surfaceTextInvert'];
 
 exports.default = textColorHoverProps;

package/dist/context/Notifications.js

@@ -23,6 +23,18 @@ const NotificationsAPIContext = /*#__PURE__*/React.createContext({
 });
 function NotificationsProvider(props) {
   const [notifications, setNotifications] = React.useState([]);
+  const hideNotifications = React.useCallback(id => {
+    setNotifications(prevState => {
+      const currentNotification = prevState.find(notification => notification.id === id);
+      if (currentNotification) {
+        if (typeof currentNotification.onClose === 'function') {
+          currentNotification.onClose();
+        }
+        return prevState.filter(notification => notification.id !== id);
+      }
+      return prevState;
+    });
+  }, []);
   const showNotification = React.useCallback((notification, onClose) => {
     let id = uuid.v4().split('-')[0];
     let title = '';
@@ -37,48 +49,34 @@ function NotificationsProvider(props) {
       title = notification.title ?? title;
       text = notification.text ?? text;
       status = notification.status ?? status;
-      switch (status) {
-        case 'success':
-          textColor = 'successTextPrimary';
-          break;
-        case 'info':
-          textColor = 'infoTextPrimary';
-          break;
-        case 'error':
-          textColor = 'errorTextPrimary';
-          break;
-        case 'warning':
-          textColor = 'warningTextPrimary';
-          break;
-      }
       closeByTime = notification.closeByTime ?? closeByTime;
     }
+    switch (status) {
+      case 'success':
+        textColor = 'successTextPrimary';
+        break;
+      case 'info':
+        textColor = 'infoTextPrimary';
+        break;
+      case 'error':
+        textColor = 'errorTextPrimary';
+        break;
+      case 'warning':
+        textColor = 'warningTextPrimary';
+        break;
+    }
     setNotifications(prevState => [...prevState, {
       id: id,
       title: title,
       text: text,
       status: status,
       textColor: textColor,
-      // closeByTime: closeByTime,
       onClose: onClose
     }]);
     if (closeByTime) {
-      setTimeout(() => {
-        setNotifications(prevState => {
-          const currentNotification = prevState.find(notification => notification.id === id);
-          if (currentNotification) {
-            if (typeof currentNotification.onClose === 'function') {
-              currentNotification.onClose();
-            }
-            return prevState.filter(notification => notification.id !== id);
-          }
-          return prevState;
-        });
-      }, closeByTime);
+      setTimeout(() => hideNotifications(id), closeByTime);
     }
-  }, []);
-  const hideNotifications = React.useCallback(id => {
-    setNotifications(prevState => prevState.filter(notification => notification.id !== id));
+    return id;
   }, []);
   const notificationsAPI = React.useMemo(() => ({
     showNotification: showNotification,

package/dist/css/components/Accordion/Accordion.css

@@ -30,13 +30,15 @@
   }
 }
 .accordion-item {
+  min-width: 170px;
+  padding: 10px 12px;
   display: flex;
   flex-flow: row wrap;
+  gap: 8px;
   &__title {
     flex: 1;
   }
   &__icon {
-    margin: 0 0 0 40px;
     align-self: center;
     transform-origin: 50% 50%;
     transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);

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

@@ -350,17 +350,34 @@
 .react-datepicker__week-number.react-datepicker__week-number--clickable {
   cursor: pointer;
 }
-.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
+.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,
+.react-datepicker__week-number--keyboard-selected):hover {
   border-radius: 0.3rem;
   background-color: #f0f0f0;
 }
-.react-datepicker__day-names,
-.react-datepicker__week {
-  white-space: nowrap;
+.react-datepicker__week-number--selected {
+  border-radius: 0.3rem;
+  background-color: #216ba5;
+  color: #fff;
+}
+.react-datepicker__week-number--selected:hover {
+  background-color: #1d5d90;
+}
+.react-datepicker__week-number--keyboard-selected {
+  border-radius: 0.3rem;
+  background-color: #2a87d0;
+  color: #fff;
+}
+.react-datepicker__week-number--keyboard-selected:hover {
+  background-color: #1d5d90;
 }
 .react-datepicker__day-names {
+  white-space: nowrap;
   margin-bottom: -8px;
 }
+.react-datepicker__week {
+  white-space: nowrap;
+}
 .react-datepicker__day-name,
 .react-datepicker__day,
 .react-datepicker__time-name {
@@ -698,6 +715,13 @@
   vertical-align: middle;
   content: "×";
 }
+.react-datepicker__close-icon--disabled {
+  cursor: default;
+}
+.react-datepicker__close-icon--disabled::after {
+  cursor: default;
+  background-color: #ccc;
+}
 .react-datepicker__today-button {
   background: #f0f0f0;
   border-top: 1px solid #aeaeae;
@@ -870,7 +894,7 @@
               background: var(--date-picker-day-selected-background);
               border-radius: 0;
               &:hover {
-                background: var(--date-picker-day-selected-background) !important;
+                background: var(--date-picker-day-selected-background-hover);
                 & .button__label {
                   color: var(--date-picker-day-selected-text-color) !important;
                 }
@@ -890,6 +914,7 @@
               &-start {
                 border-radius: var(--date-picker-day-range-start-border-radius) !important;
                 &:hover {
+                  background: var(--date-picker-day-selected-background-hover);
                   border-radius: var(--date-picker-day-range-start-border-radius) !important;
                 }
               }
@@ -924,7 +949,7 @@
                 background: var(--date-picker-day-selected-background);
                 border-radius: 0;
                 &:hover {
-                  background: var(--date-picker-day-selected-background) !important;
+                  background: var(--date-picker-day-selected-background-hover);
                   & .button__label {
                     color: var(--date-picker-day-selected-text-color) !important;
                   }
@@ -967,7 +992,7 @@
             &--selected {
               background: var(--date-picker-day-selected-background);
               &:hover {
-                background: var(--date-picker-day-selected-background) !important;
+                background: var(--date-picker-day-selected-background-hover);
               }
               & .button__label {
                 color: var(--date-picker-day-selected-text-color);
@@ -999,7 +1024,7 @@
                 background: var(--date-picker-day-selected-background);
                 border-radius: 0;
                 &:hover {
-                  background: var(--date-picker-day-selected-background) !important;
+                  background: var(--date-picker-day-selected-background-hover);
                   & .button__label {
                     color: var(--date-picker-day-selected-text-color) !important;
                   }
@@ -1196,6 +1221,7 @@
   --date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);
   --date-picker-day-weekend-outside-text-color: var(--color-secondary-text-disabled);
   --date-picker-day-selected-background: var(--color-accent-primary);
+  --date-picker-day-selected-background-hover: var(--color-accent-primary-hover);
   --date-picker-day-selected-text-color: var(--color-accent-text-primary);
   --date-picker-day-outside-background: var(--color-surface-primary);
   --date-picker-day-outside-text-color: var(--color-surface-text-quaternary);

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

@@ -58,6 +58,7 @@
 .grid {
   @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
     &_columns_$(val) {
+      grid-template-columns: repeat($(val), 1fr);
       & > ^&__wrapper {
         & > div {
           grid-template-columns: repeat($(val), 1fr);
@@ -101,10 +102,11 @@
 .grid {
   @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
     &_rows_$(val) {
+      grid-template-columns: repeat($(val), 1fr);
       & > ^&__wrapper {
         & > div {
           grid-template-columns: repeat($(val), 1fr);
-          }
+        }
       }
     }
   }

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

@@ -1,8 +1,9 @@
 .label {
-  display: inline-flex;
   position: relative;
   overflow: hidden;
+  display: inline-flex;
   &__inner {
+    width: 100%;
     font-size: 0;
     line-height: 0;
   }
@@ -35,3 +36,38 @@
     }
   }
 }
+
+.label {
+  &&_text-align {
+    &_left {
+      ^^&__inner {
+        text-align: left;
+      }
+    }
+    &_center {
+      ^^&__inner {
+        text-align: center;
+      }
+    }
+    &_right {
+      ^^&__inner {
+        text-align: right;
+      }
+    }
+  }
+}
+
+.label {
+  &&_width {
+    &_fixed {
+      width: 240px;
+    }
+    &_hug {
+      display: inline-flex;
+    }
+    &_fill {
+      width: 100%;
+      max-width: none !important;
+    }
+  }
+}

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

@@ -132,6 +132,7 @@
 .select {
   &__placeholder {
     position: absolute;
+    display: flex;
   }
 }
 
@@ -188,23 +189,40 @@
   }
 }
 
+.select {
+  &__menu {
+    &-list {
+      &-item {
+        &_size {
+          @each $size in xs, s, m, l, xl, xxl {
+            &_$(size) {
+              padding: var(--select-menu-list-item-size-$(size)-padding, 5px 10px);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .select {
   &__menu {
     width: 100%;
+    background: var(--color-surface-primary);
+    padding: 12px 0;
     margin: var(--select-menu-margin, 0);
+    border-radius: var(--select-menu-border-radius, 0);
     border-top: none;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 100000;
-    border-radius: var(--select-menu-border-radius, 0);
     &-group-heading {
       z-index: 100000;
     }
     &-list {
       overflow-y: auto;
       max-height: 240px;
-      border-radius: var(--select-menu-border-radius, 0);
       &-item {
         width: 100%;
         position: relative;
@@ -216,11 +234,16 @@
         }
         &_selected {
           height: 100%;
+          position: absolute;
           display: flex;
           align-items: center;
-          position: absolute;
-          right: 8px;
           top: 0;
+          right: 8px;
+        }
+        & .divider {
+          position: absolute;
+          left: 0;
+          bottom: 0;
         }
       }
 

package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css

@@ -0,0 +1,15 @@
+.select {
+  &__menu {
+    &-list {
+      &-item {
+        &_size {
+          @each $size in xs, s, m, l, xl, xxl {
+            &_$(size) {
+              padding: var(--select-menu-list-item-size-$(size)-padding, 5px 10px);
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,20 +1,21 @@
 .select {
   &__menu {
     width: 100%;
+    background: var(--color-surface-primary);
+    padding: 12px 0;
     margin: var(--select-menu-margin, 0);
+    border-radius: var(--select-menu-border-radius, 0);
     border-top: none;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 100000;
-    border-radius: var(--select-menu-border-radius, 0);
     &-group-heading {
       z-index: 100000;
     }
     &-list {
       overflow-y: auto;
       max-height: 240px;
-      border-radius: var(--select-menu-border-radius, 0);
       &-item {
         width: 100%;
         position: relative;
@@ -26,11 +27,16 @@
         }
         &_selected {
           height: 100%;
+          position: absolute;
           display: flex;
           align-items: center;
-          position: absolute;
-          right: 8px;
           top: 0;
+          right: 8px;
+        }
+        & .divider {
+          position: absolute;
+          left: 0;
+          bottom: 0;
         }
       }
 

package/dist/css/components/Select/css/__placeholder/select__placeholder.css

@@ -1,5 +1,6 @@
 .select {
   &__placeholder {
     position: absolute;
+    display: flex;
   }
 }

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

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.0.4
+ * Swiper 11.0.5
  * 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: November 9, 2023
+ * Released on: November 22, 2023
  */
 
 /* FONT_START */

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

@@ -5,6 +5,35 @@
     align-content: center;
   }
 }
+.tab-group {
+  position: relative;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  & .tab {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-end;
+    &__wrapper {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+    }
+    &__label {
+      display: flex;
+      flex: 1;
+    }
+  }
+}
+div.tab-reset {
+  & .tab__wrapper {
+    padding: 0;
+    gap: 0;
+    margin: 0;
+  }
+}
 .tab {
   @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
     &_justify-content_$(val) {
@@ -26,7 +55,7 @@
 }
 .tab {
   &_size {
-    @each $size in normal, compact {
+    @each $size in normal, compact, xxs, xs, s, m, l, xl, xxl, {
       &_$(size) {
         ^^&__wrapper {
           padding: var(--tab-size-$(size)-padding);
@@ -36,28 +65,6 @@
     }
   }
 }
-.tab-group {
-  position: relative;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: stretch;
-  & .tab {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: flex-end;
-    &__wrapper {
-      display: flex;
-      flex: 1;
-      justify-content: center;
-      align-items: center;
-      gap: 4px;
-    }
-    &__label {
-      display: flex;
-      flex: 1;
-    }
-  }
-}
 :root {
   --tab-size-normal-padding: 10px;
   --tab-size-normal-gap: 10px;

package/dist/css/components/Textarea/Textarea.css

@@ -1,8 +1,8 @@
 .textarea {
   width: 100%;
   min-width: 100%;
-  min-height: 160px;
-  max-height: 160px;
+  min-height: var(--textarea-min-height, 160px);
+  max-height: var(--textarea-max-height, 160px);
   padding: var(--textarea-padding, 16px 16px);
   padding: 0;
   margin: 0;