@hh.ru/magritte-ui-tag 5.3.26 → 5.4.0

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 (8) hide show
  1. package/Tag.d.ts +5 -2
  2. package/Tag.js +16 -11
  3. package/Tag.js.map +1 -1
  4. package/index.css +251 -61
  5. package/index.js +1 -0
  6. package/index.js.map +1 -1
  7. package/package.json +4 -2
  8. package/types.d.ts +9 -0
package/Tag.d.ts CHANGED
@@ -1,4 +1,7 @@
1
+ import { type RefAttributes } from 'react';
1
2
  import type { TagIconProps, TagLabelProps } from '@hh.ru/magritte-ui-tag/types';
2
3
  export declare const TAG_HIGHLIGHT_ANIMATION_CYCLE: number;
3
- export declare function Tag(props: TagIconProps): React.ReactElement;
4
- export declare function Tag(props: TagLabelProps): React.ReactElement;
4
+ export declare const Tag: {
5
+ (props: TagIconProps & RefAttributes<HTMLDivElement>): React.ReactElement;
6
+ (props: TagLabelProps & RefAttributes<HTMLDivElement>): React.ReactElement;
7
+ };
package/Tag.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import './index.css';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
- import { useRef, useLayoutEffect, cloneElement } from 'react';
3
+ import { forwardRef, useRef, useLayoutEffect, cloneElement } from 'react';
4
4
  import classnames from 'classnames';
5
5
  import { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';
6
+ import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
6
7
  import { IconDynamic } from '@hh.ru/magritte-ui-icon';
7
8
  import { isIconElement } from '@hh.ru/magritte-ui-icon/types';
8
9
 
9
- var styles = {"tag":"magritte-tag___WdGxk_5-3-26","tag_style-neutral":"magritte-tag_style-neutral___cw1Bt_5-3-26","tagStyleNeutral":"magritte-tag_style-neutral___cw1Bt_5-3-26","tag__label":"magritte-tag__label___YHV-o_5-3-26","tagLabel":"magritte-tag__label___YHV-o_5-3-26","icon-color-override":"magritte-icon-color-override___z7Qmm_5-3-26","iconColorOverride":"magritte-icon-color-override___z7Qmm_5-3-26","on-surface":"magritte-on-surface___-0Bc4_5-3-26","onSurface":"magritte-on-surface___-0Bc4_5-3-26","tag_state-disabled":"magritte-tag_state-disabled___2su23_5-3-26","tagStateDisabled":"magritte-tag_state-disabled___2su23_5-3-26","disabled-icon-color-override":"magritte-disabled-icon-color-override___E6mEW_5-3-26","disabledIconColorOverride":"magritte-disabled-icon-color-override___E6mEW_5-3-26","tag_style-positive":"magritte-tag_style-positive___o2Zfe_5-3-26","tagStylePositive":"magritte-tag_style-positive___o2Zfe_5-3-26","tag_style-negative":"magritte-tag_style-negative___-HbQe_5-3-26","tagStyleNegative":"magritte-tag_style-negative___-HbQe_5-3-26","tag_style-special":"magritte-tag_style-special___-IqT-_5-3-26","tagStyleSpecial":"magritte-tag_style-special___-IqT-_5-3-26","tag_style-warning":"magritte-tag_style-warning___4xBGB_5-3-26","tagStyleWarning":"magritte-tag_style-warning___4xBGB_5-3-26","tag_style-accent":"magritte-tag_style-accent___WCqKw_5-3-26","tagStyleAccent":"magritte-tag_style-accent___WCqKw_5-3-26","tag_size-medium":"magritte-tag_size-medium___Splpy_5-3-26","tagSizeMedium":"magritte-tag_size-medium___Splpy_5-3-26","tag__icon":"magritte-tag__icon___Avk97_5-3-26","tagIcon":"magritte-tag__icon___Avk97_5-3-26","tag_size-large":"magritte-tag_size-large___SWuug_5-3-26","tagSizeLarge":"magritte-tag_size-large___SWuug_5-3-26","tag_highlight":"magritte-tag_highlight___RmDYp_5-3-26","tagHighlight":"magritte-tag_highlight___RmDYp_5-3-26","tag-highlight-shine":"magritte-tag-highlight-shine___8ZFPr_5-3-26","tagHighlightShine":"magritte-tag-highlight-shine___8ZFPr_5-3-26"};
10
+ var styles = {"tag":"magritte-tag___WdGxk_5-4-0","tag-dashed":"magritte-tag-dashed___IqnQe_5-4-0","tagDashed":"magritte-tag-dashed___IqnQe_5-4-0","tag__label":"magritte-tag__label___YHV-o_5-4-0","tagLabel":"magritte-tag__label___YHV-o_5-4-0","tag_style-neutral":"magritte-tag_style-neutral___cw1Bt_5-4-0","tagStyleNeutral":"magritte-tag_style-neutral___cw1Bt_5-4-0","icon-color-override":"magritte-icon-color-override___z7Qmm_5-4-0","iconColorOverride":"magritte-icon-color-override___z7Qmm_5-4-0","on-surface":"magritte-on-surface___-0Bc4_5-4-0","onSurface":"magritte-on-surface___-0Bc4_5-4-0","tag_state-disabled":"magritte-tag_state-disabled___2su23_5-4-0","tagStateDisabled":"magritte-tag_state-disabled___2su23_5-4-0","disabled-icon-color-override":"magritte-disabled-icon-color-override___E6mEW_5-4-0","disabledIconColorOverride":"magritte-disabled-icon-color-override___E6mEW_5-4-0","tag_style-positive":"magritte-tag_style-positive___o2Zfe_5-4-0","tagStylePositive":"magritte-tag_style-positive___o2Zfe_5-4-0","tag_style-negative":"magritte-tag_style-negative___-HbQe_5-4-0","tagStyleNegative":"magritte-tag_style-negative___-HbQe_5-4-0","tag_style-special":"magritte-tag_style-special___-IqT-_5-4-0","tagStyleSpecial":"magritte-tag_style-special___-IqT-_5-4-0","tag_style-warning":"magritte-tag_style-warning___4xBGB_5-4-0","tagStyleWarning":"magritte-tag_style-warning___4xBGB_5-4-0","tag_style-accent":"magritte-tag_style-accent___WCqKw_5-4-0","tagStyleAccent":"magritte-tag_style-accent___WCqKw_5-4-0","tag_size-medium":"magritte-tag_size-medium___Splpy_5-4-0","tagSizeMedium":"magritte-tag_size-medium___Splpy_5-4-0","tag__icon":"magritte-tag__icon___Avk97_5-4-0","tagIcon":"magritte-tag__icon___Avk97_5-4-0","tag_size-large":"magritte-tag_size-large___SWuug_5-4-0","tagSizeLarge":"magritte-tag_size-large___SWuug_5-4-0","tag_highlight":"magritte-tag_highlight___RmDYp_5-4-0","tagHighlight":"magritte-tag_highlight___RmDYp_5-4-0","tag-highlight-shine":"magritte-tag-highlight-shine___8ZFPr_5-4-0","tagHighlightShine":"magritte-tag-highlight-shine___8ZFPr_5-4-0"};
10
11
 
11
12
  const TAG_HIGHLIGHT_MOTION = 1440;
12
13
  const TAG_HIGHLIGHT_PAUSE = 2500;
@@ -33,8 +34,9 @@ const STYLE_TO_CSS = {
33
34
  neutral: styles.tagStyleNeutral,
34
35
  accent: styles.tagStyleAccent,
35
36
  };
36
- function Tag({ style = 'neutral', size = 'medium', disabled = false, hideLabel, icon, highlight = false, 'aria-label': ariaLabel, children, onSurface, 'data-qa': dataQa, }) {
37
+ const TagComponent = ({ style = 'neutral', size = 'medium', disabled = false, hideLabel, icon, highlight = false, dashed = false, onClick, 'aria-label': ariaLabel, children, onSurface, 'data-qa': dataQa, }, ref) => {
37
38
  const tagRef = useRef(null);
39
+ const tagRefMulti = useMultipleRefs(tagRef, ref);
38
40
  const showLabel = !hideLabel && children;
39
41
  const isDisabled = useDisabled() || disabled;
40
42
  const withIcon = isIconElement(icon) && icon.type._size === 16;
@@ -59,14 +61,17 @@ function Tag({ style = 'neutral', size = 'medium', disabled = false, hideLabel,
59
61
  cancelAnimationFrame(animationFrameId);
60
62
  };
61
63
  }, [isHighlightEnabled]);
62
- return (jsxs("div", { ref: tagRef, className: classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {
63
- [styles.tagStateDisabled]: isDisabled,
64
- [styles.tagHighlight]: isHighlightEnabled,
65
- [styles.iconColorOverride]: withIcon && !isDisabled && !('initialColor' in icon.props || 'hex' in icon.props),
66
- [styles.disabledIconColorOverride]: withIcon && isDisabled && !('disabledColor' in icon.props || 'hexDisabled' in icon.props),
67
- [styles.onSurface]: onSurface,
68
- }), "aria-disabled": isDisabled, "data-qa": dataQa, children: [withIcon && (jsx(DisabledContext.Provider, { value: isDisabled, children: jsx(IconDynamic, { hoverEnabled: false, pressEnabled: false, children: jsx("div", { className: styles.tagIcon, children: cloneElement(icon, { 'aria-label': !showLabel ? ariaLabel : undefined }) }) }) })), showLabel && jsx("div", { className: styles.tagLabel, children: children })] }));
69
- }
64
+ const className = classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {
65
+ [styles.tagStateDisabled]: isDisabled,
66
+ [styles.tagHighlight]: isHighlightEnabled,
67
+ [styles.tagDashed]: dashed,
68
+ [styles.iconColorOverride]: withIcon && !isDisabled && !('initialColor' in icon.props || 'hex' in icon.props),
69
+ [styles.disabledIconColorOverride]: withIcon && isDisabled && !('disabledColor' in icon.props || 'hexDisabled' in icon.props),
70
+ [styles.onSurface]: onSurface,
71
+ });
72
+ return (jsxs("div", { ref: tagRefMulti, className: className, "aria-disabled": isDisabled, onClick: dashed && !isDisabled ? onClick : undefined, "data-qa": dataQa, children: [withIcon && (jsx(DisabledContext.Provider, { value: isDisabled, children: jsx(IconDynamic, { hoverEnabled: false, pressEnabled: false, children: jsx("div", { className: styles.tagIcon, children: cloneElement(icon, { 'aria-label': !showLabel ? ariaLabel : undefined }) }) }) })), showLabel && jsx("div", { className: styles.tagLabel, children: children })] }));
73
+ };
74
+ const Tag = forwardRef(TagComponent);
70
75
 
71
76
  export { TAG_HIGHLIGHT_ANIMATION_CYCLE, Tag };
72
77
  //# sourceMappingURL=Tag.js.map
package/Tag.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.js","sources":["src/Tag.tsx"],"sourcesContent":["import { cloneElement, useLayoutEffect, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { DisabledContext, useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { type IconWrapperComponentSize16, isIconElement } from '@hh.ru/magritte-ui-icon/types';\nimport type { TagIconProps, TagLabelProps } from '@hh.ru/magritte-ui-tag/types';\n\nimport styles from './tag.less';\n\nconst TAG_HIGHLIGHT_MOTION = 1440;\nconst TAG_HIGHLIGHT_PAUSE = 2500;\nexport const TAG_HIGHLIGHT_ANIMATION_CYCLE = TAG_HIGHLIGHT_MOTION + TAG_HIGHLIGHT_PAUSE;\n\nconst TAG_HIGHLIGHT_DELAY_PROPERTY = '--tag-highlight-delay';\nconst TAG_HIGHLIGHT_DURATION_PROPERTY = '--tag-highlight-duration';\nconst TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE = 'animationSynced';\n\nconst getTagHighlightDelay = (): number => {\n const phase = Date.now() % TAG_HIGHLIGHT_ANIMATION_CYCLE;\n\n if (phase === 0) {\n return 0;\n }\n\n return phase < TAG_HIGHLIGHT_MOTION ? TAG_HIGHLIGHT_ANIMATION_CYCLE - phase : -phase;\n};\n\nconst SIZE_TO_CSS = {\n large: styles.tagSizeLarge,\n medium: styles.tagSizeMedium,\n};\n\nconst STYLE_TO_CSS = {\n special: styles.tagStyleSpecial,\n warning: styles.tagStyleWarning,\n positive: styles.tagStylePositive,\n negative: styles.tagStyleNegative,\n neutral: styles.tagStyleNeutral,\n accent: styles.tagStyleAccent,\n};\n\nexport function Tag(props: TagIconProps): React.ReactElement;\nexport function Tag(props: TagLabelProps): React.ReactElement;\n\nexport function Tag({\n style = 'neutral',\n size = 'medium',\n disabled = false,\n hideLabel,\n icon,\n highlight = false,\n 'aria-label': ariaLabel,\n children,\n onSurface,\n 'data-qa': dataQa,\n}: TagIconProps | TagLabelProps): React.ReactElement {\n const tagRef = useRef<HTMLDivElement>(null);\n const showLabel = !hideLabel && children;\n const isDisabled = useDisabled() || disabled;\n const withIcon = isIconElement(icon) && (icon.type as IconWrapperComponentSize16)._size === 16;\n const isHighlightEnabled = highlight && !isDisabled;\n\n useLayoutEffect(() => {\n const tagEl = tagRef.current;\n if (!isHighlightEnabled || !tagEl) {\n tagEl?.style.removeProperty(TAG_HIGHLIGHT_DELAY_PROPERTY);\n tagEl?.style.removeProperty(TAG_HIGHLIGHT_DURATION_PROPERTY);\n delete tagEl?.dataset[TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE];\n return undefined;\n }\n tagEl.style.setProperty(TAG_HIGHLIGHT_DURATION_PROPERTY, `${TAG_HIGHLIGHT_ANIMATION_CYCLE}ms`);\n // During hydration, synchronous animation-delay setup via useLayoutEffect\n // does not guarantee proper phase alignment. raf ensures correct timing.\n const animationFrameId = requestAnimationFrame(() => {\n const syncedDelay = getTagHighlightDelay();\n tagEl.style.setProperty(TAG_HIGHLIGHT_DELAY_PROPERTY, `${syncedDelay}ms`);\n tagEl.dataset[TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE] = 'true';\n });\n return () => {\n cancelAnimationFrame(animationFrameId);\n };\n }, [isHighlightEnabled]);\n\n return (\n <div\n ref={tagRef}\n className={classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {\n [styles.tagStateDisabled]: isDisabled,\n [styles.tagHighlight]: isHighlightEnabled,\n [styles.iconColorOverride]:\n withIcon && !isDisabled && !('initialColor' in icon.props || 'hex' in icon.props),\n [styles.disabledIconColorOverride]:\n withIcon && isDisabled && !('disabledColor' in icon.props || 'hexDisabled' in icon.props),\n [styles.onSurface]: onSurface,\n })}\n aria-disabled={isDisabled}\n data-qa={dataQa}\n >\n {withIcon && (\n <DisabledContext.Provider value={isDisabled}>\n <IconDynamic hoverEnabled={false} pressEnabled={false}>\n <div className={styles.tagIcon}>\n {cloneElement(icon, { 'aria-label': !showLabel ? ariaLabel : undefined })}\n </div>\n </IconDynamic>\n </DisabledContext.Provider>\n )}\n {showLabel && <div className={styles.tagLabel}>{children}</div>}\n </div>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"Tag.js","sources":["src/Tag.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useLayoutEffect, useRef, type ForwardedRef, type RefAttributes } from 'react';\nimport classnames from 'classnames';\n\nimport { DisabledContext, useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { type IconWrapperComponentSize16, isIconElement } from '@hh.ru/magritte-ui-icon/types';\nimport type { TagIconProps, TagLabelProps } from '@hh.ru/magritte-ui-tag/types';\n\nimport styles from './tag.less';\n\nconst TAG_HIGHLIGHT_MOTION = 1440;\nconst TAG_HIGHLIGHT_PAUSE = 2500;\nexport const TAG_HIGHLIGHT_ANIMATION_CYCLE = TAG_HIGHLIGHT_MOTION + TAG_HIGHLIGHT_PAUSE;\n\nconst TAG_HIGHLIGHT_DELAY_PROPERTY = '--tag-highlight-delay';\nconst TAG_HIGHLIGHT_DURATION_PROPERTY = '--tag-highlight-duration';\nconst TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE = 'animationSynced';\n\nconst getTagHighlightDelay = (): number => {\n const phase = Date.now() % TAG_HIGHLIGHT_ANIMATION_CYCLE;\n\n if (phase === 0) {\n return 0;\n }\n\n return phase < TAG_HIGHLIGHT_MOTION ? TAG_HIGHLIGHT_ANIMATION_CYCLE - phase : -phase;\n};\n\nconst SIZE_TO_CSS = {\n large: styles.tagSizeLarge,\n medium: styles.tagSizeMedium,\n};\n\nconst STYLE_TO_CSS = {\n special: styles.tagStyleSpecial,\n warning: styles.tagStyleWarning,\n positive: styles.tagStylePositive,\n negative: styles.tagStyleNegative,\n neutral: styles.tagStyleNeutral,\n accent: styles.tagStyleAccent,\n};\n\nconst TagComponent = (\n {\n style = 'neutral',\n size = 'medium',\n disabled = false,\n hideLabel,\n icon,\n highlight = false,\n dashed = false,\n onClick,\n 'aria-label': ariaLabel,\n children,\n onSurface,\n 'data-qa': dataQa,\n }: TagIconProps | TagLabelProps,\n ref: ForwardedRef<HTMLDivElement>\n): React.ReactElement => {\n const tagRef = useRef<HTMLDivElement>(null);\n const tagRefMulti = useMultipleRefs(tagRef, ref);\n const showLabel = !hideLabel && children;\n const isDisabled = useDisabled() || disabled;\n const withIcon = isIconElement(icon) && (icon.type as IconWrapperComponentSize16)._size === 16;\n const isHighlightEnabled = highlight && !isDisabled;\n\n useLayoutEffect(() => {\n const tagEl = tagRef.current;\n if (!isHighlightEnabled || !tagEl) {\n tagEl?.style.removeProperty(TAG_HIGHLIGHT_DELAY_PROPERTY);\n tagEl?.style.removeProperty(TAG_HIGHLIGHT_DURATION_PROPERTY);\n delete tagEl?.dataset[TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE];\n return undefined;\n }\n tagEl.style.setProperty(TAG_HIGHLIGHT_DURATION_PROPERTY, `${TAG_HIGHLIGHT_ANIMATION_CYCLE}ms`);\n // During hydration, synchronous animation-delay setup via useLayoutEffect\n // does not guarantee proper phase alignment. raf ensures correct timing.\n const animationFrameId = requestAnimationFrame(() => {\n const syncedDelay = getTagHighlightDelay();\n tagEl.style.setProperty(TAG_HIGHLIGHT_DELAY_PROPERTY, `${syncedDelay}ms`);\n tagEl.dataset[TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE] = 'true';\n });\n return () => {\n cancelAnimationFrame(animationFrameId);\n };\n }, [isHighlightEnabled]);\n\n const className = classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {\n [styles.tagStateDisabled]: isDisabled,\n [styles.tagHighlight]: isHighlightEnabled,\n [styles.tagDashed]: dashed,\n [styles.iconColorOverride]: withIcon && !isDisabled && !('initialColor' in icon.props || 'hex' in icon.props),\n [styles.disabledIconColorOverride]:\n withIcon && isDisabled && !('disabledColor' in icon.props || 'hexDisabled' in icon.props),\n [styles.onSurface]: onSurface,\n });\n\n return (\n <div\n ref={tagRefMulti}\n className={className}\n aria-disabled={isDisabled}\n onClick={dashed && !isDisabled ? onClick : undefined}\n data-qa={dataQa}\n >\n {withIcon && (\n <DisabledContext.Provider value={isDisabled}>\n <IconDynamic hoverEnabled={false} pressEnabled={false}>\n <div className={styles.tagIcon}>\n {cloneElement(icon, { 'aria-label': !showLabel ? ariaLabel : undefined })}\n </div>\n </IconDynamic>\n </DisabledContext.Provider>\n )}\n {showLabel && <div className={styles.tagLabel}>{children}</div>}\n </div>\n );\n};\n\nexport const Tag = forwardRef(TagComponent) as {\n (props: TagIconProps & RefAttributes<HTMLDivElement>): React.ReactElement;\n (props: TagLabelProps & RefAttributes<HTMLDivElement>): React.ReactElement;\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
package/index.css CHANGED
@@ -23,6 +23,30 @@
23
23
  --magritte-color-component-tag-background-state-on-surface-warning-disabled-v25-1-0:#ffffff7a;
24
24
  --magritte-color-component-tag-background-state-on-surface-special-disabled-v25-1-0:#ffffff7a;
25
25
  --magritte-color-component-tag-background-state-on-surface-accent-disabled-v25-1-0:#ffffff7a;
26
+ --magritte-color-component-tag-background-state-neutral-hovered-v25-1-0:#F4F6FB;
27
+ --magritte-color-component-tag-background-state-positive-hovered-v25-1-0:#f0fbf3;
28
+ --magritte-color-component-tag-background-state-negative-hovered-v25-1-0:#fff6f4;
29
+ --magritte-color-component-tag-background-state-warning-hovered-v25-1-0:#fff7ee;
30
+ --magritte-color-component-tag-background-state-special-hovered-v25-1-0:#f9f7ff;
31
+ --magritte-color-component-tag-background-state-accent-hovered-v25-1-0:#f3f9ff;
32
+ --magritte-color-component-tag-background-state-neutral-pressed-v25-1-0:#F1F4F9;
33
+ --magritte-color-component-tag-background-state-positive-pressed-v25-1-0:#E8F9EC;
34
+ --magritte-color-component-tag-background-state-negative-pressed-v25-1-0:#FEF2EF;
35
+ --magritte-color-component-tag-background-state-warning-pressed-v25-1-0:#FFF3E6;
36
+ --magritte-color-component-tag-background-state-special-pressed-v25-1-0:#F7F4FF;
37
+ --magritte-color-component-tag-background-state-accent-pressed-v25-1-0:#EDF6FF;
38
+ --magritte-color-component-tag-background-state-on-surface-neutral-hovered-v25-1-0:#ffffff;
39
+ --magritte-color-component-tag-background-state-on-surface-positive-hovered-v25-1-0:#ffffff;
40
+ --magritte-color-component-tag-background-state-on-surface-negative-hovered-v25-1-0:#ffffff;
41
+ --magritte-color-component-tag-background-state-on-surface-warning-hovered-v25-1-0:#ffffff;
42
+ --magritte-color-component-tag-background-state-on-surface-special-hovered-v25-1-0:#ffffff;
43
+ --magritte-color-component-tag-background-state-on-surface-accent-hovered-v25-1-0:#ffffff;
44
+ --magritte-color-component-tag-background-state-on-surface-neutral-pressed-v25-1-0:#ffffff;
45
+ --magritte-color-component-tag-background-state-on-surface-positive-pressed-v25-1-0:#ffffff;
46
+ --magritte-color-component-tag-background-state-on-surface-negative-pressed-v25-1-0:#ffffff;
47
+ --magritte-color-component-tag-background-state-on-surface-warning-pressed-v25-1-0:#ffffff;
48
+ --magritte-color-component-tag-background-state-on-surface-special-pressed-v25-1-0:#ffffff;
49
+ --magritte-color-component-tag-background-state-on-surface-accent-pressed-v25-1-0:#ffffff;
26
50
  --magritte-color-component-tag-text-neutral-v25-1-0:#000000;
27
51
  --magritte-color-component-tag-text-positive-v25-1-0:#10b55f;
28
52
  --magritte-color-component-tag-text-negative-v25-1-0:#ee4735;
@@ -94,10 +118,37 @@
94
118
  --magritte-color-component-tag-background-state-on-surface-warning-disabled-v25-1-0:#1b1b1b7a;
95
119
  --magritte-color-component-tag-background-state-on-surface-special-disabled-v25-1-0:#1b1b1b7a;
96
120
  --magritte-color-component-tag-background-state-on-surface-accent-disabled-v25-1-0:#1b1b1b7a;
121
+ --magritte-color-component-tag-background-state-neutral-hovered-v25-1-0:#3B3B3B;
122
+ --magritte-color-component-tag-background-state-positive-hovered-v25-1-0:#012d13;
123
+ --magritte-color-component-tag-background-state-negative-hovered-v25-1-0:#4c1008;
124
+ --magritte-color-component-tag-background-state-warning-hovered-v25-1-0:#3D270E;
125
+ --magritte-color-component-tag-background-state-special-hovered-v25-1-0:#2F293C;
126
+ --magritte-color-component-tag-background-state-neutral-pressed-v25-1-0:#303030;
127
+ --magritte-color-component-tag-background-state-accent-pressed-v25-1-0:#222D3D;
128
+ --magritte-color-component-tag-background-state-positive-pressed-v25-1-0:#16321F;
129
+ --magritte-color-component-tag-background-state-negative-pressed-v25-1-0:#3D2622;
130
+ --magritte-color-component-tag-background-state-warning-pressed-v25-1-0:#3D270E;
131
+ --magritte-color-component-tag-background-state-special-pressed-v25-1-0:#2F293C;
132
+ --magritte-color-component-tag-background-state-accent-hovered-v25-1-0:#00235a;
133
+ --magritte-color-component-tag-background-state-on-surface-neutral-hovered-v25-1-0:#1B1B1B;
134
+ --magritte-color-component-tag-background-state-on-surface-positive-hovered-v25-1-0:#1B1B1B;
135
+ --magritte-color-component-tag-background-state-on-surface-negative-hovered-v25-1-0:#1B1B1B;
136
+ --magritte-color-component-tag-background-state-on-surface-warning-hovered-v25-1-0:#1B1B1B;
137
+ --magritte-color-component-tag-background-state-on-surface-special-hovered-v25-1-0:#1B1B1B;
138
+ --magritte-color-component-tag-background-state-on-surface-accent-hovered-v25-1-0:#1B1B1B;
139
+ --magritte-color-component-tag-background-state-on-surface-neutral-pressed-v25-1-0:#1B1B1B;
140
+ --magritte-color-component-tag-background-state-on-surface-positive-pressed-v25-1-0:#1B1B1B;
141
+ --magritte-color-component-tag-background-state-on-surface-negative-pressed-v25-1-0:#1B1B1B;
142
+ --magritte-color-component-tag-background-state-on-surface-warning-pressed-v25-1-0:#1B1B1B;
143
+ --magritte-color-component-tag-background-state-on-surface-special-pressed-v25-1-0:#1B1B1B;
144
+ --magritte-color-component-tag-background-state-on-surface-accent-pressed-v25-1-0:#1B1B1B;
97
145
  }
98
146
 
99
147
  .magritte-zp-day-theme{
100
148
  --magritte-color-component-tag-background-accent-v25-1-0:#F1F4F7;
149
+ --magritte-color-component-tag-background-state-warning-hovered-v25-1-0:#FFF3E6;
150
+ --magritte-color-component-tag-background-state-accent-hovered-v25-1-0:#F9FAFB;
151
+ --magritte-color-component-tag-background-state-accent-pressed-v25-1-0:#F1F4F7;
101
152
  --magritte-color-component-tag-text-positive-v25-1-0:#00984f;
102
153
  --magritte-color-component-tag-text-accent-v25-1-0:#7195AF;
103
154
  --magritte-color-component-tag-text-state-neutral-disabled-v25-1-0:#5e6c777a;
@@ -109,7 +160,7 @@
109
160
  --magritte-color-component-tag-icon-state-warning-disabled-v25-1-0:#ac66007a;
110
161
  --magritte-color-component-tag-icon-state-accent-disabled-v25-1-0:#B1C5D3;
111
162
  }
112
- .magritte-tag___WdGxk_5-3-26{
163
+ .magritte-tag___WdGxk_5-4-0{
113
164
  display:inline-flex;
114
165
  align-items:center;
115
166
  justify-content:center;
@@ -117,151 +168,290 @@
117
168
  overflow:hidden;
118
169
  isolation:isolate;
119
170
  }
120
- .magritte-tag_style-neutral___cw1Bt_5-3-26{
171
+ .magritte-tag-dashed___IqnQe_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
172
+ text-decoration-line:underline;
173
+ text-decoration-style:dotted;
174
+ text-decoration-thickness:10%;
175
+ text-underline-offset:auto;
176
+ text-decoration-skip-ink:auto;
177
+ }
178
+ .magritte-tag_style-neutral___cw1Bt_5-4-0{
121
179
  background-color:var(--magritte-color-component-tag-background-neutral-v25-1-0);
122
180
  }
123
- .magritte-tag_style-neutral___cw1Bt_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
181
+ .magritte-tag_style-neutral___cw1Bt_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
124
182
  color:var(--magritte-color-component-tag-text-neutral-v25-1-0);
125
183
  }
126
- .magritte-tag_style-neutral___cw1Bt_5-3-26.magritte-icon-color-override___z7Qmm_5-3-26{
184
+ .magritte-tag_style-neutral___cw1Bt_5-4-0.magritte-icon-color-override___z7Qmm_5-4-0{
127
185
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-neutral-v25-1-0);
128
186
  }
129
- .magritte-tag_style-neutral___cw1Bt_5-3-26.magritte-on-surface___-0Bc4_5-3-26{
187
+ .magritte-tag_style-neutral___cw1Bt_5-4-0.magritte-on-surface___-0Bc4_5-4-0{
130
188
  background-color:var(--magritte-color-component-tag-background-on-surface-neutral-v25-1-0);
131
189
  }
132
- .magritte-tag_style-neutral___cw1Bt_5-3-26.magritte-tag_state-disabled___2su23_5-3-26{
190
+ .magritte-tag_style-neutral___cw1Bt_5-4-0.magritte-tag_state-disabled___2su23_5-4-0{
133
191
  background-color:var(--magritte-color-component-tag-background-state-neutral-disabled-v25-1-0);
134
192
  }
135
- .magritte-tag_style-neutral___cw1Bt_5-3-26.magritte-tag_state-disabled___2su23_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
193
+ .magritte-tag_style-neutral___cw1Bt_5-4-0.magritte-tag_state-disabled___2su23_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
136
194
  color:var(--magritte-color-component-tag-text-state-neutral-disabled-v25-1-0);
137
195
  }
138
- .magritte-tag_style-neutral___cw1Bt_5-3-26.magritte-tag_state-disabled___2su23_5-3-26.magritte-disabled-icon-color-override___E6mEW_5-3-26{
196
+ .magritte-tag_style-neutral___cw1Bt_5-4-0.magritte-tag_state-disabled___2su23_5-4-0.magritte-disabled-icon-color-override___E6mEW_5-4-0{
139
197
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-neutral-disabled-v25-1-0);
140
198
  }
141
- .magritte-tag_style-neutral___cw1Bt_5-3-26.magritte-tag_state-disabled___2su23_5-3-26.magritte-on-surface___-0Bc4_5-3-26{
199
+ .magritte-tag_style-neutral___cw1Bt_5-4-0.magritte-tag_state-disabled___2su23_5-4-0.magritte-on-surface___-0Bc4_5-4-0{
142
200
  background-color:var(--magritte-color-component-tag-background-state-on-surface-neutral-disabled-v25-1-0);
143
201
  }
144
- .magritte-tag_style-positive___o2Zfe_5-3-26{
202
+ @media (min-width: 1020px){
203
+ body.magritte-old-layout .magritte-tag_style-neutral___cw1Bt_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):hover{
204
+ background-color:var(--magritte-color-component-tag-background-state-neutral-hovered-v25-1-0);
205
+ }
206
+ body.magritte-old-layout .magritte-tag_style-neutral___cw1Bt_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:hover{
207
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-neutral-hovered-v25-1-0);
208
+ }
209
+ }
210
+ @media (min-width: 1024px){
211
+ body:not(.magritte-old-layout) .magritte-tag_style-neutral___cw1Bt_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):hover{
212
+ background-color:var(--magritte-color-component-tag-background-state-neutral-hovered-v25-1-0);
213
+ }
214
+ body:not(.magritte-old-layout) .magritte-tag_style-neutral___cw1Bt_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:hover{
215
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-neutral-hovered-v25-1-0);
216
+ }
217
+ }
218
+ .magritte-tag_style-neutral___cw1Bt_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):active{
219
+ background-color:var(--magritte-color-component-tag-background-state-neutral-pressed-v25-1-0);
220
+ }
221
+ .magritte-tag_style-neutral___cw1Bt_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:active{
222
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-neutral-pressed-v25-1-0);
223
+ }
224
+ .magritte-tag_style-positive___o2Zfe_5-4-0{
145
225
  background-color:var(--magritte-color-component-tag-background-positive-v25-1-0);
146
226
  }
147
- .magritte-tag_style-positive___o2Zfe_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
227
+ .magritte-tag_style-positive___o2Zfe_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
148
228
  color:var(--magritte-color-component-tag-text-positive-v25-1-0);
149
229
  }
150
- .magritte-tag_style-positive___o2Zfe_5-3-26.magritte-icon-color-override___z7Qmm_5-3-26{
230
+ .magritte-tag_style-positive___o2Zfe_5-4-0.magritte-icon-color-override___z7Qmm_5-4-0{
151
231
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-positive-v25-1-0);
152
232
  }
153
- .magritte-tag_style-positive___o2Zfe_5-3-26.magritte-on-surface___-0Bc4_5-3-26{
233
+ .magritte-tag_style-positive___o2Zfe_5-4-0.magritte-on-surface___-0Bc4_5-4-0{
154
234
  background-color:var(--magritte-color-component-tag-background-on-surface-positive-v25-1-0);
155
235
  }
156
- .magritte-tag_style-positive___o2Zfe_5-3-26.magritte-tag_state-disabled___2su23_5-3-26{
236
+ .magritte-tag_style-positive___o2Zfe_5-4-0.magritte-tag_state-disabled___2su23_5-4-0{
157
237
  background-color:var(--magritte-color-component-tag-background-state-positive-disabled-v25-1-0);
158
238
  }
159
- .magritte-tag_style-positive___o2Zfe_5-3-26.magritte-tag_state-disabled___2su23_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
239
+ .magritte-tag_style-positive___o2Zfe_5-4-0.magritte-tag_state-disabled___2su23_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
160
240
  color:var(--magritte-color-component-tag-text-state-positive-disabled-v25-1-0);
161
241
  }
162
- .magritte-tag_style-positive___o2Zfe_5-3-26.magritte-tag_state-disabled___2su23_5-3-26.magritte-disabled-icon-color-override___E6mEW_5-3-26{
242
+ .magritte-tag_style-positive___o2Zfe_5-4-0.magritte-tag_state-disabled___2su23_5-4-0.magritte-disabled-icon-color-override___E6mEW_5-4-0{
163
243
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-positive-disabled-v25-1-0);
164
244
  }
165
- .magritte-tag_style-positive___o2Zfe_5-3-26.magritte-tag_state-disabled___2su23_5-3-26.magritte-on-surface___-0Bc4_5-3-26{
245
+ .magritte-tag_style-positive___o2Zfe_5-4-0.magritte-tag_state-disabled___2su23_5-4-0.magritte-on-surface___-0Bc4_5-4-0{
166
246
  background-color:var(--magritte-color-component-tag-background-state-on-surface-positive-disabled-v25-1-0);
167
247
  }
168
- .magritte-tag_style-negative___-HbQe_5-3-26{
248
+ @media (min-width: 1020px){
249
+ body.magritte-old-layout .magritte-tag_style-positive___o2Zfe_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):hover{
250
+ background-color:var(--magritte-color-component-tag-background-state-positive-hovered-v25-1-0);
251
+ }
252
+ body.magritte-old-layout .magritte-tag_style-positive___o2Zfe_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:hover{
253
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-positive-hovered-v25-1-0);
254
+ }
255
+ }
256
+ @media (min-width: 1024px){
257
+ body:not(.magritte-old-layout) .magritte-tag_style-positive___o2Zfe_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):hover{
258
+ background-color:var(--magritte-color-component-tag-background-state-positive-hovered-v25-1-0);
259
+ }
260
+ body:not(.magritte-old-layout) .magritte-tag_style-positive___o2Zfe_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:hover{
261
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-positive-hovered-v25-1-0);
262
+ }
263
+ }
264
+ .magritte-tag_style-positive___o2Zfe_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):active{
265
+ background-color:var(--magritte-color-component-tag-background-state-positive-pressed-v25-1-0);
266
+ }
267
+ .magritte-tag_style-positive___o2Zfe_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:active{
268
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-positive-pressed-v25-1-0);
269
+ }
270
+ .magritte-tag_style-negative___-HbQe_5-4-0{
169
271
  background-color:var(--magritte-color-component-tag-background-negative-v25-1-0);
170
272
  }
