@spothero/ui 17.0.2-beta.0 → 17.0.3-beta.0

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 (135) hide show
  1. package/dist/components/Accordion/Accordion.js +1 -2
  2. package/dist/components/Accordion/Accordion.stories.js +13 -22
  3. package/dist/components/Accordion/index.js +5 -8
  4. package/dist/components/Accordion/styles/button.js +1 -3
  5. package/dist/components/Accordion/styles/container.js +1 -1
  6. package/dist/components/Accordion/styles/index.js +4 -13
  7. package/dist/components/Accordion/styles/panel.js +1 -1
  8. package/dist/components/Alert/Alert.js +23 -44
  9. package/dist/components/Alert/Alert.stories.js +8 -12
  10. package/dist/components/Alert/index.js +1 -3
  11. package/dist/components/Alert/styles/index.js +12 -35
  12. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +84 -119
  13. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js +4 -12
  14. package/dist/components/AutoSuggestSelect/index.js +1 -3
  15. package/dist/components/Badge/Badge.js +1 -2
  16. package/dist/components/Badge/Badge.stories.js +12 -20
  17. package/dist/components/Badge/styles/index.js +6 -12
  18. package/dist/components/Button/Button.js +17 -47
  19. package/dist/components/Button/Button.spec.js +4 -10
  20. package/dist/components/Button/Button.styles.js +36 -49
  21. package/dist/components/Button/button-props.js +2 -20
  22. package/dist/components/Button/index.js +2 -5
  23. package/dist/components/Button/stories/button.js +5 -17
  24. package/dist/components/Button/stories/index.stories.js +24 -48
  25. package/dist/components/Button/stories/overview.js +34 -62
  26. package/dist/components/Card/Card.js +11 -26
  27. package/dist/components/Card/Card.stories.js +5 -15
  28. package/dist/components/Checkbox/Checkbox.js +1 -2
  29. package/dist/components/Checkbox/Checkbox.stories.js +2 -10
  30. package/dist/components/Checkbox/index.js +1 -3
  31. package/dist/components/Checkbox/styles/index.js +3 -11
  32. package/dist/components/Container/Container.js +5 -21
  33. package/dist/components/Container/Container.stories.js +14 -43
  34. package/dist/components/Container/Container.styles.js +1 -1
  35. package/dist/components/Divider/Divider.js +8 -24
  36. package/dist/components/Divider/Divider.stories.js +3 -15
  37. package/dist/components/Divider/Divider.styles.js +2 -8
  38. package/dist/components/FormControl/FormControl.js +14 -29
  39. package/dist/components/Grid/Grid.js +7 -24
  40. package/dist/components/Grid/Grid.stories.js +36 -60
  41. package/dist/components/Grid/Grid.styles.js +2 -2
  42. package/dist/components/Grid/GridItem.js +5 -21
  43. package/dist/components/Grid/GridItem.styles.js +2 -1
  44. package/dist/components/Grid/index.js +2 -5
  45. package/dist/components/Heading/Heading.js +8 -29
  46. package/dist/components/Heading/Heading.stories.js +4 -15
  47. package/dist/components/Heading/Heading.styles.js +24 -38
  48. package/dist/components/Icon/Icon.js +1 -2
  49. package/dist/components/Icon/Icon.stories.js +19 -28
  50. package/dist/components/Image/Image.js +39 -69
  51. package/dist/components/Image/Image.spec.js +16 -22
  52. package/dist/components/Image/Image.stories.js +8 -19
  53. package/dist/components/Input/Input.js +14 -31
  54. package/dist/components/Input/Input.stories.js +5 -15
  55. package/dist/components/Input/index.js +1 -3
  56. package/dist/components/Input/styles/index.js +4 -10
  57. package/dist/components/Link/Link.js +1 -2
  58. package/dist/components/Link/Link.stories.js +5 -12
  59. package/dist/components/Link/Link.styles.js +8 -8
  60. package/dist/components/List/List.js +14 -37
  61. package/dist/components/List/List.stories.js +19 -55
  62. package/dist/components/List/index.js +2 -5
  63. package/dist/components/List/styles/index.js +2 -9
  64. package/dist/components/List/styles/item.styles.js +1 -1
  65. package/dist/components/Loader/Loader.js +17 -33
  66. package/dist/components/Loader/Loader.stories.js +24 -44
  67. package/dist/components/Modal/Modal.js +17 -23
  68. package/dist/components/Modal/Modal.stories.js +30 -100
  69. package/dist/components/Modal/index.js +1 -3
  70. package/dist/components/Modal/styles/body.js +11 -28
  71. package/dist/components/Modal/styles/closeButton.js +4 -4
  72. package/dist/components/Modal/styles/dialog.js +4 -4
  73. package/dist/components/Modal/styles/dialogContainer.js +5 -11
  74. package/dist/components/Modal/styles/header.js +5 -5
  75. package/dist/components/Modal/styles/index.js +12 -28
  76. package/dist/components/Popover/Popover.js +12 -33
  77. package/dist/components/Popover/Popover.stories.js +36 -62
  78. package/dist/components/Popover/PopoverArrow.js +3 -17
  79. package/dist/components/Popover/PopoverCloseButton.js +3 -17
  80. package/dist/components/Popover/PopoverContent.js +10 -27
  81. package/dist/components/Popover/index.js +4 -8
  82. package/dist/components/Popover/styles/index.js +9 -22
  83. package/dist/components/Popover/styles/popover-arrow.js +4 -4
  84. package/dist/components/Popover/styles/popover-body.js +3 -7
  85. package/dist/components/Popover/styles/popover-close-button.js +7 -10
  86. package/dist/components/Popover/styles/popover-content.js +5 -7
  87. package/dist/components/Popover/styles/popover-header.js +1 -1
  88. package/dist/components/Popover/styles/popper.js +1 -1
  89. package/dist/components/Radio/Radio.js +12 -27
  90. package/dist/components/Radio/Radio.stories.js +2 -12
  91. package/dist/components/Radio/RadioGroup.js +17 -33
  92. package/dist/components/Radio/index.js +2 -5
  93. package/dist/components/Radio/styles/index.js +5 -13
  94. package/dist/components/Select/Select.js +14 -33
  95. package/dist/components/Select/Select.stories.js +13 -22
  96. package/dist/components/Select/index.js +1 -3
  97. package/dist/components/Select/styles/index.js +4 -14
  98. package/dist/components/Skeleton/Skeleton.stories.js +6 -20
  99. package/dist/components/Skeleton/Skeleton.styles.js +0 -3
  100. package/dist/components/Skeleton/index.js +3 -4
  101. package/dist/components/Spinner/Spinner.js +9 -25
  102. package/dist/components/Spinner/Spinner.stories.js +42 -70
  103. package/dist/components/Spinner/Spinner.styles.js +56 -43
  104. package/dist/components/Switch/Switch.js +13 -30
  105. package/dist/components/Switch/Switch.stories.js +2 -10
  106. package/dist/components/Switch/index.js +1 -3
  107. package/dist/components/Switch/styles/index.js +10 -31
  108. package/dist/components/Table/Table.js +1 -2
  109. package/dist/components/Table/Table.stories.js +17 -37
  110. package/dist/components/Table/Table.styles.js +13 -32
  111. package/dist/components/Table/index.js +8 -11
  112. package/dist/components/Tabs/Tabs.js +14 -22
  113. package/dist/components/Tabs/Tabs.stories.js +4 -20
  114. package/dist/components/Tabs/combineSizeWithVariant.js +11 -17
  115. package/dist/components/Tabs/index.js +5 -8
  116. package/dist/components/Tabs/styles/index.js +2 -8
  117. package/dist/components/Text/Text.js +8 -17
  118. package/dist/components/Text/Text.stories.js +3 -15
  119. package/dist/components/Text/Text.styles.js +15 -35
  120. package/dist/components/Text/combineAsWithVariant.js +36 -57
  121. package/dist/components/Text/options.js +1 -1
  122. package/dist/components/ThemeProvider/ThemeProvider.js +10 -33
  123. package/dist/components/ThemeProvider/ThemeProvider.stories.js +7 -16
  124. package/dist/components/index.js +74 -117
  125. package/dist/components/styles.js +21 -43
  126. package/dist/theme/base/breakpoints.js +1 -4
  127. package/dist/theme/base/colors.js +32 -45
  128. package/dist/theme/base/index.js +7 -13
  129. package/dist/theme/base/sizes.js +4 -4
  130. package/dist/theme/base/typography.js +5 -6
  131. package/dist/theme/base/zindices.js +1 -2
  132. package/dist/theme/global.js +87 -20
  133. package/dist/theme/index.js +15 -41
  134. package/dist/utils/Spaces.js +5 -12
  135. package/package.json +2 -2
