npm - @hh.ru/magritte-ui-tag - Versions diffs - 4.0.26 → 5.0.1 - Mend

@hh.ru/magritte-ui-tag 4.0.26 → 5.0.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 (8) hide show

package/Tag.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import { ReactElement } from 'react';
 import type { TagIconProps, TagLabelProps } from '@hh.ru/magritte-ui-tag/types';
-export declare function Tag(props: TagIconProps): ReactElement;
-export declare function Tag(props: TagLabelProps): ReactElement;
+export declare function Tag(props: TagIconProps): React.ReactElement;
+export declare function Tag(props: TagLabelProps): React.ReactElement;

package/Tag.js CHANGED Viewed

@@ -1,9 +1,12 @@
 import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { cloneElement } from 'react';
 import classnames from 'classnames';
-import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
+import { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';
+import { IconDynamic } from '@hh.ru/magritte-ui-icon';
+import { isIconElement } from '@hh.ru/magritte-ui-icon/types';
-var styles = {"tag":"magritte-tag___WdGxk_4-0-26","tag_style-neutral":"magritte-tag_style-neutral___cw1Bt_4-0-26","tagStyleNeutral":"magritte-tag_style-neutral___cw1Bt_4-0-26","tag__label":"magritte-tag__label___YHV-o_4-0-26","tagLabel":"magritte-tag__label___YHV-o_4-0-26","tag_state-disabled":"magritte-tag_state-disabled___2su23_4-0-26","tagStateDisabled":"magritte-tag_state-disabled___2su23_4-0-26","tag_style-positive":"magritte-tag_style-positive___o2Zfe_4-0-26","tagStylePositive":"magritte-tag_style-positive___o2Zfe_4-0-26","tag_style-negative":"magritte-tag_style-negative___-HbQe_4-0-26","tagStyleNegative":"magritte-tag_style-negative___-HbQe_4-0-26","tag_style-special":"magritte-tag_style-special___-IqT-_4-0-26","tagStyleSpecial":"magritte-tag_style-special___-IqT-_4-0-26","tag_style-warning":"magritte-tag_style-warning___4xBGB_4-0-26","tagStyleWarning":"magritte-tag_style-warning___4xBGB_4-0-26","tag_style-accent":"magritte-tag_style-accent___WCqKw_4-0-26","tagStyleAccent":"magritte-tag_style-accent___WCqKw_4-0-26","tag_size-medium":"magritte-tag_size-medium___Splpy_4-0-26","tagSizeMedium":"magritte-tag_size-medium___Splpy_4-0-26","tag__icon":"magritte-tag__icon___Avk97_4-0-26","tagIcon":"magritte-tag__icon___Avk97_4-0-26","tag_size-large":"magritte-tag_size-large___SWuug_4-0-26","tagSizeLarge":"magritte-tag_size-large___SWuug_4-0-26"};
+var styles = {"tag":"magritte-tag___WdGxk_5-0-1","tag_style-neutral":"magritte-tag_style-neutral___cw1Bt_5-0-1","tagStyleNeutral":"magritte-tag_style-neutral___cw1Bt_5-0-1","tag__label":"magritte-tag__label___YHV-o_5-0-1","tagLabel":"magritte-tag__label___YHV-o_5-0-1","icon-color-override":"magritte-icon-color-override___z7Qmm_5-0-1","iconColorOverride":"magritte-icon-color-override___z7Qmm_5-0-1","on-surface":"magritte-on-surface___-0Bc4_5-0-1","onSurface":"magritte-on-surface___-0Bc4_5-0-1","tag_state-disabled":"magritte-tag_state-disabled___2su23_5-0-1","tagStateDisabled":"magritte-tag_state-disabled___2su23_5-0-1","disabled-icon-color-override":"magritte-disabled-icon-color-override___E6mEW_5-0-1","disabledIconColorOverride":"magritte-disabled-icon-color-override___E6mEW_5-0-1","tag_style-positive":"magritte-tag_style-positive___o2Zfe_5-0-1","tagStylePositive":"magritte-tag_style-positive___o2Zfe_5-0-1","tag_style-negative":"magritte-tag_style-negative___-HbQe_5-0-1","tagStyleNegative":"magritte-tag_style-negative___-HbQe_5-0-1","tag_style-special":"magritte-tag_style-special___-IqT-_5-0-1","tagStyleSpecial":"magritte-tag_style-special___-IqT-_5-0-1","tag_style-warning":"magritte-tag_style-warning___4xBGB_5-0-1","tagStyleWarning":"magritte-tag_style-warning___4xBGB_5-0-1","tag_style-accent":"magritte-tag_style-accent___WCqKw_5-0-1","tagStyleAccent":"magritte-tag_style-accent___WCqKw_5-0-1","tag_size-medium":"magritte-tag_size-medium___Splpy_5-0-1","tagSizeMedium":"magritte-tag_size-medium___Splpy_5-0-1","tag__icon":"magritte-tag__icon___Avk97_5-0-1","tagIcon":"magritte-tag__icon___Avk97_5-0-1","tag_size-large":"magritte-tag_size-large___SWuug_5-0-1","tagSizeLarge":"magritte-tag_size-large___SWuug_5-0-1"};
 const SIZE_TO_CSS = {
     large: styles.tagSizeLarge,
@@ -17,13 +20,16 @@ const STYLE_TO_CSS = {
     neutral: styles.tagStyleNeutral,
     accent: styles.tagStyleAccent,
 };
-function Tag({ style = 'neutral', size = 'medium', disabled = false, hideLabel, icon, 'aria-label': ariaLabel, children, }) {
+function Tag({ style = 'neutral', size = 'medium', disabled = false, hideLabel, icon, 'aria-label': ariaLabel, children, onSurface, }) {
     const showLabel = !hideLabel && children;
-    const IconComponent = icon ?? null;
     const isDisabled = useDisabled() || disabled;
+    const withIcon = isIconElement(icon) && icon.type._size === 16;
     return (jsxs("div", { className: classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {
             [styles.tagStateDisabled]: isDisabled,
-        }), children: [IconComponent && (jsx("div", { className: styles.tagIcon, children: jsx(IconComponent, { "aria-label": !showLabel ? ariaLabel : undefined }) })), showLabel && jsx("div", { className: styles.tagLabel, children: children })] }));
+            [styles.iconColorOverride]: withIcon && !isDisabled && !('initialColor' in icon.props || 'hex' in icon.props),
+            [styles.disabledIconColorOverride]: withIcon && isDisabled && !('disabledColor' in icon.props || 'hexDisabled' in icon.props),
+            [styles.onSurface]: onSurface,
+        }), 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 })] }));
 }
 export { Tag };

