@spothero/ui 21.6.4-beta.0 → 22.0.0-beta.3
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.
- package/dist/components/Accordion/Accordion.stories.js +7 -8
- package/dist/components/Accordion/AccordionActionButton.js +4 -5
- package/dist/components/Alert/Alert.js +22 -23
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +35 -44
- package/dist/components/Button/Button.js +16 -22
- package/dist/components/Button/stories/button.js +5 -6
- package/dist/components/Button/stories/overview.js +23 -27
- package/dist/components/Checkbox/Checkbox.js +10 -11
- package/dist/components/CreatableSelect/CreatableSelect.js +13 -14
- package/dist/components/Divider/Divider.js +5 -6
- package/dist/components/Drawer/Drawer.js +5 -6
- package/dist/components/Drawer/styles/index.js +4 -5
- package/dist/components/FormControl/FormControl.js +42 -45
- package/dist/components/Grid/Grid.js +6 -9
- package/dist/components/Grid/Grid.stories.js +40 -52
- package/dist/components/Icon/Icon.stories.js +1 -1
- package/dist/components/Image/Image.js +19 -21
- package/dist/components/Input/Input.js +11 -12
- package/dist/components/Link/Link.stories.js +26 -29
- package/dist/components/List/List.js +6 -9
- package/dist/components/List/List.stories.js +5 -8
- package/dist/components/Loader/Loader.js +10 -11
- package/dist/components/Modal/styles/body.js +5 -6
- package/dist/components/Modal/styles/closeButton.js +17 -20
- package/dist/components/Modal/styles/dialog.js +15 -18
- package/dist/components/Modal/styles/header.js +10 -13
- package/dist/components/Popover/styles/popover-arrow.js +5 -8
- package/dist/components/Popover/styles/popover-close-button.js +16 -19
- package/dist/components/Popover/styles/popover-content.js +19 -22
- package/dist/components/Progress/Progress.js +4 -5
- package/dist/components/Radio/Radio.js +10 -11
- package/dist/components/Radio/RadioGroup.js +14 -15
- package/dist/components/Select/Select.js +10 -11
- package/dist/components/SelectionCard/SelectionCard.js +13 -14
- package/dist/components/SelectionCard/SelectionCard.stories.js +3 -4
- package/dist/components/Spinner/Spinner.js +5 -6
- package/dist/components/Spinner/Spinner.stories.js +1 -2
- package/dist/components/Switch/Switch.js +9 -10
- package/dist/components/Table/Table.stories.js +7 -8
- package/dist/components/Tabs/Tabs.js +4 -5
- package/dist/components/Tabs/combineSizeWithVariant.js +4 -5
- package/dist/components/Text/Text.js +5 -6
- package/dist/components/Text/combineAsWithVariant.js +4 -5
- package/dist/components/ThemeProvider/ThemeProvider.js +12 -15
- package/dist/components/ThemeProvider/ThemeProvider.stories.js +3 -4
- package/dist/components/index.js +2 -10
- package/dist/theme/global.js +5 -8
- package/dist/theme/index.js +1 -4
- package/dist/utils/Spaces.js +7 -10
- package/package.json +7 -7
- package/dist/components/Textarea/Textarea.js +0 -45
- package/dist/components/Textarea/Textarea.stories.js +0 -59
- package/dist/components/Textarea/index.js +0 -13
- package/dist/components/Textarea/styles/index.js +0 -64
|
@@ -19,14 +19,13 @@ var _default = exports.default = {
|
|
|
19
19
|
removeBaseHtmlClass: true
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
|
-
const AccordionTemplate =
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
} = _ref;
|
|
22
|
+
const AccordionTemplate = ({
|
|
23
|
+
index,
|
|
24
|
+
variant,
|
|
25
|
+
allowToggle,
|
|
26
|
+
accordionText,
|
|
27
|
+
allowMultiple
|
|
28
|
+
}) => {
|
|
30
29
|
const multipleOptions = allowMultiple ? {
|
|
31
30
|
allowMultiple,
|
|
32
31
|
defaultIndex: index
|
|
@@ -8,11 +8,10 @@ var _react = require("@chakra-ui/react");
|
|
|
8
8
|
var _react2 = _interopRequireWildcard(require("react"));
|
|
9
9
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
10
10
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
|
-
const AccordionActionButton = /*#__PURE__*/(0, _react2.forwardRef)((
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = _ref;
|
|
11
|
+
const AccordionActionButton = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
12
|
+
children,
|
|
13
|
+
onClick
|
|
14
|
+
}, ref) => {
|
|
16
15
|
const handleOnClick = e => {
|
|
17
16
|
if (onClick) {
|
|
18
17
|
e.preventDefault();
|
|
@@ -10,35 +10,34 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
11
11
|
var _react2 = require("@chakra-ui/react");
|
|
12
12
|
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
13
|
+
var _x = _interopRequireDefault(require("@spothero/icons/x"));
|
|
14
|
+
var _infoCircleFilled = _interopRequireDefault(require("@spothero/icons/info-circle-filled"));
|
|
15
|
+
var _exclamationCircleFilled = _interopRequireDefault(require("@spothero/icons/exclamation-circle-filled"));
|
|
16
|
+
var _checkmarkCircleFilled = _interopRequireDefault(require("@spothero/icons/checkmark-circle-filled"));
|
|
17
17
|
var _Button = _interopRequireDefault(require("../Button/Button"));
|
|
18
18
|
var _Icon = _interopRequireDefault(require("../Icon/Icon"));
|
|
19
19
|
var _notifications = require("../../theme/base/notifications");
|
|
20
20
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
21
21
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
22
22
|
const statusIconMapping = {
|
|
23
|
-
[_notifications.NOTIFICATION_STATUSES.WARNING]:
|
|
24
|
-
[_notifications.NOTIFICATION_STATUSES.SUCCESS]:
|
|
25
|
-
[_notifications.NOTIFICATION_STATUSES.ERROR]:
|
|
26
|
-
[_notifications.NOTIFICATION_STATUSES.NEUTRAL]:
|
|
23
|
+
[_notifications.NOTIFICATION_STATUSES.WARNING]: _exclamationCircleFilled.default,
|
|
24
|
+
[_notifications.NOTIFICATION_STATUSES.SUCCESS]: _checkmarkCircleFilled.default,
|
|
25
|
+
[_notifications.NOTIFICATION_STATUSES.ERROR]: _exclamationCircleFilled.default,
|
|
26
|
+
[_notifications.NOTIFICATION_STATUSES.NEUTRAL]: _infoCircleFilled.default
|
|
27
27
|
};
|
|
28
|
-
const Alert = /*#__PURE__*/(0, _react.forwardRef)((
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
} = _ref;
|
|
28
|
+
const Alert = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
29
|
+
status,
|
|
30
|
+
title,
|
|
31
|
+
buttonProps,
|
|
32
|
+
buttonText,
|
|
33
|
+
buttonOnBottom,
|
|
34
|
+
showDismiss,
|
|
35
|
+
onDismissClick,
|
|
36
|
+
showIcon,
|
|
37
|
+
description,
|
|
38
|
+
icon,
|
|
39
|
+
...props
|
|
40
|
+
}, ref) => {
|
|
42
41
|
const IconVariant = icon || statusIconMapping[status];
|
|
43
42
|
// the issue with storybook breaking with hooks is still a problem, but once that's resolved this should be memoized
|
|
44
43
|
const style = (0, _merge.default)({
|
|
@@ -65,7 +64,7 @@ const Alert = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
65
64
|
}), /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
66
65
|
width: 3,
|
|
67
66
|
height: "auto",
|
|
68
|
-
as:
|
|
67
|
+
as: _x.default
|
|
69
68
|
})) : null));
|
|
70
69
|
});
|
|
71
70
|
Alert.defaultProps = {
|
|
@@ -10,24 +10,22 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
|
|
11
11
|
var _async = _interopRequireDefault(require("react-select/async"));
|
|
12
12
|
var _react2 = require("@chakra-ui/react");
|
|
13
|
-
var
|
|
13
|
+
var _xCircle = _interopRequireDefault(require("@spothero/icons/x-circle"));
|
|
14
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
|
-
const AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)((
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
defaultValue = null
|
|
30
|
-
} = _ref;
|
|
16
|
+
const AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
17
|
+
id,
|
|
18
|
+
label,
|
|
19
|
+
helperText,
|
|
20
|
+
errorMessage,
|
|
21
|
+
isInvalid,
|
|
22
|
+
isDisabled,
|
|
23
|
+
isRequired,
|
|
24
|
+
getOptions,
|
|
25
|
+
onChange,
|
|
26
|
+
iconSrc,
|
|
27
|
+
placeholder
|
|
28
|
+
}, ref) => {
|
|
31
29
|
const {
|
|
32
30
|
colors,
|
|
33
31
|
fontSizes,
|
|
@@ -36,23 +34,20 @@ const AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
36
34
|
const handleChange = selectedOption => {
|
|
37
35
|
onChange(selectedOption);
|
|
38
36
|
};
|
|
39
|
-
const icon =
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
};
|
|
37
|
+
const icon = (color = 'transparent') => ({
|
|
38
|
+
alignItems: 'center',
|
|
39
|
+
display: 'flex',
|
|
40
|
+
':before': {
|
|
41
|
+
backgroundColor: color,
|
|
42
|
+
content: '" "',
|
|
43
|
+
display: 'block',
|
|
44
|
+
marginRight: sizes['3'],
|
|
45
|
+
height: sizes['4'],
|
|
46
|
+
width: sizes['5'],
|
|
47
|
+
mask: `url(${iconSrc}) no-repeat 50% 50%`,
|
|
48
|
+
maskSize: 'contain'
|
|
49
|
+
}
|
|
50
|
+
});
|
|
56
51
|
const baseText = {
|
|
57
52
|
fontSize: fontSizes.base,
|
|
58
53
|
color: colors.black
|
|
@@ -116,16 +111,13 @@ const AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
116
111
|
};
|
|
117
112
|
|
|
118
113
|
/** React Select allows you to override the clear indicator with your own custom component: https://react-select.com/components */
|
|
119
|
-
const ClearIndicator =
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
ref: innerRef
|
|
127
|
-
}, innerProps), /*#__PURE__*/_react.default.createElement(_timesCircle.default, null));
|
|
128
|
-
};
|
|
114
|
+
const ClearIndicator = ({
|
|
115
|
+
innerRef,
|
|
116
|
+
innerProps
|
|
117
|
+
}) => /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
118
|
+
style: clearIndicatorStyles,
|
|
119
|
+
ref: innerRef
|
|
120
|
+
}, innerProps), /*#__PURE__*/_react.default.createElement(_xCircle.default, null));
|
|
129
121
|
return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
|
|
130
122
|
errorMessage: errorMessage,
|
|
131
123
|
isRequired: isRequired,
|
|
@@ -147,7 +139,6 @@ const AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
147
139
|
isDisabled: isDisabled,
|
|
148
140
|
id: id,
|
|
149
141
|
placeholder: placeholder,
|
|
150
|
-
defaultValue: defaultValue,
|
|
151
142
|
styles: customStyles,
|
|
152
143
|
ref: ref
|
|
153
144
|
}));
|
|
@@ -11,29 +11,23 @@ var _react2 = require("@chakra-ui/react");
|
|
|
11
11
|
var _buttonProps = _interopRequireDefault(require("./button-props"));
|
|
12
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
-
const anchorProps =
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
rel: 'noopener noreferrer'
|
|
22
|
-
})
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
26
|
-
let {
|
|
27
|
-
asAnchor,
|
|
28
|
-
isExternal,
|
|
29
|
-
...props
|
|
30
|
-
} = _ref;
|
|
31
|
-
return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
|
|
32
|
-
iconSpacing: 2
|
|
33
|
-
}, props, (asAnchor || props.as === 'a') && anchorProps(isExternal), {
|
|
34
|
-
ref: ref
|
|
35
|
-
}));
|
|
14
|
+
const anchorProps = (isExternal = false) => ({
|
|
15
|
+
as: 'a',
|
|
16
|
+
type: null,
|
|
17
|
+
...(isExternal && {
|
|
18
|
+
target: '_blank',
|
|
19
|
+
rel: 'noopener noreferrer'
|
|
20
|
+
})
|
|
36
21
|
});
|
|
22
|
+
const Button = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
23
|
+
asAnchor,
|
|
24
|
+
isExternal,
|
|
25
|
+
...props
|
|
26
|
+
}, ref) => /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
|
|
27
|
+
iconSpacing: 2
|
|
28
|
+
}, props, (asAnchor || props.as === 'a') && anchorProps(isExternal), {
|
|
29
|
+
ref: ref
|
|
30
|
+
})));
|
|
37
31
|
Button.propTypes = _buttonProps.default;
|
|
38
32
|
Button.defaultProps = {
|
|
39
33
|
variant: 'primary',
|
|
@@ -9,13 +9,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
|
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _capitalize = _interopRequireDefault(require("lodash/capitalize"));
|
|
11
11
|
var _react2 = require("@chakra-ui/react");
|
|
12
|
-
var
|
|
12
|
+
var _checkmark = _interopRequireDefault(require("@spothero/icons/checkmark"));
|
|
13
13
|
var _Button = _interopRequireDefault(require("../Button"));
|
|
14
14
|
var _buttonProps = _interopRequireDefault(require("../button-props"));
|
|
15
|
-
const ButtonTemplate = (props,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
} = _ref;
|
|
15
|
+
const ButtonTemplate = (props, {
|
|
16
|
+
hasDarkBackground
|
|
17
|
+
}) => {
|
|
19
18
|
const variant = `${props.variant}${hasDarkBackground ? 'OnDark' : ''}`;
|
|
20
19
|
return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
|
|
21
20
|
mb: 4
|
|
@@ -27,7 +26,7 @@ const ButtonTemplate = (props, _ref) => {
|
|
|
27
26
|
mr: 4,
|
|
28
27
|
mb: 4
|
|
29
28
|
}), props.variant, " Variant"), /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
|
|
30
|
-
leftIcon: /*#__PURE__*/_react.default.createElement(
|
|
29
|
+
leftIcon: /*#__PURE__*/_react.default.createElement(_checkmark.default, {
|
|
31
30
|
width: "1rem"
|
|
32
31
|
})
|
|
33
32
|
}, props, {
|
|
@@ -9,15 +9,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
|
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _capitalize = _interopRequireDefault(require("lodash/capitalize"));
|
|
11
11
|
var _react2 = require("@chakra-ui/react");
|
|
12
|
-
var
|
|
12
|
+
var _checkmark = _interopRequireDefault(require("@spothero/icons/checkmark"));
|
|
13
13
|
var _Button = _interopRequireDefault(require("../Button"));
|
|
14
14
|
var _Button2 = require("../Button.styles");
|
|
15
15
|
var _Text = _interopRequireDefault(require("../../Text/Text"));
|
|
16
|
-
const variationsArray =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
} = _ref;
|
|
16
|
+
const variationsArray = ({
|
|
17
|
+
baseVariantName,
|
|
18
|
+
hasDarkBackground
|
|
19
|
+
}) => {
|
|
21
20
|
const variant = `${baseVariantName}${hasDarkBackground ? 'OnDark' : ''}`;
|
|
22
21
|
return [{
|
|
23
22
|
variant,
|
|
@@ -34,7 +33,7 @@ const variationsArray = _ref => {
|
|
|
34
33
|
}, {
|
|
35
34
|
variant,
|
|
36
35
|
children: `leftIcon`,
|
|
37
|
-
leftIcon: /*#__PURE__*/_react.default.createElement(
|
|
36
|
+
leftIcon: /*#__PURE__*/_react.default.createElement(_checkmark.default, {
|
|
38
37
|
width: "1rem"
|
|
39
38
|
})
|
|
40
39
|
}, {
|
|
@@ -44,24 +43,21 @@ const variationsArray = _ref => {
|
|
|
44
43
|
href: '#'
|
|
45
44
|
}];
|
|
46
45
|
};
|
|
47
|
-
const OverviewTemplate = (args,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
mb: 4
|
|
65
|
-
})))))));
|
|
66
|
-
};
|
|
46
|
+
const OverviewTemplate = (args, {
|
|
47
|
+
hasDarkBackground
|
|
48
|
+
}) => /*#__PURE__*/_react.default.createElement(_react2.Box, null, Object.keys(_Button2.variants).filter(name => !/ondark/i.test(name)).map((baseVariantName, index) => /*#__PURE__*/_react.default.createElement(_react2.Box, {
|
|
49
|
+
key: index,
|
|
50
|
+
mb: 4
|
|
51
|
+
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
52
|
+
mb: "2",
|
|
53
|
+
color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
|
|
54
|
+
}, (0, _capitalize.default)(baseVariantName), ":"), /*#__PURE__*/_react.default.createElement(_react2.Box, null, variationsArray({
|
|
55
|
+
baseVariantName,
|
|
56
|
+
hasDarkBackground
|
|
57
|
+
}).map((props, key) => /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
|
|
58
|
+
key: key
|
|
59
|
+
}, props, {
|
|
60
|
+
mr: 4,
|
|
61
|
+
mb: 4
|
|
62
|
+
})))))));
|
|
67
63
|
var _default = exports.default = OverviewTemplate;
|
|
@@ -10,17 +10,16 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _react2 = require("@chakra-ui/react");
|
|
11
11
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
-
const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} = _ref;
|
|
13
|
+
const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
14
|
+
defaultChecked,
|
|
15
|
+
isChecked,
|
|
16
|
+
isDisabled,
|
|
17
|
+
value,
|
|
18
|
+
helperText,
|
|
19
|
+
children,
|
|
20
|
+
size = 'md',
|
|
21
|
+
...props
|
|
22
|
+
}, ref) => {
|
|
24
23
|
const helperTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
|
|
25
24
|
return /*#__PURE__*/_react.default.createElement(_react2.Checkbox, (0, _extends2.default)({
|
|
26
25
|
ref: ref,
|
|
@@ -27,20 +27,19 @@ const DropdownIndicator = props => {
|
|
|
27
27
|
};
|
|
28
28
|
|
|
29
29
|
// Exporting without forwardRef for storybook to work
|
|
30
|
-
const CreatableSelectNode =
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
} = _ref;
|
|
30
|
+
const CreatableSelectNode = ({
|
|
31
|
+
id,
|
|
32
|
+
label,
|
|
33
|
+
isInvalid = false,
|
|
34
|
+
isLoading = false,
|
|
35
|
+
isRequired,
|
|
36
|
+
options = [],
|
|
37
|
+
placeholder = '',
|
|
38
|
+
errorMessage,
|
|
39
|
+
helperText,
|
|
40
|
+
innerRef,
|
|
41
|
+
...props
|
|
42
|
+
}) => {
|
|
44
43
|
const {
|
|
45
44
|
colors,
|
|
46
45
|
fontSizes
|
|
@@ -11,12 +11,11 @@ var _react2 = require("@chakra-ui/react");
|
|
|
11
11
|
var _Divider = require("./Divider.styles");
|
|
12
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
-
const Divider = /*#__PURE__*/(0, _react.forwardRef)((
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} = _ref;
|
|
14
|
+
const Divider = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
15
|
+
variant,
|
|
16
|
+
colorScheme: borderColor,
|
|
17
|
+
...props
|
|
18
|
+
}, ref) => {
|
|
20
19
|
return /*#__PURE__*/_react.default.createElement(_react2.Divider, (0, _extends2.default)({}, _Divider.colorScheme[borderColor], {
|
|
21
20
|
variant: variant
|
|
22
21
|
}, props, {
|
|
@@ -10,12 +10,11 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _react2 = require("@chakra-ui/react");
|
|
11
11
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
-
const Drawer = /*#__PURE__*/(0, _react.forwardRef)((
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
} = _ref;
|
|
13
|
+
const Drawer = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
14
|
+
header,
|
|
15
|
+
children,
|
|
16
|
+
...props
|
|
17
|
+
}, ref) => {
|
|
19
18
|
return /*#__PURE__*/_react.default.createElement(_react2.Drawer, (0, _extends2.default)({
|
|
20
19
|
placement: "right"
|
|
21
20
|
}, props, {
|
|
@@ -7,11 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
9
9
|
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
10
|
-
const body =
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
} = _ref;
|
|
10
|
+
const body = ({
|
|
11
|
+
hasFooter,
|
|
12
|
+
...props
|
|
13
|
+
}) => {
|
|
15
14
|
return {
|
|
16
15
|
overflowY: 'auto',
|
|
17
16
|
padding: 6,
|
|
@@ -11,51 +11,48 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
11
11
|
var _react2 = require("@chakra-ui/react");
|
|
12
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
-
const FormControl = /*#__PURE__*/(0, _react.forwardRef)((
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
fontSize: "xs"
|
|
57
|
-
}, errorMessage));
|
|
58
|
-
});
|
|
14
|
+
const FormControl = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
15
|
+
children,
|
|
16
|
+
label,
|
|
17
|
+
inputId,
|
|
18
|
+
helperText,
|
|
19
|
+
errorMessage,
|
|
20
|
+
isFieldset,
|
|
21
|
+
isOptional,
|
|
22
|
+
customRequiredText,
|
|
23
|
+
...props
|
|
24
|
+
}, ref) => /*#__PURE__*/_react.default.createElement(_react2.FormControl, (0, _extends2.default)({}, props, {
|
|
25
|
+
ref: ref,
|
|
26
|
+
as: isFieldset ? 'fieldset' : 'div',
|
|
27
|
+
borderWidth: "0"
|
|
28
|
+
}), label && /*#__PURE__*/_react.default.createElement(_react2.FormLabel, {
|
|
29
|
+
color: "gray.600",
|
|
30
|
+
fontWeight: "semibold",
|
|
31
|
+
marginBottom: helperText ? 0 : 1,
|
|
32
|
+
fontSize: "sm",
|
|
33
|
+
htmlFor: inputId,
|
|
34
|
+
as: isFieldset ? 'legend' : 'label',
|
|
35
|
+
requiredIndicator: props?.isRequired && customRequiredText ? /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
36
|
+
marginLeft: 1,
|
|
37
|
+
as: "span",
|
|
38
|
+
variant: "caption",
|
|
39
|
+
color: "text.secondary.light"
|
|
40
|
+
}, customRequiredText) : null,
|
|
41
|
+
optionalIndicator: isOptional && !props?.isRequired ? /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
42
|
+
marginLeft: 1,
|
|
43
|
+
as: "span",
|
|
44
|
+
variant: "caption",
|
|
45
|
+
color: "text.secondary.light"
|
|
46
|
+
}, "Optional") : null
|
|
47
|
+
}, label), helperText && /*#__PURE__*/_react.default.createElement(_react2.FormHelperText, {
|
|
48
|
+
color: "gray.600",
|
|
49
|
+
marginBottom: 1,
|
|
50
|
+
fontSize: "xs"
|
|
51
|
+
}, helperText), children, /*#__PURE__*/_react.default.createElement(_react2.FormErrorMessage, {
|
|
52
|
+
color: "error",
|
|
53
|
+
mt: 1,
|
|
54
|
+
fontSize: "xs"
|
|
55
|
+
}, errorMessage)));
|
|
59
56
|
FormControl.propTypes = {
|
|
60
57
|
inputId: _propTypes.default.string.isRequired,
|
|
61
58
|
label: _propTypes.default.string,
|
|
@@ -12,15 +12,12 @@ var _react2 = require("@chakra-ui/react");
|
|
|
12
12
|
var _Grid = require("./Grid.styles");
|
|
13
13
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
14
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
-
const Grid = /*#__PURE__*/(0, _react.forwardRef)((
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
ref: ref
|
|
22
|
-
}));
|
|
23
|
-
});
|
|
15
|
+
const Grid = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
16
|
+
isCompact,
|
|
17
|
+
...props
|
|
18
|
+
}, ref) => /*#__PURE__*/_react.default.createElement(_react2.Grid, (0, _extends2.default)({}, _Grid.baseStyles, isCompact && _Grid.compactStyles, props, {
|
|
19
|
+
ref: ref
|
|
20
|
+
})));
|
|
24
21
|
Grid.propTypes = {
|
|
25
22
|
/** This will reduce the grid gap by half */
|
|
26
23
|
isCompact: _propTypes.default.bool
|