@itcase/ui 1.8.13 → 1.8.17

package/dist/cjs/components/Accordion.js

@@ -8,9 +8,9 @@ var castArray = require('lodash/castArray');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var _default = require('@itcase/icons/default');
-var Divider = require('../../Divider_cjs_DakITdTv.js');
-var Icon = require('../../Icon_cjs_BaWMPaAR.js');
-var Text = require('../../Text_cjs_D4xG0cKD.js');
+var Divider = require('../../Divider_cjs_DzFVtGkF.js');
+var Tooltip = require('../../Tooltip_cjs_BKOjNMkt.js');
+var Text = require('../../Text_cjs_iL1l_7V1.js');
 require('lodash/camelCase');
 require('lodash/upperFirst');
 require('../context/Notifications.js');
@@ -24,18 +24,112 @@ require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('react-inlinesvg');
 require('../../Link_cjs_yht44xJv.js');
-require('../../Tooltip_cjs_CY4HOzhz.js');
-require('../../Title_cjs_ByPcFb15.js');
 
-var accordionAppearance = {
-    dev: {},
+var accordionAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        labelTextSize: 'xxl',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeXL: {
+        size: 'xl',
+        labelTextSize: 'l',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'l',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 'm',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        iconAfterFillSize: '20',
+        iconAfterSize: '20',
+        iconBeforeFillSize: '20',
+        iconBeforeSize: '20',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        iconAfterFillSize: '16',
+        iconAfterSize: '16',
+        iconBeforeFillSize: '16',
+        iconBeforeSize: '16',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        labelTextSize: 'xs',
+        iconAfterFillSize: '14',
+        iconAfterSize: '14',
+        iconBeforeFillSize: '14',
+        iconBeforeSize: '14',
+    },
+};
+
+var accordionAppearanceStyle = {
+    full: {
+        borderColor: '0',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: '0',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    solid: {
+        borderColor: '0',
+    },
 };
-var accordionItemAppearance = {
-    dev: {},
+
+var accordionAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        titleTextColor: 'surfaceTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
 };
 
+var accordionAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, accordionAppearanceSize), accordionAppearanceStyle), accordionAppearanceSurface);
+
 var accordionItemConfig = {
-    appearance: accordionItemAppearance,
+    appearance: accordionAppearance,
     setAppearance: function (appearanceConfig) {
         accordionItemConfig.appearance = appearanceConfig;
     },
@@ -60,7 +154,7 @@ function AccordionItem(props) {
     var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass, borderColorClass = propsGenerator.borderColorClass, contentBorderColorClass = propsGenerator.contentBorderColorClass, contentFillClass = propsGenerator.contentFillClass, contentFillHoverClass = propsGenerator.contentFillHoverClass, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, borderColorClass && "border-color_".concat(borderColorClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "accordion-item_shape_".concat(shapeClass), size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || (jsxRuntime.jsx(Icon.Icon, { size: "16", iconFill: iconFill, SvgImage: _default.icon16.ChevronDown })) }), beforeContent && beforeContent, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' })), isExpanded && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass &&
+    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, borderColorClass && "border-color_".concat(borderColorClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "accordion-item_shape_".concat(shapeClass), size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || (jsxRuntime.jsx(Tooltip.Icon, { size: "16", iconFill: iconFill, SvgImage: _default.icon16.ChevronDown })) }), beforeContent && beforeContent, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' })), isExpanded && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass &&
                     "border-color_".concat(contentBorderColorClass), contentFillClass && "fill_".concat(contentFillClass), contentFillHoverClass && "fill_hover_".concat(contentFillHoverClass)), children: children ||
                     (content && (jsxRuntime.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
 }
@@ -133,5 +227,4 @@ exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
 exports.accordionAppearance = accordionAppearance;
 exports.accordionConfig = accordionConfig;
-exports.accordionItemAppearance = accordionItemAppearance;
 exports.accordionItemConfig = accordionItemConfig;

package/dist/cjs/components/Avatar.js

@@ -5,9 +5,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Icon = require('../../Icon_cjs_BaWMPaAR.js');
+var Tooltip = require('../../Tooltip_cjs_BKOjNMkt.js');
 var Image = require('../../Image_cjs_DuIBtUq5.js');
-var Text = require('../../Text_cjs_D4xG0cKD.js');
+var Text = require('../../Text_cjs_iL1l_7V1.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -18,18 +18,216 @@ require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
-require('react-inlinesvg');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
+require('react-inlinesvg');
 require('../../Link_cjs_yht44xJv.js');
-require('../../Tooltip_cjs_CY4HOzhz.js');
-require('../../Title_cjs_ByPcFb15.js');
 
-var avatarAppearance = {
-    dev: {},
+var avatarAppearanceAccent = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+    },
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        borderColor: 'accentBorderPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        borderColor: 'accentBorderPrimary',
+        textColor: 'accentTextSecondary',
+        textColorHover: 'accentTextSecondary',
+    },
+};
+
+var avatarAppearanceDanger = {
+    danger: {
+        fill: 'dangerPrimary',
+        fillHover: 'dangerPrimaryHover',
+    },
+};
+
+var avatarAppearanceError = {
+    error: {
+        fill: 'errorPrimary',
+        fillHover: 'errorPrimaryHover',
+        textColor: 'errorTextPrimary',
+        textColorHover: 'errorTextPrimary',
+    },
+};
+
+var avatarAppearanceInfo = {
+    info: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        borderColor: 'accentBorderPrimary',
+        textColor: 'accentTextPrimary',
+        textColorHover: 'accentTextPrimary',
+    },
+    infoSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        borderColor: 'accentBorderPrimary',
+        textColor: 'accentTextSecondary',
+        textColorHover: 'accentTextSecondary',
+    },
 };
 
