@kaio-xyz/design-system 1.1.38 → 1.1.40
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/index.cjs.js +102 -69
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +14 -3
- package/dist/index.esm.js +100 -69
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -11,6 +11,7 @@ var RDropdownMenu = require('@radix-ui/react-dropdown-menu');
|
|
|
11
11
|
var RTooltip = require('@radix-ui/react-tooltip');
|
|
12
12
|
var recharts = require('recharts');
|
|
13
13
|
var DataTable = require('react-data-table-component');
|
|
14
|
+
var RTabs = require('@radix-ui/react-tabs');
|
|
14
15
|
|
|
15
16
|
function _interopNamespaceDefault(e) {
|
|
16
17
|
var n = Object.create(null);
|
|
@@ -33,6 +34,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
|
33
34
|
var RAccordion__namespace = /*#__PURE__*/_interopNamespaceDefault(RAccordion);
|
|
34
35
|
var RDropdownMenu__namespace = /*#__PURE__*/_interopNamespaceDefault(RDropdownMenu);
|
|
35
36
|
var RTooltip__namespace = /*#__PURE__*/_interopNamespaceDefault(RTooltip);
|
|
37
|
+
var RTabs__namespace = /*#__PURE__*/_interopNamespaceDefault(RTabs);
|
|
36
38
|
|
|
37
39
|
/******************************************************************************
|
|
38
40
|
Copyright (c) Microsoft Corporation.
|
|
@@ -321,17 +323,17 @@ var SvgArrowUpRight = function SvgArrowUpRight(props) {
|
|
|
321
323
|
})));
|
|
322
324
|
};
|
|
323
325
|
|
|
324
|
-
var style$
|
|
326
|
+
var style$v = {"root":"stack-module__root__AqSLk"};
|
|
325
327
|
|
|
326
328
|
var Stack = function (_a) {
|
|
327
329
|
var children = _a.children, _b = _a.space, space = _b === void 0 ? "s" : _b, className = _a.className, _c = _a.position, position = _c === void 0 ? "vertical" : _c, _d = _a.fullHeight, fullHeight = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, dataTest = _a.dataTest, dataAlignItems = _a.dataAlignItems, dataCapitalize = _a.dataCapitalize, dataMarginTop = _a.dataMarginTop, dataMarginBottom = _a.dataMarginBottom, dataMarginLeft = _a.dataMarginLeft, dataPaddingBottom = _a.dataPaddingBottom, as = _a.as, rest = __rest(_a, ["children", "space", "className", "position", "fullHeight", "fullWidth", "dataTest", "dataAlignItems", "dataCapitalize", "dataMarginTop", "dataMarginBottom", "dataMarginLeft", "dataPaddingBottom", "as"]);
|
|
328
330
|
var Tag = as || "div";
|
|
329
|
-
return (jsxRuntime.jsx(Tag, __assign({ className: clsx(style$
|
|
331
|
+
return (jsxRuntime.jsx(Tag, __assign({ className: clsx(style$v.root, className), "data-space": space, "data-position": position, "data-full-width": fullWidth, "data-full-height": fullHeight, "data-test": dataTest, "data-align-items": dataAlignItems, "data-capitalize": dataCapitalize, "data-margin-top": dataMarginTop, "data-margin-bottom": dataMarginBottom, "data-margin-left": dataMarginLeft, "data-padding-bottom": dataPaddingBottom }, rest, { children: children })));
|
|
330
332
|
};
|
|
331
333
|
|
|
332
334
|
var baseStyle = {"root":"badge-base-module__root__oUZlm"};
|
|
333
335
|
|
|
334
|
-
var style$
|
|
336
|
+
var style$u = {"root":"badge-module__root__rXpaz"};
|
|
335
337
|
|
|
336
338
|
var BadgeStatuses = {
|
|
337
339
|
success: "success",
|
|
@@ -351,16 +353,16 @@ var Badge = function (_a) {
|
|
|
351
353
|
default: return jsxRuntime.jsx(SvgCircleDashed, {});
|
|
352
354
|
}
|
|
353
355
|
}, [status]);
|
|
354
|
-
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$
|
|
356
|
+
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$u.root, className), "data-status": status, "data-full-width": fullWidth, "data-test": dataTest, "data-reverted": reverted, "data-size": size }, props, { children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, children] }) })));
|
|
355
357
|
};
|
|
356
358
|
|
|
357
|
-
var style$
|
|
359
|
+
var style$t = {"root":"button-module__root__CDCDX"};
|
|
358
360
|
|
|
359
|
-
var style$
|
|
361
|
+
var style$s = {"root":"spinned-icon-module__root__xchkj"};
|
|
360
362
|
|
|
361
363
|
var SpinnedIcon = function (_a) {
|
|
362
364
|
var _b = _a.size, size = _b === void 0 ? 22 : _b, _c = _a.duration, duration = _c === void 0 ? 1 : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.icon, Icon = _e === void 0 ? SvgLoader : _e, rest = __rest(_a, ["size", "duration", "className", "icon"]);
|
|
363
|
-
return (jsxRuntime.jsx("div", { className: clsx(style$
|
|
365
|
+
return (jsxRuntime.jsx("div", { className: clsx(style$s.root, className), style: {
|
|
364
366
|
width: size,
|
|
365
367
|
height: size,
|
|
366
368
|
animationDuration: "".concat(duration, "s"),
|
|
@@ -374,19 +376,19 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
374
376
|
var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps, { viewBox: "0 0 24 24" }));
|
|
375
377
|
var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
|
|
376
378
|
var iconChild = loadingIcon || baseIcon || null;
|
|
377
|
-
var classes = clsx(style$
|
|
379
|
+
var classes = clsx(style$t.root, props.className);
|
|
378
380
|
return (isAnchor(props) ? (jsxRuntime.jsx("a", __assign({ "aria-disabled": props.disabled, ref: ref }, props, { className: classes, children: props.children }))) : (jsxRuntime.jsx("button", __assign({ "aria-disabled": props.disabled, ref: ref, type: "button" }, props, { className: classes, "data-type": variant, "data-size": size, "data-full-width": fullWidth, "data-inverted": isInverted, disabled: props.disabled || isLoading, "data-is-loading": isLoading, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconChild, isLoading ? "Loading" : props.children] }) }))));
|
|
379
381
|
});
|
|
380
382
|
Button.displayName = "Button";
|
|
381
383
|
|
|
382
|
-
var style$
|
|
384
|
+
var style$r = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
|
|
383
385
|
|
|
384
386
|
var Hint = function (_a) {
|
|
385
387
|
var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
|
|
386
|
-
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$
|
|
388
|
+
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$r.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$r.children, children: children })] })));
|
|
387
389
|
};
|
|
388
390
|
|
|
389
|
-
var style$
|
|
391
|
+
var style$q = {"field":"text-field-module__field__iZ0TF","label":"text-field-module__label__ClJkz","container":"text-field-module__container__IKtNZ","fieldWrapper":"text-field-module__fieldWrapper__nQ7l8","textField":"text-field-module__textField__756eR","hint":"text-field-module__hint__Ad6VA"};
|
|
390
392
|
|
|
391
393
|
var TextField = React.forwardRef(function (_a, ref) {
|
|
392
394
|
var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, invalid = _a.invalid, button = _a.button, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.noPadding, noPadding = _d === void 0 ? false : _d, _e = _a.floatingLabel, floatingLabel = _e === void 0 ? true : _e, value = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "invalid", "button", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur"]);
|
|
@@ -423,28 +425,28 @@ var TextField = React.forwardRef(function (_a, ref) {
|
|
|
423
425
|
setHasValue(e.target.value.length > 0);
|
|
424
426
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
425
427
|
};
|
|
426
|
-
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
428
|
+
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$q.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$q.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$q.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$q.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$q.field, readOnly: readOnly, "data-type": "single", "data-size": size, "data-floating-label": floatingLabel, id: id, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, "data-invalid": invalid, ref: inputRef, type: "text", value: value, defaultValue: defaultValue }, attributes)), button ? button : null] }), hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$q.hint, children: hint })] }) }));
|
|
427
429
|
});
|
|
428
430
|
TextField.displayName = "TextField";
|
|
429
431
|
|
|
430
|
-
var style$
|
|
432
|
+
var style$p = {"container":"container-module__container__CAxQw"};
|
|
431
433
|
|
|
432
434
|
var Container = function (_a) {
|
|
433
435
|
var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
|
|
434
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$
|
|
436
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$p.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
435
437
|
};
|
|
436
438
|
|
|
437
|
-
var style$
|
|
439
|
+
var style$o = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
|
|
438
440
|
|
|
439
441
|
var PasswordField = React.forwardRef(function (_a, ref) {
|
|
440
442
|
var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
|
|
441
443
|
var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
|
|
442
|
-
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$
|
|
443
|
-
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$
|
|
444
|
+
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$o.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
|
|
445
|
+
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$o.field })));
|
|
444
446
|
});
|
|
445
447
|
PasswordField.displayName = "PasswordField";
|
|
446
448
|
|
|
447
|
-
var style$
|
|
449
|
+
var style$n = {"validator":"validate-password-field-module__validator__Do-6w"};
|
|
448
450
|
|
|
449
451
|
var rules = {
|
|
450
452
|
length: /^.{8,}$/,
|
|
@@ -469,19 +471,19 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
|
|
|
469
471
|
React.useEffect(function () {
|
|
470
472
|
setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
|
|
471
473
|
}, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
|
|
472
|
-
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$
|
|
474
|
+
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$n.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
|
|
473
475
|
return (jsxRuntime.jsxs(Stack, { space: "m", children: [jsxRuntime.jsx(PasswordField, __assign({ onChange: onHandleChange, ref: ref }, rest)), jsxRuntime.jsxs(Stack, { children: [getValidator(isLenghtCheckOk, "At least 8 characters"), getValidator(isCaseCheckOk, "Include uppercase & lowercase letters"), getValidator(isNumberCheckOk, "Include at least one number"), getValidator(isSpecialCheckOk, "Include at least one special character (allowed: @ $ ! % * ? & _ #)")] })] }));
|
|
474
476
|
});
|
|
475
477
|
ValidatePasswordField.displayName = "ValidatePasswordField";
|
|
476
478
|
|
|
477
|
-
var style$
|
|
479
|
+
var style$m = {"root":"label-module__root__34bJr"};
|
|
478
480
|
|
|
479
481
|
var Label = function (_a) {
|
|
480
482
|
var id = _a.id, label = _a.label, className = _a.className, _b = _a.hasMargin, hasMargin = _b === void 0 ? true : _b, _c = _a.hasHalfMargin, hasHalfMargin = _c === void 0 ? false : _c, _d = _a.hasCursorPointer, hasCursorPointer = _d === void 0 ? false : _d;
|
|
481
|
-
return (jsxRuntime.jsx("label", { className: clsx(style$
|
|
483
|
+
return (jsxRuntime.jsx("label", { className: clsx(style$m.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
|
|
482
484
|
};
|
|
483
485
|
|
|
484
|
-
var style$
|
|
486
|
+
var style$l = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
|
|
485
487
|
|
|
486
488
|
var IconAndLabel = function (_a) {
|
|
487
489
|
var children = _a.children, Icon = _a.icon;
|
|
@@ -502,7 +504,7 @@ var CustomSingleValue = function (_a) {
|
|
|
502
504
|
};
|
|
503
505
|
var Select = function (_a) {
|
|
504
506
|
var id = _a.id, label = _a.label, dataTest = _a.dataTest, isDisabled = _a.isDisabled, className = _a.className, error = _a.error, customComponents = _a.components, rest = __rest(_a, ["id", "label", "dataTest", "isDisabled", "className", "error", "components"]);
|
|
505
|
-
return (jsxRuntime.jsxs("div", { className: clsx(style$
|
|
507
|
+
return (jsxRuntime.jsxs("div", { className: clsx(style$l.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$l.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$l.selector, "data-error": !!error, children: [jsxRuntime.jsx(ReactSelect, __assign({ id: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { isDisabled: isDisabled })), error && jsxRuntime.jsx(Hint, { kind: "error", className: style$l.hint, children: error })] })] }));
|
|
506
508
|
};
|
|
507
509
|
Select.displayName = "Select";
|
|
508
510
|
|
|
@@ -515,14 +517,14 @@ var FormSelect = function (_a) {
|
|
|
515
517
|
};
|
|
516
518
|
FormSelect.displayName = "FormSelect";
|
|
517
519
|
|
|
518
|
-
var style$
|
|
520
|
+
var style$k = {"root":"loader-module__root__qnInQ"};
|
|
519
521
|
|
|
520
522
|
var Loader = function (_a) {
|
|
521
523
|
var text = _a.text, _b = _a.isLightOverlay, isLightOverlay = _b === void 0 ? false : _b, children = _a.children;
|
|
522
|
-
return (jsxRuntime.jsx("div", { className: style$
|
|
524
|
+
return (jsxRuntime.jsx("div", { className: style$k.root, "data-is-light-overlay": isLightOverlay, children: jsxRuntime.jsxs(Stack, { dataAlignItems: "center", children: [jsxRuntime.jsx(SpinnedIcon, { size: 50 }), text && jsxRuntime.jsx("p", { children: text }), children] }) }));
|
|
523
525
|
};
|
|
524
526
|
|
|
525
|
-
var style$
|
|
527
|
+
var style$j = {"root":"checkbox-module__root__W52jD","customCheckbox":"checkbox-module__customCheckbox__LACTE","label":"checkbox-module__label__ujd0G","frame":"checkbox-module__frame__njRTK","icon":"checkbox-module__icon__7kQzK"};
|
|
526
528
|
|
|
527
529
|
var Checkbox = function (_a) {
|
|
528
530
|
var className = _a.className, disabled = _a.disabled, id = _a.id, label = _a.label, _b = _a.verticalAlign, verticalAlign = _b === void 0 ? "center" : _b, onChange = _a.onChange, dataTest = _a.dataTest, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.variant, variant = _d === void 0 ? "primary" : _d, _e = _a.indeterminate, indeterminate = _e === void 0 ? false : _e, checked = _a.checked, attributes = __rest(_a, ["className", "disabled", "id", "label", "verticalAlign", "onChange", "dataTest", "size", "variant", "indeterminate", "checked"]);
|
|
@@ -535,11 +537,11 @@ var Checkbox = function (_a) {
|
|
|
535
537
|
var dynamicStyle = {
|
|
536
538
|
"--vAlign": verticalAlign,
|
|
537
539
|
};
|
|
538
|
-
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$
|
|
540
|
+
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$j.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$j.frame, children: [jsxRuntime.jsx("input", __assign({ "aria-disabled": disabled, disabled: disabled, onChange: onChange, type: "checkbox", ref: inputRef, checked: checked }, attributes, { id: id, "data-test": dataTest })), jsxRuntime.jsxs("span", { className: style$j.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$j.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$j.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$j.label, children: label })] }));
|
|
539
541
|
};
|
|
540
542
|
Checkbox.displayName = "Checkbox";
|
|
541
543
|
|
|
542
|
-
var style$
|
|
544
|
+
var style$i = {"root":"clipboard-module__root__wVZhy"};
|
|
543
545
|
|
|
544
546
|
var trimString = function (str, noOfChars) {
|
|
545
547
|
if (noOfChars === void 0) { noOfChars = 4; }
|
|
@@ -563,42 +565,42 @@ var Clipboard = function (_a) {
|
|
|
563
565
|
}, [value]);
|
|
564
566
|
var text = isShowingCopy ? 'Copied!' : displayValue;
|
|
565
567
|
var icon = isShowingCopy ? jsxRuntime.jsx(SvgCheck, { viewBox: "0 0 24 24" }) : jsxRuntime.jsx(SvgClipboard, { viewBox: "0 0 24 24" });
|
|
566
|
-
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$
|
|
568
|
+
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$i.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, "data-test": dataTest, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [jsxRuntime.jsx("span", { children: text }), icon] }) }));
|
|
567
569
|
};
|
|
568
570
|
|
|
569
|
-
var style$
|
|
571
|
+
var style$h = {"root":"stepper-module__root__hgDss"};
|
|
570
572
|
|
|
571
573
|
var Stepper = function (_a) {
|
|
572
574
|
var children = _a.children, dataTest = _a.dataTest, className = _a.className;
|
|
573
|
-
return (jsxRuntime.jsx("ul", { className: clsx(style$
|
|
575
|
+
return (jsxRuntime.jsx("ul", { className: clsx(style$h.root, className), "data-test": dataTest, children: children }));
|
|
574
576
|
};
|
|
575
577
|
|
|
576
|
-
var style$
|
|
578
|
+
var style$g = {"root":"step-module__root__Tk1Yq","container":"step-module__container__XbQSB","label":"step-module__label__UNF3I","emptyIcon":"step-module__emptyIcon__-xNcB","checkIcon":"step-module__checkIcon__MWBUM","loadingIcon":"step-module__loadingIcon__-VoCZ"};
|
|
577
579
|
|
|
578
580
|
var Step = function (_a) {
|
|
579
581
|
var key = _a.key, label = _a.label, dataTest = _a.dataTest, _b = _a.iconSize, iconSize = _b === void 0 ? 16 : _b, _c = _a.isCompleted, isCompleted = _c === void 0 ? false : _c, _d = _a.isCurrent, isCurrent = _d === void 0 ? false : _d;
|
|
580
582
|
var icon = React.useMemo(function () {
|
|
581
583
|
switch (true) {
|
|
582
|
-
case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$
|
|
583
|
-
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$
|
|
584
|
-
default: return jsxRuntime.jsx("span", { className: style$
|
|
584
|
+
case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$g.checkIcon, viewBox: "0 0 24 24" });
|
|
585
|
+
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$g.loadingIcon });
|
|
586
|
+
default: return jsxRuntime.jsx("span", { className: style$g.emptyIcon });
|
|
585
587
|
}
|
|
586
588
|
}, [isCompleted, isCurrent]);
|
|
587
|
-
return (jsxRuntime.jsx("li", { className: style$
|
|
589
|
+
return (jsxRuntime.jsx("li", { className: style$g.root, "data-is-current": isCurrent, "data-test": dataTest, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$g.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$g.label, children: label })] }) }, key));
|
|
588
590
|
};
|
|
589
591
|
|
|
590
|
-
var style$
|
|
592
|
+
var style$f = {"root":"list-module__root__OXx93"};
|
|
591
593
|
|
|
592
|
-
var List = function (_a) {
|
|
594
|
+
var List$1 = function (_a) {
|
|
593
595
|
var label = _a.label, children = _a.children;
|
|
594
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
596
|
+
return (jsxRuntime.jsxs(Stack, { className: style$f.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
|
|
595
597
|
};
|
|
596
598
|
|
|
597
|
-
var style$
|
|
599
|
+
var style$e = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
|
|
598
600
|
|
|
599
601
|
var ListItem = function (_a) {
|
|
600
602
|
var value = _a.value, label = _a.label, key = _a.key;
|
|
601
|
-
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style$
|
|
603
|
+
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style$e.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style$e.label, children: label }), jsxRuntime.jsx("span", { className: style$e.value, children: value })] }) }, key));
|
|
602
604
|
};
|
|
603
605
|
|
|
604
606
|
var AccordionRoot = function (_a) {
|
|
@@ -606,38 +608,38 @@ var AccordionRoot = function (_a) {
|
|
|
606
608
|
return (jsxRuntime.jsx(RAccordion__namespace.Root, __assign({}, rest, { children: children })));
|
|
607
609
|
};
|
|
608
610
|
|
|
609
|
-
var style$
|
|
611
|
+
var style$d = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
|
|
610
612
|
|
|
611
613
|
var AccordionContent = React.forwardRef(function (_a, forwardedRef) {
|
|
612
614
|
var children = _a.children, className = _a.className, hasChildrenPadding = _a.hasChildrenPadding, rest = __rest(_a, ["children", "className", "hasChildrenPadding"]);
|
|
613
|
-
return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$
|
|
615
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$d.content, className), ref: forwardedRef }, rest, { children: jsxRuntime.jsx("div", { className: style$d.childrenContainer, children: jsxRuntime.jsx("div", { className: style$d.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
|
|
614
616
|
});
|
|
615
617
|
AccordionContent.displayName = "AccordionContent";
|
|
616
618
|
|
|
617
|
-
var style$
|
|
619
|
+
var style$c = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
|
|
618
620
|
|
|
619
621
|
var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
|
|
620
622
|
var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, dataTest = _a.dataTest, rest = __rest(_a, ["children", "className", "dataTest"]);
|
|
621
|
-
return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$
|
|
623
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$c.header, children: jsxRuntime.jsx(RAccordion__namespace.Trigger, __assign({ className: clsx(style$c.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
|
|
622
624
|
});
|
|
623
625
|
AccordionTrigger.displayName = "AccordionTrigger";
|
|
624
626
|
|
|
625
|
-
var style$
|
|
627
|
+
var style$b = {"root":"accordion-item-module__root__1Yk4f"};
|
|
626
628
|
|
|
627
629
|
var AccordionItem = React.forwardRef(function (_a, forwardedRef) {
|
|
628
630
|
var value = _a.value, trigger = _a.trigger, triggerClassName = _a.triggerClassName, children = _a.children, dataTest = _a.dataTest, _b = _a.hasChildrenPadding, hasChildrenPadding = _b === void 0 ? true : _b;
|
|
629
|
-
return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$
|
|
631
|
+
return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$b.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsxRuntime.jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsxRuntime.jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
|
|
630
632
|
});
|
|
631
633
|
AccordionItem.displayName = "AccordionItem";
|
|
632
634
|
|
|
633
635
|
var Accordion = { Root: AccordionRoot, Item: AccordionItem };
|
|
634
636
|
|
|
635
|
-
var style$
|
|
637
|
+
var style$a = {"modal":"modal-module__modal__X2VmM","content":"modal-module__content__Hrybc","header":"modal-module__header__vvu8s","backdrop":"modal-module__backdrop__yqE8l","body":"modal-module__body__ax2L0","bodyWrapper":"modal-module__bodyWrapper__uj88Q","actions":"modal-module__actions__uueCa"};
|
|
636
638
|
|
|
637
639
|
var ModalElement = function (_a) {
|
|
638
640
|
var id = _a.id, children = _a.children, className = _a.className, _b = _a.title, title = _b === void 0 ? "No title" : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, onClose = _a.onClose, _d = _a.actions, actions = _d === void 0 ? [] : _d, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? true : _e, _f = _a.isScrollable, isScrollable = _f === void 0 ? false : _f, visible = _a.visible, attributes = __rest(_a, ["id", "children", "className", "title", "size", "onClose", "actions", "isFullWidth", "isScrollable", "visible"]);
|
|
639
641
|
var modalRef = React.useRef(null);
|
|
640
|
-
return (jsxRuntime.jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$
|
|
642
|
+
return (jsxRuntime.jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$a.modal, className), "data-test": "Modal__Div__content", "data-visible": visible, "data-is-not-closable": !onClose }, attributes, { children: [jsxRuntime.jsx("dialog", { className: style$a.backdrop }), jsxRuntime.jsx("div", { className: style$a.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxRuntime.jsxs("div", { className: style$a.bodyWrapper, children: __spreadArray([title && (jsxRuntime.jsxs("div", { className: style$a.header, children: [jsxRuntime.jsx("h2", { id: id, children: title }), jsxRuntime.jsx(SvgCross, { "data-icon": true, onClick: onClose })] })), jsxRuntime.jsx("div", { className: style$a.body, children: children })], actions.map(function (i, idx) { return jsxRuntime.jsx("div", { className: style$a.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
|
|
641
643
|
};
|
|
642
644
|
var Modal = function (_a) {
|
|
643
645
|
var visible = _a.visible, props = __rest(_a, ["visible"]);
|
|
@@ -668,28 +670,28 @@ var InfoModal = function (_a) {
|
|
|
668
670
|
return (jsxRuntime.jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
|
|
669
671
|
};
|
|
670
672
|
|
|
671
|
-
var style$
|
|
673
|
+
var style$9 = {"content":"dropdown-menu-module__content__sSYNC","arrow":"dropdown-menu-module__arrow__AFHzK","trigger":"dropdown-menu-module__trigger__GLDRV"};
|
|
672
674
|
|
|
673
675
|
var DropdownMenu$1 = function (_a) {
|
|
674
676
|
var text = _a.text, children = _a.children, Icon = _a.icon, disabled = _a.disabled, body = _a.body, variant = _a.variant, rest = __rest(_a, ["text", "children", "icon", "disabled", "body", "variant"]);
|
|
675
677
|
var defaultBody = !text ? Icon && jsxRuntime.jsx(Icon, { viewBox: "0 0 24 24" }) : jsxRuntime.jsx(Button, { icon: Icon, variant: variant, children: text });
|
|
676
|
-
return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$
|
|
678
|
+
return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$9.trigger, disabled: disabled, children: body ? body : defaultBody })), jsxRuntime.jsx(RDropdownMenu__namespace.Portal, { children: jsxRuntime.jsxs(RDropdownMenu__namespace.Content, { className: style$9.content, sideOffset: 5, children: [children, jsxRuntime.jsx(RDropdownMenu__namespace.Arrow, { className: style$9.arrow })] }) })] }));
|
|
677
679
|
};
|
|
678
680
|
|
|
679
|
-
var style$
|
|
681
|
+
var style$8 = {"root":"dropdown-menu-item-module__root__zs510"};
|
|
680
682
|
|
|
681
683
|
var DropdownMenuItem = function (_a) {
|
|
682
684
|
var children = _a.children, disabled = _a.disabled, onClick = _a.onClick, rest = __rest(_a, ["children", "disabled", "onClick"]);
|
|
683
|
-
return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$
|
|
685
|
+
return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$8.root, onClick: !disabled ? onClick : undefined, disabled: disabled }, rest, { children: children })));
|
|
684
686
|
};
|
|
685
687
|
|
|
686
688
|
var DropdownMenu = { Root: DropdownMenu$1, Item: DropdownMenuItem };
|
|
687
689
|
|
|
688
|
-
var style$
|
|
690
|
+
var style$7 = {"trigger":"tooltip-module__trigger__8Eylk","content":"tooltip-module__content__9x6LA","title":"tooltip-module__title__Vkj38","icon":"tooltip-module__icon__4oV3Q","body":"tooltip-module__body__TQO-V","description":"tooltip-module__description__WSiRK","arrow":"tooltip-module__arrow__7pf9p"};
|
|
689
691
|
|
|
690
692
|
var Tooltip = function (_a) {
|
|
691
693
|
var children = _a.children, title = _a.title, description = _a.description;
|
|
692
|
-
return (jsxRuntime.jsx(RTooltip__namespace.Provider, { children: jsxRuntime.jsxs(RTooltip__namespace.Root, { children: [jsxRuntime.jsx(RTooltip__namespace.Trigger, { className: style$
|
|
694
|
+
return (jsxRuntime.jsx(RTooltip__namespace.Provider, { children: jsxRuntime.jsxs(RTooltip__namespace.Root, { children: [jsxRuntime.jsx(RTooltip__namespace.Trigger, { className: style$7.trigger, asChild: true, children: children }), jsxRuntime.jsx(RTooltip__namespace.Portal, { children: jsxRuntime.jsxs(RTooltip__namespace.Content, { className: style$7.content, sideOffset: 2, children: [jsxRuntime.jsx(SvgInfo, { className: style$7.icon, width: 20, height: 20 }), jsxRuntime.jsxs("div", { className: style$7.body, children: [jsxRuntime.jsx("span", { className: style$7.title, children: title }), description && jsxRuntime.jsx("span", { className: style$7.description, children: description })] }), jsxRuntime.jsx(RTooltip__namespace.Arrow, { className: style$7.arrow })] }) })] }) }));
|
|
693
695
|
};
|
|
694
696
|
|
|
695
697
|
var isEnter = function (e) { return e.key === "Enter"; };
|
|
@@ -735,7 +737,7 @@ var formatNumberWithCurrency = function (amount, currency) {
|
|
|
735
737
|
return "".concat(currency, " ").concat(formatNumber(amount, isDollarCurrency(currency) ? 2 : 6));
|
|
736
738
|
};
|
|
737
739
|
|
|
738
|
-
var style$
|
|
740
|
+
var style$6 = {"root":"investments-graph-module__root__-BKux","paddedWrapper":"investments-graph-module__paddedWrapper__afkOR","timeframeSelector":"investments-graph-module__timeframeSelector__7TkDU","timeFrameValue":"investments-graph-module__timeFrameValue__CQRqG"};
|
|
739
741
|
|
|
740
742
|
var Timeframes = {
|
|
741
743
|
month: "month",
|
|
@@ -804,8 +806,8 @@ var InvestmentGraph = function (_a) {
|
|
|
804
806
|
? ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month]
|
|
805
807
|
: "";
|
|
806
808
|
};
|
|
807
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
808
|
-
return jsxRuntime.jsx("button", { tabIndex: 0, onKeyDown: function (e) { return (isEnter(e) ? setTimeFrame(p) : null); }, className: style$
|
|
809
|
+
return (jsxRuntime.jsxs(Stack, { className: style$6.root, space: "m", children: [jsxRuntime.jsxs(Stack, { space: "none", children: [header && (jsxRuntime.jsx("div", { className: style$6.paddedWrapper, children: header })), jsxRuntime.jsx(Stack, { position: "horizontal-space", children: jsxRuntime.jsx("div", { className: clsx(style$6.timeframeSelector, style$6.paddedWrapper), children: periodOptions.map(function (p) {
|
|
810
|
+
return jsxRuntime.jsx("button", { tabIndex: 0, onKeyDown: function (e) { return (isEnter(e) ? setTimeFrame(p) : null); }, className: style$6.timeFrameValue, "data-active": (timeFrame === null || timeFrame === void 0 ? void 0 : timeFrame.value) === p.value ? "true" : "false", onClick: function () { return setTimeFrame(p); }, children: p.label }, p.value);
|
|
809
811
|
}) }) })] }), jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", minHeight: 500, children: jsxRuntime.jsxs(recharts.AreaChart, { width: 500, height: 300, data: dataBasedOnPeriod, children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("linearGradient", { id: "splitColor", x1: "0", y1: "0", x2: "0", y2: "1", children: hasPositiveAndNegativeValues
|
|
810
812
|
? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("stop", { offset: off, stopColor: "var(--semantic-success)", stopOpacity: 1 }), jsxRuntime.jsx("stop", { offset: off, stopColor: "var(--semantic-error)", stopOpacity: 1 })] }))
|
|
811
813
|
: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("stop", { offset: "5%", stopColor: "var(--primary-30)", stopOpacity: 0.8 }), jsxRuntime.jsx("stop", { offset: "95%", stopColor: "var(--neutral-90)", stopOpacity: 0 })] })) }) }), jsxRuntime.jsx(recharts.XAxis, { dataKey: "date", strokeWidth: 0, style: { fill: "var(--neutral-45)" }, tickFormatter: formatXAxis }), jsxRuntime.jsx(recharts.YAxis, { dataKey: "value", strokeWidth: 0, axisLine: false, tickLine: false, scale: "auto", domain: hasNegativeValues && hasPositiveValues ? ["auto", "auto"] : [dataMin, dataMax], tickCount: 6, tick: false, width: 10 }), jsxRuntime.jsx(recharts.Tooltip, { contentStyle: {
|
|
@@ -820,14 +822,14 @@ var InvestmentGraph = function (_a) {
|
|
|
820
822
|
}, labelFormatter: function (e) { return formatDate(e); } }), jsxRuntime.jsx(recharts.Area, { dataKey: "value", strokeWidth: 2.5, activeDot: { r: 6, fill: "var(--neutral-90)", stroke: "white", strokeWidth: 2 }, stroke: "var(--neutral-70)", fillOpacity: 1, fill: "url(#splitColor)", baseValue: dataMin })] }) })] }));
|
|
821
823
|
};
|
|
822
824
|
|
|
823
|
-
var style$
|
|
825
|
+
var style$5 = {"root":"investments-header-module__root__fxQmk","total":"investments-header-module__total__DrEq0","badge":"investments-header-module__badge__-aeBM"};
|
|
824
826
|
|
|
825
827
|
var InvestmentsHeader = function (_a) {
|
|
826
828
|
var currentTotalInvestmentValue = _a.currentTotalInvestmentValue, currentGainLossValue = _a.currentGainLossValue, currentGainLossPercentageValue = _a.currentGainLossPercentageValue;
|
|
827
829
|
var isNegativePercentage = currentGainLossPercentageValue < 0;
|
|
828
830
|
var dataGain = isNegativePercentage ? "negative" : "positive";
|
|
829
831
|
var triangle = isNegativePercentage ? jsxRuntime.jsx(SvgArrowDownRight, { "data-gain": "negative" }) : jsxRuntime.jsx(SvgArrowUpRight, { "data-gain": "positive" });
|
|
830
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
832
|
+
return (jsxRuntime.jsxs(Stack, { className: style$5.root, space: "xs", children: [jsxRuntime.jsx("p", { className: style$5.total, children: "Total Investments" }), jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx("h1", { children: formatNumberWithCurrency(currentTotalInvestmentValue) }), jsxRuntime.jsx(Badge, { status: isNegativePercentage ? "rejected" : "success", className: style$5.badge, children: jsxRuntime.jsxs(Stack, { space: "xs", position: "horizontal", children: [triangle, jsxRuntime.jsx("p", { "data-gain": dataGain, children: formatNumberWithCurrency(Math.abs(currentGainLossValue)) }), jsxRuntime.jsxs("p", { "data-gain": dataGain, children: ["(", formatNumber(Math.abs(currentGainLossPercentageValue)), "%)"] })] }) })] })] }));
|
|
831
833
|
};
|
|
832
834
|
|
|
833
835
|
var tableCustomStyles = {
|
|
@@ -873,13 +875,13 @@ var tableCustomStyles = {
|
|
|
873
875
|
},
|
|
874
876
|
};
|
|
875
877
|
|
|
876
|
-
var style$
|
|
878
|
+
var style$4 = {"tableWrapper":"table-module__tableWrapper__q2Fb1"};
|
|
877
879
|
|
|
878
880
|
var Table = function (_a) {
|
|
879
881
|
var data = _a.data, columns = _a.columns, dataTest = _a.dataTest; _a.customStyles; var isLoading = _a.isLoading, onRowClicked = _a.onRowClicked, rest = __rest(_a, ["data", "columns", "dataTest", "customStyles", "isLoading", "onRowClicked"]);
|
|
880
882
|
return isLoading
|
|
881
883
|
? null
|
|
882
|
-
: (jsxRuntime.jsx("div", { "data-test": dataTest, className: style$
|
|
884
|
+
: (jsxRuntime.jsx("div", { "data-test": dataTest, className: style$4.tableWrapper, "data-is-row-clickable": !!onRowClicked, children: jsxRuntime.jsx(DataTable, __assign({ columns: columns, data: data, customStyles: tableCustomStyles, onRowClicked: onRowClicked }, rest)) }));
|
|
883
885
|
};
|
|
884
886
|
|
|
885
887
|
var useCanAnimate = function () {
|
|
@@ -893,16 +895,16 @@ var useCanAnimate = function () {
|
|
|
893
895
|
return canAnimate;
|
|
894
896
|
};
|
|
895
897
|
|
|
896
|
-
var style$
|
|
898
|
+
var style$3 = {"root":"drawer-module__root__D3rM0","backdrop":"drawer-module__backdrop__2In4H","drawer":"drawer-module__drawer__1zGfg","header":"drawer-module__header__F3xzs","title":"drawer-module__title__6zsD3","subTitle":"drawer-module__subTitle__ArBvv","closeButton":"drawer-module__closeButton__eP-nJ","body":"drawer-module__body__GIyF-","content":"drawer-module__content__bYS-4","actions":"drawer-module__actions__pUGTF"};
|
|
897
899
|
|
|
898
900
|
var Drawer = function (_a) {
|
|
899
901
|
var isOpen = _a.isOpen, title = _a.title, children = _a.children, className = _a.className, actions = _a.actions, onClose = _a.onClose, _b = _a.isLarge, isLarge = _b === void 0 ? false : _b, subTitle = _a.subTitle;
|
|
900
902
|
var canAnimate = useCanAnimate();
|
|
901
|
-
var drawerContent = (jsxRuntime.jsxs("div", { className: clsx(style$
|
|
903
|
+
var drawerContent = (jsxRuntime.jsxs("div", { className: clsx(style$3.root, className), "data-is-open": isOpen, "data-can-animate": canAnimate, children: [jsxRuntime.jsx("button", { className: style$3.backdrop, tabIndex: 0, onClick: onClose, onKeyDown: function (e) { return (isEnter(e) ? onClose === null || onClose === void 0 ? void 0 : onClose() : null); } }), jsxRuntime.jsxs("div", { className: style$3.drawer, "data-is-large": isLarge, children: [jsxRuntime.jsxs("div", { className: style$3.header, children: [jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx("h2", { className: style$3.title, children: title }), subTitle && jsxRuntime.jsx("p", { className: style$3.subTitle, children: subTitle })] }), jsxRuntime.jsx("button", { onClick: onClose, className: style$3.closeButton, type: "button", disabled: !onClose, children: jsxRuntime.jsx(SvgCross, { viewBox: "0 0 24 24" }) })] }), jsxRuntime.jsxs("div", { className: style$3.body, children: [jsxRuntime.jsx("div", { className: style$3.content, children: isOpen ? children : null }), actions && jsxRuntime.jsx("div", { className: style$3.actions, children: actions })] })] })] }));
|
|
902
904
|
return reactDom.createPortal(drawerContent, document.body);
|
|
903
905
|
};
|
|
904
906
|
|
|
905
|
-
var style$
|
|
907
|
+
var style$2 = {"root":"alert-module__root__WGdLe","button":"alert-module__button__uNX69"};
|
|
906
908
|
|
|
907
909
|
var Alert = function (_a) {
|
|
908
910
|
var title = _a.title, _b = _a.type, type = _b === void 0 ? "info" : _b, description = _a.description, buttonText = _a.buttonText, dataTest = _a.dataTest, onClick = _a.onClick, rest = __rest(_a, ["title", "type", "description", "buttonText", "dataTest", "onClick"]);
|
|
@@ -915,14 +917,44 @@ var Alert = function (_a) {
|
|
|
915
917
|
default: return jsxRuntime.jsx(SvgLoader, { viewBox: "0 0 24 24" });
|
|
916
918
|
}
|
|
917
919
|
}, [type]);
|
|
918
|
-
return (jsxRuntime.jsxs(Stack, __assign({ className: style$
|
|
920
|
+
return (jsxRuntime.jsxs(Stack, __assign({ className: style$2.root, position: description ? "vertical" : "horizontal-space", space: "m", "data-type": type, "data-test": dataTest }, rest, { children: [jsxRuntime.jsxs(Stack, { position: "horizontal", children: [icon, title] }), description, buttonText && (jsxRuntime.jsx(Button, { className: style$2.button, variant: type, onClick: onClick, isInverted: true, size: "small", children: buttonText }))] })));
|
|
919
921
|
};
|
|
920
922
|
|
|
921
|
-
var style = {"root":"box-module__root__dZ-MR","icon":"box-module__icon__3dFXL"};
|
|
923
|
+
var style$1 = {"root":"box-module__root__dZ-MR","icon":"box-module__icon__3dFXL"};
|
|
922
924
|
|
|
923
925
|
var Box = function (_a) {
|
|
924
926
|
var title = _a.title, description = _a.description, Icon = _a.icon, iconType = _a.iconType;
|
|
925
|
-
return (jsxRuntime.jsxs(Stack, { className: style.root, as: "dl", children: [jsxRuntime.jsx("dt", { children: title }), jsxRuntime.jsxs("dd", { children: [description, Icon && jsxRuntime.jsx(Icon, { className: style.icon, "data-icon-type": iconType, viewBox: "0 0 24 24" })] })] }));
|
|
927
|
+
return (jsxRuntime.jsxs(Stack, { className: style$1.root, as: "dl", children: [jsxRuntime.jsx("dt", { children: title }), jsxRuntime.jsxs("dd", { children: [description, Icon && jsxRuntime.jsx(Icon, { className: style$1.icon, "data-icon-type": iconType, viewBox: "0 0 24 24" })] })] }));
|
|
928
|
+
};
|
|
929
|
+
|
|
930
|
+
var style = {"list":"tabs-module__list__Nuvl-","trigger":"tabs-module__trigger__qOk2r","content":"tabs-module__content__4w1tZ","counter":"tabs-module__counter__QkcJB"};
|
|
931
|
+
|
|
932
|
+
var Root = function (_a) {
|
|
933
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
934
|
+
return (jsxRuntime.jsx(RTabs__namespace.Root, __assign({ className: style.root }, rest, { children: children })));
|
|
935
|
+
};
|
|
936
|
+
var List = function (_a) {
|
|
937
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
938
|
+
return (jsxRuntime.jsx(RTabs__namespace.List, __assign({ className: style.list }, rest, { children: children })));
|
|
939
|
+
};
|
|
940
|
+
var Trigger = function (_a) {
|
|
941
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
942
|
+
return (jsxRuntime.jsx(RTabs__namespace.Trigger, __assign({ className: style.trigger }, rest, { children: children })));
|
|
943
|
+
};
|
|
944
|
+
var TriggerWithCounter = function (_a) {
|
|
945
|
+
var children = _a.children, counter = _a.counter, rest = __rest(_a, ["children", "counter"]);
|
|
946
|
+
return (jsxRuntime.jsx(RTabs__namespace.Trigger, __assign({ className: style.trigger }, rest, { children: jsxRuntime.jsxs(Stack, { space: "m", position: "horizontal", children: [children, jsxRuntime.jsx("span", { className: style.counter, children: counter })] }) })));
|
|
947
|
+
};
|
|
948
|
+
var Content = function (_a) {
|
|
949
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
950
|
+
return (jsxRuntime.jsx(RTabs__namespace.Content, __assign({ className: style.content }, rest, { children: children })));
|
|
951
|
+
};
|
|
952
|
+
var Tabs = {
|
|
953
|
+
Root: Root,
|
|
954
|
+
List: List,
|
|
955
|
+
Trigger: Trigger,
|
|
956
|
+
Content: Content,
|
|
957
|
+
TriggerWithCounter: TriggerWithCounter,
|
|
926
958
|
};
|
|
927
959
|
|
|
928
960
|
exports.Accordion = Accordion;
|
|
@@ -941,7 +973,7 @@ exports.FormSelect = FormSelect;
|
|
|
941
973
|
exports.InfoModal = InfoModal;
|
|
942
974
|
exports.InvestmentGraph = InvestmentGraph;
|
|
943
975
|
exports.InvestmentsHeader = InvestmentsHeader;
|
|
944
|
-
exports.List = List;
|
|
976
|
+
exports.List = List$1;
|
|
945
977
|
exports.ListItem = ListItem;
|
|
946
978
|
exports.Loader = Loader;
|
|
947
979
|
exports.Modal = Modal;
|
|
@@ -953,6 +985,7 @@ exports.Stack = Stack;
|
|
|
953
985
|
exports.Step = Step;
|
|
954
986
|
exports.Stepper = Stepper;
|
|
955
987
|
exports.Table = Table;
|
|
988
|
+
exports.Tabs = Tabs;
|
|
956
989
|
exports.TextField = TextField;
|
|
957
990
|
exports.Timeframes = Timeframes;
|
|
958
991
|
exports.Tooltip = Tooltip;
|