@spothero/ui 17.2.3 → 18.0.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.
@@ -18,7 +18,7 @@ const baseStyle = {
18
18
  borderStyle: 'solid',
19
19
  borderRadius: '1.25rem',
20
20
  textTransform: 'capitalize',
21
- transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
21
+ transition: 'all normal ease',
22
22
  _disabled: {
23
23
  cursor: 'not-allowed',
24
24
  opacity: 1,
@@ -12,8 +12,9 @@ const baseStyle = {
12
12
  borderWidth: 1,
13
13
  borderStyle: 'solid',
14
14
  borderImage: 'initial',
15
- borderRadius: 'var(--chakra-radii-sm)',
15
+ borderRadius: 'sm',
16
16
  borderColor: 'gray.600',
17
+ transition: 'all 150ms ease',
17
18
  _readOnly: {
18
19
  boxShadow: 'none !important',
19
20
  userSelect: 'all'
@@ -25,11 +26,11 @@ const baseStyle = {
25
26
  },
26
27
  _focus: {
27
28
  zIndex: 1,
28
- boxShadow: t => `0 0 1px 1px ${t.colors.primary['300']}`
29
+ boxShadow: 'outline'
29
30
  },
30
31
  _checked: {
31
- borderColor: 'brandBlue',
32
- backgroundColor: 'brandBlue',
32
+ borderColor: 'primary.default',
33
+ backgroundColor: 'primary.default',
33
34
  _hover: {
34
35
  borderColor: 'primary.600',
35
36
  backgroundColor: 'primary.600'
@@ -38,6 +39,9 @@ const baseStyle = {
38
39
  borderColor: 'gray.200',
39
40
  backgroundColor: 'gray.200'
40
41
  }
42
+ },
43
+ '& svg': {
44
+ filter: `drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25))`
41
45
  }
42
46
  },
43
47
  label: {
@@ -35,7 +35,7 @@ const variants = {
35
35
  fontWeight: 'normal'
36
36
  },
37
37
  _focus: {
38
- borderColor: 'brandBlue'
38
+ borderColor: 'primary.default'
39
39
  },
40
40
  _hover: {
41
41
  borderColor: 'gray.300'
@@ -1,15 +1,19 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
6
7
  exports.variants = exports.default = void 0;
8
+ var _merge = _interopRequireDefault(require("lodash/merge"));
9
+ var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
7
10
  const baseStyle = {
8
- transition: `all 0.15s ease-out`,
11
+ transition: `all 0.15s ease`,
9
12
  color: 'text.link.light',
10
13
  fontWeight: 'semibold',
11
14
  _hover: {
12
- color: 'primary.600'
15
+ color: 'primary.600',
16
+ textDecoration: 'none'
13
17
  },
14
18
  _focus: {
15
19
  boxShadow: 'outline'
@@ -34,9 +38,9 @@ exports.variants = variants;
34
38
  const defaultProps = {
35
39
  variant: 'standard'
36
40
  };
37
- var _default = {
41
+ var _default = (0, _merge.default)(_theme.default.components.Link, {
38
42
  baseStyle,
39
43
  variants,
40
44
  defaultProps
41
- };
45
+ });
42
46
  exports.default = _default;
@@ -18,29 +18,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
18
18
  * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
19
19
  * @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
20
20
  * @param {object} [contentStyling] - Style props to be passed into the modal content
21
- * @param {object} [headerStyling] - Style props to be passed into the modal header
22
- * @param {object} [footerStyling] - Style props to be passed into the modal footer
23
- * @param {React.ReactNode} [header] - The node for the header. Likely just a string.
24
- * @param {React.ReactNode} [footer] - The node for the footer. Likely some control buttons.
25
21
  * @param {React.ReactNode} [hideCloseButton] - Whether or not to show the close button
26
22
  * @returns {React.ReactElement} - The Modal component
27
23
  */
28
24
  const Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
29
25
  const {
30
- header,
31
- footer,
32
26
  children,
33
- hideCloseButton,
34
27
  isMobile,
35
- contentStyling = {},
36
- headerStyling = {},
37
- footerStyling = {}
28
+ hideCloseButton,
29
+ contentStyling = {}
38
30
  } = props;
39
31
  return /*#__PURE__*/_react.default.createElement(_react2.Modal, (0, _extends2.default)({
40
32
  motionPreset: isMobile ? 'slideInBottom' : 'scale'
41
33
  }, props, {
42
34
  ref: ref
43
- }), /*#__PURE__*/_react.default.createElement(_react2.ModalOverlay, null), /*#__PURE__*/_react.default.createElement(_react2.ModalContent, contentStyling, header ? /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, headerStyling, header) : /*#__PURE__*/_react.default.createElement(_react2.Box, (0, _header.default)(props)), hideCloseButton ? null : /*#__PURE__*/_react.default.createElement(_react2.ModalCloseButton, null), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, null, children), footer ? /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, footerStyling, footer) : null));
35
+ }), /*#__PURE__*/_react.default.createElement(_react2.ModalOverlay, null), /*#__PURE__*/_react.default.createElement(_react2.ModalContent, contentStyling, hideCloseButton ? null : /*#__PURE__*/_react.default.createElement(_react2.ModalCloseButton, null), children));
44
36
  });
45
37
  var _default = Modal;
46
38
  exports.default = _default;
@@ -14,7 +14,7 @@ var _index = require("./index");
14
14
  var _Button = _interopRequireDefault(require("../Button/Button"));
15
15
  var _Text = _interopRequireDefault(require("../Text/Text"));
16
16
  var _Heading = _interopRequireDefault(require("../Heading/Heading"));
17
- var _Accordion = _interopRequireWildcard(require("../Accordion"));
17
+ var _Accordion = require("../Accordion");
18
18
  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); }
19
19
  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; }
20
20
  var _default = {
@@ -27,17 +27,12 @@ var _default = {
27
27
  },
28
28
  argTypes: {
29
29
  ...(0, _createControl.createSelectControl)('size', ['sm', 'md', 'lg']),
30
- ...(0, _disableArgs.default)(['isOpen', 'onClose', 'footer']),
30
+ ...(0, _disableArgs.default)(['isOpen', 'onClose']),
31
31
  hideCloseButton: {
32
32
  control: {
33
33
  type: 'boolean'
34
34
  }
35
35
  },
36
- header: {
37
- control: {
38
- type: 'text'
39
- }
40
- },
41
36
  children: {
42
37
  control: {
43
38
  type: 'text'
@@ -60,18 +55,17 @@ const Transactional = props => {
60
55
  }, "A \"Transactional\" modal just refers to one with a", ' ', /*#__PURE__*/_react.default.createElement("code", null, "footer"), " prop."), /*#__PURE__*/_react.default.createElement(_Button.default, {
61
56
  onClick: () => setOpen(true)
62
57
  }, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
63
- footer: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
64
- onClick: () => setOpen(false),
65
- variant: "secondary",
66
- marginRight: 4
67
- }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
68
- onClick: () => setOpen(false),
69
- variant: "primary"
70
- }, "Submit")),
71
58
  isMobile: isMobile,
72
59
  isOpen: open,
73
60
  onClose: () => setOpen(false)
74
- }), props.children));
61
+ }), /*#__PURE__*/_react.default.createElement(_index.ModalHeader, null, "Transactional"), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, props.children), /*#__PURE__*/_react.default.createElement(_index.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
62
+ onClick: () => setOpen(false),
63
+ variant: "secondary",
64
+ marginRight: 4
65
+ }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
66
+ onClick: () => setOpen(false),
67
+ variant: "primary"
68
+ }, "Submit"))));
75
69
  };
76
70
  exports.Transactional = Transactional;
