@itcase/ui 1.9.36 → 1.9.37

package/dist/cjs/components/Accordion.js

@@ -7,9 +7,9 @@ var castArray = require('lodash/castArray');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
-var Divider = require('../../Divider_cjs_1fwsCxEb.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Icon = require('../../Icon_cjs_DRdjXL7T.js');
+var Divider = require('../../Divider_cjs_DmIeh3Jq.js');
+var Text = require('../../Text_cjs_BJ9NgJkx.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
 require('lodash/upperFirst');
@@ -26,53 +26,53 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
+require('../../Link_cjs_CmBw4h-N.js');
 
 const accordionAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
-        titleTextSize: 'h3',
+        titleTextSize: 'xxl',
         badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'xxl',
         icon: _default.icons16.Arrow.ChevronDown,
     },
     sizeXL: {
         size: 'xl',
-        titleTextSize: 'h3',
+        titleTextSize: 'xl',
         badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'l',
         icon: _default.icons16.Arrow.ChevronDown,
     },
     sizeL: {
         size: 'l',
-        titleTextSize: 'h4',
+        titleTextSize: 'l',
         badgeAppearanceSize: 'sizeXS',
         icon: _default.icons16.Arrow.ChevronDown,
     },
     sizeM: {
         size: 'm',
-        titleTextSize: 'h5',
+        titleTextSize: 'm',
         badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'm',
         icon: _default.icons16.Arrow.ChevronDown,
     },
     sizeS: {
         size: 's',
-        titleTextSize: 'h6',
+        titleTextSize: 's',
         badgeAppearanceSize: 'sizeXS',
         contentTextSize: 's',
         icon: _default.icons16.Arrow.ChevronDown,
     },
     sizeXS: {
         size: 'xs',
-        titleTextSize: 'h6',
+        titleTextSize: 'xs',
         badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'xs',
         icon: _default.icons16.Arrow.ChevronDown,
     },
     sizeXXS: {
         size: 'xxs',
-        titleTextSize: 'h6',
+        titleTextSize: 'xxs',
         badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'xs',
         icon: _default.icons16.Arrow.ChevronDown,
@@ -96,34 +96,34 @@ const accordionAppearanceStyle = {
 const accordionAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
+        fillHover: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
-        badgeAppearance: 'accentPrimary solid',
+        badgeAppearance: 'accentPrimary',
         badgeShape: 'circular',
         iconFillIcon: 'surfaceItemPrimary',
     },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternary',
         labelTextColor: 'surfaceTextPrimary',
-        badgeAppearance: 'accentPrimary solid',
+        badgeAppearance: 'accentPrimary',
         badgeShape: 'circular',
         iconFillIcon: 'surfaceItemPrimary',
     },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondary',
         labelTextColor: 'surfaceTextPrimary',
-        badgeAppearance: 'accentPrimary solid',
+        badgeAppearance: 'accentPrimary',
         badgeShape: 'circular',
         iconFillIcon: 'surfaceItemPrimary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceQuaternaryHover',
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiary',
         labelTextColor: 'surfaceTextPrimary',
-        badgeAppearance: 'accentPrimary solid',
+        badgeAppearance: 'accentPrimary',
         badgeShape: 'circular',
         iconFillIcon: 'surfaceItemPrimary',
     },
