@semcore/tag 4.0.7 → 4.0.8

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,12 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [4.0.8] - 2022-07-21
6
+
7
+ ### Changed
8
+
9
+ - Version patch update due to children dependencies update (`@semcore/icon` [2.28.0 ~> 2.29.0]).
10
+
5
11
  ## [4.0.7] - 2022-07-07
6
12
 
7
13
  ### Changed
package/README.md CHANGED
@@ -42,12 +42,12 @@ of the components that is discussed below. There should only be one version of t
42
42
 
43
43
  You can use the package the same way but without `/ui/` in the import path.
44
44
 
45
- </details>
46
-
47
45
  ```jsx
48
46
  import Tag from '@semcore/tag';
49
47
  ```
50
48
 
49
+ </details>
50
+
51
51
  ## 👤 Author
52
52
 
53
53
  [UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
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
- ".___STag_1xzml_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:24px;padding-left:4px;padding-right:4px;font-weight:500;background-color:var(--colorBg_mtk9p);color:var(--colorText_mtk9p);border-color:var(--colorBorder_mtk9p)}.___STag_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:var(--colorBgHover_mtk9p)}.___STag_1xzml_gg_.__disabled_1xzml_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_1xzml_gg_.__interactive_1xzml_gg_{cursor:pointer}.___STag_1xzml_gg_._size_m_1xzml_gg_{height:20px;min-width:20px;font-size:12px}.___STag_1xzml_gg_._size_m_1xzml_gg_ .___SCircle_1xzml_gg_:first-child{margin-left:-2px}.___STag_1xzml_gg_._size_m_1xzml_gg_ .___SCircle_1xzml_gg_:last-child{margin-right:-2px}.___STag_1xzml_gg_._size_l_1xzml_gg_{height:28px;min-width:28px;font-size:14px}.___STag_1xzml_gg_._size_xl_1xzml_gg_{height:40px;min-width:40px;font-size:16px}.___STag_1xzml_gg_._theme_primary_1xzml_gg_{background-color:var(--colorBg_mtk9p);border-color:var(--colorBg_mtk9p);color:var(--colorText_mtk9p)}.___STag_1xzml_gg_._theme_primary_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_primary_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_primary_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:var(--colorBgHover_mtk9p)}.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_{background-color:hsla(0,0%,100%,.15);color:#ffffff}.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:hsla(0,0%,100%,.3)}.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_{color:#ffffff;border-color:hsla(0,0%,100%,.3)}.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_.__interactive_1xzml_gg_:hover,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:hsla(0,0%,100%,.1)}.___STag_1xzml_gg_._theme_additional_1xzml_gg_{border-style:dashed}.___SText_1xzml_gg_{display:inline-block;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_1xzml_gg_:not(:only-child):first-child{padding-right:0}.___SText_1xzml_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_1xzml_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_1xzml_gg_{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding-left:4px;padding-right:4px}.___SCircle_1xzml_gg_{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;margin:0 4px}.___SCircle_1xzml_gg_:first-child{margin-left:0}.___SCircle_1xzml_gg_:last-child{margin-right:0}.___SCircle_1xzml_gg_._size_m_1xzml_gg_{width:16px;height:16px}.___SCircle_1xzml_gg_._size_l_1xzml_gg_{width:20px;height:20px}.___SCircle_1xzml_gg_._size_xl_1xzml_gg_{width:20px;height:20px}.___SClose_1xzml_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}"
55
+ ".___STag_1kqo1_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:24px;padding-left:4px;padding-right:4px;font-weight:500;background-color:var(--colorBg_1kqo1);color:var(--colorText_1kqo1);border-color:var(--colorBorder_1kqo1)}.___STag_1kqo1_gg_.__active_1kqo1_gg_,.___STag_1kqo1_gg_.__interactive_1kqo1_gg_:active,.___STag_1kqo1_gg_.__interactive_1kqo1_gg_:hover{background-color:var(--colorBgHover_1kqo1)}.___STag_1kqo1_gg_.__disabled_1kqo1_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_1kqo1_gg_.__interactive_1kqo1_gg_{cursor:pointer}.___STag_1kqo1_gg_._size_m_1kqo1_gg_{height:20px;min-width:20px;font-size:12px}.___STag_1kqo1_gg_._size_m_1kqo1_gg_ .___SCircle_1kqo1_gg_:first-child{margin-left:-2px}.___STag_1kqo1_gg_._size_m_1kqo1_gg_ .___SCircle_1kqo1_gg_:last-child{margin-right:-2px}.___STag_1kqo1_gg_._size_l_1kqo1_gg_{height:28px;min-width:28px;font-size:14px}.___STag_1kqo1_gg_._size_xl_1kqo1_gg_{height:40px;min-width:40px;font-size:16px}.___STag_1kqo1_gg_._theme_primary_1kqo1_gg_{background-color:var(--colorBg_1kqo1);border-color:var(--colorBg_1kqo1);color:var(--colorText_1kqo1)}.___STag_1kqo1_gg_._theme_primary_1kqo1_gg_.__active_1kqo1_gg_,.___STag_1kqo1_gg_._theme_primary_1kqo1_gg_.__interactive_1kqo1_gg_:active,.___STag_1kqo1_gg_._theme_primary_1kqo1_gg_.__interactive_1kqo1_gg_:hover{background-color:var(--colorBgHover_1kqo1)}.___STag_1kqo1_gg_._theme_primary-invert_1kqo1_gg_{background-color:hsla(0,0%,100%,.15);color:#ffffff}.___STag_1kqo1_gg_._theme_primary-invert_1kqo1_gg_.__active_1kqo1_gg_,.___STag_1kqo1_gg_._theme_primary-invert_1kqo1_gg_.__interactive_1kqo1_gg_:active,.___STag_1kqo1_gg_._theme_primary-invert_1kqo1_gg_.__interactive_1kqo1_gg_:hover{background-color:hsla(0,0%,100%,.3)}.___STag_1kqo1_gg_._theme_additional-invert_1kqo1_gg_,.___STag_1kqo1_gg_._theme_secondary-invert_1kqo1_gg_{color:#ffffff;border-color:hsla(0,0%,100%,.3)}.___STag_1kqo1_gg_._theme_additional-invert_1kqo1_gg_.__active_1kqo1_gg_,.___STag_1kqo1_gg_._theme_additional-invert_1kqo1_gg_.__interactive_1kqo1_gg_:active,.___STag_1kqo1_gg_._theme_additional-invert_1kqo1_gg_.__interactive_1kqo1_gg_:hover,.___STag_1kqo1_gg_._theme_secondary-invert_1kqo1_gg_.__active_1kqo1_gg_,.___STag_1kqo1_gg_._theme_secondary-invert_1kqo1_gg_.__interactive_1kqo1_gg_:active,.___STag_1kqo1_gg_._theme_secondary-invert_1kqo1_gg_.__interactive_1kqo1_gg_:hover{background-color:hsla(0,0%,100%,.1)}.___STag_1kqo1_gg_._theme_additional_1kqo1_gg_{border-style:dashed}.___SText_1kqo1_gg_{display:inline-block;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_1kqo1_gg_:not(:only-child):first-child{padding-right:0}.___SText_1kqo1_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_1kqo1_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_1kqo1_gg_{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding-left:4px;padding-right:4px}.___SCircle_1kqo1_gg_{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;margin:0 4px}.___SCircle_1kqo1_gg_:first-child{margin-left:0}.___SCircle_1kqo1_gg_:last-child{margin-right:0}.___SCircle_1kqo1_gg_._size_m_1kqo1_gg_{width:16px;height:16px}.___SCircle_1kqo1_gg_._size_l_1kqo1_gg_{width:20px;height:20px}.___SCircle_1kqo1_gg_._size_xl_1kqo1_gg_{width:20px;height:20px}.___SClose_1kqo1_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}"
56
56
  /*__inner_css_end__*/
57
- , "mtk9p_gg_")
57
+ , "1kqo1_gg_")
58
58
  /*__reshadow_css_end__*/
