@itcase/ui 1.8.137 → 1.8.139

package/dist/components/Drawer.js

@@ -81,7 +81,7 @@ function Drawer(props) {
     const isOpenPrevRef = useRef(Boolean(_isOpen));
     const appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { direction, size, titleTextColor, titleTextSize, descTextColor, descTextSize, divider, dividerSize, zeroPadding, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
+    const { direction, size, titleTextColor, titleTextSize, titleTextWeight, descTextColor, descTextSize, divider, dividerSize, zeroPadding, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
     useEffect(() => {
         const isFromOpenToClose = isOpenPrevRef.current === true && !_isOpen;
         if (isFromOpenToClose && onClose) {
@@ -94,9 +94,9 @@ function Drawer(props) {
             console.warn('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
         }
     }, [_isOpen, onClose]);
-    return (jsxs(ReactDrawer, { dataTour: dataTour, className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, 
+    return (jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), dataTour: dataTour, direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
-        customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
+        customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 export { Drawer, drawerAppearance, drawerConfig };

package/dist/components/Modal.js

@@ -135,7 +135,7 @@ const getOrCreateModalElement = (modalQuerySelector, className = '') => {
 };
 // Modal component that is an abstraction around the portal API.
 const Modal = React.forwardRef(function Modal(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, title, modalQuerySelector = '#modal-global', scroll = false, stickyHeader = false, absoluteHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalQuerySelector = '#modal-global', scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
     // Query DOM element
     const [modalElement, setModalElement] = useState(null);
     const [isOpen, setIsOpen] = useState(initialIsOpen);
@@ -226,7 +226,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     return (modalElement &&
         ReactDOM.createPortal(
         // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIcon) && (jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
+        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIcon) && (jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsx(Title, { width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, flex: "1", children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
         // A DOM element

package/dist/components/ModalSheetBottom.js

@@ -25,7 +25,7 @@ import '../context/UrlAssetPrefix.js';
 import '../Link_es_P2b6ya7P.js';
 import '../Text_es_RDU9GLCV.js';
 
-const modalSheetBottomAppearance = {
+const modalSheetBottomAppearanceSize = {
     sizeL: {
         size: 'l',
         titleTextSize: 'h4',
@@ -34,9 +34,10 @@ const modalSheetBottomAppearance = {
         size: 'm',
         titleTextSize: 'h5',
     },
-    dev: {
-        fill: 'accentPrimary',
-    },
+};
+
+const modalSheetBottomAppearance = {
+    ...modalSheetBottomAppearanceSize,
 };
 
 const modalSheetBottomConfig = {

package/dist/components/Notification.js

@@ -138,20 +138,24 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, dataTestId, dataTour, className, appearance, title, desc, before, after, close, isSkeleton, onClickClose, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, text, before, after, close, 
+    // type,
+    isSkeleton, onClickClose, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, notificationConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, titleTextColor, titleTextSize, descTextColor, descTextSize, elevationClass, sizeClass, widthClass, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
     // @ts-expect-error
     const { styles: notificationStyles } = useStyles(props);
-    return (jsxs("div", { className: clsx('notification__item', elevationClass && `elevation_${elevationClass}`, sizeClass && `notification__item_set_${sizeClass}`, widthClass && `width_${widthClass}`, fillClass && `fill_${fillClass}`, isSkeleton && `notification__item_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: desc })), close && (closeIcon || closeIconSrc) && (jsx(Icon, { className: clsx('notification__item-close', 'cursor_type_pointer'), fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) }))] }), after] }));
+    return (jsxs("div", { className: clsx('notification__item', elevationClass && `elevation_${elevationClass}`, sizeClass && `notification__item_set_${sizeClass}`, widthClass && `width_${widthClass}`, fillClass && `fill_${fillClass}`, isSkeleton && `notification__item_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), close && (closeIcon || closeIconSrc) && (jsx(Icon, { className: clsx('notification__item-close', 'cursor_type_pointer'), fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) }))] }), after] }));
 }
 
 function NotificationWrapper(props) {
     const notifications = useNotifications();
     const { hideNotifications } = useNotificationsAPI();
     const { className, close } = props;
-    return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map((notification, i) => (jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, close: close, onClickClose: hideNotifications }, i))) }) }));
+    return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map((notification, i) => (jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, 
+                // type={notification.type}
+                after: notification.after, close: close, onClickClose: hideNotifications }, i))) }) }));
 }
 
 export { Notification, NotificationWrapper, notificationAppearance, notificationConfig };