171
- .magritte-tag_style-negative___-HbQe_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
273
+ .magritte-tag_style-negative___-HbQe_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
172
274
  color:var(--magritte-color-component-tag-text-negative-v25-1-0);
173
275
  }
174
- .magritte-tag_style-negative___-HbQe_5-3-26.magritte-icon-color-override___z7Qmm_5-3-26{
276
+ .magritte-tag_style-negative___-HbQe_5-4-0.magritte-icon-color-override___z7Qmm_5-4-0{
175
277
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-negative-v25-1-0);
176
278
  }
177
- .magritte-tag_style-negative___-HbQe_5-3-26.magritte-on-surface___-0Bc4_5-3-26{
279
+ .magritte-tag_style-negative___-HbQe_5-4-0.magritte-on-surface___-0Bc4_5-4-0{
178
280
  background-color:var(--magritte-color-component-tag-background-on-surface-negative-v25-1-0);
179
281
  }
180
- .magritte-tag_style-negative___-HbQe_5-3-26.magritte-tag_state-disabled___2su23_5-3-26{
282
+ .magritte-tag_style-negative___-HbQe_5-4-0.magritte-tag_state-disabled___2su23_5-4-0{
181
283
  background-color:var(--magritte-color-component-tag-background-state-negative-disabled-v25-1-0);
182
284
  }
183
- .magritte-tag_style-negative___-HbQe_5-3-26.magritte-tag_state-disabled___2su23_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
285
+ .magritte-tag_style-negative___-HbQe_5-4-0.magritte-tag_state-disabled___2su23_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
184
286
  color:var(--magritte-color-component-tag-text-state-negative-disabled-v25-1-0);
185
287
  }
186
- .magritte-tag_style-negative___-HbQe_5-3-26.magritte-tag_state-disabled___2su23_5-3-26.magritte-disabled-icon-color-override___E6mEW_5-3-26{
288
+ .magritte-tag_style-negative___-HbQe_5-4-0.magritte-tag_state-disabled___2su23_5-4-0.magritte-disabled-icon-color-override___E6mEW_5-4-0{
187
289
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-negative-disabled-v25-1-0);
188
290
  }
189
- .magritte-tag_style-negative___-HbQe_5-3-26.magritte-tag_state-disabled___2su23_5-3-26.magritte-on-surface___-0Bc4_5-3-26{
291
+ .magritte-tag_style-negative___-HbQe_5-4-0.magritte-tag_state-disabled___2su23_5-4-0.magritte-on-surface___-0Bc4_5-4-0{
190
292
  background-color:var(--magritte-color-component-tag-background-state-on-surface-negative-disabled-v25-1-0);
191
293
  }
192
- .magritte-tag_style-special___-IqT-_5-3-26{
294
+ @media (min-width: 1020px){
295
+ body.magritte-old-layout .magritte-tag_style-negative___-HbQe_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):hover{
296
+ background-color:var(--magritte-color-component-tag-background-state-negative-hovered-v25-1-0);
297
+ }
298
+ body.magritte-old-layout .magritte-tag_style-negative___-HbQe_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:hover{
299
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-negative-hovered-v25-1-0);
300
+ }
301
+ }
302
+ @media (min-width: 1024px){
303
+ body:not(.magritte-old-layout) .magritte-tag_style-negative___-HbQe_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):hover{
304
+ background-color:var(--magritte-color-component-tag-background-state-negative-hovered-v25-1-0);
305
+ }
306
+ body:not(.magritte-old-layout) .magritte-tag_style-negative___-HbQe_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:hover{
307
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-negative-hovered-v25-1-0);
308
+ }
309
+ }
310
+ .magritte-tag_style-negative___-HbQe_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):active{
311
+ background-color:var(--magritte-color-component-tag-background-state-negative-pressed-v25-1-0);
312
+ }
313
+ .magritte-tag_style-negative___-HbQe_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:active{
314
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-negative-pressed-v25-1-0);
315
+ }
316
+ .magritte-tag_style-special___-IqT-_5-4-0{
193
317
  background-color:var(--magritte-color-component-tag-background-special-v25-1-0);
194
318
  }