package/Tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","sources":["../src/Tag.tsx"],"sourcesContent":["import { ~~ReactElement~~ } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { IconWrapperComponentSize16 } 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): ReactElement;\nexport function Tag(props: TagLabelProps): 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}: TagIconProps \| TagLabelProps): ReactElement {\n const showLabel = !hideLabel && children;\n const ~~IconComponent:~~ ~~IconWrapperComponentSize16 \| null~~ = ~~icon~~ ?? ~~null~~;\n const ~~isDisabled~~ = ~~useDisabled~~() \|\| ~~disabled~~;\n return (\n <div\n className={classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {\n [styles.tagStateDisabled]: isDisabled,\n })}\n >\n {~~IconComponent~~ && (\n <div className={styles.tagIcon}>\n ~~<IconComponent~~ aria-label={!showLabel ? ariaLabel : undefined} ~~/>\~~n </div>\n )}\n {showLabel && <div className={styles.tagLabel}>{children}</div>}\n </div>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"~~;;;;;;AASA~~,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,~~GACmB~~,EAAA;AAC3B,IAAA,MAAM,SAAS,GAAG,CAAC,SAAS,IAAI,QAAQ,CAAC;AACzC,IAAA,MAAM,~~aAAa~~,~~GAAsC~~,~~IAAI~~,~~IAAI~~,IAAI,CAAC;~~AACtE~~,IAAA,MAAM,~~UAAU~~,GAAG,~~WAAW~~,~~EAAE~~,IAAI,~~QAAQ~~,CAAC;~~AAC7C~~,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;~~AACxC~~,~~SAAA~~,CAAC,~~aAED~~,aAAa,~~KACVC~~,~~GAAK~~,CAAA,~~KAAA~~,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,~~EAC1BA~~,~~IAAC~~,~~aAAa~~,~~EAAA~~,~~EAAA~~,~~YAAA~~,~~EAAa~~,CAAC,SAAS,GAAG,SAAS,GAAG,SAAS,EAAA,~~CAAI~~,~~GAC/D~~,~~CACT~~,EACA,SAAS,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,~~EAAA~~,QAAA,~~EAAG~~,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}: 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;;;;"}

