@spothero/ui 21.6.3 → 22.0.0-beta.1
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 -42
- 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/Popover.stories.js +1 -11
- package/dist/components/Popover/PopoverContent.js +3 -6
- package/dist/components/Popover/index.js +1 -8
- 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/Tabs.stories.js +0 -6
- package/dist/components/Tabs/combineSizeWithVariant.js +4 -5
- package/dist/components/Tabs/styles/index.js +0 -28
- 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 +0 -78
- package/dist/components/styles.js +1 -8
- 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/Menu/Menu.js +0 -16
- package/dist/components/Menu/Menu.stories.js +0 -159
- package/dist/components/Menu/Menu.styles.js +0 -173
- package/dist/components/Menu/index.js +0 -56
|
@@ -4,26 +4,23 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
const popoverContentStyles =
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
};
|
|
7
|
+
const popoverContentStyles = ({
|
|
8
|
+
variant
|
|
9
|
+
}) => ({
|
|
10
|
+
padding: 4,
|
|
11
|
+
marginBottom: 0,
|
|
12
|
+
maxWidth: '20rem',
|
|
13
|
+
borderRadius: 'base',
|
|
14
|
+
background: variant === 'dark' ? 'secondary.default' : 'white',
|
|
15
|
+
boxShadow: '2px 2px 4px 0 rgba(0,45,91,0.1)',
|
|
16
|
+
color: variant === 'dark' ? 'white' : 'black',
|
|
17
|
+
borderColor: 'gray.100',
|
|
18
|
+
borderWidth: '1px',
|
|
19
|
+
borderStyle: 'solid',
|
|
20
|
+
'--popper-arrow-shadow-color': t => t.colors.gray['100'],
|
|
21
|
+
zIndex: 'layer10',
|
|
22
|
+
_focusVisible: {
|
|
23
|
+
outline: '3px solid rgba(91, 170, 250, 0.7)'
|
|
24
|
+
}
|
|
25
|
+
});
|
|
29
26
|
var _default = exports.default = popoverContentStyles;
|
|
@@ -10,11 +10,10 @@ 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 Progress = /*#__PURE__*/(0, _react.forwardRef)((
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} = _ref;
|
|
13
|
+
const Progress = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
14
|
+
isRounded,
|
|
15
|
+
...props
|
|
16
|
+
}, ref) => {
|
|
18
17
|
// Passing `isRounded` in as a prop throws a 'React does not recognize the X prop on a DOM element' error. Passing `isRounded` through `sx` instead, allows for the prop to be utilized by the theme without being set on the DOM element, avoiding the error.
|
|
19
18
|
return /*#__PURE__*/_react.default.createElement(_react2.Progress, (0, _extends2.default)({
|
|
20
19
|
ref: ref,
|
|
@@ -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 Radio = /*#__PURE__*/(0, _react.forwardRef)((
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} = _ref;
|
|
13
|
+
const Radio = /*#__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.Radio, (0, _extends2.default)({
|
|
26
25
|
ref: ref,
|
|
@@ -11,21 +11,20 @@ var _react2 = require("@chakra-ui/react");
|
|
|
11
11
|
var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
|
|
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 RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
} = _ref;
|
|
14
|
+
const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
15
|
+
label,
|
|
16
|
+
errorMessage,
|
|
17
|
+
defaultValue,
|
|
18
|
+
isDisabled,
|
|
19
|
+
isInvalid,
|
|
20
|
+
isRequired,
|
|
21
|
+
name,
|
|
22
|
+
onChange,
|
|
23
|
+
value,
|
|
24
|
+
children,
|
|
25
|
+
direction,
|
|
26
|
+
...props
|
|
27
|
+
}, ref) => {
|
|
29
28
|
return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
|
|
30
29
|
isInvalid: isInvalid,
|
|
31
30
|
isDisabled: isDisabled,
|
|
@@ -14,17 +14,16 @@ var _Icon = _interopRequireDefault(require("../Icon/Icon"));
|
|
|
14
14
|
var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
|
|
15
15
|
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); }
|
|
16
16
|
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; }
|
|
17
|
-
const Select = /*#__PURE__*/(0, _react.forwardRef)((
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
} = _ref;
|
|
17
|
+
const Select = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
18
|
+
label,
|
|
19
|
+
helperText,
|
|
20
|
+
errorMessage,
|
|
21
|
+
isInvalid,
|
|
22
|
+
isDisabled,
|
|
23
|
+
isRequired,
|
|
24
|
+
isOptional,
|
|
25
|
+
...props
|
|
26
|
+
}, ref) => {
|
|
28
27
|
const classes = (0, _classnames.default)({
|
|
29
28
|
'FormElement-contains-error': isInvalid
|
|
30
29
|
});
|
|
@@ -12,20 +12,19 @@ var _Radio = require("../Radio");
|
|
|
12
12
|
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
|
|
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 SelectionCard = /*#__PURE__*/(0, _react.forwardRef)((
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
} = _ref;
|
|
15
|
+
const SelectionCard = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
16
|
+
isChecked,
|
|
17
|
+
isDisabled,
|
|
18
|
+
value,
|
|
19
|
+
helperText,
|
|
20
|
+
expandableChildren,
|
|
21
|
+
defaultChecked,
|
|
22
|
+
isRadio,
|
|
23
|
+
label,
|
|
24
|
+
isExpandable,
|
|
25
|
+
size = 'md',
|
|
26
|
+
...props
|
|
27
|
+
}, ref) => {
|
|
29
28
|
const Component = isRadio ? _Radio.Radio : _Checkbox.default;
|
|
30
29
|
const expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
|
|
31
30
|
const hasExpandableContent = isExpandable && isChecked && expandableChildren;
|
|
@@ -16,10 +16,9 @@ var _default = exports.default = {
|
|
|
16
16
|
removeBaseHtmlClass: true
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
const SelectionCard =
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
} = _ref;
|
|
19
|
+
const SelectionCard = ({
|
|
20
|
+
...props
|
|
21
|
+
}) => {
|
|
23
22
|
return /*#__PURE__*/_react.default.createElement(_SelectionCard.default, (0, _extends2.default)({
|
|
24
23
|
value: "1"
|
|
25
24
|
}, props));
|
|
@@ -11,12 +11,11 @@ var _react2 = require("@chakra-ui/react");
|
|
|
11
11
|
var _Spinner = require("./Spinner.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 Spinner = /*#__PURE__*/(0, _react.forwardRef)((
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} = _ref;
|
|
14
|
+
const Spinner = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
15
|
+
size,
|
|
16
|
+
thickness,
|
|
17
|
+
...props
|
|
18
|
+
}, ref) => {
|
|
20
19
|
const thicknessString = thickness ? `${thickness}px` : _Spinner.thicknesses[size] ? `${_Spinner.thicknesses[size]}px` : '2px';
|
|
21
20
|
return /*#__PURE__*/_react.default.createElement(_react2.Spinner, (0, _extends2.default)({
|
|
22
21
|
ref: ref,
|
|
@@ -19,8 +19,7 @@ var _default = exports.default = {
|
|
|
19
19
|
importBy: 'Spinner'
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
|
-
const allColors = Object.entries(_colors.default).reduce((acc,
|
|
23
|
-
let [colorName, color] = _ref;
|
|
22
|
+
const allColors = Object.entries(_colors.default).reduce((acc, [colorName, color]) => {
|
|
24
23
|
if (typeof color === 'string') {
|
|
25
24
|
acc.push(colorName);
|
|
26
25
|
} else {
|
|
@@ -12,16 +12,15 @@ var _react2 = require("@chakra-ui/react");
|
|
|
12
12
|
var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
|
|
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 Switch = /*#__PURE__*/(0, _react.forwardRef)((
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
} = _ref;
|
|
15
|
+
const Switch = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
16
|
+
label,
|
|
17
|
+
helperText,
|
|
18
|
+
errorMessage,
|
|
19
|
+
isInvalid,
|
|
20
|
+
isDisabled,
|
|
21
|
+
isRequired,
|
|
22
|
+
...props
|
|
23
|
+
}, ref) => {
|
|
25
24
|
const classes = (0, _classnames.default)({
|
|
26
25
|
'FormElement-contains-error': isInvalid
|
|
27
26
|
});
|
|
@@ -43,14 +43,13 @@ var _default = exports.default = {
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
|
-
const TableTemplate =
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
} = _ref;
|
|
46
|
+
const TableTemplate = ({
|
|
47
|
+
numberOfColumns,
|
|
48
|
+
numberOfRows,
|
|
49
|
+
tableData,
|
|
50
|
+
tableHeading,
|
|
51
|
+
variant
|
|
52
|
+
}) => {
|
|
54
53
|
return /*#__PURE__*/_react.default.createElement(_Table.default, {
|
|
55
54
|
variant: variant
|
|
56
55
|
}, /*#__PURE__*/_react.default.createElement(_index.Thead, null, /*#__PURE__*/_react.default.createElement(_index.Tr, null, Array(numberOfColumns).fill(tableHeading).map((heading, index) => /*#__PURE__*/_react.default.createElement(_index.Th, {
|
|
@@ -17,11 +17,10 @@ const sizeMapping = {
|
|
|
17
17
|
[SIZE_BODY]: 'md',
|
|
18
18
|
[SIZE_HEADING]: 'lg'
|
|
19
19
|
};
|
|
20
|
-
const Tabs = (0, _react2.forwardRef)((
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
} = _ref;
|
|
20
|
+
const Tabs = (0, _react2.forwardRef)(({
|
|
21
|
+
size,
|
|
22
|
+
...props
|
|
23
|
+
}, ref) => {
|
|
25
24
|
return /*#__PURE__*/_react.default.createElement(_react2.Tabs, (0, _extends2.default)({
|
|
26
25
|
size: sizeMapping[size]
|
|
27
26
|
}, props, (0, _combineSizeWithVariant.default)({
|
|
@@ -20,11 +20,10 @@ var _Tabs = require("./Tabs");
|
|
|
20
20
|
* @returns {Object} An object containing the merged styleProps from the `variant` and the `size` props
|
|
21
21
|
*/
|
|
22
22
|
|
|
23
|
-
const combineSizeWithVariant =
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
} = _ref;
|
|
23
|
+
const combineSizeWithVariant = ({
|
|
24
|
+
size,
|
|
25
|
+
variant = 'line'
|
|
26
|
+
}) => {
|
|
28
27
|
const fontSizeMapping = {
|
|
29
28
|
[_Tabs.SIZE_SMALL]: _typography.fontSizes.xs,
|
|
30
29
|
[_Tabs.SIZE_BODY]: _typography.fontSizes.base,
|
|
@@ -35,34 +35,6 @@ const variants = {
|
|
|
35
35
|
color: 'black'
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
},
|
|
39
|
-
enclosed: {
|
|
40
|
-
tablist: {
|
|
41
|
-
backgroundColor: 'white',
|
|
42
|
-
borderRadius: '8px',
|
|
43
|
-
borederColor: 'gray.200',
|
|
44
|
-
borderWidth: '1px',
|
|
45
|
-
paddingY: 1
|
|
46
|
-
},
|
|
47
|
-
tab: {
|
|
48
|
-
borderRadius: '6px',
|
|
49
|
-
marginX: 1,
|
|
50
|
-
_selected: {
|
|
51
|
-
fontWeight: 'semibold',
|
|
52
|
-
color: 'white',
|
|
53
|
-
backgroundColor: 'primary.default',
|
|
54
|
-
_hover: {
|
|
55
|
-
backgroundColor: 'primary.600'
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
_active: {
|
|
59
|
-
backgroundColor: 'gray.200'
|
|
60
|
-
},
|
|
61
|
-
_disabled: {
|
|
62
|
-
opacity: 0.4,
|
|
63
|
-
cursor: 'not-allowed'
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
38
|
}
|
|
67
39
|
};
|
|
68
40
|
var _default = exports.default = (0, _merge.default)(_theme.default.components.Tabs, {
|
|
@@ -11,12 +11,11 @@ var _react2 = require("@chakra-ui/react");
|
|
|
11
11
|
var _options = _interopRequireDefault(require("./options"));
|
|
12
12
|
var _Text = require("./Text.styles");
|
|
13
13
|
var _combineAsWithVariant = _interopRequireDefault(require("./combineAsWithVariant"));
|
|
14
|
-
const Text = (0, _react2.forwardRef)((
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} = _ref;
|
|
14
|
+
const Text = (0, _react2.forwardRef)(({
|
|
15
|
+
as,
|
|
16
|
+
variant,
|
|
17
|
+
...props
|
|
18
|
+
}, ref) => {
|
|
20
19
|
return /*#__PURE__*/_react.default.createElement(_react2.Text, (0, _extends2.default)({
|
|
21
20
|
variant: variant,
|
|
22
21
|
as: as
|
|
@@ -36,11 +36,10 @@ const asOptions = Object.freeze({
|
|
|
36
36
|
* @returns {Object} An object containing the merged styleProps from the `variant` and the `as` props
|
|
37
37
|
*/
|
|
38
38
|
|
|
39
|
-
const combineAsWithVariant =
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
} = _ref;
|
|
39
|
+
const combineAsWithVariant = ({
|
|
40
|
+
as,
|
|
41
|
+
variant
|
|
42
|
+
}) => {
|
|
44
43
|
const variantFontSizeBase = Number(_Text.variants[`${variant}`].fontSize.base.replace('rem', ''));
|
|
45
44
|
const variantFontSizeDesktop = Number(_Text.variants[`${variant}`].fontSize.desktop.replace('rem', ''));
|
|
46
45
|
let styleProps;
|
|
@@ -14,21 +14,18 @@ var _global = require("../../theme/global");
|
|
|
14
14
|
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
15
15
|
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); }
|
|
16
16
|
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; }
|
|
17
|
-
const ThemeProvider = /*#__PURE__*/(0, _react.forwardRef)((
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
useLegacyOverrides: useLegacyOverrides
|
|
30
|
-
}), children);
|
|
31
|
-
});
|
|
17
|
+
const ThemeProvider = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
18
|
+
theme,
|
|
19
|
+
useLegacyOverrides,
|
|
20
|
+
disableExternalFonts = false,
|
|
21
|
+
children,
|
|
22
|
+
...props
|
|
23
|
+
}, ref) => /*#__PURE__*/_react.default.createElement(_react2.ChakraProvider, (0, _extends2.default)({}, props, {
|
|
24
|
+
ref: ref,
|
|
25
|
+
theme: (0, _merge.default)(_theme.default, theme)
|
|
26
|
+
}), disableExternalFonts ? null : /*#__PURE__*/_react.default.createElement(_global.Fonts, null), /*#__PURE__*/_react.default.createElement(_global.LegacyOverrides, {
|
|
27
|
+
useLegacyOverrides: useLegacyOverrides
|
|
28
|
+
}), children));
|
|
32
29
|
ThemeProvider.propTypes = {
|
|
33
30
|
/** If true, this will use the old `spothero-html` base styles */
|
|
34
31
|
useLegacyOverrides: _propTypes.default.bool,
|
|
@@ -26,10 +26,9 @@ var _default = exports.default = {
|
|
|
26
26
|
})]
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
|
-
const Template = (props,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
} = _ref;
|
|
29
|
+
const Template = (props, {
|
|
30
|
+
hasDarkBackground
|
|
31
|
+
}) => {
|
|
33
32
|
const contentTextColor = hasDarkBackground ? 'text.primary.dark' : 'text.primary.light';
|
|
34
33
|
return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
35
34
|
mb: 8,
|
package/dist/components/index.js
CHANGED
|
@@ -34,7 +34,6 @@ var _exportNames = {
|
|
|
34
34
|
Divider: true,
|
|
35
35
|
Popover: true,
|
|
36
36
|
PopoverAnchor: true,
|
|
37
|
-
PopoverArrow: true,
|
|
38
37
|
PopoverTrigger: true,
|
|
39
38
|
PopoverContent: true,
|
|
40
39
|
Radio: true,
|
|
@@ -43,14 +42,6 @@ var _exportNames = {
|
|
|
43
42
|
Badge: true,
|
|
44
43
|
ToggleButtonGroup: true,
|
|
45
44
|
CreatableSelect: true,
|
|
46
|
-
Menu: true,
|
|
47
|
-
MenuButton: true,
|
|
48
|
-
MenuList: true,
|
|
49
|
-
MenuItem: true,
|
|
50
|
-
MenuItemOption: true,
|
|
51
|
-
MenuGroup: true,
|
|
52
|
-
MenuOptionGroup: true,
|
|
53
|
-
MenuDivider: true,
|
|
54
45
|
Box: true,
|
|
55
46
|
Kbd: true,
|
|
56
47
|
Code: true,
|
|
@@ -79,8 +70,6 @@ var _exportNames = {
|
|
|
79
70
|
useClipboard: true,
|
|
80
71
|
useDisclosure: true,
|
|
81
72
|
useMediaQuery: true,
|
|
82
|
-
CheckboxGroup: true,
|
|
83
|
-
useStyleConfig: true,
|
|
84
73
|
BreadcrumbItem: true,
|
|
85
74
|
BreadcrumbLink: true,
|
|
86
75
|
InputLeftAddon: true,
|
|
@@ -174,12 +163,6 @@ Object.defineProperty(exports, "Checkbox", {
|
|
|
174
163
|
return _Checkbox.default;
|
|
175
164
|
}
|
|
176
165
|
});
|
|
177
|
-
Object.defineProperty(exports, "CheckboxGroup", {
|
|
178
|
-
enumerable: true,
|
|
179
|
-
get: function () {
|
|
180
|
-
return _react.CheckboxGroup;
|
|
181
|
-
}
|
|
182
|
-
});
|
|
183
166
|
Object.defineProperty(exports, "Circle", {
|
|
184
167
|
enumerable: true,
|
|
185
168
|
get: function () {
|
|
@@ -342,54 +325,6 @@ Object.defineProperty(exports, "Loader", {
|
|
|
342
325
|
return _Loader.default;
|
|
343
326
|
}
|
|
344
327
|
});
|
|
345
|
-
Object.defineProperty(exports, "Menu", {
|
|
346
|
-
enumerable: true,
|
|
347
|
-
get: function () {
|
|
348
|
-
return _Menu.default;
|
|
349
|
-
}
|
|
350
|
-
});
|
|
351
|
-
Object.defineProperty(exports, "MenuButton", {
|
|
352
|
-
enumerable: true,
|
|
353
|
-
get: function () {
|
|
354
|
-
return _Menu.MenuButton;
|
|
355
|
-
}
|
|
356
|
-
});
|
|
357
|
-
Object.defineProperty(exports, "MenuDivider", {
|
|
358
|
-
enumerable: true,
|
|
359
|
-
get: function () {
|
|
360
|
-
return _Menu.MenuDivider;
|
|
361
|
-
}
|
|
362
|
-
});
|
|
363
|
-
Object.defineProperty(exports, "MenuGroup", {
|
|
364
|
-
enumerable: true,
|
|
365
|
-
get: function () {
|
|
366
|
-
return _Menu.MenuGroup;
|
|
367
|
-
}
|
|
368
|
-
});
|
|
369
|
-
Object.defineProperty(exports, "MenuItem", {
|
|
370
|
-
enumerable: true,
|
|
371
|
-
get: function () {
|
|
372
|
-
return _Menu.MenuItem;
|
|
373
|
-
}
|
|
374
|
-
});
|
|
375
|
-
Object.defineProperty(exports, "MenuItemOption", {
|
|
376
|
-
enumerable: true,
|
|
377
|
-
get: function () {
|
|
378
|
-
return _Menu.MenuItemOption;
|
|
379
|
-
}
|
|
380
|
-
});
|
|
381
|
-
Object.defineProperty(exports, "MenuList", {
|
|
382
|
-
enumerable: true,
|
|
383
|
-
get: function () {
|
|
384
|
-
return _Menu.MenuList;
|
|
385
|
-
}
|
|
386
|
-
});
|
|
387
|
-
Object.defineProperty(exports, "MenuOptionGroup", {
|
|
388
|
-
enumerable: true,
|
|
389
|
-
get: function () {
|
|
390
|
-
return _Menu.MenuOptionGroup;
|
|
391
|
-
}
|
|
392
|
-
});
|
|
393
328
|
Object.defineProperty(exports, "Popover", {
|
|
394
329
|
enumerable: true,
|
|
395
330
|
get: function () {
|
|
@@ -402,12 +337,6 @@ Object.defineProperty(exports, "PopoverAnchor", {
|
|
|
402
337
|
return _Popover.PopoverAnchor;
|
|
403
338
|
}
|
|
404
339
|
});
|
|
405
|
-
Object.defineProperty(exports, "PopoverArrow", {
|
|
406
|
-
enumerable: true,
|
|
407
|
-
get: function () {
|
|
408
|
-
return _Popover.PopoverArrow;
|
|
409
|
-
}
|
|
410
|
-
});
|
|
411
340
|
Object.defineProperty(exports, "PopoverContent", {
|
|
412
341
|
enumerable: true,
|
|
413
342
|
get: function () {
|
|
@@ -612,12 +541,6 @@ Object.defineProperty(exports, "usePrefersReducedMotion", {
|
|
|
612
541
|
return _react.usePrefersReducedMotion;
|
|
613
542
|
}
|
|
614
543
|
});
|
|
615
|
-
Object.defineProperty(exports, "useStyleConfig", {
|
|
616
|
-
enumerable: true,
|
|
617
|
-
get: function () {
|
|
618
|
-
return _react.useStyleConfig;
|
|
619
|
-
}
|
|
620
|
-
});
|
|
621
544
|
Object.defineProperty(exports, "useTheme", {
|
|
622
545
|
enumerable: true,
|
|
623
546
|
get: function () {
|
|
@@ -735,7 +658,6 @@ var _AutoSuggestSelect = require("./AutoSuggestSelect");
|
|
|
735
658
|
var _Badge = _interopRequireDefault(require("./Badge/Badge"));
|
|
736
659
|
var _ToggleButtonGroup = _interopRequireDefault(require("./ToggleButtonGroup/ToggleButtonGroup"));
|
|
737
660
|
var _CreatableSelect = require("./CreatableSelect");
|
|
738
|
-
var _Menu = _interopRequireWildcard(require("./Menu"));
|
|
739
661
|
var _react = require("@chakra-ui/react");
|
|
740
662
|
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); }
|
|
741
663
|
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; }
|
|
@@ -70,12 +70,6 @@ Object.defineProperty(exports, "List", {
|
|
|
70
70
|
return _styles.default;
|
|
71
71
|
}
|
|
72
72
|
});
|
|
73
|
-
Object.defineProperty(exports, "Menu", {
|
|
74
|
-
enumerable: true,
|
|
75
|
-
get: function () {
|
|
76
|
-
return _Menu.default;
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
73
|
Object.defineProperty(exports, "Modal", {
|
|
80
74
|
enumerable: true,
|
|
81
75
|
get: function () {
|
|
@@ -163,5 +157,4 @@ var _styles10 = _interopRequireDefault(require("./Radio/styles"));
|
|
|
163
157
|
var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
|
|
164
158
|
var _styles11 = _interopRequireDefault(require("./Badge/styles"));
|
|
165
159
|
var _styles12 = _interopRequireDefault(require("./Drawer/styles"));
|
|
166
|
-
var _Progress = _interopRequireDefault(require("./Progress/Progress.styles"));
|
|
167
|
-
var _Menu = _interopRequireDefault(require("./Menu/Menu.styles"));
|
|
160
|
+
var _Progress = _interopRequireDefault(require("./Progress/Progress.styles"));
|
package/dist/theme/global.js
CHANGED
|
@@ -62,12 +62,10 @@ const Fonts = () => /*#__PURE__*/_react.default.createElement(_react2.Global, {
|
|
|
62
62
|
`
|
|
63
63
|
});
|
|
64
64
|
exports.Fonts = Fonts;
|
|
65
|
-
const LegacyOverrides =
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
return useLegacyOverrides ? /*#__PURE__*/_react.default.createElement(_react2.Global, {
|
|
70
|
-
styles: `
|
|
65
|
+
const LegacyOverrides = ({
|
|
66
|
+
useLegacyOverrides
|
|
67
|
+
}) => useLegacyOverrides ? /*#__PURE__*/_react.default.createElement(_react2.Global, {
|
|
68
|
+
styles: `
|
|
71
69
|
h1,
|
|
72
70
|
h2,
|
|
73
71
|
h3,
|
|
@@ -113,6 +111,5 @@ const LegacyOverrides = _ref => {
|
|
|
113
111
|
}
|
|
114
112
|
|
|
115
113
|
`
|
|
116
|
-
|
|
117
|
-
};
|
|
114
|
+
}) : null;
|
|
118
115
|
exports.LegacyOverrides = LegacyOverrides;
|
package/dist/theme/index.js
CHANGED
|
@@ -21,10 +21,7 @@ const extendedTheme = {
|
|
|
21
21
|
styles: {
|
|
22
22
|
global: _global.default
|
|
23
23
|
},
|
|
24
|
-
remToPixels:
|
|
25
|
-
let baseSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
|
|
26
|
-
return !rem ? 0 : `${baseSize * Number(rem.replace('rem', ''))}`;
|
|
27
|
-
}
|
|
24
|
+
remToPixels: (rem, baseSize = 16) => !rem ? 0 : `${baseSize * Number(rem.replace('rem', ''))}`
|
|
28
25
|
};
|
|
29
26
|
|
|
30
27
|
// use this to override base themes from Chakra
|