@itcase/ui 1.9.41 → 1.9.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/dist/{Avatar_cjs_Ctz9kEoE.js → Avatar_cjs_B_hjRkuy.js} +2 -2
  2. package/dist/{Avatar_es_2Na9ZgVL.js → Avatar_es_BgYYfuzU.js} +2 -2
  3. package/dist/{Button_cjs_Ivarkwy6.js → Button_cjs_BSfL-20W.js} +9 -4
  4. package/dist/{Button_es_ul2sDicM.js → Button_es_C2vKuxE7.js} +9 -4
  5. package/dist/{ChipsGroup_cjs_CIIf1Cyn.js → ChipsGroup_cjs_DVfNiTvV.js} +1 -1
  6. package/dist/{ChipsGroup_es_wecRqt6G.js → ChipsGroup_es_BvKmBPXK.js} +1 -1
  7. package/dist/{DatePicker_cjs_BzAzvsdV.js → DatePicker_cjs_avA-OHmZ.js} +3 -3
  8. package/dist/{DatePicker_es_CCZmi-lN.js → DatePicker_es_D7k0K2pL.js} +3 -3
  9. package/dist/{DropdownItem_cjs_nZbgMgqg.js → DropdownItem_cjs_pJblsTmA.js} +1 -1
  10. package/dist/{DropdownItem_es__mygSEH6.js → DropdownItem_es_QniQAKA2.js} +1 -1
  11. package/dist/{Icon_cjs_D20B2YBo.js → Icon_cjs_CuqEv1jm.js} +1 -1
  12. package/dist/{Icon_es_DNVHNKFK.js → Icon_es_DoAtUvPe.js} +1 -1
  13. package/dist/{Image_cjs_JfkEyfgx.js → Image_cjs_BxZFowhi.js} +6 -2
  14. package/dist/{Image_es_DbD3JzLa.js → Image_es_Bx7l_UwQ.js} +6 -2
  15. package/dist/{Label_cjs_DlbcXQX4.js → Label_cjs_DsuCRIyo.js} +24 -24
  16. package/dist/{Label_es_CbXFs_ts.js → Label_es_BHlo5f-u.js} +24 -24
  17. package/dist/{Link_cjs_DXBqPjwm.js → Link_cjs_Dn7UhCYe.js} +2 -2
  18. package/dist/{Link_es_BwLH5S8y.js → Link_es_DPZHTF38.js} +2 -2
  19. package/dist/{SelectContainer_cjs_Bd9llsQa.js → SelectContainer_cjs_DshFNYWN.js} +1 -1
  20. package/dist/{SelectContainer_es_Bqek7tN5.js → SelectContainer_es_Cr3Zset9.js} +1 -1
  21. package/dist/cjs/components/Accordion.js +2 -2
  22. package/dist/cjs/components/Avatar.js +4 -4
  23. package/dist/cjs/components/AvatarStack.js +4 -4
  24. package/dist/cjs/components/Badge.js +2 -2
  25. package/dist/cjs/components/Breadcrumbs.js +2 -2
  26. package/dist/cjs/components/Button.js +4 -3
  27. package/dist/cjs/components/Cell.js +3 -3
  28. package/dist/cjs/components/Chips.js +3 -3
  29. package/dist/cjs/components/Choice.js +2 -2
  30. package/dist/cjs/components/CookiesWarning.js +4 -3
  31. package/dist/cjs/components/DatePeriod.js +8 -7
  32. package/dist/cjs/components/DatePicker.js +6 -5
  33. package/dist/cjs/components/Drawer.js +2 -2
  34. package/dist/cjs/components/Dropdown.js +3 -3
  35. package/dist/cjs/components/HeroTitle.js +2 -2
  36. package/dist/cjs/components/Icon.js +2 -2
  37. package/dist/cjs/components/Image.js +1 -1
  38. package/dist/cjs/components/InputNumber.js +4 -3
  39. package/dist/cjs/components/InputPassword.js +2 -2
  40. package/dist/cjs/components/Label.js +3 -3
  41. package/dist/cjs/components/Link.js +1 -1
  42. package/dist/cjs/components/List.js +1 -1
  43. package/dist/cjs/components/Logo.js +1 -1
  44. package/dist/cjs/components/MenuItem.js +2 -2
  45. package/dist/cjs/components/Modal.js +2 -2
  46. package/dist/cjs/components/ModalSheetBottom.js +2 -2
  47. package/dist/cjs/components/Notification.js +4 -3
  48. package/dist/cjs/components/Pagination.js +48 -11
  49. package/dist/cjs/components/Response.js +6 -5
  50. package/dist/cjs/components/Search.js +2 -2
  51. package/dist/cjs/components/Segmented.js +2 -2
  52. package/dist/cjs/components/Select.js +3 -3
  53. package/dist/cjs/components/Swiper.js +2 -2
  54. package/dist/cjs/components/Tab.js +2 -2
  55. package/dist/cjs/components/Tile.js +5 -5
  56. package/dist/cjs/components/Title.js +2 -2
  57. package/dist/cjs/components/Tooltip.js +2 -2
  58. package/dist/cjs/components/Warning.js +2 -2
  59. package/dist/cjs/hooks/useHoldProgress.js +61 -0
  60. package/dist/components/Accordion.js +2 -2
  61. package/dist/components/Avatar.js +4 -4
  62. package/dist/components/AvatarStack.js +4 -4
  63. package/dist/components/Badge.js +2 -2
  64. package/dist/components/Breadcrumbs.js +2 -2
  65. package/dist/components/Button.js +4 -3
  66. package/dist/components/Cell.js +3 -3
  67. package/dist/components/Chips.js +3 -3
  68. package/dist/components/Choice.js +2 -2
  69. package/dist/components/CookiesWarning.js +4 -3
  70. package/dist/components/DatePeriod.js +8 -7
  71. package/dist/components/DatePicker.js +6 -5
  72. package/dist/components/Drawer.js +2 -2
  73. package/dist/components/Dropdown.js +3 -3
  74. package/dist/components/HeroTitle.js +2 -2
  75. package/dist/components/Icon.js +2 -2
  76. package/dist/components/Image.js +1 -1
  77. package/dist/components/InputNumber.js +4 -3
  78. package/dist/components/InputPassword.js +2 -2
  79. package/dist/components/Label.js +3 -3
  80. package/dist/components/Link.js +1 -1
  81. package/dist/components/List.js +1 -1
  82. package/dist/components/Logo.js +1 -1
  83. package/dist/components/MenuItem.js +2 -2
  84. package/dist/components/Modal.js +2 -2
  85. package/dist/components/ModalSheetBottom.js +2 -2
  86. package/dist/components/Notification.js +4 -3
  87. package/dist/components/Pagination.js +49 -12
  88. package/dist/components/Response.js +6 -5
  89. package/dist/components/Search.js +2 -2
  90. package/dist/components/Segmented.js +2 -2
  91. package/dist/components/Select.js +3 -3
  92. package/dist/components/Swiper.js +2 -2
  93. package/dist/components/Tab.js +2 -2
  94. package/dist/components/Tile.js +5 -5
  95. package/dist/components/Title.js +2 -2
  96. package/dist/components/Tooltip.js +2 -2
  97. package/dist/components/Warning.js +2 -2
  98. package/dist/css/mixins/mixin_typography.css +1 -1
  99. package/dist/css/styles/bundles.css +29 -2
  100. package/dist/hooks/useHoldProgress.js +59 -0
  101. package/dist/types/components/Button/Button.d.ts +2 -1
  102. package/dist/types/components/Button/Button.interface.d.ts +3 -1
  103. package/dist/types/components/Button/stories/ButtonDefault.stories.d.ts +2 -1
  104. package/dist/types/components/Button/stories/ButtonDemo.stories.d.ts +9 -1
  105. package/dist/types/components/Button/stories/ButtonIcon.stories.d.ts +2 -1
  106. package/dist/types/components/Button/stories/ButtonLabel.stories.d.ts +2 -1
  107. package/dist/types/components/Button/stories/ButtonLoading.stories.d.ts +2 -1
  108. package/dist/types/components/Button/stories/ButtonMuted.stories.d.ts +2 -1
  109. package/dist/types/components/Button/stories/ButtonMutedIcon.stories.d.ts +2 -1
  110. package/dist/types/components/Button/stories/ButtonShape.stories.d.ts +2 -1
  111. package/dist/types/components/Button/stories/ButtonSize.stories.d.ts +2 -1
  112. package/dist/types/components/Image/Image.d.ts +2 -3
  113. package/dist/types/components/Image/Image.interface.d.ts +3 -3
  114. package/dist/types/components/Image/stories/Image.stories.d.ts +5 -4
  115. package/dist/types/components/Label/Label.interface.d.ts +2 -2
  116. package/dist/types/components/Link/Link.interface.d.ts +8 -0
  117. package/dist/types/components/Pagination/Pagination.interface.d.ts +9 -3
  118. package/dist/types/components/Select/Select.interface.d.ts +2 -6
  119. package/dist/types/components/Select/SelectMultiValue.d.ts +1 -1
  120. package/dist/types/components/Tile/Tile.interface.d.ts +1 -0
  121. package/dist/types/hooks/useHoldProgress.d.ts +16 -0
  122. package/package.json +8 -10