package/index.css CHANGED Viewed

@@ -5,12 +5,24 @@
   --magritte-color-component-tag-background-warning-v24-1-0:#FFF3E6;
   --magritte-color-component-tag-background-special-v24-1-0:#F7F4FF;
   --magritte-color-component-tag-background-accent-v24-1-0:#EDF6FF;
+  --magritte-color-component-tag-background-on-surface-neutral-v24-1-0:#ffffff;
+  --magritte-color-component-tag-background-on-surface-positive-v24-1-0:#ffffff;
+  --magritte-color-component-tag-background-on-surface-negative-v24-1-0:#ffffff;
+  --magritte-color-component-tag-background-on-surface-warning-v24-1-0:#ffffff;
+  --magritte-color-component-tag-background-on-surface-special-v24-1-0:#ffffff;
+  --magritte-color-component-tag-background-on-surface-accent-v24-1-0:#ffffff;
   --magritte-color-component-tag-background-state-neutral-disabled-v24-1-0:#f1f4f97a;
   --magritte-color-component-tag-background-state-positive-disabled-v24-1-0:#e8f9ec7a;
   --magritte-color-component-tag-background-state-negative-disabled-v24-1-0:#fef2ef7a;
   --magritte-color-component-tag-background-state-warning-disabled-v24-1-0:#fff3e67a;
   --magritte-color-component-tag-background-state-special-disabled-v24-1-0:#f7f4ff7a;
   --magritte-color-component-tag-background-state-accent-disabled-v24-1-0:#edf6ff7a;
+  --magritte-color-component-tag-background-state-on-surface-neutral-disabled-v24-1-0:#ffffff7a;
+  --magritte-color-component-tag-background-state-on-surface-positive-disabled-v24-1-0:#ffffff7a;
+  --magritte-color-component-tag-background-state-on-surface-negative-disabled-v24-1-0:#ffffff7a;
+  --magritte-color-component-tag-background-state-on-surface-warning-disabled-v24-1-0:#ffffff7a;
+  --magritte-color-component-tag-background-state-on-surface-special-disabled-v24-1-0:#ffffff7a;
+  --magritte-color-component-tag-background-state-on-surface-accent-disabled-v24-1-0:#ffffff7a;
   --magritte-color-component-tag-text-neutral-v24-1-0:#5e6c77;
   --magritte-color-component-tag-text-positive-v24-1-0:#00984f;
   --magritte-color-component-tag-text-negative-v24-1-0:#ee4735;
@@ -44,6 +56,12 @@
   --magritte-color-component-tag-background-warning-v24-1-0:#3D270E;
   --magritte-color-component-tag-background-special-v24-1-0:#2F293C;
   --magritte-color-component-tag-background-accent-v24-1-0:#222D3D;
+  --magritte-color-component-tag-background-on-surface-neutral-v24-1-0:#1B1B1B;
+  --magritte-color-component-tag-background-on-surface-positive-v24-1-0:#1B1B1B;
+  --magritte-color-component-tag-background-on-surface-negative-v24-1-0:#1B1B1B;
+  --magritte-color-component-tag-background-on-surface-warning-v24-1-0:#1B1B1B;
+  --magritte-color-component-tag-background-on-surface-special-v24-1-0:#1B1B1B;
+  --magritte-color-component-tag-background-on-surface-accent-v24-1-0:#1B1B1B;
   --magritte-color-component-tag-text-neutral-v24-1-0:#B9B9B9;
   --magritte-color-component-tag-text-positive-v24-1-0:#10b55f;
   --magritte-color-component-tag-text-negative-v24-1-0:#ff4d3a;
@@ -70,6 +88,12 @@
   --magritte-color-component-tag-background-state-warning-disabled-v24-1-0:#3d270e7a;
   --magritte-color-component-tag-background-state-special-disabled-v24-1-0:#2f293c7a;
   --magritte-color-component-tag-background-state-accent-disabled-v24-1-0:#222d3d7a;
