@pareto-engineering/design-system 4.0.0-alpha.4 → 4.0.0-alpha.9

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 (235) hide show
  1. package/dist/cjs/a/AnimatedBlobs/AnimatedBlobs.js +90 -0
  2. package/dist/cjs/a/AnimatedBlobs/index.js +13 -0
  3. package/dist/cjs/a/AnimatedBlobs/styles.scss +87 -0
  4. package/dist/cjs/a/AnimatedGradient/AnimatedGradient.js +56 -0
  5. package/dist/cjs/a/AnimatedGradient/index.js +13 -0
  6. package/dist/cjs/a/AnimatedGradient/styles.scss +14 -0
  7. package/dist/cjs/a/AnimatedGradient/webGIRenderer.js +528 -0
  8. package/dist/cjs/a/ContentTree/ContentTree.js +2 -2
  9. package/dist/cjs/a/Conversation/Conversation.js +1 -1
  10. package/dist/cjs/a/DotInfo/DotInfo.js +1 -1
  11. package/dist/cjs/a/Figure/Figure.js +1 -1
  12. package/dist/cjs/a/HamburgerButton/HamburgerButton.js +1 -1
  13. package/dist/cjs/a/IconList/IconList.js +1 -1
  14. package/dist/cjs/a/Label/Label.js +13 -5
  15. package/dist/cjs/a/Label/styles.scss +1 -1
  16. package/dist/cjs/a/LoadingCircle/LoadingCircle.js +1 -1
  17. package/dist/cjs/a/MetaCard/MetaCard.js +60 -0
  18. package/dist/cjs/a/MetaCard/index.js +13 -0
  19. package/dist/cjs/a/MetaCard/styles.scss +28 -0
  20. package/dist/cjs/a/People/People.js +1 -1
  21. package/dist/cjs/a/Popover/Popover.js +2 -2
  22. package/dist/cjs/a/ProgressBar/ProgressBar.js +1 -1
  23. package/dist/cjs/a/Quote/Quote.js +1 -1
  24. package/dist/cjs/a/SVG/SVG.js +1 -1
  25. package/dist/cjs/a/SnapScroller/SnapScroller.js +1 -1
  26. package/dist/cjs/a/SnapScroller/styles.scss +18 -10
  27. package/dist/cjs/a/Spinner/Spinner.js +1 -1
  28. package/dist/cjs/a/TextSteps/TextSteps.js +70 -0
  29. package/dist/cjs/a/TextSteps/index.js +13 -0
  30. package/dist/cjs/a/TextSteps/styles.scss +29 -0
  31. package/dist/cjs/a/Timestamp/Timestamp.js +1 -1
  32. package/dist/cjs/a/Tip/Tip.js +72 -0
  33. package/dist/cjs/a/Tip/index.js +13 -0
  34. package/dist/cjs/a/Tip/styles.scss +22 -0
  35. package/dist/cjs/a/index.js +36 -1
  36. package/dist/cjs/b/Button/Button.js +2 -1
  37. package/dist/cjs/b/Button/styles.scss +2 -0
  38. package/dist/cjs/b/Card/Card.js +74 -0
  39. package/dist/cjs/b/Card/common/Group/Group.js +73 -0
  40. package/dist/cjs/b/Card/common/Group/index.js +13 -0
  41. package/dist/cjs/b/Card/common/Group/styles.scss +42 -0
  42. package/dist/cjs/b/Card/common/Section/Section.js +59 -0
  43. package/dist/cjs/b/Card/common/Section/index.js +13 -0
  44. package/dist/cjs/b/Card/common/index.js +19 -0
  45. package/dist/cjs/b/Card/index.js +13 -0
  46. package/dist/cjs/b/Card/styles.scss +46 -0
  47. package/dist/cjs/b/Logo/Logo.js +1 -1
  48. package/dist/cjs/b/Page/Page.js +10 -3
  49. package/dist/cjs/b/Page/common/Section/Section.js +6 -1
  50. package/dist/cjs/b/Page/styles.scss +22 -4
  51. package/dist/cjs/b/SocialMediaButton/SocialMediaButton.js +1 -1
  52. package/dist/cjs/b/SocialMediaButton/styles.scss +1 -1
  53. package/dist/cjs/b/ThemeSelector/ThemeSelector.js +1 -1
  54. package/dist/cjs/b/Title/Title.js +4 -1
  55. package/dist/cjs/b/index.js +8 -1
  56. package/dist/cjs/c/ContentSlides/ContentSlides.js +2 -2
  57. package/dist/cjs/c/Modal/Modal.js +1 -1
  58. package/dist/cjs/c/Modal/styles.scss +2 -1
  59. package/dist/cjs/c/Shortener/Shortener.js +1 -1
  60. package/dist/cjs/c/SocialMediaShareButton/SocialMediaShareButton.js +1 -1
  61. package/dist/cjs/f/FormInput/FormInput.js +1 -1
  62. package/dist/cjs/f/common/Debugger/Debugger.js +1 -1
  63. package/dist/cjs/f/common/Description/Description.js +1 -1
  64. package/dist/cjs/f/common/Label/Label.js +1 -1
  65. package/dist/cjs/f/fields/Checkbox/Checkbox.js +1 -1
  66. package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js +16 -8
  67. package/dist/cjs/f/fields/ChoicesInput/styles.scss +21 -33
  68. package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js +1 -1
  69. package/dist/cjs/f/fields/QueryCombobox/styles.scss +5 -4
  70. package/dist/cjs/f/fields/RatingsInput/RatingsInput.js +1 -1
  71. package/dist/cjs/f/fields/SelectInput/SelectInput.js +3 -3
  72. package/dist/cjs/f/fields/SelectInput/styles.scss +31 -21
  73. package/dist/cjs/f/fields/TextInput/TextInput.js +5 -3
  74. package/dist/cjs/f/fields/TextInput/styles.scss +26 -17
  75. package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +1 -1
  76. package/dist/es/a/AnimatedBlobs/AnimatedBlobs.js +82 -0
  77. package/dist/es/a/AnimatedBlobs/index.js +1 -0
  78. package/dist/es/a/AnimatedBlobs/styles.scss +87 -0
  79. package/dist/es/a/AnimatedGradient/AnimatedGradient.js +48 -0
  80. package/dist/es/a/AnimatedGradient/index.js +1 -0
  81. package/dist/es/a/AnimatedGradient/styles.scss +14 -0
  82. package/dist/es/a/AnimatedGradient/webGIRenderer.js +492 -0
  83. package/dist/es/a/ContentTree/ContentTree.js +3 -3
  84. package/dist/es/a/Conversation/Conversation.js +2 -2
  85. package/dist/es/a/DotInfo/DotInfo.js +2 -2
  86. package/dist/es/a/Figure/Figure.js +2 -2
  87. package/dist/es/a/HamburgerButton/HamburgerButton.js +2 -2
  88. package/dist/es/a/IconList/IconList.js +2 -2
  89. package/dist/es/a/Label/Label.js +14 -6
  90. package/dist/es/a/Label/styles.scss +1 -1
  91. package/dist/es/a/LoadingCircle/LoadingCircle.js +2 -2
  92. package/dist/es/a/MetaCard/MetaCard.js +52 -0
  93. package/dist/es/a/MetaCard/index.js +1 -0
  94. package/dist/es/a/MetaCard/styles.scss +28 -0
  95. package/dist/es/a/People/People.js +2 -2
  96. package/dist/es/a/Popover/Popover.js +3 -3
  97. package/dist/es/a/ProgressBar/ProgressBar.js +2 -2
  98. package/dist/es/a/Quote/Quote.js +2 -2
  99. package/dist/es/a/SVG/SVG.js +2 -2
  100. package/dist/es/a/SnapScroller/SnapScroller.js +2 -2
  101. package/dist/es/a/SnapScroller/styles.scss +18 -10
  102. package/dist/es/a/Spinner/Spinner.js +2 -2
  103. package/dist/es/a/TextSteps/TextSteps.js +61 -0
  104. package/dist/es/a/TextSteps/index.js +1 -0
  105. package/dist/es/a/TextSteps/styles.scss +29 -0
  106. package/dist/es/a/Timestamp/Timestamp.js +2 -2
  107. package/dist/es/a/Tip/Tip.js +64 -0
  108. package/dist/es/a/Tip/index.js +2 -0
  109. package/dist/es/a/Tip/styles.scss +22 -0
  110. package/dist/es/a/index.js +6 -1
  111. package/dist/es/b/Button/Button.js +2 -1
  112. package/dist/es/b/Button/styles.scss +2 -0
  113. package/dist/es/b/Card/Card.js +66 -0
  114. package/dist/es/b/Card/common/Group/Group.js +65 -0
  115. package/dist/es/b/Card/common/Group/index.js +1 -0
  116. package/dist/es/b/Card/common/Group/styles.scss +42 -0
  117. package/dist/es/b/Card/common/Section/Section.js +48 -0
  118. package/dist/es/b/Card/common/Section/index.js +1 -0
  119. package/dist/es/b/Card/common/index.js +2 -0
  120. package/dist/es/b/Card/index.js +1 -0
  121. package/dist/es/b/Card/styles.scss +46 -0
  122. package/dist/es/b/Logo/Logo.js +2 -2
  123. package/dist/es/b/Page/Page.js +11 -4
  124. package/dist/es/b/Page/common/Section/Section.js +6 -1
  125. package/dist/es/b/Page/styles.scss +22 -4
  126. package/dist/es/b/SocialMediaButton/SocialMediaButton.js +2 -2
  127. package/dist/es/b/SocialMediaButton/styles.scss +1 -1
  128. package/dist/es/b/ThemeSelector/ThemeSelector.js +2 -2
  129. package/dist/es/b/Title/Title.js +18 -12
  130. package/dist/es/b/index.js +2 -1
  131. package/dist/es/c/ContentSlides/ContentSlides.js +3 -3
  132. package/dist/es/c/Modal/Modal.js +2 -2
  133. package/dist/es/c/Modal/styles.scss +2 -1
  134. package/dist/es/c/Shortener/Shortener.js +2 -2
  135. package/dist/es/c/SocialMediaShareButton/SocialMediaShareButton.js +2 -2
  136. package/dist/es/f/FormInput/FormInput.js +2 -2
  137. package/dist/es/f/common/Debugger/Debugger.js +2 -2
  138. package/dist/es/f/common/Description/Description.js +2 -2
  139. package/dist/es/f/common/Label/Label.js +2 -2
  140. package/dist/es/f/fields/Checkbox/Checkbox.js +2 -2
  141. package/dist/es/f/fields/ChoicesInput/ChoicesInput.js +18 -10
  142. package/dist/es/f/fields/ChoicesInput/styles.scss +21 -33
  143. package/dist/es/f/fields/QueryCombobox/QueryCombobox.js +2 -2
  144. package/dist/es/f/fields/QueryCombobox/styles.scss +5 -4
  145. package/dist/es/f/fields/RatingsInput/RatingsInput.js +2 -2
  146. package/dist/es/f/fields/SelectInput/SelectInput.js +4 -4
  147. package/dist/es/f/fields/SelectInput/styles.scss +31 -21
  148. package/dist/es/f/fields/TextInput/TextInput.js +6 -4
  149. package/dist/es/f/fields/TextInput/styles.scss +26 -17
  150. package/dist/es/f/fields/TextareaInput/TextareaInput.js +2 -2
  151. package/package.json +16 -16
  152. package/src/stories/a/MetaCard.stories.jsx +35 -0
  153. package/src/stories/a/TextSteps.stories.jsx +19 -0
  154. package/src/stories/a/Tip.stories.jsx +28 -0
  155. package/src/stories/b/Card/Card.stories.jsx +59 -0
  156. package/src/stories/b/Card/Group.stories.jsx +59 -0
  157. package/src/stories/b/Page.stories.jsx +19 -3
  158. package/src/stories/f/SelectInput.stories.jsx +7 -0
  159. package/src/stories/f/TextInput.stories.jsx +4 -4
  160. package/src/ui/a/AnimatedBlobs/AnimatedBlobs.jsx +102 -0
  161. package/src/ui/a/AnimatedBlobs/index.js +1 -0
  162. package/src/ui/a/AnimatedBlobs/styles.scss +87 -0
  163. package/src/ui/a/AnimatedGradient/AnimatedGradient.jsx +69 -0
  164. package/src/ui/a/AnimatedGradient/index.js +1 -0
  165. package/src/ui/a/AnimatedGradient/styles.scss +14 -0
  166. package/src/ui/a/AnimatedGradient/webGIRenderer.js +541 -0
  167. package/src/ui/a/ContentTree/ContentTree.jsx +3 -3
  168. package/src/ui/a/Conversation/Conversation.jsx +2 -2
  169. package/src/ui/a/DotInfo/DotInfo.jsx +2 -2
  170. package/src/ui/a/Figure/Figure.jsx +2 -2
  171. package/src/ui/a/HamburgerButton/HamburgerButton.jsx +2 -2
  172. package/src/ui/a/IconList/IconList.jsx +2 -2
  173. package/src/ui/a/Label/Label.jsx +13 -4
  174. package/src/ui/a/Label/styles.scss +1 -1
  175. package/src/ui/a/LoadingCircle/LoadingCircle.jsx +2 -2
  176. package/src/ui/a/MetaCard/MetaCard.jsx +74 -0
  177. package/src/ui/a/MetaCard/index.js +1 -0
  178. package/src/ui/a/MetaCard/styles.scss +28 -0
  179. package/src/ui/a/People/People.jsx +2 -2
  180. package/src/ui/a/Popover/Popover.jsx +3 -3
  181. package/src/ui/a/ProgressBar/ProgressBar.jsx +2 -2
  182. package/src/ui/a/Quote/Quote.jsx +2 -2
  183. package/src/ui/a/SVG/SVG.jsx +2 -2
  184. package/src/ui/a/SnapScroller/SnapScroller.jsx +2 -2
  185. package/src/ui/a/SnapScroller/styles.scss +18 -10
  186. package/src/ui/a/Spinner/Spinner.jsx +2 -2
  187. package/src/ui/a/TextSteps/TextSteps.jsx +87 -0
  188. package/src/ui/a/TextSteps/index.js +1 -0
  189. package/src/ui/a/TextSteps/styles.scss +29 -0
  190. package/src/ui/a/Timestamp/Timestamp.jsx +2 -2
  191. package/src/ui/a/Tip/Tip.jsx +88 -0
  192. package/src/ui/a/Tip/index.js +2 -0
  193. package/src/ui/a/Tip/styles.scss +22 -0
  194. package/src/ui/a/index.js +5 -0
  195. package/src/ui/b/Button/Button.jsx +2 -1
  196. package/src/ui/b/Button/styles.scss +2 -0
  197. package/src/ui/b/Card/Card.jsx +94 -0
  198. package/src/ui/b/Card/common/Group/Group.jsx +91 -0
  199. package/src/ui/b/Card/common/Group/index.js +1 -0
  200. package/src/ui/b/Card/common/Group/styles.scss +42 -0
  201. package/src/ui/b/Card/common/Section/Section.jsx +70 -0
  202. package/src/ui/b/Card/common/Section/index.js +1 -0
  203. package/src/ui/b/Card/common/index.js +2 -0
  204. package/src/ui/b/Card/index.js +1 -0
  205. package/src/ui/b/Card/styles.scss +46 -0
  206. package/src/ui/b/Logo/Logo.jsx +2 -2
  207. package/src/ui/b/Page/Page.jsx +9 -3
  208. package/src/ui/b/Page/common/Section/Section.jsx +8 -0
  209. package/src/ui/b/Page/styles.scss +22 -4
  210. package/src/ui/b/SocialMediaButton/SocialMediaButton.jsx +2 -2
  211. package/src/ui/b/SocialMediaButton/styles.scss +1 -1
  212. package/src/ui/b/ThemeSelector/ThemeSelector.jsx +2 -2
  213. package/src/ui/b/Title/Title.jsx +30 -23
  214. package/src/ui/b/index.js +1 -0
  215. package/src/ui/c/ContentSlides/ContentSlides.jsx +3 -3
  216. package/src/ui/c/Modal/Modal.jsx +2 -2
  217. package/src/ui/c/Modal/styles.scss +2 -1
  218. package/src/ui/c/Shortener/Shortener.jsx +2 -2
  219. package/src/ui/c/SocialMediaShareButton/SocialMediaShareButton.jsx +2 -2
  220. package/src/ui/f/FormInput/FormInput.jsx +2 -2
  221. package/src/ui/f/common/Debugger/Debugger.jsx +2 -2
  222. package/src/ui/f/common/Description/Description.jsx +2 -2
  223. package/src/ui/f/common/Label/Label.jsx +2 -2
  224. package/src/ui/f/fields/Checkbox/Checkbox.jsx +2 -2
  225. package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx +12 -7
  226. package/src/ui/f/fields/ChoicesInput/styles.scss +21 -33
  227. package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx +2 -2
  228. package/src/ui/f/fields/QueryCombobox/styles.scss +5 -4
  229. package/src/ui/f/fields/RatingsInput/RatingsInput.jsx +2 -2
  230. package/src/ui/f/fields/SelectInput/SelectInput.jsx +4 -4
  231. package/src/ui/f/fields/SelectInput/styles.scss +31 -21
  232. package/src/ui/f/fields/TextInput/TextInput.jsx +13 -11
  233. package/src/ui/f/fields/TextInput/styles.scss +26 -17
  234. package/src/ui/f/fields/TextareaInput/TextareaInput.jsx +2 -2
  235. package/tests/__snapshots__/Storyshots.test.js.snap +1049 -485