195
- .magritte-tag_style-special___-IqT-_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
319
+ .magritte-tag_style-special___-IqT-_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
196
320
  color:var(--magritte-color-component-tag-text-special-v25-1-0);
197
321
  }
198
- .magritte-tag_style-special___-IqT-_5-3-26.magritte-icon-color-override___z7Qmm_5-3-26{
322
+ .magritte-tag_style-special___-IqT-_5-4-0.magritte-icon-color-override___z7Qmm_5-4-0{
199
323
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-special-v25-1-0);
200
324
  }
201
- .magritte-tag_style-special___-IqT-_5-3-26.magritte-on-surface___-0Bc4_5-3-26{
325
+ .magritte-tag_style-special___-IqT-_5-4-0.magritte-on-surface___-0Bc4_5-4-0{
202
326
  background-color:var(--magritte-color-component-tag-background-on-surface-special-v25-1-0);
203
327
  }
204
- .magritte-tag_style-special___-IqT-_5-3-26.magritte-tag_state-disabled___2su23_5-3-26{
328
+ .magritte-tag_style-special___-IqT-_5-4-0.magritte-tag_state-disabled___2su23_5-4-0{
205
329
  background-color:var(--magritte-color-component-tag-background-state-special-disabled-v25-1-0);
206
330
  }
207
- .magritte-tag_style-special___-IqT-_5-3-26.magritte-tag_state-disabled___2su23_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
331
+ .magritte-tag_style-special___-IqT-_5-4-0.magritte-tag_state-disabled___2su23_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
208
332
  color:var(--magritte-color-component-tag-text-state-special-disabled-v25-1-0);
209
333
  }
210
- .magritte-tag_style-special___-IqT-_5-3-26.magritte-tag_state-disabled___2su23_5-3-26.magritte-disabled-icon-color-override___E6mEW_5-3-26{
334
+ .magritte-tag_style-special___-IqT-_5-4-0.magritte-tag_state-disabled___2su23_5-4-0.magritte-disabled-icon-color-override___E6mEW_5-4-0{
211
335
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-special-disabled-v25-1-0);
212
336
  }
213
- .magritte-tag_style-special___-IqT-_5-3-26.magritte-tag_state-disabled___2su23_5-3-26.magritte-on-surface___-0Bc4_5-3-26{
337
+ .magritte-tag_style-special___-IqT-_5-4-0.magritte-tag_state-disabled___2su23_5-4-0.magritte-on-surface___-0Bc4_5-4-0{
214
338
  background-color:var(--magritte-color-component-tag-background-state-on-surface-special-disabled-v25-1-0);
215
339
  }
216
- .magritte-tag_style-warning___4xBGB_5-3-26{
340
+ @media (min-width: 1020px){
341
+ body.magritte-old-layout .magritte-tag_style-special___-IqT-_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):hover{
342
+ background-color:var(--magritte-color-component-tag-background-state-special-hovered-v25-1-0);
343
+ }
344
+ body.magritte-old-layout .magritte-tag_style-special___-IqT-_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:hover{
345
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-special-hovered-v25-1-0);
346
+ }
347
+ }
348
+ @media (min-width: 1024px){
349
+ body:not(.magritte-old-layout) .magritte-tag_style-special___-IqT-_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):hover{
350
+ background-color:var(--magritte-color-component-tag-background-state-special-hovered-v25-1-0);
351
+ }
352
+ body:not(.magritte-old-layout) .magritte-tag_style-special___-IqT-_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:hover{
353
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-special-hovered-v25-1-0);
354
+ }
355
+ }
356
+ .magritte-tag_style-special___-IqT-_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):active{
357
+ background-color:var(--magritte-color-component-tag-background-state-special-pressed-v25-1-0);
358
+ }
359
+ .magritte-tag_style-special___-IqT-_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:active{
360
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-special-pressed-v25-1-0);
361
+ }
362
+ .magritte-tag_style-warning___4xBGB_5-4-0{
217
363
  background-color:var(--magritte-color-component-tag-background-warning-v25-1-0);
218
364
  }
