@itcase/ui 1.9.58 → 1.9.59

package/dist/cjs/components/List.js

@@ -2,24 +2,16 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('../hooks/useStyles/useStyles.js');
-var Link = require('../../Link_cjs_Dn7UhCYe.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('../context/Notifications.js');
 require('uuid');
 require('@itcase/common');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
-require('../utils/setViewportProperty.js');
-require('../hooks.js');
-require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
+require('react-inlinesvg');
 
 const listAppearanceAccent = {
     accentPrimary: {
@@ -161,21 +153,21 @@ const listConfig = {
     appearance: listAppearance};
 function List(props) {
     const { appearance, className, dataTestId, dataTour, type, style, children } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, listConfig);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, listConfig);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, bulletFillClass, bulletSizeClass, bulletTextColorClass, sizeClass, } = propsGenerator;
-    const { styles: ulStyles } = useStyles.useStyles(props);
+    const { styles: ulStyles } = primitives.useStyles(props);
     return (jsxRuntime.jsx("ul", { className: clsx(className, 'list', bulletSizeClass && `list_bullet-size_${bulletSizeClass}`, bulletFillClass && `list_bullet-fill_${bulletFillClass}`, bulletTextColorClass &&
             `list_bullet-text-color_${bulletTextColorClass}`, directionClass && `list_direction_${directionClass}`, sizeClass && `list_size_${sizeClass}`, style && `list_style_${style}`, type && `list_type_${type}`), "data-testid": dataTestId, "data-tour": dataTour, style: ulStyles, children: children }));
 }
 
 function ListItem(props) {
     const { className, dataTestId, dataTour, text, href, link, before, after, children, } = props;
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    const propsGenerator = primitives.useDevicePropsGenerator(props);
     const { fillClass, textColorClass, textStyleClass, textWeightClass } = propsGenerator;
-    const { link: linkStyles, styles: liStyles } = useStyles.useStyles(props);
+    const { link: linkStyles, styles: liStyles } = primitives.useStyles(props);
     if (link) {
-        return (jsxRuntime.jsx("li", { className: clsx(className, 'list__item', 'list__item_type_link', textStyleClass && `text text-style_${textStyleClass}`, textWeightClass && `text text-weight_${textWeightClass}`, textColorClass && `text-color_${textColorClass}`, fillClass && `fill_${fillClass}`), style: liStyles, children: jsxRuntime.jsx(Link.Link, { className: clsx('list__item-link'), href: link || href, style: linkStyles, children: children || text }) }));
+        return (jsxRuntime.jsx("li", { className: clsx(className, 'list__item', 'list__item_type_link', textStyleClass && `text text-style_${textStyleClass}`, textWeightClass && `text text-weight_${textWeightClass}`, textColorClass && `text-color_${textColorClass}`, fillClass && `fill_${fillClass}`), style: liStyles, children: jsxRuntime.jsx(primitives.Link, { className: clsx('list__item-link'), href: link || href, style: linkStyles, children: children || text }) }));
     }
     return (jsxRuntime.jsxs("li", { className: clsx(className, 'list__item', textStyleClass && `text text-style_${textStyleClass}`, textWeightClass && `text text-weight_${textWeightClass}`, textColorClass && `text-color_${textColorClass}`, fillClass && `fill_${fillClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: liStyles, children: [before, children || text, after] }));
 }

package/dist/cjs/components/Loader.js

@@ -1,26 +1,18 @@
 'use strict';
 
-var Loader = require('../../Loader_cjs_CJpdLndn.js');
+var Loader = require('../../Loader_cjs_BgiKK0BF.js');
 require('react/jsx-runtime');
 require('clsx');
-require('../../Text_cjs_erTy2pUN.js');
-require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
+require('../../primitives_cjs_DX--6Yn5.js');
 require('react');
-require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('../context/Notifications.js');
 require('uuid');
 require('@itcase/common');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
-require('../utils/setViewportProperty.js');
-require('../hooks.js');
-require('../hooks/useStyles/styleAttributes.js');
-require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
+require('react-inlinesvg');
 
 
 

package/dist/cjs/components/Logo.js

@@ -3,25 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
-var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('../hooks/useStyles/useStyles.js');
-var Link = require('../../Link_cjs_Dn7UhCYe.js');
-require('@itcase/common');
-require('../context/UrlAssetPrefix.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('../context/Notifications.js');
 require('uuid');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries/useMediaQueries.js');
+require('@itcase/common');
 require('react-responsive');
-require('../utils/setViewportProperty.js');
-require('../hooks.js');
-require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
+require('react-inlinesvg');
 
 const logoConfig = {
     appearance: undefined,
@@ -29,13 +19,13 @@ const logoConfig = {
         logoConfig.appearance = appearanceConfig;
     },
 };
-const Logo = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Logo(props, ref) {
+const Logo = primitives.urlWithAssetPrefix(React.forwardRef(function Logo(props, ref) {
     const { appearance, className, dataTestId, dataTour, href, link, isSkeleton, } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, logoConfig);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, logoConfig);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { alignClass, alignDirectionClass, alignItemsClass, src, title, alt, sizeClass, widthClass, } = propsGenerator;
-    const { styles: logo } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'logo', isSkeleton && 'logo_mode_skeleton', alignClass && `align_${alignClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignItemsClass && `logo_align-items_${alignItemsClass}`, sizeClass && `logo_size_${sizeClass}`, widthClass && `width_${widthClass}`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: logo, children: link || href ? (jsxRuntime.jsx(Link.LinkWrapper, { className: "logo__link", href: link || href, children: jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
+    const { styles: logo } = primitives.useStyles(props);
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'logo', isSkeleton && 'logo_mode_skeleton', alignClass && `align_${alignClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignItemsClass && `logo_align-items_${alignItemsClass}`, sizeClass && `logo_size_${sizeClass}`, widthClass && `width_${widthClass}`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: logo, children: link || href ? (jsxRuntime.jsx(primitives.LinkWrapper, { className: "logo__link", href: link || href, children: jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
 }));
 
 exports.Logo = Logo;

package/dist/cjs/components/MenuItem.js

@@ -3,29 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_DTvdhr8B.js');
-var Link = require('../../Link_cjs_Dn7UhCYe.js');
-var Text = require('../../Text_cjs_erTy2pUN.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('../context/Notifications.js');
 require('uuid');
 require('@itcase/common');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
-require('../utils/setViewportProperty.js');
-require('../hooks.js');
-require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
 require('react-inlinesvg');
-require('../hoc/urlWithAssetPrefix.js');
-require('../context/UrlAssetPrefix.js');
-require('../utils/mergeAppearanceKeys.js');
 
 const menuItemAppearanceAccent = {
     accentMutedPrimary: {
@@ -232,10 +218,10 @@ function MenuItem(props) {
             tooltipRef.current?.closeTooltip();
         }
     }, [showTooltip]);
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, menuItemConfig, isDisabled);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, menuItemConfig, isDisabled);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorDisabled, labelTextColorHover, labelTextSize, labelWeight, labelWrap, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, tooltipFill, tooltipShape, tooltipShapeStrength, tooltipSize, tooltipText, tooltipTextColor, tooltipTextSize, tooltipTitle, tooltipTitleTextColor, typeClass, widthClass, isSkeleton, } = propsGenerator;
-    const { styles: menuItem } = useStyles.useStyles(props);
+    const { styles: menuItem } = primitives.useStyles(props);
     return (jsxRuntime.jsxs("div", { className: clsx('menu-item', easing && `easing_${easing}`, isActive && 'menu-item_state_active', isDisabled && `menu-item_state_disabled`, directionClass && `menu-item_direction_${directionClass}`, className, (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc) &&
             'menu-item_label-icon', sizeClass && `menu-item_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, !isActive
             ? fillClass && `fill_${fillClass}`
@@ -244,7 +230,7 @@ function MenuItem(props) {
             : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass
             ? `shape-strength_${shapeStrengthClass}`
             : shapeClass === 'rounded' && 'shape-strength_default', typeClass && `menu-item_type_${typeClass}`, widthClass && `width_${widthClass}`, justifyContentClass &&
-            `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: menuItem, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxRuntime.jsxs(Link.Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, onClick: onClick, children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsxRuntime.jsx(Text.Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsxRuntime.jsx(Icon.Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", alignment: "right-center", size: tooltipSize, fill: tooltipFill, zIndex: "100", title: tooltipTitle, titleColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize, 
+            `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: menuItem, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxRuntime.jsxs(primitives.Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, onClick: onClick, children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(primitives.Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsxRuntime.jsx(primitives.Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(primitives.Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsxRuntime.jsx(primitives.Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", alignment: "right-center", size: tooltipSize, fill: tooltipFill, zIndex: "100", title: tooltipTitle, titleColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize, 
                 // centering="vertical"
                 shape: tooltipShape, shapeStrength: tooltipShapeStrength, isTooltipDisableState: true }))] }));
 }

package/dist/cjs/components/Modal.js

@@ -5,31 +5,17 @@ var React = require('react');
 var clsx = require('clsx');
 var ReactDOM = require('react-dom');
 var _default = require('@itcase/icons/default');
-var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
-var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_DTvdhr8B.js');
-var Overlay = require('../../Overlay_cjs_BK_0yTLw.js');
-var Loader = require('../../Loader_cjs_CJpdLndn.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
+var Overlay = require('../../Overlay_cjs_OmKx5lKU.js');
+var Loader = require('../../Loader_cjs_BgiKK0BF.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('../context/Notifications.js');
 require('uuid');
 require('@itcase/common');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
-require('../utils/setViewportProperty.js');
-require('../hooks.js');
-require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
 require('react-inlinesvg');
-require('../../Link_cjs_Dn7UhCYe.js');
-require('../../Text_cjs_erTy2pUN.js');
-require('../hoc/urlWithAssetPrefix.js');
-require('../context/UrlAssetPrefix.js');
 
 const modalAppearanceShape = {
     circular: {
@@ -226,12 +212,12 @@ const Modal = React.forwardRef(function Modal(props, ref) {
         };
     }, [onCloseModal, isCloseOnBlur, isOpen, modalElement]);
     React.useImperativeHandle(ref, () => ({ modalElement, openModal, closeModal, isOpen }), [isOpen, openModal, closeModal, modalElement]);
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, modalConfig, isDisabled);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, modalConfig, isDisabled);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, titleTextColor, titleTextColorHover, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWidth, titleTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, overlayFill, overlayOpacity, shapeClass, shapeStrengthClass, sizeClass, closeIconAppearance, closeIconAppearanceSize, closeIconFillSize, closeIconImage, closeIconShape, closeIconSize, } = propsGenerator;
-    const { styles: modalStyles } = useStyles.useStyles(props);
+    const { styles: modalStyles } = primitives.useStyles(props);
     return (modalElement &&
-        ReactDOM.createPortal(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-testid": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [before, (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: mergeAppearanceKeys.mergeAppearanceKeys(closeIconAppearance, closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children }), after] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
+        ReactDOM.createPortal(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-testid": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [before, (title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(primitives.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(primitives.Icon, { appearance: primitives.mergeAppearanceKeys(closeIconAppearance, closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children }), after] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: handleClickOverlay })] })) : null, 
         // A DOM element

package/dist/cjs/components/ModalSheetBottom.js

@@ -4,29 +4,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var reactModalSheet = require('react-modal-sheet');
-var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_DTvdhr8B.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('../context/Notifications.js');
 require('uuid');
 require('@itcase/common');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
-require('../utils/setViewportProperty.js');
-require('../hooks.js');
-require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
 require('react-inlinesvg');
-require('../../Link_cjs_Dn7UhCYe.js');
-require('../../Text_cjs_erTy2pUN.js');
-require('../hoc/urlWithAssetPrefix.js');
-require('../context/UrlAssetPrefix.js');
-require('../utils/mergeAppearanceKeys.js');
 
 const modalSheetBottomAppearanceSize = {
     sizeL: {
@@ -59,11 +45,11 @@ const ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
         closeModal: closeModalSheetBottom,
         isOpen: isOpen,
     }), [isOpen, openModalSheetBottom, closeModalSheetBottom]);
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, modalSheetBottomConfig, isDisabled);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, modalSheetBottomConfig, isDisabled);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { titleTextColor, titleTextColorHover, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWidth, titleTextWrap, zeroPadding, } = propsGenerator;
-    const { styles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs(reactModalSheet.Sheet, { ...props, className: "modal-sheet-bottom", "data-testid": dataTestId, "data-tour": dataTour, isOpen: isOpen, onClose: closeModalSheetBottom, children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "modal-sheet-bottom__header", children: closeButton && (jsxRuntime.jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })) }), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: "modal-sheet-bottom__content", children: jsxRuntime.jsxs("div", { className: clsx('modal-sheet-bottom__content-wrapper', zeroPadding && 'modal-sheet-bottom__content-reset-padding'), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), children] }) })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] }));
+    const { styles } = primitives.useStyles(props);
+    return (jsxRuntime.jsxs(reactModalSheet.Sheet, { ...props, className: "modal-sheet-bottom", "data-testid": dataTestId, "data-tour": dataTour, isOpen: isOpen, onClose: closeModalSheetBottom, children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "modal-sheet-bottom__header", children: closeButton && (jsxRuntime.jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })) }), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: "modal-sheet-bottom__content", children: jsxRuntime.jsxs("div", { className: clsx('modal-sheet-bottom__content-wrapper', zeroPadding && 'modal-sheet-bottom__content-reset-padding'), children: [title && (jsxRuntime.jsx(primitives.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), children] }) })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] }));
 });
 
 exports.ModalSheetBottom = ModalSheetBottom;

