@semcore/tag 5.13.0 → 5.14.0-prerelease.1

package/CHANGELOG.md

@@ -2,7 +2,17 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [5.13.0-prerelease.0] - 2023-10-26
+## [5.14.0-prerelease.1] - 2023-10-26
+
+### Added
+
+- Design tokens resolving for prop `color`.
+
+### Changed
+
+- Default text color is based on inversed and processed background color.
+
+## [5.13.0] - 2023-10-26
 
 ### Changed
 

package/lib/cjs/Tag.js

@@ -15,85 +15,35 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _core = _interopRequireWildcard(require("@semcore/core"));
 var _react = _interopRequireDefault(require("react"));
 var _flexBox = require("@semcore/flex-box");
-var _color = _interopRequireWildcard(require("@semcore/utils/lib/color"));
 var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
 var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
 var _m = _interopRequireDefault(require("@semcore/icon/Close/m"));
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
 var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
+var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
 var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
 /*__reshadow-styles__:"./style/tag.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___STag_tfxau_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-radius:var(--intergalactic-tag-rounded, 24px);padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);font-weight:var(--intergalactic-medium, 500);background-color:var(--colorBg_tfxau);color:var(--colorText_tfxau);border-color:var(--colorBorder_tfxau)}.___STag_tfxau_gg_.__active_tfxau_gg_,.___STag_tfxau_gg_.__interactive_tfxau_gg_:active{background-color:var(--colorBgHover_tfxau)}@media (hover:hover){.___STag_tfxau_gg_.__interactive_tfxau_gg_:hover{background-color:var(--colorBgHover_tfxau)}}.___STag_tfxau_gg_.__\\\\\\:has\\\\\\(SText\\\\\\:focus\\\\\\)_tfxau_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_tfxau_gg_:has(.___SText_tfxau_gg_:focus){box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_tfxau_gg_.__disabled_tfxau_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STag_tfxau_gg_.__interactive_tfxau_gg_{cursor:pointer}.___STag_tfxau_gg_._size_m_tfxau_gg_{height:20px;min-width:20px}.___STag_tfxau_gg_._size_m_tfxau_gg_ .___SCircle_tfxau_gg_:first-child{margin-left:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_tfxau_gg_._size_m_tfxau_gg_ .___SCircle_tfxau_gg_:last-child{margin-right:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_tfxau_gg_._size_m_tfxau_gg_ .___SText_tfxau_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___STag_tfxau_gg_._size_l_tfxau_gg_{height:28px;min-width:28px}.___STag_tfxau_gg_._size_l_tfxau_gg_ .___SText_tfxau_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STag_tfxau_gg_._size_xl_tfxau_gg_{height:40px;min-width:40px}.___STag_tfxau_gg_._size_xl_tfxau_gg_ .___SText_tfxau_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STag_tfxau_gg_._theme_primary_tfxau_gg_{background-color:var(--colorBg_tfxau);border-color:var(--colorBg_tfxau);color:var(--colorText_tfxau)}.___STag_tfxau_gg_._theme_primary_tfxau_gg_.__active_tfxau_gg_,.___STag_tfxau_gg_._theme_primary_tfxau_gg_.__interactive_tfxau_gg_:active{background-color:var(--colorBgHover_tfxau)}@media (hover:hover){.___STag_tfxau_gg_._theme_primary_tfxau_gg_.__interactive_tfxau_gg_:hover{background-color:var(--colorBgHover_tfxau)}}.___STag_tfxau_gg_._theme_primary-invert_tfxau_gg_{background-color:var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15));color:var(--intergalactic-text-primary-invert, #ffffff)}.___STag_tfxau_gg_._theme_primary-invert_tfxau_gg_.__active_tfxau_gg_,.___STag_tfxau_gg_._theme_primary-invert_tfxau_gg_.__interactive_tfxau_gg_:active{background-color:var(--intergalactic-tag-primary-white-hover-active, rgba(255, 255, 255, 0.3))}@media (hover:hover){.___STag_tfxau_gg_._theme_primary-invert_tfxau_gg_.__interactive_tfxau_gg_:hover{background-color:var(--intergalactic-tag-primary-white-hover-active, rgba(255, 255, 255, 0.3))}}.___STag_tfxau_gg_._theme_additional-invert_tfxau_gg_,.___STag_tfxau_gg_._theme_secondary-invert_tfxau_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);border-color:var(--intergalactic-border-secondary-invert, rgba(255, 255, 255, 0.3))}.___STag_tfxau_gg_._theme_additional-invert_tfxau_gg_.__active_tfxau_gg_,.___STag_tfxau_gg_._theme_additional-invert_tfxau_gg_.__interactive_tfxau_gg_:active,.___STag_tfxau_gg_._theme_secondary-invert_tfxau_gg_.__active_tfxau_gg_,.___STag_tfxau_gg_._theme_secondary-invert_tfxau_gg_.__interactive_tfxau_gg_:active{background-color:var(--intergalactic-tag-secondary-hover-active, #f4f5f9)}@media (hover:hover){.___STag_tfxau_gg_._theme_additional-invert_tfxau_gg_.__interactive_tfxau_gg_:hover,.___STag_tfxau_gg_._theme_secondary-invert_tfxau_gg_.__interactive_tfxau_gg_:hover{background-color:var(--intergalactic-tag-secondary-hover-active, #f4f5f9)}}.___STag_tfxau_gg_._theme_additional_tfxau_gg_{border-style:dashed}.___SText_tfxau_gg_{display:inline-block;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:0}.___SText_tfxau_gg_:not(:only-child):first-child{padding-right:0}.___SText_tfxau_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_tfxau_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_tfxau_gg_,.___SCircle_tfxau_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_tfxau_gg_{flex-shrink:0;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px)}.___SCircle_tfxau_gg_{overflow:hidden;border-radius:50%;margin:0 var(--intergalactic-spacing-1x, 4px)}.___SCircle_tfxau_gg_:first-child{margin-left:0}.___SCircle_tfxau_gg_:last-child{margin-right:0}.___SCircle_tfxau_gg_._size_m_tfxau_gg_{width:16px;height:16px}.___SCircle_tfxau_gg_._size_l_tfxau_gg_,.___SCircle_tfxau_gg_._size_xl_tfxau_gg_{width:20px;height:20px}.___SClose_tfxau_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--intergalactic-spacing-1x, 4px);opacity:.5}@media (hover:hover){.___SClose_tfxau_gg_:hover{opacity:1}}" /*__inner_css_end__*/, "tfxau_gg_") /*__reshadow_css_end__*/, {
-  "__STag": "___STag_tfxau_gg_",
-  "--colorBg": "--colorBg_tfxau",
-  "--colorText": "--colorText_tfxau",
-  "--colorBorder": "--colorBorder_tfxau",
-  "_interactive": "__interactive_tfxau_gg_",
-  "_active": "__active_tfxau_gg_",
-  "--colorBgHover": "--colorBgHover_tfxau",
-  "_\\:has\\(SText\\:focus\\)": "__\\:has\\(SText\\:focus\\)_tfxau_gg_",
-  "__SText": "___SText_tfxau_gg_",
-  "_disabled": "__disabled_tfxau_gg_",
-  "_size_m": "_size_m_tfxau_gg_",
-  "__SCircle": "___SCircle_tfxau_gg_",
-  "_size_l": "_size_l_tfxau_gg_",
-  "_size_xl": "_size_xl_tfxau_gg_",
-  "_theme_primary": "_theme_primary_tfxau_gg_",
-  "_theme_primary-invert": "_theme_primary-invert_tfxau_gg_",
-  "_theme_secondary-invert": "_theme_secondary-invert_tfxau_gg_",
-  "_theme_additional-invert": "_theme_additional-invert_tfxau_gg_",
-  "_theme_additional": "_theme_additional_tfxau_gg_",
-  "__SAddon": "___SAddon_tfxau_gg_",
-  "__SClose": "___SClose_tfxau_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___STag_wd6wa_gg_{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border:1px solid var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:var(--intergalactic-tag-rounded, 24px);padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);font-weight:var(--intergalactic-medium, 500);color:var(--tag-color_wd6wa)}.___STag_wd6wa_gg_.__\\\\\\:has\\\\\\(SText\\\\\\:focus\\\\\\)_wd6wa_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_wd6wa_gg_:has(.___SText_wd6wa_gg_:focus){box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_wd6wa_gg_::after,.___STag_wd6wa_gg_::before{content:\"\";position:absolute;border-radius:var(--intergalactic-tag-rounded, 24px);filter:brightness(150%)}.___STag_wd6wa_gg_::before{top:0;left:0;right:0;bottom:0;background-color:var(--tag-color_wd6wa);opacity:.2}.___STag_wd6wa_gg_::after{top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border:1px solid var(--tag-color_wd6wa);opacity:.1}.___STag_wd6wa_gg_.__disabled_wd6wa_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STag_wd6wa_gg_.__interactive_wd6wa_gg_{cursor:pointer}.___STag_wd6wa_gg_._size_m_wd6wa_gg_{height:20px;min-width:20px}.___STag_wd6wa_gg_._size_m_wd6wa_gg_ .___SCircle_wd6wa_gg_:first-child{margin-left:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_wd6wa_gg_._size_m_wd6wa_gg_ .___SCircle_wd6wa_gg_:last-child{margin-right:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_wd6wa_gg_._size_m_wd6wa_gg_ .___SText_wd6wa_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___STag_wd6wa_gg_._size_l_wd6wa_gg_{height:28px;min-width:28px}.___STag_wd6wa_gg_._size_l_wd6wa_gg_ .___SText_wd6wa_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STag_wd6wa_gg_._size_xl_wd6wa_gg_{height:40px;min-width:40px}.___STag_wd6wa_gg_._size_xl_wd6wa_gg_ .___SText_wd6wa_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STag_wd6wa_gg_._theme_primary_wd6wa_gg_::before{top:-1px;left:-1px;right:-1px;bottom:-1px}.___STag_wd6wa_gg_._theme_primary_wd6wa_gg_:after{display:none}.___STag_wd6wa_gg_._theme_primary_wd6wa_gg_.__active_wd6wa_gg_:before,.___STag_wd6wa_gg_._theme_primary_wd6wa_gg_.__interactive_wd6wa_gg_:active:before{opacity:.3}@media (hover:hover){.___STag_wd6wa_gg_._theme_primary_wd6wa_gg_.__interactive_wd6wa_gg_:hover:before{opacity:.3}}.___STag_wd6wa_gg_._theme_additional_wd6wa_gg_::before,.___STag_wd6wa_gg_._theme_secondary_wd6wa_gg_::before{opacity:.01}.___STag_wd6wa_gg_._theme_additional_wd6wa_gg_.__active_wd6wa_gg_:before,.___STag_wd6wa_gg_._theme_additional_wd6wa_gg_.__interactive_wd6wa_gg_:active:before,.___STag_wd6wa_gg_._theme_secondary_wd6wa_gg_.__active_wd6wa_gg_:before,.___STag_wd6wa_gg_._theme_secondary_wd6wa_gg_.__interactive_wd6wa_gg_:active:before{opacity:.1}@media (hover:hover){.___STag_wd6wa_gg_._theme_additional_wd6wa_gg_.__interactive_wd6wa_gg_:hover:before,.___STag_wd6wa_gg_._theme_secondary_wd6wa_gg_.__interactive_wd6wa_gg_:hover:before{opacity:.1}}.___STag_wd6wa_gg_._theme_additional-invert_wd6wa_gg_::after,.___STag_wd6wa_gg_._theme_additional_wd6wa_gg_::after,.___STag_wd6wa_gg_._theme_secondary-invert_wd6wa_gg_::after,.___STag_wd6wa_gg_._theme_secondary_wd6wa_gg_::after{opacity:.5}.___STag_wd6wa_gg_._theme_primary-invert_wd6wa_gg_{background-color:var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15))}.___STag_wd6wa_gg_._theme_additional-invert_wd6wa_gg_,.___STag_wd6wa_gg_._theme_primary-invert_wd6wa_gg_,.___STag_wd6wa_gg_._theme_secondary-invert_wd6wa_gg_{color:var(--intergalactic-text-primary-invert, #ffffff)}.___STag_wd6wa_gg_._theme_additional_wd6wa_gg_::after{border-style:dashed}.___SText_wd6wa_gg_{display:inline-block;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:0;position:relative}.___SText_wd6wa_gg_:not(:only-child):first-child{padding-right:0}.___SText_wd6wa_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_wd6wa_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_wd6wa_gg_,.___SCircle_wd6wa_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_wd6wa_gg_{flex-shrink:0;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);position:relative}.___SCircle_wd6wa_gg_{overflow:hidden;border-radius:50%;margin:0 var(--intergalactic-spacing-1x, 4px)}.___SCircle_wd6wa_gg_:first-child{margin-left:0}.___SCircle_wd6wa_gg_:last-child{margin-right:0}.___SCircle_wd6wa_gg_._size_m_wd6wa_gg_{width:16px;height:16px}.___SCircle_wd6wa_gg_._size_l_wd6wa_gg_,.___SCircle_wd6wa_gg_._size_xl_wd6wa_gg_{width:20px;height:20px}.___SClose_wd6wa_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--intergalactic-spacing-1x, 4px);opacity:.5}@media (hover:hover){.___SClose_wd6wa_gg_:hover{opacity:1}}" /*__inner_css_end__*/, "wd6wa_gg_") /*__reshadow_css_end__*/, {
+  "__STag": "___STag_wd6wa_gg_",
+  "--tag-color": "--tag-color_wd6wa",
+  "_\\:has\\(SText\\:focus\\)": "__\\:has\\(SText\\:focus\\)_wd6wa_gg_",
+  "__SText": "___SText_wd6wa_gg_",
+  "_disabled": "__disabled_wd6wa_gg_",
+  "_interactive": "__interactive_wd6wa_gg_",
+  "_size_m": "_size_m_wd6wa_gg_",
+  "__SCircle": "___SCircle_wd6wa_gg_",
+  "_size_l": "_size_l_wd6wa_gg_",
+  "_size_xl": "_size_xl_wd6wa_gg_",
+  "_theme_primary": "_theme_primary_wd6wa_gg_",
+  "_active": "__active_wd6wa_gg_",
+  "_theme_secondary": "_theme_secondary_wd6wa_gg_",
+  "_theme_additional": "_theme_additional_wd6wa_gg_",
+  "_theme_secondary-invert": "_theme_secondary-invert_wd6wa_gg_",
+  "_theme_additional-invert": "_theme_additional-invert_wd6wa_gg_",
+  "_theme_primary-invert": "_theme_primary-invert_wd6wa_gg_",
+  "__SAddon": "___SAddon_wd6wa_gg_",
+  "__SClose": "___SClose_wd6wa_gg_"
 });