77
71
  Transactional.args = {
@@ -92,11 +86,10 @@ const Passive = props => {
92
86
  isMobile: isMobile,
93
87
  isOpen: open,
94
88
  onClose: () => setOpen(false)
95
- }), props.children));
89
+ }), /*#__PURE__*/_react.default.createElement(_index.ModalHeader, null, "Passive"), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, props.children)));
96
90
  };
97
91
  exports.Passive = Passive;
98
92
  Passive.args = {
99
- header: 'Passive',
100
93
  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero.'
101
94
  };
102
95
  const TransactionalWithExpandingContent = props => {
@@ -126,22 +119,14 @@ const TransactionalWithExpandingContent = props => {
126
119
  }, "Feel free to check the code of this demo to see an example of how we might do that."), /*#__PURE__*/_react.default.createElement(_Button.default, {
127
120
  onClick: () => setOpen(true)
128
121
  }, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
129
- header: "Transactional with Expanding Content",
130
- footer: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
131
- onClick: () => setOpen(false),
132
- variant: "secondary",
133
- marginRight: 4
134
- }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
135
- variant: "primary"
136
- }, "Submit")),
137
122
  isMobile: isMobile,
138
123
  isOpen: open,
139
124
  onClose: () => setOpen(false)
140
- }), /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
125
+ }), /*#__PURE__*/_react.default.createElement(_index.ModalHeader, null, "Transactional with Expanding Content"), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
141
126
  marginBottom: 2
142
127
  }, "Try opening an Accordion when it is at the very bottom of the modal."), /*#__PURE__*/_react.default.createElement(_Text.default, {
143
128
  marginBottom: 2
144
- }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero."), /*#__PURE__*/_react.default.createElement(_Accordion.default, {
129
+ }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero."), /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, {
145
130
  onChange: handleAccordionChange,
146
131
  allowToggle: true
147
132
  }, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
@@ -158,9 +143,15 @@ const TransactionalWithExpandingContent = props => {
158
143
  }, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
159
144
  flex: "1",
160
145
  textAlign: "left"
161
- }, "Accordion 2"), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. Aliquam et urna condimentum, sagittis nisl hendrerit, elementum velit. Nullam quis nisl dictum, suscipit ligula nec, elementum libero. Nullam eu lorem convallis, dictum nisl in, condimentum dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva")))))));
146
+ }, "Accordion 2"), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. Aliquam et urna condimentum, sagittis nisl hendrerit, elementum velit. Nullam quis nisl dictum, suscipit ligula nec, elementum libero. Nullam eu lorem convallis, dictum nisl in, condimentum dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva")))))), /*#__PURE__*/_react.default.createElement(_index.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
147
+ onClick: () => setOpen(false),
148
+ variant: "secondary",
149
+ marginRight: 4
150
+ }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
151
+ variant: "primary"
152
+ }, "Submit"))));
162
153
  };
163
154
  exports.TransactionalWithExpandingContent = TransactionalWithExpandingContent;
164
155
  TransactionalWithExpandingContent.argTypes = {
165
- ...(0, _disableArgs.default)(['children', 'header'])
156
+ ...(0, _disableArgs.default)(['children', 'header', 'footer'])
166
157
  };
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _react2 = require("@chakra-ui/react");
10
+ const ModalHeader = _ref => {
11
+ let {
12
+ children,
13
+ ...props
14
+ } = _ref;
15
+ return children ? /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, props, children) : /*#__PURE__*/_react.default.createElement(Box, props);
16
+ };
17
+ var _default = ModalHeader;
18
+ exports.default = _default;
@@ -10,4 +10,24 @@ Object.defineProperty(exports, "Modal", {
10
10
  return _Modal.default;
11
11
  }
12
12
  });