@@ -1,20 +1,13 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
11
-
12
8
  var _index = _interopRequireDefault(require("./styles/index"));
13
-
14
9
  var _typography = require("../../theme/base/typography");
15
-
16
10
  var _Tabs = require("./Tabs");
17
-
18
11
  /**
19
12
  * ### `combineSizeWithVariant`
20
13
  * A function that takes in the `size` value, and the
@@ -26,19 +19,20 @@ var _Tabs = require("./Tabs");
26
19
  * @param {string} args.variant - The style variant for the Text component
27
20
  * @returns {Object} An object containing the merged styleProps from the `variant` and the `size` props
28
21
  */
29
- var combineSizeWithVariant = function combineSizeWithVariant(_ref) {
30
- var _fontSizeMapping;
31
-
32
- var size = _ref.size,
33
- _ref$variant = _ref.variant,
34
- variant = _ref$variant === void 0 ? 'line' : _ref$variant;
35
- var fontSizeMapping = (_fontSizeMapping = {}, (0, _defineProperty2.default)(_fontSizeMapping, _Tabs.SIZE_SMALL, _typography.fontSizes.xs), (0, _defineProperty2.default)(_fontSizeMapping, _Tabs.SIZE_BODY, _typography.fontSizes.base), (0, _defineProperty2.default)(_fontSizeMapping, _Tabs.SIZE_HEADING, _typography.fontSizes.lg), _fontSizeMapping);
36
-
37
- var styleProps = _index.default.variants["".concat(variant)];
38
22
 
23
+ const combineSizeWithVariant = _ref => {
24
+ let {
25
+ size,
26
+ variant = 'line'
27
+ } = _ref;
28
+ const fontSizeMapping = {
29
+ [_Tabs.SIZE_SMALL]: _typography.fontSizes.xs,
30
+ [_Tabs.SIZE_BODY]: _typography.fontSizes.base,
31
+ [_Tabs.SIZE_HEADING]: _typography.fontSizes.lg
32
+ };
33
+ const styleProps = _index.default.variants[`${variant}`];
39
34
  styleProps.tab.fontSize = fontSizeMapping[size];
40
35
  return styleProps;
41
36
  };
42
-
43
37
  var _default = combineSizeWithVariant;
44
38
  exports.default = _default;
@@ -1,41 +1,38 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  Object.defineProperty(exports, "Tab", {
9
8
  enumerable: true,
10
- get: function get() {
9
+ get: function () {
11
10
  return _react.Tab;
12
11
  }
13
12
  });
14
13
  Object.defineProperty(exports, "TabList", {
15
14
  enumerable: true,
16
- get: function get() {
15
+ get: function () {
17
16
  return _react.TabList;
18
17
  }
19
18
  });
20
19
  Object.defineProperty(exports, "TabPanel", {
21
20
  enumerable: true,
22
- get: function get() {
21
+ get: function () {
23
22
  return _react.TabPanel;
24
23
  }
25
24
  });
26
25
  Object.defineProperty(exports, "TabPanels", {
27
26
  enumerable: true,
28
- get: function get() {
27
+ get: function () {
29
28
  return _react.TabPanels;
30
29
  }
31
30
  });
32
31
  Object.defineProperty(exports, "default", {
33
32
  enumerable: true,
34
- get: function get() {
33
+ get: function () {
35
34
  return _Tabs.default;
36
35
  }
37
36
  });
38
-
39
37
  var _Tabs = _interopRequireDefault(require("./Tabs"));
40
-
41
38
  var _react = require("@chakra-ui/react");
@@ -1,17 +1,13 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _merge = _interopRequireDefault(require("lodash/merge"));
11
-
12
9
  var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
13
-
14
- var variants = {
10
+ const variants = {
15
11
  line: {
16
12
  tablist: {
17
13
  borderBottom: '2px solid',
@@ -44,9 +40,7 @@ var variants = {
44
40
  }
45
41
  }
46
42
  };
47
-
48
43
  var _default = (0, _merge.default)(_theme.default.components.Tabs, {
49
- variants: variants
44
+ variants
50
45
  });
51
-
52
46
  exports.default = _default;
@@ -1,37 +1,28 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
11
-
12
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
13
-
14
9
  var _react = _interopRequireDefault(require("react"));
15
-
16
10
  var _react2 = require("@chakra-ui/react");
17
-
18
11
  var _options = _interopRequireDefault(require("./options"));
19
-
20
12
  var _Text = require("./Text.styles");
21
-
22
13
  var _combineAsWithVariant = _interopRequireDefault(require("./combineAsWithVariant"));
23
-
24
- var _excluded = ["as", "variant"];
25
- var Text = (0, _react2.forwardRef)(function (_ref, ref) {
26
- var as = _ref.as,
27
- variant = _ref.variant,
28
- props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
14
+ const Text = (0, _react2.forwardRef)((_ref, ref) => {
15
+ let {
16
+ as,
17
+ variant,
18
+ ...props
19
+ } = _ref;
29
20
  return /*#__PURE__*/_react.default.createElement(_react2.Text, (0, _extends2.default)({
30
21
  variant: variant,
31
22
  as: as
32
23
  }, (0, _combineAsWithVariant.default)({
33
- as: as,
34
- variant: variant
24
+ as,
25
+ variant
35
26
  }), props, {
36
27
  ref: ref
37
28
  }));
@@ -1,22 +1,14 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.Text = void 0;
9
-
10
- var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
11
-
12
8
  var _react = _interopRequireDefault(require("react"));
13
-
14
9
  var _Text = _interopRequireDefault(require("./Text"));
15
-
16
10
  var _options = _interopRequireDefault(require("./options"));
17
-
18
11
  var _Text2 = require("./Text.styles");
19
-
20
12
  var _default = {
21
13
  title: 'v2/Text',
22
14
  component: _Text.default,
@@ -27,7 +19,7 @@ var _default = {
27
19
  variant: {
28
20
  control: {
29
21
  type: 'select',
30
- options: (0, _keys.default)(_Text2.variants)
22
+ options: Object.keys(_Text2.variants)
31
23
  }
32
24
  },
33
25
  as: {
@@ -44,12 +36,8 @@ var _default = {
44
36
  }
45
37
  };
46
38
  exports.default = _default;
47
-
48
- var Template = function Template(props) {
49
- return /*#__PURE__*/_react.default.createElement(_Text.default, props);
50
- };
51
-
52
- var Text = Template.bind({});
39
+ const Template = props => /*#__PURE__*/_react.default.createElement(_Text.default, props);
40
+ const Text = Template.bind({});
53
41
  exports.Text = Text;
54
42
  Text.args = {
55
43
  children: 'Bonbon lollipop tiramisu cupcake bear claw cupcake. Icing candy canes cookie caramels wafer tootsie roll soufflé halvah. Ice cream tart gummies apple pie chocolate bar. Pastry gummies macaroon fruitcake donut sweet caramels candy. Oat cake marshmallow biscuit carrot cake fruitcake brownie pastry liquorice liquorice. Topping sweet gingerbread. Chupa chups caramels brownie. Icing jujubes chupa chups cookie. Carrot cake gummi bears powder apple pie donut pudding macaroon. Icing jelly cupcake powder jelly croissant pastry. Powder jelly fruitcake gummies sweet tootsie roll candy. Icing cheesecake toffee tart pastry lemon drops lemon drops bonbon wafer. Cheesecake ice cream wafer apple pie candy canes croissant. Sweet croissant pudding carrot cake oat cake chupa chups. Gingerbread lemon drops biscuit oat cake carrot cake. Chocolate cake jelly-o cake cake candy lollipop.'
@@ -1,67 +1,47 @@
1
1
  "use strict";
2
2
 
3
- var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
4
-
5
- var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
6
-
7
- var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
8
-
9
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
10
-
11
- var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
12
-
13
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
-
15
4
  Object.defineProperty(exports, "__esModule", {
16
5
  value: true
17
6
  });
18
7
  exports.variants = exports.default = void 0;
19
-
20
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
21
-
22
8
  var _merge = _interopRequireDefault(require("lodash/merge"));
23
-
24
9
  var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
25
-
26
10
  var _typography = require("../../theme/base/typography");
27
-
28
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
29
-
30
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
31
-
32
- var baseStyle = {
11
+ const baseStyle = {
33
12
  lineHeight: 1.5,
34
13
  fontWeight: _typography.fontWeights.normal
35
14
  };
36
- var variants = {
37
- body: _objectSpread(_objectSpread({}, baseStyle), {}, {
15
+ const variants = {
16
+ body: {
17
+ ...baseStyle,
38
18
  fontSize: {
39
19
  base: _typography.fontSizes.base,
40
20
  desktop: _typography.fontSizes.base
41
21
  }
42
- }),
43
- body2: _objectSpread(_objectSpread({}, baseStyle), {}, {
22
+ },
23
+ body2: {
24
+ ...baseStyle,
44
25
  fontSize: {
45
26
  base: _typography.fontSizes.sm,
46
27
  desktop: _typography.fontSizes.sm
47
28
  }
48
- }),
49
- caption: _objectSpread(_objectSpread({}, baseStyle), {}, {
29
+ },
30
+ caption: {
31
+ ...baseStyle,
50
32
  fontSize: {
51
33
  base: _typography.fontSizes.xs,
52
34
  desktop: _typography.fontSizes.xs
53
35
  }
54
- })
36
+ }
55
37
  };
56
38
  exports.variants = variants;
57
- var defaultProps = {
39
+ const defaultProps = {
58
40
  variant: variants.body
59
41
  };
60
-
61
42
  var _default = (0, _merge.default)(_theme.default.components.Text, {
62
- variants: variants,
63
- baseStyle: baseStyle,
64
- defaultProps: defaultProps
43
+ variants,
44
+ baseStyle,
45
+ defaultProps
65
46
  });
66
-
67
47
  exports.default = _default;
@@ -1,36 +1,13 @@
1
1
  "use strict";
2
2
 
3
- var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
4
-
5
- var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
6
-
7
- var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
8
-
9
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
10
-
11
- var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
12
-
13
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
-
15
3
  Object.defineProperty(exports, "__esModule", {
16
4
  value: true
17
5
  });
18
6
  exports.default = void 0;
19
-
20
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
21
-
22
- var _freeze = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/freeze"));
23
-
24
7
  var _Text = require("./Text.styles");
25
-
26
8
  var _typography = require("../../theme/base/typography");
27
-
28
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
29
-
30
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
31
-
32
9
  // Create list of commonly used html text elements
33
- var asOptions = (0, _freeze.default)({
10
+ const asOptions = Object.freeze({
34
11
  bold: 'b',
35
12
  strong: 'strong',
36
13
  italic: 'i',
@@ -39,6 +16,7 @@ var asOptions = (0, _freeze.default)({
39
16
  strikethrough: 's',
40
17
  underline: 'u'
41
18
  });
19
+
42
20
  /**
43
21
  * ### `combineAsWithVariant`
44
22
  * A function that takes in the `as` value (the HTML element to render the Text component as), and the
@@ -58,66 +36,67 @@ var asOptions = (0, _freeze.default)({
58
36
  * @returns {Object} An object containing the merged styleProps from the `variant` and the `as` props
59
37
  */
60
38
 
61
- var combineAsWithVariant = function combineAsWithVariant(_ref) {
62
- var as = _ref.as,
63
- variant = _ref.variant;
64
- var variantFontSizeBase = Number(_Text.variants["".concat(variant)].fontSize.base.replace('rem', ''));
65
- var variantFontSizeDesktop = Number(_Text.variants["".concat(variant)].fontSize.desktop.replace('rem', ''));
66
- var styleProps;
67
-
39
+ const combineAsWithVariant = _ref => {
40
+ let {
41
+ as,
42
+ variant
43
+ } = _ref;
44
+ const variantFontSizeBase = Number(_Text.variants[`${variant}`].fontSize.base.replace('rem', ''));
45
+ const variantFontSizeDesktop = Number(_Text.variants[`${variant}`].fontSize.desktop.replace('rem', ''));
46
+ let styleProps;
68
47
  switch (as) {
69
48
  case asOptions.bold:
70
- styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
49
+ styleProps = {
50
+ ..._Text.variants[`${variant}`],
71
51
  fontWeight: _typography.fontWeights.semibold
72
- });
52
+ };
73
53
  break;
74
-
75
54
  case asOptions.strong:
76
- styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
55
+ styleProps = {
56
+ ..._Text.variants[`${variant}`],
77
57
  fontWeight: _typography.fontWeights.semibold
78
- });
58
+ };
79
59
  break;
80
-
81
60
  case asOptions.italic:
82
- styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
61
+ styleProps = {
62
+ ..._Text.variants[`${variant}`],
83
63
  fontStyle: 'italic'
84
- });
64
+ };
85
65
  break;
86
-
87
66
  case asOptions.emphasis:
88
- styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
67
+ styleProps = {
68
+ ..._Text.variants[`${variant}`],
89
69
  fontStyle: 'italic'
90
- });
70
+ };
91
71
  break;
92
-
93
72
  case asOptions.underline:
94
- styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
73
+ styleProps = {
74
+ ..._Text.variants[`${variant}`],
95
75
  textDecoration: 'underline'
96
- });
76
+ };
97
77
  break;
98
-
99
78
  case asOptions.strikethrough:
100
- styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
79
+ styleProps = {
80
+ ..._Text.variants[`${variant}`],
101
81
  textDecoration: 'line-through'
102
- });
82
+ };
103
83
  break;
104
-
105
84
  case asOptions.small:
106
- styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
85
+ styleProps = {
86
+ ..._Text.variants[`${variant}`],
107
87
  fontSize: {
108
- base: "".concat(variantFontSizeBase * 0.8, "rem"),
109
- desktop: "".concat(variantFontSizeDesktop * 0.8, "rem")
88
+ base: `${variantFontSizeBase * 0.8}rem`,
89
+ desktop: `${variantFontSizeDesktop * 0.8}rem`
110
90
  }
111
- });
91
+ };
112
92
  break;
113
-
114
93
  default:
115
- styleProps = _objectSpread({}, _Text.variants["".concat(variant)]);
94
+ styleProps = {
95
+ ..._Text.variants[`${variant}`]
96
+ };
116
97
  break;
117
98
  }
118
-
119
99
  return styleProps;
120
100
  };
121
-
122
101
  var _default = combineAsWithVariant;
123
102
  exports.default = _default;
@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var options = ['a', 'abbr', 'address', 'article', 'aside', 'b', 'bdi', 'bdo', 'blockquote', 'button', 'caption', 'cite', 'code', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'fieldset', 'figure', 'footer', 'form', 'header', 'hgroup', 'i', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'pre', 'progress', 'q', 'rb', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video'];
7
+ const options = ['a', 'abbr', 'address', 'article', 'aside', 'b', 'bdi', 'bdo', 'blockquote', 'button', 'caption', 'cite', 'code', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'fieldset', 'figure', 'footer', 'form', 'header', 'hgroup', 'i', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'pre', 'progress', 'q', 'rb', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video'];
8
8
  var _default = options;
9
9
  exports.default = _default;
@@ -1,47 +1,27 @@
1
1
  "use strict";
2
2
 
3
- var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
-
5
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
6
-
7
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
8
-
9
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
10
-
11
4
  Object.defineProperty(exports, "__esModule", {
12
5
  value: true
13
6
  });
14
7
  exports.default = void 0;
15
-
16
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
17
-
18
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
19
-
20
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
21
-
22
10
  var _react = _interopRequireWildcard(require("react"));
23
-
24
11
  var _react2 = require("@chakra-ui/react");
25
-
26
12
  var _theme = _interopRequireDefault(require("../../theme"));
27
-
28
13
  var _global = require("../../theme/global");
29
-
30
14
  var _merge = _interopRequireDefault(require("lodash/merge"));
31
-
32
- var _excluded = ["theme", "useLegacyOverrides", "disableExternalFonts", "children"];
33
-
34
- function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
35
-
36
- 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; }
37
-
38
- var ThemeProvider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
39
- var theme = _ref.theme,
40
- useLegacyOverrides = _ref.useLegacyOverrides,
41
- _ref$disableExternalF = _ref.disableExternalFonts,
42
- disableExternalFonts = _ref$disableExternalF === void 0 ? false : _ref$disableExternalF,
43
- children = _ref.children,
44
- props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
15
+ 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); }
16
+ 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; }
17
+ const ThemeProvider = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
18
+ let {
19
+ theme,
20
+ useLegacyOverrides,
21
+ disableExternalFonts = false,
22
+ children,
23
+ ...props
24
+ } = _ref;
45
25
  return /*#__PURE__*/_react.default.createElement(_react2.ChakraProvider, (0, _extends2.default)({}, props, {
46
26
  ref: ref,
47
27
  theme: (0, _merge.default)(_theme.default, theme)
@@ -52,13 +32,10 @@ var ThemeProvider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
52
32
  ThemeProvider.propTypes = {
53
33
  /** If true, this will use the old `spothero-html` base styles */
54
34
  useLegacyOverrides: _propTypes.default.bool,
55
-
56
35
  /** If true, this will not load the `Fonts` global styles */
57
36
  disableExternalFonts: _propTypes.default.bool,
58
-
59
37
  /** The React node (generally your entire App) that will be provided the theme */
60
38
  children: _propTypes.default.node,
61
-
62
39
  /** Adds additional themeing on top of SpotHero's default configuration */
63
40
  theme: _propTypes.default.object
64
41
  };
@@ -1,30 +1,21 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.ThemeProvider = void 0;
9
-
10
8
  var _react = _interopRequireDefault(require("react"));
11
-
12
9
  var _react2 = require("@chakra-ui/react");
13
-
14
10
  var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
15
-
16
11
  var _Spaces = _interopRequireDefault(require("../../utils/Spaces"));
17
-
18
12
  var _Text = _interopRequireDefault(require("../Text/Text"));
19
-
20
13
  var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
21
-
22
- var Usage = function Usage() {
14
+ const Usage = () => {
23
15
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "// RootComponent.jsx", /*#__PURE__*/_react.default.createElement("br", null), "...", /*#__PURE__*/_react.default.createElement("br", null), "return (", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "<ThemeProvider>", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, {
24
16
  spaces: 6
25
17
  }), "<App/>", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "</ThemeProvider>", /*#__PURE__*/_react.default.createElement("br", null), ");", /*#__PURE__*/_react.default.createElement("br", null), "...");
26
18
  };
27
-
28
19
  var _default = {
29
20
  title: 'v2/ThemeProvider',
30
21
  component: _ThemeProvider.default,
@@ -36,10 +27,11 @@ var _default = {
36
27
  }
37
28
  };
38
29
  exports.default = _default;
39
-
40
- var Template = function Template(props, _ref) {
41
- var hasDarkBackground = _ref.hasDarkBackground;
42
- var contentTextColor = hasDarkBackground ? 'text.primary.dark' : 'text.primary.light';
30
+ const Template = (props, _ref) => {
31
+ let {
32
+ hasDarkBackground
33
+ } = _ref;
34
+ const contentTextColor = hasDarkBackground ? 'text.primary.dark' : 'text.primary.light';
43
35
  return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
44
36
  mb: 8,
45
37
  color: contentTextColor
@@ -54,8 +46,7 @@ var Template = function Template(props, _ref) {
54
46
  color: contentTextColor
55
47
  }, "ThemeProvider also has a ", /*#__PURE__*/_react.default.createElement(_react2.Code, null, "disableExternalFonts"), " prop that is a boolean. If true, the ThemeProvider will not load the font files from Google's CDN, and you will be able to handle fonts on a project-level."), ' ');
56
48
  };
57
-
58
- var ThemeProvider = Template.bind({});
49
+ const ThemeProvider = Template.bind({});
59
50
  exports.ThemeProvider = ThemeProvider;
60
51
  ThemeProvider.parameters = {
61
52
  importBy: 'ThemeProvider'