@itcase/ui 1.9.56 → 1.9.58

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

@@ -7,17 +7,7 @@ var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearance
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 
-const groupAppearanceSurface = {
-    surfacePrimary: {
-        fill: 'surfacePrimary',
-        borderColor: 'surfaceBorderPrimary',
-        borderWidth: '1',
-    },
-};
-
-const groupAppearance = {
-    ...groupAppearanceSurface,
-};
+const groupAppearance = {};
 
 const groupConfig = {
     appearance: groupAppearance,

package/dist/{Group_es_C_WChp2_.js → Group_es_CP-uIchb.js}

@@ -5,17 +5,7 @@ import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceCo
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 
-const groupAppearanceSurface = {
-    surfacePrimary: {
-        fill: 'surfacePrimary',
-        borderColor: 'surfaceBorderPrimary',
-        borderWidth: '1',
-    },
-};
-
-const groupAppearance = {
-    ...groupAppearanceSurface,
-};
+const groupAppearance = {};
 
 const groupConfig = {
     appearance: groupAppearance,

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

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var Select = require('react-select');
 var CreatableSelect = require('react-select/creatable');
-var Group = require('./Group_cjs_MYtD5is_.js');
+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');

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

@@ -3,7 +3,7 @@ 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_C_WChp2_.js';
+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';

package/dist/cjs/components/AvatarStack.js

@@ -7,7 +7,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Avatar = require('../../Avatar_cjs_BIHJrAbQ.js');
-var Group = require('../../Group_cjs_MYtD5is_.js');
+var Group = require('../../Group_cjs_BLGSskb3.js');
 var Text = require('../../Text_cjs_erTy2pUN.js');
 require('react');
 require('lodash/camelCase');

package/dist/cjs/components/DatePeriod.js

@@ -9,7 +9,7 @@ var ChipsGroup = require('../../ChipsGroup_cjs_C27x9x9O.js');
 var DatePicker = require('../../DatePicker_cjs_Dvw_cGFH.js');
 require('react-select');
 require('../../Icon_cjs_DTvdhr8B.js');
-var SelectContainer = require('../../SelectContainer_cjs_DTIqXM5V.js');
+var SelectContainer = require('../../SelectContainer_cjs_DJ_IUDjE.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');
@@ -17,7 +17,7 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../context/Notifications.js');
 require('../context/UIContext.js');
-require('../../Group_cjs_MYtD5is_.js');
+require('../../Group_cjs_BLGSskb3.js');
 var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
 require('../hooks/useStyles/useStyles.js');
 require('../hooks.js');

package/dist/cjs/components/Group.js

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

package/dist/cjs/components/Response.js

@@ -9,7 +9,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Button = require('../../Button_cjs_BCcz3-Fw.js');
-var Group = require('../../Group_cjs_MYtD5is_.js');
+var Group = require('../../Group_cjs_BLGSskb3.js');
 var Text = require('../../Text_cjs_erTy2pUN.js');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');

package/dist/cjs/components/Select.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var SelectContainer = require('../../SelectContainer_cjs_DTIqXM5V.js');
+var SelectContainer = require('../../SelectContainer_cjs_DJ_IUDjE.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
 require('react-select');
 require('react-select/creatable');
-require('../../Group_cjs_MYtD5is_.js');
+require('../../Group_cjs_BLGSskb3.js');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');

package/dist/cjs/components/Swiper.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var react = require('swiper/react');
-var Group = require('../../Group_cjs_MYtD5is_.js');
+var Group = require('../../Group_cjs_BLGSskb3.js');
 var Text = require('../../Text_cjs_erTy2pUN.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');

package/dist/components/Accordion/Accordion.appearance.js

@@ -0,0 +1,9 @@
+import { accordionAppearanceSize } from './appearance/accordionSize';
+import { accordionAppearanceStyle } from './appearance/accordionStyle';
+import { accordionAppearanceSurface } from './appearance/accordionSurface';
+const accordionAppearance = {
+    ...accordionAppearanceSize,
+    ...accordionAppearanceStyle,
+    ...accordionAppearanceSurface,
+};
+export { accordionAppearance };

package/dist/components/Accordion/Accordion.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import castArray from 'lodash/castArray';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { AccordionItem } from './AccordionItem';
+function Accordion(props) {
+    const { appearance, className, dataTestId, dataTour, initial = [], items, isMultiple, onClickItem, children, } = props;
+    const [expandedItems, setExpandedItems] = useState(() => castArray(initial));
+    const onClickAccordionItem = useCallback((targetItem) => {
+        setExpandedItems((prevState) => {
+            const isExpanded = prevState.find((id) => id === targetItem.id);
+            if (isMultiple) {
+                if (isExpanded) {
+                    return prevState.filter((id) => id !== targetItem.id);
+                }
+                else {
+                    return [...prevState, targetItem.id];
+                }
+            }
+            else {
+                if (isExpanded) {
+                    return [];
+                }
+                else {
+                    return [targetItem.id];
+                }
+            }
+        });
+        onClickItem && onClickItem(targetItem);
+    }, [isMultiple, onClickItem]);
+    const accordionItemsList = useMemo(() => {
+        if (items) {
+            return items.map((item, i) => (_jsx(AccordionItem, { id: item.id, appearance: appearance, title: item.title, content: item.content, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, `accordionItem_${item.id || i + 1}`)));
+        }
+        if (children) {
+            return React.Children.toArray(children).map((child) => {
+                if (React.isValidElement(child)) {
+                    const childID = child.props.id || child.key;
+                    return React.cloneElement(child, {
+                        id: childID,
+                        isExpanded: expandedItems.includes(childID),
+                        onClick: onClickAccordionItem,
+                    });
+                }
+                return child;
+            });
+        }
+        return [];
+    }, [items, children, appearance, expandedItems, onClickAccordionItem]);
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { fillClass, borderColorClass, shapeClass, shapeStrengthClass, widthClass, } = propsGenerator;
+    const { styles: accordionStyles } = useStyles(props);
+    return (_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 }));
+}
+export { Accordion };

package/dist/components/Accordion/AccordionItem.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import clsx from 'clsx';
+import { mergeAppearanceKeys } from 'src/utils';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Badge } from 'src/components/Badge';
+import { Divider } from 'src/components/Divider';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { accordionAppearance } from './Accordion.appearance';
+const accordionItemConfig = {
+    appearance: accordionAppearance,
+    setAppearance: (appearanceConfig) => {
+        accordionItemConfig.appearance = appearanceConfig;
+    },
+};
+function AccordionItem(props) {
+    const { id, appearance, className, title, afterContent, beforeContent, content, isExpanded, onClick, children, } = props;
+    const onClickTitle = useCallback(() => {
+        const thisItemData = {
+            id: id,
+            title: title,
+            content: content,
+            isExpanded: !isExpanded,
+        };
+        onClick && onClick(thisItemData);
+    }, [id, title, content, isExpanded, onClick]);
+    const appearanceConfig = useAppearanceConfig(appearance, accordionItemConfig);
+    const propsGenerator = 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(props);
+    return (_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: [_jsxs("div", { className: clsx('accordion-item__header', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), children: [_jsx(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 }), _jsxs("div", { className: "accordion-item__action", children: [badgeValue && (_jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: "accordion-item__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (_jsx(Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (_jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (_jsxs("div", { className: clsx('accordion-item__content'), children: [content && (_jsx("div", { className: clsx('accordion-item__content-inner', fillClass && `fill_${fillClass}`), children: _jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
+}
+export { AccordionItem, accordionItemConfig };

package/dist/components/Accordion/appearance/accordionSize.js

@@ -0,0 +1,52 @@
+import { icons16 } from '@itcase/icons/default';
+const accordionAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        titleTextSize: 'xxl',
+        badgeAppearanceSize: 'sizeXS',
+        contentTextSize: 'xxl',
+        icon: icons16.Arrow.ChevronDown,
+    },
+    sizeXL: {
+        size: 'xl',
+        titleTextSize: 'xl',
+        badgeAppearanceSize: 'sizeXS',
+        contentTextSize: 'l',
+        icon: icons16.Arrow.ChevronDown,
+    },
+    sizeL: {
+        size: 'l',
+        titleTextSize: 'l',
+        badgeAppearanceSize: 'sizeXS',
+        icon: icons16.Arrow.ChevronDown,
+    },
+    sizeM: {
+        size: 'm',
+        titleTextSize: 'm',
+        badgeAppearanceSize: 'sizeXS',
+        contentTextSize: 'm',
+        icon: icons16.Arrow.ChevronDown,
+    },
+    sizeS: {
+        size: 's',
+        titleTextSize: 's',
+        badgeAppearanceSize: 'sizeXS',
+        contentTextSize: 's',
+        icon: icons16.Arrow.ChevronDown,
+    },
+    sizeXS: {
+        size: 'xs',
+        titleTextSize: 'xs',
+        badgeAppearanceSize: 'sizeXS',
+        contentTextSize: 'xs',
+        icon: icons16.Arrow.ChevronDown,
+    },
+    sizeXXS: {
+        size: 'xxs',
+        titleTextSize: 'xxs',
+        badgeAppearanceSize: 'sizeXS',
+        contentTextSize: 'xs',
+        icon: icons16.Arrow.ChevronDown,
+    },
+};
+export { accordionAppearanceSize };

package/dist/components/Accordion/appearance/accordionStyle.js

@@ -0,0 +1,14 @@
+const accordionAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { accordionAppearanceStyle };

package/dist/components/Accordion/appearance/accordionSurface.js

@@ -0,0 +1,36 @@
+const accordionAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary',
+        badgeShape: 'circular',
+        iconFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternary',
+        labelTextColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary',
+        badgeShape: 'circular',
+        iconFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondary',
+        labelTextColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary',
+        badgeShape: 'circular',
+        iconFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary',
+        badgeShape: 'circular',
+        iconFillIcon: 'surfaceItemPrimary',
+    },
+};
+export { accordionAppearanceSurface };

package/dist/components/Accordion/index.js

@@ -0,0 +1,4 @@
+import { Accordion } from './Accordion';
+import { accordionAppearance } from './Accordion.appearance';
+import { AccordionItem, accordionItemConfig } from './AccordionItem';
+export { Accordion, accordionAppearance, AccordionItem, accordionItemConfig };

package/dist/components/Avatar/Avatar.appearance.js

@@ -0,0 +1,11 @@
+import { avatarAppearanceDefault } from './appearance/avatarDefault';
+import { avatarAppearanceShape } from './appearance/avatarShape';
+import { avatarAppearanceSize } from './appearance/avatarSize';
+import { avatarAppearanceStyle } from './appearance/avatarStyle';
+const avatarAppearance = {
+    ...avatarAppearanceSize,
+    ...avatarAppearanceStyle,
+    ...avatarAppearanceShape,
+    ...avatarAppearanceDefault,
+};
+export { avatarAppearance };

package/dist/components/Avatar/Avatar.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { Badge } from 'src/components/Badge';
+import { Icon } from 'src/components/Icon';
+import { Image } from 'src/components/Image';
+import { Text } from 'src/components/Text';
+import { avatarAppearance } from './Avatar.appearance';
+const avatarConfig = {
+    appearance: avatarAppearance,
+    setAppearance: (appearanceConfig) => {
+        avatarConfig.appearance = appearanceConfig;
+    },
+};
+function Avatar(props) {
+    const { appearance, className, dataTestId, dataTour, src, firstName = '', secondName = '', count, before, after, isSkeleton, onClick, } = props;
+    const avatarChars = useMemo(() => {
+        const firstChar = (firstName?.[0] || '').toUpperCase();
+        const secondChar = (secondName?.[0] || '').toUpperCase();
+        return `${firstChar}${secondChar}`;
+    }, [firstName, secondName]);
+    const appearanceConfig = useAppearanceConfig(appearance, avatarConfig);
+    const propsGenerator = 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 (_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: _jsxs("div", { className: clsx('avatar__wrapper', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [before, src ? (_jsx(Image, { className: clsx('avatar__image', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), src: src, placeholderUrl: placeholderUrl })) : (_jsx(Text, { className: "avatar__text", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars || count })), (icon || iconSrc) && (_jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (badge || badgeValue) && (_jsx(Badge, { appearance: badgeAppearance, className: "avatar__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), after] }) }));
+}
+export { Avatar, avatarConfig };

package/dist/components/Avatar/appearance/avatarDefault.js

@@ -0,0 +1,23 @@
+const avatarAppearanceDefault = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        textColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary solid circular',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        textColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary solid circular',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        textColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary solid circular',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        textColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary solid circular',
+    },
+};
+export { avatarAppearanceDefault };

package/dist/components/Avatar/appearance/avatarShape.js

@@ -0,0 +1,25 @@
+const avatarAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { avatarAppearanceShape };

package/dist/components/Avatar/appearance/avatarSize.js

@@ -0,0 +1,63 @@
+const avatarAppearanceSize = {
+    size16: {
+        size: '16',
+        textSize: 'xs',
+        badgeSize: 'xxs',
+        iconFillSize: '12',
+    },
+    size20: {
+        size: '20',
+        textSize: 'xs',
+        badgeSize: 'xxs',
+        iconFillSize: '12',
+    },
+    size24: {
+        size: '24',
+        textSize: 's',
+        badgeSize: 'xxs',
+        iconFillSize: '12',
+    },
+    size32: {
+        size: '32',
+        textSize: 'm',
+        badgeSize: 'xs',
+        iconFillSize: '12',
+    },
+    size40: {
+        size: '40',
+        textSize: 'l',
+        badgeSize: 's',
+        iconFillSize: '12',
+    },
+    size48: {
+        size: '48',
+        textSize: 'l',
+        badgeSize: 's',
+        iconFillSize: '12',
+    },
+    size56: {
+        size: '56',
+        textSize: 'xl',
+        badgeSize: 'm',
+        iconFillSize: '16',
+    },
+    size96: {
+        size: '96',
+        textSize: 'xxl',
+        badgeSize: 'xl',
+        iconFillSize: '32',
+    },
+    size144: {
+        size: '144',
+        textSize: 'xxl',
+        badgeSize: 'xxl',
+        iconFillSize: '40',
+    },
+    size240: {
+        size: '240',
+        textSize: 'xxl',
+        badgeSize: 'xxl',
+        iconFillSize: '40',
+    },
+};
+export { avatarAppearanceSize };

package/dist/components/Avatar/appearance/avatarStyle.js

@@ -0,0 +1,16 @@
+const avatarAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {
+        borderColor: 'none',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { avatarAppearanceStyle };

package/dist/components/Avatar/index.js

@@ -0,0 +1,2 @@
+export { Avatar, avatarConfig } from './Avatar';
+export { avatarAppearance } from './Avatar.appearance';

package/dist/components/AvatarStack/AvatarStack.appearance.js

@@ -0,0 +1,5 @@
+import { avatarStackAppearanceSize } from './appearance/avatarStackSize';
+const avatarStackAppearance = {
+    ...avatarStackAppearanceSize,
+};
+export { avatarStackAppearance };

package/dist/components/AvatarStack/AvatarStack.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/AvatarStack/AvatarStack.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { mergeAppearanceKeys } from 'src/utils';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Avatar } from 'src/components/Avatar';
+import { Group } from 'src/components/Group';
+import { Text } from 'src/components/Text';
+import { avatarStackAppearance } from './AvatarStack.appearance';
+const avatarStackConfig = {
+    appearance: avatarStackAppearance,
+    setAppearance: (appearanceConfig) => {
+        avatarStackConfig.appearance = appearanceConfig;
+    },
+};
+function AvatarStack(props) {
+    const { appearance, className, direction = 'horizontal', avatarAppearance, avatarsList, length = 3, isSkeleton, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, avatarStackConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { size } = propsGenerator;
+    const { styles: avatarStackStyles } = useStyles(props);
+    return (avatarsList.length && (_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) => (_jsx(Avatar, { appearance: 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 && (_jsx(Group, { className: "avatar-stack__item avatar-stack__item-text", width: `${size}px`, height: `${size}px`, fill: "surfaceSecondary", children: _jsxs(Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
+}
+export { AvatarStack };

package/dist/components/AvatarStack/appearance/avatarStackSize.js

@@ -0,0 +1,21 @@
+const avatarStackAppearanceSize = {
+    size16: {
+        size: '16',
+    },
+    size20: {
+        size: '20',
+    },
+    size24: {
+        size: '24',
+    },
+    size32: {
+        size: '32',
+    },
+    size40: {
+        size: '40',
+    },
+    size56: {
+        size: '56',
+    },
+};
+export { avatarStackAppearanceSize };

package/dist/components/AvatarStack/index.js

@@ -0,0 +1,2 @@
+import { AvatarStack } from './AvatarStack';
+export { AvatarStack };

package/dist/components/AvatarStack.js

@@ -5,7 +5,7 @@ import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceC
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { A as Avatar } from '../Avatar_es_CtP68jPM.js';
-import { G as Group } from '../Group_es_C_WChp2_.js';
+import { G as Group } from '../Group_es_CP-uIchb.js';
 import { T as Text } from '../Text_es_DVNvU0m0.js';
 import 'react';
 import 'lodash/camelCase';

package/dist/components/Badge/Badge.appearance.js

@@ -0,0 +1,29 @@
+import { badgeAppearanceAccent } from './appearance/badgeAccent';
+import { badgeAppearanceDanger } from './appearance/badgeDanger';
+import { badgeAppearanceDisabled } from './appearance/badgeDisabled';
+import { badgeAppearanceError } from './appearance/badgeError';
+import { badgeAppearanceExtra } from './appearance/badgeExtra';
+import { badgeAppearanceInfo } from './appearance/badgeInfo';
+import { badgeAppearanceShape } from './appearance/badgeShape';
+import { badgeAppearanceSize } from './appearance/badgeSize';
+import { badgeAppearanceSpecial } from './appearance/badgeSpecial';
+import { badgeAppearanceStyle } from './appearance/badgeStyle';
+import { badgeAppearanceSuccess } from './appearance/badgeSuccess';
+import { badgeAppearanceSurface } from './appearance/badgeSurface';
+import { badgeAppearanceWarning } from './appearance/badgeWarning';
+const badgeAppearance = {
+    ...badgeAppearanceSize,
+    ...badgeAppearanceShape,
+    ...badgeAppearanceStyle,
+    ...badgeAppearanceAccent,
+    ...badgeAppearanceDanger,
+    ...badgeAppearanceError,
+    ...badgeAppearanceInfo,
+    ...badgeAppearanceSpecial,
+    ...badgeAppearanceExtra,
+    ...badgeAppearanceSuccess,
+    ...badgeAppearanceDisabled,
+    ...badgeAppearanceSurface,
+    ...badgeAppearanceWarning,
+};
+export { badgeAppearance };