@itcase/ui 1.9.57 → 1.9.59

package/dist/{Avatar_cjs_BIHJrAbQ.js → Avatar_cjs_BcCK-1qn.js}

@@ -3,11 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Icon = require('./Icon_cjs_DTvdhr8B.js');
-var Image = require('./Image_cjs_Hvjp2QDB.js');
-var Text = require('./Text_cjs_erTy2pUN.js');
+var primitives = require('./primitives_cjs_DX--6Yn5.js');
+var Image = require('./Image_cjs_BdHJJUTP.js');
 
 const avatarAppearanceDefault = {
     surfacePrimary: {
@@ -156,10 +153,10 @@ function Avatar(props) {
         const secondChar = (secondName?.[0] || '').toUpperCase();
         return `${firstChar}${secondChar}`;
     }, [firstName, secondName]);
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, avatarConfig);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, avatarConfig);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { size, fillClass, fillHoverClass, textColor, textSize, textWeight, badge, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, icon, iconFill, iconFillHover, iconFillSize, iconItemFill, iconShape, iconSize, iconSrc, placeholderUrl, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', size && `avatar_size_${sizeClass}`, (badgeValue || badgeAppearance || badgeSize) && 'avatar_status', isSkeleton && `avatar_skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId, "data-tour": dataTour, onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: clsx('avatar__image', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), src: src, placeholderUrl: placeholderUrl })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__text", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars || count })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (badge || badgeValue) && (jsxRuntime.jsx(Icon.Badge, { appearance: badgeAppearance, className: "avatar__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), after] }) }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', size && `avatar_size_${sizeClass}`, (badgeValue || badgeAppearance || badgeSize) && 'avatar_status', isSkeleton && `avatar_skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId, "data-tour": dataTour, onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: clsx('avatar__image', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), src: src, placeholderUrl: placeholderUrl })) : (jsxRuntime.jsx(primitives.Text, { className: "avatar__text", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars || count })), (icon || iconSrc) && (jsxRuntime.jsx(primitives.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (badge || badgeValue) && (jsxRuntime.jsx(primitives.Badge, { appearance: badgeAppearance, className: "avatar__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), after] }) }));
 }
 
 exports.Avatar = Avatar;

package/dist/{Avatar_es_CtP68jPM.js → Avatar_es_Dn6PILdH.js}

@@ -1,11 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
-import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon, B as Badge } from './Icon_es_kewxGRUB.js';
-import { I as Image } from './Image_es_DpOCNWpn.js';
-import { T as Text } from './Text_es_DVNvU0m0.js';
+import { d as useAppearanceConfig, a as useDevicePropsGenerator, b as Text, I as Icon, B as Badge } from './primitives_es_BNlMaZfZ.js';
+import { I as Image } from './Image_es_5EyRL35j.js';
 
 const avatarAppearanceDefault = {
     surfacePrimary: {

package/dist/{Button_cjs_BCcz3-Fw.js → Button_cjs_DqbZe2Sk.js}

@@ -3,15 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var Icon = require('./Icon_cjs_DTvdhr8B.js');
-var Link = require('./Link_cjs_Dn7UhCYe.js');
-var Loader = require('./Loader_cjs_CJpdLndn.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 primitives = require('./primitives_cjs_DX--6Yn5.js');
+var Loader = require('./Loader_cjs_BgiKK0BF.js');
 var useHoldProgress = require('./cjs/hooks/useHoldProgress.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var mergeAppearanceKeys = require('./cjs/utils/mergeAppearanceKeys.js');
 
 const buttonAppearanceAccent = {
     accentMutedPrimary: {
@@ -391,10 +385,10 @@ const buttonConfig = {
 };
 const Button = React.forwardRef(function Button(props, ref) {
     const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, tooltip, before, after, isDisabled, isHolding, isLoading = false, onClick, onHoldComplete, onMouseDown, children, } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, buttonConfig, isDisabled);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, buttonConfig, isDisabled);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextTruncate, labelTextWeight, labelTextWidth, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, icon, iconAfter, iconAfterAppearance, iconAfterAppearanceSize, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconAppearance, iconAppearanceSize, iconBefore, iconBeforeAppearance, iconBeforeAppearanceSize, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'dot', shapeClass, shapeStrengthClass, sizeClass, widthClass, zeroGap, zeroPadding, isSkeleton, } = propsGenerator;
-    const { label: labelStyles, styles: buttonStyles } = useStyles.useStyles(props);
+    const { label: labelStyles, styles: buttonStyles } = primitives.useStyles(props);
     const { holdState, onHoldEnd, onHoldStart } = useHoldProgress.useHoldProgress({
         holdDurationMs: 500, // hardcoded in button.css
         onHoldComplete: onHoldComplete,
@@ -407,13 +401,13 @@ const Button = React.forwardRef(function Button(props, ref) {
         iconBefore ||
         iconBeforeSrc ||
         iconSrc;
-    return (jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx(className, 'button', label && buttonTypeClass
+    return (jsxRuntime.jsxs(primitives.LinkWrapper, { className: clsx(className, 'button', label && buttonTypeClass
             ? 'button_type_default'
             : label
                 ? 'button_type_label'
                 : buttonTypeClass
                     ? 'button_type_icon'
-                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && 'button_skeleton', isHolding && 'button_holding', holdState && `button_state_${holdState}`), type: htmlType, title: tooltip, "data-testid": dataTestId, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onHoldEnd, onPointerDown: onHoldStart, onPointerLeave: onHoldEnd, onPointerUp: onHoldEnd, children: [isHolding && (jsxRuntime.jsx("div", { className: clsx('button__indication', `button__indication_${holdState}`), children: jsxRuntime.jsx("div", { className: "button__indication-item", children: "\u00A0" }) })), jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] })] }));
+                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && 'button_skeleton', isHolding && 'button_holding', holdState && `button_state_${holdState}`), type: htmlType, title: tooltip, "data-testid": dataTestId, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onHoldEnd, onPointerDown: onHoldStart, onPointerLeave: onHoldEnd, onPointerUp: onHoldEnd, children: [isHolding && (jsxRuntime.jsx("div", { className: clsx('button__indication', `button__indication_${holdState}`), children: jsxRuntime.jsx("div", { className: "button__indication-item", children: "\u00A0" }) })), jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: primitives.mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(primitives.Icon, { appearance: primitives.mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(primitives.Icon, { appearance: primitives.mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsxRuntime.jsx(primitives.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(primitives.Icon, { appearance: primitives.mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] })] }));
 });
 
 exports.Button = Button;

package/dist/{Button_es_DAzeb-vJ.js → Button_es_C9pw5qr_.js}

@@ -1,15 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { I as Icon } from './Icon_es_kewxGRUB.js';
-import { a as LinkWrapper } from './Link_es_BDAmhIzd.js';
-import { L as Loader } from './Loader_es_CqlLujBJ.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 { d as useAppearanceConfig, a as useDevicePropsGenerator, u as useStyles, L as LinkWrapper, m as mergeAppearanceKeys, I as Icon, b as Text } from './primitives_es_BNlMaZfZ.js';
+import { L as Loader } from './Loader_es_DzjoV2MF.js';
 import { useHoldProgress } from './hooks/useHoldProgress.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
-import { mergeAppearanceKeys } from './utils/mergeAppearanceKeys.js';
 
 const buttonAppearanceAccent = {
     accentMutedPrimary: {

package/dist/{ChipsGroup_cjs_C27x9x9O.js → ChipsGroup_cjs_BNapN3BL.js}

@@ -2,11 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var Icon = require('./Icon_cjs_DTvdhr8B.js');
-var Text = require('./Text_cjs_erTy2pUN.js');
+var primitives = require('./primitives_cjs_DX--6Yn5.js');
 
 const chipsAppearanceAccent = {
     accentMutedPrimary: {
@@ -318,15 +314,15 @@ const chipsConfig = {
 };
 function Chips(props) {
     const { appearance, className, dataTestId, dataTour, label = '', isActive, isDisabled, isSkeleton, onClick, onClickIconAfter, onClickIconBefore, children, } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, chipsConfig, isDisabled);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, chipsConfig, isDisabled);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, cursorClass, iconAfter, iconAfterActive, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeActive, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
-    const { styles: chipsStyles } = useStyles.useStyles(props);
+    const { styles: chipsStyles } = primitives.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'chips', !isActive
             ? fillClass && `fill_${fillClass}`
             : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
             ? fillHoverClass && `fill_hover_${fillHoverClass}`
-            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `chips_size_${sizeClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, isActive && 'chips_state_active', isDisabled && `chips_state_disabled`, cursorClass && `cursor_${cursorClass}`, onClick && 'cursor_type_pointer', isSkeleton && `chips_skeleton`), "data-testid": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc || (iconBeforeActive && isActive)) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBeforeActive && isActive ? iconBeforeActive : iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc || (iconAfterActive && isActive)) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfterActive && isActive ? iconAfterActive : iconAfter, isActive: isActive, onClick: onClickIconAfter })), badgeValue && (jsxRuntime.jsx(Icon.Badge, { appearance: badgeAppearance, className: "chips__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `chips_size_${sizeClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, isActive && 'chips_state_active', isDisabled && `chips_state_disabled`, cursorClass && `cursor_${cursorClass}`, onClick && 'cursor_type_pointer', isSkeleton && `chips_skeleton`), "data-testid": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc || (iconBeforeActive && isActive)) && (jsxRuntime.jsx(primitives.Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBeforeActive && isActive ? iconBeforeActive : iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (jsxRuntime.jsx(primitives.Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc || (iconAfterActive && isActive)) && (jsxRuntime.jsx(primitives.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfterActive && isActive ? iconAfterActive : iconAfter, isActive: isActive, onClick: onClickIconAfter })), badgeValue && (jsxRuntime.jsx(primitives.Badge, { appearance: badgeAppearance, className: "chips__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
 }
 
 function ChipsGroup(props) {
@@ -335,9 +331,9 @@ function ChipsGroup(props) {
      * to do same structure for "Option" object.
      */
     const { className, dataTestId, dataTour, chipsList, horizontalScroll, style, onClick, children, } = props;
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    const propsGenerator = primitives.useDevicePropsGenerator(props);
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
-    const { styles: groupStyles } = useStyles.useStyles(props);
+    const { styles: groupStyles } = primitives.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: children
             ? children
             : chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconAfterActive: item.iconAfterActive, iconBefore: item.iconBefore, iconBeforeActive: item.iconBeforeActive, isActive: item.isActive, isDisabled: item.isDisabled, onClick: (event) => onClick?.(item, event) }, item.value))) }));

