@itcase/ui 1.0.79 → 1.0.81

package/dist/components/Search.js

@@ -49,20 +49,19 @@ const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Sear
     size,
     dataTour,
     iconAfter,
-    iconAfterBgFill,
+    iconAfterSrc,
     iconAfterFill,
     iconAfterSize,
     iconAfterStroke,
     iconBefore,
-    iconBeforeBgFill,
+    iconBeforeSrc,
     iconBeforeFill,
     iconBeforeSize,
     iconBeforeStroke,
     iconClear,
-    iconClearBgFill,
+    iconClearSrc,
     iconClearFill,
     iconClearSize,
-    iconClearStroke,
     placeholder,
     type,
     value,
@@ -166,9 +165,10 @@ const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Sear
     className: clsx__default.default(className, 'search-input', shapeClass, fillClass, widthClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, size && `search-input_size_${size}`, type && `search-input_type_${type}`),
     "data-tour": dataTour,
     style: searchInputStyles
-  }, before, iconBefore && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+  }, before, (iconBefore || iconBeforeSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     className: "search-input__icon search-input__icon-before",
     SvgImage: iconBefore,
+    imageSrc: iconBeforeSrc,
     size: iconBeforeSize,
     iconFill: iconBeforeFill,
     iconStroke: iconBeforeStroke
@@ -191,15 +191,17 @@ const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Sear
     textWeight: placeholderWeightClass,
     textStyle: placeholderStyleClass,
     textColor: placeholderColorClass
-  }, placeholder || 'Search')), value && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+  }, placeholder || 'Search')), (iconClear || iconClearSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     className: "search-input__clear",
     SvgImage: iconClear,
+    imageSrc: iconClearSrc,
     size: iconClearSize,
     iconFill: iconClearFill,
     onClick: onClickClearIcon
-  })), iconAfter && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+  })), (iconAfter || iconAfterSrc) && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     className: "search-input__icon search-input__icon-after",
     SvgImage: iconAfter,
+    imageSrc: iconAfterSrc,
     size: iconAfterSize,
     iconFill: iconAfterFill,
     iconStroke: iconAfterStroke
@@ -221,20 +223,16 @@ SearchInput.propTypes = {
   fillMobile: PropTypes__default.default.oneOf(fill.default),
   fillTablet: PropTypes__default.default.oneOf(fill.default),
   iconAfter: PropTypes__default.default.any,
-  iconAfterBgFill: PropTypes__default.default.any,
   iconAfterFill: PropTypes__default.default.any,
   iconAfterSize: PropTypes__default.default.any,
   iconAfterStroke: PropTypes__default.default.any,
   iconBefore: PropTypes__default.default.any,
-  iconBeforeBgFill: PropTypes__default.default.any,
   iconBeforeFill: PropTypes__default.default.any,
   iconBeforeSize: PropTypes__default.default.any,
   iconBeforeStroke: PropTypes__default.default.any,
   iconClear: PropTypes__default.default.any,
-  iconClearBgFill: PropTypes__default.default.any,
   iconClearFill: PropTypes__default.default.any,
   iconClearSize: PropTypes__default.default.any,
-  iconClearStroke: PropTypes__default.default.any,
   inputTextSize: PropTypes__default.default.string,
   placeholder: PropTypes__default.default.string,
   placeholderTextColor: PropTypes__default.default.string,
@@ -343,13 +341,6 @@ SearchInput.__docgenInfo = {
       },
       "required": false
     },
