@itcase/ui 1.8.142 → 1.8.144

package/dist/{DatePicker_cjs_CiH9nFzY.js → DatePicker_cjs_BOPN9WVz.js}

@@ -94,11 +94,11 @@ const datePickerConfig = {
 };
 function DatePickerInput(props) {
     const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
-    const datepickerRef = React.useRef(null);
-    const { customTimeInput, disablePastDays, monthsShown, selectsRange } = datePickerProps;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(datePickerProps.appearance, datePickerConfig);
+    const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekPicker, } = datePickerProps;
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, datePickerConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(datePickerProps, appearanceConfig);
     const { daySize, dayTextColor, dayTextShape, dayTextSize, iconFill, iconFillHover, iconFillSize, iconItemFill, iconLeft, iconRight, iconShape, monthTextColor, monthTextSize, monthTextWeight, popper, popperPlacement, sizeClass, widthClass, yearTextColor, yearTextSize, yearTextWeight, isClearable, } = propsGenerator;
+    const datepickerRef = React.useRef(null);
     const [dateStart, dateEnd] = React.useMemo(() => {
         let dateStart;
         if (value) {
@@ -126,10 +126,27 @@ function DatePickerInput(props) {
         }
         return [dateStart, dateEnd];
     }, [value, endValue]);
-    const handleChange = React.useCallback((valuesList) => {
-        const [newDateStart, newDateEnd] = valuesList;
-        onChange(newDateStart, newDateEnd);
-    }, [onChange]);
+    const handleChange = React.useCallback((selected) => {
+        const valuesList = Array.isArray(selected) ? selected : [selected];
+        const [selectedDateStart, selectedDateEnd] = valuesList;
+        if (selectedDateStart && showWeekPicker) {
+            // "getDay" return from 0(sunday) to 6 (saturday).
+            // When 0(sunday) - we set as 7(end of week from 1(monday))
+            const weekDayIndex = selectedDateStart.getDay() || 7;
+            // Collect monday of week from selected date
+            const mondayDate = new Date(selectedDateStart);
+            mondayDate.setDate(selectedDateStart.getDate() - (weekDayIndex - 1));
+            // Collect sunday of week from selected date
+            const sundayDate = new Date(mondayDate);
+            sundayDate.setDate(mondayDate.getDate() + 6);
+            // Selected date can be wednesday, but for week picker
+            // we return start and end of selected week.
+            onChange(mondayDate, sundayDate);
+        }
+        else {
+            onChange(selectedDateStart, selectedDateEnd);
+        }
+    }, [showWeekPicker, onChange]);
     const renderDayContents = React.useCallback((day, date) => {
         return (jsxRuntime.jsx(Button.Button, { className: "react-datepicker__day-button", size: daySize, label: date.getDate().toString(), labelTextColor: dayTextColor, labelTextSize: dayTextSize, shape: dayTextShape }));
     }, [daySize, dayTextColor, dayTextShape, dayTextSize]);
@@ -149,7 +166,7 @@ function DatePickerInput(props) {
         yearTextWeight,
     ]);
     const { styles: datePickerStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: selectsRange ? handleChange : onChange, ...datePickerProps, 
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...datePickerProps, 
             // Important for use custom clear button
             isClearable: false }) }));
 }

package/dist/{DatePicker_es_DngPNvEg.js → DatePicker_es_-aO8EkK8.js}

@@ -92,11 +92,11 @@ const datePickerConfig = {
 };
 function DatePickerInput(props) {
     const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
-    const datepickerRef = useRef(null);
-    const { customTimeInput, disablePastDays, monthsShown, selectsRange } = datePickerProps;
-    const appearanceConfig = useAppearanceConfig(datePickerProps.appearance, datePickerConfig);
+    const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekPicker, } = datePickerProps;
+    const appearanceConfig = useAppearanceConfig(appearance, datePickerConfig);
     const propsGenerator = useDevicePropsGenerator(datePickerProps, appearanceConfig);
     const { daySize, dayTextColor, dayTextShape, dayTextSize, iconFill, iconFillHover, iconFillSize, iconItemFill, iconLeft, iconRight, iconShape, monthTextColor, monthTextSize, monthTextWeight, popper, popperPlacement, sizeClass, widthClass, yearTextColor, yearTextSize, yearTextWeight, isClearable, } = propsGenerator;
+    const datepickerRef = useRef(null);
     const [dateStart, dateEnd] = useMemo(() => {
         let dateStart;
         if (value) {
@@ -124,10 +124,27 @@ function DatePickerInput(props) {
         }
         return [dateStart, dateEnd];
     }, [value, endValue]);
-    const handleChange = useCallback((valuesList) => {
-        const [newDateStart, newDateEnd] = valuesList;
-        onChange(newDateStart, newDateEnd);
-    }, [onChange]);
+    const handleChange = useCallback((selected) => {
+        const valuesList = Array.isArray(selected) ? selected : [selected];
+        const [selectedDateStart, selectedDateEnd] = valuesList;
+        if (selectedDateStart && showWeekPicker) {
+            // "getDay" return from 0(sunday) to 6 (saturday).
+            // When 0(sunday) - we set as 7(end of week from 1(monday))
+            const weekDayIndex = selectedDateStart.getDay() || 7;
+            // Collect monday of week from selected date
+            const mondayDate = new Date(selectedDateStart);
+            mondayDate.setDate(selectedDateStart.getDate() - (weekDayIndex - 1));
+            // Collect sunday of week from selected date
+            const sundayDate = new Date(mondayDate);
+            sundayDate.setDate(mondayDate.getDate() + 6);
+            // Selected date can be wednesday, but for week picker
+            // we return start and end of selected week.
+            onChange(mondayDate, sundayDate);
+        }
+        else {
+            onChange(selectedDateStart, selectedDateEnd);
+        }
+    }, [showWeekPicker, onChange]);
     const renderDayContents = useCallback((day, date) => {
         return (jsx(Button, { className: "react-datepicker__day-button", size: daySize, label: date.getDate().toString(), labelTextColor: dayTextColor, labelTextSize: dayTextSize, shape: dayTextShape }));
     }, [daySize, dayTextColor, dayTextShape, dayTextSize]);
@@ -147,7 +164,7 @@ function DatePickerInput(props) {
         yearTextWeight,
     ]);
     const { styles: datePickerStyles } = useStyles(props);
-    return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: selectsRange ? handleChange : onChange, ...datePickerProps, 
+    return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), style: datePickerStyles, children: jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, ...datePickerProps, 
             // Important for use custom clear button
             isClearable: false }) }));
 }

package/dist/cjs/components/DatePeriod.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var common = require('@itcase/common');
-var DatePicker = require('../../DatePicker_cjs_CiH9nFzY.js');
+var DatePicker = require('../../DatePicker_cjs_BOPN9WVz.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var ChipsGroup = require('../../ChipsGroup_cjs_BNfzAmhc.js');

package/dist/cjs/components/DatePicker.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('../../DatePicker_cjs_CiH9nFzY.js');
+var DatePicker = require('../../DatePicker_cjs_BOPN9WVz.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/Response.js

@@ -299,6 +299,13 @@ const RESPONSE_MESSAGES = {
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         secondaryButtonLabel: 'Отмена',
     },
+    fail: {
+        appearance: 'fail ghost',
+        // code: '500',
+        imageSrc: index.responseIcon.Fail,
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        primaryButtonLabel: 'ОК',
+    },
     empty: {
         appearance: 'empty ghost',
         title: 'Список пуст',

package/dist/cjs/components/Select.js

@@ -217,8 +217,8 @@ const selectAppearanceShape = {
 };
 
 const selectAppearanceSize = {
-    sizeXXL: {
-        size: 'xxl',
+    sizeXL: {
+        size: 'xl',
         textLoadingMessageAppearance: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -236,8 +236,8 @@ const selectAppearanceSize = {
         optionTextSize: 'm',
         placeholderTextSize: 'm',
     },
-    sizeXL: {
-        size: 'xl',
+    sizeL: {
+        size: 'l',
         textLoadingMessageAppearance: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -575,7 +575,7 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
             Placeholder: SelectPlaceholder,
             SingleValue: SelectSingleValue,
             ValueContainer: SelectValueContainer,
-        }, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions ?? false, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass && `border-color_${optionBorderClass}`, noOptionBorderType: optionBorderTypeClass && `border_type_${optionBorderTypeClass}`, noOptionsFill: optionFillClass && `fill_${optionFillClass}`, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillDisabled: optionFillDisabledClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextColorDisabled: optionTextColorDisabled, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect ?? true, isDisabled: isDisabled, isClearable: isClearable ?? false, isLoading: isLoading, isMulti: isMulti, isSearchable: isSearchable ?? false, set: set, onChange: onChange, onInputChange: onInputChange }));
+        }, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions ?? false, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass && `border-color_${optionBorderClass}`, noOptionBorderType: optionBorderTypeClass && `border_type_${optionBorderTypeClass}`, noOptionsFill: optionFillClass && `fill_${optionFillClass}`, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillDisabled: optionFillDisabledClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextColorDisabled: optionTextColorDisabled, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect ?? true, isDisabled: isDisabled, isClearable: isClearable ?? false, isLoading: isLoading, isMulti: isMulti ?? false, isSearchable: isSearchable ?? false, set: set, onChange: onChange, onInputChange: onInputChange }));
 });
 
 exports.Select = SelectContainer;