+var avatarAppearancePrimary = {
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        textColor: 'primaryTextPrimary',
+    },
+};
+
+var avatarAppearanceSecondary = {
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        textColor: 'secondaryTextPrimary',
+    },
+};
+
+var avatarAppearanceSize = {
+    size16: {
+        size: '16',
+        textSize: 'xxl',
+        iconAfterFillSize: '12',
+        iconAfterSize: '12',
+        iconBeforeFillSize: '12',
+        iconBeforeSize: '12',
+    },
+    size20: {
+        size: '20',
+        textSize: 'xxl',
+        iconAfterFillSize: '12',
+        iconAfterSize: '12',
+        iconBeforeFillSize: '12',
+        iconBeforeSize: '12',
+    },
+    size24: {
+        size: '24',
+        textSize: 'xxl',
+        iconAfterFillSize: '12',
+        iconAfterSize: '12',
+        iconBeforeFillSize: '12',
+        iconBeforeSize: '12',
+    },
+    size32: {
+        size: '32',
+        textSize: 'xxl',
+        iconAfterFillSize: '12',
+        iconAfterSize: '12',
+        iconBeforeFillSize: '12',
+        iconBeforeSize: '12',
+    },
+    size40: {
+        size: '40',
+        textSize: 'xxl',
+        iconAfterFillSize: '12',
+        iconAfterSize: '12',
+        iconBeforeFillSize: '12',
+        iconBeforeSize: '12',
+    },
+    size56: {
+        size: '56',
+        textSize: 'xxl',
+        iconAfterFillSize: '16',
+        iconAfterSize: '16',
+        iconBeforeFillSize: '16',
+        iconBeforeSize: '16',
+    },
+    size96: {
+        size: '96',
+        textSize: 'xxl',
+        iconAfterFillSize: '32',
+        iconAfterSize: '32',
+        iconBeforeFillSize: '32',
+        iconBeforeSize: '32',
+    },
+    size144: {
+        size: '144',
+        textSize: '1xxl',
+        iconAfterFillSize: '40',
+        iconAfterSize: '40',
+        iconBeforeFillSize: '40',
+        iconBeforeSize: '40',
+    },
+    size240: {
+        size: '240',
+        textSize: '2xxl',
+        iconAfterFillSize: '40',
+        iconAfterSize: '40',
+        iconBeforeFillSize: '40',
+        iconBeforeSize: '40',
+    },
+};
+
+var avatarAppearanceStyle = {
+    full: {
+        borderColor: '0',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: '0',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    solid: {
+        borderColor: '0',
+    },
+};
+
+var avatarAppearanceSuccess = {
+    success: {
+        fill: 'successPrimary',
+        fillHover: 'successPrimaryHover',
+        textColorPropsColor: 'successTextSecondary',
+        textColorPropsColorHover: 'successTextSecondary',
+    },
+};
+
+var avatarAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        textColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+var avatarAppearanceWarning = {
+    warning: {
+        fill: 'warningPrimary',
+        fillHover: 'warningPrimaryHover',
+        textColor: 'warningTextSecondary',
+        textColorHover: 'warningTextSecondary',
+    },
+};
+
+var avatarAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, avatarAppearanceSize), avatarAppearanceStyle), avatarAppearanceAccent), avatarAppearanceDanger), avatarAppearanceError), avatarAppearanceInfo), avatarAppearancePrimary), avatarAppearanceSecondary), avatarAppearanceSuccess), avatarAppearanceSurface), avatarAppearanceWarning);
+
 var avatarConfig = {
     appearance: avatarAppearance,
     setAppearance: function (appearanceConfig) {
@@ -37,7 +235,7 @@ var avatarConfig = {
     },
 };
 function Avatar(props) {
-    var className = props.className, type = props.type, appearance = props.appearance, _a = props.size, size = _a === void 0 ? '96' : _a, src = props.src, Dot = props.Dot, _b = props.firstName, firstName = _b === void 0 ? '' : _b, icon = props.icon, _c = props.secondName, secondName = _c === void 0 ? '' : _c, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick;
+    var className = props.className, type = props.type, appearance = props.appearance, src = props.src, count = props.count, Dot = props.Dot, _a = props.firstName, firstName = _a === void 0 ? '' : _a, _b = props.secondName, secondName = _b === void 0 ? '' : _b, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick;
     var avatarChars = React.useMemo(function () {
         var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
         var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
@@ -48,8 +246,8 @@ function Avatar(props) {
         return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = avatarConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, _d = propsGenerator.textColor, textColor = _d === void 0 ? 'surfaceTextTertiary' : _d, _e = propsGenerator.textSize, textSize = _e === void 0 ? 'l' : _e, _f = propsGenerator.textWeight, textWeight = _f === void 0 ? '600' : _f, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', isSkeleton && "avatar_skeleton", onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: "avatar__image", src: src, shape: "geometric" })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (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 })), Dot, after] }) }));
+    var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, textWeight = propsGenerator.textWeight, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), size && "avatar_size_".concat(sizeClass), type && "avatar_type_".concat(type), Dot && 'avatar_status', isSkeleton && "avatar_skeleton", onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: "avatar__image", src: src })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__text", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars || count })), (icon || iconSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
 }
 
 exports.Avatar = Avatar;

package/dist/cjs/components/Badge.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var Badge = require('../../Badge_cjs_CeqDdbMs.js');
+var Tooltip = require('../../Tooltip_cjs_BKOjNMkt.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
+require('react');
 require('clsx');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -19,15 +19,12 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Icon_cjs_BaWMPaAR.js');
+require('../../Text_cjs_iL1l_7V1.js');
 require('react-inlinesvg');
 require('../../Link_cjs_yht44xJv.js');
-require('../../Tooltip_cjs_CY4HOzhz.js');
-require('../../Text_cjs_D4xG0cKD.js');
-require('../../Title_cjs_ByPcFb15.js');
 
 
 
-exports.Badge = Badge.Badge;
-exports.badgeAppearance = Badge.badgeAppearance;
-exports.badgeConfig = Badge.badgeConfig;
+exports.Badge = Tooltip.Badge;
+exports.badgeAppearance = Tooltip.badgeAppearance;
+exports.badgeConfig = Tooltip.badgeConfig;