@semcore/tag 4.1.6 → 4.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,19 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [4.2.1] - 2022-10-17
6
+
7
+ ### Changed
8
+
9
+ - Version patch update due to children dependencies update (`@semcore/utils` [3.39.0 ~> 3.39.0], `@semcore/icon` [3.0.0 ~> 3.0.1], `@semcore/flex-box` [4.6.0 ~> 4.6.1]).
10
+
11
+ ## [4.2.0] - 2022-10-10
12
+
13
+ ### Changed
14
+
15
+ - Added support for React 18 🔥
16
+ - Extended version range for dependency `@semcore/icons`.
17
+
5
18
  ## [4.1.6] - 2022-10-06
6
19
 
7
20
  ### Changed
package/lib/cjs/Tag.js CHANGED
@@ -52,31 +52,31 @@ var style = (
52
52
  /*__reshadow_css_start__*/
53
53
  _core.sstyled.insert(
54
54
  /*__inner_css_start__*/
55
- ":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.___STag_17nfn_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n box-sizing: border-box;\n border-width: 1px;\n border-style: solid;\n border-color: transparent;\n border-radius: 24px;\n padding-left: 4px;\n padding-right: 4px;\n font-weight: 500;\n background-color: var(--colorBg_17nfn);\n color: var(--colorText_17nfn);\n border-color: var(--colorBorder_17nfn)\n}\n\n.___STag_17nfn_gg_.__interactive_17nfn_gg_:hover,\n .___STag_17nfn_gg_.__interactive_17nfn_gg_:active,\n .___STag_17nfn_gg_.__active_17nfn_gg_ {\n background-color: var(--colorBgHover_17nfn);\n }\n\n.___STag_17nfn_gg_.__disabled_17nfn_gg_ {\n opacity: 0.3;\n cursor: default;\n pointer-events: none; /* Disable link interactions */\n}\n\n.___STag_17nfn_gg_.__interactive_17nfn_gg_ {\n cursor: pointer;\n}\n\n.___STag_17nfn_gg_._size_m_17nfn_gg_ {\n height: 20px;\n min-width: 20px\n}\n\n.___STag_17nfn_gg_._size_m_17nfn_gg_ .___SCircle_17nfn_gg_:first-child {\n margin-left: -2px;\n }\n\n.___STag_17nfn_gg_._size_m_17nfn_gg_ .___SCircle_17nfn_gg_:last-child {\n margin-right: -2px;\n }\n\n.___STag_17nfn_gg_._size_m_17nfn_gg_ .___SText_17nfn_gg_ {\n font-size: 12px;\n line-height: 1.33;\n }\n\n.___STag_17nfn_gg_._size_l_17nfn_gg_ {\n height: 28px;\n min-width: 28px\n}\n\n.___STag_17nfn_gg_._size_l_17nfn_gg_ .___SText_17nfn_gg_ {\n font-size: 14px;\n line-height: 1.42;\n }\n\n.___STag_17nfn_gg_._size_xl_17nfn_gg_ {\n height: 40px;\n min-width: 40px\n}\n\n.___STag_17nfn_gg_._size_xl_17nfn_gg_ .___SText_17nfn_gg_ {\n font-size: 16px;\n line-height: 1.5;\n }\n\n.___STag_17nfn_gg_._theme_primary_17nfn_gg_ {\n background-color: var(--colorBg_17nfn);\n border-color: var(--colorBg_17nfn);\n color: var(--colorText_17nfn)\n}\n\n.___STag_17nfn_gg_._theme_primary_17nfn_gg_.__interactive_17nfn_gg_:hover,\n .___STag_17nfn_gg_._theme_primary_17nfn_gg_.__interactive_17nfn_gg_:active,\n .___STag_17nfn_gg_._theme_primary_17nfn_gg_.__active_17nfn_gg_ {\n background-color: var(--colorBgHover_17nfn);\n }\n\n.___STag_17nfn_gg_._theme_primary-invert_17nfn_gg_ {\n background-color: rgba(255, 255, 255, 0.15);\n color: #ffffff\n}\n\n.___STag_17nfn_gg_._theme_primary-invert_17nfn_gg_.__interactive_17nfn_gg_:hover,\n .___STag_17nfn_gg_._theme_primary-invert_17nfn_gg_.__interactive_17nfn_gg_:active,\n .___STag_17nfn_gg_._theme_primary-invert_17nfn_gg_.__active_17nfn_gg_ {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n.___STag_17nfn_gg_._theme_secondary-invert_17nfn_gg_,\n.___STag_17nfn_gg_._theme_additional-invert_17nfn_gg_ {\n color: #ffffff;\n border-color: rgba(255, 255, 255, 0.3)\n}\n\n.___STag_17nfn_gg_._theme_secondary-invert_17nfn_gg_.__interactive_17nfn_gg_:hover,\n .___STag_17nfn_gg_._theme_secondary-invert_17nfn_gg_.__interactive_17nfn_gg_:active,\n .___STag_17nfn_gg_._theme_secondary-invert_17nfn_gg_.__active_17nfn_gg_,\n .___STag_17nfn_gg_._theme_additional-invert_17nfn_gg_.__interactive_17nfn_gg_:hover,\n .___STag_17nfn_gg_._theme_additional-invert_17nfn_gg_.__interactive_17nfn_gg_:active,\n .___STag_17nfn_gg_._theme_additional-invert_17nfn_gg_.__active_17nfn_gg_ {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n.___STag_17nfn_gg_._theme_additional_17nfn_gg_ {\n border-style: dashed;\n}\n\n.___SText_17nfn_gg_ {\n display: inline-block;\n padding-left: 4px;\n padding-right: 4px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.___SText_17nfn_gg_:not(:only-child):first-child {\n padding-right: 0;\n}\n\n.___SText_17nfn_gg_:not(:first-child):not(:last-child) {\n padding-left: 0;\n padding-right: 0;\n}\n\n.___SText_17nfn_gg_:not(:only-child):last-child {\n padding-left: 0;\n}\n\n.___SAddon_17nfn_gg_ {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n padding-left: 4px;\n padding-right: 4px;\n}\n\n.___SCircle_17nfn_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: 50%;\n margin: 0 4px\n}\n\n.___SCircle_17nfn_gg_:first-child {\n margin-left: 0;\n }\n\n.___SCircle_17nfn_gg_:last-child {\n margin-right: 0;\n }\n\n.___SCircle_17nfn_gg_._size_m_17nfn_gg_ {\n width: 16px;\n height: 16px;\n}\n\n.___SCircle_17nfn_gg_._size_l_17nfn_gg_ {\n width: 20px;\n height: 20px;\n}\n\n.___SCircle_17nfn_gg_._size_xl_17nfn_gg_ {\n width: 20px;\n height: 20px;\n}\n\n.___SClose_17nfn_gg_ {\n cursor: pointer;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n padding: 4px;\n}\n"
55
+ ":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.___STag_1f1h2_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n box-sizing: border-box;\n border-width: 1px;\n border-style: solid;\n border-color: transparent;\n border-radius: 24px;\n padding-left: 4px;\n padding-right: 4px;\n font-weight: 500;\n background-color: var(--colorBg_1f1h2);\n color: var(--colorText_1f1h2);\n border-color: var(--colorBorder_1f1h2)\n}\n\n.___STag_1f1h2_gg_.__interactive_1f1h2_gg_:hover,\n .___STag_1f1h2_gg_.__interactive_1f1h2_gg_:active,\n .___STag_1f1h2_gg_.__active_1f1h2_gg_ {\n background-color: var(--colorBgHover_1f1h2);\n }\n\n.___STag_1f1h2_gg_.__disabled_1f1h2_gg_ {\n opacity: 0.3;\n cursor: default;\n pointer-events: none; /* Disable link interactions */\n}\n\n.___STag_1f1h2_gg_.__interactive_1f1h2_gg_ {\n cursor: pointer;\n}\n\n.___STag_1f1h2_gg_._size_m_1f1h2_gg_ {\n height: 20px;\n min-width: 20px\n}\n\n.___STag_1f1h2_gg_._size_m_1f1h2_gg_ .___SCircle_1f1h2_gg_:first-child {\n margin-left: -2px;\n }\n\n.___STag_1f1h2_gg_._size_m_1f1h2_gg_ .___SCircle_1f1h2_gg_:last-child {\n margin-right: -2px;\n }\n\n.___STag_1f1h2_gg_._size_m_1f1h2_gg_ .___SText_1f1h2_gg_ {\n font-size: 12px;\n line-height: 1.33;\n }\n\n.___STag_1f1h2_gg_._size_l_1f1h2_gg_ {\n height: 28px;\n min-width: 28px\n}\n\n.___STag_1f1h2_gg_._size_l_1f1h2_gg_ .___SText_1f1h2_gg_ {\n font-size: 14px;\n line-height: 1.42;\n }\n\n.___STag_1f1h2_gg_._size_xl_1f1h2_gg_ {\n height: 40px;\n min-width: 40px\n}\n\n.___STag_1f1h2_gg_._size_xl_1f1h2_gg_ .___SText_1f1h2_gg_ {\n font-size: 16px;\n line-height: 1.5;\n }\n\n.___STag_1f1h2_gg_._theme_primary_1f1h2_gg_ {\n background-color: var(--colorBg_1f1h2);\n border-color: var(--colorBg_1f1h2);\n color: var(--colorText_1f1h2)\n}\n\n.___STag_1f1h2_gg_._theme_primary_1f1h2_gg_.__interactive_1f1h2_gg_:hover,\n .___STag_1f1h2_gg_._theme_primary_1f1h2_gg_.__interactive_1f1h2_gg_:active,\n .___STag_1f1h2_gg_._theme_primary_1f1h2_gg_.__active_1f1h2_gg_ {\n background-color: var(--colorBgHover_1f1h2);\n }\n\n.___STag_1f1h2_gg_._theme_primary-invert_1f1h2_gg_ {\n background-color: rgba(255, 255, 255, 0.15);\n color: #ffffff\n}\n\n.___STag_1f1h2_gg_._theme_primary-invert_1f1h2_gg_.__interactive_1f1h2_gg_:hover,\n .___STag_1f1h2_gg_._theme_primary-invert_1f1h2_gg_.__interactive_1f1h2_gg_:active,\n .___STag_1f1h2_gg_._theme_primary-invert_1f1h2_gg_.__active_1f1h2_gg_ {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n.___STag_1f1h2_gg_._theme_secondary-invert_1f1h2_gg_,\n.___STag_1f1h2_gg_._theme_additional-invert_1f1h2_gg_ {\n color: #ffffff;\n border-color: rgba(255, 255, 255, 0.3)\n}\n\n.___STag_1f1h2_gg_._theme_secondary-invert_1f1h2_gg_.__interactive_1f1h2_gg_:hover,\n .___STag_1f1h2_gg_._theme_secondary-invert_1f1h2_gg_.__interactive_1f1h2_gg_:active,\n .___STag_1f1h2_gg_._theme_secondary-invert_1f1h2_gg_.__active_1f1h2_gg_,\n .___STag_1f1h2_gg_._theme_additional-invert_1f1h2_gg_.__interactive_1f1h2_gg_:hover,\n .___STag_1f1h2_gg_._theme_additional-invert_1f1h2_gg_.__interactive_1f1h2_gg_:active,\n .___STag_1f1h2_gg_._theme_additional-invert_1f1h2_gg_.__active_1f1h2_gg_ {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n.___STag_1f1h2_gg_._theme_additional_1f1h2_gg_ {\n border-style: dashed;\n}\n\n.___SText_1f1h2_gg_ {\n display: inline-block;\n padding-left: 4px;\n padding-right: 4px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.___SText_1f1h2_gg_:not(:only-child):first-child {\n padding-right: 0;\n}\n\n.___SText_1f1h2_gg_:not(:first-child):not(:last-child) {\n padding-left: 0;\n padding-right: 0;\n}\n\n.___SText_1f1h2_gg_:not(:only-child):last-child {\n padding-left: 0;\n}\n\n.___SAddon_1f1h2_gg_ {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n padding-left: 4px;\n padding-right: 4px;\n}\n\n.___SCircle_1f1h2_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: 50%;\n margin: 0 4px\n}\n\n.___SCircle_1f1h2_gg_:first-child {\n margin-left: 0;\n }\n\n.___SCircle_1f1h2_gg_:last-child {\n margin-right: 0;\n }\n\n.___SCircle_1f1h2_gg_._size_m_1f1h2_gg_ {\n width: 16px;\n height: 16px;\n}\n\n.___SCircle_1f1h2_gg_._size_l_1f1h2_gg_ {\n width: 20px;\n height: 20px;\n}\n\n.___SCircle_1f1h2_gg_._size_xl_1f1h2_gg_ {\n width: 20px;\n height: 20px;\n}\n\n.___SClose_1f1h2_gg_ {\n cursor: pointer;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n padding: 4px;\n}\n"
56
56
  /*__inner_css_end__*/
57
- , "17nfn_gg_")
57
+ , "1f1h2_gg_")
58
58
  /*__reshadow_css_end__*/