@@ -5,8 +5,8 @@ var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
7
7
  var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
8
- var Icon = require('./Icon_cjs_D20B2YBo.js');
9
- var Image = require('./Image_cjs_JfkEyfgx.js');
8
+ var Icon = require('./Icon_cjs_CuqEv1jm.js');
9
+ var Image = require('./Image_cjs_BxZFowhi.js');
10
10
  var Text = require('./Text_cjs_erTy2pUN.js');
11
11
 
12
12
  const avatarAppearanceDefault = {
@@ -3,8 +3,8 @@ import { useMemo } from 'react';
3
3
  import clsx from 'clsx';
4
4
  import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
5
5
  import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
6
- import { I as Icon, B as Badge } from './Icon_es_DNVHNKFK.js';
7
- import { I as Image } from './Image_es_DbD3JzLa.js';
6
+ import { I as Icon, B as Badge } from './Icon_es_DoAtUvPe.js';
7
+ import { I as Image } from './Image_es_Bx7l_UwQ.js';
8
8
  import { T as Text } from './Text_es_B85LGfjW.js';
9
9
 
10
10
  const avatarAppearanceDefault = {
@@ -6,9 +6,10 @@ var clsx = require('clsx');
6
6
  var mergeAppearanceKeys = require('./cjs/utils/mergeAppearanceKeys.js');
7
7
  var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
8
8
  var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
9
+ var useHoldProgress = require('./cjs/hooks/useHoldProgress.js');
9
10
  var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
10
- var Icon = require('./Icon_cjs_D20B2YBo.js');
11
- var Link = require('./Link_cjs_DXBqPjwm.js');
11
+ var Icon = require('./Icon_cjs_CuqEv1jm.js');
12
+ var Link = require('./Link_cjs_Dn7UhCYe.js');
12
13
  var Loader = require('./Loader_cjs_DMIUN6_q.js');
13
14
  var Text = require('./Text_cjs_erTy2pUN.js');
14
15
 
@@ -389,11 +390,15 @@ const buttonConfig = {
389
390
  },
390
391
  };
391
392
  const Button = React.forwardRef(function Button(props, ref) {
392
- const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, tooltip, before, after, isDisabled, isLoading = false, onClick, onMouseDown, children, } = props;
393
+ const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, tooltip, before, after, isDisabled, isHolding, isLoading = false, onClick, onHoldComplete, onMouseDown, children, } = props;
393
394
  const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, buttonConfig, isDisabled);
