@itcase/ui 1.9.56 → 1.9.57

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

package/dist/components/Badge/Badge.interface.js

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

package/dist/components/Badge/Badge.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { badgeAppearance } from './Badge.appearance';
+const badgeConfig = {
+    appearance: badgeAppearance,
+    setAppearance: (appearanceConfig) => {
+        badgeConfig.appearance = appearanceConfig;
+    },
+};
+function Badge(props) {
+    const { appearance, className, dataTestId, dataTour, dot, icon, iconSrc, value, isSkeleton, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, badgeConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColor, textSize, dotFillClass, iconFill, iconShape, iconSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
+    const { styles: badgeStyles } = useStyles(props);
+    const badgeTypeClass = value
+        ? icon
+            ? dot
+                ? 'badge_type_dot-icon-counter'
+                : 'badge_type_icon-counter'
+            : 'badge_type_counter'
+        : icon
+            ? 'badge_type_icon'
+            : dot
+                ? 'badge_type_dot'
+                : 'badge_type_fill';
+    return (_jsxs("div", { className: clsx(className, 'badge', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, sizeClass && `badge_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, badgeTypeClass, isSkeleton && 'badge_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: badgeStyles, children: [dot && (_jsx("div", { className: clsx('badge__dot', dotFillClass && `svg_fill_${dotFillClass}`), children: _jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: _jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (_jsx(Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
+                (value && (_jsx(Text, { className: "badge__value", size: textSize, textColor: textColor, children: value })))] }));
+}
+export { Badge, badgeConfig };

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

@@ -0,0 +1,31 @@
+const badgeAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        borderColor: 'accentBorderQuaternary',
+        textColor: 'accentTextPrimary',
+        dotFill: 'accentItemPrimary',
+        iconFill: 'accentItemPrimary',
+    },
+    accentQuaternary: {
+        fill: 'accentQuaternary',
+        borderColor: 'accentBorderQuaternary',
+        textColor: 'accentTextPrimary',
+        dotFill: 'accentItemPrimary',
+        iconFill: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentSecondary',
+        borderColor: 'accentBorderQuaternary',
+        textColor: 'accentTextQuaternary',
+        dotFill: 'accentItemQuaternary',
+        iconFill: 'accentItemQuaternary',
+    },
+    accentTertiary: {
+        fill: 'accentTertiary',
+        borderColor: 'accentBorderSecondary',
+        textColor: 'accentTextSecondary',
+        dotFill: 'accentItemSecondary',
+        iconFill: 'accentItemSecondary',
+    },
+};
+export { badgeAppearanceAccent };

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

@@ -0,0 +1,10 @@
+const badgeAppearanceDanger = {
+    dangerPrimary: {
+        fill: 'dangerPrimary',
+        borderColor: 'dangerBorderPrimary',
+        textColor: 'dangerTextPrimary',
+        dotFill: 'dangerItemPrimary',
+        iconFill: 'dangerItemPrimary',
+    },
+};
+export { badgeAppearanceDanger };

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

@@ -0,0 +1,9 @@
+const badgeAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+};
+export { badgeAppearanceDisabled };

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

@@ -0,0 +1,9 @@
+const badgeAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorHoverPrimary',
+        textColor: 'errorTextPrimary',
+        iconFill: 'errorItemPrimary',
+    },
+};
+export { badgeAppearanceError };

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

@@ -0,0 +1,10 @@
+const badgeAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        borderColor: 'extraBorderSecondary',
+        textColor: 'extraTextPrimary',
+        dotFill: 'extraItemPrimary',
+        iconFill: 'extraItemPrimary',
+    },
+};
+export { badgeAppearanceExtra };

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

@@ -0,0 +1,16 @@
+const badgeAppearanceInfo = {
+    infoPrimary: {
+        fill: 'infoPrimary',
+        borderColor: 'infoBorderSecondary',
+        textColor: 'infoTextPrimary',
+        dotFill: 'infoItemPrimary',
+        iconFill: 'infoItemPrimary',
+    },
+    infoSecondary: {
+        fill: 'infoSecondary',
+        borderColor: 'infoBorderSecondary',
+        textColor: 'infoTextSecondary',
+        dotFill: 'infoItemSecondary',
+    },
+};
+export { badgeAppearanceInfo };