@itcase/ui 1.8.151 → 1.8.153

package/dist/{DatePicker_cjs_D0iBBPU9.js → DatePicker_cjs_CccRZSjc.js}

@@ -101,7 +101,7 @@ function DatePickerInput(props) {
     const datepickerRef = React.useRef(null);
     const [dateStart, dateEnd] = React.useMemo(() => {
         let dateStart = undefined;
-        if (value !== undefined) {
+        if (value) {
             if (typeof value === 'string') {
                 dateStart = new Date(value);
             }
@@ -110,7 +110,7 @@ function DatePickerInput(props) {
             }
         }
         let dateEnd = undefined;
-        if (endValue !== undefined) {
+        if (endValue) {
             if (typeof endValue === 'string') {
                 dateEnd = new Date(endValue);
             }

package/dist/{DatePicker_es_DtBOEq-Q.js → DatePicker_es_54jl8guQ.js}

@@ -99,7 +99,7 @@ function DatePickerInput(props) {
     const datepickerRef = useRef(null);
     const [dateStart, dateEnd] = useMemo(() => {
         let dateStart = undefined;
-        if (value !== undefined) {
+        if (value) {
             if (typeof value === 'string') {
                 dateStart = new Date(value);
             }
@@ -108,7 +108,7 @@ function DatePickerInput(props) {
             }
         }
         let dateEnd = undefined;
-        if (endValue !== undefined) {
+        if (endValue) {
             if (typeof endValue === 'string') {
                 dateEnd = new Date(endValue);
             }

package/dist/{Group_cjs_CLE5_jDA.js → Group_cjs_BxbmyFvN.js}

@@ -24,7 +24,7 @@ const groupConfig = {
     },
 };
 const Group = React.forwardRef(function Group(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, name, easing, htmlFor, scroll, style, tag: Tag = 'div', isActive, isDisabled, onClick, onMouseDown, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, name, easing, htmlFor, print, scroll, style, tag: Tag = 'div', isActive, isDisabled, onClick, onMouseDown, children, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, groupConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorActiveClass, textColorClass, textColorHoverClass, columnsClass, elevationClass, heightClass, iconFillHoverClass, shapeClass, stackingClass, widthClass, wrapClass, } = propsGenerator;
@@ -51,7 +51,7 @@ const Group = React.forwardRef(function Group(props, ref) {
                     `border-color_hover_${borderColorHoverClass}`
                 : borderColorActiveHoverClass &&
                     `border-color_active_hover_${borderColorActiveHoverClass}`
-            : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer'), name: name, ref: ref, "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
+            : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, print === false && 'no-print', print === true && 'print', onClick && 'cursor_type_pointer'), name: name, ref: ref, "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
 });
 
 exports.Group = Group;

package/dist/{Group_es_ZTwafPX1.js → Group_es_p5hBFgw4.js}

@@ -22,7 +22,7 @@ const groupConfig = {
     },
 };
 const Group = React.forwardRef(function Group(props, ref) {
-    const { id, appearance, className, dataTestId, dataTour, name, easing, htmlFor, scroll, style, tag: Tag = 'div', isActive, isDisabled, onClick, onMouseDown, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, name, easing, htmlFor, print, scroll, style, tag: Tag = 'div', isActive, isDisabled, onClick, onMouseDown, children, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, groupConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorActiveClass, textColorClass, textColorHoverClass, columnsClass, elevationClass, heightClass, iconFillHoverClass, shapeClass, stackingClass, widthClass, wrapClass, } = propsGenerator;
@@ -49,7 +49,7 @@ const Group = React.forwardRef(function Group(props, ref) {
                     `border-color_hover_${borderColorHoverClass}`
                 : borderColorActiveHoverClass &&
                     `border-color_active_hover_${borderColorActiveHoverClass}`
-            : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer'), name: name, ref: ref, "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
+            : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, print === false && 'no-print', print === true && 'print', onClick && 'cursor_type_pointer'), name: name, ref: ref, "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
 });
 
 export { Group as G, groupAppearance as a, groupConfig as g };

package/dist/cjs/components/AvatarStack.js

@@ -6,7 +6,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Avatar = require('../../Avatar_cjs_Dv_yLG9O.js');
-var Group = require('../../Group_cjs_CLE5_jDA.js');
+var Group = require('../../Group_cjs_BxbmyFvN.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 require('react');
 require('lodash/camelCase');

package/dist/cjs/components/DatePeriod.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var luxon = require('luxon');
 var common = require('@itcase/common');
-var DatePicker = require('../../DatePicker_cjs_D0iBBPU9.js');
+var DatePicker = require('../../DatePicker_cjs_CccRZSjc.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var ChipsGroup = require('../../ChipsGroup_cjs_DVizkQ4v.js');

package/dist/cjs/components/DatePicker.js

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

package/dist/cjs/components/Flex.js

@@ -20,22 +20,22 @@ require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
 
 function Flex(props) {
-    const { id, className, type, style, tag: Tag = 'div', onClick, children, } = props;
+    const { id, className, type, print, style, tag: Tag = 'div', onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    const { directionClass, justifyContentClass, alignContentClass, alignItemsClass, fillClass, borderColorClass, borderTypeClass, dataTestId, dataTour, flowClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
+    const { dataTestId, dataTour, directionClass, justifyContentClass, alignContentClass, alignItemsClass, fillClass, borderColorClass, borderTypeClass, flowClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: flexStyles, wrapper: flexWrapperStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'flex', widthClass && `width_${widthClass}`, alignContentClass && `flex_align-content_${alignContentClass}`, alignItemsClass && `flex_align-items_${alignItemsClass}`, directionClass && `flex_direction_${directionClass}`, fillClass && `fill_${fillClass}`, flowClass && `flex_flow_${flowClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, positionClass && `position_${positionClass}`, justifyContentClass && `flex_justify-content_${justifyContentClass}`, shapeClass && `flex_shape_${shapeClass}`, type && `flex_type_${type}`, wrapClass && `flex_wrap_${wrapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, flexStyles, style), onClick: onClick, children: jsxRuntime.jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
+    return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'flex', widthClass && `width_${widthClass}`, alignContentClass && `flex_align-content_${alignContentClass}`, alignItemsClass && `flex_align-items_${alignItemsClass}`, directionClass && `flex_direction_${directionClass}`, fillClass && `fill_${fillClass}`, flowClass && `flex_flow_${flowClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, positionClass && `position_${positionClass}`, justifyContentClass && `flex_justify-content_${justifyContentClass}`, shapeClass && `flex_shape_${shapeClass}`, type && `flex_type_${type}`, print === false && 'no-print', print === true && 'print', wrapClass && `flex_wrap_${wrapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, flexStyles, style), onClick: onClick, children: jsxRuntime.jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
 }
 
 function FlexItem(props) {
-    const { className, htmlFor, style, tag: Tag = 'div', children } = props;
+    const { className, htmlFor, print, style, tag: Tag = 'div', children } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    const { directionClass, justifyContentClass, alignItemsClass, alignSelfClass, fillClass, fillHoverClass, dataTestId, dataTour, growClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
+    const { dataTestId, dataTour, directionClass, justifyContentClass, alignItemsClass, alignSelfClass, fillClass, fillHoverClass, growClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: flexItemStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx(Tag, { className: clsx(className, 'flex__item', positionClass && `position_${positionClass}`, alignItemsClass && `flex__item_align-items_${alignItemsClass}`, alignSelfClass && `flex__item_align-self_${alignSelfClass}`, directionClass && `flex__item_direction_${directionClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, growClass && `flex__item_grow_${growClass}`, justifyContentClass &&
-            `flex__item_justify-content_${justifyContentClass}`, shapeClass && `flex__item_shape_${shapeClass}`, widthClass && `width_${widthClass}`, wrapClass && `flex__item_wrap_${wrapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, flexItemStyles, style), children: children }));
+            `flex__item_justify-content_${justifyContentClass}`, shapeClass && `flex__item_shape_${shapeClass}`, print === false && 'no-print', print === true && 'print', widthClass && `width_${widthClass}`, wrapClass && `flex__item_wrap_${wrapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, flexItemStyles, style), children: children }));
 }
 
 exports.Flex = Flex;

package/dist/cjs/components/Grid.js

@@ -20,30 +20,30 @@ require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
 
 function Grid(props) {
-    const { id, className, dataTour, type, horizontalResizing, horizontalScroll, tag: Tag = 'div', useGridSystem, verticalResizing, before, after, onClick, onDoubleClick, children, } = props;
+    const { id, className, dataTour, type, horizontalResizing, horizontalScroll, print, tag: Tag = 'div', useGridSystem, verticalResizing, before, after, onClick, onDoubleClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { justifyContentClass, justifyItemsClass, alignContentClass, alignItemsClass, fillClass, fillHoverClass, borderColorClass, columnGapClass, columnsClass, heightClass, rowGapClass, rowsClass, widthClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: gridStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`), dataTour: dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && jsxRuntime.jsx("div", { className: "grid__before", children: before }), children, after && jsxRuntime.jsx("div", { className: "grid__after", children: after })] }));
+    return (jsxRuntime.jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`, print === false && 'no-print', print === true && 'print'), dataTour: dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && jsxRuntime.jsx("div", { className: "grid__before", children: before }), children, after && jsxRuntime.jsx("div", { className: "grid__after", children: after })] }));
 }
 
 function GridItem(props) {
-    const { id, className, style, onClick, children } = props;
+    const { id, className, print, style, onClick, children } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    const { directionClass, justifySelfClass, alignSelfClass, fillClass, fillHoverClass, columnEndClass, columnGapClass, columnSpanClass, columnStartClass, dataTestId, dataTour, gapClass, heightClass, orderClass, rowEndClass, rowGapClass, rowSpanClass, rowStartClass, widthClass, } = propsGenerator;
+    const { dataTestId, dataTour, directionClass, justifySelfClass, alignSelfClass, fillClass, fillHoverClass, columnEndClass, columnGapClass, columnSpanClass, columnStartClass, gapClass, heightClass, orderClass, rowEndClass, rowGapClass, rowSpanClass, rowStartClass, widthClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: gridItemStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { id: id, className: clsx(className, 'grid__item', orderClass && `order_${orderClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, alignSelfClass && `grid__item_align-self_${alignSelfClass}`, justifySelfClass && `grid__item_justify-self_${justifySelfClass}`, columnStartClass && `grid__item_column-start_${columnStartClass}`, columnEndClass && `grid__item_column-end_${columnEndClass}`, columnSpanClass && `grid__item_column-span_${columnSpanClass}`, rowStartClass && `grid__item_row-start_${rowStartClass}`, rowEndClass && `grid__item_row-end_${rowEndClass}`, rowSpanClass && `grid__item_row-span_${rowSpanClass}`, directionClass && `direction_${directionClass}`, gapClass && `gap_${gapClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, rowGapClass && `row-gap_${rowGapClass}`, columnGapClass && `column-gap_${columnGapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, gridItemStyles, style), onClick: onClick, children: children }));
+    return (jsxRuntime.jsx("div", { id: id, className: clsx(className, 'grid__item', orderClass && `order_${orderClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, alignSelfClass && `grid__item_align-self_${alignSelfClass}`, justifySelfClass && `grid__item_justify-self_${justifySelfClass}`, columnStartClass && `grid__item_column-start_${columnStartClass}`, columnEndClass && `grid__item_column-end_${columnEndClass}`, columnSpanClass && `grid__item_column-span_${columnSpanClass}`, rowStartClass && `grid__item_row-start_${rowStartClass}`, rowEndClass && `grid__item_row-end_${rowEndClass}`, rowSpanClass && `grid__item_row-span_${rowSpanClass}`, directionClass && `direction_${directionClass}`, gapClass && `gap_${gapClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, rowGapClass && `row-gap_${rowGapClass}`, print === false && 'no-print', print === true && 'print', columnGapClass && `column-gap_${columnGapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, gridItemStyles, style), onClick: onClick, children: children }));
 }
 
 function GridRow(props) {
-    const { id, className, dataTestId, dataTour, htmlFor, tag: Tag = 'div', onClick, children, } = props;
+    const { id, className, dataTestId, dataTour, htmlFor, print, tag: Tag = 'div', onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { fillClass, fillHoverClass, borderColorClass, heightClass, widthClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: gridRowStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'grid__row', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: gridRowStyles, onClick: onClick, children: children }));
+    return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'grid__row', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, print === false && 'no-print', print === true && 'print', borderColorClass && `border-color_${borderColorClass}`), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: gridRowStyles, onClick: onClick, children: children }));
 }
 
 exports.Grid = Grid;

package/dist/cjs/components/Group.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Group = require('../../Group_cjs_CLE5_jDA.js');
+var Group = require('../../Group_cjs_BxbmyFvN.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/Modal.js

@@ -137,7 +137,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, 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;
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalQuerySelector = '#modal-global', print, 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] = React.useState(null);
     const [isOpen, setIsOpen] = React.useState(initialIsOpen);
@@ -211,7 +211,11 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         addModalProps(modalElement);
     }, [isOpen]); // eslint-disable-line
     React.useLayoutEffect(() => {
-        const element = getOrCreateModalElement(modalQuerySelector, className);
+        let classNameModal = className;
+        if (print === false) {
+            classNameModal = clsx(className, 'no-print');
+        }
+        const element = getOrCreateModalElement(modalQuerySelector, classNameModal);
         setModalElement(element);
         if (element) {
             addModalProps(element);
@@ -228,7 +232,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     return (modalElement &&
         ReactDOM.createPortal(
         // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.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) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, flex: "1", children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
+        isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.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) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
         // A DOM element

package/dist/cjs/components/Notification/stories/__mock__.js

@@ -3,6 +3,7 @@
 const notificationsMock = [
     {
         key: 1,
+        type: 'float',
         title: 'Text 123',
         desc: 'Text 123',
         status: 'error',
@@ -10,6 +11,7 @@ const notificationsMock = [
     },
     {
         key: 2,
+        type: 'float',
         title: 'Text 123',
         desc: 'Text 123',
         status: 'warning',
@@ -17,6 +19,7 @@ const notificationsMock = [
     },
     {
         key: 3,
+        type: 'float',
         title: 'Text 123',
         desc: 'Text 123',
         status: 'info',
@@ -24,6 +27,7 @@ const notificationsMock = [
     },
     {
         key: 4,
+        type: 'float',
         title: 'Text 123',
         desc: 'Text 123',
         status: 'success',

package/dist/cjs/components/Notification.js

@@ -180,20 +180,20 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, appearance, className, dataTestId, dataTour, type, title, text, float, global, toast, before, after, isSkeleton, isLoading, onClickButton, onClickClose, } = props;
+    const { id, appearance, className, dataTestId, dataTour, type = 'float', title, text, before, after, isSkeleton, isLoading, onClickButton, onClickClose, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, notificationConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'hug', shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, closeIconAppearanceSize, closeIconSrc, } = propsGenerator;
     // @ts-expect-error
     const { styles: notificationStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', float && 'notification__item_float', toast && 'notification__item_toast', global && 'notification__item_global', widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsxRuntime.jsx(Button.Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
+    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', `notification__item_${type}`, widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsxRuntime.jsx(Button.Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
 }
 
 function NotificationWrapper(props) {
     const notifications = Notifications.useNotifications();
     const { hideNotifications } = Notifications.useNotificationsAPI();
     const { className } = props;
-    return (jsxRuntime.jsx("div", { className: clsx('notification', className), children: jsxRuntime.jsx("div", { className: "notification__wrapper", children: notifications.map((notification, i) => (jsxRuntime.jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, buttonLabel: notification.buttonLabel, float: notification.float, global: notification.global, toast: notification.toast, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, i))) }) }));
+    return (jsxRuntime.jsx("div", { className: clsx('notification', className), children: jsxRuntime.jsx("div", { className: "notification__wrapper", children: notifications.map((notification) => (jsxRuntime.jsx(Notification, { id: notification.id, appearance: notification.appearance, type: notification.type, title: notification.title, status: notification.status, text: notification.text, buttonLabel: notification.buttonLabel, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, isLoading: notification.isLoading, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, notification.id))) }) }));
 }
 
 exports.Notification = Notification;

package/dist/cjs/components/Response.js

@@ -9,7 +9,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Button = require('../../Button_cjs_CGIzPuXo.js');
-var Group = require('../../Group_cjs_CLE5_jDA.js');
+var Group = require('../../Group_cjs_BxbmyFvN.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');

package/dist/cjs/components/Select.js

@@ -6,7 +6,7 @@ var Icon = require('../../Icon_cjs_B5o0K55R.js');
 var React = require('react');
 var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');
-var Group = require('../../Group_cjs_CLE5_jDA.js');
+var Group = require('../../Group_cjs_BxbmyFvN.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');

package/dist/cjs/context/Notifications.js

@@ -117,21 +117,26 @@ function useNotifications() {
 function useNotificationsAPI() {
     return React.useContext(NotificationsAPIContext);
 }
+const statusToAppearanceList = {
+    error: 'errorPrimary sizeS solid rounded',
+    info: 'infoPrimary sizeS solid rounded',
+    success: 'successPrimary sizeS solid rounded',
+    warning: 'warningPrimary sizeS solid rounded',
+};
 function createNotification(notification, onClose) {
     // Default notification item properties
     let id = uuid.v4().split('-')[0];
     let title = '';
     let text = '';
-    let float = null;
-    let toast = null;
-    let global = null;
     let closeIcon = '';
     let closeIconSrc = '';
+    let type = 'float';
     let buttonLabel = '';
     let status = STATUSES.warning;
     let closeByTime = 4500;
-    let appearance = '';
+    let appearance = statusToAppearanceList[status];
     let after = null;
+    let isLoading = false;
     let closeIconAppearance = '';
     let onClickButton = null;
     if (typeof notification === 'string') {
@@ -141,48 +146,36 @@ function createNotification(notification, onClose) {
         id = notification.id ?? id;
         title = notification.title ?? title;
         text = notification.text ?? text;
-        float = notification.float ?? float;
-        toast = notification.toast ?? toast;
         closeIconAppearance =
             notification.closeIconAppearance ?? closeIconAppearance;
-        global = notification.global ?? global;
+        type = notification.type ?? type;
         closeIcon = notification.closeIcon ?? closeIcon;
         closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
         buttonLabel = notification.buttonLabel ?? buttonLabel;
         onClickButton = notification.onClickButton ?? onClickButton;
         status = notification.status ?? status;
         closeByTime = notification.closeByTime ?? closeByTime;
+        isLoading = notification.isLoading ?? isLoading;
         after = notification.after ?? after;
-    }
-    switch (status) {
-        case 'success':
-            appearance = 'successPrimary sizeM solid';
-            break;
-        case 'info':
-            appearance = 'infoPrimary sizeM solid';
-            break;
-        case 'error':
-            appearance = 'errorPrimary sizeM solid';
-            break;
-        case 'warning':
-            appearance = 'warningPrimary sizeM solid';
-            break;
+        appearance =
+            notification.appearance ??
+                statusToAppearanceList[notification.status] ??
+                appearance;
     }
     return {
         id: id,
         appearance: appearance,
+        type: type,
         title: title,
         status: status,
         text: text,
         buttonLabel: buttonLabel,
-        float: float,
-        global: global,
-        toast: toast,
         after: after,
         closeByTime: closeByTime,
         closeIcon: closeIcon,
         closeIconAppearance: closeIconAppearance,
         closeIconSrc: closeIconSrc,
+        isLoading: isLoading,
         onClickButton: onClickButton,
         onClose: onClose,
     };

package/dist/components/AvatarStack.js

@@ -4,7 +4,7 @@ import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceC
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { A as Avatar } from '../Avatar_es_Cp4-nxIj.js';
-import { G as Group } from '../Group_es_ZTwafPX1.js';
+import { G as Group } from '../Group_es_p5hBFgw4.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import 'react';
 import 'lodash/camelCase';

package/dist/components/DatePeriod.js

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_DtBOEq-Q.js';
+import { D as DatePickerInput } from '../DatePicker_es_54jl8guQ.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_D3eiXGyK.js';

package/dist/components/DatePicker.js

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

package/dist/components/Flex.js

@@ -18,22 +18,22 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
 function Flex(props) {
-    const { id, className, type, style, tag: Tag = 'div', onClick, children, } = props;
+    const { id, className, type, print, style, tag: Tag = 'div', onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator(props);
-    const { directionClass, justifyContentClass, alignContentClass, alignItemsClass, fillClass, borderColorClass, borderTypeClass, dataTestId, dataTour, flowClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
+    const { dataTestId, dataTour, directionClass, justifyContentClass, alignContentClass, alignItemsClass, fillClass, borderColorClass, borderTypeClass, flowClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: flexStyles, wrapper: flexWrapperStyles } = useStyles(props);
-    return (jsx(Tag, { id: id, className: clsx(className, 'flex', widthClass && `width_${widthClass}`, alignContentClass && `flex_align-content_${alignContentClass}`, alignItemsClass && `flex_align-items_${alignItemsClass}`, directionClass && `flex_direction_${directionClass}`, fillClass && `fill_${fillClass}`, flowClass && `flex_flow_${flowClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, positionClass && `position_${positionClass}`, justifyContentClass && `flex_justify-content_${justifyContentClass}`, shapeClass && `flex_shape_${shapeClass}`, type && `flex_type_${type}`, wrapClass && `flex_wrap_${wrapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, flexStyles, style), onClick: onClick, children: jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
+    return (jsx(Tag, { id: id, className: clsx(className, 'flex', widthClass && `width_${widthClass}`, alignContentClass && `flex_align-content_${alignContentClass}`, alignItemsClass && `flex_align-items_${alignItemsClass}`, directionClass && `flex_direction_${directionClass}`, fillClass && `fill_${fillClass}`, flowClass && `flex_flow_${flowClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, positionClass && `position_${positionClass}`, justifyContentClass && `flex_justify-content_${justifyContentClass}`, shapeClass && `flex_shape_${shapeClass}`, type && `flex_type_${type}`, print === false && 'no-print', print === true && 'print', wrapClass && `flex_wrap_${wrapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, flexStyles, style), onClick: onClick, children: jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
 }
 
 function FlexItem(props) {
-    const { className, htmlFor, style, tag: Tag = 'div', children } = props;
+    const { className, htmlFor, print, style, tag: Tag = 'div', children } = props;
     const propsGenerator = useDevicePropsGenerator(props);
-    const { directionClass, justifyContentClass, alignItemsClass, alignSelfClass, fillClass, fillHoverClass, dataTestId, dataTour, growClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
+    const { dataTestId, dataTour, directionClass, justifyContentClass, alignItemsClass, alignSelfClass, fillClass, fillHoverClass, growClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: flexItemStyles } = useStyles(props);
     return (jsx(Tag, { className: clsx(className, 'flex__item', positionClass && `position_${positionClass}`, alignItemsClass && `flex__item_align-items_${alignItemsClass}`, alignSelfClass && `flex__item_align-self_${alignSelfClass}`, directionClass && `flex__item_direction_${directionClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, growClass && `flex__item_grow_${growClass}`, justifyContentClass &&
-            `flex__item_justify-content_${justifyContentClass}`, shapeClass && `flex__item_shape_${shapeClass}`, widthClass && `width_${widthClass}`, wrapClass && `flex__item_wrap_${wrapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, flexItemStyles, style), children: children }));
+            `flex__item_justify-content_${justifyContentClass}`, shapeClass && `flex__item_shape_${shapeClass}`, print === false && 'no-print', print === true && 'print', widthClass && `width_${widthClass}`, wrapClass && `flex__item_wrap_${wrapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, flexItemStyles, style), children: children }));
 }
 
 export { Flex, FlexItem };

package/dist/components/Grid.js

@@ -18,30 +18,30 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
 function Grid(props) {
-    const { id, className, dataTour, type, horizontalResizing, horizontalScroll, tag: Tag = 'div', useGridSystem, verticalResizing, before, after, onClick, onDoubleClick, children, } = props;
+    const { id, className, dataTour, type, horizontalResizing, horizontalScroll, print, tag: Tag = 'div', useGridSystem, verticalResizing, before, after, onClick, onDoubleClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator(props);
     const { justifyContentClass, justifyItemsClass, alignContentClass, alignItemsClass, fillClass, fillHoverClass, borderColorClass, columnGapClass, columnsClass, heightClass, rowGapClass, rowsClass, widthClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: gridStyles } = useStyles(props);
-    return (jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`), dataTour: dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && jsx("div", { className: "grid__before", children: before }), children, after && jsx("div", { className: "grid__after", children: after })] }));
+    return (jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`, print === false && 'no-print', print === true && 'print'), dataTour: dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && jsx("div", { className: "grid__before", children: before }), children, after && jsx("div", { className: "grid__after", children: after })] }));
 }
 
 function GridItem(props) {
-    const { id, className, style, onClick, children } = props;
+    const { id, className, print, style, onClick, children } = props;
     const propsGenerator = useDevicePropsGenerator(props);
-    const { directionClass, justifySelfClass, alignSelfClass, fillClass, fillHoverClass, columnEndClass, columnGapClass, columnSpanClass, columnStartClass, dataTestId, dataTour, gapClass, heightClass, orderClass, rowEndClass, rowGapClass, rowSpanClass, rowStartClass, widthClass, } = propsGenerator;
+    const { dataTestId, dataTour, directionClass, justifySelfClass, alignSelfClass, fillClass, fillHoverClass, columnEndClass, columnGapClass, columnSpanClass, columnStartClass, gapClass, heightClass, orderClass, rowEndClass, rowGapClass, rowSpanClass, rowStartClass, widthClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: gridItemStyles } = useStyles(props);
-    return (jsx("div", { id: id, className: clsx(className, 'grid__item', orderClass && `order_${orderClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, alignSelfClass && `grid__item_align-self_${alignSelfClass}`, justifySelfClass && `grid__item_justify-self_${justifySelfClass}`, columnStartClass && `grid__item_column-start_${columnStartClass}`, columnEndClass && `grid__item_column-end_${columnEndClass}`, columnSpanClass && `grid__item_column-span_${columnSpanClass}`, rowStartClass && `grid__item_row-start_${rowStartClass}`, rowEndClass && `grid__item_row-end_${rowEndClass}`, rowSpanClass && `grid__item_row-span_${rowSpanClass}`, directionClass && `direction_${directionClass}`, gapClass && `gap_${gapClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, rowGapClass && `row-gap_${rowGapClass}`, columnGapClass && `column-gap_${columnGapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, gridItemStyles, style), onClick: onClick, children: children }));
+    return (jsx("div", { id: id, className: clsx(className, 'grid__item', orderClass && `order_${orderClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, alignSelfClass && `grid__item_align-self_${alignSelfClass}`, justifySelfClass && `grid__item_justify-self_${justifySelfClass}`, columnStartClass && `grid__item_column-start_${columnStartClass}`, columnEndClass && `grid__item_column-end_${columnEndClass}`, columnSpanClass && `grid__item_column-span_${columnSpanClass}`, rowStartClass && `grid__item_row-start_${rowStartClass}`, rowEndClass && `grid__item_row-end_${rowEndClass}`, rowSpanClass && `grid__item_row-span_${rowSpanClass}`, directionClass && `direction_${directionClass}`, gapClass && `gap_${gapClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, rowGapClass && `row-gap_${rowGapClass}`, print === false && 'no-print', print === true && 'print', columnGapClass && `column-gap_${columnGapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, gridItemStyles, style), onClick: onClick, children: children }));
 }
 
 function GridRow(props) {
-    const { id, className, dataTestId, dataTour, htmlFor, tag: Tag = 'div', onClick, children, } = props;
+    const { id, className, dataTestId, dataTour, htmlFor, print, tag: Tag = 'div', onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator(props);
     const { fillClass, fillHoverClass, borderColorClass, heightClass, widthClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: gridRowStyles } = useStyles(props);
-    return (jsx(Tag, { id: id, className: clsx(className, 'grid__row', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: gridRowStyles, onClick: onClick, children: children }));
+    return (jsx(Tag, { id: id, className: clsx(className, 'grid__row', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, print === false && 'no-print', print === true && 'print', borderColorClass && `border-color_${borderColorClass}`), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: gridRowStyles, onClick: onClick, children: children }));
 }
 
 export { Grid, GridItem, GridRow };

package/dist/components/Group.js

@@ -1,4 +1,4 @@
-export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_ZTwafPX1.js';
+export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_p5hBFgw4.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

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, 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;
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalQuerySelector = '#modal-global', print, 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);
@@ -209,7 +209,11 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         addModalProps(modalElement);
     }, [isOpen]); // eslint-disable-line
     useLayoutEffect(() => {
-        const element = getOrCreateModalElement(modalQuerySelector, className);
+        let classNameModal = className;
+        if (print === false) {
+            classNameModal = clsx(className, 'no-print');
+        }
+        const element = getOrCreateModalElement(modalQuerySelector, classNameModal);
         setModalElement(element);
         if (element) {
             addModalProps(element);
@@ -226,7 +230,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, { 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", 
+        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, flex: "1", 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", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
         // A DOM element

package/dist/components/Notification/stories/__mock__.js

@@ -1,6 +1,7 @@
 const notificationsMock = [
     {
         key: 1,
+        type: 'float',
         title: 'Text 123',
         desc: 'Text 123',
         status: 'error',
@@ -8,6 +9,7 @@ const notificationsMock = [
     },
     {
         key: 2,
+        type: 'float',
         title: 'Text 123',
         desc: 'Text 123',
         status: 'warning',
@@ -15,6 +17,7 @@ const notificationsMock = [
     },
     {
         key: 3,
+        type: 'float',
         title: 'Text 123',
         desc: 'Text 123',
         status: 'info',
@@ -22,6 +25,7 @@ const notificationsMock = [
     },
     {
         key: 4,
+        type: 'float',
         title: 'Text 123',
         desc: 'Text 123',
         status: 'success',

package/dist/components/Notification.js

@@ -178,20 +178,20 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, appearance, className, dataTestId, dataTour, type, title, text, float, global, toast, before, after, isSkeleton, isLoading, onClickButton, onClickClose, } = props;
+    const { id, appearance, className, dataTestId, dataTour, type = 'float', title, text, before, after, isSkeleton, isLoading, onClickButton, onClickClose, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, notificationConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'hug', shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, closeIconAppearanceSize, closeIconSrc, } = propsGenerator;
     // @ts-expect-error
     const { styles: notificationStyles } = useStyles(props);
-    return (jsxs("div", { className: clsx('notification__item', float && 'notification__item_float', toast && 'notification__item_toast', global && 'notification__item_global', widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "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 })), isLoading && (jsx(Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsx(Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
+    return (jsxs("div", { className: clsx('notification__item', `notification__item_${type}`, widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "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 })), isLoading && (jsx(Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsx(Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
 }
 
 function NotificationWrapper(props) {
     const notifications = useNotifications();
     const { hideNotifications } = useNotificationsAPI();
     const { className } = 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, buttonLabel: notification.buttonLabel, float: notification.float, global: notification.global, toast: notification.toast, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, i))) }) }));
+    return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map((notification) => (jsx(Notification, { id: notification.id, appearance: notification.appearance, type: notification.type, title: notification.title, status: notification.status, text: notification.text, buttonLabel: notification.buttonLabel, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, isLoading: notification.isLoading, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, notification.id))) }) }));
 }
 
 export { Notification, NotificationWrapper, notificationAppearance, notificationConfig };

package/dist/components/Response.js

@@ -7,7 +7,7 @@ import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceC
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { B as Button } from '../Button_es_CtAnUzZA.js';
-import { G as Group } from '../Group_es_ZTwafPX1.js';
+import { G as Group } from '../Group_es_p5hBFgw4.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';

package/dist/components/Select.js

@@ -4,7 +4,7 @@ import { I as Icon, B as Badge } from '../Icon_es_BEhzKfrD.js';
 import React, { useRef, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
-import { G as Group } from '../Group_es_ZTwafPX1.js';
+import { G as Group } from '../Group_es_p5hBFgw4.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

package/dist/context/Notifications.js

@@ -115,21 +115,26 @@ function useNotifications() {
 function useNotificationsAPI() {
     return useContext(NotificationsAPIContext);
 }
+const statusToAppearanceList = {
+    error: 'errorPrimary sizeS solid rounded',
+    info: 'infoPrimary sizeS solid rounded',
+    success: 'successPrimary sizeS solid rounded',
+    warning: 'warningPrimary sizeS solid rounded',
+};
 function createNotification(notification, onClose) {
     // Default notification item properties
     let id = v4().split('-')[0];
     let title = '';
     let text = '';
-    let float = null;
-    let toast = null;
-    let global = null;
     let closeIcon = '';
     let closeIconSrc = '';
+    let type = 'float';
     let buttonLabel = '';
     let status = STATUSES.warning;
     let closeByTime = 4500;
-    let appearance = '';
+    let appearance = statusToAppearanceList[status];
     let after = null;
+    let isLoading = false;
     let closeIconAppearance = '';
     let onClickButton = null;
     if (typeof notification === 'string') {
@@ -139,48 +144,36 @@ function createNotification(notification, onClose) {
         id = notification.id ?? id;
         title = notification.title ?? title;
         text = notification.text ?? text;
-        float = notification.float ?? float;
-        toast = notification.toast ?? toast;
         closeIconAppearance =
             notification.closeIconAppearance ?? closeIconAppearance;
-        global = notification.global ?? global;
+        type = notification.type ?? type;
         closeIcon = notification.closeIcon ?? closeIcon;
         closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
         buttonLabel = notification.buttonLabel ?? buttonLabel;
         onClickButton = notification.onClickButton ?? onClickButton;
         status = notification.status ?? status;
         closeByTime = notification.closeByTime ?? closeByTime;
+        isLoading = notification.isLoading ?? isLoading;
         after = notification.after ?? after;
-    }
-    switch (status) {
-        case 'success':
-            appearance = 'successPrimary sizeM solid';
-            break;
-        case 'info':
-            appearance = 'infoPrimary sizeM solid';
-            break;
-        case 'error':
-            appearance = 'errorPrimary sizeM solid';
-            break;
-        case 'warning':
-            appearance = 'warningPrimary sizeM solid';
-            break;
+        appearance =
+            notification.appearance ??
+                statusToAppearanceList[notification.status] ??
+                appearance;
     }
     return {
         id: id,
         appearance: appearance,
+        type: type,
         title: title,
         status: status,
         text: text,
         buttonLabel: buttonLabel,
-        float: float,
-        global: global,
-        toast: toast,
         after: after,
         closeByTime: closeByTime,
         closeIcon: closeIcon,
         closeIconAppearance: closeIconAppearance,
         closeIconSrc: closeIconSrc,
+        isLoading: isLoading,
         onClickButton: onClickButton,
         onClose: onClose,
     };

package/dist/css/styles/bundle.css

@@ -1087,6 +1087,25 @@ textarea.fill {
     position: static;
   }
 }
+@media screen {
+  .print {
+    height: auto !important;
+    overflow: auto !important;
+    display: none !important;
+  }
+}
+@media print {
+  .no-print,
+  .no-print * {
+    height: 0 !important;
+    display: none !important;
+  }
+  .print {
+    height: auto !important;
+    overflow: auto !important;
+    display: block !important;
+  }
+}
 .resize-horizontal {
   &_hug {
     display: inline-flex;

package/dist/css/styles/print/print.css

@@ -0,0 +1,20 @@
+@media screen {
+  .print {
+    height: auto !important;
+    overflow: auto !important;
+    display: none !important;
+  }
+}
+
+@media print {
+  .no-print,
+  .no-print * {
+    height: 0 !important;
+    display: none !important;
+  }
+  .print {
+    height: auto !important;
+    overflow: auto !important;
+    display: block !important;
+  }
+}

package/dist/types/components/Notification/stories/__mock__/index.d.ts

@@ -1,5 +1,6 @@
 declare const notificationsMock: {
     key: number;
+    type: string;
     title: string;
     desc: string;
     status: string;

package/dist/types/components/Warning/Warning.interface.d.ts

@@ -1,17 +1,17 @@
 import type { CSSProperties, ElementType } from 'react';
-import { AppearanceKeysDefault, BorderColorProps, FillProps, ItemColorProps, ShapeProps, SizePXProps, TextColorProps, TextSizeProps, TextWeightProps } from '@itcase/types';
+import { AppearanceKeysDefault, BorderColorProps, FillProps, ItemFillProps, ShapeProps, SizePXProps, TextColorProps, TextSizeProps, TextWeightProps } from '@itcase/types';
 interface WarningThemeColor {
     borderColor?: BorderColorProps;
     descriptionTextColor: TextColorProps;
     descriptionTextSize: TextSizeProps;
     fill?: FillProps;
     iconAfter: ElementType;
-    iconAfterFillIcon: ItemColorProps;
+    iconAfterFillIcon: ItemFillProps;
     iconAfterSize: SizePXProps;
     iconAfterSrc: string;
     iconBefore: ElementType;
     iconBeforeFill: FillProps;
-    iconBeforeFillIcon: ItemColorProps;
+    iconBeforeFillIcon: ItemFillProps;
     iconBeforeSize: SizePXProps;
     iconBeforeSrc: string;
     labelTextColor?: TextColorProps;
@@ -38,4 +38,4 @@ interface WarningProps {
     style?: CSSProperties;
     isSkeleton?: boolean;
 }
-export { WarningProps, WarningConfig };
+export { WarningConfig, WarningProps };

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

@@ -1,7 +1,7 @@
 import type { Id, SimpleCallback } from '@itcase/types';
-import type { CreatedNotification, NotificationsProviderProps } from './Notifications.interface';
+import type { CreatedNotification, Notification, NotificationsProviderProps } from './Notifications.interface';
 declare function NotificationsProvider(props: NotificationsProviderProps): import("react/jsx-runtime").JSX.Element;
-declare function useNotifications(): never[];
+declare function useNotifications(): Notification[];
 declare function useNotificationsAPI(): {
     hideNotifications: (targetId: Id) => void;
     showNotification: (notification: string | CreatedNotification, onClose?: SimpleCallback) => void;

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

@@ -4,34 +4,36 @@ interface Notification {
     id: Id;
     _closeTimeout?: ReturnType<typeof setTimeout>;
     after: React.ReactNode;
+    appearance?: string;
     buttonLabel: string;
     closeByTime: number | false;
     closeIcon?: string;
+    closeIconAppearance?: string;
     closeIconSrc?: string;
-    float?: boolean;
-    global?: boolean;
     status: 'error' | 'info' | 'success' | 'warning';
     text: string;
     textColor: string;
     title: string;
-    toast?: boolean;
+    type?: 'float' | 'global' | 'toast';
+    isLoading: boolean;
     onClickButton?: () => void;
     onClose?: () => void;
 }
 interface CreatedNotification {
     id?: Notification['id'];
     after?: Notification['after'];
+    appearance?: Notification['appearance'];
     buttonLabel?: Notification['buttonLabel'];
     closeByTime?: Notification['closeByTime'];
     closeIcon?: Notification['closeIcon'];
+    closeIconAppearance?: Notification['closeIconAppearance'];
     closeIconSrc?: Notification['closeIconSrc'];
-    float?: Notification['float'];
-    global?: Notification['global'];
     status?: Notification['status'];
     text?: Notification['text'];
     textColor?: Notification['textColor'];
     title?: Notification['title'];
-    toast?: Notification['toast'];
+    type?: Notification['type'];
+    isLoading?: Notification['isLoading'];
     onClickButton?: Notification['onClickButton'];
     onClose?: Notification['onClose'];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.151",
+  "version": "1.8.153",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -109,11 +109,11 @@
     "@itcase/tokens-palette": "^1.1.20",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.23.24",
+    "framer-motion": "^12.23.23",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "luxon": "^3.7.2",
-    "motion": "^12.23.24",
+    "motion": "^12.23.23",
     "rc-slider": "^11.1.9",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",