394
395
  const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
395
396
  const { fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextTruncate, labelTextWeight, labelTextWidth, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, icon, iconAfter, iconAfterAppearance, iconAfterAppearanceSize, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconAppearance, iconAppearanceSize, iconBefore, iconBeforeAppearance, iconBeforeAppearanceSize, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'simple', shapeClass, shapeStrengthClass, sizeClass, widthClass, zeroGap, zeroPadding, isSkeleton, } = propsGenerator;
396
397
  const { label: labelStyles, styles: buttonStyles } = useStyles.useStyles(props);
398
+ const { holdState, onHoldEnd, onHoldStart } = useHoldProgress.useHoldProgress({
399
+ holdDurationMs: 500, // hardcoded in button.css
400
+ onHoldComplete: onHoldComplete,
401
+ });
397
402
  const buttonTypeClass = after ||
398
403
  before ||
399
404
  icon ||
@@ -408,7 +413,7 @@ const Button = React.forwardRef(function Button(props, ref) {
408
413
  ? 'button_type_label'
409
414
  : buttonTypeClass
410
415
  ? 'button_type_icon'
411
- : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, title: tooltip, "data-testid": dataTestId && `${dataTestId}-button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
416
+ : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && 'button_skeleton', isHolding && 'button_holding', holdState && `button_state_${holdState}`), type: htmlType, title: tooltip, "data-testid": dataTestId && `${dataTestId}-button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onHoldEnd, onPointerDown: onHoldStart, onPointerLeave: onHoldEnd, onPointerUp: onHoldEnd, children: jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [isHolding && (jsxRuntime.jsx("div", { className: clsx('button__indication', `button__indication_${holdState}`), children: jsxRuntime.jsx("div", { className: "button__indication-item", children: "\u00A0" }) })), isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
412
417
  });
413
418
 
414
419
  exports.Button = Button;
@@ -4,9 +4,10 @@ import clsx from 'clsx';
4
4
  import { mergeAppearanceKeys } from './utils/mergeAppearanceKeys.js';
5
5
  import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
6
6
  import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
7
+ import { useHoldProgress } from './hooks/useHoldProgress.js';
7
8
  import { useStyles } from './hooks/useStyles/useStyles.js';
8
- import { I as Icon } from './Icon_es_DNVHNKFK.js';
9
- import { a as LinkWrapper } from './Link_es_BwLH5S8y.js';
9
+ import { I as Icon } from './Icon_es_DoAtUvPe.js';
10
+ import { a as LinkWrapper } from './Link_es_DPZHTF38.js';
10
11
  import { L as Loader } from './Loader_es_DFSNJsLL.js';
11
12
  import { T as Text } from './Text_es_B85LGfjW.js';
12
13
 
@@ -387,11 +388,15 @@ const buttonConfig = {
387
388
  },
388
389
  };
389
390
  const Button = React.forwardRef(function Button(props, ref) {
390
- const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, tooltip, before, after, isDisabled, isLoading = false, onClick, onMouseDown, children, } = props;
391
+ const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, tooltip, before, after, isDisabled, isHolding, isLoading = false, onClick, onHoldComplete, onMouseDown, children, } = props;
391
392
  const appearanceConfig = useAppearanceConfig(appearance, buttonConfig, isDisabled);
392
393
  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
393
394
  const { fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextTruncate, labelTextWeight, labelTextWidth, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, icon, iconAfter, iconAfterAppearance, iconAfterAppearanceSize, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconAppearance, iconAppearanceSize, iconBefore, iconBeforeAppearance, iconBeforeAppearanceSize, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'simple', shapeClass, shapeStrengthClass, sizeClass, widthClass, zeroGap, zeroPadding, isSkeleton, } = propsGenerator;
394
395
  const { label: labelStyles, styles: buttonStyles } = useStyles(props);
396
+ const { holdState, onHoldEnd, onHoldStart } = useHoldProgress({
397
+ holdDurationMs: 500, // hardcoded in button.css
398
+ onHoldComplete: onHoldComplete,
399
+ });
395
400
  const buttonTypeClass = after ||
396
401
  before ||
397
402
  icon ||