-var textColorToBgColor = {
-  'gray-500': 'gray-100',
-  'blue-500': 'blue-100',
-  'green-500': 'green-100',
-  'salad-500': 'salad-100',
-  'orange-500': 'orange-100',
-  'yellow-500': 'yellow-100',
-  'red-500': 'red-100',
-  'pink-500': 'pink-100',
-  'violet-500': 'violet-100'
-};
-var textColorToHoveredTextColor = {
-  'gray-500': 'gray-50',
-  'blue-500': 'blue-50',
-  'green-500': 'green-50',
-  'salad-500': 'salad-50',
-  'orange-500': 'orange-50',
-  'yellow-500': 'yellow-50',
-  'red-500': 'red-50',
-  'pink-500': 'pink-50',
-  'violet-500': 'violet-50'
-};
-var textColorToBorderColor = {
-  'gray-500': 'gray-200',
-  'blue-500': 'blue-200',
-  'green-500': 'green-200',
-  'salad-500': 'salad-200',
-  'orange-500': 'orange-200',
-  'yellow-500': 'yellow-200',
-  'red-500': 'red-200',
-  'pink-500': 'pink-200',
-  'violet-500': 'violet-200'
-};
-var getPrimaryColors = function getPrimaryColors(color) {
-  return {
-    colorBg: (0, _color.opacity)((0, _color["default"])(textColorToBgColor[color]), 0.5) || (0, _color.light)((0, _color["default"])(color), 0.95),
-    colorBgHover: (0, _color["default"])(textColorToBgColor[color] || (0, _color.light)((0, _color["default"])(color), 0.8)),
-    colorText: (0, _color["default"])(color)
-  };
-};
-var getSecondaryColors = function getSecondaryColors(color) {
-  return {
-    colorBg: (0, _color["default"])('white'),
-    colorBgHover: (0, _color["default"])(textColorToHoveredTextColor[color] || (0, _color.light)((0, _color["default"])(color), 0.95)),
-    colorText: (0, _color["default"])(color),
-    colorBorder: (0, _color["default"])(textColorToBorderColor[color] || (0, _color.light)((0, _color["default"])(color), 0.5))
-  };
-};
 var legacyThemeRecommendedMigration = {
   primary: {
     muted: 'gray-500',
@@ -153,17 +103,16 @@ var RootTag = /*#__PURE__*/function (_Component) {
         disabled = _this$asProps2.disabled,
         addonLeft = _this$asProps2.addonLeft,
         addonRight = _this$asProps2.addonRight,
+        resolveColor = _this$asProps2.resolveColor,
+        onClick = _this$asProps2.onClick,
         outerId = _this$asProps2.id,
         uid = _this$asProps2.uid;
       var id = outerId || "igc-".concat(uid, "-tag");
-      var colors = theme !== 'primary' ? getSecondaryColors(color) : getPrimaryColors(color);
       return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STag, _ref6.cn("STag", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
         "id": id,
         "use:interactive": !disabled && interactive,
-        "colorBg": colors.colorBg,
-        "colorBgHover": colors.colorBgHover,
-        "colorText": colors.colorText,
-        "colorBorder": colors.colorBorder
+        "tabIndex": interactive && onClick ? 0 : undefined,
+        "tag-color": resolveColor(color)
       }, _ref))), addonLeft ? /*#__PURE__*/_react["default"].createElement(Tag.Addon, {
         tag: addonLeft
       }) : null, (0, _addonTextChildren["default"])(Children, Tag.Text, Tag.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(Tag.Addon, {
@@ -175,7 +124,7 @@ var RootTag = /*#__PURE__*/function (_Component) {
 }(_core.Component);
 (0, _defineProperty2["default"])(RootTag, "displayName", 'Tag');
 (0, _defineProperty2["default"])(RootTag, "style", style);
-(0, _defineProperty2["default"])(RootTag, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID["default"])()]);
+(0, _defineProperty2["default"])(RootTag, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID["default"])(), (0, _resolveColorEnhance["default"])()]);
 (0, _defineProperty2["default"])(RootTag, "defaultProps", {
   theme: 'primary',
   color: 'gray-500',

package/lib/cjs/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_color","_addonTextChildren","_logger","_m","_intergalacticDynamicLocales","_i18nEnhance","_uniqueID","style","sstyled","insert","textColorToBgColor","textColorToHoveredTextColor","textColorToBorderColor","getPrimaryColors","color","colorBg","opacity","resolveColor","light","colorBgHover","colorText","getSecondaryColors","colorBorder","legacyThemeRecommendedMigration","primary","muted","info","success","warning","danger","secondary","RootTag","_Component","_inherits2","_super","_createSuper2","props","_legacyThemeRecommend","_this","_classCallCheck2","call","logger","warn","use","concat","theme","Tag","displayName","_createClass2","key","value","getCircleProps","size","asProps","getCloseProps","_this$asProps","getI18nText","id","uid","tagId","render","_ref","_ref6","STag","Box","_this$asProps2","Children","styles","interactive","disabled","addonLeft","addonRight","outerId","colors","createElement","cn","_objectSpread2","assignProps","Addon","tag","addonTextChildren","Text","Component","_defineProperty2","i18nEnhance","localizedMessages","uniqueIDEnhancement","i18n","locale","_ref2","arguments[0]","_ref7","SText","Close","_ref3","_ref8","SClose","onKeyDown","event","_props$onClick","onClick","CloseM","_ref4","_ref9","SAddon","Circle","_ref5","_ref10","SCircle","createComponent","_default","exports"],"sources":["../../src/Tag.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor, { opacity, light } from '@semcore/utils/lib/color';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport CloseM from '@semcore/icon/Close/m';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/tag.shadow.css';\n\nconst textColorToBgColor = {\n  'gray-500': 'gray-100',\n  'blue-500': 'blue-100',\n  'green-500': 'green-100',\n  'salad-500': 'salad-100',\n  'orange-500': 'orange-100',\n  'yellow-500': 'yellow-100',\n  'red-500': 'red-100',\n  'pink-500': 'pink-100',\n  'violet-500': 'violet-100',\n};\nconst textColorToHoveredTextColor = {\n  'gray-500': 'gray-50',\n  'blue-500': 'blue-50',\n  'green-500': 'green-50',\n  'salad-500': 'salad-50',\n  'orange-500': 'orange-50',\n  'yellow-500': 'yellow-50',\n  'red-500': 'red-50',\n  'pink-500': 'pink-50',\n  'violet-500': 'violet-50',\n};\nconst textColorToBorderColor = {\n  'gray-500': 'gray-200',\n  'blue-500': 'blue-200',\n  'green-500': 'green-200',\n  'salad-500': 'salad-200',\n  'orange-500': 'orange-200',\n  'yellow-500': 'yellow-200',\n  'red-500': 'red-200',\n  'pink-500': 'pink-200',\n  'violet-500': 'violet-200',\n};\n\nconst getPrimaryColors = (color) => ({\n  colorBg:\n    opacity(resolveColor(textColorToBgColor[color]), 0.5) || light(resolveColor(color), 0.95),\n  colorBgHover: resolveColor(textColorToBgColor[color] || light(resolveColor(color), 0.8)),\n  colorText: resolveColor(color),\n});\n\nconst getSecondaryColors = (color) => ({\n  colorBg: resolveColor('white'),\n  colorBgHover: resolveColor(\n    textColorToHoveredTextColor[color] || light(resolveColor(color), 0.95),\n  ),\n  colorText: resolveColor(color),\n  colorBorder: resolveColor(textColorToBorderColor[color] || light(resolveColor(color), 0.5)),\n});\n\nconst legacyThemeRecommendedMigration = {\n  primary: {\n    muted: 'gray-500',\n    info: 'blue-500',\n    success: 'green-500',\n    warning: 'orange-500',\n    danger: 'red-500',\n  },\n  secondary: {\n    muted: 'gray-50',\n  },\n};\n\nclass RootTag extends Component {\n  static displayName = 'Tag';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement()];\n  static defaultProps = {\n    theme: 'primary',\n    color: 'gray-500',\n    size: 'm',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  constructor(props) {\n    super(props);\n\n    logger.warn(\n      props.use,\n      `Property 'use' is deprecated, replace property to \"theme='${props.use}' color='${\n        legacyThemeRecommendedMigration[props.use]?.[props.theme]\n      }'\"`,\n      props['data-ui-name'] || Tag.displayName,\n    );\n  }\n\n  getCircleProps() {\n    const { size } = this.asProps;\n    return { size };\n  }\n\n  getCloseProps() {\n    const { getI18nText, id, uid } = this.asProps;\n\n    return { getI18nText, tagId: id || `igc-${uid}-tag`, uid };\n  }\n\n  render() {\n    const STag = Root;\n    const {\n      Children,\n      styles,\n      theme,\n      color,\n      interactive,\n      disabled,\n      addonLeft,\n      addonRight,\n      id: outerId,\n      uid,\n    } = this.asProps;\n    const id = outerId || `igc-${uid}-tag`;\n\n    const colors = theme !== 'primary' ? getSecondaryColors(color) : getPrimaryColors(color);\n\n    return sstyled(styles)(\n      <STag\n        render={Box}\n        id={id}\n        use:interactive={!disabled && interactive}\n        colorBg={colors.colorBg}\n        colorBgHover={colors.colorBgHover}\n        colorText={colors.colorText}\n        colorBorder={colors.colorBorder}\n      >\n        {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n        {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n        {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n      </STag>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  const { styles, getI18nText, tagId, uid } = props;\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (event.key === 'Enter') {\n      props.onClick?.(event);\n    }\n  }\n\n  return sstyled(styles)(\n    <SClose\n      render={Box}\n      tag={CloseM}\n      interactive\n      id={`igc-${uid}-tag-clear`}\n      aria-labelledby={`igc-${uid}-tag-clear ${tagId}`}\n      aria-label={getI18nText('remove')}\n      onKeyDown={onKeyDown}\n    />,\n  );\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nfunction Circle(props) {\n  const SCircle = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SCircle render={Box} tag='span' />);\n}\n\nconst Tag = createComponent(RootTag, {\n  Text,\n  Addon,\n  Close,\n  Circle,\n});\n\nexport default Tag;\n"],"mappings":"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"}
+{"version":3,"file":"Tag.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_logger","_m","_intergalacticDynamicLocales","_i18nEnhance","_resolveColorEnhance","_uniqueID","style","sstyled","insert","legacyThemeRecommendedMigration","primary","muted","info","success","warning","danger","secondary","RootTag","_Component","_inherits2","_super","_createSuper2","props","_legacyThemeRecommend","_this","_classCallCheck2","call","logger","warn","use","concat","theme","Tag","displayName","_createClass2","key","value","getCircleProps","size","asProps","getCloseProps","_this$asProps","getI18nText","id","uid","tagId","render","_ref","_ref6","STag","Box","_this$asProps2","Children","styles","color","interactive","disabled","addonLeft","addonRight","resolveColor","onClick","outerId","createElement","cn","_objectSpread2","assignProps","undefined","Addon","tag","addonTextChildren","Text","Component","_defineProperty2","i18nEnhance","localizedMessages","uniqueIDEnhancement","resolveColorEnhance","i18n","locale","_ref2","arguments[0]","_ref7","SText","Close","_ref3","_ref8","SClose","onKeyDown","event","_props$onClick","CloseM","_ref4","_ref9","SAddon","Circle","_ref5","_ref10","SCircle","createComponent","_default","exports"],"sources":["../../src/Tag.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport CloseM from '@semcore/icon/Close/m';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/tag.shadow.css';\n\nconst legacyThemeRecommendedMigration = {\n  primary: {\n    muted: 'gray-500',\n    info: 'blue-500',\n    success: 'green-500',\n    warning: 'orange-500',\n    danger: 'red-500',\n  },\n  secondary: {\n    muted: 'gray-50',\n  },\n};\n\nclass RootTag extends Component {\n  static displayName = 'Tag';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement(), resolveColorEnhance()];\n  static defaultProps = {\n    theme: 'primary',\n    color: 'gray-500',\n    size: 'm',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  constructor(props) {\n    super(props);\n\n    logger.warn(\n      props.use,\n      `Property 'use' is deprecated, replace property to \"theme='${props.use}' color='${\n        legacyThemeRecommendedMigration[props.use]?.[props.theme]\n      }'\"`,\n      props['data-ui-name'] || Tag.displayName,\n    );\n  }\n\n  getCircleProps() {\n    const { size } = this.asProps;\n    return { size };\n  }\n\n  getCloseProps() {\n    const { getI18nText, id, uid } = this.asProps;\n\n    return { getI18nText, tagId: id || `igc-${uid}-tag`, uid };\n  }\n\n  render() {\n    const STag = Root;\n    const {\n      Children,\n      styles,\n      theme,\n      color,\n      interactive,\n      disabled,\n      addonLeft,\n      addonRight,\n      resolveColor,\n      onClick,\n      id: outerId,\n      uid,\n    } = this.asProps;\n    const id = outerId || `igc-${uid}-tag`;\n\n    return sstyled(styles)(\n      <STag\n        render={Box}\n        id={id}\n        use:interactive={!disabled && interactive}\n        tabIndex={interactive && onClick ? 0 : undefined}\n        tag-color={resolveColor(color)}\n      >\n        {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n        {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n        {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n      </STag>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  const { styles, getI18nText, tagId, uid } = props;\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (event.key === 'Enter') {\n      props.onClick?.(event);\n    }\n  }\n\n  return sstyled(styles)(\n    <SClose\n      render={Box}\n      tag={CloseM}\n      interactive\n      id={`igc-${uid}-tag-clear`}\n      aria-labelledby={`igc-${uid}-tag-clear ${tagId}`}\n      aria-label={getI18nText('remove')}\n      onKeyDown={onKeyDown}\n    />,\n  );\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nfunction Circle(props) {\n  const SCircle = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SCircle render={Box} tag='span' />);\n}\n\nconst Tag = createComponent(RootTag, {\n  Text,\n  Addon,\n  Close,\n  Circle,\n});\n\nexport default Tag;\n"],"mappings":"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"}

package/lib/cjs/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\nimport { IconProps } from '@semcore/icon';\n\nexport type TagSize = 'xl' | 'l' | 'm';\nexport type TagThemeOld = 'muted' | 'info' | 'success' | 'warning' | 'danger' | 'invert';\nexport type TagTheme = 'primary' | 'secondary' | 'additional' | (string & TagThemeOld);\nexport type TagUse = 'primary' | 'secondary';\n\n/** @deprecated */\nexport interface ITagProps extends TagProps, UnknownProperties {}\nexport type TagProps = BoxProps & {\n  /** Value responsible for tag availability\n   */\n  disabled?: boolean;\n  /** Value responsible for tag activity\n   */\n  active?: boolean;\n  /** Interactive tag\n   */\n  interactive?: boolean;\n  /** Tag type\n   * @default secondary\n   * @deprecated v4.0.0\n   * @use ITagProps.theme\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default muted\n   */\n  theme?: TagTheme;\n  /** Tag color text */\n  color?: string;\n  /** Tag size\n   * @default m\n   */\n  size?: TagSize;\n  /** Left addon tag */\n  addonLeft?: React.ElementType;\n  /** Right addon tag */\n  addonRight?: React.ElementType;\n  locale?: string;\n};\n\n/** @deprecated */\nexport interface ITagCloseProps extends TagCloseProps, UnknownProperties {}\nexport type TagCloseProps = IconProps & {\n  /** Tag type\n   * @default secondary\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default muted\n   */\n  theme?: TagTheme;\n};\n\n/** @deprecated */\nexport interface ITagContext extends TagContext, UnknownProperties {}\nexport type TagContext = TagProps & {\n  getCloseProps?: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITagAddonProps extends TagAddonProps, UnknownProperties {}\nexport type TagAddonProps = BoxProps & {};\n\n/** @deprecated */\nexport interface ITagTextProps extends TagTextProps, UnknownProperties {}\nexport type TagTextProps = BoxProps & {};\n\ndeclare const Tag: Intergalactic.Component<'div', TagProps, TagContext> & {\n  Text: Intergalactic.Component<'div', TagTextProps>;\n  Addon: Intergalactic.Component<'div', TagAddonProps>;\n  Close: Intergalactic.Component<'div', TagCloseProps>;\n  Circle: Intergalactic.Component<'div', TagAddonProps>;\n};\n\nexport default Tag;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\nimport { IconProps } from '@semcore/icon';\n\nexport type TagSize = 'xl' | 'l' | 'm';\n/** @deprecated */\nexport type TagThemeOld =\n  | 'muted'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'invert'\n  | 'additional';\nexport type TagTheme = 'primary' | 'secondary' | TagThemeOld;\nexport type TagUse = 'primary' | 'secondary';\n\n/** @deprecated */\nexport interface ITagProps extends TagProps, UnknownProperties {}\nexport type TagProps = BoxProps & {\n  /** Value responsible for tag availability\n   */\n  disabled?: boolean;\n  /** Value responsible for tag activity\n   */\n  active?: boolean;\n  /** Interactive tag\n   */\n  interactive?: boolean;\n  /** Tag type\n   * @default secondary\n   * @deprecated v4.0.0\n   * @use ITagProps.theme\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default primary\n   */\n  theme?: TagTheme;\n  /** Tag color text */\n  color?: string;\n  /** Tag size\n   * @default m\n   */\n  size?: TagSize;\n  /** Left addon tag */\n  addonLeft?: React.ElementType;\n  /** Right addon tag */\n  addonRight?: React.ElementType;\n  locale?: string;\n};\n\n/** @deprecated */\nexport interface ITagCloseProps extends TagCloseProps, UnknownProperties {}\nexport type TagCloseProps = IconProps & {\n  /** Tag type\n   * @default secondary\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default muted\n   */\n  theme?: TagTheme;\n};\n\n/** @deprecated */\nexport interface ITagContext extends TagContext, UnknownProperties {}\nexport type TagContext = TagProps & {\n  getCloseProps?: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITagAddonProps extends TagAddonProps, UnknownProperties {}\nexport type TagAddonProps = BoxProps & {};\n\n/** @deprecated */\nexport interface ITagTextProps extends TagTextProps, UnknownProperties {}\nexport type TagTextProps = BoxProps & {};\n\ndeclare const Tag: Intergalactic.Component<'div', TagProps, TagContext> & {\n  Text: Intergalactic.Component<'div', TagTextProps>;\n  Addon: Intergalactic.Component<'div', TagAddonProps>;\n  Close: Intergalactic.Component<'div', TagCloseProps>;\n  Circle: Intergalactic.Component<'div', TagAddonProps>;\n};\n\nexport default Tag;\n"],"mappings":""}

package/lib/cjs/style/tag.shadow.css

@@ -1,35 +1,54 @@
 STag {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
+  border: 1px solid var(--intergalactic-bg-primary-neutral, #ffffff);
   box-sizing: border-box;
-  border-width: 1px;
-  border-style: solid;
+  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
   border-radius: var(--intergalactic-tag-rounded, 24px);
   padding-left: var(--intergalactic-spacing-1x, 4px);
   padding-right: var(--intergalactic-spacing-1x, 4px);
   font-weight: var(--intergalactic-medium, 500);
-  background-color: var(--colorBg);
-  color: var(--colorText);
-  border-color: var(--colorBorder);
-
-  &[interactive]:hover,
-  &[interactive]:active,
-  &[active] {
-    background-color: var(--colorBgHover);
-  }
+  color: var(--tag-color);
 
   &:has(SText:focus) {
     box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
   }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--intergalactic-tag-rounded, 24px);
+    background-color: var(--tag-color);
+    opacity: 0.2;
+    filter: brightness(150%);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    border-radius: var(--intergalactic-tag-rounded, 24px);
+    pointer-events: none;
+    border: 1px solid var(--tag-color);
+    opacity: 0.1;
+    filter: brightness(150%);
+  }
 }
 
 STag[disabled] {
   opacity: var(--intergalactic-disabled-opacity, 0.3);
   cursor: default;
   pointer-events: none;
-  /* Disable link interactions */
 }
 
 STag[interactive] {
@@ -75,42 +94,64 @@ STag[size='xl'] {
 }
 
 STag[theme='primary'] {
-  background-color: var(--colorBg);
-  border-color: var(--colorBg);
-  color: var(--colorText);
+  &::before {
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+  }
+
+  &:after {
+    display: none;
+  }
 
   &[interactive]:hover,
   &[interactive]:active,
   &[active] {
-    background-color: var(--colorBgHover);
+    &:before {
+      opacity: 0.3;
+    }
   }
 }
 
-STag[theme='primary-invert'] {
-  background-color: var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15));
-  color: var(--intergalactic-text-primary-invert, #ffffff);
+STag[theme='secondary'],
+STag[theme='additional'] {
+  &::before {
+    opacity: 0.01;
+  }
 
   &[interactive]:hover,
   &[interactive]:active,
   &[active] {
-    background-color: var(--intergalactic-tag-primary-white-hover-active, rgba(255, 255, 255, 0.3));
+    &:before {
+      opacity: 0.1;
+    }
   }
 }
 
+STag[theme='secondary'],
+STag[theme='additional'],
 STag[theme='secondary-invert'],
 STag[theme='additional-invert'] {
+  &::after {
+    opacity: 0.5;
+  }
+}
+
+STag[theme='primary-invert'] {
+  background-color: var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15));
   color: var(--intergalactic-text-primary-invert, #ffffff);
-  border-color: var(--intergalactic-border-secondary-invert, rgba(255, 255, 255, 0.3));
+}
 
-  &[interactive]:hover,
-  &[interactive]:active,
-  &[active] {
-    background-color: var(--intergalactic-tag-secondary-hover-active, #f4f5f9);
-  }
+STag[theme='secondary-invert'],
+STag[theme='additional-invert'] {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
 }
 
 STag[theme='additional'] {
-  border-style: dashed;
+  &::after {
+    border-style: dashed;
+  }
 }
 
 SText {
@@ -121,6 +162,7 @@ SText {
   overflow: hidden;
   text-overflow: ellipsis;
   outline: none;
+  position: relative;
 }
 
 SText:not(:only-child):first-child {
@@ -143,6 +185,7 @@ SAddon {
   justify-content: center;
   padding-left: var(--intergalactic-spacing-1x, 4px);
   padding-right: var(--intergalactic-spacing-1x, 4px);
+  position: relative;
 }
 
 SCircle {

package/lib/es6/Tag.js

@@ -13,85 +13,35 @@ import { assignProps as _assignProps } from "@semcore/core";
 import React from 'react';
 import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
-import resolveColor, { opacity, light } from '@semcore/utils/lib/color';
 import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
 import logger from '@semcore/utils/lib/logger';
 import CloseM from '@semcore/icon/Close/m';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
+import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
 import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 /*__reshadow-styles__:"./style/tag.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STag_tfxau_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-radius:var(--intergalactic-tag-rounded, 24px);padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);font-weight:var(--intergalactic-medium, 500);background-color:var(--colorBg_tfxau);color:var(--colorText_tfxau);border-color:var(--colorBorder_tfxau)}.___STag_tfxau_gg_.__active_tfxau_gg_,.___STag_tfxau_gg_.__interactive_tfxau_gg_:active{background-color:var(--colorBgHover_tfxau)}@media (hover:hover){.___STag_tfxau_gg_.__interactive_tfxau_gg_:hover{background-color:var(--colorBgHover_tfxau)}}.___STag_tfxau_gg_.__\\\\\\:has\\\\\\(SText\\\\\\:focus\\\\\\)_tfxau_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_tfxau_gg_:has(.___SText_tfxau_gg_:focus){box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_tfxau_gg_.__disabled_tfxau_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STag_tfxau_gg_.__interactive_tfxau_gg_{cursor:pointer}.___STag_tfxau_gg_._size_m_tfxau_gg_{height:20px;min-width:20px}.___STag_tfxau_gg_._size_m_tfxau_gg_ .___SCircle_tfxau_gg_:first-child{margin-left:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_tfxau_gg_._size_m_tfxau_gg_ .___SCircle_tfxau_gg_:last-child{margin-right:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_tfxau_gg_._size_m_tfxau_gg_ .___SText_tfxau_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___STag_tfxau_gg_._size_l_tfxau_gg_{height:28px;min-width:28px}.___STag_tfxau_gg_._size_l_tfxau_gg_ .___SText_tfxau_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STag_tfxau_gg_._size_xl_tfxau_gg_{height:40px;min-width:40px}.___STag_tfxau_gg_._size_xl_tfxau_gg_ .___SText_tfxau_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STag_tfxau_gg_._theme_primary_tfxau_gg_{background-color:var(--colorBg_tfxau);border-color:var(--colorBg_tfxau);color:var(--colorText_tfxau)}.___STag_tfxau_gg_._theme_primary_tfxau_gg_.__active_tfxau_gg_,.___STag_tfxau_gg_._theme_primary_tfxau_gg_.__interactive_tfxau_gg_:active{background-color:var(--colorBgHover_tfxau)}@media (hover:hover){.___STag_tfxau_gg_._theme_primary_tfxau_gg_.__interactive_tfxau_gg_:hover{background-color:var(--colorBgHover_tfxau)}}.___STag_tfxau_gg_._theme_primary-invert_tfxau_gg_{background-color:var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15));color:var(--intergalactic-text-primary-invert, #ffffff)}.___STag_tfxau_gg_._theme_primary-invert_tfxau_gg_.__active_tfxau_gg_,.___STag_tfxau_gg_._theme_primary-invert_tfxau_gg_.__interactive_tfxau_gg_:active{background-color:var(--intergalactic-tag-primary-white-hover-active, rgba(255, 255, 255, 0.3))}@media (hover:hover){.___STag_tfxau_gg_._theme_primary-invert_tfxau_gg_.__interactive_tfxau_gg_:hover{background-color:var(--intergalactic-tag-primary-white-hover-active, rgba(255, 255, 255, 0.3))}}.___STag_tfxau_gg_._theme_additional-invert_tfxau_gg_,.___STag_tfxau_gg_._theme_secondary-invert_tfxau_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);border-color:var(--intergalactic-border-secondary-invert, rgba(255, 255, 255, 0.3))}.___STag_tfxau_gg_._theme_additional-invert_tfxau_gg_.__active_tfxau_gg_,.___STag_tfxau_gg_._theme_additional-invert_tfxau_gg_.__interactive_tfxau_gg_:active,.___STag_tfxau_gg_._theme_secondary-invert_tfxau_gg_.__active_tfxau_gg_,.___STag_tfxau_gg_._theme_secondary-invert_tfxau_gg_.__interactive_tfxau_gg_:active{background-color:var(--intergalactic-tag-secondary-hover-active, #f4f5f9)}@media (hover:hover){.___STag_tfxau_gg_._theme_additional-invert_tfxau_gg_.__interactive_tfxau_gg_:hover,.___STag_tfxau_gg_._theme_secondary-invert_tfxau_gg_.__interactive_tfxau_gg_:hover{background-color:var(--intergalactic-tag-secondary-hover-active, #f4f5f9)}}.___STag_tfxau_gg_._theme_additional_tfxau_gg_{border-style:dashed}.___SText_tfxau_gg_{display:inline-block;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:0}.___SText_tfxau_gg_:not(:only-child):first-child{padding-right:0}.___SText_tfxau_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_tfxau_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_tfxau_gg_,.___SCircle_tfxau_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_tfxau_gg_{flex-shrink:0;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px)}.___SCircle_tfxau_gg_{overflow:hidden;border-radius:50%;margin:0 var(--intergalactic-spacing-1x, 4px)}.___SCircle_tfxau_gg_:first-child{margin-left:0}.___SCircle_tfxau_gg_:last-child{margin-right:0}.___SCircle_tfxau_gg_._size_m_tfxau_gg_{width:16px;height:16px}.___SCircle_tfxau_gg_._size_l_tfxau_gg_,.___SCircle_tfxau_gg_._size_xl_tfxau_gg_{width:20px;height:20px}.___SClose_tfxau_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--intergalactic-spacing-1x, 4px);opacity:.5}@media (hover:hover){.___SClose_tfxau_gg_:hover{opacity:1}}" /*__inner_css_end__*/, "tfxau_gg_") /*__reshadow_css_end__*/, {
-  "__STag": "___STag_tfxau_gg_",
-  "--colorBg": "--colorBg_tfxau",
-  "--colorText": "--colorText_tfxau",
-  "--colorBorder": "--colorBorder_tfxau",
-  "_interactive": "__interactive_tfxau_gg_",
-  "_active": "__active_tfxau_gg_",
-  "--colorBgHover": "--colorBgHover_tfxau",
-  "_\\:has\\(SText\\:focus\\)": "__\\:has\\(SText\\:focus\\)_tfxau_gg_",
-  "__SText": "___SText_tfxau_gg_",
-  "_disabled": "__disabled_tfxau_gg_",
-  "_size_m": "_size_m_tfxau_gg_",
-  "__SCircle": "___SCircle_tfxau_gg_",
-  "_size_l": "_size_l_tfxau_gg_",
-  "_size_xl": "_size_xl_tfxau_gg_",
-  "_theme_primary": "_theme_primary_tfxau_gg_",
-  "_theme_primary-invert": "_theme_primary-invert_tfxau_gg_",
-  "_theme_secondary-invert": "_theme_secondary-invert_tfxau_gg_",
-  "_theme_additional-invert": "_theme_additional-invert_tfxau_gg_",
-  "_theme_additional": "_theme_additional_tfxau_gg_",
-  "__SAddon": "___SAddon_tfxau_gg_",
-  "__SClose": "___SClose_tfxau_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STag_wd6wa_gg_{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border:1px solid var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:var(--intergalactic-tag-rounded, 24px);padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);font-weight:var(--intergalactic-medium, 500);color:var(--tag-color_wd6wa)}.___STag_wd6wa_gg_.__\\\\\\:has\\\\\\(SText\\\\\\:focus\\\\\\)_wd6wa_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_wd6wa_gg_:has(.___SText_wd6wa_gg_:focus){box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_wd6wa_gg_::after,.___STag_wd6wa_gg_::before{content:\"\";position:absolute;border-radius:var(--intergalactic-tag-rounded, 24px);filter:brightness(150%)}.___STag_wd6wa_gg_::before{top:0;left:0;right:0;bottom:0;background-color:var(--tag-color_wd6wa);opacity:.2}.___STag_wd6wa_gg_::after{top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border:1px solid var(--tag-color_wd6wa);opacity:.1}.___STag_wd6wa_gg_.__disabled_wd6wa_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STag_wd6wa_gg_.__interactive_wd6wa_gg_{cursor:pointer}.___STag_wd6wa_gg_._size_m_wd6wa_gg_{height:20px;min-width:20px}.___STag_wd6wa_gg_._size_m_wd6wa_gg_ .___SCircle_wd6wa_gg_:first-child{margin-left:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_wd6wa_gg_._size_m_wd6wa_gg_ .___SCircle_wd6wa_gg_:last-child{margin-right:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_wd6wa_gg_._size_m_wd6wa_gg_ .___SText_wd6wa_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___STag_wd6wa_gg_._size_l_wd6wa_gg_{height:28px;min-width:28px}.___STag_wd6wa_gg_._size_l_wd6wa_gg_ .___SText_wd6wa_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STag_wd6wa_gg_._size_xl_wd6wa_gg_{height:40px;min-width:40px}.___STag_wd6wa_gg_._size_xl_wd6wa_gg_ .___SText_wd6wa_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STag_wd6wa_gg_._theme_primary_wd6wa_gg_::before{top:-1px;left:-1px;right:-1px;bottom:-1px}.___STag_wd6wa_gg_._theme_primary_wd6wa_gg_:after{display:none}.___STag_wd6wa_gg_._theme_primary_wd6wa_gg_.__active_wd6wa_gg_:before,.___STag_wd6wa_gg_._theme_primary_wd6wa_gg_.__interactive_wd6wa_gg_:active:before{opacity:.3}@media (hover:hover){.___STag_wd6wa_gg_._theme_primary_wd6wa_gg_.__interactive_wd6wa_gg_:hover:before{opacity:.3}}.___STag_wd6wa_gg_._theme_additional_wd6wa_gg_::before,.___STag_wd6wa_gg_._theme_secondary_wd6wa_gg_::before{opacity:.01}.___STag_wd6wa_gg_._theme_additional_wd6wa_gg_.__active_wd6wa_gg_:before,.___STag_wd6wa_gg_._theme_additional_wd6wa_gg_.__interactive_wd6wa_gg_:active:before,.___STag_wd6wa_gg_._theme_secondary_wd6wa_gg_.__active_wd6wa_gg_:before,.___STag_wd6wa_gg_._theme_secondary_wd6wa_gg_.__interactive_wd6wa_gg_:active:before{opacity:.1}@media (hover:hover){.___STag_wd6wa_gg_._theme_additional_wd6wa_gg_.__interactive_wd6wa_gg_:hover:before,.___STag_wd6wa_gg_._theme_secondary_wd6wa_gg_.__interactive_wd6wa_gg_:hover:before{opacity:.1}}.___STag_wd6wa_gg_._theme_additional-invert_wd6wa_gg_::after,.___STag_wd6wa_gg_._theme_additional_wd6wa_gg_::after,.___STag_wd6wa_gg_._theme_secondary-invert_wd6wa_gg_::after,.___STag_wd6wa_gg_._theme_secondary_wd6wa_gg_::after{opacity:.5}.___STag_wd6wa_gg_._theme_primary-invert_wd6wa_gg_{background-color:var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15))}.___STag_wd6wa_gg_._theme_additional-invert_wd6wa_gg_,.___STag_wd6wa_gg_._theme_primary-invert_wd6wa_gg_,.___STag_wd6wa_gg_._theme_secondary-invert_wd6wa_gg_{color:var(--intergalactic-text-primary-invert, #ffffff)}.___STag_wd6wa_gg_._theme_additional_wd6wa_gg_::after{border-style:dashed}.___SText_wd6wa_gg_{display:inline-block;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:0;position:relative}.___SText_wd6wa_gg_:not(:only-child):first-child{padding-right:0}.___SText_wd6wa_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_wd6wa_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_wd6wa_gg_,.___SCircle_wd6wa_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_wd6wa_gg_{flex-shrink:0;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);position:relative}.___SCircle_wd6wa_gg_{overflow:hidden;border-radius:50%;margin:0 var(--intergalactic-spacing-1x, 4px)}.___SCircle_wd6wa_gg_:first-child{margin-left:0}.___SCircle_wd6wa_gg_:last-child{margin-right:0}.___SCircle_wd6wa_gg_._size_m_wd6wa_gg_{width:16px;height:16px}.___SCircle_wd6wa_gg_._size_l_wd6wa_gg_,.___SCircle_wd6wa_gg_._size_xl_wd6wa_gg_{width:20px;height:20px}.___SClose_wd6wa_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--intergalactic-spacing-1x, 4px);opacity:.5}@media (hover:hover){.___SClose_wd6wa_gg_:hover{opacity:1}}" /*__inner_css_end__*/, "wd6wa_gg_") /*__reshadow_css_end__*/, {
+  "__STag": "___STag_wd6wa_gg_",
+  "--tag-color": "--tag-color_wd6wa",
+  "_\\:has\\(SText\\:focus\\)": "__\\:has\\(SText\\:focus\\)_wd6wa_gg_",
+  "__SText": "___SText_wd6wa_gg_",
+  "_disabled": "__disabled_wd6wa_gg_",
+  "_interactive": "__interactive_wd6wa_gg_",
+  "_size_m": "_size_m_wd6wa_gg_",
+  "__SCircle": "___SCircle_wd6wa_gg_",
+  "_size_l": "_size_l_wd6wa_gg_",
+  "_size_xl": "_size_xl_wd6wa_gg_",
+  "_theme_primary": "_theme_primary_wd6wa_gg_",
+  "_active": "__active_wd6wa_gg_",
+  "_theme_secondary": "_theme_secondary_wd6wa_gg_",
+  "_theme_additional": "_theme_additional_wd6wa_gg_",
+  "_theme_secondary-invert": "_theme_secondary-invert_wd6wa_gg_",
+  "_theme_additional-invert": "_theme_additional-invert_wd6wa_gg_",
+  "_theme_primary-invert": "_theme_primary-invert_wd6wa_gg_",
+  "__SAddon": "___SAddon_wd6wa_gg_",
+  "__SClose": "___SClose_wd6wa_gg_"
 });
-var textColorToBgColor = {
-  'gray-500': 'gray-100',
-  'blue-500': 'blue-100',
-  'green-500': 'green-100',
-  'salad-500': 'salad-100',
-  'orange-500': 'orange-100',
-  'yellow-500': 'yellow-100',
-  'red-500': 'red-100',
-  'pink-500': 'pink-100',
-  'violet-500': 'violet-100'
-};
-var textColorToHoveredTextColor = {
-  'gray-500': 'gray-50',
-  'blue-500': 'blue-50',
-  'green-500': 'green-50',
-  'salad-500': 'salad-50',
-  'orange-500': 'orange-50',
-  'yellow-500': 'yellow-50',
-  'red-500': 'red-50',
-  'pink-500': 'pink-50',
-  'violet-500': 'violet-50'
-};
-var textColorToBorderColor = {
-  'gray-500': 'gray-200',
-  'blue-500': 'blue-200',
-  'green-500': 'green-200',
-  'salad-500': 'salad-200',
-  'orange-500': 'orange-200',
-  'yellow-500': 'yellow-200',
-  'red-500': 'red-200',
-  'pink-500': 'pink-200',
-  'violet-500': 'violet-200'
-};
-var getPrimaryColors = function getPrimaryColors(color) {
-  return {
-    colorBg: opacity(resolveColor(textColorToBgColor[color]), 0.5) || light(resolveColor(color), 0.95),
-    colorBgHover: resolveColor(textColorToBgColor[color] || light(resolveColor(color), 0.8)),
-    colorText: resolveColor(color)
-  };
-};
-var getSecondaryColors = function getSecondaryColors(color) {
-  return {
-    colorBg: resolveColor('white'),
-    colorBgHover: resolveColor(textColorToHoveredTextColor[color] || light(resolveColor(color), 0.95)),
-    colorText: resolveColor(color),
-    colorBorder: resolveColor(textColorToBorderColor[color] || light(resolveColor(color), 0.5))
-  };
-};
 var legacyThemeRecommendedMigration = {
   primary: {
     muted: 'gray-500',
@@ -151,17 +101,16 @@ var RootTag = /*#__PURE__*/function (_Component) {
         disabled = _this$asProps2.disabled,
         addonLeft = _this$asProps2.addonLeft,
         addonRight = _this$asProps2.addonRight,
+        resolveColor = _this$asProps2.resolveColor,
+        onClick = _this$asProps2.onClick,
         outerId = _this$asProps2.id,
         uid = _this$asProps2.uid;
       var id = outerId || "igc-".concat(uid, "-tag");
-      var colors = theme !== 'primary' ? getSecondaryColors(color) : getPrimaryColors(color);
       return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STag, _ref6.cn("STag", _objectSpread({}, _assignProps({
         "id": id,
         "use:interactive": !disabled && interactive,
-        "colorBg": colors.colorBg,
-        "colorBgHover": colors.colorBgHover,
-        "colorText": colors.colorText,
-        "colorBorder": colors.colorBorder
+        "tabIndex": interactive && onClick ? 0 : undefined,
+        "tag-color": resolveColor(color)
       }, _ref))), addonLeft ? /*#__PURE__*/React.createElement(Tag.Addon, {
         tag: addonLeft
       }) : null, addonTextChildren(Children, Tag.Text, Tag.Addon), addonRight ? /*#__PURE__*/React.createElement(Tag.Addon, {
@@ -173,7 +122,7 @@ var RootTag = /*#__PURE__*/function (_Component) {
 }(Component);
 _defineProperty(RootTag, "displayName", 'Tag');
 _defineProperty(RootTag, "style", style);
-_defineProperty(RootTag, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement()]);
+_defineProperty(RootTag, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement(), resolveColorEnhance()]);
 _defineProperty(RootTag, "defaultProps", {
   theme: 'primary',
   color: 'gray-500',

package/lib/es6/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","opacity","light","addonTextChildren","logger","CloseM","localizedMessages","i18nEnhance","uniqueIDEnhancement","style","_sstyled","insert","textColorToBgColor","textColorToHoveredTextColor","textColorToBorderColor","getPrimaryColors","color","colorBg","colorBgHover","colorText","getSecondaryColors","colorBorder","legacyThemeRecommendedMigration","primary","muted","info","success","warning","danger","secondary","RootTag","_Component","_inherits","_super","_createSuper","props","_legacyThemeRecommend","_this","_classCallCheck","call","warn","use","concat","theme","Tag","displayName","_createClass","key","value","getCircleProps","size","asProps","getCloseProps","_this$asProps","getI18nText","id","uid","tagId","render","_ref","_ref6","STag","_this$asProps2","Children","styles","interactive","disabled","addonLeft","addonRight","outerId","colors","createElement","cn","_objectSpread","_assignProps","Addon","tag","Text","_defineProperty","i18n","locale","_ref2","arguments[0]","_ref7","SText","_assignProps2","Close","_ref3","_ref8","SClose","onKeyDown","event","_props$onClick","onClick","_assignProps3","_ref4","_ref9","SAddon","_assignProps4","Circle","_ref5","_ref10","SCircle","_assignProps5"],"sources":["../../src/Tag.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor, { opacity, light } from '@semcore/utils/lib/color';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport CloseM from '@semcore/icon/Close/m';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/tag.shadow.css';\n\nconst textColorToBgColor = {\n  'gray-500': 'gray-100',\n  'blue-500': 'blue-100',\n  'green-500': 'green-100',\n  'salad-500': 'salad-100',\n  'orange-500': 'orange-100',\n  'yellow-500': 'yellow-100',\n  'red-500': 'red-100',\n  'pink-500': 'pink-100',\n  'violet-500': 'violet-100',\n};\nconst textColorToHoveredTextColor = {\n  'gray-500': 'gray-50',\n  'blue-500': 'blue-50',\n  'green-500': 'green-50',\n  'salad-500': 'salad-50',\n  'orange-500': 'orange-50',\n  'yellow-500': 'yellow-50',\n  'red-500': 'red-50',\n  'pink-500': 'pink-50',\n  'violet-500': 'violet-50',\n};\nconst textColorToBorderColor = {\n  'gray-500': 'gray-200',\n  'blue-500': 'blue-200',\n  'green-500': 'green-200',\n  'salad-500': 'salad-200',\n  'orange-500': 'orange-200',\n  'yellow-500': 'yellow-200',\n  'red-500': 'red-200',\n  'pink-500': 'pink-200',\n  'violet-500': 'violet-200',\n};\n\nconst getPrimaryColors = (color) => ({\n  colorBg:\n    opacity(resolveColor(textColorToBgColor[color]), 0.5) || light(resolveColor(color), 0.95),\n  colorBgHover: resolveColor(textColorToBgColor[color] || light(resolveColor(color), 0.8)),\n  colorText: resolveColor(color),\n});\n\nconst getSecondaryColors = (color) => ({\n  colorBg: resolveColor('white'),\n  colorBgHover: resolveColor(\n    textColorToHoveredTextColor[color] || light(resolveColor(color), 0.95),\n  ),\n  colorText: resolveColor(color),\n  colorBorder: resolveColor(textColorToBorderColor[color] || light(resolveColor(color), 0.5)),\n});\n\nconst legacyThemeRecommendedMigration = {\n  primary: {\n    muted: 'gray-500',\n    info: 'blue-500',\n    success: 'green-500',\n    warning: 'orange-500',\n    danger: 'red-500',\n  },\n  secondary: {\n    muted: 'gray-50',\n  },\n};\n\nclass RootTag extends Component {\n  static displayName = 'Tag';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement()];\n  static defaultProps = {\n    theme: 'primary',\n    color: 'gray-500',\n    size: 'm',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  constructor(props) {\n    super(props);\n\n    logger.warn(\n      props.use,\n      `Property 'use' is deprecated, replace property to \"theme='${props.use}' color='${\n        legacyThemeRecommendedMigration[props.use]?.[props.theme]\n      }'\"`,\n      props['data-ui-name'] || Tag.displayName,\n    );\n  }\n\n  getCircleProps() {\n    const { size } = this.asProps;\n    return { size };\n  }\n\n  getCloseProps() {\n    const { getI18nText, id, uid } = this.asProps;\n\n    return { getI18nText, tagId: id || `igc-${uid}-tag`, uid };\n  }\n\n  render() {\n    const STag = Root;\n    const {\n      Children,\n      styles,\n      theme,\n      color,\n      interactive,\n      disabled,\n      addonLeft,\n      addonRight,\n      id: outerId,\n      uid,\n    } = this.asProps;\n    const id = outerId || `igc-${uid}-tag`;\n\n    const colors = theme !== 'primary' ? getSecondaryColors(color) : getPrimaryColors(color);\n\n    return sstyled(styles)(\n      <STag\n        render={Box}\n        id={id}\n        use:interactive={!disabled && interactive}\n        colorBg={colors.colorBg}\n        colorBgHover={colors.colorBgHover}\n        colorText={colors.colorText}\n        colorBorder={colors.colorBorder}\n      >\n        {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n        {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n        {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n      </STag>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  const { styles, getI18nText, tagId, uid } = props;\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (event.key === 'Enter') {\n      props.onClick?.(event);\n    }\n  }\n\n  return sstyled(styles)(\n    <SClose\n      render={Box}\n      tag={CloseM}\n      interactive\n      id={`igc-${uid}-tag-clear`}\n      aria-labelledby={`igc-${uid}-tag-clear ${tagId}`}\n      aria-label={getI18nText('remove')}\n      onKeyDown={onKeyDown}\n    />,\n  );\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nfunction Circle(props) {\n  const SCircle = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SCircle render={Box} tag='span' />);\n}\n\nconst Tag = createComponent(RootTag, {\n  Text,\n  Addon,\n  Close,\n  Circle,\n});\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,eAAe,IAAIC,SAAS,EAAEC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AACzE,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,YAAY,IAAIC,OAAO,EAAEC,KAAK,QAAQ,0BAA0B;AACvE,OAAOC,iBAAiB,MAAM,sCAAsC;AACpE,OAAOC,MAAM,MAAM,2BAA2B;AAC9C,OAAOC,MAAM,MAAM,uBAAuB;AAC1C,SAASC,iBAAiB,QAAQ,gDAAgD;AAClF,OAAOC,WAAW,MAAM,yCAAyC;AACjE,OAAOC,mBAAmB,MAAM,6BAA6B;AAAC;AAAA,IAAAC,KAAA,+BAAAC,QAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI9D,IAAMC,kBAAkB,GAAG;EACzB,UAAU,EAAE,UAAU;EACtB,UAAU,EAAE,UAAU;EACtB,WAAW,EAAE,WAAW;EACxB,WAAW,EAAE,WAAW;EACxB,YAAY,EAAE,YAAY;EAC1B,YAAY,EAAE,YAAY;EAC1B,SAAS,EAAE,SAAS;EACpB,UAAU,EAAE,UAAU;EACtB,YAAY,EAAE;AAChB,CAAC;AACD,IAAMC,2BAA2B,GAAG;EAClC,UAAU,EAAE,SAAS;EACrB,UAAU,EAAE,SAAS;EACrB,WAAW,EAAE,UAAU;EACvB,WAAW,EAAE,UAAU;EACvB,YAAY,EAAE,WAAW;EACzB,YAAY,EAAE,WAAW;EACzB,SAAS,EAAE,QAAQ;EACnB,UAAU,EAAE,SAAS;EACrB,YAAY,EAAE;AAChB,CAAC;AACD,IAAMC,sBAAsB,GAAG;EAC7B,UAAU,EAAE,UAAU;EACtB,UAAU,EAAE,UAAU;EACtB,WAAW,EAAE,WAAW;EACxB,WAAW,EAAE,WAAW;EACxB,YAAY,EAAE,YAAY;EAC1B,YAAY,EAAE,YAAY;EAC1B,SAAS,EAAE,SAAS;EACpB,UAAU,EAAE,UAAU;EACtB,YAAY,EAAE;AAChB,CAAC;AAED,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,KAAK;EAAA,OAAM;IACnCC,OAAO,EACLhB,OAAO,CAACD,YAAY,CAACY,kBAAkB,CAACI,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,IAAId,KAAK,CAACF,YAAY,CAACgB,KAAK,CAAC,EAAE,IAAI,CAAC;IAC3FE,YAAY,EAAElB,YAAY,CAACY,kBAAkB,CAACI,KAAK,CAAC,IAAId,KAAK,CAACF,YAAY,CAACgB,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;IACxFG,SAAS,EAAEnB,YAAY,CAACgB,KAAK;EAC/B,CAAC;AAAA,CAAC;AAEF,IAAMI,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIJ,KAAK;EAAA,OAAM;IACrCC,OAAO,EAAEjB,YAAY,CAAC,OAAO,CAAC;IAC9BkB,YAAY,EAAElB,YAAY,CACxBa,2BAA2B,CAACG,KAAK,CAAC,IAAId,KAAK,CAACF,YAAY,CAACgB,KAAK,CAAC,EAAE,IAAI,CAAC,CACvE;IACDG,SAAS,EAAEnB,YAAY,CAACgB,KAAK,CAAC;IAC9BK,WAAW,EAAErB,YAAY,CAACc,sBAAsB,CAACE,KAAK,CAAC,IAAId,KAAK,CAACF,YAAY,CAACgB,KAAK,CAAC,EAAE,GAAG,CAAC;EAC5F,CAAC;AAAA,CAAC;AAEF,IAAMM,+BAA+B,GAAG;EACtCC,OAAO,EAAE;IACPC,KAAK,EAAE,UAAU;IACjBC,IAAI,EAAE,UAAU;IAChBC,OAAO,EAAE,WAAW;IACpBC,OAAO,EAAE,YAAY;IACrBC,MAAM,EAAE;EACV,CAAC;EACDC,SAAS,EAAE;IACTL,KAAK,EAAE;EACT;AACF,CAAC;AAAC,IAEIM,OAAO,0BAAAC,UAAA;EAAAC,SAAA,CAAAF,OAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,OAAA;EAYX,SAAAA,QAAYK,KAAK,EAAE;IAAA,IAAAC,qBAAA;IAAA,IAAAC,KAAA;IAAAC,eAAA,OAAAR,OAAA;IACjBO,KAAA,GAAAJ,MAAA,CAAAM,IAAA,OAAMJ,KAAK;IAEX/B,MAAM,CAACoC,IAAI,CACTL,KAAK,CAACM,GAAG,gEAAAC,MAAA,CACoDP,KAAK,CAACM,GAAG,eAAAC,MAAA,EAAAN,qBAAA,GACpEd,+BAA+B,CAACa,KAAK,CAACM,GAAG,CAAC,cAAAL,qBAAA,uBAA1CA,qBAAA,CAA6CD,KAAK,CAACQ,KAAK,CAAC,UAE3DR,KAAK,CAAC,cAAc,CAAC,IAAIS,GAAG,CAACC,WAAW,CACzC;IAAC,OAAAR,KAAA;EACJ;EAACS,YAAA,CAAAhB,OAAA;IAAAiB,GAAA;IAAAC,KAAA,EAED,SAAAC,eAAA,EAAiB;MACf,IAAQC,IAAI,GAAK,IAAI,CAACC,OAAO,CAArBD,IAAI;MACZ,OAAO;QAAEA,IAAI,EAAJA;MAAK,CAAC;IACjB;EAAC;IAAAH,GAAA;IAAAC,KAAA,EAED,SAAAI,cAAA,EAAgB;MACd,IAAAC,aAAA,GAAiC,IAAI,CAACF,OAAO;QAArCG,WAAW,GAAAD,aAAA,CAAXC,WAAW;QAAEC,EAAE,GAAAF,aAAA,CAAFE,EAAE;QAAEC,GAAG,GAAAH,aAAA,CAAHG,GAAG;MAE5B,OAAO;QAAEF,WAAW,EAAXA,WAAW;QAAEG,KAAK,EAAEF,EAAE,WAAAb,MAAA,CAAWc,GAAG,SAAM;QAAEA,GAAG,EAAHA;MAAI,CAAC;IAC5D;EAAC;IAAAT,GAAA;IAAAC,KAAA,EAED,SAAAU,OAAA,EAAS;MAAA,IAAAC,IAAA,QAAAR,OAAA;QAAAS,KAAA;MACP,IAAMC,IAAI,GAmBE9D,GAAG;MAlBf,IAAA+D,cAAA,GAWI,IAAI,CAACX,OAAO;QAVdY,QAAQ,GAAAD,cAAA,CAARC,QAAQ;QACRC,MAAM,GAAAF,cAAA,CAANE,MAAM;QACNrB,KAAK,GAAAmB,cAAA,CAALnB,KAAK;QACL3B,KAAK,GAAA8C,cAAA,CAAL9C,KAAK;QACLiD,WAAW,GAAAH,cAAA,CAAXG,WAAW;QACXC,QAAQ,GAAAJ,cAAA,CAARI,QAAQ;QACRC,SAAS,GAAAL,cAAA,CAATK,SAAS;QACTC,UAAU,GAAAN,cAAA,CAAVM,UAAU;QACNC,OAAO,GAAAP,cAAA,CAAXP,EAAE;QACFC,GAAG,GAAAM,cAAA,CAAHN,GAAG;MAEL,IAAMD,EAAE,GAAGc,OAAO,WAAA3B,MAAA,CAAWc,GAAG,SAAM;MAEtC,IAAMc,MAAM,GAAG3B,KAAK,KAAK,SAAS,GAAGvB,kBAAkB,CAACJ,KAAK,CAAC,GAAGD,gBAAgB,CAACC,KAAK,CAAC;MAExF,OAAA4C,KAAA,GAAO/D,OAAO,CAACmE,MAAM,CAAC,eACpBtE,KAAA,CAAA6E,aAAA,CAACV,IAAI,EAAAD,KAAA,CAAAY,EAAA,SAAAC,aAAA,KAAAC,YAAA;QAAA,MAECnB,EAAE;QAAA,mBACW,CAACW,QAAQ,IAAID,WAAW;QAAA,WAChCK,MAAM,CAACrD,OAAO;QAAA,gBACTqD,MAAM,CAACpD,YAAY;QAAA,aACtBoD,MAAM,CAACnD,SAAS;QAAA,eACdmD,MAAM,CAACjD;MAAW,GAAAsC,IAAA,KAE9BQ,SAAS,gBAAGzE,KAAA,CAAA6E,aAAA,CAAC3B,GAAG,CAAC+B,KAAK;QAACC,GAAG,EAAET;MAAU,EAAG,GAAG,IAAI,EAChDhE,iBAAiB,CAAC4D,QAAQ,EAAEnB,GAAG,CAACiC,IAAI,EAAEjC,GAAG,CAAC+B,KAAK,CAAC,EAChDP,UAAU,gBAAG1E,KAAA,CAAA6E,aAAA,CAAC3B,GAAG,CAAC+B,KAAK;QAACC,GAAG,EAAER;MAAW,EAAG,GAAG,IAAI,CAC9C;IAEX;EAAC;EAAA,OAAAtC,OAAA;AAAA,EApEmBlC,SAAS;AAAAkF,eAAA,CAAzBhD,OAAO,iBACU,KAAK;AAAAgD,eAAA,CADtBhD,OAAO,WAEIrB,KAAK;AAAAqE,eAAA,CAFhBhD,OAAO,aAGM,CAACvB,WAAW,CAACD,iBAAiB,CAAC,EAAEE,mBAAmB,EAAE,CAAC;AAAAsE,eAAA,CAHpEhD,OAAO,kBAIW;EACpBa,KAAK,EAAE,SAAS;EAChB3B,KAAK,EAAE,UAAU;EACjBkC,IAAI,EAAE,GAAG;EACT6B,IAAI,EAAEzE,iBAAiB;EACvB0E,MAAM,EAAE;AACV,CAAC;AA6DH,SAASH,IAAIA,CAAC1C,KAAK,EAAE;EAAA,IAAA8C,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACnB,IAAMC,KAAK,GAE2BrF,GAAG;EADzC,IAAQiE,MAAM,GAAK7B,KAAK,CAAhB6B,MAAM;EACd,OAAAmB,KAAA,GAAOtF,OAAO,CAACmE,MAAM,CAAC,eAACtE,KAAA,CAAA6E,aAAA,CAACa,KAAK,EAAAD,KAAA,CAAAX,EAAA,UAAAC,aAAA,KAAAY,aAAA;IAAA,OAAkB;EAAM,GAAAJ,KAAA,IAAG;AAC1D;AAEA,SAASK,KAAKA,CAACnD,KAAK,EAAE;EAAA,IAAAoD,KAAA,GAAAL,YAAA;IAAAM,KAAA;EACpB,IAAMC,MAAM,GAeA1F,GAAG;EAdf,IAAQiE,MAAM,GAA8B7B,KAAK,CAAzC6B,MAAM;IAAEV,WAAW,GAAiBnB,KAAK,CAAjCmB,WAAW;IAAEG,KAAK,GAAUtB,KAAK,CAApBsB,KAAK;IAAED,GAAG,GAAKrB,KAAK,CAAbqB,GAAG;EAEvC,SAASkC,SAASA,CAACC,KAAK,EAAE;IACxB,IAAIxD,KAAK,CAACuD,SAAS,EAAE;MACnB,OAAOvD,KAAK,CAACuD,SAAS,CAACC,KAAK,CAAC;IAC/B;IAEA,IAAIA,KAAK,CAAC5C,GAAG,KAAK,OAAO,EAAE;MAAA,IAAA6C,cAAA;MACzB,CAAAA,cAAA,GAAAzD,KAAK,CAAC0D,OAAO,cAAAD,cAAA,uBAAbA,cAAA,CAAArD,IAAA,CAAAJ,KAAK,EAAWwD,KAAK,CAAC;IACxB;EACF;EAEA,OAAAH,KAAA,GAAO3F,OAAO,CAACmE,MAAM,CAAC,eACpBtE,KAAA,CAAA6E,aAAA,CAACkB,MAAM,EAAAD,KAAA,CAAAhB,EAAA,WAAAC,aAAA,KAAAqB,aAAA;IAAA,OAEAzF,MAAM;IAAA;IAAA,aAAAqC,MAAA,CAEAc,GAAG;IAAA,0BAAAd,MAAA,CACUc,GAAG,iBAAAd,MAAA,CAAce,KAAK;IAAA,cAClCH,WAAW,CAAC,QAAQ,CAAC;IAAA,aACtBoC;EAAS,GAAAH,KAAA,IACpB;AAEN;AAEA,SAASZ,KAAKA,CAACxC,KAAK,EAAE;EAAA,IAAA4D,KAAA,GAAAb,YAAA;IAAAc,KAAA;EACpB,IAAMC,MAAM,GAE2BlG,GAAG;EAD1C,IAAQiE,MAAM,GAAK7B,KAAK,CAAhB6B,MAAM;EACd,OAAAgC,KAAA,GAAOnG,OAAO,CAACmE,MAAM,CAAC,eAACtE,KAAA,CAAA6E,aAAA,CAAC0B,MAAM,EAAAD,KAAA,CAAAxB,EAAA,WAAAC,aAAA,KAAAyB,aAAA;IAAA,OAAkB;EAAM,GAAAH,KAAA,IAAG;AAC3D;AAEA,SAASI,MAAMA,CAAChE,KAAK,EAAE;EAAA,IAAAiE,KAAA,GAAAlB,YAAA;IAAAmB,MAAA;EACrB,IAAMC,OAAO,GAE2BvG,GAAG;EAD3C,IAAQiE,MAAM,GAAK7B,KAAK,CAAhB6B,MAAM;EACd,OAAAqC,MAAA,GAAOxG,OAAO,CAACmE,MAAM,CAAC,eAACtE,KAAA,CAAA6E,aAAA,CAAC+B,OAAO,EAAAD,MAAA,CAAA7B,EAAA,YAAAC,aAAA,KAAA8B,aAAA;IAAA,OAAkB;EAAM,GAAAH,KAAA,IAAG;AAC5D;AAEA,IAAMxD,GAAG,GAAGjD,eAAe,CAACmC,OAAO,EAAE;EACnC+C,IAAI,EAAJA,IAAI;EACJF,KAAK,EAALA,KAAK;EACLW,KAAK,EAALA,KAAK;EACLa,MAAM,EAANA;AACF,CAAC,CAAC;AAEF,eAAevD,GAAG"}
+{"version":3,"file":"Tag.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","logger","CloseM","localizedMessages","i18nEnhance","resolveColorEnhance","uniqueIDEnhancement","style","_sstyled","insert","legacyThemeRecommendedMigration","primary","muted","info","success","warning","danger","secondary","RootTag","_Component","_inherits","_super","_createSuper","props","_legacyThemeRecommend","_this","_classCallCheck","call","warn","use","concat","theme","Tag","displayName","_createClass","key","value","getCircleProps","size","asProps","getCloseProps","_this$asProps","getI18nText","id","uid","tagId","render","_ref","_ref6","STag","_this$asProps2","Children","styles","color","interactive","disabled","addonLeft","addonRight","resolveColor","onClick","outerId","createElement","cn","_objectSpread","_assignProps","undefined","Addon","tag","Text","_defineProperty","i18n","locale","_ref2","arguments[0]","_ref7","SText","_assignProps2","Close","_ref3","_ref8","SClose","onKeyDown","event","_props$onClick","_assignProps3","_ref4","_ref9","SAddon","_assignProps4","Circle","_ref5","_ref10","SCircle","_assignProps5"],"sources":["../../src/Tag.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport CloseM from '@semcore/icon/Close/m';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/tag.shadow.css';\n\nconst legacyThemeRecommendedMigration = {\n  primary: {\n    muted: 'gray-500',\n    info: 'blue-500',\n    success: 'green-500',\n    warning: 'orange-500',\n    danger: 'red-500',\n  },\n  secondary: {\n    muted: 'gray-50',\n  },\n};\n\nclass RootTag extends Component {\n  static displayName = 'Tag';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement(), resolveColorEnhance()];\n  static defaultProps = {\n    theme: 'primary',\n    color: 'gray-500',\n    size: 'm',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  constructor(props) {\n    super(props);\n\n    logger.warn(\n      props.use,\n      `Property 'use' is deprecated, replace property to \"theme='${props.use}' color='${\n        legacyThemeRecommendedMigration[props.use]?.[props.theme]\n      }'\"`,\n      props['data-ui-name'] || Tag.displayName,\n    );\n  }\n\n  getCircleProps() {\n    const { size } = this.asProps;\n    return { size };\n  }\n\n  getCloseProps() {\n    const { getI18nText, id, uid } = this.asProps;\n\n    return { getI18nText, tagId: id || `igc-${uid}-tag`, uid };\n  }\n\n  render() {\n    const STag = Root;\n    const {\n      Children,\n      styles,\n      theme,\n      color,\n      interactive,\n      disabled,\n      addonLeft,\n      addonRight,\n      resolveColor,\n      onClick,\n      id: outerId,\n      uid,\n    } = this.asProps;\n    const id = outerId || `igc-${uid}-tag`;\n\n    return sstyled(styles)(\n      <STag\n        render={Box}\n        id={id}\n        use:interactive={!disabled && interactive}\n        tabIndex={interactive && onClick ? 0 : undefined}\n        tag-color={resolveColor(color)}\n      >\n        {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n        {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n        {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n      </STag>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  const { styles, getI18nText, tagId, uid } = props;\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (event.key === 'Enter') {\n      props.onClick?.(event);\n    }\n  }\n\n  return sstyled(styles)(\n    <SClose\n      render={Box}\n      tag={CloseM}\n      interactive\n      id={`igc-${uid}-tag-clear`}\n      aria-labelledby={`igc-${uid}-tag-clear ${tagId}`}\n      aria-label={getI18nText('remove')}\n      onKeyDown={onKeyDown}\n    />,\n  );\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nfunction Circle(props) {\n  const SCircle = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SCircle render={Box} tag='span' />);\n}\n\nconst Tag = createComponent(RootTag, {\n  Text,\n  Addon,\n  Close,\n  Circle,\n});\n\nexport default Tag;\n"],"mappings":"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"}

package/lib/es6/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\nimport { IconProps } from '@semcore/icon';\n\nexport type TagSize = 'xl' | 'l' | 'm';\nexport type TagThemeOld = 'muted' | 'info' | 'success' | 'warning' | 'danger' | 'invert';\nexport type TagTheme = 'primary' | 'secondary' | 'additional' | (string & TagThemeOld);\nexport type TagUse = 'primary' | 'secondary';\n\n/** @deprecated */\nexport interface ITagProps extends TagProps, UnknownProperties {}\nexport type TagProps = BoxProps & {\n  /** Value responsible for tag availability\n   */\n  disabled?: boolean;\n  /** Value responsible for tag activity\n   */\n  active?: boolean;\n  /** Interactive tag\n   */\n  interactive?: boolean;\n  /** Tag type\n   * @default secondary\n   * @deprecated v4.0.0\n   * @use ITagProps.theme\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default muted\n   */\n  theme?: TagTheme;\n  /** Tag color text */\n  color?: string;\n  /** Tag size\n   * @default m\n   */\n  size?: TagSize;\n  /** Left addon tag */\n  addonLeft?: React.ElementType;\n  /** Right addon tag */\n  addonRight?: React.ElementType;\n  locale?: string;\n};\n\n/** @deprecated */\nexport interface ITagCloseProps extends TagCloseProps, UnknownProperties {}\nexport type TagCloseProps = IconProps & {\n  /** Tag type\n   * @default secondary\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default muted\n   */\n  theme?: TagTheme;\n};\n\n/** @deprecated */\nexport interface ITagContext extends TagContext, UnknownProperties {}\nexport type TagContext = TagProps & {\n  getCloseProps?: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITagAddonProps extends TagAddonProps, UnknownProperties {}\nexport type TagAddonProps = BoxProps & {};\n\n/** @deprecated */\nexport interface ITagTextProps extends TagTextProps, UnknownProperties {}\nexport type TagTextProps = BoxProps & {};\n\ndeclare const Tag: Intergalactic.Component<'div', TagProps, TagContext> & {\n  Text: Intergalactic.Component<'div', TagTextProps>;\n  Addon: Intergalactic.Component<'div', TagAddonProps>;\n  Close: Intergalactic.Component<'div', TagCloseProps>;\n  Circle: Intergalactic.Component<'div', TagAddonProps>;\n};\n\nexport default Tag;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\nimport { IconProps } from '@semcore/icon';\n\nexport type TagSize = 'xl' | 'l' | 'm';\n/** @deprecated */\nexport type TagThemeOld =\n  | 'muted'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'invert'\n  | 'additional';\nexport type TagTheme = 'primary' | 'secondary' | TagThemeOld;\nexport type TagUse = 'primary' | 'secondary';\n\n/** @deprecated */\nexport interface ITagProps extends TagProps, UnknownProperties {}\nexport type TagProps = BoxProps & {\n  /** Value responsible for tag availability\n   */\n  disabled?: boolean;\n  /** Value responsible for tag activity\n   */\n  active?: boolean;\n  /** Interactive tag\n   */\n  interactive?: boolean;\n  /** Tag type\n   * @default secondary\n   * @deprecated v4.0.0\n   * @use ITagProps.theme\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default primary\n   */\n  theme?: TagTheme;\n  /** Tag color text */\n  color?: string;\n  /** Tag size\n   * @default m\n   */\n  size?: TagSize;\n  /** Left addon tag */\n  addonLeft?: React.ElementType;\n  /** Right addon tag */\n  addonRight?: React.ElementType;\n  locale?: string;\n};\n\n/** @deprecated */\nexport interface ITagCloseProps extends TagCloseProps, UnknownProperties {}\nexport type TagCloseProps = IconProps & {\n  /** Tag type\n   * @default secondary\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default muted\n   */\n  theme?: TagTheme;\n};\n\n/** @deprecated */\nexport interface ITagContext extends TagContext, UnknownProperties {}\nexport type TagContext = TagProps & {\n  getCloseProps?: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITagAddonProps extends TagAddonProps, UnknownProperties {}\nexport type TagAddonProps = BoxProps & {};\n\n/** @deprecated */\nexport interface ITagTextProps extends TagTextProps, UnknownProperties {}\nexport type TagTextProps = BoxProps & {};\n\ndeclare const Tag: Intergalactic.Component<'div', TagProps, TagContext> & {\n  Text: Intergalactic.Component<'div', TagTextProps>;\n  Addon: Intergalactic.Component<'div', TagAddonProps>;\n  Close: Intergalactic.Component<'div', TagCloseProps>;\n  Circle: Intergalactic.Component<'div', TagAddonProps>;\n};\n\nexport default Tag;\n"],"mappings":""}

package/lib/es6/style/tag.shadow.css

@@ -1,35 +1,54 @@
 STag {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
+  border: 1px solid var(--intergalactic-bg-primary-neutral, #ffffff);
   box-sizing: border-box;
-  border-width: 1px;
-  border-style: solid;
+  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
   border-radius: var(--intergalactic-tag-rounded, 24px);
   padding-left: var(--intergalactic-spacing-1x, 4px);
   padding-right: var(--intergalactic-spacing-1x, 4px);
   font-weight: var(--intergalactic-medium, 500);
-  background-color: var(--colorBg);
-  color: var(--colorText);
-  border-color: var(--colorBorder);
-
-  &[interactive]:hover,
-  &[interactive]:active,
-  &[active] {
-    background-color: var(--colorBgHover);
-  }
+  color: var(--tag-color);
 
   &:has(SText:focus) {
     box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
   }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--intergalactic-tag-rounded, 24px);
+    background-color: var(--tag-color);
+    opacity: 0.2;
+    filter: brightness(150%);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    border-radius: var(--intergalactic-tag-rounded, 24px);
+    pointer-events: none;
+    border: 1px solid var(--tag-color);
+    opacity: 0.1;
+    filter: brightness(150%);
+  }
 }
 
 STag[disabled] {
   opacity: var(--intergalactic-disabled-opacity, 0.3);
   cursor: default;
   pointer-events: none;
-  /* Disable link interactions */
 }
 
 STag[interactive] {
@@ -75,42 +94,64 @@ STag[size='xl'] {
 }
 
 STag[theme='primary'] {
-  background-color: var(--colorBg);
-  border-color: var(--colorBg);
-  color: var(--colorText);
+  &::before {
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+  }
+
+  &:after {
+    display: none;
+  }
 
   &[interactive]:hover,
   &[interactive]:active,
   &[active] {
-    background-color: var(--colorBgHover);
+    &:before {
+      opacity: 0.3;
+    }
   }
 }
 
-STag[theme='primary-invert'] {
-  background-color: var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15));
-  color: var(--intergalactic-text-primary-invert, #ffffff);
+STag[theme='secondary'],
+STag[theme='additional'] {
+  &::before {
+    opacity: 0.01;
+  }
 
   &[interactive]:hover,
   &[interactive]:active,
   &[active] {
-    background-color: var(--intergalactic-tag-primary-white-hover-active, rgba(255, 255, 255, 0.3));
+    &:before {
+      opacity: 0.1;
+    }
   }
 }
 
+STag[theme='secondary'],
+STag[theme='additional'],
 STag[theme='secondary-invert'],
 STag[theme='additional-invert'] {
+  &::after {
+    opacity: 0.5;
+  }
+}
+
+STag[theme='primary-invert'] {
+  background-color: var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15));
   color: var(--intergalactic-text-primary-invert, #ffffff);
-  border-color: var(--intergalactic-border-secondary-invert, rgba(255, 255, 255, 0.3));
+}
 
-  &[interactive]:hover,
-  &[interactive]:active,
-  &[active] {
-    background-color: var(--intergalactic-tag-secondary-hover-active, #f4f5f9);
-  }
+STag[theme='secondary-invert'],
+STag[theme='additional-invert'] {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
 }
 
 STag[theme='additional'] {
-  border-style: dashed;
+  &::after {
+    border-style: dashed;
+  }
 }
 
 SText {
@@ -121,6 +162,7 @@ SText {
   overflow: hidden;
   text-overflow: ellipsis;
   outline: none;
+  position: relative;
 }
 
 SText:not(:only-child):first-child {
@@ -143,6 +185,7 @@ SAddon {
   justify-content: center;
   padding-left: var(--intergalactic-spacing-1x, 4px);
   padding-right: var(--intergalactic-spacing-1x, 4px);
+  position: relative;
 }
 
 SCircle {

package/lib/types/index.d.ts

@@ -4,8 +4,16 @@ import { BoxProps } from '@semcore/flex-box';
 import { IconProps } from '@semcore/icon';
 
 export type TagSize = 'xl' | 'l' | 'm';
-export type TagThemeOld = 'muted' | 'info' | 'success' | 'warning' | 'danger' | 'invert';
-export type TagTheme = 'primary' | 'secondary' | 'additional' | (string & TagThemeOld);
+/** @deprecated */
+export type TagThemeOld =
+  | 'muted'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'invert'
+  | 'additional';
+export type TagTheme = 'primary' | 'secondary' | TagThemeOld;
 export type TagUse = 'primary' | 'secondary';
 
 /** @deprecated */
@@ -27,7 +35,7 @@ export type TagProps = BoxProps & {
    */
   use?: TagUse;
   /** Tag theme, there are several default themes or you can use your color
-   * @default muted
+   * @default primary
    */
   theme?: TagTheme;
   /** Tag color text */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tag",
   "description": "Semrush Tag Component",
-  "version": "5.13.0",
+  "version": "5.14.0-prerelease.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -9,12 +9,12 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "dependencies": {
-    "@semcore/utils": "4.8.4",
-    "@semcore/icon": "4.12.0",
-    "@semcore/flex-box": "5.8.2"
+    "@semcore/utils": "4.9.0-prerelease.2",
+    "@semcore/icon": "4.13.0-prerelease.1",
+    "@semcore/flex-box": "5.9.0-prerelease.1"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.7.7",
+    "@semcore/core": "^2.8.0-prerelease.0",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },