@hh.ru/magritte-ui-tag 5.1.10 → 5.2.1

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 (5) hide show
  1. package/Tag.js +3 -3
  2. package/Tag.js.map +1 -1
  3. package/index.css +56 -56
  4. package/package.json +3 -3
  5. package/types.d.ts +1 -0
package/Tag.js CHANGED
@@ -6,7 +6,7 @@ import { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disable
6
6
  import { IconDynamic } from '@hh.ru/magritte-ui-icon';
7
7
  import { isIconElement } from '@hh.ru/magritte-ui-icon/types';
8
8
 
9
- var styles = {"tag":"magritte-tag___WdGxk_5-1-10","tag_style-neutral":"magritte-tag_style-neutral___cw1Bt_5-1-10","tagStyleNeutral":"magritte-tag_style-neutral___cw1Bt_5-1-10","tag__label":"magritte-tag__label___YHV-o_5-1-10","tagLabel":"magritte-tag__label___YHV-o_5-1-10","icon-color-override":"magritte-icon-color-override___z7Qmm_5-1-10","iconColorOverride":"magritte-icon-color-override___z7Qmm_5-1-10","on-surface":"magritte-on-surface___-0Bc4_5-1-10","onSurface":"magritte-on-surface___-0Bc4_5-1-10","tag_state-disabled":"magritte-tag_state-disabled___2su23_5-1-10","tagStateDisabled":"magritte-tag_state-disabled___2su23_5-1-10","disabled-icon-color-override":"magritte-disabled-icon-color-override___E6mEW_5-1-10","disabledIconColorOverride":"magritte-disabled-icon-color-override___E6mEW_5-1-10","tag_style-positive":"magritte-tag_style-positive___o2Zfe_5-1-10","tagStylePositive":"magritte-tag_style-positive___o2Zfe_5-1-10","tag_style-negative":"magritte-tag_style-negative___-HbQe_5-1-10","tagStyleNegative":"magritte-tag_style-negative___-HbQe_5-1-10","tag_style-special":"magritte-tag_style-special___-IqT-_5-1-10","tagStyleSpecial":"magritte-tag_style-special___-IqT-_5-1-10","tag_style-warning":"magritte-tag_style-warning___4xBGB_5-1-10","tagStyleWarning":"magritte-tag_style-warning___4xBGB_5-1-10","tag_style-accent":"magritte-tag_style-accent___WCqKw_5-1-10","tagStyleAccent":"magritte-tag_style-accent___WCqKw_5-1-10","tag_size-medium":"magritte-tag_size-medium___Splpy_5-1-10","tagSizeMedium":"magritte-tag_size-medium___Splpy_5-1-10","tag__icon":"magritte-tag__icon___Avk97_5-1-10","tagIcon":"magritte-tag__icon___Avk97_5-1-10","tag_size-large":"magritte-tag_size-large___SWuug_5-1-10","tagSizeLarge":"magritte-tag_size-large___SWuug_5-1-10"};
9
+ var styles = {"tag":"magritte-tag___WdGxk_5-2-1","tag_style-neutral":"magritte-tag_style-neutral___cw1Bt_5-2-1","tagStyleNeutral":"magritte-tag_style-neutral___cw1Bt_5-2-1","tag__label":"magritte-tag__label___YHV-o_5-2-1","tagLabel":"magritte-tag__label___YHV-o_5-2-1","icon-color-override":"magritte-icon-color-override___z7Qmm_5-2-1","iconColorOverride":"magritte-icon-color-override___z7Qmm_5-2-1","on-surface":"magritte-on-surface___-0Bc4_5-2-1","onSurface":"magritte-on-surface___-0Bc4_5-2-1","tag_state-disabled":"magritte-tag_state-disabled___2su23_5-2-1","tagStateDisabled":"magritte-tag_state-disabled___2su23_5-2-1","disabled-icon-color-override":"magritte-disabled-icon-color-override___E6mEW_5-2-1","disabledIconColorOverride":"magritte-disabled-icon-color-override___E6mEW_5-2-1","tag_style-positive":"magritte-tag_style-positive___o2Zfe_5-2-1","tagStylePositive":"magritte-tag_style-positive___o2Zfe_5-2-1","tag_style-negative":"magritte-tag_style-negative___-HbQe_5-2-1","tagStyleNegative":"magritte-tag_style-negative___-HbQe_5-2-1","tag_style-special":"magritte-tag_style-special___-IqT-_5-2-1","tagStyleSpecial":"magritte-tag_style-special___-IqT-_5-2-1","tag_style-warning":"magritte-tag_style-warning___4xBGB_5-2-1","tagStyleWarning":"magritte-tag_style-warning___4xBGB_5-2-1","tag_style-accent":"magritte-tag_style-accent___WCqKw_5-2-1","tagStyleAccent":"magritte-tag_style-accent___WCqKw_5-2-1","tag_size-medium":"magritte-tag_size-medium___Splpy_5-2-1","tagSizeMedium":"magritte-tag_size-medium___Splpy_5-2-1","tag__icon":"magritte-tag__icon___Avk97_5-2-1","tagIcon":"magritte-tag__icon___Avk97_5-2-1","tag_size-large":"magritte-tag_size-large___SWuug_5-2-1","tagSizeLarge":"magritte-tag_size-large___SWuug_5-2-1"};
10
10
 
11
11
  const SIZE_TO_CSS = {
12
12
  large: styles.tagSizeLarge,
@@ -20,7 +20,7 @@ const STYLE_TO_CSS = {
20
20
  neutral: styles.tagStyleNeutral,
21
21
  accent: styles.tagStyleAccent,
22
22
  };
23
- function Tag({ style = 'neutral', size = 'medium', disabled = false, hideLabel, icon, 'aria-label': ariaLabel, children, onSurface, }) {
23
+ function Tag({ style = 'neutral', size = 'medium', disabled = false, hideLabel, icon, 'aria-label': ariaLabel, children, onSurface, 'data-qa': dataQa, }) {
24
24
  const showLabel = !hideLabel && children;
25
25
  const isDisabled = useDisabled() || disabled;
26
26
  const withIcon = isIconElement(icon) && icon.type._size === 16;
@@ -29,7 +29,7 @@ function Tag({ style = 'neutral', size = 'medium', disabled = false, hideLabel,
29
29
  [styles.iconColorOverride]: withIcon && !isDisabled && !('initialColor' in icon.props || 'hex' in icon.props),
30
30
  [styles.disabledIconColorOverride]: withIcon && isDisabled && !('disabledColor' in icon.props || 'hexDisabled' in icon.props),
31
31
  [styles.onSurface]: onSurface,
32
- }), 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 })] }));
32
+ }), "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 })] }));
33
33
  }