59
59
  , {
60
- "__STag": "___STag_17nfn_gg_",
61
- "--colorBg": "--colorBg_17nfn",
62
- "--colorText": "--colorText_17nfn",
63
- "--colorBorder": "--colorBorder_17nfn",
64
- "_interactive": "__interactive_17nfn_gg_",
65
- "_active": "__active_17nfn_gg_",
66
- "--colorBgHover": "--colorBgHover_17nfn",
67
- "_disabled": "__disabled_17nfn_gg_",
68
- "_size_m": "_size_m_17nfn_gg_",
69
- "__SCircle": "___SCircle_17nfn_gg_",
70
- "__SText": "___SText_17nfn_gg_",
71
- "_size_l": "_size_l_17nfn_gg_",
72
- "_size_xl": "_size_xl_17nfn_gg_",
73
- "_theme_primary": "_theme_primary_17nfn_gg_",
74
- "_theme_primary-invert": "_theme_primary-invert_17nfn_gg_",
75
- "_theme_secondary-invert": "_theme_secondary-invert_17nfn_gg_",
76
- "_theme_additional-invert": "_theme_additional-invert_17nfn_gg_",
77
- "_theme_additional": "_theme_additional_17nfn_gg_",
78
- "__SAddon": "___SAddon_17nfn_gg_",
79
- "__SClose": "___SClose_17nfn_gg_"
60
+ "__STag": "___STag_1f1h2_gg_",
61
+ "--colorBg": "--colorBg_1f1h2",
62
+ "--colorText": "--colorText_1f1h2",
63
+ "--colorBorder": "--colorBorder_1f1h2",
64
+ "_interactive": "__interactive_1f1h2_gg_",
65
+ "_active": "__active_1f1h2_gg_",
66
+ "--colorBgHover": "--colorBgHover_1f1h2",
67
+ "_disabled": "__disabled_1f1h2_gg_",
68
+ "_size_m": "_size_m_1f1h2_gg_",
69
+ "__SCircle": "___SCircle_1f1h2_gg_",
70
+ "__SText": "___SText_1f1h2_gg_",
71
+ "_size_l": "_size_l_1f1h2_gg_",
72
+ "_size_xl": "_size_xl_1f1h2_gg_",
73
+ "_theme_primary": "_theme_primary_1f1h2_gg_",
74
+ "_theme_primary-invert": "_theme_primary-invert_1f1h2_gg_",
75
+ "_theme_secondary-invert": "_theme_secondary-invert_1f1h2_gg_",
76
+ "_theme_additional-invert": "_theme_additional-invert_1f1h2_gg_",
77
+ "_theme_additional": "_theme_additional_1f1h2_gg_",
78
+ "__SAddon": "___SAddon_1f1h2_gg_",
79
+ "__SClose": "___SClose_1f1h2_gg_"
80
80
  });