59
59
  , {
60
- "__STag": "___STag_1xzml_gg_",
61
- "--colorBg": "--colorBg_mtk9p",
62
- "--colorText": "--colorText_mtk9p",
63
- "--colorBorder": "--colorBorder_mtk9p",
64
- "_active": "__active_1xzml_gg_",
65
- "_interactive": "__interactive_1xzml_gg_",
66
- "--colorBgHover": "--colorBgHover_mtk9p",
67
- "_disabled": "__disabled_1xzml_gg_",
68
- "_size_m": "_size_m_1xzml_gg_",
69
- "__SCircle": "___SCircle_1xzml_gg_",
70
- "_size_l": "_size_l_1xzml_gg_",
71
- "_size_xl": "_size_xl_1xzml_gg_",
72
- "_theme_primary": "_theme_primary_1xzml_gg_",
73
- "_theme_primary-invert": "_theme_primary-invert_1xzml_gg_",
74
- "_theme_additional-invert": "_theme_additional-invert_1xzml_gg_",
75
- "_theme_secondary-invert": "_theme_secondary-invert_1xzml_gg_",
76
- "_theme_additional": "_theme_additional_1xzml_gg_",
77
- "__SText": "___SText_1xzml_gg_",
78
- "__SAddon": "___SAddon_1xzml_gg_",
79
- "__SClose": "___SClose_1xzml_gg_"
60
+ "__STag": "___STag_1kqo1_gg_",
61
+ "--colorBg": "--colorBg_1kqo1",
62
+ "--colorText": "--colorText_1kqo1",
63
+ "--colorBorder": "--colorBorder_1kqo1",
64
+ "_active": "__active_1kqo1_gg_",
65
+ "_interactive": "__interactive_1kqo1_gg_",
66
+ "--colorBgHover": "--colorBgHover_1kqo1",
67
+ "_disabled": "__disabled_1kqo1_gg_",
68
+ "_size_m": "_size_m_1kqo1_gg_",
69
+ "__SCircle": "___SCircle_1kqo1_gg_",
70
+ "_size_l": "_size_l_1kqo1_gg_",
71
+ "_size_xl": "_size_xl_1kqo1_gg_",
72
+ "_theme_primary": "_theme_primary_1kqo1_gg_",
73
+ "_theme_primary-invert": "_theme_primary-invert_1kqo1_gg_",
74
+ "_theme_additional-invert": "_theme_additional-invert_1kqo1_gg_",
75
+ "_theme_secondary-invert": "_theme_secondary-invert_1kqo1_gg_",
76
+ "_theme_additional": "_theme_additional_1kqo1_gg_",
77
+ "__SText": "___SText_1kqo1_gg_",
78
+ "__SAddon": "___SAddon_1kqo1_gg_",
79
+ "__SClose": "___SClose_1kqo1_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
- ".___STag_1xzml_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:24px;padding-left:4px;padding-right:4px;font-weight:500;background-color:var(--colorBg_mtk9p);color:var(--colorText_mtk9p);border-color:var(--colorBorder_mtk9p)}.___STag_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:var(--colorBgHover_mtk9p)}.___STag_1xzml_gg_.__disabled_1xzml_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_1xzml_gg_.__interactive_1xzml_gg_{cursor:pointer}.___STag_1xzml_gg_._size_m_1xzml_gg_{height:20px;min-width:20px;font-size:12px}.___STag_1xzml_gg_._size_m_1xzml_gg_ .___SCircle_1xzml_gg_:first-child{margin-left:-2px}.___STag_1xzml_gg_._size_m_1xzml_gg_ .___SCircle_1xzml_gg_:last-child{margin-right:-2px}.___STag_1xzml_gg_._size_l_1xzml_gg_{height:28px;min-width:28px;font-size:14px}.___STag_1xzml_gg_._size_xl_1xzml_gg_{height:40px;min-width:40px;font-size:16px}.___STag_1xzml_gg_._theme_primary_1xzml_gg_{background-color:var(--colorBg_mtk9p);border-color:var(--colorBg_mtk9p);color:var(--colorText_mtk9p)}.___STag_1xzml_gg_._theme_primary_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_primary_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_primary_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:var(--colorBgHover_mtk9p)}.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_{background-color:hsla(0,0%,100%,.15);color:#ffffff}.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:hsla(0,0%,100%,.3)}.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_{color:#ffffff;border-color:hsla(0,0%,100%,.3)}.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_.__interactive_1xzml_gg_:hover,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:hsla(0,0%,100%,.1)}.___STag_1xzml_gg_._theme_additional_1xzml_gg_{border-style:dashed}.___SText_1xzml_gg_{display:inline-block;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_1xzml_gg_:not(:only-child):first-child{padding-right:0}.___SText_1xzml_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_1xzml_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_1xzml_gg_{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding-left:4px;padding-right:4px}.___SCircle_1xzml_gg_{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;margin:0 4px}.___SCircle_1xzml_gg_:first-child{margin-left:0}.___SCircle_1xzml_gg_:last-child{margin-right:0}.___SCircle_1xzml_gg_._size_m_1xzml_gg_{width:16px;height:16px}.___SCircle_1xzml_gg_._size_l_1xzml_gg_{width:20px;height:20px}.___SCircle_1xzml_gg_._size_xl_1xzml_gg_{width:20px;height:20px}.___SClose_1xzml_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}"
35
+ ".___STag_1kqo1_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:24px;padding-left:4px;padding-right:4px;font-weight:500;background-color:var(--colorBg_1kqo1);color:var(--colorText_1kqo1);border-color:var(--colorBorder_1kqo1)}.___STag_1kqo1_gg_.__active_1kqo1_gg_,.___STag_1kqo1_gg_.__interactive_1kqo1_gg_:active,.___STag_1kqo1_gg_.__interactive_1kqo1_gg_:hover{background-color:var(--colorBgHover_1kqo1)}.___STag_1kqo1_gg_.__disabled_1kqo1_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_1kqo1_gg_.__interactive_1kqo1_gg_{cursor:pointer}.___STag_1kqo1_gg_._size_m_1kqo1_gg_{height:20px;min-width:20px;font-size:12px}.___STag_1kqo1_gg_._size_m_1kqo1_gg_ .___SCircle_1kqo1_gg_:first-child{margin-left:-2px}.___STag_1kqo1_gg_._size_m_1kqo1_gg_ .___SCircle_1kqo1_gg_:last-child{margin-right:-2px}.___STag_1kqo1_gg_._size_l_1kqo1_gg_{height:28px;min-width:28px;font-size:14px}.___STag_1kqo1_gg_._size_xl_1kqo1_gg_{height:40px;min-width:40px;font-size:16px}.___STag_1kqo1_gg_._theme_primary_1kqo1_gg_{background-color:var(--colorBg_1kqo1);border-color:var(--colorBg_1kqo1);color:var(--colorText_1kqo1)}.___STag_1kqo1_gg_._theme_primary_1kqo1_gg_.__active_1kqo1_gg_,.___STag_1kqo1_gg_._theme_primary_1kqo1_gg_.__interactive_1kqo1_gg_:active,.___STag_1kqo1_gg_._theme_primary_1kqo1_gg_.__interactive_1kqo1_gg_:hover{background-color:var(--colorBgHover_1kqo1)}.___STag_1kqo1_gg_._theme_primary-invert_1kqo1_gg_{background-color:hsla(0,0%,100%,.15);color:#ffffff}.___STag_1kqo1_gg_._theme_primary-invert_1kqo1_gg_.__active_1kqo1_gg_,.___STag_1kqo1_gg_._theme_primary-invert_1kqo1_gg_.__interactive_1kqo1_gg_:active,.___STag_1kqo1_gg_._theme_primary-invert_1kqo1_gg_.__interactive_1kqo1_gg_:hover{background-color:hsla(0,0%,100%,.3)}.___STag_1kqo1_gg_._theme_additional-invert_1kqo1_gg_,.___STag_1kqo1_gg_._theme_secondary-invert_1kqo1_gg_{color:#ffffff;border-color:hsla(0,0%,100%,.3)}.___STag_1kqo1_gg_._theme_additional-invert_1kqo1_gg_.__active_1kqo1_gg_,.___STag_1kqo1_gg_._theme_additional-invert_1kqo1_gg_.__interactive_1kqo1_gg_:active,.___STag_1kqo1_gg_._theme_additional-invert_1kqo1_gg_.__interactive_1kqo1_gg_:hover,.___STag_1kqo1_gg_._theme_secondary-invert_1kqo1_gg_.__active_1kqo1_gg_,.___STag_1kqo1_gg_._theme_secondary-invert_1kqo1_gg_.__interactive_1kqo1_gg_:active,.___STag_1kqo1_gg_._theme_secondary-invert_1kqo1_gg_.__interactive_1kqo1_gg_:hover{background-color:hsla(0,0%,100%,.1)}.___STag_1kqo1_gg_._theme_additional_1kqo1_gg_{border-style:dashed}.___SText_1kqo1_gg_{display:inline-block;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_1kqo1_gg_:not(:only-child):first-child{padding-right:0}.___SText_1kqo1_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_1kqo1_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_1kqo1_gg_{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding-left:4px;padding-right:4px}.___SCircle_1kqo1_gg_{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;margin:0 4px}.___SCircle_1kqo1_gg_:first-child{margin-left:0}.___SCircle_1kqo1_gg_:last-child{margin-right:0}.___SCircle_1kqo1_gg_._size_m_1kqo1_gg_{width:16px;height:16px}.___SCircle_1kqo1_gg_._size_l_1kqo1_gg_{width:20px;height:20px}.___SCircle_1kqo1_gg_._size_xl_1kqo1_gg_{width:20px;height:20px}.___SClose_1kqo1_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}"
36
36
  /*__inner_css_end__*/
37
- , "mtk9p_gg_")
37
+ , "1kqo1_gg_")
38
38
  /*__reshadow_css_end__*/