package/dist/cjs/components/Notification.js

@@ -2,34 +2,20 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var Button = require('../../Button_cjs_BCcz3-Fw.js');
-var Icon = require('../../Icon_cjs_DTvdhr8B.js');
-var Loader = require('../../Loader_cjs_CJpdLndn.js');
-var Text = require('../../Text_cjs_erTy2pUN.js');
-var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('../hooks/useStyles/useStyles.js');
-var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
+var Button = require('../../Button_cjs_DqbZe2Sk.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
+var Loader = require('../../Loader_cjs_BgiKK0BF.js');
 var _default = require('@itcase/icons/default');
-var Notifications = require('../context/Notifications.js');
-require('../context/UIContext.js');
 require('react');
-require('../../Link_cjs_Dn7UhCYe.js');
 require('../hooks/useHoldProgress.js');
-require('react-inlinesvg');
-require('../hoc/urlWithAssetPrefix.js');
-require('@itcase/common');
-require('../context/UrlAssetPrefix.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('../hooks.js');
-require('../hooks/useStyles/styleAttributes.js');
 require('uuid');
-require('../hooks/useMediaQueries/useMediaQueries.js');
+require('@itcase/common');
 require('react-responsive');
-require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
+require('react-inlinesvg');
 
 const notificationAppearanceDefault = {
     defaultPrimary: {
@@ -181,16 +167,16 @@ const notificationConfig = {
 };
 function Notification(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 appearanceConfig = primitives.useAppearanceConfig(appearance, notificationConfig);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'dot', shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, closeIconAppearanceSize, closeIconSrc, } = propsGenerator;
-    const { styles: notificationStyles } = useStyles.useStyles(props);
-    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-testid": 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: mergeAppearanceKeys.mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsxRuntime.jsx(Icon.Icon, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(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] }));
+    const { styles: notificationStyles } = primitives.useStyles(props);
+    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-testid": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(primitives.Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsxRuntime.jsx(primitives.Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: primitives.mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (jsxRuntime.jsx(primitives.Icon, { appearance: primitives.mergeAppearanceKeys(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 notifications = primitives.useNotifications();
+    const { hideNotifications } = primitives.useNotificationsAPI();
     const { className, dataTestId, dataTour } = props;
     return (jsxRuntime.jsx("div", { className: clsx('notification', className), "data-testid": dataTestId, "data-tour": dataTour, 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))) }) }));
 }