+  --magritte-color-component-tag-background-state-on-surface-neutral-disabled-v24-1-0:#1b1b1b7a;
+  --magritte-color-component-tag-background-state-on-surface-positive-disabled-v24-1-0:#1b1b1b7a;
+  --magritte-color-component-tag-background-state-on-surface-negative-disabled-v24-1-0:#1b1b1b7a;
+  --magritte-color-component-tag-background-state-on-surface-warning-disabled-v24-1-0:#1b1b1b7a;
+  --magritte-color-component-tag-background-state-on-surface-special-disabled-v24-1-0:#1b1b1b7a;
+  --magritte-color-component-tag-background-state-on-surface-accent-disabled-v24-1-0:#1b1b1b7a;
 }
 .magritte-zp-day-theme{
@@ -83,96 +107,156 @@
   --magritte-color-component-tag-icon-state-warning-disabled-v24-1-0:#ac66007a;
   --magritte-color-component-tag-icon-state-accent-disabled-v24-1-0:#B1C5D3;
 }
-.magritte-tag___WdGxk_4-0-26{
+.magritte-tag___WdGxk_5-0-1{
   display:inline-flex;
   align-items:center;
   justify-content:center;
 }
-.magritte-tag_style-neutral___cw1Bt_4-0-26{
+.magritte-tag_style-neutral___cw1Bt_5-0-1{
   background-color:var(--magritte-color-component-tag-background-neutral-v24-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-neutral-v24-1-0);
 }
-.magritte-tag_style-neutral___cw1Bt_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_style-neutral___cw1Bt_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   color:var(--magritte-color-component-tag-text-neutral-v24-1-0);
 }
-.magritte-tag_style-neutral___cw1Bt_4-0-26.magritte-tag_state-disabled___2su23_4-0-26{
+.magritte-tag_style-neutral___cw1Bt_5-0-1.magritte-icon-color-override___z7Qmm_5-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-neutral-v24-1-0);
+}
+.magritte-tag_style-neutral___cw1Bt_5-0-1.magritte-on-surface___-0Bc4_5-0-1{
+  background-color:var(--magritte-color-component-tag-background-on-surface-neutral-v24-1-0);
+}
+.magritte-tag_style-neutral___cw1Bt_5-0-1.magritte-tag_state-disabled___2su23_5-0-1{
   background-color:var(--magritte-color-component-tag-background-state-neutral-disabled-v24-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-neutral-disabled-v24-1-0);
 }
-.magritte-tag_style-neutral___cw1Bt_4-0-26.magritte-tag_state-disabled___2su23_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_style-neutral___cw1Bt_5-0-1.magritte-tag_state-disabled___2su23_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   color:var(--magritte-color-component-tag-text-state-neutral-disabled-v24-1-0);
 }
-.magritte-tag_style-positive___o2Zfe_4-0-26{
+.magritte-tag_style-neutral___cw1Bt_5-0-1.magritte-tag_state-disabled___2su23_5-0-1.magritte-disabled-icon-color-override___E6mEW_5-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-neutral-disabled-v24-1-0);
+}
+.magritte-tag_style-neutral___cw1Bt_5-0-1.magritte-tag_state-disabled___2su23_5-0-1.magritte-on-surface___-0Bc4_5-0-1{
+  background-color:var(--magritte-color-component-tag-background-state-on-surface-neutral-disabled-v24-1-0);
+}
+.magritte-tag_style-positive___o2Zfe_5-0-1{
   background-color:var(--magritte-color-component-tag-background-positive-v24-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-positive-v24-1-0);
 }
-.magritte-tag_style-positive___o2Zfe_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_style-positive___o2Zfe_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   color:var(--magritte-color-component-tag-text-positive-v24-1-0);
 }
-.magritte-tag_style-positive___o2Zfe_4-0-26.magritte-tag_state-disabled___2su23_4-0-26{
+.magritte-tag_style-positive___o2Zfe_5-0-1.magritte-icon-color-override___z7Qmm_5-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-positive-v24-1-0);
+}
+.magritte-tag_style-positive___o2Zfe_5-0-1.magritte-on-surface___-0Bc4_5-0-1{
+  background-color:var(--magritte-color-component-tag-background-on-surface-positive-v24-1-0);
+}
+.magritte-tag_style-positive___o2Zfe_5-0-1.magritte-tag_state-disabled___2su23_5-0-1{
   background-color:var(--magritte-color-component-tag-background-state-positive-disabled-v24-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-positive-disabled-v24-1-0);
 }
