@itcase/ui 1.9.58 → 1.9.59

package/dist/{SelectContainer_cjs_DJ_IUDjE.js → SelectContainer_cjs_CdxNPEhL.js}

@@ -5,25 +5,20 @@ var React = require('react');
 var clsx = require('clsx');
 var Select = require('react-select');
 var CreatableSelect = require('react-select/creatable');
-var Group = require('./Group_cjs_BLGSskb3.js');
-var Text = require('./Text_cjs_erTy2pUN.js');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var Group = require('./Group_cjs_CvX0cIz2.js');
+var primitives = require('./primitives_cjs_DX--6Yn5.js');
 var _default = require('@itcase/icons/default');
-var Icon = require('./Icon_cjs_DTvdhr8B.js');
-var Loader = require('./Loader_cjs_CJpdLndn.js');
-var mergeAppearanceKeys = require('./cjs/utils/mergeAppearanceKeys.js');
-var Divider = require('./Divider_cjs_C5Ou2Kqa.js');
+var Loader = require('./Loader_cjs_BgiKK0BF.js');
 
 const SelectClearIndicator = (props) => {
     const { children } = props;
     const { clearIcon, clearIconFill } = props.selectProps;
-    return (jsxRuntime.jsx(Select.components.ClearIndicator, { ...props, children: clearIcon ? (jsxRuntime.jsx(Icon.Icon, { iconFill: clearIconFill, SvgImage: clearIcon })) : (children) }));
+    return (jsxRuntime.jsx(Select.components.ClearIndicator, { ...props, children: clearIcon ? (jsxRuntime.jsx(primitives.Icon, { iconFill: clearIconFill, SvgImage: clearIcon })) : (children) }));
 };
 
 const SelectLoadingMessage = (props) => {
     const { loadingMessageText, loadingMessageTextColor, loadingMessageTextSize, } = props.selectProps;
-    return (jsxRuntime.jsx(Group.Group, { textAlign: "center", children: jsxRuntime.jsx(Text.Text, { size: loadingMessageTextSize, textColor: loadingMessageTextColor, children: loadingMessageText }) }));
+    return (jsxRuntime.jsx(Group.Group, { textAlign: "center", children: jsxRuntime.jsx(primitives.Text, { size: loadingMessageTextSize, textColor: loadingMessageTextColor, children: loadingMessageText }) }));
 };
 
 const selectAppearanceDefault = {
@@ -380,12 +375,12 @@ const SelectControl = (props) => {
 const SelectDropdownIndicator = (props) => {
     const { children } = props;
     const { dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, } = props.selectProps;
-    return (jsxRuntime.jsx(Select.components.DropdownIndicator, { ...props, children: dropdownIcon ? (jsxRuntime.jsx(Icon.Icon, { fillHover: dropdownFillHover, iconFill: dropdownIconFill, shape: dropdownIconShape, SvgImage: dropdownIcon })) : (children) }));
+    return (jsxRuntime.jsx(Select.components.DropdownIndicator, { ...props, children: dropdownIcon ? (jsxRuntime.jsx(primitives.Icon, { fillHover: dropdownFillHover, iconFill: dropdownIconFill, shape: dropdownIconShape, SvgImage: dropdownIcon })) : (children) }));
 };
 
 const SelectGroupHeading = (props) => {
     const { groupFill, groupTextColor, groupTextSize, groupTextWeight } = props.selectProps;
-    return (jsxRuntime.jsx(Select.components.GroupHeading, { ...props, className: clsx('select__menu-group-heading', groupFill && `fill_${groupFill}`), children: jsxRuntime.jsx(Text.Text, { size: groupTextSize, textColor: groupTextColor, textWeight: groupTextWeight, children: props.data.label }) }));
+    return (jsxRuntime.jsx(Select.components.GroupHeading, { ...props, className: clsx('select__menu-group-heading', groupFill && `fill_${groupFill}`), children: jsxRuntime.jsx(primitives.Text, { size: groupTextSize, textColor: groupTextColor, textWeight: groupTextWeight, children: props.data.label }) }));
 };
 
 const SelectIndicatorsContainer = (props) => {
@@ -393,7 +388,7 @@ const SelectIndicatorsContainer = (props) => {
     return (jsxRuntime.jsxs(Select.components.IndicatorsContainer, { ...props, children: [showBadge &&
                 value &&
                 // @ts-expect-error
-                value?.length > 0 ? (jsxRuntime.jsx(Icon.Badge, { appearance: badgeAppearance, size: badgeSize, textSize: badgeTextSize, 
+                value?.length > 0 ? (jsxRuntime.jsx(primitives.Badge, { appearance: badgeAppearance, size: badgeSize, textSize: badgeTextSize, 
                 // @ts-expect-error
                 value: value.length.toString() })) : null, props.children] }));
 };
@@ -416,7 +411,7 @@ const SelectMenu = (props) => {
 const SelectOverflowBadge = (props) => {
     const { badgeAppearance, badgeAppearanceSize, overflowItemsList } = props;
     const label = `+${overflowItemsList.length}`;
-    return (jsxRuntime.jsx(Icon.Badge, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: "select__multi-value-badge", value: label }));
+    return (jsxRuntime.jsx(primitives.Badge, { appearance: primitives.mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: "select__multi-value-badge", value: label }));
 };
 
 const SelectMultiValue = (props) => {
@@ -441,17 +436,17 @@ const SelectMultiValueContainer = (props) => {
 
 const SelectMultiValueLabel = (props) => {
     const { multipleItemTextColor, multipleItemTextSize } = props.selectProps;
-    return (jsxRuntime.jsx(Select.components.MultiValueLabel, { ...props, children: props.data && (jsxRuntime.jsx(Text.Text, { size: multipleItemTextSize, textColor: multipleItemTextColor, children: props.data.label })) }));
+    return (jsxRuntime.jsx(Select.components.MultiValueLabel, { ...props, children: props.data && (jsxRuntime.jsx(primitives.Text, { size: multipleItemTextSize, textColor: multipleItemTextColor, children: props.data.label })) }));
 };
 
 const SelectMultiValueRemove = (props) => {
     const { multipleItemIcon, multipleItemIconFill } = props.selectProps;
-    return (jsxRuntime.jsx(Select.components.MultiValueRemove, { ...props, children: jsxRuntime.jsx(Icon.Icon, { iconFill: multipleItemIconFill, SvgImage: multipleItemIcon }) }));
+    return (jsxRuntime.jsx(Select.components.MultiValueRemove, { ...props, children: jsxRuntime.jsx(primitives.Icon, { iconFill: multipleItemIconFill, SvgImage: multipleItemIcon }) }));
 };
 
 const SelectNoOptions = (props) => {
     const { inputValue, noOptionsSearchText, noOptionsText, noOptionsTextColor, noOptionsTextSize, optionFill, } = props.selectProps;
-    return (jsxRuntime.jsx(Select.components.NoOptionsMessage, { ...props, className: clsx(optionFill && `fill_${optionFill}`), children: jsxRuntime.jsx(Group.Group, { textAlign: "center", children: jsxRuntime.jsx(Text.Text, { size: noOptionsTextSize, textColor: noOptionsTextColor, children: inputValue && noOptionsSearchText
+    return (jsxRuntime.jsx(Select.components.NoOptionsMessage, { ...props, className: clsx(optionFill && `fill_${optionFill}`), children: jsxRuntime.jsx(Group.Group, { textAlign: "center", children: jsxRuntime.jsx(primitives.Text, { size: noOptionsTextSize, textColor: noOptionsTextColor, children: inputValue && noOptionsSearchText
                     ? noOptionsSearchText
                     : noOptionsText }) }) }));
 };
@@ -473,12 +468,12 @@ const SelectOption = (props) => {
             !props.isSelected &&
             !props.isDisabled &&
             optionFillHover &&
-            `fill_hover_${optionFillHover}`, isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionBorder && `border-color_${optionBorder}`, optionBorderType && `border_type_${optionBorderType}`, optionShape && `shape_${optionShape}`, optionShapeStrength && `shape-strength_${optionShapeStrength}`), children: [optionBefore, jsxRuntime.jsx(Text.Text, { className: "select__menu-list-item_option", size: optionTextSize, textColor: optionTextColor, textColorActive: optionTextColorActive, textColorDisabled: optionTextColorDisabled, isActive: props.isSelected || isSelected, isDisabled: props.isDisabled, children: label }), (isSelected || props.isSelected) && (jsxRuntime.jsx("div", { className: "select__menu-list-item_selected", children: jsxRuntime.jsx(Icon.Icon, { iconFill: optionSelectedIconFillIcon, iconSize: optionSelectedIconSize, imageSrc: optionSelectedIconSrc, SvgImage: optionSelectedIcon }) })), optionAfter, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+            `fill_hover_${optionFillHover}`, isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionBorder && `border-color_${optionBorder}`, optionBorderType && `border_type_${optionBorderType}`, optionShape && `shape_${optionShape}`, optionShapeStrength && `shape-strength_${optionShapeStrength}`), children: [optionBefore, jsxRuntime.jsx(primitives.Text, { className: "select__menu-list-item_option", size: optionTextSize, textColor: optionTextColor, textColorActive: optionTextColorActive, textColorDisabled: optionTextColorDisabled, isActive: props.isSelected || isSelected, isDisabled: props.isDisabled, children: label }), (isSelected || props.isSelected) && (jsxRuntime.jsx("div", { className: "select__menu-list-item_selected", children: jsxRuntime.jsx(primitives.Icon, { iconFill: optionSelectedIconFillIcon, iconSize: optionSelectedIconSize, imageSrc: optionSelectedIconSrc, SvgImage: optionSelectedIcon }) })), optionAfter, showDivider && (jsxRuntime.jsx(primitives.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
 };
 
 const SelectPlaceholder = (props) => {
     const { placeholderTextColor, placeholderTextSize } = props.selectProps;
-    return (jsxRuntime.jsx(Select.components.Placeholder, { ...props, children: jsxRuntime.jsx(Text.Text, { size: placeholderTextSize, textColor: placeholderTextColor, children: props.children }) }));
+    return (jsxRuntime.jsx(Select.components.Placeholder, { ...props, children: jsxRuntime.jsx(primitives.Text, { size: placeholderTextSize, textColor: placeholderTextColor, children: props.children }) }));
 };
 
 const SelectSingleValue = (props) => {
@@ -486,7 +481,7 @@ const SelectSingleValue = (props) => {
     const { inputTextColor, inputTextSize } = props.selectProps;
     const optionBefore = data.optionBefore;
     const optionAfter = data.optionBefore;
-    return (jsxRuntime.jsxs(Select.components.SingleValue, { ...props, children: [data && optionBefore, jsxRuntime.jsx(Text.Text, { size: inputTextSize, textColor: inputTextColor, textTruncate: true, children: children }), data && optionAfter] }));
+    return (jsxRuntime.jsxs(Select.components.SingleValue, { ...props, children: [data && optionBefore, jsxRuntime.jsx(primitives.Text, { size: inputTextSize, textColor: inputTextColor, textTruncate: true, children: children }), data && optionAfter] }));
 };
 
 const SelectValueContainer = (props) => {
@@ -542,8 +537,8 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
             return () => { };
         },
     }), [minWidth, width]);
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, selectConfig, isDisabled);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, selectConfig, isDisabled);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, elevation, badgeAppearance, badgeAppearanceSize, badgeTextSize, clearIcon, clearIconFill, dividerFill, dividerSize, dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, groupFillClass, groupTextColorClass, groupTextSizeClass, groupTextWeightClass, inputCaretColorClass, inputTextColorClass, inputTextSizeClass, loaderAppearance, loadingMessageTextColor, loadingMessageTextSize, menuFillClass, multipleItemFill, multipleItemFillHover, multipleItemIcon, multipleItemIconFill, multipleItemShapeRadius, multipleItemTextColorClass, multipleItemTextSizeClass, noOptionsTextColorClass, noOptionsTextSizeClass, optionBorderClass, optionBorderTypeClass, optionFillActiveClass, optionFillActiveDisabledClass, optionFillActiveHoverClass, optionFillClass, optionFillDisabledClass, optionFillHoverClass, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionTextColorActiveClass, optionTextColorClass, optionTextColorDisabled, optionTextSizeClass, placeholderTextColor, placeholderTextSize, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     return (jsxRuntime.jsx(SelectComponent, { className: clsx(className, 'select', isMulti && 'select_multi', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, sizeClass && `select_size_${sizeClass}`, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`, widthClass && `select_width_${widthClass}`), ref: selectRef, elevation: elevation, badgeAppearance: badgeAppearance, badgeAppearanceSize: badgeAppearanceSize, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
             IndicatorSeparator: () => null,

package/dist/{SelectContainer_es_BYBGTq-u.js → SelectContainer_es_BQNyIzfX.js}

@@ -3,15 +3,10 @@ import React, { useRef, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import Select, { components } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
-import { G as Group } from './Group_es_CP-uIchb.js';
-import { T as Text } from './Text_es_DVNvU0m0.js';
-import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { G as Group } from './Group_es_BgJhtaOv.js';
+import { I as Icon, b as Text, B as Badge, m as mergeAppearanceKeys, D as Divider, d as useAppearanceConfig, a as useDevicePropsGenerator } from './primitives_es_BNlMaZfZ.js';
 import { icons12, icons16, icons14, icons24 } from '@itcase/icons/default';
-import { I as Icon, B as Badge } from './Icon_es_kewxGRUB.js';
-import { L as Loader } from './Loader_es_CqlLujBJ.js';
-import { mergeAppearanceKeys } from './utils/mergeAppearanceKeys.js';
-import { D as Divider } from './Divider_es_D2snK_vn.js';
+import { L as Loader } from './Loader_es_DzjoV2MF.js';
 
 const SelectClearIndicator = (props) => {
     const { children } = props;

package/dist/cjs/components/Accordion.js

@@ -4,30 +4,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var castArray = require('lodash/castArray');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('../hooks/useStyles/useStyles.js');
-var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
-var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var Icon = require('../../Icon_cjs_DTvdhr8B.js');
-var Divider = require('../../Divider_cjs_C5Ou2Kqa.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/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('../hoc/urlWithAssetPrefix.js');
-require('../context/UrlAssetPrefix.js');
 
 const accordionAppearanceSize = {
     sizeXXL: {
@@ -153,11 +138,11 @@ function AccordionItem(props) {
         };
         onClick && onClick(thisItemData);
     }, [id, title, content, isExpanded, onClick]);
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, accordionItemConfig);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, accordionItemConfig);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, titleBorderColorClass, titleFillClass, titleFillHoverClass, titleTextColor, titleTextSize, titleTextWeight, titleWidthClass, borderColorClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, contentTextColor, contentTextSize, contentTextWeight, dividerDirection, dividerFill, dividerSize, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, shapeStrengthClass, showDivider, sizeClass, zeroGap, zeroPadding, } = propsGenerator;
-    const { styles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, zeroPadding && 'accordion-item_zero-padding', zeroGap && 'accordion-item_zero-gap', borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `accordion-item_size_${sizeClass}`, isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsxs("div", { className: clsx('accordion-item__header', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass && `border-color_${titleBorderColorClass}`, titleFillClass && `fill_${titleFillClass}`, titleFillHoverClass && `fill_hover_${titleFillHoverClass}`, titleWidthClass && `width_${titleWidthClass}`, onClick && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsxs("div", { className: "accordion-item__action", children: [badgeValue && (jsxRuntime.jsx(Icon.Badge, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: "accordion-item__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (jsxRuntime.jsxs("div", { className: clsx('accordion-item__content'), children: [content && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content-inner', fillClass && `fill_${fillClass}`), children: jsxRuntime.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
+    const { styles } = primitives.useStyles(props);
+    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, zeroPadding && 'accordion-item_zero-padding', zeroGap && 'accordion-item_zero-gap', borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `accordion-item_size_${sizeClass}`, isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsxs("div", { className: clsx('accordion-item__header', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), children: [jsxRuntime.jsx(primitives.Text, { className: clsx('accordion-item__title', titleBorderColorClass && `border-color_${titleBorderColorClass}`, titleFillClass && `fill_${titleFillClass}`, titleFillHoverClass && `fill_hover_${titleFillHoverClass}`, titleWidthClass && `width_${titleWidthClass}`, onClick && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsxs("div", { className: "accordion-item__action", children: [badgeValue && (jsxRuntime.jsx(primitives.Badge, { appearance: primitives.mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: "accordion-item__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(primitives.Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (jsxRuntime.jsx(primitives.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (jsxRuntime.jsxs("div", { className: clsx('accordion-item__content'), children: [content && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content-inner', fillClass && `fill_${fillClass}`), children: jsxRuntime.jsx(primitives.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
 }
 
 function Accordion(props) {
@@ -204,9 +189,9 @@ function Accordion(props) {
         }
         return [];
     }, [items, children, appearance, expandedItems, onClickAccordionItem]);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    const propsGenerator = primitives.useDevicePropsGenerator(props);
     const { fillClass, borderColorClass, shapeClass, shapeStrengthClass, widthClass, } = propsGenerator;
-    const { styles: accordionStyles } = useStyles.useStyles(props);
+    const { styles: accordionStyles } = primitives.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'accordion', borderColorClass && `border-color_${borderColorClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: accordionStyles, children: accordionItemsList }));
 }
 

package/dist/cjs/components/Avatar.js

@@ -1,33 +1,19 @@
 'use strict';
 
-var Avatar = require('../../Avatar_cjs_BIHJrAbQ.js');
+var Avatar = require('../../Avatar_cjs_BcCK-1qn.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+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('../../Icon_cjs_DTvdhr8B.js');
-require('react-inlinesvg');
-require('../../Link_cjs_Dn7UhCYe.js');
-require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Text_cjs_erTy2pUN.js');
-require('../hoc/urlWithAssetPrefix.js');
-require('../context/UrlAssetPrefix.js');
-require('../utils/mergeAppearanceKeys.js');
-require('../../Image_cjs_Hvjp2QDB.js');
+require('react-inlinesvg');
+require('../../Image_cjs_BdHJJUTP.js');
 
 
 

package/dist/cjs/components/AvatarStack.js

@@ -2,33 +2,19 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-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 Avatar = require('../../Avatar_cjs_BIHJrAbQ.js');
-var Group = require('../../Group_cjs_BLGSskb3.js');
-var Text = require('../../Text_cjs_erTy2pUN.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
+var Avatar = require('../../Avatar_cjs_BcCK-1qn.js');
+var Group = require('../../Group_cjs_CvX0cIz2.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('../../Icon_cjs_DTvdhr8B.js');
 require('react-inlinesvg');
-require('../../Link_cjs_Dn7UhCYe.js');
-require('../hoc/urlWithAssetPrefix.js');
-require('../context/UrlAssetPrefix.js');
-require('../../Image_cjs_Hvjp2QDB.js');
+require('../../Image_cjs_BdHJJUTP.js');
 
 const avatarStackAppearanceSize = {
     size16: {
@@ -59,11 +45,11 @@ const avatarStackConfig = {
     appearance: avatarStackAppearance};
 function AvatarStack(props) {
     const { appearance, className, direction = 'horizontal', avatarAppearance, avatarsList, length = 3, isSkeleton, } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, avatarStackConfig);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, avatarStackConfig);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { size } = propsGenerator;
-    const { styles: avatarStackStyles } = useStyles.useStyles(props);
-    return (avatarsList.length && (jsxRuntime.jsxs("div", { className: clsx(className, 'avatar-stack', direction && `group_direction_${direction}`, size && `avatar-stack_size_${size}`, isSkeleton && `avatar-stack-skeleton`), style: avatarStackStyles, children: [avatarsList.slice(0, length).map((item) => (jsxRuntime.jsx(Avatar.Avatar, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(avatarAppearance, `size${size}`), className: "avatar-stack__item", src: item.src, textSize: "l", firstName: item.firstName, secondName: item.lastName, shape: "circular" }, item.id))), avatarsList.length > length && (jsxRuntime.jsx(Group.Group, { className: "avatar-stack__item avatar-stack__item-text", width: `${size}px`, height: `${size}px`, fill: "surfaceSecondary", children: jsxRuntime.jsxs(Text.Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
+    const { styles: avatarStackStyles } = primitives.useStyles(props);
+    return (avatarsList.length && (jsxRuntime.jsxs("div", { className: clsx(className, 'avatar-stack', direction && `group_direction_${direction}`, size && `avatar-stack_size_${size}`, isSkeleton && `avatar-stack-skeleton`), style: avatarStackStyles, children: [avatarsList.slice(0, length).map((item) => (jsxRuntime.jsx(Avatar.Avatar, { appearance: primitives.mergeAppearanceKeys(avatarAppearance, `size${size}`), className: "avatar-stack__item", src: item.src, textSize: "l", firstName: item.firstName, secondName: item.lastName, shape: "circular" }, item.id))), avatarsList.length > length && (jsxRuntime.jsx(Group.Group, { className: "avatar-stack__item avatar-stack__item-text", width: `${size}px`, height: `${size}px`, fill: "surfaceSecondary", children: jsxRuntime.jsxs(primitives.Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
 }
 
 exports.AvatarStack = AvatarStack;

package/dist/cjs/components/Badge.js

@@ -1,34 +1,20 @@
 'use strict';
 
-var Icon = require('../../Icon_cjs_DTvdhr8B.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('react-inlinesvg');
-require('../../Link_cjs_Dn7UhCYe.js');
-require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-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('../../Text_cjs_erTy2pUN.js');
-require('../hoc/urlWithAssetPrefix.js');
-require('../context/UrlAssetPrefix.js');
-require('../utils/mergeAppearanceKeys.js');
+require('react-inlinesvg');
 
 
 
-exports.Badge = Icon.Badge;
-exports.badgeAppearance = Icon.badgeAppearance;
-exports.badgeConfig = Icon.badgeConfig;
+exports.Badge = primitives.Badge;
+exports.badgeAppearance = primitives.badgeAppearance;
+exports.badgeConfig = primitives.badgeConfig;

package/dist/cjs/components/Breadcrumbs.js

@@ -3,30 +3,16 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('../hooks/useStyles/useStyles.js');
-var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.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');
 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('react-inlinesvg');
-require('../hoc/urlWithAssetPrefix.js');
-require('../context/UrlAssetPrefix.js');
-require('../utils/mergeAppearanceKeys.js');
 
 const breadcrumbsAppearanceAccent = {
     accentPrimary: {
@@ -127,16 +113,16 @@ const breadcrumbsConfig = {
     appearance: breadcrumbsAppearance};
 function BreadcrumbsItem(props) {
     const { appearance, className, dataTestId, dataTour, href, isActive, isSkeleton, onClick, children, } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, breadcrumbsConfig);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, breadcrumbsConfig);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, labelTextColor, labelTextColorHover, labelTextSize, borderColorClass, text, cursor, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, sizeClass, underlineClass, } = propsGenerator;
-    const { styles: itemStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx(className, 'breadcrumbs__item', borderColorClass && `border-color_${borderColorClass}`, isActive && 'breadcrumbs__item_current', sizeClass && `breadcrumbs__item_size_${sizeClass}`, shapeClass && `breadcrumbs__item_shape_${shapeClass}`, fillClass && `fill_${fillClass}`, underlineClass && `text-decoration_${underlineClass}`, isSkeleton && `breadcrumbs__item_skeleton`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, href: href, LinkComponent: "div", style: itemStyles, onClick: onClick, children: [jsxRuntime.jsx(Text.Text, { className: "breadcrumbs__item-text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, children: text || children }), !isActive && (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('breadcrumbs__item-icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }));
+    const { styles: itemStyles } = primitives.useStyles(props);
+    return (jsxRuntime.jsxs(primitives.LinkWrapper, { className: clsx(className, 'breadcrumbs__item', borderColorClass && `border-color_${borderColorClass}`, isActive && 'breadcrumbs__item_current', sizeClass && `breadcrumbs__item_size_${sizeClass}`, shapeClass && `breadcrumbs__item_shape_${shapeClass}`, fillClass && `fill_${fillClass}`, underlineClass && `text-decoration_${underlineClass}`, isSkeleton && `breadcrumbs__item_skeleton`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, href: href, LinkComponent: "div", style: itemStyles, onClick: onClick, children: [jsxRuntime.jsx(primitives.Text, { className: "breadcrumbs__item-text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, children: text || children }), !isActive && (icon || iconSrc) && (jsxRuntime.jsx(primitives.Icon, { className: clsx('breadcrumbs__item-icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }));
 }
 
 function Breadcrumbs(props) {
     const { appearance, className, dataTestId, dataTour, breadcrumbsList, isSkeleton, children, } = props;
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    const propsGenerator = primitives.useDevicePropsGenerator(props);
     const { directionClass = 'horizontal', widthClass } = propsGenerator;
     const breadcrumbsItemsList = React.useMemo(() => {
         if (breadcrumbsList) {
@@ -147,7 +133,7 @@ function Breadcrumbs(props) {
         }
         return [];
     }, [breadcrumbsList, children, appearance, isSkeleton]);
-    const { styles: breadcrumbsStyles } = useStyles.useStyles(props);
+    const { styles: breadcrumbsStyles } = primitives.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'breadcrumbs', widthClass && `width_${widthClass}`, directionClass && `direction_${directionClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: breadcrumbsStyles, children: breadcrumbsItemsList }));
 }
 

package/dist/cjs/components/Button.js

@@ -1,33 +1,19 @@
 'use strict';
 
-var Button = require('../../Button_cjs_BCcz3-Fw.js');
+var Button = require('../../Button_cjs_DqbZe2Sk.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('../../Icon_cjs_DTvdhr8B.js');
-require('react-inlinesvg');
-require('../../Link_cjs_Dn7UhCYe.js');
-require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+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('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Text_cjs_erTy2pUN.js');
-require('../hoc/urlWithAssetPrefix.js');
-require('../context/UrlAssetPrefix.js');
-require('../utils/mergeAppearanceKeys.js');
-require('../../Loader_cjs_CJpdLndn.js');
+require('react-inlinesvg');
+require('../../Loader_cjs_BgiKK0BF.js');
 require('../hooks/useHoldProgress.js');
 
 

package/dist/cjs/components/Cell.js

@@ -2,31 +2,17 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-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 Label = require('../../Label_cjs_RI5tFcPt.js');
-var Text = require('../../Text_cjs_erTy2pUN.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
+var Label = require('../../Label_cjs_BYjXyKWj.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');
-require('../../Link_cjs_Dn7UhCYe.js');
-require('../hoc/urlWithAssetPrefix.js');
-require('../context/UrlAssetPrefix.js');
 
 const cellAppearanceSize = {
     sizeXL: {
@@ -166,10 +152,10 @@ const cellConfig = {
 };
 function Cell(props) {
     const { appearance, className, dataTestId, dataTour, title, titleIcon, titleLabel, titleTag, showTitleLabel, showValueLabel, value, valueIcon, valueTag, before, after, isActive, isEqual, isSameWidth, onClick, onMouseEnter, } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, cellConfig);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, cellConfig);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, titleIconFill, titleIconFillHover, titleIconFillSize, titleIconItemFill, titleIconShape, titleIconSrc, titleLabelAppearance, titleLabelAppearanceSize, titleLabelShape, titleLabelSize, titleLabelTextSize, titleTextColor, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWrap, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, reverseClass, shapeClass, sizeClass, valueIconFill, valueIconFillHover, valueIconFillSize, valueIconItemFill, valueIconShape, valueIconSrc, valueLabel, valueLabelAppearance, valueLabelAppearanceSize, valueLabelShape, valueLabelSize, valueLabelTextSize, valueTextAlign, valueTextColor, valueTextSize, valueTextTruncate, valueTextWeight, valueTextWrap, widthClass, zeroGap, zeroPadding, } = propsGenerator;
-    const { data: dataStyles, styles: cellStyles } = useStyles.useStyles(props);
+    const { data: dataStyles, styles: cellStyles } = primitives.useStyles(props);
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'cell', sizeClass && `cell_size_${sizeClass}`, !isActive
             ? fillClass && `fill_${fillClass}`
             : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
@@ -181,7 +167,7 @@ function Cell(props) {
             ? borderColorHoverClass &&
                 `border-color_hover_${borderColorHoverClass}`
             : borderColorActiveHoverClass &&
-                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), "data-testid": dataTestId, "data-tour": dataTour, style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsxRuntime.jsx(Label.Label, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(titleLabelAppearance, titleLabelAppearanceSize), className: "cell__title-label", size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsxRuntime.jsx(Label.Label, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(valueLabelAppearance, valueLabelAppearanceSize), className: "cell__value-label", size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
+                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), "data-testid": dataTestId, "data-tour": dataTour, style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(primitives.Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(primitives.Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsxRuntime.jsx(Label.Label, { appearance: primitives.mergeAppearanceKeys(titleLabelAppearance, titleLabelAppearanceSize), className: "cell__title-label", size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(primitives.Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(primitives.Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsxRuntime.jsx(Label.Label, { appearance: primitives.mergeAppearanceKeys(valueLabelAppearance, valueLabelAppearanceSize), className: "cell__value-label", size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
 }
 
 exports.Cell = Cell;

package/dist/cjs/components/Checkbox.js

@@ -2,24 +2,16 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var Text = require('../../Text_cjs_erTy2pUN.js');
-var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-require('../hooks/useStyles/useStyles.js');
+var primitives = require('../../primitives_cjs_DX--6Yn5.js');
 require('react');
 require('lodash/camelCase');
-require('lodash/maxBy');
+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/castArray');
+require('lodash/maxBy');
+require('react-inlinesvg');
 
 const checkboxAppearanceDefault = {
     defaultPrimary: {
@@ -175,8 +167,8 @@ const checkboxConfig = {
 };
 function Checkbox(props) {
     const { id, appearance, className, dataTestId, dataTour, label, desc, checked, disabled, indeterminate, Tag = 'label', value, before, after, isActive, isChecked, isDisabled, isSkeleton, onBlur, onChange, onFocus, } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, checkboxConfig, isDisabled);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, checkboxConfig, isDisabled);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { fillCheckboxActiveClass, fillCheckboxActiveHoverClass, fillCheckboxClass, fillCheckboxHoverClass, fillCheckmarkClass, fillClass, fillHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass, borderColorCheckboxClass, borderColorCheckboxHoverClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, sizeClass && `checkbox_size_${sizeClass}`, !checked
             ? fillCheckboxClass && `checkbox_fill_${fillCheckboxClass}`
@@ -197,7 +189,7 @@ function Checkbox(props) {
                             ? 'checkbox__state-checkmark'
                             : 'checkbox__state-indeterminate', (checked || indeterminate) &&
                             fillCheckmarkClass &&
-                            `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
+                            `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsxRuntime.jsx(primitives.Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(primitives.Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
 }
 
 exports.Checkbox = Checkbox;