@@ -406,7 +411,7 @@ const Button = React.forwardRef(function Button(props, ref) {
406
411
  ? 'button_type_label'
407
412
  : buttonTypeClass
408
413
  ? 'button_type_icon'
409
- : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, title: tooltip, "data-testid": dataTestId && `${dataTestId}-button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
414
+ : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && 'button_skeleton', isHolding && 'button_holding', holdState && `button_state_${holdState}`), type: htmlType, title: tooltip, "data-testid": dataTestId && `${dataTestId}-button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onHoldEnd, onPointerDown: onHoldStart, onPointerLeave: onHoldEnd, onPointerUp: onHoldEnd, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [isHolding && (jsx("div", { className: clsx('button__indication', `button__indication_${holdState}`), children: jsx("div", { className: "button__indication-item", children: "\u00A0" }) })), isLoading && (jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
410
415
  });
411
416
 
412
417
  export { Button as B, buttonAppearance as a, buttonConfig as b };
@@ -5,7 +5,7 @@ var clsx = require('clsx');
5
5
  var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
6
6
  var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
7
7
  var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
8
- var Icon = require('./Icon_cjs_D20B2YBo.js');
8
+ var Icon = require('./Icon_cjs_CuqEv1jm.js');
9
9
  var Text = require('./Text_cjs_erTy2pUN.js');
10
10
 
11
11
  const chipsAppearanceAccent = {
@@ -3,7 +3,7 @@ import clsx from 'clsx';
3
3
  import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
4
4
  import { useStyles } from './hooks/useStyles/useStyles.js';
5
5
  import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
6
- import { I as Icon, B as Badge } from './Icon_es_DNVHNKFK.js';
6
+ import { I as Icon, B as Badge } from './Icon_es_DoAtUvPe.js';
7
7
  import { T as Text } from './Text_es_B85LGfjW.js';
8
8
 
9
9
  const chipsAppearanceAccent = {
@@ -8,10 +8,10 @@ var DatePicker = require('react-datepicker');
8
8
  var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
9
9
  var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
10
10
  var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
11
- var Button = require('./Button_cjs_Ivarkwy6.js');
12
- var Icon = require('./Icon_cjs_D20B2YBo.js');
11
+ var Button = require('./Button_cjs_BSfL-20W.js');
12
+ var Icon = require('./Icon_cjs_CuqEv1jm.js');
13
13
  var Input = require('./Input_cjs_BQIi1N63.js');
14
- var Label = require('./Label_cjs_DlbcXQX4.js');
14
+ var Label = require('./Label_cjs_DsuCRIyo.js');
15
15
  var Text = require('./Text_cjs_erTy2pUN.js');
16
16
  var _default = require('@itcase/icons/default');
17
17
 
@@ -6,10 +6,10 @@ import DatePicker from 'react-datepicker';
6
6
  import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
7
7
  import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
8
8
  import { useStyles } from './hooks/useStyles/useStyles.js';
9
- import { B as Button } from './Button_es_ul2sDicM.js';
10
- import { I as Icon } from './Icon_es_DNVHNKFK.js';
9
+ import { B as Button } from './Button_es_C2vKuxE7.js';
10
+ import { I as Icon } from './Icon_es_DoAtUvPe.js';
11
11
  import { I as Input } from './Input_es_CYUPx5I_.js';
12
- import { L as Label } from './Label_es_CbXFs_ts.js';
12
+ import { L as Label } from './Label_es_BHlo5f-u.js';
13
13
  import { T as Text } from './Text_es_B85LGfjW.js';
14
14
  import { icons14 } from '@itcase/icons/default';
15
15
 
@@ -6,7 +6,7 @@ var clsx = require('clsx');
6
6
  var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
7
7
  var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
8
8
  var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
9
- var Icon = require('./Icon_cjs_D20B2YBo.js');
9
+ var Icon = require('./Icon_cjs_CuqEv1jm.js');
10
10
  var Divider = require('./Divider_cjs_C5Ou2Kqa.js');
11
11
  var Text = require('./Text_cjs_erTy2pUN.js');
12
12
 
@@ -4,7 +4,7 @@ import clsx from 'clsx';
4
4
  import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
5
5
  import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
6
6
  import { useStyles } from './hooks/useStyles/useStyles.js';
7
- import { I as Icon, B as Badge } from './Icon_es_DNVHNKFK.js';
7
+ import { I as Icon, B as Badge } from './Icon_es_DoAtUvPe.js';
8
8
  import { D as Divider } from './Divider_es_BR7ZO8w0.js';
9
9
  import { T as Text } from './Text_es_B85LGfjW.js';
10
10
 
@@ -8,7 +8,7 @@ var urlWithAssetPrefix = require('./cjs/hoc/urlWithAssetPrefix.js');
8
8
  var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
9
9
  var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
10
10
  var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
11
- var Link = require('./Link_cjs_DXBqPjwm.js');
11
+ var Link = require('./Link_cjs_Dn7UhCYe.js');
12
12
  var Text = require('./Text_cjs_erTy2pUN.js');
13
13
 
14
14
  const badgeAppearanceAccent = {
@@ -6,7 +6,7 @@ import { urlWithAssetPrefix } from './hoc/urlWithAssetPrefix.js';
6
6
  import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
7
7
  import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
8
8
  import { useStyles } from './hooks/useStyles/useStyles.js';
9
- import { a as LinkWrapper } from './Link_es_BwLH5S8y.js';
9
+ import { a as LinkWrapper } from './Link_es_DPZHTF38.js';
10
10
  import { T as Text } from './Text_es_B85LGfjW.js';
11
11
 
12
12
  const badgeAppearanceAccent = {
@@ -13,7 +13,7 @@ const Image = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Im
13
13
  const { fillClass, fillHoverClass, borderColorClass, borderColorImageClass, borderTypeClass, borderWidthClass, cursorClass, heightClass, horizontalAlignClass, imageHeightClass, imageWidthClass, resizeModeClass, shapeClass, verticalAlignClass, widthClass, } = propsGenerator;
14
14
  const { image: imageStyles, styles, wrapper: wrapperStyles, } = useStyles.useStyles(props);
15
15
  const onErrorImage = React.useCallback((event) => {
16
- const img = event.currentTarget;
16
+ const img = event.target;
17
17
  if (onError) {
18
18
  onError(event);
19
19
  }
@@ -21,9 +21,13 @@ const Image = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Im
21
21
  img.src = placeholderUrl;
22
22
  }
23
23
  }, [onError, placeholderUrl]);
24
+ // If src and placeholderUrl are both not provided, use UNKNOWN_IMAGE_SRC to trigger onError
25
+ const imageSrc = src || placeholderUrl || UNKNOWN_IMAGE_SRC;
24
26
  return (jsxRuntime.jsxs("div", { className: clsx(className, 'image', mode && `image_mode_${mode}`, type && `image_type_${type}`, cursorClass && `cursor_${cursorClass}`, horizontalAlignClass &&
25
27
  `image_horizontal-align_${horizontalAlignClass}`, verticalAlignClass && `image_vertical-align_${verticalAlignClass}`, shapeClass && `image_shape_${shapeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, resizeModeClass && `image_resize-mode_${resizeModeClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, isSkeleton && 'image_skeleton'), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: styles, onClick: onClick, children: [before, jsxRuntime.jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsxRuntime.jsx("img", { className: clsx('image__item', imageWidthClass && `width_${imageWidthClass}`, imageHeightClass && `height_${imageHeightClass}`, imageClassName, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderColorImageClass &&
26
- `border-color-image_${borderColorImageClass}`), src: src, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
28
+ `border-color-image_${borderColorImageClass}`), src: imageSrc, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
27
29
  }));
30
+ // Make it random to not accidentally match a real image URL
31
+ const UNKNOWN_IMAGE_SRC = `unknown-image-${Math.random()}`;
28
32
 
29
33
  exports.Image = Image;
@@ -11,7 +11,7 @@ const Image = urlWithAssetPrefix(forwardRef(function Image(props, ref) {
11
11
  const { fillClass, fillHoverClass, borderColorClass, borderColorImageClass, borderTypeClass, borderWidthClass, cursorClass, heightClass, horizontalAlignClass, imageHeightClass, imageWidthClass, resizeModeClass, shapeClass, verticalAlignClass, widthClass, } = propsGenerator;
12
12
  const { image: imageStyles, styles, wrapper: wrapperStyles, } = useStyles(props);
13
13
  const onErrorImage = useCallback((event) => {
14
- const img = event.currentTarget;
14
+ const img = event.target;
15
15
  if (onError) {
16
16
  onError(event);
17
17
  }
@@ -19,9 +19,13 @@ const Image = urlWithAssetPrefix(forwardRef(function Image(props, ref) {
19
19
  img.src = placeholderUrl;
20
20
  }
21
21
  }, [onError, placeholderUrl]);
22
+ // If src and placeholderUrl are both not provided, use UNKNOWN_IMAGE_SRC to trigger onError
23
+ const imageSrc = src || placeholderUrl || UNKNOWN_IMAGE_SRC;
22
24
  return (jsxs("div", { className: clsx(className, 'image', mode && `image_mode_${mode}`, type && `image_type_${type}`, cursorClass && `cursor_${cursorClass}`, horizontalAlignClass &&
23
25
  `image_horizontal-align_${horizontalAlignClass}`, verticalAlignClass && `image_vertical-align_${verticalAlignClass}`, shapeClass && `image_shape_${shapeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, resizeModeClass && `image_resize-mode_${resizeModeClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, isSkeleton && 'image_skeleton'), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: styles, onClick: onClick, children: [before, jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsx("img", { className: clsx('image__item', imageWidthClass && `width_${imageWidthClass}`, imageHeightClass && `height_${imageHeightClass}`, imageClassName, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderColorImageClass &&
24
- `border-color-image_${borderColorImageClass}`), src: src, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
26
+ `border-color-image_${borderColorImageClass}`), src: imageSrc, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
25
27
  }));
28
+ // Make it random to not accidentally match a real image URL
29
+ const UNKNOWN_IMAGE_SRC = `unknown-image-${Math.random()}`;
26
30
 
27
31
  export { Image as I };
@@ -6,7 +6,7 @@ var clsx = require('clsx');
6
6
  var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
7
7
  var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
8
8
  var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
9
- var Icon = require('./Icon_cjs_D20B2YBo.js');
9
+ var Icon = require('./Icon_cjs_CuqEv1jm.js');
10
10
  var Text = require('./Text_cjs_erTy2pUN.js');
11
11
 
12
12
  const labelAppearanceAccent = {
@@ -59,16 +59,16 @@ const labelAppearanceDisabled = {
59
59
 
60
60
  const labelAppearanceError = {
61
61
  errorMutedPrimary: {
62
- fill: 'errorDisabled',
62
+ fill: 'errorTertiary',
63
63
  labelTextColor: 'errorTextQuaternary',
64
- borderColor: 'errorBorderSecondary',
64
+ borderColor: 'errorBorderQuaternary',
65
65
  iconAfterFillIcon: 'errorItemQuaternary',
66
66
  iconBeforeFillIcon: 'errorItemQuaternary',
67
67
  },
68
68
  errorPrimary: {
69
69
  fill: 'errorPrimary',
70
70
  labelTextColor: 'errorTextPrimary',
71
- borderColor: 'errorBorderSecondary',
71
+ borderColor: 'errorBorderQuaternary',
72
72
  iconAfterFillIcon: 'errorItemPrimary',
73
73
  iconBeforeFillIcon: 'errorItemPrimary',
74
74
  },
@@ -76,16 +76,16 @@ const labelAppearanceError = {
76
76
 
77
77
  const labelAppearanceExtra = {
78
78
  extraMutedPrimary: {
79
- fill: 'extraDisabled',
79
+ fill: 'extraTertiary',
80
80
  labelTextColor: 'extraTextQuaternary',
81
- borderColor: 'extraBorderPrimary',
81
+ borderColor: 'extraBorderSecondary',
82
82
  iconAfterFillIcon: 'extraItemQuaternary',
83
83
  iconBeforeFillIcon: 'extraItemQuaternary',
84
84
  },
85
85
  extraPrimary: {
86
86
  fill: 'extraPrimary',
87
87
  labelTextColor: 'extraTextPrimary',
88
- borderColor: 'extraBorderPrimary',
88
+ borderColor: 'extraBorderSecondary',
89
89
  iconAfterFillIcon: 'extraItemPrimary',
90
90
  iconBeforeFillIcon: 'extraItemPrimary',
91
91
  },
@@ -102,14 +102,14 @@ const labelAppearanceGradient = {
102
102
  };
103
103
 
104
104
  const labelAppearanceInfo = {
105
- infoPrimary: {
106
- fill: 'infoPrimary',
107
- labelTextColor: 'infoTextPrimary',
108
- borderColor: 'infoBorderPrimary',
109
- iconAfterFillIcon: 'infoItemPrimary',
110
- iconBeforeFillIcon: 'infoItemPrimary',
105
+ infoMutedPrimary: {
106
+ fill: 'infoTertiary',
107
+ labelTextColor: 'infoTextSecondary',
108
+ borderColor: 'infoBorderSecondary',
109
+ iconAfterFillIcon: 'infoItemSecondary',
110
+ iconBeforeFillIcon: 'infoItemSecondary',
111
111
  },
112
- infoSecondary: {
112
+ infoPrimary: {
113
113
  fill: 'infoPrimary',
114
114
  labelTextColor: 'infoTextPrimary',
115
115
  borderColor: 'infoBorderSecondary',
@@ -204,18 +204,18 @@ const labelAppearanceSize = {
204
204
 
205
205
  const labelAppearanceSpecial = {
206
206
  specialMutedPrimary: {
207
- fill: 'specialDisabled',
208
- labelTextColor: 'specialTextSecondary',
209
- borderColor: 'specialBorderTertiary',
210
- iconAfterFillIcon: 'specialItemSecondary',
211
- iconBeforeFillIcon: 'specialItemSecondary',
207
+ fill: 'specialTertiary',
208
+ labelTextColor: 'specialTextQuaternary',
209
+ borderColor: 'specialBorderSecondary',
210
+ iconAfterFillIcon: 'specialItemQuaternary',
211
+ iconBeforeFillIcon: 'specialItemQuaternary',
212
212
  },
213
213
  specialPrimary: {
214
- fill: 'specialDisabled',
215
- labelTextColor: 'specialTextSecondary',
216
- borderColor: 'specialBorderTertiary',
217
- iconAfterFillIcon: 'specialItemSecondary',
218
- iconBeforeFillIcon: 'specialItemSecondary',
214
+ fill: 'specialPrimary',
215
+ labelTextColor: 'specialTextPrimary',
216
+ borderColor: 'specialBorderSecondary',
217
+ iconAfterFillIcon: 'specialItemPrimary',
218
+ iconBeforeFillIcon: 'specialItemPrimary',
219
219
  },
220
220
  };
221
221
 
@@ -4,7 +4,7 @@ import clsx from 'clsx';
4
4
  import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
5
5
  import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
6
6
  import { useStyles } from './hooks/useStyles/useStyles.js';
7
- import { I as Icon, T as Tooltip } from './Icon_es_DNVHNKFK.js';
7
+ import { I as Icon, T as Tooltip } from './Icon_es_DoAtUvPe.js';
8
8
  import { T as Text } from './Text_es_B85LGfjW.js';
9
9
 
10
10
  const labelAppearanceAccent = {
@@ -57,16 +57,16 @@ const labelAppearanceDisabled = {
57
57
 
58
58
  const labelAppearanceError = {
59
59
  errorMutedPrimary: {
60
- fill: 'errorDisabled',
60
+ fill: 'errorTertiary',
61
61
  labelTextColor: 'errorTextQuaternary',
62
- borderColor: 'errorBorderSecondary',
62
+ borderColor: 'errorBorderQuaternary',
63
63
  iconAfterFillIcon: 'errorItemQuaternary',
64
64
  iconBeforeFillIcon: 'errorItemQuaternary',
65
65
  },
66
66
  errorPrimary: {
67
67
  fill: 'errorPrimary',
68
68
  labelTextColor: 'errorTextPrimary',
69
- borderColor: 'errorBorderSecondary',
69
+ borderColor: 'errorBorderQuaternary',
70
70
  iconAfterFillIcon: 'errorItemPrimary',
71
71
  iconBeforeFillIcon: 'errorItemPrimary',
72
72
  },
@@ -74,16 +74,16 @@ const labelAppearanceError = {
74
74
 
75
75
  const labelAppearanceExtra = {
76
76
  extraMutedPrimary: {
77
- fill: 'extraDisabled',
77
+ fill: 'extraTertiary',
78
78
  labelTextColor: 'extraTextQuaternary',
79
- borderColor: 'extraBorderPrimary',
79
+ borderColor: 'extraBorderSecondary',
80
80
  iconAfterFillIcon: 'extraItemQuaternary',
81
81
  iconBeforeFillIcon: 'extraItemQuaternary',
82
82
  },
83
83
  extraPrimary: {
84
84
  fill: 'extraPrimary',
85
85
  labelTextColor: 'extraTextPrimary',
86
- borderColor: 'extraBorderPrimary',
86
+ borderColor: 'extraBorderSecondary',
87
87
  iconAfterFillIcon: 'extraItemPrimary',
88
88
  iconBeforeFillIcon: 'extraItemPrimary',
89
89
  },
@@ -100,14 +100,14 @@ const labelAppearanceGradient = {
100
100
  };
101
101
 
102
102
  const labelAppearanceInfo = {
103
- infoPrimary: {
104
- fill: 'infoPrimary',
105
- labelTextColor: 'infoTextPrimary',
106
- borderColor: 'infoBorderPrimary',
107
- iconAfterFillIcon: 'infoItemPrimary',
108
- iconBeforeFillIcon: 'infoItemPrimary',
103
+ infoMutedPrimary: {
104
+ fill: 'infoTertiary',
105
+ labelTextColor: 'infoTextSecondary',
106
+ borderColor: 'infoBorderSecondary',
107
+ iconAfterFillIcon: 'infoItemSecondary',
108
+ iconBeforeFillIcon: 'infoItemSecondary',
109
109
  },
110
- infoSecondary: {
110
+ infoPrimary: {
111
111
  fill: 'infoPrimary',
112
112
  labelTextColor: 'infoTextPrimary',
113
113
  borderColor: 'infoBorderSecondary',
@@ -202,18 +202,18 @@ const labelAppearanceSize = {
202
202
 
203
203
  const labelAppearanceSpecial = {
204
204
  specialMutedPrimary: {
205
- fill: 'specialDisabled',
206
- labelTextColor: 'specialTextSecondary',
207
- borderColor: 'specialBorderTertiary',
208
- iconAfterFillIcon: 'specialItemSecondary',
209
- iconBeforeFillIcon: 'specialItemSecondary',
205
+ fill: 'specialTertiary',
206
+ labelTextColor: 'specialTextQuaternary',
207
+ borderColor: 'specialBorderSecondary',
208
+ iconAfterFillIcon: 'specialItemQuaternary',
209
+ iconBeforeFillIcon: 'specialItemQuaternary',
210
210
  },
211
211
  specialPrimary: {
212
- fill: 'specialDisabled',
213
- labelTextColor: 'specialTextSecondary',
214
- borderColor: 'specialBorderTertiary',
215
- iconAfterFillIcon: 'specialItemSecondary',
216
- iconBeforeFillIcon: 'specialItemSecondary',
212
+ fill: 'specialPrimary',
213
+ labelTextColor: 'specialTextPrimary',
214
+ borderColor: 'specialBorderSecondary',
215
+ iconAfterFillIcon: 'specialItemPrimary',
216
+ iconBeforeFillIcon: 'specialItemPrimary',
217
217
  },
218
218
  };
219
219
 
@@ -239,7 +239,7 @@ const linkConfig = {
239
239
  },
240
240
  };
241
241
  function Link(props) {
242
- const { appearance, className, dataTestId, dataTour, text, href, link, LinkComponent, rel, style, target, before, after, isDisabled, onClick, onMouseDown, children, } = props;
242
+ const { appearance, className, dataTestId, dataTour, text, href, link, LinkComponent, rel, style, target, before, after, isDisabled, onClick, onMouseDown, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, children, } = props;
243
243
  const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, linkConfig, isDisabled);
244
244
  const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
245
245
  const { directionClass, fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorClass, textColorHoverClass, textGradientClass, textStyleClass, textWeightClass, heightClass, shapeClass, sizeClass, svgFillClass, svgFillHoverClass, underline = 'underline', widthClass, } = propsGenerator;
@@ -249,7 +249,7 @@ function Link(props) {
249
249
  textGradientClass ||
250
250
  textStyleClass ||
251
251
  textWeightClass) &&
252
- 'text', textColorClass && `text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`, textGradientClass && `text-gradient_${textGradientClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `link_shape_${shapeClass}`), "data-testid": dataTestId, "data-tour": dataTour, href: href || link, LinkComponent: LinkComponent, rel: rel, style: Object.assign({}, styles, style), target: target, onClick: onClick, onMouseDown: onMouseDown, children: [before, children || text, after] }));
252
+ 'text', textColorClass && `text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`, textGradientClass && `text-gradient_${textGradientClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `link_shape_${shapeClass}`), "data-testid": dataTestId, "data-tour": dataTour, href: href || link, LinkComponent: LinkComponent, rel: rel, style: Object.assign({}, styles, style), target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onPointerCancel, onPointerDown: onPointerDown, onPointerLeave: onPointerLeave, onPointerUp: onPointerUp, children: [before, children || text, after] }));
253
253
  }
254
254
  function LinkWrapper(props) {
255
255
  const { href, LinkComponent, rel, target, children, ...otherProps } = props;
@@ -237,7 +237,7 @@ const linkConfig = {
237
237
  },
238
238
  };
239
239
  function Link(props) {
240
- const { appearance, className, dataTestId, dataTour, text, href, link, LinkComponent, rel, style, target, before, after, isDisabled, onClick, onMouseDown, children, } = props;
240
+ const { appearance, className, dataTestId, dataTour, text, href, link, LinkComponent, rel, style, target, before, after, isDisabled, onClick, onMouseDown, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, children, } = props;
241
241
  const appearanceConfig = useAppearanceConfig(appearance, linkConfig, isDisabled);
242
242
  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
243
243
  const { directionClass, fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorClass, textColorHoverClass, textGradientClass, textStyleClass, textWeightClass, heightClass, shapeClass, sizeClass, svgFillClass, svgFillHoverClass, underline = 'underline', widthClass, } = propsGenerator;
@@ -247,7 +247,7 @@ function Link(props) {
247
247
  textGradientClass ||
248
248
  textStyleClass ||
249
249
  textWeightClass) &&
250
- 'text', textColorClass && `text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`, textGradientClass && `text-gradient_${textGradientClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `link_shape_${shapeClass}`), "data-testid": dataTestId, "data-tour": dataTour, href: href || link, LinkComponent: LinkComponent, rel: rel, style: Object.assign({}, styles, style), target: target, onClick: onClick, onMouseDown: onMouseDown, children: [before, children || text, after] }));
250
+ 'text', textColorClass && `text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`, textGradientClass && `text-gradient_${textGradientClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `link_shape_${shapeClass}`), "data-testid": dataTestId, "data-tour": dataTour, href: href || link, LinkComponent: LinkComponent, rel: rel, style: Object.assign({}, styles, style), target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onPointerCancel, onPointerDown: onPointerDown, onPointerLeave: onPointerLeave, onPointerUp: onPointerUp, children: [before, children || text, after] }));
251
251
  }
252
252
  function LinkWrapper(props) {
253
253
  const { href, LinkComponent, rel, target, children, ...otherProps } = props;
@@ -10,7 +10,7 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
10
10
  var Group = require('./Group_cjs_xCUYKUcc.js');
11
11
  var Text = require('./Text_cjs_erTy2pUN.js');
12
12
  var _default = require('@itcase/icons/default');
13
- var Icon = require('./Icon_cjs_D20B2YBo.js');
13
+ var Icon = require('./Icon_cjs_CuqEv1jm.js');
14
14
  var Loader = require('./Loader_cjs_DMIUN6_q.js');
15
15
  var mergeAppearanceKeys = require('./cjs/utils/mergeAppearanceKeys.js');
16
16
  var Divider = require('./Divider_cjs_C5Ou2Kqa.js');
@@ -8,7 +8,7 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
8
8
  import { G as Group } from './Group_es_BVpRj4LR.js';
9
9
  import { T as Text } from './Text_es_B85LGfjW.js';
10
10
  import { icons12, icons16, icons14, icons24 } from '@itcase/icons/default';
11
- import { I as Icon, B as Badge } from './Icon_es_DNVHNKFK.js';
11
+ import { I as Icon, B as Badge } from './Icon_es_DoAtUvPe.js';
12
12
  import { L as Loader } from './Loader_es_DFSNJsLL.js';
13
13
  import { mergeAppearanceKeys } from './utils/mergeAppearanceKeys.js';
14
14
  import { D as Divider } from './Divider_es_BR7ZO8w0.js';
@@ -8,7 +8,7 @@ var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevic
8
8
  var useStyles = require('../hooks/useStyles/useStyles.js');
9
9
  var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
10
10
  var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
11
- var Icon = require('../../Icon_cjs_D20B2YBo.js');
11
+ var Icon = require('../../Icon_cjs_CuqEv1jm.js');
12
12
  var Divider = require('../../Divider_cjs_C5Ou2Kqa.js');
13
13
  var Text = require('../../Text_cjs_erTy2pUN.js');
14
14
  var _default = require('@itcase/icons/default');
@@ -27,7 +27,7 @@ require('lodash/maxBy');
27
27
  require('react-inlinesvg');
28
28
  require('../hoc/urlWithAssetPrefix.js');
29
29
  require('../context/UrlAssetPrefix.js');
30
- require('../../Link_cjs_DXBqPjwm.js');
30
+ require('../../Link_cjs_Dn7UhCYe.js');
31
31
 
32
32
  const accordionAppearanceSize = {
33
33
  sizeXXL: {
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Avatar = require('../../Avatar_cjs_Ctz9kEoE.js');
3
+ var Avatar = require('../../Avatar_cjs_B_hjRkuy.js');
4
4
  require('react/jsx-runtime');
5
5
  require('react');
6
6
  require('clsx');
@@ -18,15 +18,15 @@ require('react-responsive');
18
18
  require('../utils/setViewportProperty.js');
19
19
  require('../hooks.js');
20
20
  require('../hooks/useStyles/styleAttributes.js');
21
- require('../../Icon_cjs_D20B2YBo.js');
21
+ require('../../Icon_cjs_CuqEv1jm.js');
22
22
  require('react-inlinesvg');
23
23
  require('../hoc/urlWithAssetPrefix.js');
24
24
  require('../context/UrlAssetPrefix.js');
25
25
  require('../hooks/useStyles/useStyles.js');
26
26
  require('lodash/maxBy');
27
- require('../../Link_cjs_DXBqPjwm.js');
27
+ require('../../Link_cjs_Dn7UhCYe.js');
28
28
  require('../../Text_cjs_erTy2pUN.js');
29
- require('../../Image_cjs_JfkEyfgx.js');
29
+ require('../../Image_cjs_BxZFowhi.js');
30
30
 
31
31
 
32
32
 
@@ -6,7 +6,7 @@ var mergeAppearanceKeys = require('../utils/mergeAppearanceKeys.js');
6
6
  var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
7
7
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
8
8
  var useStyles = require('../hooks/useStyles/useStyles.js');
9
- var Avatar = require('../../Avatar_cjs_Ctz9kEoE.js');
9
+ var Avatar = require('../../Avatar_cjs_B_hjRkuy.js');
10
10
  var Group = require('../../Group_cjs_xCUYKUcc.js');
11
11
  var Text = require('../../Text_cjs_erTy2pUN.js');
12
12
  require('react');
@@ -23,12 +23,12 @@ require('../utils/setViewportProperty.js');
23
23
  require('../hooks.js');
24
24
  require('../hooks/useStyles/styleAttributes.js');
25
25
  require('lodash/maxBy');
26
- require('../../Icon_cjs_D20B2YBo.js');
26
+ require('../../Icon_cjs_CuqEv1jm.js');
27
27
  require('react-inlinesvg');
28
28
  require('../hoc/urlWithAssetPrefix.js');
29
29
  require('../context/UrlAssetPrefix.js');
30
- require('../../Link_cjs_DXBqPjwm.js');
31
- require('../../Image_cjs_JfkEyfgx.js');
30
+ require('../../Link_cjs_Dn7UhCYe.js');
31
+ require('../../Image_cjs_BxZFowhi.js');
32
32
 
33
33
  const avatarStackAppearanceSize = {
34
34
  size16: {