-.magritte-tag_style-positive___o2Zfe_4-0-26.magritte-tag_state-disabled___2su23_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_style-positive___o2Zfe_5-0-1.magritte-tag_state-disabled___2su23_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   color:var(--magritte-color-component-tag-text-state-positive-disabled-v24-1-0);
 }
-.magritte-tag_style-negative___-HbQe_4-0-26{
+.magritte-tag_style-positive___o2Zfe_5-0-1.magritte-tag_state-disabled___2su23_5-0-1.magritte-disabled-icon-color-override___E6mEW_5-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-positive-disabled-v24-1-0);
+}
+.magritte-tag_style-positive___o2Zfe_5-0-1.magritte-tag_state-disabled___2su23_5-0-1.magritte-on-surface___-0Bc4_5-0-1{
+  background-color:var(--magritte-color-component-tag-background-state-on-surface-positive-disabled-v24-1-0);
+}
+.magritte-tag_style-negative___-HbQe_5-0-1{
   background-color:var(--magritte-color-component-tag-background-negative-v24-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-negative-v24-1-0);
 }
-.magritte-tag_style-negative___-HbQe_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_style-negative___-HbQe_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   color:var(--magritte-color-component-tag-text-negative-v24-1-0);
 }
-.magritte-tag_style-negative___-HbQe_4-0-26.magritte-tag_state-disabled___2su23_4-0-26{
+.magritte-tag_style-negative___-HbQe_5-0-1.magritte-icon-color-override___z7Qmm_5-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-negative-v24-1-0);
+}
+.magritte-tag_style-negative___-HbQe_5-0-1.magritte-on-surface___-0Bc4_5-0-1{
+  background-color:var(--magritte-color-component-tag-background-on-surface-negative-v24-1-0);
+}
+.magritte-tag_style-negative___-HbQe_5-0-1.magritte-tag_state-disabled___2su23_5-0-1{
   background-color:var(--magritte-color-component-tag-background-state-negative-disabled-v24-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-negative-disabled-v24-1-0);
 }
-.magritte-tag_style-negative___-HbQe_4-0-26.magritte-tag_state-disabled___2su23_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_style-negative___-HbQe_5-0-1.magritte-tag_state-disabled___2su23_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   color:var(--magritte-color-component-tag-text-state-negative-disabled-v24-1-0);
 }
-.magritte-tag_style-special___-IqT-_4-0-26{
+.magritte-tag_style-negative___-HbQe_5-0-1.magritte-tag_state-disabled___2su23_5-0-1.magritte-disabled-icon-color-override___E6mEW_5-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-negative-disabled-v24-1-0);
+}
+.magritte-tag_style-negative___-HbQe_5-0-1.magritte-tag_state-disabled___2su23_5-0-1.magritte-on-surface___-0Bc4_5-0-1{
+  background-color:var(--magritte-color-component-tag-background-state-on-surface-negative-disabled-v24-1-0);
+}
+.magritte-tag_style-special___-IqT-_5-0-1{
   background-color:var(--magritte-color-component-tag-background-special-v24-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-special-v24-1-0);
 }
-.magritte-tag_style-special___-IqT-_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_style-special___-IqT-_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   color:var(--magritte-color-component-tag-text-special-v24-1-0);
 }
-.magritte-tag_style-special___-IqT-_4-0-26.magritte-tag_state-disabled___2su23_4-0-26{
+.magritte-tag_style-special___-IqT-_5-0-1.magritte-icon-color-override___z7Qmm_5-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-special-v24-1-0);
+}
+.magritte-tag_style-special___-IqT-_5-0-1.magritte-on-surface___-0Bc4_5-0-1{
+  background-color:var(--magritte-color-component-tag-background-on-surface-special-v24-1-0);
+}
+.magritte-tag_style-special___-IqT-_5-0-1.magritte-tag_state-disabled___2su23_5-0-1{
   background-color:var(--magritte-color-component-tag-background-state-special-disabled-v24-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-special-disabled-v24-1-0);
 }
-.magritte-tag_style-special___-IqT-_4-0-26.magritte-tag_state-disabled___2su23_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_style-special___-IqT-_5-0-1.magritte-tag_state-disabled___2su23_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   color:var(--magritte-color-component-tag-text-state-special-disabled-v24-1-0);
 }