81
81
  var textColorToBgColor = {
82
82
  'gray-500': 'gray-100',
package/lib/es6/Tag.js CHANGED
@@ -32,31 +32,31 @@ var style = (
32
32
  /*__reshadow_css_start__*/
33
33
  _sstyled.insert(
34
34
  /*__inner_css_start__*/
35
- ":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.___STag_17nfn_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n box-sizing: border-box;\n border-width: 1px;\n border-style: solid;\n border-color: transparent;\n border-radius: 24px;\n padding-left: 4px;\n padding-right: 4px;\n font-weight: 500;\n background-color: var(--colorBg_17nfn);\n color: var(--colorText_17nfn);\n border-color: var(--colorBorder_17nfn)\n}\n\n.___STag_17nfn_gg_.__interactive_17nfn_gg_:hover,\n .___STag_17nfn_gg_.__interactive_17nfn_gg_:active,\n .___STag_17nfn_gg_.__active_17nfn_gg_ {\n background-color: var(--colorBgHover_17nfn);\n }\n\n.___STag_17nfn_gg_.__disabled_17nfn_gg_ {\n opacity: 0.3;\n cursor: default;\n pointer-events: none; /* Disable link interactions */\n}\n\n.___STag_17nfn_gg_.__interactive_17nfn_gg_ {\n cursor: pointer;\n}\n\n.___STag_17nfn_gg_._size_m_17nfn_gg_ {\n height: 20px;\n min-width: 20px\n}\n\n.___STag_17nfn_gg_._size_m_17nfn_gg_ .___SCircle_17nfn_gg_:first-child {\n margin-left: -2px;\n }\n\n.___STag_17nfn_gg_._size_m_17nfn_gg_ .___SCircle_17nfn_gg_:last-child {\n margin-right: -2px;\n }\n\n.___STag_17nfn_gg_._size_m_17nfn_gg_ .___SText_17nfn_gg_ {\n font-size: 12px;\n line-height: 1.33;\n }\n\n.___STag_17nfn_gg_._size_l_17nfn_gg_ {\n height: 28px;\n min-width: 28px\n}\n\n.___STag_17nfn_gg_._size_l_17nfn_gg_ .___SText_17nfn_gg_ {\n font-size: 14px;\n line-height: 1.42;\n }\n\n.___STag_17nfn_gg_._size_xl_17nfn_gg_ {\n height: 40px;\n min-width: 40px\n}\n\n.___STag_17nfn_gg_._size_xl_17nfn_gg_ .___SText_17nfn_gg_ {\n font-size: 16px;\n line-height: 1.5;\n }\n\n.___STag_17nfn_gg_._theme_primary_17nfn_gg_ {\n background-color: var(--colorBg_17nfn);\n border-color: var(--colorBg_17nfn);\n color: var(--colorText_17nfn)\n}\n\n.___STag_17nfn_gg_._theme_primary_17nfn_gg_.__interactive_17nfn_gg_:hover,\n .___STag_17nfn_gg_._theme_primary_17nfn_gg_.__interactive_17nfn_gg_:active,\n .___STag_17nfn_gg_._theme_primary_17nfn_gg_.__active_17nfn_gg_ {\n background-color: var(--colorBgHover_17nfn);\n }\n\n.___STag_17nfn_gg_._theme_primary-invert_17nfn_gg_ {\n background-color: rgba(255, 255, 255, 0.15);\n color: #ffffff\n}\n\n.___STag_17nfn_gg_._theme_primary-invert_17nfn_gg_.__interactive_17nfn_gg_:hover,\n .___STag_17nfn_gg_._theme_primary-invert_17nfn_gg_.__interactive_17nfn_gg_:active,\n .___STag_17nfn_gg_._theme_primary-invert_17nfn_gg_.__active_17nfn_gg_ {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n.___STag_17nfn_gg_._theme_secondary-invert_17nfn_gg_,\n.___STag_17nfn_gg_._theme_additional-invert_17nfn_gg_ {\n color: #ffffff;\n border-color: rgba(255, 255, 255, 0.3)\n}\n\n.___STag_17nfn_gg_._theme_secondary-invert_17nfn_gg_.__interactive_17nfn_gg_:hover,\n .___STag_17nfn_gg_._theme_secondary-invert_17nfn_gg_.__interactive_17nfn_gg_:active,\n .___STag_17nfn_gg_._theme_secondary-invert_17nfn_gg_.__active_17nfn_gg_,\n .___STag_17nfn_gg_._theme_additional-invert_17nfn_gg_.__interactive_17nfn_gg_:hover,\n .___STag_17nfn_gg_._theme_additional-invert_17nfn_gg_.__interactive_17nfn_gg_:active,\n .___STag_17nfn_gg_._theme_additional-invert_17nfn_gg_.__active_17nfn_gg_ {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n.___STag_17nfn_gg_._theme_additional_17nfn_gg_ {\n border-style: dashed;\n}\n\n.___SText_17nfn_gg_ {\n display: inline-block;\n padding-left: 4px;\n padding-right: 4px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.___SText_17nfn_gg_:not(:only-child):first-child {\n padding-right: 0;\n}\n\n.___SText_17nfn_gg_:not(:first-child):not(:last-child) {\n padding-left: 0;\n padding-right: 0;\n}\n\n.___SText_17nfn_gg_:not(:only-child):last-child {\n padding-left: 0;\n}\n\n.___SAddon_17nfn_gg_ {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n padding-left: 4px;\n padding-right: 4px;\n}\n\n.___SCircle_17nfn_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: 50%;\n margin: 0 4px\n}\n\n.___SCircle_17nfn_gg_:first-child {\n margin-left: 0;\n }\n\n.___SCircle_17nfn_gg_:last-child {\n margin-right: 0;\n }\n\n.___SCircle_17nfn_gg_._size_m_17nfn_gg_ {\n width: 16px;\n height: 16px;\n}\n\n.___SCircle_17nfn_gg_._size_l_17nfn_gg_ {\n width: 20px;\n height: 20px;\n}\n\n.___SCircle_17nfn_gg_._size_xl_17nfn_gg_ {\n width: 20px;\n height: 20px;\n}\n\n.___SClose_17nfn_gg_ {\n cursor: pointer;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n padding: 4px;\n}\n"
35
+ ":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.___STag_1f1h2_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n box-sizing: border-box;\n border-width: 1px;\n border-style: solid;\n border-color: transparent;\n border-radius: 24px;\n padding-left: 4px;\n padding-right: 4px;\n font-weight: 500;\n background-color: var(--colorBg_1f1h2);\n color: var(--colorText_1f1h2);\n border-color: var(--colorBorder_1f1h2)\n}\n\n.___STag_1f1h2_gg_.__interactive_1f1h2_gg_:hover,\n .___STag_1f1h2_gg_.__interactive_1f1h2_gg_:active,\n .___STag_1f1h2_gg_.__active_1f1h2_gg_ {\n background-color: var(--colorBgHover_1f1h2);\n }\n\n.___STag_1f1h2_gg_.__disabled_1f1h2_gg_ {\n opacity: 0.3;\n cursor: default;\n pointer-events: none; /* Disable link interactions */\n}\n\n.___STag_1f1h2_gg_.__interactive_1f1h2_gg_ {\n cursor: pointer;\n}\n\n.___STag_1f1h2_gg_._size_m_1f1h2_gg_ {\n height: 20px;\n min-width: 20px\n}\n\n.___STag_1f1h2_gg_._size_m_1f1h2_gg_ .___SCircle_1f1h2_gg_:first-child {\n margin-left: -2px;\n }\n\n.___STag_1f1h2_gg_._size_m_1f1h2_gg_ .___SCircle_1f1h2_gg_:last-child {\n margin-right: -2px;\n }\n\n.___STag_1f1h2_gg_._size_m_1f1h2_gg_ .___SText_1f1h2_gg_ {\n font-size: 12px;\n line-height: 1.33;\n }\n\n.___STag_1f1h2_gg_._size_l_1f1h2_gg_ {\n height: 28px;\n min-width: 28px\n}\n\n.___STag_1f1h2_gg_._size_l_1f1h2_gg_ .___SText_1f1h2_gg_ {\n font-size: 14px;\n line-height: 1.42;\n }\n\n.___STag_1f1h2_gg_._size_xl_1f1h2_gg_ {\n height: 40px;\n min-width: 40px\n}\n\n.___STag_1f1h2_gg_._size_xl_1f1h2_gg_ .___SText_1f1h2_gg_ {\n font-size: 16px;\n line-height: 1.5;\n }\n\n.___STag_1f1h2_gg_._theme_primary_1f1h2_gg_ {\n background-color: var(--colorBg_1f1h2);\n border-color: var(--colorBg_1f1h2);\n color: var(--colorText_1f1h2)\n}\n\n.___STag_1f1h2_gg_._theme_primary_1f1h2_gg_.__interactive_1f1h2_gg_:hover,\n .___STag_1f1h2_gg_._theme_primary_1f1h2_gg_.__interactive_1f1h2_gg_:active,\n .___STag_1f1h2_gg_._theme_primary_1f1h2_gg_.__active_1f1h2_gg_ {\n background-color: var(--colorBgHover_1f1h2);\n }\n\n.___STag_1f1h2_gg_._theme_primary-invert_1f1h2_gg_ {\n background-color: rgba(255, 255, 255, 0.15);\n color: #ffffff\n}\n\n.___STag_1f1h2_gg_._theme_primary-invert_1f1h2_gg_.__interactive_1f1h2_gg_:hover,\n .___STag_1f1h2_gg_._theme_primary-invert_1f1h2_gg_.__interactive_1f1h2_gg_:active,\n .___STag_1f1h2_gg_._theme_primary-invert_1f1h2_gg_.__active_1f1h2_gg_ {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n.___STag_1f1h2_gg_._theme_secondary-invert_1f1h2_gg_,\n.___STag_1f1h2_gg_._theme_additional-invert_1f1h2_gg_ {\n color: #ffffff;\n border-color: rgba(255, 255, 255, 0.3)\n}\n\n.___STag_1f1h2_gg_._theme_secondary-invert_1f1h2_gg_.__interactive_1f1h2_gg_:hover,\n .___STag_1f1h2_gg_._theme_secondary-invert_1f1h2_gg_.__interactive_1f1h2_gg_:active,\n .___STag_1f1h2_gg_._theme_secondary-invert_1f1h2_gg_.__active_1f1h2_gg_,\n .___STag_1f1h2_gg_._theme_additional-invert_1f1h2_gg_.__interactive_1f1h2_gg_:hover,\n .___STag_1f1h2_gg_._theme_additional-invert_1f1h2_gg_.__interactive_1f1h2_gg_:active,\n .___STag_1f1h2_gg_._theme_additional-invert_1f1h2_gg_.__active_1f1h2_gg_ {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n.___STag_1f1h2_gg_._theme_additional_1f1h2_gg_ {\n border-style: dashed;\n}\n\n.___SText_1f1h2_gg_ {\n display: inline-block;\n padding-left: 4px;\n padding-right: 4px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.___SText_1f1h2_gg_:not(:only-child):first-child {\n padding-right: 0;\n}\n\n.___SText_1f1h2_gg_:not(:first-child):not(:last-child) {\n padding-left: 0;\n padding-right: 0;\n}\n\n.___SText_1f1h2_gg_:not(:only-child):last-child {\n padding-left: 0;\n}\n\n.___SAddon_1f1h2_gg_ {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n padding-left: 4px;\n padding-right: 4px;\n}\n\n.___SCircle_1f1h2_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: 50%;\n margin: 0 4px\n}\n\n.___SCircle_1f1h2_gg_:first-child {\n margin-left: 0;\n }\n\n.___SCircle_1f1h2_gg_:last-child {\n margin-right: 0;\n }\n\n.___SCircle_1f1h2_gg_._size_m_1f1h2_gg_ {\n width: 16px;\n height: 16px;\n}\n\n.___SCircle_1f1h2_gg_._size_l_1f1h2_gg_ {\n width: 20px;\n height: 20px;\n}\n\n.___SCircle_1f1h2_gg_._size_xl_1f1h2_gg_ {\n width: 20px;\n height: 20px;\n}\n\n.___SClose_1f1h2_gg_ {\n cursor: pointer;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n padding: 4px;\n}\n"
36
36
  /*__inner_css_end__*/
37
- , "17nfn_gg_")
37
+ , "1f1h2_gg_")
38
38
  /*__reshadow_css_end__*/
39
39
  , {
40
- "__STag": "___STag_17nfn_gg_",
41
- "--colorBg": "--colorBg_17nfn",
42
- "--colorText": "--colorText_17nfn",
43
- "--colorBorder": "--colorBorder_17nfn",
44
- "_interactive": "__interactive_17nfn_gg_",
45
- "_active": "__active_17nfn_gg_",
46
- "--colorBgHover": "--colorBgHover_17nfn",
47
- "_disabled": "__disabled_17nfn_gg_",
48
- "_size_m": "_size_m_17nfn_gg_",
49
- "__SCircle": "___SCircle_17nfn_gg_",
50
- "__SText": "___SText_17nfn_gg_",
51
- "_size_l": "_size_l_17nfn_gg_",
52
- "_size_xl": "_size_xl_17nfn_gg_",
53
- "_theme_primary": "_theme_primary_17nfn_gg_",
54
- "_theme_primary-invert": "_theme_primary-invert_17nfn_gg_",
55
- "_theme_secondary-invert": "_theme_secondary-invert_17nfn_gg_",
56
- "_theme_additional-invert": "_theme_additional-invert_17nfn_gg_",
57
- "_theme_additional": "_theme_additional_17nfn_gg_",
58
- "__SAddon": "___SAddon_17nfn_gg_",
59
- "__SClose": "___SClose_17nfn_gg_"
40
+ "__STag": "___STag_1f1h2_gg_",
41
+ "--colorBg": "--colorBg_1f1h2",
42
+ "--colorText": "--colorText_1f1h2",
43
+ "--colorBorder": "--colorBorder_1f1h2",
44
+ "_interactive": "__interactive_1f1h2_gg_",
45
+ "_active": "__active_1f1h2_gg_",
46
+ "--colorBgHover": "--colorBgHover_1f1h2",
47
+ "_disabled": "__disabled_1f1h2_gg_",
48
+ "_size_m": "_size_m_1f1h2_gg_",
49
+ "__SCircle": "___SCircle_1f1h2_gg_",
50
+ "__SText": "___SText_1f1h2_gg_",
51
+ "_size_l": "_size_l_1f1h2_gg_",
52
+ "_size_xl": "_size_xl_1f1h2_gg_",
53
+ "_theme_primary": "_theme_primary_1f1h2_gg_",
54
+ "_theme_primary-invert": "_theme_primary-invert_1f1h2_gg_",
55
+ "_theme_secondary-invert": "_theme_secondary-invert_1f1h2_gg_",
56
+ "_theme_additional-invert": "_theme_additional-invert_1f1h2_gg_",
57
+ "_theme_additional": "_theme_additional_1f1h2_gg_",
58
+ "__SAddon": "___SAddon_1f1h2_gg_",
59
+ "__SClose": "___SClose_1f1h2_gg_"
60
60
  });
61
61
  var textColorToBgColor = {
62
62
  'gray-500': 'gray-100',
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/tag",
3
3
  "description": "Semrush Tag Component",
4
- "version": "4.1.6",
4
+ "version": "4.2.1",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -10,12 +10,12 @@
10
10
  "license": "MIT",
11
11
  "dependencies": {
12
12
  "@semcore/utils": "^3.37",
13
- "@semcore/icon": "^2.16",
13
+ "@semcore/icon": "2.16 - 3",
14
14
  "@semcore/flex-box": "^4"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "@semcore/core": "^1.11",
18
- "react": "16.8 - 17"
18
+ "react": "16.8 - 18"
19
19
  },
20
20
  "jest": {
21
21
  "preset": "@semcore/jest-preset-ui"
@@ -26,7 +26,7 @@
26
26
  "directory": "semcore/tag"
27
27
  },
28
28
  "devDependencies": {
29
- "@types/react": "16.8 - 17",
29
+ "@types/react": "18.0.21",
30
30
  "@semcore/jest-preset-ui": "1.0.0"
31
31
  },
32
32
  "scripts": {