package/dist/components/Response.js

@@ -6,7 +6,7 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_DEn6z83v.js';
+import { B as Button } from '../Button_es_CVZPF_rz.js';
 import { G as Group } from '../Group_es_DJ6GHMrs.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import '@itcase/common';
@@ -264,6 +264,17 @@ const RESPONSE_MESSAGES = {
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         secondaryButtonLabel: 'Отмена',
     },
+    errorAccessDenied: {
+        appearance: 'unableLoadData ghost',
+        title: 'Доступ ограничен',
+        desc: 'Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com',
+        code: '401/403',
+        imageSrc: responseIcon.UnableLoadData,
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        primaryButtonLabel: 'Повторить',
+        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        secondaryButtonLabel: 'Отмена',
+    },
     errorNetwork: {
         appearance: 'unableLoadData ghost',
         title: 'Ошибка соединения',
@@ -287,7 +298,7 @@ const RESPONSE_MESSAGES = {
         secondaryButtonLabel: 'Отмена',
     },
     empty: {
-        appearance: 'refresh ghost',
+        appearance: 'empty ghost',
         title: 'Список пуст',
         desc: 'Нет данных по заданным параметрам',
         code: '200',
@@ -295,17 +306,6 @@ const RESPONSE_MESSAGES = {
         primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         primaryButtonLabel: 'ОК',
     },
-    errorAccessDenied: {
-        appearance: 'unableLoadData ghost',
-        title: 'Доступ ограничен',
-        desc: 'Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com',
-        code: '401/403',
-        imageSrc: responseIcon.UnableLoadData,
-        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        primaryButtonLabel: 'Повторить',
-        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        secondaryButtonLabel: 'Отмена',
-    },
     warning: {
         appearance: 'warning ghost',
         title: 'Внимание',

package/dist/components/Switch.js

@@ -22,9 +22,9 @@ import 'lodash/maxBy';
 const switchAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceTertiary',
-        fillActive: 'successTertiary',
+        fillActive: 'successPrimary',
         fillToggle: 'surfaceItemSecondary',
-        fillToggleActive: 'accentItemSecondary',
+        fillToggleActive: 'successItemPrimary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
     },

package/dist/components/Tab.js

@@ -226,7 +226,7 @@ function TabGroup(props) {
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles(props);
-    return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_type_horizontal_scroll', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxs(React.Fragment, { children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive }, item.key))), children] })) }));
+    return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxs(React.Fragment, { children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive }, item.key))), children] })) }));
 }
 
 export { Tab, TabGroup, tabAppearance, tabConfig };

package/dist/context/Notifications.js

@@ -6,9 +6,9 @@ import { axiosInstanceITCase } from '@itcase/common';
 
 const STATUSES = {
     error: 'error',
-    warning: 'warning',
     info: 'info',
     success: 'success',
+    warning: 'warning',
 };
 const NotificationsContext = createContext([]);
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -124,6 +124,7 @@ function createNotification(notification, onClose) {
     // let appearance = STATUSES.appearance
     let closeByTime = 4500;
     let appearance = '';
+    let after = null;
     if (typeof notification === 'string') {
         text = notification;
     }
@@ -133,6 +134,7 @@ function createNotification(notification, onClose) {
         text = notification.text ?? text;
         status = notification.status ?? status;
         closeByTime = notification.closeByTime ?? closeByTime;
+        after = notification.after ?? after;
     }
     switch (status) {
         case 'success':
@@ -154,6 +156,7 @@ function createNotification(notification, onClose) {
         title: title,
         status: status,
         text: text,
+        after: after,
         closeByTime: closeByTime,
         onClose: onClose,
     };

package/dist/css/components/Checkbox/Checkbox.css

@@ -207,16 +207,17 @@
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
-    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
-    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
-    sonic-silver {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_active_$(palette) {
       & .checkbox__state {
         background: var(--color-palette-$(palette));

package/dist/css/components/Drawer/Drawer.css

@@ -53,14 +53,6 @@
   &__after {
     z-index: 10;
   }
-  &_sticky-button {
-    ^^&__after {
-      width: 100%;
-      position: sticky;
-      left: 0;
-      bottom: 0;
-    }
-  }
 }
 .drawer {
   &_reset-padding {
@@ -69,6 +61,19 @@
     }
   }
 }
+.drawer {
+  &_sticky-button {
+    ^&__wrapper {
+      padding-bottom: 0;
+    }
+    ^&__after {
+      width: 100%;
+      position: sticky;
+      left: 0;
+      bottom: 0;
+    }
+  }
+}
 :root {
   --drawer-overlay-background: rgb(116, 116, 116, 0.5);
   --drawer-overlay-filter: blur(10px);

package/dist/css/components/Icon/Icon.css

@@ -116,16 +116,17 @@
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
-    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
-    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
-    sonic-silver {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_active_hover_$(palette) {
       &:hover {
         & svg {

package/dist/css/components/Radio/Radio.css

@@ -184,16 +184,17 @@
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
-    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
-    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
-    sonic-silver {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_active_$(palette) {
       & .radio__state {
         background: var(--color-palette-$(palette));

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

@@ -79,16 +79,17 @@
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
       pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      rose-gold, pink-sand, vintage-rose, grapefruit, light-pink, light-red,
+      cream, almond, mellow-yellow, canary-yellow, pollen, flash-light,
+      lemon-cream, flash, dark-green, green, spearmint, mint, beryl,
+      light-green, light-sky, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
       gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
-      alto, athens-gray, sonic-silver {
+      outer-space, graphite-grey, alto, athens-gray, sonic-silver {
       .border&_active_$(palette),
       &_active_$(palette) {
         border-width: 1px;

package/dist/css/styles/bundle.css

@@ -421,16 +421,17 @@ div.alignment {
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
       pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      rose-gold, pink-sand, vintage-rose, grapefruit, light-pink, light-red,
+      cream, almond, mellow-yellow, canary-yellow, pollen, flash-light,
+      lemon-cream, flash, dark-green, green, spearmint, mint, beryl,
+      light-green, light-sky, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
       gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
-      alto, athens-gray, sonic-silver {
+      outer-space, graphite-grey, alto, athens-gray, sonic-silver {
       .border&_active_$(palette),
       &_active_$(palette) {
         border-width: 1px;
@@ -900,16 +901,17 @@ textarea.fill {
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
-    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
-    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
-    sonic-silver {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_$(palette) {
       background: var(--color-palette-$(palette));
       &-item {
@@ -1264,16 +1266,17 @@ textarea.fill {
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
       pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      rose-gold, pink-sand, vintage-rose, grapefruit, light-pink, light-red,
+      cream, almond, mellow-yellow, canary-yellow, pollen, flash-light,
+      lemon-cream, flash, dark-green, green, spearmint, mint, beryl,
+      light-green, light-sky, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
       gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
-      alto, athens-gray, sonic-silver {
+      outer-space, graphite-grey, alto, athens-gray, sonic-silver {
       .text&_active_$(palette),
       &_active_$(palette) {
         color: var(--color-palette-$(palette));
@@ -1392,7 +1395,7 @@ textarea.fill {
 }
 .width {
   &_hug {
-    display: inline-flex;
+    display: inline-flex !important;
   }
   &_fill {
     width: 100%;

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

@@ -117,16 +117,17 @@ textarea.fill {
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
-    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
-    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
-    sonic-silver {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_$(palette) {
       background: var(--color-palette-$(palette));
       &-item {

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

@@ -53,16 +53,17 @@
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
       pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      rose-gold, pink-sand, vintage-rose, grapefruit, light-pink, light-red,
+      cream, almond, mellow-yellow, canary-yellow, pollen, flash-light,
+      lemon-cream, flash, dark-green, green, spearmint, mint, beryl,
+      light-green, light-sky, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
       gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
-      alto, athens-gray, sonic-silver {
+      outer-space, graphite-grey, alto, athens-gray, sonic-silver {
       .text&_active_$(palette),
       &_active_$(palette) {
         color: var(--color-palette-$(palette));

package/dist/css/styles/width/width.css

@@ -1,6 +1,6 @@
 .width {
   &_hug {
-    display: inline-flex;
+    display: inline-flex !important;
   }
   &_fill {
     width: 100%;

package/dist/types/components/ModalSheetBottom/ModalSheetBottom.appearance.d.ts

@@ -7,7 +7,4 @@ export declare const modalSheetBottomAppearance: {
         size: string;
         titleTextSize: string;
     };
-    dev: {
-        fill: string;
-    };
 };

package/dist/types/components/ModalSheetBottom/appearance/modalSheetBottomSize.d.ts

@@ -0,0 +1,11 @@
+declare const modalSheetBottomAppearanceSize: {
+    sizeL: {
+        size: string;
+        titleTextSize: string;
+    };
+    sizeM: {
+        size: string;
+        titleTextSize: string;
+    };
+};
+export { modalSheetBottomAppearanceSize };

package/dist/types/components/ModalSheetBottom/index.d.ts

@@ -1,2 +1,2 @@
-export { modalSheetBottomAppearance } from './ModalSheetBottom.appearance';
 export { ModalSheetBottom } from './ModalSheetBottom';
+export { modalSheetBottomAppearance } from './ModalSheetBottom.appearance';

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

@@ -9,17 +9,18 @@ declare const RESPONSE_MESSAGES: {
         secondaryButtonAppearance: string;
         secondaryButtonLabel: string;
     };
-    errorNetwork: {
+    errorAccessDenied: {
         appearance: string;
         title: string;
         desc: string;
+        code: string;
         imageSrc: any;
         primaryButtonAppearance: string;
         primaryButtonLabel: string;
         secondaryButtonAppearance: string;
         secondaryButtonLabel: string;
     };
-    nothingFound: {
+    errorNetwork: {
         appearance: string;
         title: string;
         desc: string;
@@ -29,16 +30,17 @@ declare const RESPONSE_MESSAGES: {
         secondaryButtonAppearance: string;
         secondaryButtonLabel: string;
     };
-    empty: {
+    nothingFound: {
         appearance: string;
         title: string;
         desc: string;
-        code: string;
         imageSrc: any;
         primaryButtonAppearance: string;
         primaryButtonLabel: string;
+        secondaryButtonAppearance: string;
+        secondaryButtonLabel: string;
     };
-    errorAccessDenied: {
+    empty: {
         appearance: string;
         title: string;
         desc: string;
@@ -46,8 +48,6 @@ declare const RESPONSE_MESSAGES: {
         imageSrc: any;
         primaryButtonAppearance: string;
         primaryButtonLabel: string;
-        secondaryButtonAppearance: string;
-        secondaryButtonLabel: string;
     };
     warning: {
         appearance: string;

package/dist/types/context/Notifications.d.ts

@@ -7,9 +7,9 @@ declare function useNotificationsAPI(): {
     showNotification: (notification: string | CreatedNotification, onClose?: SimpleCallback) => void;
     notificationStatuses: {
         error: string;
-        warning: string;
         info: string;
         success: string;
+        warning: string;
     };
 };
 export { NotificationsProvider, useNotifications, useNotificationsAPI };