-.magritte-tag_style-warning___4xBGB_4-0-26{
+.magritte-tag_style-special___-IqT-_5-0-1.magritte-tag_state-disabled___2su23_5-0-1.magritte-disabled-icon-color-override___E6mEW_5-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-special-disabled-v24-1-0);
+}
+.magritte-tag_style-special___-IqT-_5-0-1.magritte-tag_state-disabled___2su23_5-0-1.magritte-on-surface___-0Bc4_5-0-1{
+  background-color:var(--magritte-color-component-tag-background-state-on-surface-special-disabled-v24-1-0);
+}
+.magritte-tag_style-warning___4xBGB_5-0-1{
   background-color:var(--magritte-color-component-tag-background-warning-v24-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-warning-v24-1-0);
 }
-.magritte-tag_style-warning___4xBGB_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_style-warning___4xBGB_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   color:var(--magritte-color-component-tag-text-warning-v24-1-0);
 }
-.magritte-tag_style-warning___4xBGB_4-0-26.magritte-tag_state-disabled___2su23_4-0-26{
+.magritte-tag_style-warning___4xBGB_5-0-1.magritte-icon-color-override___z7Qmm_5-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-warning-v24-1-0);
+}
+.magritte-tag_style-warning___4xBGB_5-0-1.magritte-on-surface___-0Bc4_5-0-1{
+  background-color:var(--magritte-color-component-tag-background-on-surface-warning-v24-1-0);
+}
+.magritte-tag_style-warning___4xBGB_5-0-1.magritte-tag_state-disabled___2su23_5-0-1{
   background-color:var(--magritte-color-component-tag-background-state-warning-disabled-v24-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-warning-disabled-v24-1-0);
 }
-.magritte-tag_style-warning___4xBGB_4-0-26.magritte-tag_state-disabled___2su23_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_style-warning___4xBGB_5-0-1.magritte-tag_state-disabled___2su23_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   color:var(--magritte-color-component-tag-text-state-warning-disabled-v24-1-0);
 }
-.magritte-tag_style-accent___WCqKw_4-0-26{
+.magritte-tag_style-warning___4xBGB_5-0-1.magritte-tag_state-disabled___2su23_5-0-1.magritte-disabled-icon-color-override___E6mEW_5-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-warning-disabled-v24-1-0);
+}
+.magritte-tag_style-warning___4xBGB_5-0-1.magritte-tag_state-disabled___2su23_5-0-1.magritte-on-surface___-0Bc4_5-0-1{
+  background-color:var(--magritte-color-component-tag-background-state-on-surface-warning-disabled-v24-1-0);
+}
+.magritte-tag_style-accent___WCqKw_5-0-1{
   background-color:var(--magritte-color-component-tag-background-accent-v24-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-accent-v24-1-0);
 }
-.magritte-tag_style-accent___WCqKw_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_style-accent___WCqKw_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   color:var(--magritte-color-component-tag-text-accent-v24-1-0);
 }
-.magritte-tag_style-accent___WCqKw_4-0-26.magritte-tag_state-disabled___2su23_4-0-26{
+.magritte-tag_style-accent___WCqKw_5-0-1.magritte-icon-color-override___z7Qmm_5-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-accent-v24-1-0);
+}
+.magritte-tag_style-accent___WCqKw_5-0-1.magritte-on-surface___-0Bc4_5-0-1{
+  background-color:var(--magritte-color-component-tag-background-on-surface-accent-v24-1-0);
+}
+.magritte-tag_style-accent___WCqKw_5-0-1.magritte-tag_state-disabled___2su23_5-0-1{
   background-color:var(--magritte-color-component-tag-background-state-accent-disabled-v24-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-accent-disabled-v24-1-0);
 }
-.magritte-tag_style-accent___WCqKw_4-0-26.magritte-tag_state-disabled___2su23_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_style-accent___WCqKw_5-0-1.magritte-tag_state-disabled___2su23_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   color:var(--magritte-color-component-tag-text-state-accent-disabled-v24-1-0);
 }