219
- .magritte-tag_style-warning___4xBGB_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
365
+ .magritte-tag_style-warning___4xBGB_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
220
366
  color:var(--magritte-color-component-tag-text-warning-v25-1-0);
221
367
  }
222
- .magritte-tag_style-warning___4xBGB_5-3-26.magritte-icon-color-override___z7Qmm_5-3-26{
368
+ .magritte-tag_style-warning___4xBGB_5-4-0.magritte-icon-color-override___z7Qmm_5-4-0{
223
369
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-warning-v25-1-0);
224
370
  }
225
- .magritte-tag_style-warning___4xBGB_5-3-26.magritte-on-surface___-0Bc4_5-3-26{
371
+ .magritte-tag_style-warning___4xBGB_5-4-0.magritte-on-surface___-0Bc4_5-4-0{
226
372
  background-color:var(--magritte-color-component-tag-background-on-surface-warning-v25-1-0);
227
373
  }
228
- .magritte-tag_style-warning___4xBGB_5-3-26.magritte-tag_state-disabled___2su23_5-3-26{
374
+ .magritte-tag_style-warning___4xBGB_5-4-0.magritte-tag_state-disabled___2su23_5-4-0{
229
375
  background-color:var(--magritte-color-component-tag-background-state-warning-disabled-v25-1-0);
230
376
  }
231
- .magritte-tag_style-warning___4xBGB_5-3-26.magritte-tag_state-disabled___2su23_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
377
+ .magritte-tag_style-warning___4xBGB_5-4-0.magritte-tag_state-disabled___2su23_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
232
378
  color:var(--magritte-color-component-tag-text-state-warning-disabled-v25-1-0);
233
379
  }
234
- .magritte-tag_style-warning___4xBGB_5-3-26.magritte-tag_state-disabled___2su23_5-3-26.magritte-disabled-icon-color-override___E6mEW_5-3-26{
380
+ .magritte-tag_style-warning___4xBGB_5-4-0.magritte-tag_state-disabled___2su23_5-4-0.magritte-disabled-icon-color-override___E6mEW_5-4-0{
235
381
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-warning-disabled-v25-1-0);
236
382
  }
237
- .magritte-tag_style-warning___4xBGB_5-3-26.magritte-tag_state-disabled___2su23_5-3-26.magritte-on-surface___-0Bc4_5-3-26{
383
+ .magritte-tag_style-warning___4xBGB_5-4-0.magritte-tag_state-disabled___2su23_5-4-0.magritte-on-surface___-0Bc4_5-4-0{
238
384
  background-color:var(--magritte-color-component-tag-background-state-on-surface-warning-disabled-v25-1-0);
239
385
  }
240
- .magritte-tag_style-accent___WCqKw_5-3-26{
386
+ @media (min-width: 1020px){
387
+ body.magritte-old-layout .magritte-tag_style-warning___4xBGB_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):hover{
388
+ background-color:var(--magritte-color-component-tag-background-state-warning-hovered-v25-1-0);
389
+ }
390
+ body.magritte-old-layout .magritte-tag_style-warning___4xBGB_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:hover{
391
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-warning-hovered-v25-1-0);
392
+ }
393
+ }
394
+ @media (min-width: 1024px){
395
+ body:not(.magritte-old-layout) .magritte-tag_style-warning___4xBGB_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):hover{
396
+ background-color:var(--magritte-color-component-tag-background-state-warning-hovered-v25-1-0);
397
+ }
398
+ body:not(.magritte-old-layout) .magritte-tag_style-warning___4xBGB_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:hover{
399
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-warning-hovered-v25-1-0);
400
+ }
401
+ }
402
+ .magritte-tag_style-warning___4xBGB_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):active{
403
+ background-color:var(--magritte-color-component-tag-background-state-warning-pressed-v25-1-0);
404
+ }
405
+ .magritte-tag_style-warning___4xBGB_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:active{
406
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-warning-pressed-v25-1-0);
407
+ }
408
+ .magritte-tag_style-accent___WCqKw_5-4-0{
241
409
  background-color:var(--magritte-color-component-tag-background-accent-v25-1-0);
242
410
  }
243
- .magritte-tag_style-accent___WCqKw_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
411
+ .magritte-tag_style-accent___WCqKw_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
244
412
  color:var(--magritte-color-component-tag-text-accent-v25-1-0);
245
413
  }
246
- .magritte-tag_style-accent___WCqKw_5-3-26.magritte-icon-color-override___z7Qmm_5-3-26{
414
+ .magritte-tag_style-accent___WCqKw_5-4-0.magritte-icon-color-override___z7Qmm_5-4-0{
247
415
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-accent-v25-1-0);
248
416
  }
249
- .magritte-tag_style-accent___WCqKw_5-3-26.magritte-on-surface___-0Bc4_5-3-26{
417
+ .magritte-tag_style-accent___WCqKw_5-4-0.magritte-on-surface___-0Bc4_5-4-0{
250
418
  background-color:var(--magritte-color-component-tag-background-on-surface-accent-v25-1-0);
251
419
  }
252
- .magritte-tag_style-accent___WCqKw_5-3-26.magritte-tag_state-disabled___2su23_5-3-26{
420
+ .magritte-tag_style-accent___WCqKw_5-4-0.magritte-tag_state-disabled___2su23_5-4-0{
253
421
  background-color:var(--magritte-color-component-tag-background-state-accent-disabled-v25-1-0);
254
422
  }
255
- .magritte-tag_style-accent___WCqKw_5-3-26.magritte-tag_state-disabled___2su23_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
423
+ .magritte-tag_style-accent___WCqKw_5-4-0.magritte-tag_state-disabled___2su23_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
256
424
  color:var(--magritte-color-component-tag-text-state-accent-disabled-v25-1-0);
257
425
  }
258
- .magritte-tag_style-accent___WCqKw_5-3-26.magritte-tag_state-disabled___2su23_5-3-26.magritte-disabled-icon-color-override___E6mEW_5-3-26{
426
+ .magritte-tag_style-accent___WCqKw_5-4-0.magritte-tag_state-disabled___2su23_5-4-0.magritte-disabled-icon-color-override___E6mEW_5-4-0{
259
427
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-accent-disabled-v25-1-0);
260
428
  }
261
- .magritte-tag_style-accent___WCqKw_5-3-26.magritte-tag_state-disabled___2su23_5-3-26.magritte-on-surface___-0Bc4_5-3-26{
429
+ .magritte-tag_style-accent___WCqKw_5-4-0.magritte-tag_state-disabled___2su23_5-4-0.magritte-on-surface___-0Bc4_5-4-0{
262
430
  background-color:var(--magritte-color-component-tag-background-state-on-surface-accent-disabled-v25-1-0);
263
431
  }
264
- .magritte-tag_size-medium___Splpy_5-3-26{
432
+ @media (min-width: 1020px){
433
+ body.magritte-old-layout .magritte-tag_style-accent___WCqKw_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):hover{
434
+ background-color:var(--magritte-color-component-tag-background-state-accent-hovered-v25-1-0);
435
+ }
436
+ body.magritte-old-layout .magritte-tag_style-accent___WCqKw_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:hover{
437
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-accent-hovered-v25-1-0);
438
+ }
439
+ }
440
+ @media (min-width: 1024px){
441
+ body:not(.magritte-old-layout) .magritte-tag_style-accent___WCqKw_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):hover{
442
+ background-color:var(--magritte-color-component-tag-background-state-accent-hovered-v25-1-0);
443
+ }
444
+ body:not(.magritte-old-layout) .magritte-tag_style-accent___WCqKw_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:hover{
445
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-accent-hovered-v25-1-0);
446
+ }
447
+ }
448
+ .magritte-tag_style-accent___WCqKw_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0):active{
449
+ background-color:var(--magritte-color-component-tag-background-state-accent-pressed-v25-1-0);
450
+ }
451
+ .magritte-tag_style-accent___WCqKw_5-4-0.magritte-tag-dashed___IqnQe_5-4-0:not(.magritte-tag_state-disabled___2su23_5-4-0).magritte-on-surface___-0Bc4_5-4-0:active{
452
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-accent-pressed-v25-1-0);
453
+ }
454
+ .magritte-tag_size-medium___Splpy_5-4-0{
265
455
  border-radius:8px;
266
456
  padding:4px 8px;
267
457
  gap:4px;
@@ -269,10 +459,10 @@
269
459
  max-width:min(100%, 288px);
270
460
  box-sizing:border-box;
271
461
  }
272
- .magritte-tag_size-medium___Splpy_5-3-26 .magritte-tag__icon___Avk97_5-3-26{
462
+ .magritte-tag_size-medium___Splpy_5-4-0 .magritte-tag__icon___Avk97_5-4-0{
273
463
  padding:2px 0;
274
464
  }
275
- .magritte-tag_size-large___SWuug_5-3-26{
465
+ .magritte-tag_size-large___SWuug_5-4-0{
276
466
  border-radius:18px;
277
467
  padding:6px 10px;
278
468
  gap:2px;
@@ -280,7 +470,7 @@
280
470
  max-width:min(100%, 288px);
281
471
  box-sizing:border-box;
282
472
  }
283
- .magritte-tag_size-large___SWuug_5-3-26 .magritte-tag__label___YHV-o_5-3-26{
473
+ .magritte-tag_size-large___SWuug_5-4-0 .magritte-tag__label___YHV-o_5-4-0{
284
474
  font-family:"hh sans";
285
475
  font-weight:500;
286
476
  line-height:22px;
@@ -291,10 +481,10 @@
291
481
  text-decoration:none;
292
482
  padding:1px 2px;
293
483
  }
294
- .magritte-tag_size-large___SWuug_5-3-26 .magritte-tag__icon___Avk97_5-3-26{
484
+ .magritte-tag_size-large___SWuug_5-4-0 .magritte-tag__icon___Avk97_5-4-0{
295
485
  padding:4px 0;
296
486
  }
297
- .magritte-tag__label___YHV-o_5-3-26{
487
+ .magritte-tag__label___YHV-o_5-4-0{
298
488
  font-family:"hh sans";
299
489
  font-weight:400;
300
490
  line-height:20px;
@@ -307,11 +497,11 @@
307
497
  overflow:hidden;
308
498
  white-space:nowrap;
309
499
  }
310
- .magritte-tag__icon___Avk97_5-3-26{
500
+ .magritte-tag__icon___Avk97_5-4-0{
311
501
  display:flex;
312
502
  flex-shrink:0;
313
503
  }
314
- .magritte-tag_highlight___RmDYp_5-3-26::after{
504
+ .magritte-tag_highlight___RmDYp_5-4-0::after{
315
505
  content:'';
316
506
  position:absolute;
317
507
  top:0;
@@ -323,22 +513,22 @@
323
513
  transform:translateX(-50px);
324
514
  background:linear-gradient(292deg, rgba(255, 255, 255, 0) 29.2%, rgba(255, 255, 255, 0.8) 49.55%, rgba(255, 255, 255, 0) 69.9%);
325
515
  opacity:0.8;
326
- animation-name:magritte-tag-highlight-shine___8ZFPr_5-3-26;
516
+ animation-name:magritte-tag-highlight-shine___8ZFPr_5-4-0;
327
517
  animation-duration:var(--tag-highlight-duration);
328
518
  animation-timing-function:linear;
329
519
  animation-iteration-count:infinite;
330
520
  animation-play-state:paused;
331
521
  }
332
- .magritte-tag_highlight___RmDYp_5-3-26[data-animation-synced='true'].magritte-tag_highlight___RmDYp_5-3-26::after{
522
+ .magritte-tag_highlight___RmDYp_5-4-0[data-animation-synced='true'].magritte-tag_highlight___RmDYp_5-4-0::after{
333
523
  animation-play-state:running;
334
524
  animation-delay:var(--tag-highlight-delay, 0ms);
335
525
  }
336
526
  @media (prefers-reduced-motion: reduce){
337
- .magritte-tag_highlight___RmDYp_5-3-26::after{
527
+ .magritte-tag_highlight___RmDYp_5-4-0::after{
338
528
  animation:none;
339
529
  }
340
530
  }
341
- @keyframes magritte-tag-highlight-shine___8ZFPr_5-3-26{
531
+ @keyframes magritte-tag-highlight-shine___8ZFPr_5-4-0{
342
532
  0%{
343
533
  transform:translateX(-50px);
344
534
  }
package/index.js CHANGED
@@ -4,6 +4,7 @@ import 'react/jsx-runtime';
4
4
  import 'react';
5
5
  import 'classnames';
6
6
  import '@hh.ru/magritte-common-use-disabled';
7
+ import '@hh.ru/magritte-common-use-multiple-refs';
7
8
  import '@hh.ru/magritte-ui-icon';
8
9
  import '@hh.ru/magritte-ui-icon/types';
9
10
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-tag",
3
- "version": "5.3.26",
3
+ "version": "5.4.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -24,7 +24,9 @@
24
24
  },
25
25
  "dependencies": {
26
26
  "@hh.ru/magritte-common-use-disabled": "1.0.15",
27
+ "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
27
28
  "@hh.ru/magritte-design-tokens": "25.1.0",
29
+ "@hh.ru/magritte-ui-breakpoint": "6.1.1",
28
30
  "@hh.ru/magritte-ui-icon": "15.1.2",
29
31
  "@hh.ru/magritte-ui-mock-component": "1.1.7"
30
32
  },
@@ -35,5 +37,5 @@
35
37
  "publishConfig": {
36
38
  "access": "public"
37
39
  },
38
- "gitHead": "37c822e9d543ad23d6aec07b4a18c6d2d2b3ee3a"
40
+ "gitHead": "56a59bbc92f96fd712e181690098d35d10797a56"
39
41
  }
package/types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { MouseEventHandler } from 'react';
1
2
  export type TagStyle = 'neutral' | 'positive' | 'negative' | 'special' | 'warning' | 'accent';
2
3
  export type TagSize = 'medium' | 'large';
3
4
  type CommonTagProps = {
@@ -6,6 +7,14 @@ type CommonTagProps = {
6
7
  disabled?: boolean;
7
8
  onSurface?: boolean;
8
9
  highlight?: boolean;
10
+ /**
11
+ * Пунктирное подчеркивание лейбла и состояния hovered и pressed. Показывает, что у тега есть подсказка,
12
+ * логику показа которой определяет продукт
13
+ * @default false
14
+ */
15
+ dashed?: boolean;
16
+ /** Обработчик клика, например для показа подсказки в BottomSheet. Работает только при `dashed` и не в disabled */
17
+ onClick?: MouseEventHandler<HTMLDivElement>;
9
18
  'data-qa'?: string;
10
19
  };
11
20
  export interface TagLabelProps extends CommonTagProps {