@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
11
12
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
12
13
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
13
14
  // Local Definitions
@@ -26,16 +27,18 @@ const Label = _ref => {
26
27
  children,
27
28
  color,
28
29
  isCompact,
29
- isGhost
30
+ isGhost,
31
+ as: Wrapper,
32
+ ...props
30
33
  } = _ref;
31
- (0, React.useLayoutEffect)(() => {
34
+ (0, React.useInsertionEffect)(() => {
32
35
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
33
36
  }, []);
34
- return /*#__PURE__*/React.createElement("div", {
37
+ return /*#__PURE__*/React.createElement(Wrapper, _extends({
35
38
  id: id,
36
39
  className: [baseClassName, componentClassName, userClassName, `x-${color}`, isCompact && _exports.default.modifierCompact, isGhost && _exports.default.modifierGhost].filter(e => e).join(' '),
37
40
  style: style
38
- }, children);
41
+ }, props), children);
39
42
  };
40
43
  Label.propTypes = {
41
44
  /**
@@ -58,6 +61,10 @@ Label.propTypes = {
58
61
  * Whether the button is compact
59
62
  */
60
63
  isCompact: _propTypes.default.bool,
64
+ /**
65
+ * The html element to use to display this component.
66
+ */
67
+ as: _propTypes.default.string,
61
68
  /**
62
69
  * The default font color to display for the label
63
70
  */
@@ -68,7 +75,8 @@ Label.propTypes = {
68
75
  children: _propTypes.default.node
69
76
  };
70
77
  Label.defaultProps = {
71
- color: 'main1'
78
+ color: 'main1',
79
+ as: 'span'
72
80
  };
73
81
  var _default = Label;
74
82
  exports.default = _default;
@@ -6,7 +6,7 @@ $default-padding-bottom: .4em;
6
6
  $default-padding-side: .7em;
7
7
  $default-padding-top: .5em;
8
8
 
9
- $compact-padding: $default-padding-top*.8 $default-padding-side*.8 $default-padding-bottom*.8;
9
+ $compact-padding: $default-padding-top*.5 $default-padding-side*.5 $default-padding-bottom*.5;
10
10
  $default-padding: $default-padding-top $default-padding-side $default-padding-bottom;
11
11
 
12
12
  $default-color: primary;
@@ -29,7 +29,7 @@ const LoadingCircle = _ref => {
29
29
  style
30
30
  // ...otherProps
31
31
  } = _ref;
32
- (0, React.useLayoutEffect)(() => {
32
+ (0, React.useInsertionEffect)(() => {
33
33
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
34
34
  }, []);
35
35
  return /*#__PURE__*/React.createElement("div", {
@@ -0,0 +1,60 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var React = _interopRequireWildcard(require("react"));
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
12
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
13
+ // Local Definitions
14
+
15
+ const baseClassName = _exports.default.base;
16
+ const componentClassName = 'meta-card';
17
+
18
+ /**
19
+ * This is the component description.
20
+ */
21
+ const MetaCard = _ref => {
22
+ let {
23
+ id,
24
+ className: userClassName,
25
+ style,
26
+ children,
27
+ hasBackgroundBlur
28
+ } = _ref;
29
+ (0, React.useInsertionEffect)(() => {
30
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
31
+ }, []);
32
+ return /*#__PURE__*/React.createElement("div", {
33
+ id: id,
34
+ className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && _exports.default.modifierBlur].filter(e => e).join(' '),
35
+ style: style
36
+ }, children);
37
+ };
38
+ MetaCard.propTypes = {
39
+ /**
40
+ * The HTML id for this element
41
+ */
42
+ id: _propTypes.default.string,
43
+ /**
44
+ * The HTML class names for this element
45
+ */
46
+ className: _propTypes.default.string,
47
+ /**
48
+ * The React-written, css properties for this element.
49
+ */
50
+ style: _propTypes.default.objectOf(_propTypes.default.string),
51
+ /**
52
+ * Whether the card has a background blur
53
+ * */
54
+ hasBackgroundBlur: _propTypes.default.bool
55
+ };
56
+ MetaCard.defaultProps = {
57
+ // someProp:false
58
+ };
59
+ var _default = MetaCard;
60
+ exports.default = _default;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "MetaCard", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _MetaCard.default;
10
+ }
11
+ });
12
+ var _MetaCard = _interopRequireDefault(require("./MetaCard"));
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,28 @@
1
+ /* @pareto-engineering/generator-front 1.0.12 */
2
+
3
+ @use "@pareto-engineering/bem";
4
+ @use "@pareto-engineering/styles/src/mixins";
5
+ @use "@pareto-engineering/styles/src/globals" as *;
6
+
7
+ $default-border-radius: 2.25rem;
8
+ $default-border-color: var(--hard-background-cards);
9
+ $default-background: var(--background-cards-50);
10
+
11
+ $default-blur: var(--theme-default-blur);
12
+
13
+ .#{bem.$base}.meta-card {
14
+ background: $default-background;
15
+ border: 1px solid $default-border-color;
16
+ border-radius: $default-border-radius;
17
+
18
+ &.#{bem.$modifier-blur} {
19
+ backdrop-filter: $default-blur;
20
+ }
21
+
22
+ @include mixins.media($to: $sm-md) {
23
+ // Temporary solution
24
+ margin-left: calc((var(--gap)) * -1);
25
+ margin-right: calc((var(--gap)) * -1);
26
+ padding: var(--gap);
27
+ }
28
+ }
@@ -27,7 +27,7 @@ const People = _ref => {
27
27
  columnWidth
28
28
  // ...otherProps
29
29
  } = _ref;
