@laerdal/life-react-components 1.0.1-dev.22.full → 1.0.1-dev.29.full
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/esm/Banners/Banner.js +11 -8
- package/dist/esm/Banners/Banner.js.map +1 -1
- package/dist/esm/Button/Anchor.js +76 -0
- package/dist/esm/Button/Anchor.js.map +1 -0
- package/dist/esm/Button/BackButton.js +1 -1
- package/dist/esm/Button/BackButton.js.map +1 -1
- package/dist/esm/Button/Button.js +46 -19
- package/dist/esm/Button/Button.js.map +1 -1
- package/dist/esm/Button/DualFunctionButton.js +111 -0
- package/dist/esm/Button/DualFunctionButton.js.map +1 -0
- package/dist/esm/Button/Iconbutton.js +21 -1
- package/dist/esm/Button/Iconbutton.js.map +1 -1
- package/dist/esm/Button/__tests__/Button.test.js +2 -1
- package/dist/esm/Button/__tests__/Button.test.js.map +1 -1
- package/dist/esm/Button/index.js +1 -0
- package/dist/esm/Button/index.js.map +1 -1
- package/dist/esm/Dropdown/BasicDropdown.js +60 -127
- package/dist/esm/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/esm/Dropdown/ChipDropdownInput.js +41 -132
- package/dist/esm/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/esm/Dropdown/CommonStyling.js +20 -15
- package/dist/esm/Dropdown/CommonStyling.js.map +1 -1
- package/dist/esm/Dropdown/DropdownButton.js +2 -2
- package/dist/esm/Dropdown/DropdownButton.js.map +1 -1
- package/dist/esm/Dropdown/DropdownContent.js +424 -0
- package/dist/esm/Dropdown/DropdownContent.js.map +1 -0
- package/dist/esm/Dropdown/DropdownFilter.js +42 -151
- package/dist/esm/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js +15 -17
- package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/esm/InputFields/Checkbox.js +19 -10
- package/dist/esm/InputFields/Checkbox.js.map +1 -1
- package/dist/esm/InputFields/QuickSearch.js +22 -12
- package/dist/esm/InputFields/QuickSearch.js.map +1 -1
- package/dist/esm/InputFields/RadioButton.js +18 -11
- package/dist/esm/InputFields/RadioButton.js.map +1 -1
- package/dist/esm/InputFields/components/SearchBarInput.js +1 -1
- package/dist/esm/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/esm/Modals/ModalDialog.js +14 -14
- package/dist/esm/Modals/ModalDialog.js.map +1 -1
- package/dist/esm/Modals/ModalStyles.js +3 -2
- package/dist/esm/Modals/ModalStyles.js.map +1 -1
- package/dist/esm/Paginator/Paginator.js +18 -8
- package/dist/esm/Paginator/Paginator.js.map +1 -1
- package/dist/esm/Paginator/__tests__/Paginator.test.js +1 -1
- package/dist/esm/Paginator/__tests__/Paginator.test.js.map +1 -1
- package/dist/esm/Table/Table.js +2 -1
- package/dist/esm/Table/Table.js.map +1 -1
- package/dist/esm/Tabs/TabLink.js +1 -1
- package/dist/esm/Tabs/TabLink.js.map +1 -1
- package/dist/esm/Toasters/Toast.js +2 -1
- package/dist/esm/Toasters/Toast.js.map +1 -1
- package/dist/esm/types.js +8 -0
- package/dist/esm/types.js.map +1 -1
- package/dist/js/Banners/Banner.js +13 -11
- package/dist/js/Banners/Banner.js.map +1 -1
- package/dist/js/Button/Anchor.d.ts +7 -0
- package/dist/js/Button/Anchor.js +66 -0
- package/dist/js/Button/Anchor.js.map +1 -0
- package/dist/js/Button/BackButton.js +1 -1
- package/dist/js/Button/BackButton.js.map +1 -1
- package/dist/js/Button/Button.d.ts +4 -1
- package/dist/js/Button/Button.js +44 -18
- package/dist/js/Button/Button.js.map +1 -1
- package/dist/js/Button/DualFunctionButton.d.ts +12 -0
- package/dist/js/Button/DualFunctionButton.js +148 -0
- package/dist/js/Button/DualFunctionButton.js.map +1 -0
- package/dist/js/Button/Iconbutton.d.ts +1 -0
- package/dist/js/Button/Iconbutton.js +23 -3
- package/dist/js/Button/Iconbutton.js.map +1 -1
- package/dist/js/Button/__tests__/Button.test.js +3 -1
- package/dist/js/Button/__tests__/Button.test.js.map +1 -1
- package/dist/js/Button/index.d.ts +1 -0
- package/dist/js/Button/index.js +8 -0
- package/dist/js/Button/index.js.map +1 -1
- package/dist/js/Dropdown/BasicDropdown.d.ts +9 -2
- package/dist/js/Dropdown/BasicDropdown.js +67 -133
- package/dist/js/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/js/Dropdown/ChipDropdownInput.js +45 -138
- package/dist/js/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/js/Dropdown/CommonStyling.d.ts +6 -2
- package/dist/js/Dropdown/CommonStyling.js +17 -6
- package/dist/js/Dropdown/CommonStyling.js.map +1 -1
- package/dist/js/Dropdown/DropdownButton.js +1 -1
- package/dist/js/Dropdown/DropdownButton.js.map +1 -1
- package/dist/js/Dropdown/DropdownContent.d.ts +45 -0
- package/dist/js/Dropdown/DropdownContent.js +476 -0
- package/dist/js/Dropdown/DropdownContent.js.map +1 -0
- package/dist/js/Dropdown/DropdownFilter.js +59 -186
- package/dist/js/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js +7 -17
- package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/js/InputFields/Checkbox.d.ts +5 -3
- package/dist/js/InputFields/Checkbox.js +16 -9
- package/dist/js/InputFields/Checkbox.js.map +1 -1
- package/dist/js/InputFields/QuickSearch.js +24 -6
- package/dist/js/InputFields/QuickSearch.js.map +1 -1
- package/dist/js/InputFields/RadioButton.d.ts +4 -2
- package/dist/js/InputFields/RadioButton.js +15 -10
- package/dist/js/InputFields/RadioButton.js.map +1 -1
- package/dist/js/InputFields/components/SearchBarInput.js +1 -1
- package/dist/js/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/js/Modals/ModalDialog.d.ts +2 -1
- package/dist/js/Modals/ModalDialog.js +15 -14
- package/dist/js/Modals/ModalDialog.js.map +1 -1
- package/dist/js/Modals/ModalStyles.d.ts +4 -3
- package/dist/js/Modals/ModalStyles.js +4 -2
- package/dist/js/Modals/ModalStyles.js.map +1 -1
- package/dist/js/Paginator/Paginator.js +7 -5
- package/dist/js/Paginator/Paginator.js.map +1 -1
- package/dist/js/Paginator/__tests__/Paginator.test.js +1 -1
- package/dist/js/Paginator/__tests__/Paginator.test.js.map +1 -1
- package/dist/js/Table/Table.js +3 -1
- package/dist/js/Table/Table.js.map +1 -1
- package/dist/js/Tabs/TabLink.js +1 -1
- package/dist/js/Tabs/TabLink.js.map +1 -1
- package/dist/js/Toasters/Toast.js +1 -1
- package/dist/js/Toasters/Toast.js.map +1 -1
- package/dist/js/types.d.ts +5 -0
- package/dist/js/types.js +10 -1
- package/dist/js/types.js.map +1 -1
- package/dist/umd/Banners/Banner.js +11 -8
- package/dist/umd/Banners/Banner.js.map +1 -1
- package/dist/umd/Button/Anchor.js +201 -0
- package/dist/umd/Button/Anchor.js.map +1 -0
- package/dist/umd/Button/BackButton.js +1 -1
- package/dist/umd/Button/BackButton.js.map +1 -1
- package/dist/umd/Button/Button.js +48 -22
- package/dist/umd/Button/Button.js.map +1 -1
- package/dist/umd/Button/DualFunctionButton.js +237 -0
- package/dist/umd/Button/DualFunctionButton.js.map +1 -0
- package/dist/umd/Button/Iconbutton.js +21 -1
- package/dist/umd/Button/Iconbutton.js.map +1 -1
- package/dist/umd/Button/__tests__/Button.test.js +5 -5
- package/dist/umd/Button/__tests__/Button.test.js.map +1 -1
- package/dist/umd/Button/index.js +10 -4
- package/dist/umd/Button/index.js.map +1 -1
- package/dist/umd/Dropdown/BasicDropdown.js +64 -131
- package/dist/umd/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/umd/Dropdown/ChipDropdownInput.js +44 -134
- package/dist/umd/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/umd/Dropdown/CommonStyling.js +23 -19
- package/dist/umd/Dropdown/CommonStyling.js.map +1 -1
- package/dist/umd/Dropdown/DropdownButton.js +1 -1
- package/dist/umd/Dropdown/DropdownButton.js.map +1 -1
- package/dist/umd/Dropdown/DropdownContent.js +458 -0
- package/dist/umd/Dropdown/DropdownContent.js.map +1 -0
- package/dist/umd/Dropdown/DropdownFilter.js +47 -155
- package/dist/umd/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js +18 -21
- package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/umd/InputFields/Checkbox.js +22 -14
- package/dist/umd/InputFields/Checkbox.js.map +1 -1
- package/dist/umd/InputFields/QuickSearch.js +22 -12
- package/dist/umd/InputFields/QuickSearch.js.map +1 -1
- package/dist/umd/InputFields/RadioButton.js +21 -15
- package/dist/umd/InputFields/RadioButton.js.map +1 -1
- package/dist/umd/InputFields/components/SearchBarInput.js +1 -1
- package/dist/umd/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/umd/Modals/ModalDialog.js +17 -18
- package/dist/umd/Modals/ModalDialog.js.map +1 -1
- package/dist/umd/Modals/ModalStyles.js +6 -6
- package/dist/umd/Modals/ModalStyles.js.map +1 -1
- package/dist/umd/Paginator/Paginator.js +18 -8
- package/dist/umd/Paginator/Paginator.js.map +1 -1
- package/dist/umd/Paginator/__tests__/Paginator.test.js +1 -1
- package/dist/umd/Paginator/__tests__/Paginator.test.js.map +1 -1
- package/dist/umd/Table/Table.js +5 -5
- package/dist/umd/Table/Table.js.map +1 -1
- package/dist/umd/Tabs/TabLink.js +1 -1
- package/dist/umd/Tabs/TabLink.js.map +1 -1
- package/dist/umd/Toasters/Toast.js +1 -1
- package/dist/umd/Toasters/Toast.js.map +1 -1
- package/dist/umd/types.js +8 -0
- package/dist/umd/types.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "styled-components", "../LoadingIndicator", "../styles", "../styles
|
|
3
|
+
define(["exports", "prop-types", "react", "styled-components", "../LoadingIndicator", "../styles/typography", "../styles", "../types"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../LoadingIndicator"), require("../styles"), require("../styles
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../LoadingIndicator"), require("../styles/typography"), require("../styles"), require("../types"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.LoadingIndicator, global.styles, global.
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.LoadingIndicator, global.typography, global.styles, global.types);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react, _styledComponents, _LoadingIndicator, _styles,
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _styledComponents, _LoadingIndicator, _typography, _styles, _types) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
};
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
const _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "icon"],
|
|
82
|
+
const _excluded = ["children", "variant", "type", "size", "width", "imageExtraMargin", "testId", "disabled", "flatEdge", "icon"],
|
|
83
83
|
_excluded2 = ["loading"];
|
|
84
84
|
|
|
85
85
|
function _extends() {
|
|
@@ -136,6 +136,20 @@
|
|
|
136
136
|
return target;
|
|
137
137
|
}
|
|
138
138
|
|
|
139
|
+
const getBorderRadius = (flatEdge, radius) => {
|
|
140
|
+
switch (flatEdge) {
|
|
141
|
+
case 'left':
|
|
142
|
+
return `0px ${radius}px ${radius}px 0px`;
|
|
143
|
+
|
|
144
|
+
case 'right':
|
|
145
|
+
return `${radius}px 0px 0px ${radius}px`;
|
|
146
|
+
|
|
147
|
+
case 'none':
|
|
148
|
+
default:
|
|
149
|
+
return `${radius}px`;
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
|
|
139
153
|
const tabbedHereStyle = (variant, colorTheme) => {
|
|
140
154
|
switch (variant) {
|
|
141
155
|
case 'primary':
|
|
@@ -146,7 +160,7 @@
|
|
|
146
160
|
box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
|
|
147
161
|
background-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
|
|
148
162
|
border-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
|
|
149
|
-
color: ${colorTheme === 'dark' ? _styles.COLORS.
|
|
163
|
+
color: ${colorTheme === 'dark' ? _styles.COLORS.primary_600 : _styles.COLORS.white};
|
|
150
164
|
}
|
|
151
165
|
`;
|
|
152
166
|
|
|
@@ -195,19 +209,19 @@
|
|
|
195
209
|
padding: 0;
|
|
196
210
|
margin: 0;
|
|
197
211
|
box-sizing: border-box;
|
|
198
|
-
min-height: ${props => props.size ===
|
|
212
|
+
min-height: ${props => props.size === _types.Size.Large ? '56px' : '48px'};
|
|
199
213
|
&.loading-state {
|
|
200
214
|
cursor: wait;
|
|
201
215
|
}
|
|
202
216
|
&:focus:not(:focus-visible),
|
|
203
217
|
&:focus:not(:focus-visible) > div.button-content {
|
|
204
|
-
outline:
|
|
218
|
+
outline: none !important;
|
|
205
219
|
}
|
|
206
220
|
div.button-content {
|
|
207
|
-
${props => props.size ===
|
|
221
|
+
${props => props.size === _types.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white)};
|
|
208
222
|
|
|
209
223
|
background-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : props?.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary};
|
|
210
|
-
border-radius:
|
|
224
|
+
border-radius: ${props => getBorderRadius(props.flatEdge, 8)};
|
|
211
225
|
border-width: 2px;
|
|
212
226
|
border-style: solid;
|
|
213
227
|
border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : props?.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary};
|
|
@@ -215,14 +229,14 @@
|
|
|
215
229
|
width: ${props => props.width};
|
|
216
230
|
position: relative;
|
|
217
231
|
|
|
218
|
-
min-height: ${props => props.size ===
|
|
232
|
+
min-height: ${props => props.size === _types.Size.Large ? '56px' : props.size === _types.Size.Small ? '32px' : '40px'};
|
|
219
233
|
box-sizing: border-box;
|
|
220
234
|
display: flex;
|
|
221
235
|
align-items: center;
|
|
222
236
|
justify-content: center;
|
|
223
237
|
gap: 4px;
|
|
224
238
|
// paddings have -2px for border
|
|
225
|
-
padding: ${props => props.size ===
|
|
239
|
+
padding: ${props => props.size === _types.Size.Large ? '14px 18px' : props.size === _types.Size.Small ? '4px 10px' : '6px 14px'};
|
|
226
240
|
|
|
227
241
|
span.loading {
|
|
228
242
|
opacity: 0;
|
|
@@ -231,20 +245,24 @@
|
|
|
231
245
|
margin-left: -4px;
|
|
232
246
|
margin-top: -2px;
|
|
233
247
|
margin-bottom: -2px;
|
|
234
|
-
width: ${props => props.size ===
|
|
235
|
-
height: ${props => props.size ===
|
|
248
|
+
width: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'};
|
|
249
|
+
height: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'};
|
|
236
250
|
svg {
|
|
237
|
-
width: ${props => props.size ===
|
|
238
|
-
height: ${props => props.size ===
|
|
251
|
+
width: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'} !important;
|
|
252
|
+
height: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'} !important;
|
|
239
253
|
}
|
|
240
254
|
}
|
|
241
255
|
|
|
256
|
+
.extramargin {
|
|
257
|
+
margin-right: 9px;
|
|
258
|
+
}
|
|
259
|
+
|
|
242
260
|
div {
|
|
243
261
|
position: absolute;
|
|
244
262
|
width: 100%;
|
|
245
263
|
svg {
|
|
246
|
-
height: ${props => props.size ===
|
|
247
|
-
width: ${props => props.size ===
|
|
264
|
+
height: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'};
|
|
265
|
+
width: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'};
|
|
248
266
|
path {
|
|
249
267
|
fill: ${props => props.colorTheme === 'dark' ? _styles.COLORS.primary : _styles.COLORS.white};
|
|
250
268
|
}
|
|
@@ -487,7 +505,7 @@
|
|
|
487
505
|
cursor: pointer;
|
|
488
506
|
|
|
489
507
|
text-decoration: underline;
|
|
490
|
-
${props => props.size ===
|
|
508
|
+
${props => props.size === _types.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary) : props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary)};
|
|
491
509
|
|
|
492
510
|
&:hover,
|
|
493
511
|
&:focus,
|
|
@@ -514,10 +532,12 @@
|
|
|
514
532
|
children = 'Primary Button',
|
|
515
533
|
variant = 'primary',
|
|
516
534
|
type = 'button',
|
|
517
|
-
size =
|
|
535
|
+
size = _types.Size.Medium,
|
|
518
536
|
width = 'auto',
|
|
537
|
+
imageExtraMargin,
|
|
519
538
|
testId,
|
|
520
539
|
disabled,
|
|
540
|
+
flatEdge,
|
|
521
541
|
icon
|
|
522
542
|
} = _ref,
|
|
523
543
|
props = _objectWithoutProperties(_ref, _excluded); // Let's filter out properties that we don't need to render.
|
|
@@ -532,7 +552,7 @@
|
|
|
532
552
|
const [tabbedHere, setTabbedHere] = React.useState(false);
|
|
533
553
|
|
|
534
554
|
const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
|
|
535
|
-
className: loading ? 'icon loading' : 'icon'
|
|
555
|
+
className: (imageExtraMargin ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')
|
|
536
556
|
}, icon), /*#__PURE__*/React.createElement("span", {
|
|
537
557
|
className: loading ? 'label loading' : 'label'
|
|
538
558
|
}, children), loading && /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, null)); // Let's render button
|
|
@@ -544,6 +564,7 @@
|
|
|
544
564
|
disabled: disabled,
|
|
545
565
|
type: type,
|
|
546
566
|
size: size,
|
|
567
|
+
flatEdge: flatEdge,
|
|
547
568
|
width: width,
|
|
548
569
|
"data-testid": testId,
|
|
549
570
|
className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
|
|
@@ -566,6 +587,7 @@
|
|
|
566
587
|
disabled: disabled,
|
|
567
588
|
type: type,
|
|
568
589
|
size: size,
|
|
590
|
+
flatEdge: flatEdge,
|
|
569
591
|
width: width,
|
|
570
592
|
"data-testid": testId,
|
|
571
593
|
className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
|
|
@@ -587,6 +609,7 @@
|
|
|
587
609
|
return /*#__PURE__*/React.createElement(Tertiary, _extends({}, renderProps, {
|
|
588
610
|
disabled: disabled,
|
|
589
611
|
type: type,
|
|
612
|
+
flatEdge: flatEdge,
|
|
590
613
|
size: size,
|
|
591
614
|
width: width,
|
|
592
615
|
"data-testid": testId,
|
|
@@ -619,6 +642,7 @@
|
|
|
619
642
|
disabled: disabled,
|
|
620
643
|
type: type,
|
|
621
644
|
size: size,
|
|
645
|
+
flatEdge: flatEdge,
|
|
622
646
|
width: width,
|
|
623
647
|
"data-testid": testId,
|
|
624
648
|
className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
|
|
@@ -639,6 +663,7 @@
|
|
|
639
663
|
case 'critical':
|
|
640
664
|
return /*#__PURE__*/React.createElement(Critical, _extends({}, renderProps, {
|
|
641
665
|
disabled: disabled,
|
|
666
|
+
flatEdge: flatEdge,
|
|
642
667
|
type: type,
|
|
643
668
|
size: size,
|
|
644
669
|
width: width,
|
|
@@ -660,6 +685,7 @@
|
|
|
660
685
|
|
|
661
686
|
default:
|
|
662
687
|
return /*#__PURE__*/React.createElement(Primary, _extends({}, renderProps, {
|
|
688
|
+
flatEdge: flatEdge,
|
|
663
689
|
disabled: disabled,
|
|
664
690
|
type: type,
|
|
665
691
|
size: size,
|
|
@@ -686,7 +712,7 @@
|
|
|
686
712
|
variant: _propTypes2.default.oneOf(['primary', 'secondary', 'tertiary', 'text', 'correct', 'critical']),
|
|
687
713
|
role: _propTypes2.default.oneOfType([_propTypes2.default.oneOf(['button']), _propTypes2.default.string]),
|
|
688
714
|
title: _propTypes2.default.string,
|
|
689
|
-
|
|
715
|
+
imageExtraMargin: _propTypes2.default.bool,
|
|
690
716
|
colorTheme: _propTypes2.default.oneOf(['teal', 'dark']),
|
|
691
717
|
width: _propTypes2.default.oneOfType([_propTypes2.default.oneOf(['auto']), _propTypes2.default.string]),
|
|
692
718
|
loading: _propTypes2.default.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["tabbedHereStyle","css","COLORS","focus_25","focus","colorTheme","primary_700","white","primary","primary_500","Primary","styled","button","props","ComponentLStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","width","primary_800","neutral_100","neutral_300","Secondary","Tertiary","primary_20","primary_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Text","neutral_500","variant","role","title","size","loading","testId","tabbedHere","icon","Button","children","type","renderProps","supressFocusRef","React","renderContent","e","setTabbedHere"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { COLORS, TYPOGRAPHY } from '../styles';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\n switch (variant) {\n case 'primary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\n }\n `;\n case 'secondary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\n color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\n }\n `;\n case 'tertiary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${COLORS.white};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\n color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\n }\n `;\n\n default:\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\n }\n `;\n }\n};\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === 'big' ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: 0 !important;\n }\n div.button-content {\n ${(props) =>\n props.size === 'big'\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === 'small'\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: 8px;\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === 'big' ? '56px' : props.size === 'small' ? '32px' : '40px')};\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ${(props) => (props.size === 'big' ? '14px 18px' : props.size === 'small' ? '4px 10px' : '6px 14px')};\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin-left: -4px;\n margin-top: -2px;\n margin-bottom: -2px;\n width: ${(props) => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')};\n height: ${(props) => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')} !important;\n }\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')};\n width: ${(props) => (props.size === 'big' ? '28px' : props.size === 'small' ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n box-shadow: none !important;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('primary', props?.colorTheme)};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: white;\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n cursor: not-allowed;\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('secondary', props?.colorTheme)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent;\n cursor: not-allowed;\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n cursor: not-allowed;\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('tertiary', props?.colorTheme)};\n }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n }\n`;\n\nconst Text = styled.button<ButtonProps>`\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n background-color: transparent;\n padding: 0;\n border: none;\n cursor: pointer;\n\n text-decoration: underline;\n ${(props) =>\n props.size === 'big'\n ? ComponentLStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n : props.size === 'small'\n ? ComponentSStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n : ComponentMStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n\n &:hover,\n &:focus,\n &.hover-state,\n &.focus-state {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n background: transparent;\n }\n &:active,\n &.active-state {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n background: transparent;\n }\n &:disabled,\n &.disabled-state {\n color: ${COLORS.neutral_500};\n background: transparent;\n cursor: not-allowed;\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'correct' | 'critical';\n role?: 'button' | string;\n title?: string;\n size?: 'small' | 'normal' | 'big';\n colorTheme?: 'teal' | 'dark';\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n tabbedHere?: boolean;\n icon?: React.ReactNode;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n children = 'Primary Button',\n variant = 'primary',\n type = 'button',\n size = 'normal',\n width = 'auto',\n testId,\n disabled,\n icon,\n ...props\n}) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const renderContent = () => (\n <>\n {icon && <span className={loading ? 'icon loading' : 'icon'}>{icon}</span>}\n <span className={loading ? 'label loading' : 'label'}>{children}</span>\n {loading && <LoadingIndicator></LoadingIndicator>}\n </>\n );\n\n // Let's render button\n switch (variant) {\n case 'primary':\n return (\n <Primary\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Primary>\n );\n case 'secondary':\n return (\n <Secondary\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Secondary>\n );\n case 'tertiary':\n return (\n <Tertiary\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Tertiary>\n );\n case 'text':\n return (\n <Text {...renderProps} disabled={disabled} type={type} size={size} width={width} data-testid={testId}>\n {children}\n </Text>\n );\n case 'correct':\n return (\n <Correct\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Correct>\n );\n case 'critical':\n return (\n <Critical\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Critical>\n );\n default:\n return (\n <Primary\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Primary>\n );\n }\n};\n\nexport default Button;\n"],"file":"Button.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["getBorderRadius","radius","tabbedHereStyle","css","COLORS","focus_25","focus","colorTheme","primary_700","white","primary","primary_500","Primary","styled","button","props","Size","ComponentLStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","width","primary_800","neutral_100","neutral_300","Secondary","Tertiary","primary_20","primary_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Text","neutral_500","variant","role","title","imageExtraMargin","loading","testId","tabbedHere","icon","Button","children","type","size","renderProps","supressFocusRef","React","renderContent","e","setTabbedHere"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,eAAe,GAAG,CAAA,QAAA,EAAA,MAAA,KAAmD;AACzE,YAAA,QAAA;AAEI,WAAA,MAAA;AACI,eAAQ,OAAMC,MAAO,MAAKA,MAA1B,QAAA;;AAEJ,WAAA,OAAA;AACI,eAAQ,GAAEA,MAAO,cAAaA,MAA9B,IAAA;;AAEJ,WAAA,MAAA;AACA;AACI,eAAQ,GAAEA,MAAV,IAAA;AAVR;AADF,GAAA;;AAgBA,QAAMC,eAAe,GAAG,CAAA,OAAA,EAAA,UAAA,KAA0C;AAChE,YAAA,OAAA;AACE,WAAA,SAAA;AACE,eAAOC,qBAAI;AACjB;AACA;AACA;AACA,qCAAqCC,eAAOC,QAAS,iBAAgBD,eAAOE,KAAM;AAClF,8BAA8BC,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,WAAAA,GAA6CA,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,WAAAA,GAA6CH,eAAOI,WAAY;AAC3I,0BAA0BD,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,WAAAA,GAA6CA,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,WAAAA,GAA6CH,eAAOI,WAAY;AACvI,mBAAmBD,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,WAAAA,GAA6CH,eAAOK,KAAM;AAC7E;AARM,OAAA;;AAUF,WAAA,WAAA;AACE,eAAON,qBAAI;AACjB;AACA;AACA;AACA,qCAAqCC,eAAOC,QAAS,iBAAgBD,eAAOE,KAAM;AAClF,8BAA8BC,UAAU,KAAVA,MAAAA,GAAAA,aAAAA,GAAwCH,eAAOK,KAAM;AACnF,0BAA0BF,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,OAAAA,GAAyCA,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,WAAAA,GAA6CH,eAAOM,OAAQ;AAC/H,mBAAmBH,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,KAAAA,GAAuCH,eAAOO,WAAY;AAC7E;AARM,OAAA;;AAUF,WAAA,UAAA;AACE,eAAOR,qBAAI;AACjB;AACA;AACA;AACA,qCAAqCC,eAAOC,QAAS,iBAAgBD,eAAOE,KAAM;AAClF,8BAA8BF,eAAOK,KAAM;AAC3C,0BAA0BF,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,OAAAA,GAAyCH,eAAOM,OAAQ;AAClF,mBAAmBH,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,WAAAA,GAA6CH,eAAOO,WAAY;AACnF;AARM,OAAA;;AAWF;AACE,eAAOR,qBAAI;AACjB;AACA;AACA;AACA,qCAAqCC,eAAOC,QAAS,iBAAgBD,eAAOE,KAAM;AAClF,8BAA8BC,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,WAAAA,GAA6CA,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,WAAAA,GAA6CH,eAAOI,WAAY;AAC3I,0BAA0BD,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,WAAAA,GAA6CA,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,WAAAA,GAA6CH,eAAOI,WAAY;AACvI,mBAAmBD,UAAU,KAAVA,MAAAA,GAAwBH,eAAxBG,WAAAA,GAA6CH,eAAOK,KAAM;AAC7E;AARM,OAAA;AApCJ;AADF,GAAA;;AAkDA,QAAMG,OAAO,GAAGC,2BAAOC,MAAoB;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA,gBAAiBC,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AACzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAOA,KAAD,IACAA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GACIE,mCAAkBC,+BAAD,IAAjBD,EAA2CF,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eADnGW,KACIE,CADJF,GAEIA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GACAI,mCAAkBD,+BAAD,IAAjBC,EAA2CJ,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAD/FW,KACAI,CADAJ,GAEAK,mCAAkBF,+BAAD,IAAjBE,EAA2CL,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAA9E,KAAjBgB,CAA6G;AACvH;AACA,wBAAyBL,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,OAAAA,GAA+CA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,KAAAA,GAA8CX,eAAOM,OAAS;AACjJ,qBAAqBK,KAAK,IAAIf,eAAe,CAACe,KAAK,CAAN,QAAA,EAAA,CAAA,CAAoB;AACjE;AACA;AACA,oBAAqBA,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,OAAAA,GAA+CA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,KAAAA,GAA8CX,eAAOM,OAAS;AAC7I;AACA,aAAcK,KAAD,IAAWA,KAAK,CAACM,KAAM;AACpC;AACA;AACA,kBAAmBN,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AAChH;AACA;AACA;AACA;AACA;AACA;AACA,eAAgBA,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,WAAAA,GAA0CA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,UAAAA,GAAyC,UAAY;AAC1H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAgBA,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AAC7G,gBAAiBA,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AAC9G;AACA,iBAAkBA,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AAC/G,kBAAmBA,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AAChH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAmBA,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AAChH,iBAAkBA,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqCA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GAAAA,MAAAA,GAAqC,MAAQ;AAC/G;AACA,kBAAmBA,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,OAAAA,GAA+CX,eAAOK,KAAO;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA,wBAAyBM,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAAOI,WAAa;AAC/J,oBAAqBO,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAAOI,WAAa;AAC3J,aAAcO,KAAD,IAAYA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAAOK,KAAO;AAC3F;AACA;AACA;AACA,wBAAyBM,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAAOkB,WAAa;AAC/J,oBAAqBP,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAAOkB,WAAa;AAC3J;AACA,aAAcP,KAAD,IAAYA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAAOK,KAAO;AAC3F;AACA,IAAKM,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAmBb,eAAe,CAAA,SAAA,EAAYa,KAAK,CAAnDA,UAAkC,CAAlCA,GAAkE,EAAI;AACtF;AACA,MAAOA,KAAD,IAAWb,eAAe,CAAA,SAAA,EAAYa,KAAK,EAAjB,UAAA,CAA+B;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAyBA,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOmB,WAAa;AAC3G,aAAcR,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOoB,WAAa;AAChG,oBAAqBT,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOmB,WAAa;AACvG;AACA;AACA;AACA,0BAA2BR,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOmB,WAAa;AAC7G,eAAgBR,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOoB,WAAa;AAClG,sBAAuBT,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOmB,WAAa;AACzG;AACA;AAzGA,CAAA;AA4GA,QAAME,SAAS,GAAGZ,gCAAM,OAANA,CAA6B;AAC/C;AACA,aAAcE,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,OAAAA,GAA+CA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,KAAAA,GAA8CX,eAAOM,OAAS;AACtI,oBAAqBK,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,OAAAA,GAA+CA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,KAAAA,GAA8CX,eAAOM,OAAS;AAC7I;AACA;AACA,cAAeK,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,OAAAA,GAA+CX,eAAOM,OAAS;AACzF;AACA;AACA;AACA;AACA,aAAcK,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAAOI,WAAa;AACpJ,oBAAqBO,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAAOI,WAAa;AAC3J;AACA;AACA;AACA;AACA,kBAAmBO,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOI,WAAa;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcO,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAAOkB,WAAa;AACpJ,oBAAqBP,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAAOkB,WAAa;AAC3J;AACA;AACA;AACA;AACA,kBAAmBP,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,KAAAA,GAA8CX,eAAOkB,WAAa;AACnJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcP,KAAD,IAAYA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAAOoB,WAAa;AACjG,oBAAqBT,KAAD,IAAYA,KAAK,EAALA,UAAAA,KAAAA,MAAAA,GAA+BX,eAA/BW,WAAAA,GAAoDX,eAAOmB,WAAa;AACxG;AACA;AACA,IAAKR,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAmBb,eAAe,CAAA,WAAA,EAAca,KAAK,CAArDA,UAAkC,CAAlCA,GAAoE,EAAI;AACxF;AACA,MAAOA,KAAD,IAAWb,eAAe,CAAA,WAAA,EAAca,KAAK,EAAnB,UAAA,CAAiC;AACjE;AAlDA,CAAA;AAqDA,QAAMW,QAAQ,GAAGb,gCAAM,OAANA,CAA6B;AAC9C;AACA,aAAcE,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,OAAAA,GAA+CX,eAAOO,WAAa;AAC5F;AACA;AACA;AACA;AACA,cAAeI,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,OAAAA,GAA+CX,eAAOM,OAAS;AACzF;AACA;AACA;AACA;AACA,wBAAyBK,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,UAAAA,GAAkDX,eAAOuB,UAAY;AACzG,aAAcZ,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOI,WAAa;AAChG,oBAAqBO,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,UAAAA,GAAkDX,eAAOuB,UAAY;AACrG;AACA;AACA;AACA,kBAAmBZ,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOI,WAAa;AACrG;AACA;AACA;AACA;AACA;AACA;AACA,wBAAyBO,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOwB,WAAa;AAC3G,aAAcb,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOkB,WAAa;AAChG,oBAAqBP,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOwB,WAAa;AACvG;AACA;AACA;AACA,kBAAmBb,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOkB,WAAa;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAalB,eAAOoB,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAapB,eAAOoB,WAAY;AAChC;AACA;AACA;AACA,IAAKT,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAmBb,eAAe,CAAA,UAAA,EAAaa,KAAK,CAApDA,UAAkC,CAAlCA,GAAmE,EAAI;AACvF;AACA,MAAOA,KAAD,IAAWb,eAAe,CAAA,UAAA,EAAaa,KAAK,EAAlB,UAAA,CAAgC;AAChE;AA7DA,CAAA;AAgEA,QAAMc,OAAO,GAAGhB,gCAAM,OAANA,CAA6B;AAC7C;AACA;AACA,oBAAoBT,eAAO0B,WAAY;AACvC,wBAAwB1B,eAAO0B,WAAY;AAC3C;AACA;AACA;AACA,oBAAoB1B,eAAO2B,WAAY;AACvC,wBAAwB3B,eAAO2B,WAAY;AAC3C;AACA;AACA;AACA,oBAAoB3B,eAAO2B,WAAY;AACvC,wBAAwB3B,eAAO2B,WAAY;AAC3C;AACA;AACA;AACA,oBAAoB3B,eAAO4B,WAAY;AACvC,wBAAwB5B,eAAO4B,WAAY;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB5B,eAAOmB,WAAY;AAC3C,aAAanB,eAAOoB,WAAY;AAChC,oBAAoBpB,eAAOmB,WAAY;AACvC;AACA;AACA;AACA,0BAA0BnB,eAAOmB,WAAY;AAC7C,eAAenB,eAAOoB,WAAY;AAClC,sBAAsBpB,eAAOmB,WAAY;AACzC;AACA;AArCA,CAAA;AAwCA,QAAMU,QAAQ,GAAGpB,gCAAM,OAANA,CAA6B;AAC9C;AACA;AACA,oBAAoBT,eAAO8B,YAAa;AACxC,wBAAwB9B,eAAO8B,YAAa;AAC5C;AACA;AACA;AACA,oBAAoB9B,eAAO+B,YAAa;AACxC,wBAAwB/B,eAAO+B,YAAa;AAC5C;AACA;AACA;AACA,oBAAoB/B,eAAO+B,YAAa;AACxC,wBAAwB/B,eAAO+B,YAAa;AAC5C;AACA;AACA;AACA,oBAAoB/B,eAAOgC,YAAa;AACxC,wBAAwBhC,eAAOgC,YAAa;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBhC,eAAOmB,WAAY;AAC3C,aAAanB,eAAOoB,WAAY;AAChC,oBAAoBpB,eAAOmB,WAAY;AACvC;AACA;AACA;AACA,0BAA0BnB,eAAOmB,WAAY;AAC7C,eAAenB,eAAOoB,WAAY;AAClC,sBAAsBpB,eAAOmB,WAAY;AACzC;AACA;AArCA,CAAA;AAwCA,QAAMc,IAAI,GAAGxB,2BAAOC,MAAoB;AACxC,WAAYC,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,OAAAA,GAA+CX,eAAOM,OAAS;AACtF;AACA;AACA;AACA;AACA;AACA;AACA,IAAKK,KAAD,IACAA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GACIE,mCAAkBC,+BAAD,IAAjBD,EAA2CF,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,OAAAA,GAA+CX,eAD9FW,OACIE,CADJF,GAEIA,KAAK,CAALA,IAAAA,KAAeC,YAAfD,KAAAA,GACAI,mCAAkBD,+BAAD,IAAjBC,EAA2CJ,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,OAAAA,GAA+CX,eAD1FW,OACAI,CADAJ,GAEAK,mCAAkBF,+BAAD,IAAjBE,EAA2CL,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,OAAAA,GAA+CX,eAAzE,OAAjBgB,CAA0G;AAClH;AACA;AACA;AACA;AACA;AACA,aAAcL,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOI,WAAa;AAChG;AACA;AACA;AACA;AACA,aAAcO,KAAD,IAAYA,KAAK,CAALA,UAAAA,KAAAA,MAAAA,GAA8BX,eAA9BW,WAAAA,GAAmDX,eAAOkB,WAAa;AAChG;AACA;AACA;AACA;AACA,aAAalB,eAAOkC,WAAY;AAChC;AACA;AACA;AAhCA,CAAA;;AAkDA,QAAMS,MAA4C,GAAG,IAAA,IAY/C;AAAA,QAZgD;AACpDC,MAAAA,QAAQ,GAD4C,gBAAA;AAEpDT,MAAAA,OAAO,GAF6C,SAAA;AAGpDU,MAAAA,IAAI,GAHgD,QAAA;AAIpDC,MAAAA,IAAI,GAAGlC,YAJ6C,MAAA;AAKpDK,MAAAA,KAAK,GAL+C,MAAA;AAAA,MAAA,gBAAA;AAAA,MAAA,MAAA;AAAA,MAAA,QAAA;AAAA,MAAA,QAAA;AAUpDyB,MAAAA;AAVoD,QAYhD,IAAA;AAAA,QADD/B,KACC,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA,CACJ;;;AACA,UAAM;AAAE4B,MAAAA;AAAF,QAAN,KAAA;AAAA,UAAoBQ,WAApB,GAAA,wBAAA,CAAA,KAAA,EAAA,UAAA,CAAA;;AACA,UAAMC,eAAe,GAAGC,KAAK,CAALA,MAAAA,CAAxB,IAAwBA,CAAxB;AACA,UAAM,CAAA,UAAA,EAAA,aAAA,IAA8BA,KAAK,CAALA,QAAAA,CAApC,KAAoCA,CAApC;;AAEA,UAAMC,aAAa,GAAG,MAAA,aACpB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACGR,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAM,MAAA,SAAS,EAAE,CAACJ,gBAAgB,GAAA,cAAA,GAAjB,EAAA,KAA4CC,OAAO,GAAA,cAAA,GAAnD,MAAA;AAAjB,KAAA,EADX,IACW,CADX,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAM,MAAA,SAAS,EAAEA,OAAO,GAAA,eAAA,GAAqB;AAA7C,KAAA,EAFF,QAEE,CAFF,EAGGA,OAAO,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,kCAAA,EAVZ,IAUY,CAHd,CADF,CANI,CAcJ;;;AACA,YAAA,OAAA;AACE,WAAA,SAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,EAAA,WAAA,EAAA;AAEE,UAAA,QAAQ,EAFV,QAAA;AAGE,UAAA,IAAI,EAHN,IAAA;AAIE,UAAA,IAAI,EAJN,IAAA;AAKE,UAAA,QAAQ,EALV,QAAA;AAME,UAAA,KAAK,EANP,KAAA;AAOE,yBAPF,MAAA;AAQE,UAAA,SAAS,EAAE5B,KAAK,CAALA,OAAAA,GAAgB,mBAAmBA,KAAK,CAAxCA,SAAAA,GAAqD,MAAMA,KAAK,CAR7E,SAAA;AASE,UAAA,WAAW,EAAGwC,CAAD,IAAY;AACvB,gBAAI,CAAA,QAAA,IAAa,CAAjB,UAAA,EAA8BH,eAAe,CAAfA,OAAAA,GAAAA,IAAAA;AAVlC,WAAA;AAYE,UAAA,OAAO,EAAGG,CAAD,IAAY;AACnB,gBAAI,CAAJ,QAAA,EAAe;AACb,kBAAI,CAACH,eAAe,CAApB,OAAA,EAA8BI,aAAa,CAA3C,IAA2C,CAAbA,CAA9B,KACKJ,eAAe,CAAfA,OAAAA,GAAAA,KAAAA;AACN;AAhBL,WAAA;AAkBE,UAAA,MAAM,EAAE,MAAMI,aAAa,CAlB7B,KAkB6B,CAlB7B;AAmBE,UAAA,UAAU,EAAEX;AAnBd,SAAA,CAAA,EAAA,aAoBE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,UAAA,SAAS,EAAC;AAAf,SAAA,EAAiCS,aArBrC,EAqBI,CApBF,CADF;;AAwBF,WAAA,WAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAA,WAAA,EAAA;AAEE,UAAA,QAAQ,EAFV,QAAA;AAGE,UAAA,IAAI,EAHN,IAAA;AAIE,UAAA,IAAI,EAJN,IAAA;AAKE,UAAA,QAAQ,EALV,QAAA;AAME,UAAA,KAAK,EANP,KAAA;AAOE,yBAPF,MAAA;AAQE,UAAA,SAAS,EAAEvC,KAAK,CAALA,OAAAA,GAAgB,mBAAmBA,KAAK,CAAxCA,SAAAA,GAAqD,MAAMA,KAAK,CAR7E,SAAA;AASE,UAAA,WAAW,EAAGwC,CAAD,IAAY;AACvB,gBAAI,CAAA,QAAA,IAAa,CAAjB,UAAA,EAA8BH,eAAe,CAAfA,OAAAA,GAAAA,IAAAA;AAVlC,WAAA;AAYE,UAAA,OAAO,EAAGG,CAAD,IAAY;AACnB,gBAAI,CAAJ,QAAA,EAAe;AACb,kBAAI,CAACH,eAAe,CAApB,OAAA,EAA8BI,aAAa,CAA3C,IAA2C,CAAbA,CAA9B,KACKJ,eAAe,CAAfA,OAAAA,GAAAA,KAAAA;AACN;AAhBL,WAAA;AAkBE,UAAA,MAAM,EAAE,MAAMI,aAAa,CAlB7B,KAkB6B,CAlB7B;AAmBE,UAAA,UAAU,EAAEX;AAnBd,SAAA,CAAA,EAAA,aAoBE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,UAAA,SAAS,EAAC;AAAf,SAAA,EAAiCS,aArBrC,EAqBI,CApBF,CADF;;AAwBF,WAAA,UAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,QAAA,CAAA,EAAA,EAAA,WAAA,EAAA;AAEE,UAAA,QAAQ,EAFV,QAAA;AAGE,UAAA,IAAI,EAHN,IAAA;AAIE,UAAA,QAAQ,EAJV,QAAA;AAKE,UAAA,IAAI,EALN,IAAA;AAME,UAAA,KAAK,EANP,KAAA;AAOE,yBAPF,MAAA;AAQE,UAAA,SAAS,EAAEvC,KAAK,CAALA,OAAAA,GAAgB,mBAAmBA,KAAK,CAAxCA,SAAAA,GAAqD,MAAMA,KAAK,CAR7E,SAAA;AASE,UAAA,WAAW,EAAGwC,CAAD,IAAY;AACvB,gBAAI,CAAA,QAAA,IAAa,CAAjB,UAAA,EAA8BH,eAAe,CAAfA,OAAAA,GAAAA,IAAAA;AAVlC,WAAA;AAYE,UAAA,OAAO,EAAGG,CAAD,IAAY;AACnB,gBAAI,CAAJ,QAAA,EAAe;AACb,kBAAI,CAACH,eAAe,CAApB,OAAA,EAA8BI,aAAa,CAA3C,IAA2C,CAAbA,CAA9B,KACKJ,eAAe,CAAfA,OAAAA,GAAAA,KAAAA;AACN;AAhBL,WAAA;AAkBE,UAAA,MAAM,EAAE,MAAMI,aAAa,CAlB7B,KAkB6B,CAlB7B;AAmBE,UAAA,UAAU,EAAEX;AAnBd,SAAA,CAAA,EAAA,aAoBE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,UAAA,SAAS,EAAC;AAAf,SAAA,EAAiCS,aArBrC,EAqBI,CApBF,CADF;;AAwBF,WAAA,MAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,QAAA,CAAA,EAAA,EAAA,WAAA,EAAA;AAAuB,UAAA,QAAQ,EAA/B,QAAA;AAA2C,UAAA,IAAI,EAA/C,IAAA;AAAuD,UAAA,IAAI,EAA3D,IAAA;AAAmE,UAAA,KAAK,EAAxE,KAAA;AAAiF,yBAAaV;AAA9F,SAAA,CAAA,EADF,QACE,CADF;;AAKF,WAAA,SAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,EAAA,WAAA,EAAA;AAEE,UAAA,QAAQ,EAFV,QAAA;AAGE,UAAA,IAAI,EAHN,IAAA;AAIE,UAAA,IAAI,EAJN,IAAA;AAKE,UAAA,QAAQ,EALV,QAAA;AAME,UAAA,KAAK,EANP,KAAA;AAOE,yBAPF,MAAA;AAQE,UAAA,SAAS,EAAE7B,KAAK,CAALA,OAAAA,GAAgB,mBAAmBA,KAAK,CAAxCA,SAAAA,GAAqD,MAAMA,KAAK,CAR7E,SAAA;AASE,UAAA,WAAW,EAAGwC,CAAD,IAAY;AACvB,gBAAI,CAAA,QAAA,IAAa,CAAjB,UAAA,EAA8BH,eAAe,CAAfA,OAAAA,GAAAA,IAAAA;AAVlC,WAAA;AAYE,UAAA,OAAO,EAAGG,CAAD,IAAY;AACnB,gBAAI,CAAJ,QAAA,EAAe;AACb,kBAAI,CAACH,eAAe,CAApB,OAAA,EAA8BI,aAAa,CAA3C,IAA2C,CAAbA,CAA9B,KACKJ,eAAe,CAAfA,OAAAA,GAAAA,KAAAA;AACN;AAhBL,WAAA;AAkBE,UAAA,MAAM,EAAE,MAAMI,aAAa,CAlB7B,KAkB6B,CAlB7B;AAmBE,UAAA,UAAU,EAAEX;AAnBd,SAAA,CAAA,EAAA,aAoBE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,UAAA,SAAS,EAAC;AAAf,SAAA,EAAiCS,aArBrC,EAqBI,CApBF,CADF;;AAwBF,WAAA,UAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,QAAA,CAAA,EAAA,EAAA,WAAA,EAAA;AAEE,UAAA,QAAQ,EAFV,QAAA;AAGE,UAAA,QAAQ,EAHV,QAAA;AAIE,UAAA,IAAI,EAJN,IAAA;AAKE,UAAA,IAAI,EALN,IAAA;AAME,UAAA,KAAK,EANP,KAAA;AAOE,yBAPF,MAAA;AAQE,UAAA,SAAS,EAAEvC,KAAK,CAALA,OAAAA,GAAgB,mBAAmBA,KAAK,CAAxCA,SAAAA,GAAqD,MAAMA,KAAK,CAR7E,SAAA;AASE,UAAA,WAAW,EAAGwC,CAAD,IAAY;AACvB,gBAAI,CAAA,QAAA,IAAa,CAAjB,UAAA,EAA8BH,eAAe,CAAfA,OAAAA,GAAAA,IAAAA;AAVlC,WAAA;AAYE,UAAA,OAAO,EAAGG,CAAD,IAAY;AACnB,gBAAI,CAAJ,QAAA,EAAe;AACb,kBAAI,CAACH,eAAe,CAApB,OAAA,EAA8BI,aAAa,CAA3C,IAA2C,CAAbA,CAA9B,KACKJ,eAAe,CAAfA,OAAAA,GAAAA,KAAAA;AACN;AAhBL,WAAA;AAkBE,UAAA,MAAM,EAAE,MAAMI,aAAa,CAlB7B,KAkB6B,CAlB7B;AAmBE,UAAA,UAAU,EAAEX;AAnBd,SAAA,CAAA,EAAA,aAoBE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,UAAA,SAAS,EAAC;AAAf,SAAA,EAAiCS,aArBrC,EAqBI,CApBF,CADF;;AAwBF;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,EAAA,WAAA,EAAA;AAEE,UAAA,QAAQ,EAFV,QAAA;AAGE,UAAA,QAAQ,EAHV,QAAA;AAIE,UAAA,IAAI,EAJN,IAAA;AAKE,UAAA,IAAI,EALN,IAAA;AAME,UAAA,KAAK,EANP,KAAA;AAOE,yBAPF,MAAA;AAQE,UAAA,SAAS,EAAEvC,KAAK,CAALA,OAAAA,GAAgB,mBAAmBA,KAAK,CAAxCA,SAAAA,GAAqD,MAAMA,KAAK,CAR7E,SAAA;AASE,UAAA,WAAW,EAAGwC,CAAD,IAAY;AACvB,gBAAI,CAAA,QAAA,IAAa,CAAjB,UAAA,EAA8BH,eAAe,CAAfA,OAAAA,GAAAA,IAAAA;AAVlC,WAAA;AAYE,UAAA,OAAO,EAAGG,CAAD,IAAY;AACnB,gBAAI,CAAJ,QAAA,EAAe;AACb,kBAAI,CAACH,eAAe,CAApB,OAAA,EAA8BI,aAAa,CAA3C,IAA2C,CAAbA,CAA9B,KACKJ,eAAe,CAAfA,OAAAA,GAAAA,KAAAA;AACN;AAhBL,WAAA;AAkBE,UAAA,MAAM,EAAE,MAAMI,aAAa,CAlB7B,KAkB6B,CAlB7B;AAmBE,UAAA,UAAU,EAAEX;AAnBd,SAAA,CAAA,EAAA,aAoBE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,UAAA,SAAS,EAAC;AAAf,SAAA,EAAiCS,aArBrC,EAqBI,CApBF,CADF;AArIJ;AA3BF,GAAA;;;AAdEf,IAAAA,O,6BAAU,S,EAAY,W,EAAc,U,EAAa,M,EAAS,S,EAAY,U;AAEtEC,IAAAA,I,4DAAO,Q;AACPC,IAAAA,K;AAEAC,IAAAA,gB;AACAnC,IAAAA,U,6BAAa,M,EAAS,M;AACtBc,IAAAA,K,4DAAQ,M;AACRsB,IAAAA,O;AACAC,IAAAA,M;AACAC,IAAAA,U;AACAC,IAAAA,I;;oBA8LF,M","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS, TYPOGRAPHY } from '../styles';\nimport { Size } from '../types';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\n\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\n switch (variant) {\n case 'primary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n color: ${colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};\n }\n `;\n case 'secondary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\n color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\n }\n `;\n case 'tertiary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${COLORS.white};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\n color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\n }\n `;\n\n default:\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\n }\n `;\n }\n};\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: none !important;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin-left: -4px;\n margin-top: -2px;\n margin-bottom: -2px;\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .extramargin {\n margin-right: 9px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n box-shadow: none !important;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('primary', props?.colorTheme)};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: white;\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n cursor: not-allowed;\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('secondary', props?.colorTheme)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent;\n cursor: not-allowed;\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n cursor: not-allowed;\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('tertiary', props?.colorTheme)};\n }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n }\n`;\n\nconst Text = styled.button<ButtonProps>`\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n background-color: transparent;\n padding: 0;\n border: none;\n cursor: pointer;\n\n text-decoration: underline;\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n : ComponentMStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n\n &:hover,\n &:focus,\n &.hover-state,\n &.focus-state {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n background: transparent;\n }\n &:active,\n &.active-state {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n background: transparent;\n }\n &:disabled,\n &.disabled-state {\n color: ${COLORS.neutral_500};\n background: transparent;\n cursor: not-allowed;\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'correct' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n imageExtraMargin?: boolean;\n colorTheme?: 'teal' | 'dark';\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n tabbedHere?: boolean;\n icon?: React.ReactNode;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n children = 'Primary Button',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n imageExtraMargin,\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const renderContent = () => (\n <>\n {icon && <span className={(imageExtraMargin ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n <span className={loading ? 'label loading' : 'label'}>{children}</span>\n {loading && <LoadingIndicator></LoadingIndicator>}\n </>\n );\n\n // Let's render button\n switch (variant) {\n case 'primary':\n return (\n <Primary\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Primary>\n );\n case 'secondary':\n return (\n <Secondary\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Secondary>\n );\n case 'tertiary':\n return (\n <Tertiary\n {...renderProps}\n disabled={disabled}\n type={type}\n flatEdge={flatEdge}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Tertiary>\n );\n case 'text':\n return (\n <Text {...renderProps} disabled={disabled} type={type} size={size} width={width} data-testid={testId}>\n {children}\n </Text>\n );\n case 'correct':\n return (\n <Correct\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Correct>\n );\n case 'critical':\n return (\n <Critical\n {...renderProps}\n disabled={disabled}\n flatEdge={flatEdge}\n type={type}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Critical>\n );\n default:\n return (\n <Primary\n {...renderProps}\n flatEdge={flatEdge}\n disabled={disabled}\n type={type}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Primary>\n );\n }\n};\n\nexport default Button;\n"],"file":"Button.js"}
|