39
39
  , {
40
- "__STag": "___STag_1xzml_gg_",
41
- "--colorBg": "--colorBg_mtk9p",
42
- "--colorText": "--colorText_mtk9p",
43
- "--colorBorder": "--colorBorder_mtk9p",
44
- "_active": "__active_1xzml_gg_",
45
- "_interactive": "__interactive_1xzml_gg_",
46
- "--colorBgHover": "--colorBgHover_mtk9p",
47
- "_disabled": "__disabled_1xzml_gg_",
48
- "_size_m": "_size_m_1xzml_gg_",
49
- "__SCircle": "___SCircle_1xzml_gg_",
50
- "_size_l": "_size_l_1xzml_gg_",
51
- "_size_xl": "_size_xl_1xzml_gg_",
52
- "_theme_primary": "_theme_primary_1xzml_gg_",
53
- "_theme_primary-invert": "_theme_primary-invert_1xzml_gg_",
54
- "_theme_additional-invert": "_theme_additional-invert_1xzml_gg_",
55
- "_theme_secondary-invert": "_theme_secondary-invert_1xzml_gg_",
56
- "_theme_additional": "_theme_additional_1xzml_gg_",
57
- "__SText": "___SText_1xzml_gg_",
58
- "__SAddon": "___SAddon_1xzml_gg_",
59
- "__SClose": "___SClose_1xzml_gg_"
40
+ "__STag": "___STag_1kqo1_gg_",
41
+ "--colorBg": "--colorBg_1kqo1",
42
+ "--colorText": "--colorText_1kqo1",
43
+ "--colorBorder": "--colorBorder_1kqo1",
44
+ "_active": "__active_1kqo1_gg_",
45
+ "_interactive": "__interactive_1kqo1_gg_",
46
+ "--colorBgHover": "--colorBgHover_1kqo1",
47
+ "_disabled": "__disabled_1kqo1_gg_",
48
+ "_size_m": "_size_m_1kqo1_gg_",
49
+ "__SCircle": "___SCircle_1kqo1_gg_",
50
+ "_size_l": "_size_l_1kqo1_gg_",
51
+ "_size_xl": "_size_xl_1kqo1_gg_",
52
+ "_theme_primary": "_theme_primary_1kqo1_gg_",
53
+ "_theme_primary-invert": "_theme_primary-invert_1kqo1_gg_",
54
+ "_theme_additional-invert": "_theme_additional-invert_1kqo1_gg_",
55
+ "_theme_secondary-invert": "_theme_secondary-invert_1kqo1_gg_",
56
+ "_theme_additional": "_theme_additional_1kqo1_gg_",
57
+ "__SText": "___SText_1kqo1_gg_",
58
+ "__SAddon": "___SAddon_1kqo1_gg_",
59
+ "__SClose": "___SClose_1kqo1_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.0.7",
4
+ "version": "4.0.8",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
package/src/Tag.jsx DELETED
@@ -1,156 +0,0 @@
1
- import React from 'react';
2
- import createComponent, { Component, sstyled, Root } from '@semcore/core';
3
- import { Box } from '@semcore/flex-box';
4
- import resolveColor, { opacity, light } from '@semcore/utils/lib/color';
5
- import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
6
- import logger from '@semcore/utils/lib/logger';
7
- import CloseM from '@semcore/icon/Close/m';
8
-
9
- import style from './style/tag.shadow.css';
10
-
11
- const textColorToBgColor = {
12
- 'gray-500': 'gray-100',
13
- 'blue-500': 'blue-100',
14
- 'green-500': 'green-100',
15
- 'salad-500': 'salad-100',
16
- 'orange-500': 'orange-100',
17
- 'yellow-500': 'yellow-100',
18
- 'red-500': 'red-100',
19
- 'pink-500': 'pink-100',
20
- 'violet-500': 'violet-100',
21
- };
22
- const textColorToHoveredTextColor = {
23
- 'gray-500': 'gray-50',
24
- 'blue-500': 'blue-50',
25
- 'green-500': 'green-50',
26
- 'salad-500': 'salad-50',
27
- 'orange-500': 'orange-50',
28
- 'yellow-500': 'yellow-50',
29
- 'red-500': 'red-50',
30
- 'pink-500': 'pink-50',
31
- 'violet-500': 'violet-50',
32
- };
33
- const textColorToBorderColor = {
34
- 'gray-500': 'gray-200',
35
- 'blue-500': 'blue-200',
36
- 'green-500': 'green-200',
37
- 'salad-500': 'salad-200',
38
- 'orange-500': 'orange-200',
39
- 'yellow-500': 'yellow-200',
40
- 'red-500': 'red-200',
41
- 'pink-500': 'pink-200',
42
- 'violet-500': 'violet-200',
43
- };
44
-
45
- const getPrimaryColors = (color) => ({
46
- colorBg:
47
- opacity(resolveColor(textColorToBgColor[color]), 0.5) || light(resolveColor(color), 0.95),
48
- colorBgHover: resolveColor(textColorToBgColor[color] || light(resolveColor(color), 0.8)),
49
- colorText: resolveColor(color),
50
- });
51
-
52
- const getSecondaryColors = (color) => ({
53
- colorBg: resolveColor('white'),
54
- colorBgHover: resolveColor(
55
- textColorToHoveredTextColor[color] || light(resolveColor(color), 0.95),
56
- ),
57
- colorText: resolveColor(color),
58
- colorBorder: resolveColor(textColorToBorderColor[color] || light(resolveColor(color), 0.5)),
59
- });
60
-
61
- const legacyThemeRecommendedMigration = {
62
- primary: {
63
- muted: 'gray-500',
64
- info: 'blue-500',
65
- success: 'green-500',
66
- warning: 'orange-500',
67
- danger: 'red-500',
68
- },
69
- secondary: {
70
- muted: 'gray-50',
71
- },
72
- };
73
-
74
- class RootTag extends Component {
75
- static displayName = 'Tag';
76
- static style = style;
77
- static defaultProps = {
78
- theme: 'primary',
79
- color: 'gray-500',
80
- size: 'm',
81
- };
82
-
83
- constructor(props) {
84
- super(props);
85
-
86
- logger.warn(
87
- props.use,
88
- `Property 'use' is deprecated, replace property to "theme='${props.use}' color='${
89
- legacyThemeRecommendedMigration[props.use]?.[props.theme]
90
- }'"`,
91
- props['data-ui-name'] || Tag.displayName,
92
- );
93
- }
94
-
95
- getCircleProps() {
96
- const { size } = this.asProps;
97
- return { size };
98
- }
99
-
100
- render() {
101
- const STag = Root;
102
- const { Children, styles, theme, color, interactive, disabled, addonLeft, addonRight } =
103
- this.asProps;
104
-
105
- const colors = theme !== 'primary' ? getSecondaryColors(color) : getPrimaryColors(color);
106
-
107
- return sstyled(styles)(
108
- <STag
109
- render={Box}
110
- use:interactive={!disabled && interactive}
111
- colorBg={colors.colorBg}
112
- colorBgHover={colors.colorBgHover}
113
- colorText={colors.colorText}
114
- colorBorder={colors.colorBorder}
115
- >
116
- {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}
117
- {addonTextChildren(Children, Tag.Text, Tag.Addon)}
118
- {addonRight ? <Tag.Addon tag={addonRight} /> : null}
119
- </STag>,
120
- );
121
- }
122
- }
123
-
124
- function Text(props) {
125
- const SText = Root;
126
- const { styles } = props;
127
- return sstyled(styles)(<SText render={Box} tag="span" />);
128
- }
129
-
130
- function Close(props) {
131
- const SClose = Root;
132
- const { styles } = props;
133
-
134
- return sstyled(styles)(<SClose render={Box} tag={CloseM} interactive />);
135
- }
136
-
137
- function Addon(props) {
138
- const SAddon = Root;
139
- const { styles } = props;
140
- return sstyled(styles)(<SAddon render={Box} tag="span" />);
141
- }
142
-
143
- function Circle(props) {
144
- const SCircle = Root;
145
- const { styles } = props;
146
- return sstyled(styles)(<SCircle render={Box} tag="span" />);
147
- }
148
-
149
- const Tag = createComponent(RootTag, {
150
- Text,
151
- Addon,
152
- Close,
153
- Circle,
154
- });
155
-
156
- export default Tag;
package/src/index.d.ts DELETED
@@ -1,69 +0,0 @@
1
- import React from 'react';
2
- import { CProps, ReturnEl, PropGetterFn } from '@semcore/core';
3
- import { IBoxProps } from '@semcore/flex-box';
4
- import { IIconProps } from '@semcore/icon';
5
-
6
- export type TagSize = 'xl' | 'l' | 'm';
7
- export type TagThemeOld = 'muted' | 'info' | 'success' | 'warning' | 'danger' | 'invert';
8
- export type TagTheme = 'primary' | 'secondary' | 'additional' | (string & TagThemeOld);
9
- export type TagUse = 'primary' | 'secondary';
10
-
11
- export interface ITagProps extends IBoxProps {
12
- /** Value responsible for tag availability
13
- */
14
- disabled?: boolean;
15
- /** Value responsible for tag activity
16
- */
17
- active?: boolean;
18
- /** Interactive tag
19
- */
20
- interactive?: boolean;
21
- /** Tag type
22
- * @default secondary
23
- * @deprecated v4.0.0
24
- * @use ITagProps.theme
25
- */
26
- use?: TagUse;
27
- /** Tag theme, there are several default themes or you can use your color
28
- * @default muted
29
- */
30
- theme?: TagTheme;
31
- /** Tag color text */
32
- color?: string;
33
- /** Tag size
34
- * @default m
35
- */
36
- size?: TagSize;
37
- /** Left addon tag */
38
- addonLeft?: React.ElementType;
39
- /** Right addon tag */
40
- addonRight?: React.ElementType;
41
- }
42
-
43
- export interface ITagCloseProps extends IIconProps {
44
- /** Tag type
45
- * @default secondary
46
- */
47
- use?: TagUse;
48
- /** Tag theme, there are several default themes or you can use your color
49
- * @default muted
50
- */
51
- theme?: TagTheme;
52
- }
53
-
54
- export interface ITagContext extends ITagProps {
55
- getCloseProps?: PropGetterFn;
56
- }
57
-
58
- export interface ITagAddonProps extends IBoxProps {}
59
-
60
- export interface ITagTextProps extends IBoxProps {}
61
-
62
- declare const Tag: (<T>(props: CProps<ITagProps & T, ITagContext>) => ReturnEl) & {
63
- Text: <T>(props: ITagTextProps & T) => ReturnEl;
64
- Addon: <T>(props: ITagAddonProps & T) => ReturnEl;
65
- Close: <T>(props: ITagCloseProps & T) => ReturnEl;
66
- Circle: <T>(props: ITagAddonProps & T) => ReturnEl;
67
- };
68
-
69
- export default Tag;
package/src/index.js DELETED
@@ -1 +0,0 @@
1
- export { default } from './Tag';
@@ -1,171 +0,0 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
- STag {
4
- display: inline-flex;
5
- align-items: center;
6
- justify-content: center;
7
- vertical-align: middle;
8
- box-sizing: border-box;
9
- border-width: 1px;
10
- border-style: solid;
11
- border-color: transparent;
12
- border-radius: 24px;
13
- padding-left: 4px;
14
- padding-right: 4px;
15
- font-weight: 500;
16
- background-color: var(--colorBg);
17
- color: var(--colorText);
18
- border-color: var(--colorBorder);
19
-
20
- &[interactive]:hover,
21
- &[interactive]:active,
22
- &[active] {
23
- background-color: var(--colorBgHover);
24
- }
25
- }
26
-
27
- STag[disabled] {
28
- opacity: var(--disabled-opacity);
29
- cursor: default;
30
- pointer-events: none; /* Disable link interactions */
31
- }
32
-
33
- STag[interactive] {
34
- cursor: pointer;
35
- }
36
-
37
- STag[size='m'] {
38
- height: 20px;
39
- min-width: 20px;
40
- font-size: var(--fs-100);
41
-
42
- & SCircle:first-child {
43
- margin-left: -2px;
44
- }
45
-
46
- & SCircle:last-child {
47
- margin-right: -2px;
48
- }
49
- }
50
-
51
- STag[size='l'] {
52
- height: 28px;
53
- min-width: 28px;
54
- font-size: var(--fs-200);
55
- }
56
-
57
- STag[size='xl'] {
58
- height: 40px;
59
- min-width: 40px;
60
- font-size: var(--fs-300);
61
- }
62
-
63
- STag[theme='primary'] {
64
- background-color: var(--colorBg);
65
- border-color: var(--colorBg);
66
- color: var(--colorText);
67
-
68
- &[interactive]:hover,
69
- &[interactive]:active,
70
- &[active] {
71
- background-color: var(--colorBgHover);
72
- }
73
- }
74
-
75
- STag[theme='primary-invert'] {
76
- background-color: rgba(255, 255, 255, 0.15);
77
- color: var(--white);
78
-
79
- &[interactive]:hover,
80
- &[interactive]:active,
81
- &[active] {
82
- background-color: rgba(255, 255, 255, 0.3);
83
- }
84
- }
85
- STag[theme='secondary-invert'],
86
- STag[theme='additional-invert'] {
87
- color: var(--white);
88
- border-color: color-mod(var(--white) a(30%));
89
-
90
- &[interactive]:hover,
91
- &[interactive]:active,
92
- &[active] {
93
- background-color: rgba(255, 255, 255, 0.1);
94
- }
95
- }
96
-
97
- STag[theme='additional'] {
98
- border-style: dashed;
99
- }
100
-
101
- SText {
102
- display: inline-block;
103
- padding-left: 4px;
104
- padding-right: 4px;
105
- white-space: nowrap;
106
- overflow: hidden;
107
- text-overflow: ellipsis;
108
- }
109
-
110
- SText:not(:only-child):first-child {
111
- padding-right: 0;
112
- }
113
-
114
- SText:not(:first-child):not(:last-child) {
115
- padding-left: 0;
116
- padding-right: 0;
117
- }
118
-
119
- SText:not(:only-child):last-child {
120
- padding-left: 0;
121
- }
122
-
123
- SAddon {
124
- display: inline-flex;
125
- flex-shrink: 0;
126
- align-items: center;
127
- justify-content: center;
128
- padding-left: 4px;
129
- padding-right: 4px;
130
- }
131
-
132
- SCircle {
133
- display: inline-flex;
134
- align-items: center;
135
- justify-content: center;
136
- overflow: hidden;
137
- border-radius: 50%;
138
- margin: 0 4px;
139
-
140
- &:first-child {
141
- margin-left: 0;
142
- }
143
-
144
- &:last-child {
145
- margin-right: 0;
146
- }
147
- }
148
-
149
- SCircle[size='m'] {
150
- width: 16px;
151
- height: 16px;
152
- }
153
-
154
- SCircle[size='l'] {
155
- width: 20px;
156
- height: 20px;
157
- }
158
-
159
- SCircle[size='xl'] {
160
- width: 20px;
161
- height: 20px;
162
- }
163
-
164
- SClose {
165
- cursor: pointer;
166
- display: inline-flex;
167
- flex-shrink: 0;
168
- align-items: center;
169
- justify-content: center;
170
- padding: 4px;
171
- }