34
34
 
35
35
  export { Tag };
package/Tag.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.js","sources":["src/Tag.tsx"],"sourcesContent":["import { cloneElement } 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 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 'aria-label': ariaLabel,\n children,\n onSurface,\n}: TagIconProps | TagLabelProps): React.ReactElement {\n const showLabel = !hideLabel && children;\n const isDisabled = useDisabled() || disabled;\n const withIcon = isIconElement(icon) && (icon.type as IconWrapperComponentSize16)._size === 16;\n return (\n <div\n className={classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {\n [styles.tagStateDisabled]: isDisabled,\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 >\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":";;;;;;;;;AAUA,MAAM,WAAW,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC,YAAY;IAC1B,MAAM,EAAE,MAAM,CAAC,aAAa;CAC/B,CAAC;AAEF,MAAM,YAAY,GAAG;IACjB,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,QAAQ,EAAE,MAAM,CAAC,gBAAgB;IACjC,QAAQ,EAAE,MAAM,CAAC,gBAAgB;IACjC,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,MAAM,EAAE,MAAM,CAAC,cAAc;CAChC,CAAC;AAKI,SAAU,GAAG,CAAC,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,GACkB,EAAA;AAC3B,IAAA,MAAM,SAAS,GAAG,CAAC,SAAS,IAAI,QAAQ,CAAC;AACzC,IAAA,MAAM,UAAU,GAAG,WAAW,EAAE,IAAI,QAAQ,CAAC;AAC7C,IAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,IAAK,IAAI,CAAC,IAAmC,CAAC,KAAK,KAAK,EAAE,CAAC;AAC/F,IAAA,QACIA,IACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE;AACtE,YAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,UAAU;YACrC,CAAC,MAAM,CAAC,iBAAiB,GACrB,QAAQ,IAAI,CAAC,UAAU,IAAI,EAAE,cAAc,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;YACrF,CAAC,MAAM,CAAC,yBAAyB,GAC7B,QAAQ,IAAI,UAAU,IAAI,EAAE,eAAe,IAAI,IAAI,CAAC,KAAK,IAAI,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC;AAC7F,YAAA,CAAC,MAAM,CAAC,SAAS,GAAG,SAAS;AAChC,SAAA,CAAC,EAED,QAAA,EAAA,CAAA,QAAQ,KACLC,IAAC,eAAe,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EACvCA,IAAC,WAAW,EAAA,EAAC,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EACjD,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EACzB,YAAY,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,CAAC,SAAS,GAAG,SAAS,GAAG,SAAS,EAAE,CAAC,EACvE,CAAA,EAAA,CACI,EACS,CAAA,CAC9B,EACA,SAAS,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAG,QAAA,EAAA,QAAQ,EAAO,CAAA,CAAA,EAAA,CAC7D,EACR;AACN;;;;"}
1
+ {"version":3,"file":"Tag.js","sources":["src/Tag.tsx"],"sourcesContent":["import { cloneElement } 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 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 'aria-label': ariaLabel,\n children,\n onSurface,\n 'data-qa': dataQa,\n}: TagIconProps | TagLabelProps): React.ReactElement {\n const showLabel = !hideLabel && children;\n const isDisabled = useDisabled() || disabled;\n const withIcon = isIconElement(icon) && (icon.type as IconWrapperComponentSize16)._size === 16;\n return (\n <div\n className={classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {\n [styles.tagStateDisabled]: isDisabled,\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":";;;;;;;;;AAUA,MAAM,WAAW,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC,YAAY;IAC1B,MAAM,EAAE,MAAM,CAAC,aAAa;CAC/B,CAAC;AAEF,MAAM,YAAY,GAAG;IACjB,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,QAAQ,EAAE,MAAM,CAAC,gBAAgB;IACjC,QAAQ,EAAE,MAAM,CAAC,gBAAgB;IACjC,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,MAAM,EAAE,MAAM,CAAC,cAAc;CAChC,CAAC;AAKc,SAAA,GAAG,CAAC,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,SAAS,EAAE,MAAM,GACU,EAAA;AAC3B,IAAA,MAAM,SAAS,GAAG,CAAC,SAAS,IAAI,QAAQ,CAAC;AACzC,IAAA,MAAM,UAAU,GAAG,WAAW,EAAE,IAAI,QAAQ,CAAC;AAC7C,IAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,IAAK,IAAI,CAAC,IAAmC,CAAC,KAAK,KAAK,EAAE,CAAC;AAC/F,IAAA,QACIA,IACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE;AACtE,YAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,UAAU;YACrC,CAAC,MAAM,CAAC,iBAAiB,GACrB,QAAQ,IAAI,CAAC,UAAU,IAAI,EAAE,cAAc,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;YACrF,CAAC,MAAM,CAAC,yBAAyB,GAC7B,QAAQ,IAAI,UAAU,IAAI,EAAE,eAAe,IAAI,IAAI,CAAC,KAAK,IAAI,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC;AAC7F,YAAA,CAAC,MAAM,CAAC,SAAS,GAAG,SAAS;AAChC,SAAA,CAAC,EACa,eAAA,EAAA,UAAU,EAChB,SAAA,EAAA,MAAM,aAEd,QAAQ,KACLC,GAAA,CAAC,eAAe,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,UAAU,EAAA,QAAA,EACvCA,GAAC,CAAA,WAAW,EAAC,EAAA,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAA,QAAA,EACjDA,aAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,QAAA,EAAA,YAAY,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,CAAC,SAAS,GAAG,SAAS,GAAG,SAAS,EAAE,CAAC,EAAA,CACvE,EACI,CAAA,EAAA,CACS,CAC9B,EACA,SAAS,IAAIA,aAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAG,QAAA,EAAA,QAAQ,EAAO,CAAA,CAAA,EAAA,CAC7D,EACR;AACN;;;;"}
package/index.css CHANGED
@@ -111,156 +111,156 @@
111
111
  --magritte-color-component-tag-icon-state-warning-disabled-v24-5-0:#ac66007a;
112
112
  --magritte-color-component-tag-icon-state-accent-disabled-v24-5-0:#B1C5D3;
113
113
  }
114
- .magritte-tag___WdGxk_5-1-10{
114
+ .magritte-tag___WdGxk_5-2-1{
115
115
  display:inline-flex;
116
116
  align-items:center;
117
117
  justify-content:center;
118
118
  }
119
- .magritte-tag_style-neutral___cw1Bt_5-1-10{
119
+ .magritte-tag_style-neutral___cw1Bt_5-2-1{
120
120
  background-color:var(--magritte-color-component-tag-background-neutral-v24-5-0);
121
121
  }
122
- .magritte-tag_style-neutral___cw1Bt_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
122
+ .magritte-tag_style-neutral___cw1Bt_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
123
123
  color:var(--magritte-color-component-tag-text-neutral-v24-5-0);
124
124
  }
125
- .magritte-tag_style-neutral___cw1Bt_5-1-10.magritte-icon-color-override___z7Qmm_5-1-10{
125
+ .magritte-tag_style-neutral___cw1Bt_5-2-1.magritte-icon-color-override___z7Qmm_5-2-1{
126
126
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-neutral-v24-5-0);
127
127
  }
128
- .magritte-tag_style-neutral___cw1Bt_5-1-10.magritte-on-surface___-0Bc4_5-1-10{
128
+ .magritte-tag_style-neutral___cw1Bt_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
129
129
  background-color:var(--magritte-color-component-tag-background-on-surface-neutral-v24-5-0);
130
130
  }
131
- .magritte-tag_style-neutral___cw1Bt_5-1-10.magritte-tag_state-disabled___2su23_5-1-10{
131
+ .magritte-tag_style-neutral___cw1Bt_5-2-1.magritte-tag_state-disabled___2su23_5-2-1{
132
132
  background-color:var(--magritte-color-component-tag-background-state-neutral-disabled-v24-5-0);
133
133
  }
134
- .magritte-tag_style-neutral___cw1Bt_5-1-10.magritte-tag_state-disabled___2su23_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
134
+ .magritte-tag_style-neutral___cw1Bt_5-2-1.magritte-tag_state-disabled___2su23_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
135
135
  color:var(--magritte-color-component-tag-text-state-neutral-disabled-v24-5-0);
136
136
  }
137
- .magritte-tag_style-neutral___cw1Bt_5-1-10.magritte-tag_state-disabled___2su23_5-1-10.magritte-disabled-icon-color-override___E6mEW_5-1-10{
137
+ .magritte-tag_style-neutral___cw1Bt_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-disabled-icon-color-override___E6mEW_5-2-1{
138
138
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-neutral-disabled-v24-5-0);
139
139
  }
140
- .magritte-tag_style-neutral___cw1Bt_5-1-10.magritte-tag_state-disabled___2su23_5-1-10.magritte-on-surface___-0Bc4_5-1-10{
140
+ .magritte-tag_style-neutral___cw1Bt_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
141
141
  background-color:var(--magritte-color-component-tag-background-state-on-surface-neutral-disabled-v24-5-0);
142
142
  }
143
- .magritte-tag_style-positive___o2Zfe_5-1-10{
143
+ .magritte-tag_style-positive___o2Zfe_5-2-1{
144
144
  background-color:var(--magritte-color-component-tag-background-positive-v24-5-0);
145
145
  }
146
- .magritte-tag_style-positive___o2Zfe_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
146
+ .magritte-tag_style-positive___o2Zfe_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
147
147
  color:var(--magritte-color-component-tag-text-positive-v24-5-0);
148
148
  }
149
- .magritte-tag_style-positive___o2Zfe_5-1-10.magritte-icon-color-override___z7Qmm_5-1-10{
149
+ .magritte-tag_style-positive___o2Zfe_5-2-1.magritte-icon-color-override___z7Qmm_5-2-1{
150
150
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-positive-v24-5-0);
151
151
  }
152
- .magritte-tag_style-positive___o2Zfe_5-1-10.magritte-on-surface___-0Bc4_5-1-10{
152
+ .magritte-tag_style-positive___o2Zfe_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
153
153
  background-color:var(--magritte-color-component-tag-background-on-surface-positive-v24-5-0);
154
154
  }
155
- .magritte-tag_style-positive___o2Zfe_5-1-10.magritte-tag_state-disabled___2su23_5-1-10{
155
+ .magritte-tag_style-positive___o2Zfe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1{
156
156
  background-color:var(--magritte-color-component-tag-background-state-positive-disabled-v24-5-0);
157
157
  }
158
- .magritte-tag_style-positive___o2Zfe_5-1-10.magritte-tag_state-disabled___2su23_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
158
+ .magritte-tag_style-positive___o2Zfe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
159
159
  color:var(--magritte-color-component-tag-text-state-positive-disabled-v24-5-0);
160
160
  }
161
- .magritte-tag_style-positive___o2Zfe_5-1-10.magritte-tag_state-disabled___2su23_5-1-10.magritte-disabled-icon-color-override___E6mEW_5-1-10{
161
+ .magritte-tag_style-positive___o2Zfe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-disabled-icon-color-override___E6mEW_5-2-1{
162
162
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-positive-disabled-v24-5-0);
163
163
  }
164
- .magritte-tag_style-positive___o2Zfe_5-1-10.magritte-tag_state-disabled___2su23_5-1-10.magritte-on-surface___-0Bc4_5-1-10{
164
+ .magritte-tag_style-positive___o2Zfe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
165
165
  background-color:var(--magritte-color-component-tag-background-state-on-surface-positive-disabled-v24-5-0);
166
166
  }
167
- .magritte-tag_style-negative___-HbQe_5-1-10{
167
+ .magritte-tag_style-negative___-HbQe_5-2-1{
168
168
  background-color:var(--magritte-color-component-tag-background-negative-v24-5-0);
169
169
  }
170
- .magritte-tag_style-negative___-HbQe_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
170
+ .magritte-tag_style-negative___-HbQe_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
171
171
  color:var(--magritte-color-component-tag-text-negative-v24-5-0);
172
172
  }
173
- .magritte-tag_style-negative___-HbQe_5-1-10.magritte-icon-color-override___z7Qmm_5-1-10{
173
+ .magritte-tag_style-negative___-HbQe_5-2-1.magritte-icon-color-override___z7Qmm_5-2-1{
174
174
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-negative-v24-5-0);
175
175
  }
176
- .magritte-tag_style-negative___-HbQe_5-1-10.magritte-on-surface___-0Bc4_5-1-10{
176
+ .magritte-tag_style-negative___-HbQe_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
177
177
  background-color:var(--magritte-color-component-tag-background-on-surface-negative-v24-5-0);
178
178
  }
179
- .magritte-tag_style-negative___-HbQe_5-1-10.magritte-tag_state-disabled___2su23_5-1-10{
179
+ .magritte-tag_style-negative___-HbQe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1{
180
180
  background-color:var(--magritte-color-component-tag-background-state-negative-disabled-v24-5-0);
181
181
  }
182
- .magritte-tag_style-negative___-HbQe_5-1-10.magritte-tag_state-disabled___2su23_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
182
+ .magritte-tag_style-negative___-HbQe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
183
183
  color:var(--magritte-color-component-tag-text-state-negative-disabled-v24-5-0);
184
184
  }
185
- .magritte-tag_style-negative___-HbQe_5-1-10.magritte-tag_state-disabled___2su23_5-1-10.magritte-disabled-icon-color-override___E6mEW_5-1-10{
185
+ .magritte-tag_style-negative___-HbQe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-disabled-icon-color-override___E6mEW_5-2-1{
186
186
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-negative-disabled-v24-5-0);
187
187
  }
188
- .magritte-tag_style-negative___-HbQe_5-1-10.magritte-tag_state-disabled___2su23_5-1-10.magritte-on-surface___-0Bc4_5-1-10{
188
+ .magritte-tag_style-negative___-HbQe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
189
189
  background-color:var(--magritte-color-component-tag-background-state-on-surface-negative-disabled-v24-5-0);
190
190
  }
191
- .magritte-tag_style-special___-IqT-_5-1-10{
191
+ .magritte-tag_style-special___-IqT-_5-2-1{
192
192
  background-color:var(--magritte-color-component-tag-background-special-v24-5-0);
193
193
  }
194
- .magritte-tag_style-special___-IqT-_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
194
+ .magritte-tag_style-special___-IqT-_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
195
195
  color:var(--magritte-color-component-tag-text-special-v24-5-0);
196
196
  }
197
- .magritte-tag_style-special___-IqT-_5-1-10.magritte-icon-color-override___z7Qmm_5-1-10{
197
+ .magritte-tag_style-special___-IqT-_5-2-1.magritte-icon-color-override___z7Qmm_5-2-1{
198
198
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-special-v24-5-0);
199
199
  }
200
- .magritte-tag_style-special___-IqT-_5-1-10.magritte-on-surface___-0Bc4_5-1-10{
200
+ .magritte-tag_style-special___-IqT-_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
201
201
  background-color:var(--magritte-color-component-tag-background-on-surface-special-v24-5-0);
202
202
  }
203
- .magritte-tag_style-special___-IqT-_5-1-10.magritte-tag_state-disabled___2su23_5-1-10{
203
+ .magritte-tag_style-special___-IqT-_5-2-1.magritte-tag_state-disabled___2su23_5-2-1{
204
204
  background-color:var(--magritte-color-component-tag-background-state-special-disabled-v24-5-0);
205
205
  }
206
- .magritte-tag_style-special___-IqT-_5-1-10.magritte-tag_state-disabled___2su23_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
206
+ .magritte-tag_style-special___-IqT-_5-2-1.magritte-tag_state-disabled___2su23_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
207
207
  color:var(--magritte-color-component-tag-text-state-special-disabled-v24-5-0);
208
208
  }
209
- .magritte-tag_style-special___-IqT-_5-1-10.magritte-tag_state-disabled___2su23_5-1-10.magritte-disabled-icon-color-override___E6mEW_5-1-10{
209
+ .magritte-tag_style-special___-IqT-_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-disabled-icon-color-override___E6mEW_5-2-1{
210
210
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-special-disabled-v24-5-0);
211
211
  }
212
- .magritte-tag_style-special___-IqT-_5-1-10.magritte-tag_state-disabled___2su23_5-1-10.magritte-on-surface___-0Bc4_5-1-10{
212
+ .magritte-tag_style-special___-IqT-_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
213
213
  background-color:var(--magritte-color-component-tag-background-state-on-surface-special-disabled-v24-5-0);
214
214
  }
215
- .magritte-tag_style-warning___4xBGB_5-1-10{
215
+ .magritte-tag_style-warning___4xBGB_5-2-1{
216
216
  background-color:var(--magritte-color-component-tag-background-warning-v24-5-0);
217
217
  }
218
- .magritte-tag_style-warning___4xBGB_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
218
+ .magritte-tag_style-warning___4xBGB_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
219
219
  color:var(--magritte-color-component-tag-text-warning-v24-5-0);
220
220
  }
221
- .magritte-tag_style-warning___4xBGB_5-1-10.magritte-icon-color-override___z7Qmm_5-1-10{
221
+ .magritte-tag_style-warning___4xBGB_5-2-1.magritte-icon-color-override___z7Qmm_5-2-1{
222
222
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-warning-v24-5-0);
223
223
  }
224
- .magritte-tag_style-warning___4xBGB_5-1-10.magritte-on-surface___-0Bc4_5-1-10{
224
+ .magritte-tag_style-warning___4xBGB_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
225
225
  background-color:var(--magritte-color-component-tag-background-on-surface-warning-v24-5-0);
226
226
  }
227
- .magritte-tag_style-warning___4xBGB_5-1-10.magritte-tag_state-disabled___2su23_5-1-10{
227
+ .magritte-tag_style-warning___4xBGB_5-2-1.magritte-tag_state-disabled___2su23_5-2-1{
228
228
  background-color:var(--magritte-color-component-tag-background-state-warning-disabled-v24-5-0);
229
229
  }
230
- .magritte-tag_style-warning___4xBGB_5-1-10.magritte-tag_state-disabled___2su23_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
230
+ .magritte-tag_style-warning___4xBGB_5-2-1.magritte-tag_state-disabled___2su23_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
231
231
  color:var(--magritte-color-component-tag-text-state-warning-disabled-v24-5-0);
232
232
  }
233
- .magritte-tag_style-warning___4xBGB_5-1-10.magritte-tag_state-disabled___2su23_5-1-10.magritte-disabled-icon-color-override___E6mEW_5-1-10{
233
+ .magritte-tag_style-warning___4xBGB_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-disabled-icon-color-override___E6mEW_5-2-1{
234
234
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-warning-disabled-v24-5-0);
235
235
  }
236
- .magritte-tag_style-warning___4xBGB_5-1-10.magritte-tag_state-disabled___2su23_5-1-10.magritte-on-surface___-0Bc4_5-1-10{
236
+ .magritte-tag_style-warning___4xBGB_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
237
237
  background-color:var(--magritte-color-component-tag-background-state-on-surface-warning-disabled-v24-5-0);
238
238
  }
239
- .magritte-tag_style-accent___WCqKw_5-1-10{
239
+ .magritte-tag_style-accent___WCqKw_5-2-1{
240
240
  background-color:var(--magritte-color-component-tag-background-accent-v24-5-0);
241
241
  }
242
- .magritte-tag_style-accent___WCqKw_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
242
+ .magritte-tag_style-accent___WCqKw_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
243
243
  color:var(--magritte-color-component-tag-text-accent-v24-5-0);
244
244
  }
245
- .magritte-tag_style-accent___WCqKw_5-1-10.magritte-icon-color-override___z7Qmm_5-1-10{
245
+ .magritte-tag_style-accent___WCqKw_5-2-1.magritte-icon-color-override___z7Qmm_5-2-1{
246
246
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-accent-v24-5-0);
247
247
  }
248
- .magritte-tag_style-accent___WCqKw_5-1-10.magritte-on-surface___-0Bc4_5-1-10{
248
+ .magritte-tag_style-accent___WCqKw_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
249
249
  background-color:var(--magritte-color-component-tag-background-on-surface-accent-v24-5-0);
250
250
  }
251
- .magritte-tag_style-accent___WCqKw_5-1-10.magritte-tag_state-disabled___2su23_5-1-10{
251
+ .magritte-tag_style-accent___WCqKw_5-2-1.magritte-tag_state-disabled___2su23_5-2-1{
252
252
  background-color:var(--magritte-color-component-tag-background-state-accent-disabled-v24-5-0);
253
253
  }
254
- .magritte-tag_style-accent___WCqKw_5-1-10.magritte-tag_state-disabled___2su23_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
254
+ .magritte-tag_style-accent___WCqKw_5-2-1.magritte-tag_state-disabled___2su23_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
255
255
  color:var(--magritte-color-component-tag-text-state-accent-disabled-v24-5-0);
256
256
  }
257
- .magritte-tag_style-accent___WCqKw_5-1-10.magritte-tag_state-disabled___2su23_5-1-10.magritte-disabled-icon-color-override___E6mEW_5-1-10{
257
+ .magritte-tag_style-accent___WCqKw_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-disabled-icon-color-override___E6mEW_5-2-1{
258
258
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-accent-disabled-v24-5-0);
259
259
  }
260
- .magritte-tag_style-accent___WCqKw_5-1-10.magritte-tag_state-disabled___2su23_5-1-10.magritte-on-surface___-0Bc4_5-1-10{
260
+ .magritte-tag_style-accent___WCqKw_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
261
261
  background-color:var(--magritte-color-component-tag-background-state-on-surface-accent-disabled-v24-5-0);
262
262
  }
263
- .magritte-tag_size-medium___Splpy_5-1-10{
263
+ .magritte-tag_size-medium___Splpy_5-2-1{
264
264
  border-radius:8px;
265
265
  padding:4px 8px;
266
266
  gap:4px;
@@ -268,10 +268,10 @@
268
268
  max-width:min(100%, 288px);
269
269
  box-sizing:border-box;
270
270
  }
271
- .magritte-tag_size-medium___Splpy_5-1-10 .magritte-tag__icon___Avk97_5-1-10{
271
+ .magritte-tag_size-medium___Splpy_5-2-1 .magritte-tag__icon___Avk97_5-2-1{
272
272
  padding:2px 0;
273
273
  }
274
- .magritte-tag_size-large___SWuug_5-1-10{
274
+ .magritte-tag_size-large___SWuug_5-2-1{
275
275
  border-radius:18px;
276
276
  padding:6px 10px;
277
277
  gap:2px;
@@ -279,7 +279,7 @@
279
279
  max-width:min(100%, 288px);
280
280
  box-sizing:border-box;
281
281
  }
282
- .magritte-tag_size-large___SWuug_5-1-10 .magritte-tag__label___YHV-o_5-1-10{
282
+ .magritte-tag_size-large___SWuug_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
283
283
  font-family:"hh sans";
284
284
  font-weight:500;
285
285
  line-height:22px;
@@ -290,10 +290,10 @@
290
290
  text-decoration:none;
291
291
  padding:1px 2px;
292
292
  }
293
- .magritte-tag_size-large___SWuug_5-1-10 .magritte-tag__icon___Avk97_5-1-10{
293
+ .magritte-tag_size-large___SWuug_5-2-1 .magritte-tag__icon___Avk97_5-2-1{
294
294
  padding:4px 0;
295
295
  }
296
- .magritte-tag__label___YHV-o_5-1-10{
296
+ .magritte-tag__label___YHV-o_5-2-1{
297
297
  font-family:"hh sans";
298
298
  font-weight:400;
299
299
  line-height:20px;
@@ -306,7 +306,7 @@
306
306
  overflow:hidden;
307
307
  white-space:nowrap;
308
308
  }
309
- .magritte-tag__icon___Avk97_5-1-10{
309
+ .magritte-tag__icon___Avk97_5-2-1{
310
310
  display:flex;
311
311
  flex-shrink:0;
312
312
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-tag",
3
- "version": "5.1.10",
3
+ "version": "5.2.1",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -21,7 +21,7 @@
21
21
  "dependencies": {
22
22
  "@hh.ru/magritte-common-use-disabled": "1.0.15",
23
23
  "@hh.ru/magritte-design-tokens": "24.5.0",
24
- "@hh.ru/magritte-ui-icon": "14.1.0",
24
+ "@hh.ru/magritte-ui-icon": "14.2.0",
25
25
  "@hh.ru/magritte-ui-mock-component": "1.1.7"
26
26
  },
27
27
  "peerDependencies": {
@@ -31,5 +31,5 @@
31
31
  "publishConfig": {
32
32
  "access": "public"
33
33
  },
34
- "gitHead": "3f1aa3b58a7e74d784b1af1a2a1950700ebe08d0"
34
+ "gitHead": "e47e9f9e4d4eba933c52865fb42b71160faf938b"
35
35
  }
package/types.d.ts CHANGED
@@ -5,6 +5,7 @@ type CommonTagProps = {
5
5
  size?: TagSize;
6
6
  disabled?: boolean;
7
7
  onSurface?: boolean;
8
+ 'data-qa'?: string;
8
9
  };
9
10
  export interface TagLabelProps extends CommonTagProps {
10
11
  children: React.ReactNode;