@ably/ui 11.7.0 → 11.7.1-dev.abfa747

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/README.md +7 -7
  2. package/core/Code/component.css +2 -0
  3. package/core/CompanyAutocomplete/component.js +2 -1
  4. package/core/CompanyAutocomplete/component.js.LICENSE.txt +1 -0
  5. package/core/FeaturedLink/component.css +2 -11
  6. package/core/FeaturedLink.jsx +12 -5
  7. package/core/Footer/component.css +3 -3
  8. package/core/Footer.jsx +15 -15
  9. package/core/Meganav/component.css +6 -6
  10. package/core/Meganav.jsx +348 -756
  11. package/core/MeganavBlogPostsList/component.js +2 -1
  12. package/core/MeganavBlogPostsList/component.js.LICENSE.txt +1 -0
  13. package/core/MeganavBlogPostsList.jsx +12 -5
  14. package/core/MeganavContentCompany.jsx +307 -715
  15. package/core/MeganavContentDevelopers.jsx +1 -1
  16. package/core/MeganavContentProducts.jsx +13 -6
  17. package/core/MeganavItemsMobile.jsx +12 -5
  18. package/core/MeganavItemsSignedIn.jsx +12 -5
  19. package/core/MeganavSearch.jsx +12 -5
  20. package/core/MeganavSearchPanel.jsx +12 -5
  21. package/core/MeganavSearchSuggestions.jsx +12 -5
  22. package/core/Notice.jsx +2 -2
  23. package/core/Uptime.jsx +301 -709
  24. package/core/fonts/jetBrains-mono.css +3 -0
  25. package/core/fonts/manrope.css +3 -0
  26. package/core/scripts.js +2 -1
  27. package/core/scripts.js.LICENSE.txt +1 -0
  28. package/core/styles.css +221 -94
  29. package/package.json +3 -3
  30. package/src/core/FeaturedLink/component.css +2 -11
  31. package/src/core/FeaturedLink/component.html.erb +14 -5
  32. package/src/core/FeaturedLink/component.jsx +10 -4
  33. package/src/core/FeaturedLink/component.rb +3 -1
  34. package/src/core/Footer/component.css +3 -3
  35. package/src/core/Footer/component.html.erb +14 -14
  36. package/src/core/Footer/component.jsx +15 -15
  37. package/src/core/Meganav/component.css +6 -6
  38. package/src/core/MeganavContentDevelopers/component.html.erb +1 -1
  39. package/src/core/MeganavContentDevelopers/component.jsx +1 -1
  40. package/src/core/MeganavContentProducts/component.html.erb +1 -1
  41. package/src/core/MeganavContentProducts/component.jsx +1 -1
  42. package/src/core/Notice/component.html.erb +2 -2
  43. package/src/core/Notice/component.jsx +2 -2
  44. package/src/core/fonts/jetBrains-mono.css +3 -0
  45. package/src/core/fonts/manrope.css +3 -0
  46. package/src/core/styles/buttons.css +5 -5
  47. package/src/core/styles/forms.css +5 -5
  48. package/src/core/styles/properties.css +153 -45
  49. package/src/core/styles/text.css +58 -39
  50. package/src/core/utils/syntax-highlighter.css +2 -0
  51. package/tailwind.config.js +179 -49
@@ -231,7 +231,7 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
231
231
  className: "md:mt-40",
232
232
  "aria-labelledby": "meganav-developers-panel-explore"
233
233
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
234
- href: absUrl("/download"),
234
+ href: absUrl("/docs/sdks"),
235
235
  className: "ui-meganav-media-with-image group"
236
236
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
237
237
  name: "icon-display-sdks-col",
@@ -30,24 +30,31 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
@@ -230,7 +237,7 @@ var MeganavContentProducts = function MeganavContentProducts(_ref) {
230
237
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
231
238
  className: "ui-meganav-overline ml-24"
232
239
  }, "The Ably Platform")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
233
- className: "text-p2 font-medium text-cool-black mb-24",
240
+ className: "text-p2 font-bold text-cool-black mb-24 leading-normal",
234
241
  style: {
235
242
  maxWidth: "330px"
236
243
  }
@@ -30,24 +30,31 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
@@ -30,24 +30,31 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
@@ -30,24 +30,31 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
@@ -30,24 +30,31 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
@@ -30,24 +30,31 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
package/core/Notice.jsx CHANGED
@@ -822,7 +822,7 @@ var Icon_component = __webpack_require__(9008);
822
822
  ;// CONCATENATED MODULE: ./src/core/Notice/component.jsx
823
823
 
824
824
 
825
- var contentWrapperClasses = "font-light w-full pr-8 text-p3 self-center";
825
+ var contentWrapperClasses = "font-medium w-full pr-8 text-p3 self-center";
826
826
 
827
827
 
828
828
 
@@ -876,7 +876,7 @@ var component_Notice = function Notice(_ref2) {
876
876
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(ContentWrapper, {
877
877
  buttonLink: buttonLink
878
878
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("strong", {
879
- className: "font-medium whitespace-nowrap pr-4"
879
+ className: "font-bold whitespace-nowrap pr-4"
880
880
  }, title), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("span", {
881
881
  className: "pr-4"
882
882
  }, bodyText), buttonLabel && /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("span", {