-    "iconAfterBgFill": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
     "iconAfterFill": {
       "description": "",
       "type": {
@@ -378,13 +369,6 @@ SearchInput.__docgenInfo = {
       },
       "required": false
     },
-    "iconBeforeBgFill": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
     "iconBeforeFill": {
       "description": "",
       "type": {
@@ -413,13 +397,6 @@ SearchInput.__docgenInfo = {
       },
       "required": false
     },
-    "iconClearBgFill": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
     "iconClearFill": {
       "description": "",
       "type": {
@@ -434,13 +411,6 @@ SearchInput.__docgenInfo = {
       },
       "required": false
     },
-    "iconClearStroke": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
     "placeholder": {
       "description": "",
       "type": {

package/dist/components/Segmented.js

@@ -4,6 +4,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index = require('./Text.js');
+var fill = require('../constants/componentProps/fill.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textColorActive.js');
@@ -88,12 +89,12 @@ const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) =>
     propsKey: 'fillHover'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'segmented', shapeClass, fillClass, widthClass, size && `segmented_size_${size}`, type && `segmented_type_${type}`),
+    className: clsx__default.default(className, 'segmented', shapeClass, fillClass, widthClass, size && `segmented_size_${size}`, type && `segmented_type_${type}`, borderColorClass, borderWidthClass, borderTypeClass),
     ref: controlRef
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "segmented__wrapper"
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('segmented__wrapper-inner', borderColorClass, borderWidthClass, borderTypeClass)
+    className: clsx__default.default('segmented__wrapper-inner')
   }, segments?.map((item, i) => /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('segmented__item', fillHoverClass, item.value === activeSegment.value && 'segmented__item_active'),
     key: item.value,
@@ -111,8 +112,8 @@ const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) =>
     htmlFor: item.label
   }, /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "segmented__item-label-text",
-    textColor: item.value === activeSegment.value ? labelTextActiveColor : labelTextColor,
-    size: labelTextSize
+    size: labelTextSize,
+    textColor: item.value === activeSegment.value ? labelTextActiveColor : labelTextColor
   }, item.label)))), /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('segmented__indicator', indicatorFillClass)
   }, "\xA0"))));
@@ -122,6 +123,10 @@ Segmented.propTypes = {
   activeSegment: PropTypes__default.default.object,
   className: PropTypes__default.default.string,
   fill: PropTypes__default.default.string,
+  /**
+   * цвет бэкграунда выбранного элемента
+   */
+  indicatorFill: PropTypes__default.default.oneOf(fill.default),
   name: PropTypes__default.default.string,
   segments: PropTypes__default.default.array,
   setActiveSegment: PropTypes__default.default.func,
@@ -160,6 +165,15 @@ Segmented.__docgenInfo = {
       },
       "required": false
     },
+    "indicatorFill": {
+      "description": "\u0446\u0432\u0435\u0442 \u0431\u044D\u043A\u0433\u0440\u0430\u0443\u043D\u0434\u0430 \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
     "name": {
       "description": "",
       "type": {

package/dist/components/Swiper.js

@@ -4664,7 +4664,7 @@ const updateOnVirtualData = swiper => {
 };
 
 /**
- * Swiper React 11.0.3
+ * Swiper React 11.0.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -4672,7 +4672,7 @@ const updateOnVirtualData = swiper => {
  *
  * Released under the MIT License
  *
- * Released on: October 26, 2023
+ * Released on: November 9, 2023
  */
 
 

package/dist/components/Tab.js

@@ -139,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', appearance && tabConfig.appearance[appearance] && `fill_${tabConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), appearance && tabConfig.appearance[appearance] && `fill_hover_${tabConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && `tab_set_${set}`, justifyContentClass),
+    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),
     style: tab,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
@@ -154,29 +154,29 @@ function Tab(props) {
     className: "tab__wrapper"
   }, label && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "tab__label",
-    textColorActive: isActive && labelColorActive || appearance && tabConfig.appearance[appearance].labelColorActive.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    textColorActive: isActive && (labelColorActive || tabConfig.appearance[appearance] && tabConfig.appearance[appearance].labelColorActive.replace(/([A-Z])/g, '-$1').toLowerCase()),
     textColorGradient: labelTextGradient,
     size: labelTextSize,
     textWeight: labelTextWeight,
-    textColor: labelColor || appearance && tabConfig.appearance[appearance].labelColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    textColor: labelColor || tabConfig.appearance[appearance] && tabConfig.appearance[appearance].labelColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
     textWrap: labelTextWrap,
     textColorHover: labelTextColorHover,
     textStyle: labelTextStyle
   }, dividerFillActive, " ", label), badgeValue && /*#__PURE__*/React__default.default.createElement(index$2.Badge, {
-    size: badgeSize,
     fill: badgeFill,
+    size: badgeSize,
     textColor: badgeTextColor,
     textSize: badgeTextSize,
     value: badgeValue
   })), /*#__PURE__*/React__default.default.createElement(index$3.Divider, {
-    width: "fill",
-    fill: dividerFill || appearance && tabConfig.appearance[appearance].dividerFill.replace(/([A-Z])/g, '-$1').toLowerCase(),
-    fillHover: isHover && (dividerFillHover || appearance && tabConfig.appearance[appearance].dividerFillHover.replace(/([A-Z])/g, '-$1').toLowerCase()),
-    fillActive: isActive && (dividerFillActive || appearance && tabConfig.appearance[appearance].dividerFillActive.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    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()),
     fillActiveHover: dividerFillActiveHover,
     fillDisabled: dividerFillDisabled,
+    fillHover: isHover && (dividerFillHover || tabConfig.appearance[appearance] && tabConfig.appearance[appearance].dividerFillHover.replace(/([A-Z])/g, '-$1').toLowerCase()),
     size: dividerSize,
-    direction: dividerDirection
+    width: "fill"
   })), after)));
 }
 Tab.propTypes = {

package/dist/components/Text.js

@@ -60,7 +60,7 @@ function Text(props) {
     propsKey: 'textColor'
   });
   const textColorActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'text-color-active_',
+    prefix: 'text-color_active_',
     propsKey: 'textColorActive'
   });
   const textColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {

package/dist/components/Tile.js

@@ -97,7 +97,7 @@ function Tile(props) {
   });
   const borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_hover_',
-    propsKey: 'borderHover'
+    propsKey: 'borderColorHover'
   });
   const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-width_',

package/dist/components/Title.js

@@ -57,7 +57,7 @@ function Title(props) {
     propsKey: 'textColor'
   });
   const textColorActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'text-color-active_',
+    prefix: 'text-color_active_',
     propsKey: 'textColorActive'
   });
   const textColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {

package/dist/constants/componentProps/size.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const sizeProps = [null, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+const sizeProps = [null, 'normal', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', '16', '24', '32', '40', '56', '64', '96', '144'];
 
 exports.default = sizeProps;

package/dist/constants/componentProps/strokeColor.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const strokeColorProps = [null, 'accent', 'primary', 'secondary', 'tertiary', 'surface', 'error', 'success'];
+const strokeColorProps = [null, 'surfaceItemPrimary', 'surfaceItemSecondary', 'surfaceItemTertiary', 'surfaceItemAccent', 'surfaceItemDisabled', 'accentItemPrimary', 'accentItemSecondary', 'primaryItemPrimary', 'secondaryItemPrimary', 'errorItemPrimary', 'errorItemSecondary', 'successItemPrimary', 'successItemSecondary'];
 
 exports.default = strokeColorProps;

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', 'surfaceTextSecondary', 'surfaceTextTertiary', 'surfaceTextQuaternary', 'surfaceTextHover', 'surfaceTextFocus', 'surfaceTextActive', 'surfaceTextDisabled', 'errorTextPrimary', 'errorTextSecondary', 'successTextPrimary', 'successTextSecondary'];
+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'];
 
 exports.default = textColorProps;

package/dist/constants/componentProps/textColorActive.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const textColorActiveProps = [null, 'accent', 'primary', 'secondary', 'tertiary', 'surface', 'error', 'success'];
+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'];
 
 exports.default = textColorActiveProps;

package/dist/constants/componentProps/textColorHover.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const textColorHoverProps = [null, 'accent', 'primary', 'secondary', 'tertiary', 'surface', 'error', 'success'];
+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'];
 
 exports.default = textColorHoverProps;

package/dist/css/components/Avatar/Avatar.css

@@ -37,17 +37,20 @@
 .avatar {
   &_shape {
     &_circular {
-      ^^&__image {
+      ^^&__image,
+      ^^&__wrapper {
         border-radius: 50%;
       }
     }
     &_geometric {
-      ^^&__image {
+      ^^&__image,
+      ^^&__wrapper {
         border-radius: 0;
       }
     }
     &_rounded {
-      ^^&__image {
+      ^^&__image,
+      ^^&__wrapper {
         border-radius: 10px;
       }
     }

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

@@ -20,7 +20,7 @@
 }
 .choice {
   &_size {
-    @each $size in tiny, compact, normal {
+    @each $size in xs, s, m, l, xl, xxl, tiny, compact, normal, large {
       &_$(size) {
         ^^&__item {
           &-label {
@@ -33,14 +33,13 @@
 }
 .choice__item {
   min-width: 30px;
-  border-width: 0;
   position: relative;
   display: flex;
   &:hover {
     background: var(--choice-item-background-hover);
   }
   &:not(:last-child) {
-    border-right-width: 1px;
+    border-right: 1px solid var(--choice-border-color);
   }
   &_active {
     background: var(--choice-item-background-active);
@@ -69,4 +68,5 @@
 :root {
   --choice-item-background-hover: var(--color-surface-secondary);
   --choice-item-background-active: var(--color-surface-active);
+  --choice-border-color: var(--color-surface-border-tertiary);
 }

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -1,13 +1,12 @@
 .choice__item {
   min-width: 30px;
-  border-width: 0;
   position: relative;
   display: flex;
   &:hover {
     background: var(--choice-item-background-hover);
   }
   &:not(:last-child) {
-    border-right-width: 1px;
+    border-right: 1px solid var(--choice-border-color);
   }
   &_active {
     background: var(--choice-item-background-active);

package/dist/css/components/DadataHintField/DadataHintField.css

@@ -2,6 +2,7 @@
   &__container {
     width: 100%;
     ^&__input {
+      height: auto;
       color: var(--react-dadata-color);
       padding: var(--react-dadata-padding);
       border: 1px solid var(--react-dadata-border);

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

@@ -899,6 +899,18 @@
                   border-radius: var(--date-picker-day-range-end-border-radius) !important;
                 }
               }
+              &-start.react-datepicker__day--range-end {
+                border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                &:hover {
+                  border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                }
+              }
+              &.react-datepicker__day--selecting-range-start.react-datepicker__day--selecting-range-end {
+                border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                &:hover {
+                  border-radius: var(--date-picker-day-range-start-end-border-radius) !important;
+                }
+              }
             }
             &--today {
               background: var(--date-picker-day-today-background);
@@ -1069,6 +1081,14 @@
     }
   }
   &__input {
+    &-container {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      & .input {
+        min-width: 256px;
+      }
+    }
     &-time-container {
       text-align: center;
       padding: 4px;
@@ -1089,6 +1109,12 @@
       }
     }
   }
+  &__clear-icon {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+  }
   &-wrapper {
     width: 100%;
     ^&__input-container {
@@ -1160,6 +1186,7 @@
   --date-picker-day-range-border-radius: 0;
   --date-picker-day-range-start-border-radius: 12px 0 0 12px;
   --date-picker-day-range-end-border-radius: 0 12px 12px 0;
+  --date-picker-day-range-start-end-border-radius: 12px;
   --date-picker-day-today-background: var(--color-surface-secondary);
   --date-picker-day-today-text-color: var(--color-surface-text-primary);
   --date-picker-day-weekend-background: var(--color-surface-primary);

package/dist/css/components/Dropdown/Dropdown.css

@@ -85,3 +85,12 @@
     }
   }
 }
+.dropdown {
+  &__item {
+    &_shape {
+      &_rounded {
+        border-radius: var(--dropdown-item-shape-rounded, 4px);
+      }
+    }
+  }
+}

package/dist/css/components/MenuItem/MenuItem.css

@@ -37,7 +37,7 @@
 .menu-item {
   &_shape {
     &_rounded {
-      border-radius: 12px;
+      border-radius: var(--menu-item-shape-rounded, 12px);
     }
     &_circular {
       border-radius: 50%;
@@ -54,3 +54,13 @@
     }
   }
 }
+
+:root {
+  --menu-item-size-xxs-padding: 0 4px;
+  --menu-item-size-xs-padding: 0 4px;
+  --menu-item-size-s-padding: 1px 4px;
+  --menu-item-size-m-padding: 2px 4px;
+  --menu-item-size-l-padding: 4px 6px;
+  --menu-item-size-xl-padding: 7px 8px;
+  --menu-item-size-xxl-padding: 4px 10px;
+}

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

@@ -28,19 +28,12 @@
     &_float {
       width: 100%;
       border-radius: 8px;
+      padding: 12px 16px;
+      @mixin elevation-8;
       ^^&-wrapper {
-        padding: 12px 16px;
-        border-radius: 8px;
-        position: relative;
         display: flex;
         flex-direction: column;
         gap: 4px;
-        @mixin elevation-8;
-      }
-      ^^&-close {
-        position: absolute;
-        top: 16px;
-        right: 12px;
       }
     }
   }
@@ -51,7 +44,6 @@
       width: 100%;
       ^^&-wrapper {
         padding: 12px 0;
-        position: relative;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -65,11 +57,29 @@
   &_set {
     &_form {
       width: 100%;
+      padding: 12px 16px;
+      border-radius: 8px;
       ^^&-wrapper {
         text-align: left;
-        padding: 12px 16px;
-        border-radius: 8px;
-        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+    }
+  }
+}
+.notification__item {
+  &_set {
+    &_toast {
+      width: 100%;
+      background: var(--color-surface-primary);
+      padding: 12px 16px;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      @mixin elevation-8;
+      ^^&-wrapper {
         display: flex;
         flex-direction: column;
         gap: 4px;
@@ -80,8 +90,8 @@
 .notification__item {
   &_status {
     &_success {
+      background: var(--color-success-primary);
       ^^&-wrapper {
-        background: var(--color-success-primary);
         ^^^&-title {
           color: var(--color-success-text-secondary);
         }
@@ -91,8 +101,8 @@
       }
     }
     &_error {
+      background: var(--color-error-primary);
       ^^&-wrapper {
-        background: var(--color-error-primary);
         ^^^&-title {
           color: var(--color-error-text-secondary);
         }
@@ -102,8 +112,8 @@
       }
     }
     &_warning {
+      background: var(--color-primary-primary);
       ^^&-wrapper {
-        background: var(--color-primary-primary);
         ^^^&-title {
           color: var(--color-primary-text-primary);
         }
@@ -117,13 +127,16 @@
 .notification__item {
   &_type {
     &_close-button {
-      ^^&-title {
-        margin-right: 40px;
-      }
-      ^^&-close {
-        position: absolute;
-        top: 12px;
-        right: 16px;
+      ^^&-wrapper {
+        position: relative;
+        ^^^&-title {
+          margin-right: 40px;
+        }
+        ^^^&-close {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
       }
     }
   }

package/dist/css/components/Notification/css/__item/notification__item_set_float.css

@@ -3,19 +3,12 @@
     &_float {
       width: 100%;
       border-radius: 8px;
+      padding: 12px 16px;
+      @mixin elevation-8;
       ^^&-wrapper {
-        padding: 12px 16px;
-        border-radius: 8px;
-        position: relative;
         display: flex;
         flex-direction: column;
         gap: 4px;
-        @mixin elevation-8;
-      }
-      ^^&-close {
-        position: absolute;
-        top: 16px;
-        right: 12px;
       }
     }
   }

package/dist/css/components/Notification/css/__item/notification__item_set_form.css

@@ -2,11 +2,10 @@
   &_set {
     &_form {
       width: 100%;
+      padding: 12px 16px;
+      border-radius: 8px;
       ^^&-wrapper {
         text-align: left;
-        padding: 12px 16px;
-        border-radius: 8px;
-        position: relative;
         display: flex;
         flex-direction: column;
         gap: 4px;