@@ -144,7 +144,6 @@ const accordionItemConfig = {
 function AccordionItem(props) {
     const { id, appearance, className, title, afterContent, beforeContent, content, isExpanded, onClick, children, } = props;
     const onClickTitle = React.useCallback(() => {
-        // "!isExpanded" - is next state of expanded
         const thisItemData = {
             id: id,
             title: title,
@@ -156,23 +155,22 @@ function AccordionItem(props) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, accordionItemConfig);
     const propsGenerator = useDevicePropsGenerator.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;
+    //@ts-expect-error
     const { styles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, zeroPadding && 'accordion-item_zero-padding', zeroGap && 'accordion-item_zero-gap', borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `accordion-item_size_${sizeClass}`, isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsxs("div", { className: clsx('accordion-item__header', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass && `border-color_${titleBorderColorClass}`, titleFillClass && `fill_${titleFillClass}`, titleFillHoverClass && `fill_hover_${titleFillHoverClass}`, titleWidthClass && `width_${titleWidthClass}`, onClickTitle && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsxs("div", { className: "accordion-item__action", children: [badgeValue && (jsxRuntime.jsx(Icon.Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: "accordion-item__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (jsxRuntime.jsxs("div", { className: clsx('accordion-item__content'), children: [content && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content-inner', fillClass && `fill_${fillClass}`), children: jsxRuntime.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
+    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, zeroPadding && 'accordion-item_zero-padding', zeroGap && 'accordion-item_zero-gap', borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `accordion-item_size_${sizeClass}`, isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsxs("div", { className: clsx('accordion-item__header', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass && `border-color_${titleBorderColorClass}`, titleFillClass && `fill_${titleFillClass}`, titleFillHoverClass && `fill_hover_${titleFillHoverClass}`, titleWidthClass && `width_${titleWidthClass}`, onClick && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsxs("div", { className: "accordion-item__action", children: [badgeValue && (jsxRuntime.jsx(Icon.Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: "accordion-item__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (jsxRuntime.jsxs("div", { className: clsx('accordion-item__content'), children: [content && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content-inner', fillClass && `fill_${fillClass}`), children: jsxRuntime.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
 }
 
 function Accordion(props) {
-    const { className, appearance, initial = [], items, isMultiple, onClickItem, children, } = props;
+    const { appearance, className, dataTestId, dataTour, initial = [], items, isMultiple, onClickItem, children, } = props;
     const [expandedItems, setExpandedItems] = React.useState(() => castArray(initial));
     const onClickAccordionItem = React.useCallback((targetItem) => {
         setExpandedItems((prevState) => {
             const isExpanded = prevState.find((id) => id === targetItem.id);
             if (isMultiple) {
                 if (isExpanded) {
-                    // ... without target id
                     return prevState.filter((id) => id !== targetItem.id);
                 }
                 else {
-                    // ... with target id
                     return [...prevState, targetItem.id];
                 }
             }
@@ -192,7 +190,6 @@ function Accordion(props) {
             return items.map((item, i) => (jsxRuntime.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) {
-            // @ts-ignore
             return React.Children.toArray(children).map((child) => {
                 if (React.isValidElement(child)) {
                     const childID = child.props.id || child.key;
@@ -206,11 +203,12 @@ function Accordion(props) {
             });
         }
         return [];
-    }, [children, items, expandedItems, onClickAccordionItem]);
+    }, [items, children, appearance, expandedItems, onClickAccordionItem]);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { fillClass, borderColorClass, shapeClass, shapeStrengthClass, widthClass, } = propsGenerator;
+    //@ts-expect-error
     const { styles: accordionStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'accordion', borderColorClass && `border-color_${borderColorClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`), style: accordionStyles, children: accordionItemsList }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'accordion', borderColorClass && `border-color_${borderColorClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: accordionStyles, children: accordionItemsList }));
 }
 
 exports.Accordion = Accordion;

package/dist/cjs/components/Avatar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Avatar = require('../../Avatar_cjs_MeHu04tK.js');
+var Avatar = require('../../Avatar_cjs_BH4N1LbX.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -18,15 +18,15 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Icon_cjs_CQxDPPGY.js');
+require('../../Icon_cjs_DRdjXL7T.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Link_cjs_DqNtNI23.js');
-require('../../Text_cjs_Co2XdYF-.js');
-require('../../Image_cjs_B3E9N9YO.js');
+require('../../Link_cjs_CmBw4h-N.js');
+require('../../Text_cjs_BJ9NgJkx.js');
+require('../../Image_cjs_Dvojc8Dw.js');
 
 
 

package/dist/cjs/components/AvatarStack.js

@@ -5,9 +5,9 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Avatar = require('../../Avatar_cjs_MeHu04tK.js');
-var Group = require('../../Group_cjs_CcDdC0Ua.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Avatar = require('../../Avatar_cjs_BH4N1LbX.js');
+var Group = require('../../Group_cjs_BGVwVJwS.js');
+var Text = require('../../Text_cjs_BJ9NgJkx.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -22,12 +22,12 @@ require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
-require('../../Icon_cjs_CQxDPPGY.js');
+require('../../Icon_cjs_DRdjXL7T.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
-require('../../Image_cjs_B3E9N9YO.js');
+require('../../Link_cjs_CmBw4h-N.js');
+require('../../Image_cjs_Dvojc8Dw.js');
 
 const avatarStackAppearanceSize = {
     size16: {
@@ -57,13 +57,13 @@ const avatarStackAppearance = {
 const avatarStackConfig = {
     appearance: avatarStackAppearance};
 function AvatarStack(props) {
-    const { className, appearance, direction = 'horizontal', avatarAppearance, avatarsList, length = 3, isSkeleton, } = props;
+    const { appearance, className, direction = 'horizontal', avatarAppearance, avatarsList, length = 3, isSkeleton, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, avatarStackConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    // "size" is numeric
     const { size } = propsGenerator;
+    //@ts-expect-error
     const { styles: avatarStackStyles } = useStyles.useStyles(props);
-    return (avatarsList.length && (jsxRuntime.jsxs("div", { className: clsx(className, 'avatar-stack', direction && `group_direction_${direction}`, size && `avatar-stack_size_${size}`, isSkeleton && `avatar-stack-skeleton`), style: avatarStackStyles, children: [avatarsList.slice(0, length).map((item) => (jsxRuntime.jsx(Avatar.Avatar, { className: "avatar-stack__item", appearance: `${avatarAppearance} size${size}`, src: item.src, textSize: "l", firstName: item.firstName, secondName: item.lastName, shape: "circular" }, item.id))), avatarsList.length > length && (jsxRuntime.jsx(Group.Group, { className: "avatar-stack__item avatar-stack__item-text", width: size, height: size, fill: "surfaceSecondary", children: jsxRuntime.jsxs(Text.Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
+    return (avatarsList.length && (jsxRuntime.jsxs("div", { className: clsx(className, 'avatar-stack', direction && `group_direction_${direction}`, size && `avatar-stack_size_${size}`, isSkeleton && `avatar-stack-skeleton`), style: avatarStackStyles, children: [avatarsList.slice(0, length).map((item) => (jsxRuntime.jsx(Avatar.Avatar, { appearance: `${avatarAppearance} size${size}`, className: "avatar-stack__item", src: item.src, textSize: "l", firstName: item.firstName, secondName: item.lastName, shape: "circular" }, item.id))), avatarsList.length > length && (jsxRuntime.jsx(Group.Group, { className: "avatar-stack__item avatar-stack__item-text", width: size, height: size, fill: "surfaceSecondary", children: jsxRuntime.jsxs(Text.Text, { size: "xs", textColor: "surfaceTextPrimary", textWeight: "600", children: ["+", avatarsList.length - length] }) }))] })));
 }
 
 exports.AvatarStack = AvatarStack;

package/dist/cjs/components/Badge.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
+var Icon = require('../../Icon_cjs_DRdjXL7T.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -23,8 +23,8 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Link_cjs_DqNtNI23.js');
-require('../../Text_cjs_Co2XdYF-.js');
+require('../../Link_cjs_CmBw4h-N.js');
+require('../../Text_cjs_BJ9NgJkx.js');
 
 
 

package/dist/cjs/components/Breadcrumbs.js

@@ -6,9 +6,9 @@ var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
-var Link = require('../../Link_cjs_DqNtNI23.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Icon = require('../../Icon_cjs_DRdjXL7T.js');
+var Link = require('../../Link_cjs_CmBw4h-N.js');
+var Text = require('../../Text_cjs_BJ9NgJkx.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -95,6 +95,12 @@ const breadcrumbsAppearanceSurface = {
         borderColor: 'surfaceBorderPrimary',
         iconFillIcon: 'surfaceItemPrimary',
     },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconFillIcon: 'surfaceItemPrimary',
+    },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
         labelTextColor: 'surfaceTextPrimary',
@@ -107,12 +113,6 @@ const breadcrumbsAppearanceSurface = {
         borderColor: 'surfaceBorderTertiary',
         iconFillIcon: 'surfaceItemPrimary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        labelTextColor: 'surfaceTextInverse',
-        borderColor: 'surfaceBorderQuaternary',
-        iconFillIcon: 'surfaceItemInverse',
-    },
 };
 
 const breadcrumbsAppearance = {
@@ -140,13 +140,14 @@ function Breadcrumbs(props) {
     const { directionClass = 'horizontal', widthClass } = propsGenerator;
     const breadcrumbsItemsList = React.useMemo(() => {
         if (breadcrumbsList) {
-            return breadcrumbsList.map((item, i) => (jsxRuntime.jsx(BreadcrumbsItem, { appearance: appearance, text: item.text, icon: item.icon, iconSrc: item.icon, isActive: i + 1 === breadcrumbsList.length && true, isSkeleton: isSkeleton }, `breadcrumbsItem_${item.key || item.id || item.text}`)));
+            return breadcrumbsList.map((item, i) => (jsxRuntime.jsx(BreadcrumbsItem, { appearance: appearance, text: item.text, icon: item.icon, iconSrc: item.icon, isActive: i + 1 === breadcrumbsList.length, isSkeleton: isSkeleton }, `breadcrumbsItem_${item.key || item.id || item.text}`)));
         }
         if (children) {
             return children;
         }
         return [];
     }, [breadcrumbsList, children, appearance, isSkeleton]);
+    //@ts-expect-error
     const { styles: breadcrumbsStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'breadcrumbs', widthClass && `width_${widthClass}`, directionClass && `direction_${directionClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: breadcrumbsStyles, children: breadcrumbsItemsList }));
 }

package/dist/cjs/components/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button_cjs_BLuRWxbc.js');
+var Button = require('../../Button_cjs_Dvh0E0zz.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -20,13 +20,13 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Icon_cjs_CQxDPPGY.js');
+require('../../Icon_cjs_DRdjXL7T.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
-require('../../Text_cjs_Co2XdYF-.js');
-require('../../Loader_cjs_CP1xKwb-.js');
+require('../../Link_cjs_CmBw4h-N.js');
+require('../../Text_cjs_BJ9NgJkx.js');
+require('../../Loader_cjs_BHMB4c8f.js');
 
 
 

package/dist/cjs/components/Cell.js

@@ -5,9 +5,9 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_CQxDPPGY.js');
-var Label = require('../../Label_cjs_eckLVQqh.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Icon = require('../../Icon_cjs_DRdjXL7T.js');
+var Label = require('../../Label_cjs_Kf3sYviA.js');
+var Text = require('../../Text_cjs_BJ9NgJkx.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -25,7 +25,7 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
+require('../../Link_cjs_CmBw4h-N.js');
 
 const cellAppearanceSize = {
     sizeXL: {
@@ -103,7 +103,7 @@ const cellAppearanceStyle = {
 const cellAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfaceHoverPrimary',
+        fillHover: 'surfacePrimary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
@@ -115,7 +115,7 @@ const cellAppearanceSurface = {
     },
     surfaceQuaternary: {
         fill: 'surfaceQuaternary',
-        fillHover: 'surfaceHoverQuaternary',
+        fillHover: 'surfaceQuaternary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
@@ -127,7 +127,7 @@ const cellAppearanceSurface = {
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceHoverSecondary',
+        fillHover: 'surfaceSecondary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
@@ -139,7 +139,7 @@ const cellAppearanceSurface = {
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceHoverTertiary',
+        fillHover: 'surfaceTertiary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',

package/dist/cjs/components/Checkbox.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Text = require('../../Text_cjs_BJ9NgJkx.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -24,36 +24,30 @@ require('lodash/maxBy');
 const checkboxAppearanceDefault = {
     defaultPrimary: {
         fillCheckbox: 'surfaceSecondary',
-        fillCheckboxActive: 'surfaceSecondary',
-        fillCheckboxActiveHover: 'surfaceTertiary',
-        fillCheckboxHover: 'surfaceTertiary',
-        fillCheckmark: 'surfaceBorderPrimary',
+        fillCheckboxActive: 'surfaceActiveSecondary',
+        fillCheckboxActiveHover: 'surfaceActiveHoverTertiary',
+        fillCheckboxHover: 'surfaceHoverTertiary',
+        fillCheckmark: 'surfacePrimary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColorCheckbox: 'surfaceBorderPrimary',
-        borderColorCheckboxActive: 'surfaceBorderPrimary',
-        borderColorCheckboxActiveHover: 'surfaceBorderPrimary',
-        borderColorCheckboxHover: 'surfaceBorderPrimary',
+        borderColorCheckboxActive: 'surfaceBorderActivePrimary',
+        borderColorCheckboxActiveHover: 'surfaceBorderActivePrimary',
+        borderColorCheckboxHover: 'surfaceBorderHoverPrimary',
     },
 };
 
 const checkboxAppearanceDisabled = {
     disabledPrimary: {
-        fill: 'surfaceFillDisabled',
+        fill: 'surfacePrimary',
         borderColor: 'errorBorderQuaternary',
-        borderHover: 'errorBorderQuaternary',
+        borderHover: 'errorBorderHoverQuaternary',
         textColor: 'surfaceTextQuaternary',
-        iconBeforeFill: 'errorItemQuaternary',
-        iconClearFill: 'errorItemPrimary',
-        placeholderTextColor: 'surfaceTextQuaternary',
     },
     disabledSecondary: {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
-        borderHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
-        iconClearFill: 'surfaceItemPrimary',
-        placeholderTextColor: 'surfaceTextSecondary',
+        borderHover: 'surfaceBorderHoverQuaternary',
     },
 };
 
@@ -61,48 +55,42 @@ const checkboxAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         fillCheckbox: 'errorPrimary',
-        fillCheckboxActive: 'errorPrimary',
-        fillCheckboxActiveHover: 'errorPrimary',
-        fillCheckboxHover: 'surfaceTertiary',
-        fillCheckmark: 'errorBorderPrimary',
+        fillCheckboxActive: 'errorActivePrimary',
+        fillCheckboxActiveHover: 'errorActiveHoverPrimary',
+        fillCheckboxHover: 'surfaceHoverTertiary',
+        fillCheckmark: 'errorPrimary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColorCheckbox: 'errorBorderPrimary',
-        borderColorCheckboxActive: 'errorBorderPrimary',
-        borderColorCheckboxActiveHover: 'errorBorderPrimary',
-        borderColorCheckboxHover: 'errorBorderPrimary',
+        borderColorCheckboxActive: 'errorBorderActivePrimary',
+        borderColorCheckboxActiveHover: 'errorBorderActivePrimary',
+        borderColorCheckboxHover: 'errorBorderHoverPrimary',
     },
     errorSecondary: {
         fill: 'errorSecondary',
         borderColor: 'errorBorderTertiary',
-        borderHover: 'errorBorderQuaternary',
-        iconBeforeFill: 'errorItemQuaternary',
-        iconClearFill: 'errorItemPrimary',
-        placeholderTextColor: 'errorTextSecondary',
+        borderHover: 'errorBorderHoverQuaternary',
     },
 };
 
 const checkboxAppearanceRequire = {
     requirePrimary: {
         fillCheckbox: 'warningTertiary',
-        fillCheckboxActive: 'warningPrimary',
-        fillCheckboxActiveHover: 'warningTertiary',
-        fillCheckboxHover: 'warningSecondary',
-        fillCheckmark: 'warningBorderPrimary',
-        borderColorCheckbox: 'warningBorderPrimary',
-        borderColorCheckboxActive: 'warningBorderPrimary',
-        borderColorCheckboxActiveHover: 'warningBorderPrimary',
-        borderColorCheckboxHover: 'warningBorderPrimary',
+        fillCheckboxActive: 'warningActivePrimary',
+        fillCheckboxActiveHover: 'warningActiveHoverTertiary',
+        fillCheckboxHover: 'warningHoverSecondary',
+        fillCheckmark: 'warningPrimary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
+        borderColorCheckbox: 'warningBorderPrimary',
+        borderColorCheckboxActive: 'warningBorderActivePrimary',
+        borderColorCheckboxActiveHover: 'warningBorderActivePrimary',
+        borderColorCheckboxHover: 'warningBorderHoverPrimary',
     },
     requireSecondary: {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
-        borderHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
-        iconClearFill: 'surfaceItemPrimary',
-        placeholderTextColor: 'surfaceTextSecondary',
+        borderHover: 'surfaceBorderHoverQuaternary',
     },
 };
 
@@ -154,24 +142,21 @@ const checkboxAppearanceStyle = {
 const checkboxAppearanceSuccess = {
     successPrimary: {
         fillCheckbox: 'successPrimary',
-        fillCheckboxActive: 'successPrimary',
-        fillCheckboxActiveHover: 'successTertiary',
-        fillCheckboxHover: 'successTertiary',
-        fillCheckmark: 'successBorderPrimary',
+        fillCheckboxActive: 'successActivePrimary',
+        fillCheckboxActiveHover: 'successActiveHoverTertiary',
+        fillCheckboxHover: 'successHoverTertiary',
+        fillCheckmark: 'successPrimary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColorCheckbox: 'successBorderPrimary',
-        borderColorCheckboxActive: 'successBorderPrimary',
-        borderColorCheckboxActiveHover: 'successBorderPrimary',
-        borderColorCheckboxHover: 'successBorderPrimary',
+        borderColorCheckboxActive: 'successBorderActivePrimary',
+        borderColorCheckboxActiveHover: 'successBorderActivePrimary',
+        borderColorCheckboxHover: 'successBorderHoverPrimary',
     },
     successSecondary: {
         fill: 'successSecondary',
         borderColor: 'successBorderTertiary',
-        borderHover: 'successBorderQuaternary',
-        iconBeforeFill: 'successItemQuaternary',
-        iconClearFill: 'successItemPrimary',
-        placeholderTextColor: 'successTextSecondary',
+        borderHover: 'successBorderHoverQuaternary',
     },
 };
 
@@ -211,7 +196,7 @@ function Checkbox(props) {
             ? borderColorCheckboxHoverClass &&
                 `checkbox_border-color_hover_${borderColorCheckboxHoverClass}`
             : borderColorCheckboxActiveHoverClass &&
-                `checkbox_border-color_active_hover_${borderColorCheckboxActiveHoverClass}`, widthClass && `width_${widthClass}`, isSkeleton && `checkbox_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: "checkbox__item", children: [jsxRuntime.jsx("input", { id: id, className: "checkbox__input", type: "checkbox", checked: (isActive || isChecked || checked) && 'checked', disabled: (isDisabled || disabled) && 'disabled', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx(!indeterminate
+                `checkbox_border-color_active_hover_${borderColorCheckboxActiveHoverClass}`, widthClass && `width_${widthClass}`, isSkeleton && `checkbox_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: "checkbox__item", children: [jsxRuntime.jsx("input", { id: id, className: "checkbox__input", type: "checkbox", checked: isActive || isChecked || checked, disabled: isDisabled || disabled, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx(!indeterminate
                             ? 'checkbox__state-checkmark'
                             : 'checkbox__state-indeterminate', (checked || indeterminate) &&
                             fillCheckmarkClass &&

package/dist/cjs/components/Checkmark.js

@@ -26,18 +26,17 @@ const checkmarkAppearanceAccent = {
         fillActive: 'accentPrimary',
         borderColor: 'accentBorderPrimary',
         borderWidth: '2',
-        checkmarkFill: 'accentItemPrimary',
+        checkmarkFill: 'accentPrimary',
     },
 };
 
 const checkmarkAppearanceDisabled = {
-    disabled: {
+    disabledPrimary: {
         fill: 'surfaceDisabled',
         fillActive: 'surfaceDisabled',
-        borderActiveColor: 'surfaceBorderDisabled',
         borderColor: 'surfaceBorderDisabled',
         borderWidth: '2',
-        checkmarkFill: 'surfaceItemDisabled',
+        checkmarkFill: 'surfaceDisabled',
     },
 };
 
@@ -82,21 +81,21 @@ const checkmarkAppearanceStyle = {
 const checkmarkAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillActive: 'surfacePrimary',
-        fillHover: 'surfaceHover',
+        fillActive: 'surfaceActivePrimary',
+        fillHover: 'surfacePrimary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderPrimary',
         borderWidth: '2',
-        checkmarkFill: 'surfaceItemPrimary',
+        checkmarkFill: 'surfacePrimary',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillActive: 'surfacePrimary',
-        fillHover: 'surfaceHover',
+        fillActive: 'surfaceActivePrimary',
+        fillHover: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderPrimary',
         borderWidth: '2',
-        checkmarkFill: 'surfaceItemPrimary',
+        checkmarkFill: 'surfacePrimary',
     },
 };