30
- (0, React.useLayoutEffect)(() => {
30
+ (0, React.useInsertionEffect)(() => {
31
31
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
32
32
  }, []);
33
33
  return /*#__PURE__*/React.createElement("div", {
@@ -32,7 +32,7 @@ const Popover = _ref => {
32
32
  offsetYPx
33
33
  // ...otherProps
34
34
  } = _ref;
35
- (0, React.useLayoutEffect)(() => {
35
+ (0, React.useInsertionEffect)(() => {
36
36
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
37
37
  }, []);
38
38
  const popoverRef = (0, React.useRef)(null);
@@ -100,7 +100,7 @@ Popover.propTypes = {
100
100
  * The reference to the parent element
101
101
  */
102
102
  parentRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
103
- current: _propTypes.default.instanceOf(Element)
103
+ current: _propTypes.default.node
104
104
  })])
105
105
  };
106
106
  Popover.defaultProps = {
@@ -29,7 +29,7 @@ const ProgressBar = _ref => {
29
29
  height
30
30
  // ...otherProps
31
31
  } = _ref;
32
- (0, React.useLayoutEffect)(() => {
32
+ (0, React.useInsertionEffect)(() => {
33
33
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
34
34
  }, []);
35
35
  return /*#__PURE__*/React.createElement("div", {
@@ -29,7 +29,7 @@ const Quote = _ref => {
29
29
  color
30
30
  // ...otherProps
31
31
  } = _ref;
32
- (0, React.useLayoutEffect)(() => {
32
+ (0, React.useInsertionEffect)(() => {
33
33
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
34
34
  }, []);
35
35
  return /*#__PURE__*/React.createElement("figure", {
@@ -34,7 +34,7 @@ const SVG = _ref => {
34
34
  animated,
35
35
  ...otherProps
36
36
  } = _ref;
37
- (0, React.useLayoutEffect)(() => {
37
+ (0, React.useInsertionEffect)(() => {
38
38
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
39
39
  });
40
40
  const useSVGProps = (0, React.useMemo)(() => ({
@@ -27,7 +27,7 @@ const SnapScroller = _ref => {
27
27
  noScrollOnDesktop
28
28
  // ...otherProps
29
29
  } = _ref;
30
- (0, React.useLayoutEffect)(() => {
30
+ (0, React.useInsertionEffect)(() => {
31
31
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
32
32
  }, []);
33
33
  return /*#__PURE__*/React.createElement("div", {
@@ -5,20 +5,23 @@
5
5
  @use "@pareto-engineering/styles/src/mixins";
6
6
  @use "@pareto-engineering/styles/src/globals" as *;
7
7
 
8
- $default-spacing:var(--spacing, var(--u));
8
+ $default-spacing: var(--gap, 1em);
9
9
 
10
10
  .#{bem.$base}.snap-scroller {
11
11
  display: flex;
12
- -ms-overflow-style: none; /* for Internet Explorer, Edge */
12
+ gap: $default-spacing;
13
+ -ms-overflow-style: none;
13
14
  overflow-x: auto;
14
- scroll-padding: calc(#{$default-spacing} * 2);
15
+ scroll-padding: calc($default-spacing * 2);
15
16
  scroll-snap-type: x mandatory;
16
17
  scrollbar-width: none;
17
18
 
19
+ &::-webkit-scrollbar {
20
+ display: none;
21
+ }
18
22
 
19
- > * {
23
+ >* {
20
24
  display: inline-block;
21
- margin-right: $default-spacing;
22
25
  scroll-snap-align: start;
23
26
 
24
27
  &:first-child {
@@ -26,15 +29,20 @@ $default-spacing:var(--spacing, var(--u));
26
29
  }
27
30
  }
28
31
 
29
-
30
- @include mixins.media($from:$sm-md) {
32
+ @include mixins.media($from: $sm-md) {
31
33
  &.desktop-no-scroll {
32
34
  overflow: auto;
33
- -ms-overflow-style: unset; /* for Internet Explorer, Edge */
35
+ -ms-overflow-style: unset;
34
36
  scroll-snap-type: none;
35
37
  scrollbar-width: unset;
38
+
39
+ >* {
40
+ min-width: unset;
41
+
42
+ &:first-child {
43
+ margin-left: unset;
44
+ }
45
+ }
36
46
  }
37
47
  }
38
48
  }
39
-
40
-
@@ -26,7 +26,7 @@ const Spinner = _ref => {
26
26
  color
27
27
  // ...otherProps
28
28
  } = _ref;
29
- (0, React.useLayoutEffect)(() => {
29
+ (0, React.useInsertionEffect)(() => {
30
30
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
31
31
  }, []);
32
32
  return /*#__PURE__*/React.createElement("div", {
@@ -0,0 +1,70 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var React = _interopRequireWildcard(require("react"));
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
12
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
13
+ // Local Definitions
14
+
15
+ const baseClassName = _exports.default.base;
16
+ const componentClassName = 'steps';
17
+
18
+ /**
19
+ * This is the component description.
20
+ */
21
+ const Steps = _ref => {
22
+ let {
23
+ id,
24
+ className: userClassName,
25
+ style,
26
+ items,
27
+ title
28
+ } = _ref;
29
+ (0, React.useLayoutEffect)(() => {
30
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
31
+ }, []);
32
+ return /*#__PURE__*/React.createElement("div", {
33
+ id: id,
34
+ className: [baseClassName, componentClassName, userClassName, 'grid'].filter(e => e).join(' '),
35
+ style: style
36
+ }, title && /*#__PURE__*/React.createElement("p", {
37
+ className: "title h4"
38
+ }, title), items.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
39
+ className: " number h3 start-1 span-2 md-start-1 md-span-2"
40
+ }, /*#__PURE__*/React.createElement("p", null, i + 1)), /*#__PURE__*/React.createElement("div", {
41
+ className: " description"
42
+ }, /*#__PURE__*/React.createElement("p", null, item)))));
43
+ };
44
+ Steps.propTypes = {
45
+ /**
46
+ * The HTML id for this element
47
+ */
48
+ id: _propTypes.default.string,
49
+ /**
50
+ * The HTML class names for this element
51
+ */
52
+ className: _propTypes.default.string,
53
+ /**
54
+ * The React-written, css properties for this element.
55
+ */
56
+ style: _propTypes.default.objectOf(_propTypes.default.string),
57
+ /**
58
+ * The steps to iterate
59
+ */
60
+ items: _propTypes.default.arrayOf(_propTypes.default.shape({
61
+ title: _propTypes.default.string,
62
+ description: _propTypes.default.node
63
+ })).isRequired,
64
+ /**
65
+ * The title to pass to the component
66
+ */
67
+ title: _propTypes.default.string
68
+ };
69
+ var _default = Steps;
70
+ exports.default = _default;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "TextSteps", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _TextSteps.default;
10
+ }
11
+ });
12
+ var _TextSteps = _interopRequireDefault(require("./TextSteps"));
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,29 @@
1
+ /* @pareto-engineering/generator-front 1.0.12 */
2
+
3
+ @use "@pareto-engineering/bem";
4
+ @use "@pareto-engineering/styles/src/mixins";
5
+ @use "@pareto-engineering/styles/src/globals" as *;
6
+
7
+ $default-padding: 1em;
8
+
9
+ .#{bem.$base}.steps {
10
+ grid-column: 1 / -1;
11
+ grid-template-columns: repeat(var(--columns), 1fr);
12
+ padding: $default-padding 0;
13
+
14
+ .description {
15
+ grid-column: 2 / -1;
16
+
17
+ > p {
18
+ color: var(--metadata);
19
+ }
20
+ }
21
+
22
+ .number {
23
+ grid-column: 1 / span 1;
24
+ }
25
+
26
+ .title {
27
+ grid-column: 1 / -1;
28
+ }
29
+ }
@@ -34,7 +34,7 @@ const Timestamp = _ref => {
34
34
  // ...otherProps
35
35
  as: Element
36
36
  } = _ref;
37
- (0, React.useLayoutEffect)(() => {
37
+ (0, React.useInsertionEffect)(() => {
38
38
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
39
39
  }, []);
40
40
  const [currentDisplay, setCurrentDisplay] = (0, React.useState)(enabledFormats[0]);
@@ -0,0 +1,72 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var React = _interopRequireWildcard(require("react"));
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
12
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
13
+ // Local Definitions
14
+
15
+ const baseClassName = _exports.default.base;
16
+ const componentClassName = 'tip';
17
+
18
+ /**
19
+ * This is the component description.
20
+ */
21
+ const Tip = _ref => {
22
+ let {
23
+ id,
24
+ className: userClassName,
25
+ style,
26
+ children,
27
+ as: Wrapper,
28
+ color
29
+ // ...otherProps
30
+ } = _ref;
31
+ (0, React.useInsertionEffect)(() => {
32
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
33
+ }, []);
34
+ return /*#__PURE__*/React.createElement(Wrapper, {
35
+ id: id,
36
+ className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
37
+ style: style
38
+ // {...otherProps}
39
+ }, children);
40
+ };
41
+ Tip.propTypes = {
42
+ /**
43
+ * The HTML id for this element
44
+ */
45
+ id: _propTypes.default.string,
46
+ /**
47
+ * The HTML class names for this element
48
+ */
49
+ className: _propTypes.default.string,
50
+ /**
51
+ * The React-written, css properties for this element.
52
+ */
53
+ style: _propTypes.default.objectOf(_propTypes.default.string),
54
+ /**
55
+ * The children jsx
56
+ */
57
+ children: _propTypes.default.node.isRequired,
58
+ /**
59
+ * The color of the bar
60
+ */
61
+ color: _propTypes.default.string,
62
+ /**
63
+ * The wrapper html type
64
+ */
65
+ as: _propTypes.default.string
66
+ };
67
+ Tip.defaultProps = {
68
+ as: 'p',
69
+ color: 'main'
70
+ };
71
+ var _default = Tip;
72
+ exports.default = _default;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "Tip", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _Tip.default;
10
+ }
11
+ });
12
+ var _Tip = _interopRequireDefault(require("./Tip"));
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,22 @@
1
+ /* @pareto-engineering/generator-front 1.0.12 */
2
+
3
+ @use "@pareto-engineering/bem";
4
+ @use "@pareto-engineering/styles/src/mixins";
5
+ @use "@pareto-engineering/styles/src/globals" as *;
6
+
7
+ $default-bar-width: 2px;
8
+ $default-padding: 1em;
9
+
10
+ .#{bem.$base}.tip {
11
+ padding-left: $default-padding;
12
+ position: relative;
13
+
14
+ &::before {
15
+ background: var(--x);
16
+ content: "";
17
+ height: 100%;
18
+ left: 0;
19
+ position: absolute;
20
+ width: $default-bar-width;
21
+ }
22
+ }
@@ -3,6 +3,18 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ Object.defineProperty(exports, "AnimatedBlobs", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _AnimatedBlobs.AnimatedBlobs;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "AnimatedGradient", {
13
+ enumerable: true,
14
+ get: function () {
15
+ return _AnimatedGradient.AnimatedGradient;
16
+ }
17
+ });
6
18
  Object.defineProperty(exports, "AppContext", {
7
19
  enumerable: true,
8
20
  get: function () {
@@ -63,6 +75,12 @@ Object.defineProperty(exports, "LoadingCircle", {
63
75
  return _LoadingCircle.LoadingCircle;
64
76
  }
65
77
  });
78
+ Object.defineProperty(exports, "MetaCard", {
79
+ enumerable: true,
80
+ get: function () {
81
+ return _MetaCard.MetaCard;
82
+ }
83
+ });
66
84
  Object.defineProperty(exports, "People", {
67
85
  enumerable: true,
68
86
  get: function () {
@@ -105,12 +123,24 @@ Object.defineProperty(exports, "Spinner", {
105
123
  return _Spinner.Spinner;
106
124
  }
107
125
  });
126
+ Object.defineProperty(exports, "TextSteps", {
127
+ enumerable: true,
128
+ get: function () {
129
+ return _TextSteps.TextSteps;
130
+ }
131
+ });
108
132
  Object.defineProperty(exports, "Timestamp", {
109
133
  enumerable: true,
110
134
  get: function () {
111
135
  return _Timestamp.Timestamp;
112
136
  }
113
137
  });
138
+ Object.defineProperty(exports, "Tip", {
139
+ enumerable: true,
140
+ get: function () {
141
+ return _Tip.Tip;
142
+ }
143
+ });
114
144
  Object.defineProperty(exports, "useApp", {
115
145
  enumerable: true,
116
146
  get: function () {
@@ -139,4 +169,9 @@ var _Quote = require("./Quote");
139
169
  var _SVG = require("./SVG");
140
170
  var _SnapScroller = require("./SnapScroller");
141
171
  var _Spinner = require("./Spinner");
142
- var _Timestamp = require("./Timestamp");
172
+ var _Timestamp = require("./Timestamp");
173
+ var _MetaCard = require("./MetaCard");
174
+ var _AnimatedBlobs = require("./AnimatedBlobs");
175
+ var _Tip = require("./Tip");
176
+ var _AnimatedGradient = require("./AnimatedGradient");
177
+ var _TextSteps = require("./TextSteps");
@@ -8,12 +8,13 @@ var React = _interopRequireWildcard(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
10
10
  var _ = require("../..");
11
+ require("./styles.scss");
11
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
13
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
13
14
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
14
15
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
15
16
  // Component-level imports
16
- Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
17
+ // import('./styles.scss')
17
18
 
18
19
  // Helper Definition
19
20
  const baseClassName = _exports.default.base;
@@ -24,6 +24,7 @@ $default-animation-time: .31s;
24
24
 
25
25
  &.arrow-right {
26
26
  &::after {
27
+ align-self: center;
27
28
  content: "-->";
28
29
  margin-left: $default-margin;
29
30
  vertical-align: middle;
@@ -39,6 +40,7 @@ $default-animation-time: .31s;
39
40
 
40
41
  &.arrow-left {
41
42
  &::before {
43
+ align-self: center;
42
44
  content: "<--";
43
45
  margin-right: $default-margin;
44
46
  vertical-align: middle;