@ably/ui 11.7.0 → 11.7.1-dev.13caf30

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 (53) 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 +0 -15
  6. package/core/FeaturedLink/component.js +1 -1
  7. package/core/FeaturedLink.jsx +17 -6
  8. package/core/Footer/component.css +3 -3
  9. package/core/Footer.jsx +15 -15
  10. package/core/Meganav/component.css +6 -6
  11. package/core/Meganav.jsx +353 -757
  12. package/core/MeganavBlogPostsList/component.js +2 -1
  13. package/core/MeganavBlogPostsList/component.js.LICENSE.txt +1 -0
  14. package/core/MeganavBlogPostsList.jsx +17 -6
  15. package/core/MeganavContentCompany.jsx +312 -716
  16. package/core/MeganavContentDevelopers.jsx +1 -1
  17. package/core/MeganavContentProducts.jsx +18 -7
  18. package/core/MeganavItemsMobile.jsx +17 -6
  19. package/core/MeganavItemsSignedIn.jsx +17 -6
  20. package/core/MeganavSearch.jsx +17 -6
  21. package/core/MeganavSearchPanel.jsx +17 -6
  22. package/core/MeganavSearchSuggestions.jsx +17 -6
  23. package/core/Notice.jsx +2 -2
  24. package/core/Uptime.jsx +306 -710
  25. package/core/fonts/jetBrains-mono.css +3 -0
  26. package/core/fonts/manrope.css +3 -0
  27. package/core/scripts.js +2 -1
  28. package/core/scripts.js.LICENSE.txt +1 -0
  29. package/core/styles.css +225 -94
  30. package/package.json +3 -3
  31. package/src/core/FeaturedLink/component.html.erb +14 -5
  32. package/src/core/FeaturedLink/component.js +0 -1
  33. package/src/core/FeaturedLink/component.jsx +27 -4
  34. package/src/core/FeaturedLink/component.rb +3 -1
  35. package/src/core/Footer/component.css +3 -3
  36. package/src/core/Footer/component.html.erb +14 -14
  37. package/src/core/Footer/component.jsx +15 -15
  38. package/src/core/Meganav/component.css +6 -6
  39. package/src/core/MeganavContentDevelopers/component.html.erb +1 -1
  40. package/src/core/MeganavContentDevelopers/component.jsx +1 -1
  41. package/src/core/MeganavContentProducts/component.html.erb +1 -1
  42. package/src/core/MeganavContentProducts/component.jsx +1 -1
  43. package/src/core/Notice/component.html.erb +2 -2
  44. package/src/core/Notice/component.jsx +2 -2
  45. package/src/core/fonts/jetBrains-mono.css +3 -0
  46. package/src/core/fonts/manrope.css +3 -0
  47. package/src/core/styles/buttons.css +5 -5
  48. package/src/core/styles/forms.css +5 -5
  49. package/src/core/styles/properties.css +153 -45
  50. package/src/core/styles/text.css +62 -39
  51. package/src/core/utils/syntax-highlighter.css +2 -0
  52. package/tailwind.config.js +179 -49
  53. package/src/core/FeaturedLink/component.css +0 -15
@@ -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,33 @@ 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,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, 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
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), 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"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
@@ -230,7 +241,7 @@ var MeganavContentProducts = function MeganavContentProducts(_ref) {
230
241
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
231
242
  className: "ui-meganav-overline ml-24"
232
243
  }, "The Ably Platform")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
233
- className: "text-p2 font-medium text-cool-black mb-24",
244
+ className: "text-p2 font-bold text-cool-black mb-24 leading-normal",
234
245
  style: {
235
246
  maxWidth: "330px"
236
247
  }
@@ -30,24 +30,33 @@ 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,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, 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
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), 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"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
@@ -30,24 +30,33 @@ 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,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, 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
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), 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"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
@@ -30,24 +30,33 @@ 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,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, 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
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), 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"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
@@ -30,24 +30,33 @@ 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,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, 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
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), 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"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
@@ -30,24 +30,33 @@ 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,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, 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
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), 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"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
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", {