13
- var _Modal = _interopRequireDefault(require("./Modal"));
13
+ Object.defineProperty(exports, "ModalBody", {
14
+ enumerable: true,
15
+ get: function () {
16
+ return _react.ModalBody;
17
+ }
18
+ });
19
+ Object.defineProperty(exports, "ModalFooter", {
20
+ enumerable: true,
21
+ get: function () {
22
+ return _react.ModalFooter;
23
+ }
24
+ });
25
+ Object.defineProperty(exports, "ModalHeader", {
26
+ enumerable: true,
27
+ get: function () {
28
+ return _ModalHeader.default;
29
+ }
30
+ });
31
+ var _react = require("@chakra-ui/react");
32
+ var _Modal = _interopRequireDefault(require("./Modal"));
33
+ var _ModalHeader = _interopRequireDefault(require("./ModalHeader"));
@@ -4,22 +4,16 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _default = _ref => {
8
- let {
9
- footer
10
- } = _ref;
11
- return {
12
- borderRadius: 'md',
13
- borderBottomRadius: {
14
- base: '0',
15
- tablet: 'md'
16
- },
17
- background: 'white',
18
- color: 'inherit',
19
- marginY: 0,
20
- zIndex: 'layer8',
21
- boxShadow: 'lg',
22
- paddingBottom: footer ? 0 : 4
23
- };
7
+ var _default = {
8
+ borderRadius: 'md',
9
+ borderBottomRadius: {
10
+ base: '0',
11
+ tablet: 'md'
12
+ },
13
+ background: 'white',
14
+ color: 'inherit',
15
+ marginY: 0,
16
+ zIndex: 'layer8',
17
+ boxShadow: 'lg'
24
18
  };
25
19
  exports.default = _default;
@@ -15,9 +15,9 @@ var _closeButton = _interopRequireDefault(require("./closeButton"));
15
15
  var _body = _interopRequireDefault(require("./body"));
16
16
  var _footer = _interopRequireDefault(require("./footer"));
17
17
  const baseStyle = props => ({
18
+ dialog: _dialog.default,
18
19
  overlay: _overlay.default,
19
20
  dialogContainer: _dialogContainer.default,
20
- dialog: (0, _dialog.default)(props),
21
21
  header: (0, _header.default)(props),
22
22
  closeButton: (0, _closeButton.default)(props),
23
23
  body: (0, _body.default)(props),
@@ -20,7 +20,10 @@ const closeButtonStyles = _ref => {
20
20
  padding: 4,
21
21
  borderTopRightRadius: 4,
22
22
  _hover: pseudoStyles(variant),
23
- _focus: pseudoStyles(variant)
23
+ _focus: {
24
+ ...pseudoStyles(variant),
25
+ boxShadow: 'outline'
26
+ }
24
27
  };
25
28
  };
26
29
  var _default = closeButtonStyles;
@@ -20,7 +20,10 @@ const popoverContentStyles = _ref => {
20
20
  borderWidth: '1px',
21
21
  borderStyle: 'solid',
22
22
  '--popper-arrow-shadow-color': t => t.colors.gray['100'],
23
- zIndex: 'layer10'
23
+ zIndex: 'layer10',
24
+ _focusVisible: {
25
+ outline: '3px solid rgba(91, 170, 250, 0.7)'
26
+ }
24
27
  };
25
28
  };
26
29
  var _default = popoverContentStyles;
@@ -14,25 +14,35 @@ const baseStyle = {
14
14
  borderWidth: '1px',
15
15
  borderColor: 'gray.dark',
16
16
  backgroundColor: 'white',
17
+ color: 'white',
17
18
  minWidth: 5,
18
19
  minHeight: 5,
19
20
  marginTop: 1,
21
+ transition: 'all 150ms ease',
22
+ _before: {
23
+ content: '""',
24
+ display: 'inline-block',
25
+ position: 'relative',
26
+ width: '0px',
27
+ height: '0px',
28
+ opacity: '0',
29
+ borderRadius: '50%',
30
+ background: 'currentcolor',
31
+ transition: 'all 150ms ease-in',
32
+ filter: `drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25))`
33
+ },
20
34
  _checked: {
21
- borderWidth: 0,
35
+ borderColor: 'primary.default',
22
36
  color: 'white',
23
37
  backgroundColor: 'primary.default',
24
38
  _before: {
25
- content: '""',
26
- display: 'inline-block',
27
- position: 'relative',
28
39
  width: 2,
29
40
  height: 2,
30
- borderRadius: '50%',
31
- background: 'currentcolor'
41
+ opacity: '1'
32
42
  }
33
43
  },
34
44
  _focus: {
35
- boxShadow: t => `0 0 1px 2px ${t.colors.primary['300']}`
45
+ boxShadow: 'outline'
36
46
  },
37
47
  _disabled: {
38
48
  borderColor: 'gray.200',
@@ -14,7 +14,15 @@ const overrides = {
14
14
  },
15
15
  baseStyle: props => (0, _merge.default)(_theme.default.components.Switch.baseStyle(props), {
16
16
  track: {
17
- bg: 'gray.medium'
17
+ bg: 'gray.medium',
18
+ overflow: 'clip'
19
+ },
20
+ thumb: {
21
+ transition: 'all 150ms ease',
22
+ boxShadow: 'base',
23
+ _hover: {
24
+ boxShadow: 'md'
25
+ }
18
26
  }
19
27
  })
20
28
  };
@@ -34,7 +34,6 @@ var _exportNames = {
34
34
  PopoverAnchor: true,
35
35
  PopoverTrigger: true,
36
36
  PopoverContent: true,
37
- Modal: true,
38
37
  Radio: true,
39
38
  RadioGroup: true,
40
39
  AutoSuggestSelect: true,
@@ -249,12 +248,6 @@ Object.defineProperty(exports, "Loader", {
249
248
  return _Loader.default;
250
249
  }
251
250
  });
252
- Object.defineProperty(exports, "Modal", {
253
- enumerable: true,
254
- get: function () {
255
- return _Modal.Modal;
256
- }
257
- });
258
251
  Object.defineProperty(exports, "Popover", {
259
252
  enumerable: true,
260
253
  get: function () {
@@ -459,6 +452,18 @@ Object.keys(_Table).forEach(function (key) {
459
452
  }
460
453
  });
461
454
  });
455
+ var _Modal = require("./Modal");
456
+ Object.keys(_Modal).forEach(function (key) {
457
+ if (key === "default" || key === "__esModule") return;
458
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
459
+ if (key in exports && exports[key] === _Modal[key]) return;
460
+ Object.defineProperty(exports, key, {
461
+ enumerable: true,
462
+ get: function () {
463
+ return _Modal[key];
464
+ }
465
+ });
466
+ });
462
467
  var _Button = require("./Button");
463
468
  Object.keys(_Button).forEach(function (key) {
464
469
  if (key === "default" || key === "__esModule") return;
@@ -515,7 +520,6 @@ var _Checkbox = _interopRequireDefault(require("./Checkbox"));
515
520
  var _Input = _interopRequireDefault(require("./Input"));
516
521
  var _Divider = _interopRequireDefault(require("./Divider/Divider"));
517
522
  var _Popover = require("./Popover");
518
- var _Modal = require("./Modal");
519
523
  var _Radio = require("./Radio");
520
524
  var _AutoSuggestSelect = require("./AutoSuggestSelect");
521
525
  var _Badge = _interopRequireDefault(require("./Badge/Badge"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spothero/ui",
3
- "version": "17.2.3",
3
+ "version": "18.0.0",
4
4
  "description": "SpotHero's React component UI library.",
5
5
  "main": "./dist/components/index.js",
6
6
  "exports": "./dist/components/index.js",
@@ -140,4 +140,4 @@
140
140
  "react-redux": ">=7.0.0",
141
141
  "redux": ">=4.0.0"
142
142
  }
143
- }
143
+ }