package/dist/cjs/components/Overlay.js

@@ -1,25 +1,18 @@
 'use strict';
 
-var Overlay = require('../../Overlay_cjs_BK_0yTLw.js');
+var Overlay = require('../../Overlay_cjs_OmKx5lKU.js');
 require('react/jsx-runtime');
 require('clsx');
-require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
+require('../../primitives_cjs_DX--6Yn5.js');
 require('react');
-require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('../context/Notifications.js');
 require('uuid');
 require('@itcase/common');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
-require('../utils/setViewportProperty.js');
-require('../hooks.js');
-require('../hooks/useStyles/styleAttributes.js');
-require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
+require('react-inlinesvg');
 
 
 

package/dist/cjs/components/Pagination.js

@@ -4,32 +4,16 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var ReactPaginate = require('react-paginate');
-var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('../hooks/useStyles/useStyles.js');
-var DropdownItem = require('../../DropdownItem_cjs_k28TIoDU.js');
-var Icon = require('../../Icon_cjs_DTvdhr8B.js');
-var Text = require('../../Text_cjs_erTy2pUN.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('../context/Notifications.js');
 require('uuid');
 require('@itcase/common');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
-require('../utils/setViewportProperty.js');
-require('../hooks.js');
-require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
-require('../../Divider_cjs_C5Ou2Kqa.js');
 require('react-inlinesvg');
-require('../../Link_cjs_Dn7UhCYe.js');
-require('../hoc/urlWithAssetPrefix.js');
-require('../context/UrlAssetPrefix.js');
-require('../utils/mergeAppearanceKeys.js');
 
 const paginationAppearanceAccent = {
     accentPrimary: {
@@ -311,20 +295,20 @@ function Pagination(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [allItemsCount]);
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, paginationConfig, isDisabled);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, paginationConfig, isDisabled);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
-    const { styles: paginationStyles } = useStyles.useStyles(props);
+    const { styles: paginationStyles } = primitives.useStyles(props);
     const minPageSize = Math.min(perPageCount, ...pageCountList);
     const isPaginationDisplayed = allItemsCount > minPageSize;
     return (isPaginationDisplayed && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
                     `fill fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass &&
                     `text text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
                     `text text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
-                    `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), nextLabel: jsxRuntime.jsx(Icon.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
-                    (() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed ?? 8, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsxRuntime.jsx(Icon.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
-                            `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
-                                        pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
+                    `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), nextLabel: jsxRuntime.jsx(primitives.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
+                    (() => (jsxRuntime.jsx(primitives.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed ?? 8, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsxRuntime.jsx(primitives.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(primitives.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
+                            `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(primitives.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(primitives.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(primitives.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(primitives.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
+                                        pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsxRuntime.jsx(primitives.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
                                         pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
 }
 

package/dist/cjs/components/Radio.js

@@ -2,24 +2,16 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text_cjs_erTy2pUN.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('../context/Notifications.js');
 require('uuid');
 require('@itcase/common');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
-require('../utils/setViewportProperty.js');
-require('../hooks.js');
-require('../hooks/useStyles/styleAttributes.js');
-require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
+require('react-inlinesvg');
 
 const radioAppearanceDefault = {
     defaultPrimary: {
@@ -180,8 +172,8 @@ const radioConfig = {
 };
 function Radio(props) {
     const { id, appearance, className, dataTestId, dataTour, 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 appearanceConfig = primitives.useAppearanceConfig(appearance, radioConfig, isDisabled);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     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}`
@@ -196,7 +188,7 @@ function Radio(props) {
             ? borderRadioColorHoverClass &&
                 `radio_border-color_hover_${borderRadioColorHoverClass}`
             : borderRadioColorActiveHoverClass &&
-                `radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), "data-testid": dataTestId, "data-tour": dataTour, 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, 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}`), "data-testid": dataTestId, "data-tour": dataTour, 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, 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(primitives.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(primitives.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
 }
 
 exports.Radio = Radio;

package/dist/cjs/components/RangeSlider.js

@@ -3,28 +3,22 @@
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var Slider = require('rc-slider');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('../hooks/useStyles/useStyles.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('../context/Notifications.js');
 require('uuid');
 require('@itcase/common');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
-require('../utils/setViewportProperty.js');
-require('../hooks.js');
-require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
+require('react-inlinesvg');
 
 function RangeSlider(props) {
     const { className, dataTestId, dataTour, min, max, disabled, pushable, range, step, value, vertical, before, after, set, onChangeSlider, children, } = props;
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    const propsGenerator = primitives.useDevicePropsGenerator(props);
     const { fillClass, fillHandleClass, fillHandleDraggingClass, fillHandleDraggingHoverClass, fillHandleHoverClass, fillRailClass, fillTrackClass, shapeClass, widthClass, } = propsGenerator;
-    const { styles: rangeSliderStyles } = useStyles.useStyles(props);
+    const { styles: rangeSliderStyles } = primitives.useStyles(props);
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'range-slider', set && `range-slider_set_${set}`, fillClass && `fill_${fillClass}`, fillTrackClass && `range-slider-track-fill_${fillTrackClass}`, fillRailClass && `range-slider-rail-fill_${fillRailClass}`, fillHandleClass && `range-slider-handle-fill_${fillHandleClass}`, fillHandleHoverClass &&
             `range-slider-handle-fill-hover_${fillHandleHoverClass}`, fillHandleDraggingClass &&
             `range-slider-handle-dragging-fill_${fillHandleDraggingClass}`, fillHandleDraggingHoverClass &&