package/dist/{ChipsGroup_es_BTe1MYhV.js → ChipsGroup_es_CYtMZd_G.js}

@@ -1,10 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
-import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { I as Icon, B as Badge } from './Icon_es_kewxGRUB.js';
-import { T as Text } from './Text_es_DVNvU0m0.js';
+import { d as useAppearanceConfig, a as useDevicePropsGenerator, u as useStyles, I as Icon, b as Text, B as Badge } from './primitives_es_BNlMaZfZ.js';
 
 const chipsAppearanceAccent = {
     accentMutedPrimary: {

package/dist/{DatePicker_cjs_Dvw_cGFH.js → DatePicker_cjs_CY3VQDAV.js}

@@ -5,14 +5,10 @@ var React = require('react');
 var clsx = require('clsx');
 var locale = require('date-fns/locale');
 var DatePicker = require('react-datepicker');
-var Button = require('./Button_cjs_BCcz3-Fw.js');
-var Icon = require('./Icon_cjs_DTvdhr8B.js');
-var Input = require('./Input_cjs_BQIi1N63.js');
-var Label = require('./Label_cjs_RI5tFcPt.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 useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+var Button = require('./Button_cjs_DqbZe2Sk.js');
+var primitives = require('./primitives_cjs_DX--6Yn5.js');
+var Input = require('./Input_cjs_BStFgIuQ.js');
+var Label = require('./Label_cjs_BYjXyKWj.js');
 var _default = require('@itcase/icons/default');
 
 const datePickerSize = {
@@ -106,8 +102,8 @@ const datePickerConfig = {
 function DatePickerInput(props) {
     const { className, dataTestId, dataTour, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
     const { appearance, customTimeInput, disablePastDays, monthsShown, selectsRange, showWeekNumbers, showWeekPicker, } = datePickerProps;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, datePickerConfig);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(datePickerProps, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, datePickerConfig);
+    const propsGenerator = primitives.useDevicePropsGenerator(datePickerProps, appearanceConfig);
     const { daySize, dayTextColor, dayTextShape, dayTextSize, iconFill, iconFillHover, iconFillSize, iconItemFill, iconLeft, iconRight, iconShape, monthTextColor, monthTextSize, monthTextWeight, popper, popperPlacement, sizeClass, widthClass, yearTextColor, yearTextSize, yearTextWeight, isClearable, } = propsGenerator;
     const datepickerRef = React.useRef(null);
     const [dateStart, dateEnd] = React.useMemo(() => {
@@ -149,7 +145,7 @@ function DatePickerInput(props) {
     const renderDayContents = React.useCallback((day, date) => {
         return (jsxRuntime.jsx(Button.Button, { className: "react-datepicker__day-button", size: daySize, label: date.getDate().toString(), labelTextColor: dayTextColor, labelTextSize: dayTextSize, shape: dayTextShape }));
     }, [daySize, dayTextColor, dayTextShape, dayTextSize]);
-    const renderCustomHeader = React.useCallback(({ decreaseMonth, increaseMonth, monthDate, }) => (jsxRuntime.jsxs("div", { className: "react-datepicker__header--div", children: [iconLeft && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconLeft, onClick: decreaseMonth })), jsxRuntime.jsxs("div", { className: "react-datepicker__data", children: [jsxRuntime.jsx(Text.Text, { className: "react-datepicker__month", size: monthTextSize, textColor: monthTextColor, textWeight: monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsxRuntime.jsx(Text.Text, { className: "react-datepicker__year", size: yearTextSize, textColor: yearTextColor, textWeight: yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), iconRight && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconRight, onClick: increaseMonth }))] })), [
+    const renderCustomHeader = React.useCallback(({ decreaseMonth, increaseMonth, monthDate, }) => (jsxRuntime.jsxs("div", { className: "react-datepicker__header--div", children: [iconLeft && (jsxRuntime.jsx(primitives.Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconLeft, onClick: decreaseMonth })), jsxRuntime.jsxs("div", { className: "react-datepicker__data", children: [jsxRuntime.jsx(primitives.Text, { className: "react-datepicker__month", size: monthTextSize, textColor: monthTextColor, textWeight: monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsxRuntime.jsx(primitives.Text, { className: "react-datepicker__year", size: yearTextSize, textColor: yearTextColor, textWeight: yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), iconRight && (jsxRuntime.jsx(primitives.Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconRight, onClick: increaseMonth }))] })), [
         iconFill,
         iconFillHover,
         iconFillSize,
@@ -164,7 +160,7 @@ function DatePickerInput(props) {
         yearTextSize,
         yearTextWeight,
     ]);
-    const { styles: datePickerStyles } = useStyles.useStyles(props);
+    const { styles: datePickerStyles } = primitives.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { ref: datepickerRef, ...datePickerProps, minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, outsideClickIgnoreClass: "react-datepicker-popper", popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, isClearable: false, onChange: handleChange, onWeekSelect: showWeekNumbers ? handleWeekSelect : undefined }) }));
 }
 const DatePickerCustomInput = React.forwardRef((props, ref) => {
@@ -185,11 +181,11 @@ function DatePickerClearButton(props) {
         datepickerRef?.current?.handleFocus(event);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (jsxRuntime.jsx(React.Fragment, { children: clearLabel ? (jsxRuntime.jsx(Label.Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextColorHover: clearLabelTextColorHover, labelTextSize: clearLabelTextSize, onClick: onClick })) : ((clearIcon || clearIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), size: clearIconSize, fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, SvgImage: clearIcon, onClick: onClick }))) }));
+    return (jsxRuntime.jsx(React.Fragment, { children: clearLabel ? (jsxRuntime.jsx(Label.Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextColorHover: clearLabelTextColorHover, labelTextSize: clearLabelTextSize, onClick: onClick })) : ((clearIcon || clearIconSrc) && (jsxRuntime.jsx(primitives.Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), size: clearIconSize, fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, SvgImage: clearIcon, onClick: onClick }))) }));
 }
 function DatePickerInputIcon(props) {
     const { inputIcon, inputIconFill, inputIconFillHover, inputIconFillSize, inputIconItemFill, inputIconShape, inputIconSize, inputIconSrc, onClick, } = props;
-    return (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), size: inputIconSize, fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, SvgImage: inputIcon, onClick: () => onClick && onClick() }));
+    return (jsxRuntime.jsx(primitives.Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), size: inputIconSize, fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, SvgImage: inputIcon, onClick: () => onClick && onClick() }));
 }
 
 exports.DatePickerInput = DatePickerInput;

package/dist/{DatePicker_es_t3u6yddn.js → DatePicker_es_C110M8WT.js}

@@ -3,14 +3,10 @@ import React, { useMemo, useCallback, useRef } from 'react';
 import clsx from 'clsx';
 import { ru } from 'date-fns/locale';
 import DatePicker from 'react-datepicker';
-import { B as Button } from './Button_es_DAzeb-vJ.js';
-import { I as Icon } from './Icon_es_kewxGRUB.js';
-import { I as Input } from './Input_es_BYbc2X9M.js';
-import { L as Label } from './Label_es_CNRTIAWo.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 { useStyles } from './hooks/useStyles/useStyles.js';
+import { B as Button } from './Button_es_C9pw5qr_.js';
+import { I as Icon, d as useAppearanceConfig, a as useDevicePropsGenerator, b as Text, u as useStyles } from './primitives_es_BNlMaZfZ.js';
+import { I as Input } from './Input_es_BVvf5Gpr.js';
+import { L as Label } from './Label_es_SG60qCRL.js';
 import { icons14 } from '@itcase/icons/default';
 
 const datePickerSize = {

package/dist/{Group_cjs_MYtD5is_.js → Group_cjs_CvX0cIz2.js}

@@ -3,21 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+var primitives = require('./primitives_cjs_DX--6Yn5.js');
 
-const groupAppearanceSurface = {
-    surfacePrimary: {
-        fill: 'surfacePrimary',
-        borderColor: 'surfaceBorderPrimary',
-        borderWidth: '1',
-    },
-};
-
-const groupAppearance = {
-    ...groupAppearanceSurface,
-};
+const groupAppearance = {};
 
 const groupConfig = {
     appearance: groupAppearance,
@@ -27,10 +15,10 @@ const groupConfig = {
 };
 const Group = React.forwardRef(function Group(props, ref) {
     const { id, appearance, className, dataTestId, dataTour, name, dataId, easing, htmlFor, print, scroll, style, tag: Tag = 'div', isActive, isDisabled, onClick, onMouseDown, onMouseEnter, onMouseLeave, children, } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, groupConfig);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, groupConfig);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorActiveClass, textColorClass, textColorHoverClass, columnsClass, elevationClass, heightClass, hoverFilterClass, iconFillHoverClass, shapeClass, shapeStrengthClass, stackingClass, widthClass, wrapClass, } = propsGenerator;
-    const { styles: groupStyles } = useStyles.useStyles(props);
+    const { styles: groupStyles } = primitives.useStyles(props);
     return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'group', easing && `easing_${easing}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, hoverFilterClass && `hover-filter_${hoverFilterClass}`, columnsClass && `group_columns_${columnsClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, textColorClass && `group_text-color_${textColorClass}`, textColorActiveClass &&
             `group_text-color_active_${textColorActiveClass}`, textColorHoverClass && `group_text-color_hover_${textColorHoverClass}`, iconFillHoverClass && `group_icon_fill_hover_${iconFillHoverClass}`, !isDisabled
             ? !isActive

package/dist/{Group_es_C_WChp2_.js → Group_es_BgJhtaOv.js}

@@ -1,21 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
+import { d as useAppearanceConfig, a as useDevicePropsGenerator, u as useStyles } from './primitives_es_BNlMaZfZ.js';
 
-const groupAppearanceSurface = {
-    surfacePrimary: {
-        fill: 'surfacePrimary',
-        borderColor: 'surfaceBorderPrimary',
-        borderWidth: '1',
-    },
-};
-
-const groupAppearance = {
-    ...groupAppearanceSurface,
-};
+const groupAppearance = {};
 
 const groupConfig = {
     appearance: groupAppearance,

package/dist/{Image_cjs_Hvjp2QDB.js → Image_cjs_BdHJJUTP.js}

@@ -3,15 +3,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var urlWithAssetPrefix = require('./cjs/hoc/urlWithAssetPrefix.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+var primitives = require('./primitives_cjs_DX--6Yn5.js');
 
-const Image = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Image(props, ref) {
+const Image = primitives.urlWithAssetPrefix(React.forwardRef(function Image(props, ref) {
     const { className, dataTestId, dataTour, type, src, title, alt, caption, imageClassName, imageWrapperClassName, mode, overlay, placeholderUrl, before, after, isSkeleton, onClick, onError, children, } = props;
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    const propsGenerator = primitives.useDevicePropsGenerator(props);
     const { fillClass, fillHoverClass, borderColorClass, borderColorImageClass, borderTypeClass, borderWidthClass, cursorClass, heightClass, horizontalAlignClass, imageHeightClass, imageWidthClass, resizeModeClass, shapeClass, verticalAlignClass, widthClass, } = propsGenerator;
-    const { image: imageStyles, styles, wrapper: wrapperStyles, } = useStyles.useStyles(props);
+    const { image: imageStyles, styles, wrapper: wrapperStyles, } = primitives.useStyles(props);
     const [imageSrc, setImageSrc] = React.useState('');
     // Handles image load errors: calls onError callback or falls back to placeholderUrl
     const handleImageError = React.useCallback((event) => {

package/dist/{Image_es_DpOCNWpn.js → Image_es_5EyRL35j.js}

@@ -1,9 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
-import { urlWithAssetPrefix } from './hoc/urlWithAssetPrefix.js';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
+import { c as urlWithAssetPrefix, a as useDevicePropsGenerator, u as useStyles } from './primitives_es_BNlMaZfZ.js';
 
 const Image = urlWithAssetPrefix(forwardRef(function Image(props, ref) {
     const { className, dataTestId, dataTour, type, src, title, alt, caption, imageClassName, imageWrapperClassName, mode, overlay, placeholderUrl, before, after, isSkeleton, onClick, onError, children, } = props;

package/dist/{Input_cjs_BQIi1N63.js → Input_cjs_BStFgIuQ.js}

@@ -3,8 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var primitives = require('./primitives_cjs_DX--6Yn5.js');
 
 const inputAppearanceDefault = {
     defaultPrimary: {
@@ -190,8 +189,8 @@ const inputConfig = {
 };
 const Input = React.forwardRef(function Input(props, ref) {
     const { id, appearance, className, dataTestId, dataTour, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, isReadOnly, onClick, onBlur, onChange, onFocus, onKeyDown, } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, inputConfig, isDisabled);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, inputConfig, isDisabled);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     const fallbackId = React.useId();
     return (jsxRuntime.jsx("input", { id: String(id ?? fallbackId), className: clsx(className, 'input', type === 'number' && 'input_type_number', isDisabled && 'input_state_disabled', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&

package/dist/{Input_es_BYbc2X9M.js → Input_es_BVvf5Gpr.js}

@@ -1,8 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import React, { useId } from 'react';
 import clsx from 'clsx';
-import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { d as useAppearanceConfig, a as useDevicePropsGenerator } from './primitives_es_BNlMaZfZ.js';
 
 const inputAppearanceDefault = {
     defaultPrimary: {

package/dist/{Label_cjs_RI5tFcPt.js → Label_cjs_BYjXyKWj.js}

@@ -3,11 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon_cjs_DTvdhr8B.js');
-var Text = require('./Text_cjs_erTy2pUN.js');
+var primitives = require('./primitives_cjs_DX--6Yn5.js');
 
 const labelAppearanceAccent = {
     accentMutedPrimary: {
@@ -324,11 +320,11 @@ function Label(props) {
     const onMouseLeaveLabel = React.useCallback(() => {
         tooltipRef.current?.closeTooltip();
     }, []);
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, labelConfig, isDisabled);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, labelConfig, isDisabled);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { alignClass, fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, tooltipAlignment, tooltipAppearance, tooltipArrowPosition, tooltipText, tooltipTextSize, tooltipTextWeight, tooltipTitle, tooltipTitleSize, tooltipTitleWeight, widthClass, wrapClass, } = propsGenerator;
-    const { styles: labelStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'label', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `label_size_${sizeClass}`, wrapClass && `word-wrap_${wrapClass}`, widthClass && `label_width_${widthClass}`, alignClass && `align_${alignClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `label_skeleton`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('label__icon_before'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "label__text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsxRuntime.jsx("div", { className: "label__text", children: label })), children, tooltipContent && (jsxRuntime.jsx(Icon.Tooltip, { appearance: tooltipAppearance, className: "label__tooltip", ref: tooltipRef, alignment: tooltipAlignment, title: tooltipTitle, titleSize: tooltipTitleSize, titleWeight: tooltipTitleWeight, text: tooltipText, textSize: tooltipTextSize, textWeight: tooltipTextWeight, arrowPosition: tooltipArrowPosition, children: tooltipContent }))] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('label__icon_after'), fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), after] }));
+    const { styles: labelStyles } = primitives.useStyles(props);
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'label', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `label_size_${sizeClass}`, wrapClass && `word-wrap_${wrapClass}`, widthClass && `label_width_${widthClass}`, alignClass && `align_${alignClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `label_skeleton`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(primitives.Icon, { className: clsx('label__icon_before'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsxRuntime.jsx(primitives.Text, { className: "label__text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsxRuntime.jsx("div", { className: "label__text", children: label })), children, tooltipContent && (jsxRuntime.jsx(primitives.Tooltip, { appearance: tooltipAppearance, className: "label__tooltip", ref: tooltipRef, alignment: tooltipAlignment, title: tooltipTitle, titleSize: tooltipTitleSize, titleWeight: tooltipTitleWeight, text: tooltipText, textSize: tooltipTextSize, textWeight: tooltipTextWeight, arrowPosition: tooltipArrowPosition, children: tooltipContent }))] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(primitives.Icon, { className: clsx('label__icon_after'), fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), after] }));
 }
 
 exports.Label = Label;

package/dist/{Label_es_CNRTIAWo.js → Label_es_SG60qCRL.js}

@@ -1,11 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useCallback } from 'react';
 import clsx from 'clsx';
-import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon, T as Tooltip } from './Icon_es_kewxGRUB.js';
-import { T as Text } from './Text_es_DVNvU0m0.js';
+import { d as useAppearanceConfig, a as useDevicePropsGenerator, u as useStyles, I as Icon, b as Text, i as Tooltip } from './primitives_es_BNlMaZfZ.js';
 
 const labelAppearanceAccent = {
     accentMutedPrimary: {

package/dist/{Loader_cjs_CJpdLndn.js → Loader_cjs_BgiKK0BF.js}

@@ -2,10 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var Text = require('./Text_cjs_erTy2pUN.js');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+var primitives = require('./primitives_cjs_DX--6Yn5.js');
 
 const loaderAppearanceAccent = {
     accentPrimary: {
@@ -145,11 +142,11 @@ const loaderConfig = {
 };
 function Loader(props) {
     const { appearance, className, dataTestId, dataTour, type = 'dot', text, isDisabled, isSkeleton, children, } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, loaderConfig, isDisabled);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, loaderConfig, isDisabled);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, borderColorClass, textColor, textSize, heightClass, itemFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    const { styles: loader } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx('loader', className, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, sizeClass && `loader_size_${sizeClass}`, isSkeleton && `loader_skeleton`, type && `loader_type_${type}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: loader, children: [children || (jsxRuntime.jsxs("div", { className: "loader__inner", children: [jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`, type === 'circular' && `border-color_${borderColorClass}`), children: "\u00A0" }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" })] })), text && (jsxRuntime.jsx(Text.Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
+    const { styles: loader } = primitives.useStyles(props);
+    return (jsxRuntime.jsxs("div", { className: clsx('loader', className, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, sizeClass && `loader_size_${sizeClass}`, isSkeleton && `loader_skeleton`, type && `loader_type_${type}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: loader, children: [children || (jsxRuntime.jsxs("div", { className: "loader__inner", children: [jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`, type === 'circular' && `border-color_${borderColorClass}`), children: "\u00A0" }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" })] })), text && (jsxRuntime.jsx(primitives.Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
 }
 
 exports.Loader = Loader;

package/dist/{Loader_es_CqlLujBJ.js → Loader_es_DzjoV2MF.js}

@@ -1,9 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { T as Text } from './Text_es_DVNvU0m0.js';
-import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
+import { d as useAppearanceConfig, a as useDevicePropsGenerator, u as useStyles, b as Text } from './primitives_es_BNlMaZfZ.js';
 
 const loaderAppearanceAccent = {
     accentPrimary: {

package/dist/{Overlay_cjs_BK_0yTLw.js → Overlay_cjs_OmKx5lKU.js}

@@ -2,9 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+var primitives = require('./primitives_cjs_DX--6Yn5.js');
 
 const overlayAppearanceDefault = {
     blackout: {
@@ -29,10 +27,10 @@ const overlayConfig = {
 };
 function Overlay(props) {
     const { appearance, className, dataTestId, dataTour, isOverlay, onClick } = props;
-    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, overlayConfig);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const appearanceConfig = primitives.useAppearanceConfig(appearance, overlayConfig);
+    const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, blurClass, opacityClass } = propsGenerator;
-    const { styles: overlayStyles } = useStyles.useStyles(props);
+    const { styles: overlayStyles } = primitives.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'overlay', opacityClass && `opacity_${opacityClass}`, blurClass && `blur_${blurClass}`, isOverlay && 'overlay_state_visible', fillClass && `fill_${fillClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));
 }
 

package/dist/{Overlay_es_DOO535JM.js → Overlay_es_DhKLpjdA.js}

@@ -1,8 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
+import { d as useAppearanceConfig, a as useDevicePropsGenerator, u as useStyles } from './primitives_es_BNlMaZfZ.js';
 
 const overlayAppearanceDefault = {
     blackout: {