-.magritte-tag_size-medium___Splpy_4-0-26{
+.magritte-tag_style-accent___WCqKw_5-0-1.magritte-tag_state-disabled___2su23_5-0-1.magritte-disabled-icon-color-override___E6mEW_5-0-1{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-accent-disabled-v24-1-0);
+}
+.magritte-tag_style-accent___WCqKw_5-0-1.magritte-tag_state-disabled___2su23_5-0-1.magritte-on-surface___-0Bc4_5-0-1{
+  background-color:var(--magritte-color-component-tag-background-state-on-surface-accent-disabled-v24-1-0);
+}
+.magritte-tag_size-medium___Splpy_5-0-1{
   border-radius:8px;
   padding:4px 8px;
   gap:4px;
@@ -180,10 +264,10 @@
   max-width:min(100%, 288px);
   box-sizing:border-box;
 }
-.magritte-tag_size-medium___Splpy_4-0-26 .magritte-tag__icon___Avk97_4-0-26{
+.magritte-tag_size-medium___Splpy_5-0-1 .magritte-tag__icon___Avk97_5-0-1{
   padding:2px 0;
 }
-.magritte-tag_size-large___SWuug_4-0-26{
+.magritte-tag_size-large___SWuug_5-0-1{
   border-radius:18px;
   padding:6px 10px;
   gap:2px;
@@ -191,7 +275,7 @@
   max-width:min(100%, 288px);
   box-sizing:border-box;
 }
-.magritte-tag_size-large___SWuug_4-0-26 .magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag_size-large___SWuug_5-0-1 .magritte-tag__label___YHV-o_5-0-1{
   font-family:"hh sans";
   font-weight:500;
   line-height:22px;
@@ -202,10 +286,10 @@
   text-decoration:none;
   padding:1px 2px;
 }
-.magritte-tag_size-large___SWuug_4-0-26 .magritte-tag__icon___Avk97_4-0-26{
+.magritte-tag_size-large___SWuug_5-0-1 .magritte-tag__icon___Avk97_5-0-1{
   padding:4px 0;
 }
-.magritte-tag__label___YHV-o_4-0-26{
+.magritte-tag__label___YHV-o_5-0-1{
   font-family:"hh sans";
   font-weight:400;
   line-height:20px;
@@ -218,7 +302,7 @@
   overflow:hidden;
   white-space:nowrap;
 }
-.magritte-tag__icon___Avk97_4-0-26{
+.magritte-tag__icon___Avk97_5-0-1{
   display:flex;
   flex-shrink:0;
 }

package/index.js CHANGED Viewed

@@ -1,6 +1,9 @@
 import './index.css';
 export { Tag } from './Tag.js';
 import 'react/jsx-runtime';
+import 'react';
 import 'classnames';
 import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-ui-icon';
+import '@hh.ru/magritte-ui-icon/types';
 //# sourceMappingURL=index.js.map

package/index.js.map CHANGED Viewed

	@@ -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 Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-tag",
-  "version": "4.0.26",
+  "version": "5.0.1",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -21,7 +21,7 @@
   "dependencies": {
     "@hh.ru/magritte-common-use-disabled": "1.0.14",
     "@hh.ru/magritte-design-tokens": "24.1.0",
-    "@hh.ru/magritte-ui-icon": "13.5.4",
+    "@hh.ru/magritte-ui-icon": "13.6.0",
     "@hh.ru/magritte-ui-mock-component": "1.1.6"
   },
   "peerDependencies": {
@@ -31,5 +31,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5ade9df0a0cb42a3cc6f86d2919d39a9d48852b3"
+  "gitHead": "3bec23f33a604ce69a0649560716934949bdfe29"
 }

package/types.d.ts CHANGED Viewed

@@ -1,19 +1,19 @@
-import { IconWrapperComponentSize16 } from '@hh.ru/magritte-ui-icon/types';
 export type TagStyle = 'neutral' | 'positive' | 'negative' | 'special' | 'warning' | 'accent';
 export type TagSize = 'medium' | 'large';
 type CommonTagProps = {
     style?: TagStyle;
     size?: TagSize;
     disabled?: boolean;
+    onSurface?: boolean;
 };
 export interface TagLabelProps extends CommonTagProps {
     children: React.ReactNode;
-    icon?: IconWrapperComponentSize16;
+    icon?: React.ReactNode;
     hideLabel?: false;
     'aria-label'?: string;
 }
 export type TagIconProps = CommonTagProps & {
-    icon: IconWrapperComponentSize16;
+    icon: React.ReactNode;
     'aria-label': string;
 } & ({
     children?: never;