package/dist/cjs/components/Switch.js

@@ -130,8 +130,8 @@ const Switch = React.forwardRef(function Switch(props, ref) {
     const { id, className, appearance, align = 'left', title, desc, isDisabled, isActive, onChange, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, switchConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { size, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillToggleActiveClass, fillToggleActiveHoverClass, fillToggleClass, fillToggleHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, } = propsGenerator;
-    return (jsxRuntime.jsxs("div", { className: clsx('switch', className, align && `switch_align_${align}`, size && `switch_size_${size}`), children: [jsxRuntime.jsxs("div", { className: "switch__wrapper", children: [title && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc }))] }), jsxRuntime.jsxs("div", { className: 'switch__item', children: [jsxRuntime.jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", 
+    const { size, fillActiveClass, fillActiveHoverClass, fillClass, widthClass, fillHoverClass, fillToggleActiveClass, fillToggleActiveHoverClass, fillToggleClass, fillToggleHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, } = propsGenerator;
+    return (jsxRuntime.jsxs("div", { className: clsx('switch', className, widthClass && `width_${widthClass}`, align && `switch_align_${align}`, size && `switch_size_${size}`), children: [jsxRuntime.jsxs("div", { className: "switch__wrapper", children: [title && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc }))] }), jsxRuntime.jsxs("div", { className: 'switch__item', children: [jsxRuntime.jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", 
                         // @ts-expect-error
                         ref: ref, disabled: isDisabled && 'disabled', checked: isActive && 'checked', onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('switch__bg', !isActive
                             ? fillClass && `fill_${fillClass}`

package/dist/components/DatePeriod.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_DngPNvEg.js';
+import { D as DatePickerInput } from '../DatePicker_es_-aO8EkK8.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_UTiUhYs7.js';

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_DngPNvEg.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_-aO8EkK8.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Response.js

@@ -297,6 +297,13 @@ const RESPONSE_MESSAGES = {
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         secondaryButtonLabel: 'Отмена',
     },
+    fail: {
+        appearance: 'fail ghost',
+        // code: '500',
+        imageSrc: responseIcon.Fail,
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        primaryButtonLabel: 'ОК',
+    },
     empty: {
         appearance: 'empty ghost',
         title: 'Список пуст',

package/dist/components/Select.js

@@ -215,8 +215,8 @@ const selectAppearanceShape = {
 };
 
 const selectAppearanceSize = {
-    sizeXXL: {
-        size: 'xxl',
+    sizeXL: {
+        size: 'xl',
         textLoadingMessageAppearance: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -234,8 +234,8 @@ const selectAppearanceSize = {
         optionTextSize: 'm',
         placeholderTextSize: 'm',
     },
-    sizeXL: {
-        size: 'xl',
+    sizeL: {
+        size: 'l',
         textLoadingMessageAppearance: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
@@ -573,7 +573,7 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
             Placeholder: SelectPlaceholder,
             SingleValue: SelectSingleValue,
             ValueContainer: SelectValueContainer,
-        }, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions ?? false, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass && `border-color_${optionBorderClass}`, noOptionBorderType: optionBorderTypeClass && `border_type_${optionBorderTypeClass}`, noOptionsFill: optionFillClass && `fill_${optionFillClass}`, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillDisabled: optionFillDisabledClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextColorDisabled: optionTextColorDisabled, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect ?? true, isDisabled: isDisabled, isClearable: isClearable ?? false, isLoading: isLoading, isMulti: isMulti, isSearchable: isSearchable ?? false, set: set, onChange: onChange, onInputChange: onInputChange }));
+        }, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions ?? false, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass && `border-color_${optionBorderClass}`, noOptionBorderType: optionBorderTypeClass && `border_type_${optionBorderTypeClass}`, noOptionsFill: optionFillClass && `fill_${optionFillClass}`, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillDisabled: optionFillDisabledClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextColorDisabled: optionTextColorDisabled, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect ?? true, isDisabled: isDisabled, isClearable: isClearable ?? false, isLoading: isLoading, isMulti: isMulti ?? false, isSearchable: isSearchable ?? false, set: set, onChange: onChange, onInputChange: onInputChange }));
 });
 
 export { SelectContainer as Select, SelectClearIndicator, SelectControl, SelectDropdownIndicator, SelectGroupHeading, SelectIndicatorsContainer, SelectInput, SelectMenu, SelectMultiValueContainer, SelectMultiValueLabel, SelectMultiValueRemove, SelectOption, SelectPlaceholder, SelectSingleValue, SelectValueContainer, selectConfig };

package/dist/components/Switch.js

@@ -128,8 +128,8 @@ const Switch = React.forwardRef(function Switch(props, ref) {
     const { id, className, appearance, align = 'left', title, desc, isDisabled, isActive, onChange, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, switchConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { size, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillToggleActiveClass, fillToggleActiveHoverClass, fillToggleClass, fillToggleHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, } = propsGenerator;
-    return (jsxs("div", { className: clsx('switch', className, align && `switch_align_${align}`, size && `switch_size_${size}`), children: [jsxs("div", { className: "switch__wrapper", children: [title && (jsx(Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc }))] }), jsxs("div", { className: 'switch__item', children: [jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", 
+    const { size, fillActiveClass, fillActiveHoverClass, fillClass, widthClass, fillHoverClass, fillToggleActiveClass, fillToggleActiveHoverClass, fillToggleClass, fillToggleHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, } = propsGenerator;
+    return (jsxs("div", { className: clsx('switch', className, widthClass && `width_${widthClass}`, align && `switch_align_${align}`, size && `switch_size_${size}`), children: [jsxs("div", { className: "switch__wrapper", children: [title && (jsx(Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc }))] }), jsxs("div", { className: 'switch__item', children: [jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", 
                         // @ts-expect-error
                         ref: ref, disabled: isDisabled && 'disabled', checked: isActive && 'checked', onChange: onChange }), jsx("div", { className: clsx('switch__bg', !isActive
                             ? fillClass && `fill_${fillClass}`

package/dist/css/components/ScrollOnDrag/ScrollOnDrag.css

@@ -3,6 +3,7 @@
 } */
 
 .scroll-on-drag {
+  overflow: hidden;
   &__wrapper {
     width: 100%;
     &.indiana-scroll-container {

package/dist/types/components/Response/Response.constant.d.ts

@@ -40,6 +40,12 @@ declare const RESPONSE_MESSAGES: {
         secondaryButtonAppearance: string;
         secondaryButtonLabel: string;
     };
+    fail: {
+        appearance: string;
+        imageSrc: any;
+        primaryButtonAppearance: string;
+        primaryButtonLabel: string;
+    };
     empty: {
         appearance: string;
         title: string;

package/dist/types/components/Select/appearance/selectSize.d.ts

@@ -1,5 +1,5 @@
 declare const selectAppearanceSize: {
-    sizeXXL: {
+    sizeXL: {
         size: string;
         textLoadingMessageAppearance: string;
         badgeSize: string;
@@ -18,7 +18,7 @@ declare const selectAppearanceSize: {
         optionTextSize: string;
         placeholderTextSize: string;
     };
-    sizeXL: {
+    sizeL: {
         size: string;
         textLoadingMessageAppearance: string;
         badgeSize: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.142",
+  "version": "1.8.144",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -103,17 +103,17 @@
     "@emotion/is-prop-valid": "^1.4.0",
     "@itcase/common": "^1.2.32",
     "@itcase/icons": "^1.2.23",
-    "@itcase/storybook-config": "^1.2.12",
+    "@itcase/storybook-config": "^1.2.13",
     "@itcase/tokens-am": "^1.1.20",
     "@itcase/tokens-baikal": "^1.1.17",
     "@itcase/tokens-palette": "^1.1.20",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.23.18",
+    "framer-motion": "^12.23.19",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "luxon": "^3.7.2",
-    "motion": "^12.23.18",
+    "motion": "^12.23.19",
     "rc-slider": "^11.1.9",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -171,13 +171,13 @@
     "lint-staged": "^16.2.0",
     "prettier": "^3.6.2",
     "react-docgen-typescript": "^2.4.0",
-    "rollup": "^4.52.0",
+    "rollup": "^4.52.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.9",
-    "storybook": "^9.1.7",
+    "storybook": "^9.1.8",
     "stylelint": "^16.24.0",
     "typescript": "^5.9.2"
   }