@itcase/ui 1.8.152 → 1.8.154

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/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/Radio.js

@@ -180,10 +180,10 @@ const radioConfig = {
     },
 };
 function Radio(props) {
-    const { id, className, appearance, label, desc, isDisabled, checked, tag: Tag = 'label', value, isActive, isSkeleton, onChange, } = props;
+    const { id, appearance, className, label, desc, checked, tag: Tag = 'label', value, isActive, isDisabled, isSkeleton, onChange, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, radioConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { fillCheckmarkClass, fillClass, fillHoverClass, fillRadioActiveClass, fillRadioActiveHoverClass, fillRadioClass, fillRadioHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderRadioColorClass, borderRadioColorActiveClass, borderRadioColorActiveHoverClass, borderRadioColorHoverClass, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
+    const { fillCheckmarkClass, fillClass, fillHoverClass, fillRadioActiveClass, fillRadioActiveHoverClass, fillRadioClass, fillRadioHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderRadioColorActiveClass, borderRadioColorActiveHoverClass, borderRadioColorClass, borderRadioColorHoverClass, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
     return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && 'radio_skeleton', sizeClass && `radio_size_${sizeClass}`, !checked || !isActive
             ? fillRadioClass && `radio_fill_${fillRadioClass}`
             : fillRadioActiveClass && `radio_fill_active_${fillRadioActiveClass}`, !checked || !isActive
@@ -197,7 +197,7 @@ function Radio(props) {
             ? borderRadioColorHoverClass &&
                 `radio_border-color_hover_${borderRadioColorHoverClass}`
             : borderRadioColorActiveHoverClass &&
-                `radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item'), children: [jsxRuntime.jsx("input", { id: String(id), className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, value: value, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
+                `radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item'), children: [jsxRuntime.jsx("input", { id: String(id), className: "radio__input", type: "radio", checked: checked, disabled: isDisabled && 'disabled', value: value, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
 }
 
 exports.Radio = Radio;

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/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 };