@kaio-xyz/design-system 1.1.134 → 1.1.135
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 +296 -77
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +75 -2
- package/dist/index.esm.js +294 -79
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +10 -1
package/dist/index.cjs.js
CHANGED
|
@@ -13,6 +13,8 @@ var recharts = require('recharts');
|
|
|
13
13
|
var DataTable = require('react-data-table-component');
|
|
14
14
|
var RTabs = require('@radix-ui/react-tabs');
|
|
15
15
|
var CurrencyInput = require('react-currency-input-field');
|
|
16
|
+
var NextJsLink = require('next/link');
|
|
17
|
+
var NProgress = require('nprogress');
|
|
16
18
|
|
|
17
19
|
function _interopNamespaceDefault(e) {
|
|
18
20
|
var n = Object.create(null);
|
|
@@ -77,6 +79,44 @@ function __rest(s, e) {
|
|
|
77
79
|
return t;
|
|
78
80
|
}
|
|
79
81
|
|
|
82
|
+
function __awaiter(thisArg, _arguments, P, generator) {
|
|
83
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
84
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
85
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
86
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
87
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
88
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
function __generator(thisArg, body) {
|
|
93
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
|
94
|
+
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
95
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
96
|
+
function step(op) {
|
|
97
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
98
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
99
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
100
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
101
|
+
switch (op[0]) {
|
|
102
|
+
case 0: case 1: t = op; break;
|
|
103
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
104
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
105
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
106
|
+
default:
|
|
107
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
108
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
109
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
110
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
111
|
+
if (t[2]) _.ops.pop();
|
|
112
|
+
_.trys.pop(); continue;
|
|
113
|
+
}
|
|
114
|
+
op = body.call(thisArg, _);
|
|
115
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
116
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
80
120
|
function __spreadArray(to, from, pack) {
|
|
81
121
|
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
82
122
|
if (ar || !(i in from)) {
|
|
@@ -344,17 +384,17 @@ var SvgLock = function SvgLock(props) {
|
|
|
344
384
|
})));
|
|
345
385
|
};
|
|
346
386
|
|
|
347
|
-
var style$
|
|
387
|
+
var style$x = {"root":"stack-module__root__AqSLk"};
|
|
348
388
|
|
|
349
389
|
var Stack = function (_a) {
|
|
350
390
|
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, _f = _a.wrap, wrap = _f === void 0 ? false : _f, as = _a.as, rest = __rest(_a, ["children", "space", "className", "position", "fullHeight", "fullWidth", "dataTest", "dataAlignItems", "dataCapitalize", "dataMarginTop", "dataMarginBottom", "dataMarginLeft", "dataPaddingBottom", "wrap", "as"]);
|
|
351
391
|
var Tag = as || "div";
|
|
352
|
-
return (jsxRuntime.jsx(Tag, __assign({ className: clsx(style$
|
|
392
|
+
return (jsxRuntime.jsx(Tag, __assign({ className: clsx(style$x.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, "data-wrap": wrap }, rest, { children: children })));
|
|
353
393
|
};
|
|
354
394
|
|
|
355
395
|
var baseStyle = {"root":"badge-base-module__root__oUZlm"};
|
|
356
396
|
|
|
357
|
-
var style$
|
|
397
|
+
var style$w = {"root":"badge-module__root__rXpaz"};
|
|
358
398
|
|
|
359
399
|
var BadgeStatuses = {
|
|
360
400
|
success: "success",
|
|
@@ -376,16 +416,16 @@ var Badge = function (_a) {
|
|
|
376
416
|
default: return jsxRuntime.jsx(SvgCircleDashed, {});
|
|
377
417
|
}
|
|
378
418
|
}, [status]);
|
|
379
|
-
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$
|
|
419
|
+
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$w.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] }) })));
|
|
380
420
|
};
|
|
381
421
|
|
|
382
|
-
var style$
|
|
422
|
+
var style$v = {"root":"button-module__root__CDCDX"};
|
|
383
423
|
|
|
384
|
-
var style$
|
|
424
|
+
var style$u = {"root":"spinned-icon-module__root__xchkj"};
|
|
385
425
|
|
|
386
426
|
var SpinnedIcon = function (_a) {
|
|
387
427
|
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"]);
|
|
388
|
-
return (jsxRuntime.jsx("div", { className: clsx(style$
|
|
428
|
+
return (jsxRuntime.jsx("div", { className: clsx(style$u.root, className), style: {
|
|
389
429
|
width: size,
|
|
390
430
|
height: size,
|
|
391
431
|
animationDuration: "".concat(duration, "s"),
|
|
@@ -399,7 +439,7 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
399
439
|
var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps, { viewBox: "0 0 24 24" }));
|
|
400
440
|
var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
|
|
401
441
|
var iconChild = loadingIcon || baseIcon || null;
|
|
402
|
-
var classes = clsx(style$
|
|
442
|
+
var classes = clsx(style$v.root, props.className);
|
|
403
443
|
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: [iconPosition === "left" && iconChild, isLoading ? "Loading" : props.children, iconPosition === "right" && iconChild] }) }))));
|
|
404
444
|
});
|
|
405
445
|
Button.displayName = "Button";
|
|
@@ -424,41 +464,41 @@ var useFieldAutofill = function () {
|
|
|
424
464
|
return { isAutofilled: isAutofilled, internalRef: internalRef };
|
|
425
465
|
};
|
|
426
466
|
|
|
427
|
-
var style$
|
|
467
|
+
var style$t = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
|
|
428
468
|
|
|
429
469
|
var Hint = function (_a) {
|
|
430
470
|
var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
|
|
431
|
-
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$
|
|
471
|
+
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$t.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$t.children, children: children })] })));
|
|
432
472
|
};
|
|
433
473
|
|
|
434
|
-
var style$
|
|
474
|
+
var style$s = {"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"};
|
|
435
475
|
|
|
436
476
|
var TextField = React.forwardRef(function (_a, ref) {
|
|
437
477
|
var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, 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, _f = _a.type, type = _f === void 0 ? "text" : _f, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "button", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur", "type"]);
|
|
438
478
|
var _g = useFieldAutofill(), isAutofilled = _g.isAutofilled, internalRef = _g.internalRef;
|
|
439
479
|
React.useImperativeHandle(ref, function () { return internalRef.current; });
|
|
440
|
-
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
480
|
+
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$s.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsx("div", { className: style$s.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: jsxRuntime.jsxs("div", { className: style$s.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({}, attributes, { id: id, ref: internalRef, type: type, value: value, defaultValue: defaultValue, placeholder: " ", className: style$s.field, "data-size": size, "data-autofilled": isAutofilled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, readOnly: readOnly })), label && (jsxRuntime.jsx("label", { className: style$s.label, htmlFor: id, "data-floating": floatingLabel, children: label })), button ? button : null, hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$s.hint, children: hint })] }) }) }));
|
|
441
481
|
});
|
|
442
482
|
TextField.displayName = "TextField";
|
|
443
483
|
|
|
444
|
-
var style$
|
|
484
|
+
var style$r = {"container":"container-module__container__CAxQw"};
|
|
445
485
|
|
|
446
486
|
var Container = function (_a) {
|
|
447
487
|
var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
|
|
448
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$
|
|
488
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$r.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
449
489
|
};
|
|
450
490
|
|
|
451
|
-
var style$
|
|
491
|
+
var style$q = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
|
|
452
492
|
|
|
453
493
|
var PasswordField = React.forwardRef(function (_a, ref) {
|
|
454
494
|
var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
|
|
455
495
|
var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
|
|
456
|
-
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$
|
|
457
|
-
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$
|
|
496
|
+
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$q.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
|
|
497
|
+
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$q.field })));
|
|
458
498
|
});
|
|
459
499
|
PasswordField.displayName = "PasswordField";
|
|
460
500
|
|
|
461
|
-
var style$
|
|
501
|
+
var style$p = {"validator":"validate-password-field-module__validator__Do-6w"};
|
|
462
502
|
|
|
463
503
|
var rules = {
|
|
464
504
|
length: /^.{8,}$/,
|
|
@@ -483,12 +523,12 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
|
|
|
483
523
|
React.useEffect(function () {
|
|
484
524
|
setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
|
|
485
525
|
}, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
|
|
486
|
-
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$
|
|
526
|
+
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$p.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
|
|
487
527
|
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: @ $ ! % * ? & _ #)")] })] }));
|
|
488
528
|
});
|
|
489
529
|
ValidatePasswordField.displayName = "ValidatePasswordField";
|
|
490
530
|
|
|
491
|
-
var style$
|
|
531
|
+
var style$o = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
|
|
492
532
|
|
|
493
533
|
var IconAndLabel = function (_a) {
|
|
494
534
|
var children = _a.children, Icon = _a.icon;
|
|
@@ -535,7 +575,7 @@ var Select = function (_a) {
|
|
|
535
575
|
setUncontrolledHasValue(v != null && (!Array.isArray(v) || v.length > 0));
|
|
536
576
|
onChange === null || onChange === void 0 ? void 0 : onChange(newValue, actionMeta);
|
|
537
577
|
};
|
|
538
|
-
return (jsxRuntime.jsx("div", { className: clsx(style$
|
|
578
|
+
return (jsxRuntime.jsx("div", { className: clsx(style$o.root, className), children: jsxRuntime.jsxs("div", { className: style$o.selector, "data-error": !!error, "data-has-floating-label": !!label, "data-floating-active": isFloating, children: [label && (jsxRuntime.jsx("label", { className: style$o.label, htmlFor: id, "data-floating": isFloating, children: label })), jsxRuntime.jsx(ReactSelect, __assign({ inputId: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Input: DataTestInput, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { placeholder: label ? (placeholder !== null && placeholder !== void 0 ? placeholder : "") : placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onMenuOpen: function () { setMenuIsOpen(true); onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen(); }, onMenuClose: function () { setMenuIsOpen(false); onMenuClose === null || onMenuClose === void 0 ? void 0 : onMenuClose(); }, onFocus: function (e) { onFocus === null || onFocus === void 0 ? void 0 : onFocus(e); }, onBlur: function (e) { onBlur === null || onBlur === void 0 ? void 0 : onBlur(e); }, isDisabled: isDisabled })), error && jsxRuntime.jsx(Hint, { kind: "error", className: style$o.hint, children: error })] }) }));
|
|
539
579
|
};
|
|
540
580
|
Select.displayName = "Select";
|
|
541
581
|
|
|
@@ -548,14 +588,14 @@ var FormSelect = function (_a) {
|
|
|
548
588
|
};
|
|
549
589
|
FormSelect.displayName = "FormSelect";
|
|
550
590
|
|
|
551
|
-
var style$
|
|
591
|
+
var style$n = {"root":"loader-module__root__qnInQ","body":"loader-module__body__B-xBi"};
|
|
552
592
|
|
|
553
593
|
var Loader = function (_a) {
|
|
554
594
|
var text = _a.text, children = _a.children, className = _a.className, _b = _a.isLighter, isLighter = _b === void 0 ? false : _b;
|
|
555
|
-
return (jsxRuntime.jsx("div", { className: clsx(style$
|
|
595
|
+
return (jsxRuntime.jsx("div", { className: clsx(style$n.root, className), "data-is-lighter": isLighter, children: jsxRuntime.jsxs(Stack, { className: style$n.body, dataAlignItems: "center", children: [jsxRuntime.jsx(SpinnedIcon, { size: 50 }), text && jsxRuntime.jsx("p", { children: text }), children] }) }));
|
|
556
596
|
};
|
|
557
597
|
|
|
558
|
-
var style$
|
|
598
|
+
var style$m = {"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"};
|
|
559
599
|
|
|
560
600
|
var Checkbox = function (_a) {
|
|
561
601
|
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"]);
|
|
@@ -568,11 +608,11 @@ var Checkbox = function (_a) {
|
|
|
568
608
|
var dynamicStyle = {
|
|
569
609
|
"--vAlign": verticalAlign,
|
|
570
610
|
};
|
|
571
|
-
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$
|
|
611
|
+
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$m.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$m.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$m.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$m.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$m.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$m.label, children: label })] }));
|
|
572
612
|
};
|
|
573
613
|
Checkbox.displayName = "Checkbox";
|
|
574
614
|
|
|
575
|
-
var style$
|
|
615
|
+
var style$l = {"root":"clipboard-module__root__wVZhy"};
|
|
576
616
|
|
|
577
617
|
var trimString = function (str, noOfChars) {
|
|
578
618
|
if (noOfChars === void 0) { noOfChars = 4; }
|
|
@@ -596,42 +636,42 @@ var Clipboard = function (_a) {
|
|
|
596
636
|
}, [value]);
|
|
597
637
|
var text = isShowingCopy ? 'Copied!' : displayValue;
|
|
598
638
|
var icon = isShowingCopy ? jsxRuntime.jsx(SvgCheck, { viewBox: "0 0 24 24" }) : jsxRuntime.jsx(SvgClipboard, { viewBox: "0 0 24 24" });
|
|
599
|
-
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$
|
|
639
|
+
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$l.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] }) }));
|
|
600
640
|
};
|
|
601
641
|
|
|
602
|
-
var style$
|
|
642
|
+
var style$k = {"root":"stepper-module__root__hgDss"};
|
|
603
643
|
|
|
604
644
|
var Stepper = function (_a) {
|
|
605
645
|
var children = _a.children, dataTest = _a.dataTest, className = _a.className, _b = _a.direction, direction = _b === void 0 ? 'vertical' : _b;
|
|
606
|
-
return (jsxRuntime.jsx("ul", { className: clsx(style$
|
|
646
|
+
return (jsxRuntime.jsx("ul", { className: clsx(style$k.root, className), "data-is-stepper-horizontal": direction === 'horizontal', "data-test": dataTest, children: children }));
|
|
607
647
|
};
|
|
608
648
|
|
|
609
|
-
var style$
|
|
649
|
+
var style$j = {"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"};
|
|
610
650
|
|
|
611
651
|
var Step = function (_a) {
|
|
612
652
|
var label = _a.label, dataTest = _a.dataTest, className = _a.className, _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, _e = _a.direction, direction = _e === void 0 ? 'vertical' : _e, props = __rest(_a, ["label", "dataTest", "className", "iconSize", "isCompleted", "isCurrent", "direction"]);
|
|
613
653
|
var icon = React.useMemo(function () {
|
|
614
654
|
switch (true) {
|
|
615
|
-
case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$
|
|
616
|
-
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$
|
|
617
|
-
default: return jsxRuntime.jsx("span", { className: style$
|
|
655
|
+
case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$j.checkIcon, viewBox: "0 0 24 24" });
|
|
656
|
+
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$j.loadingIcon });
|
|
657
|
+
default: return jsxRuntime.jsx("span", { className: style$j.emptyIcon });
|
|
618
658
|
}
|
|
619
659
|
}, [isCompleted, isCurrent, iconSize]);
|
|
620
|
-
return (jsxRuntime.jsx("li", __assign({ className: clsx(style$
|
|
660
|
+
return (jsxRuntime.jsx("li", __assign({ className: clsx(style$j.root, className), "data-is-current": isCurrent, "data-direction": direction, "data-test": dataTest, style: { '--icon-size': "".concat(iconSize, "px") } }, props, { children: jsxRuntime.jsxs(Stack, { className: style$j.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$j.label, children: label })] }) })));
|
|
621
661
|
};
|
|
622
662
|
|
|
623
|
-
var style$
|
|
663
|
+
var style$i = {"root":"list-module__root__OXx93"};
|
|
624
664
|
|
|
625
665
|
var List$1 = function (_a) {
|
|
626
666
|
var label = _a.label, children = _a.children;
|
|
627
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
667
|
+
return (jsxRuntime.jsxs(Stack, { className: style$i.root, children: [label && jsxRuntime.jsx("h3", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
|
|
628
668
|
};
|
|
629
669
|
|
|
630
|
-
var style$
|
|
670
|
+
var style$h = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
|
|
631
671
|
|
|
632
672
|
var ListItem = function (_a) {
|
|
633
673
|
var value = _a.value, label = _a.label, key = _a.key, icon = _a.icon;
|
|
634
|
-
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { space: "m", className: style$
|
|
674
|
+
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { space: "m", className: style$h.root, children: [jsxRuntime.jsxs(Stack, { position: "horizontal", space: "m", dataAlignItems: "center", children: [icon, jsxRuntime.jsx("span", { className: style$h.label, children: label })] }), jsxRuntime.jsx("span", { className: style$h.value, children: value })] }) }, key));
|
|
635
675
|
};
|
|
636
676
|
|
|
637
677
|
var AccordionRoot = function (_a) {
|
|
@@ -639,38 +679,38 @@ var AccordionRoot = function (_a) {
|
|
|
639
679
|
return (jsxRuntime.jsx(RAccordion__namespace.Root, __assign({}, rest, { children: children })));
|
|
640
680
|
};
|
|
641
681
|
|
|
642
|
-
var style$
|
|
682
|
+
var style$g = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
|
|
643
683
|
|
|
644
684
|
var AccordionContent = React.forwardRef(function (_a, forwardedRef) {
|
|
645
685
|
var children = _a.children, className = _a.className, hasChildrenPadding = _a.hasChildrenPadding, rest = __rest(_a, ["children", "className", "hasChildrenPadding"]);
|
|
646
|
-
return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$
|
|
686
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$g.content, className), ref: forwardedRef }, rest, { children: jsxRuntime.jsx("div", { className: style$g.childrenContainer, children: jsxRuntime.jsx("div", { className: style$g.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
|
|
647
687
|
});
|
|
648
688
|
AccordionContent.displayName = "AccordionContent";
|
|
649
689
|
|
|
650
|
-
var style$
|
|
690
|
+
var style$f = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
|
|
651
691
|
|
|
652
692
|
var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
|
|
653
693
|
var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, dataTest = _a.dataTest, rest = __rest(_a, ["children", "className", "dataTest"]);
|
|
654
|
-
return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$
|
|
694
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$f.header, children: jsxRuntime.jsx(RAccordion__namespace.Trigger, __assign({ className: clsx(style$f.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
|
|
655
695
|
});
|
|
656
696
|
AccordionTrigger.displayName = "AccordionTrigger";
|
|
657
697
|
|
|
658
|
-
var style$
|
|
698
|
+
var style$e = {"root":"accordion-item-module__root__1Yk4f"};
|
|
659
699
|
|
|
660
700
|
var AccordionItem = React.forwardRef(function (_a, forwardedRef) {
|
|
661
701
|
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;
|
|
662
|
-
return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$
|
|
702
|
+
return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$e.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsxRuntime.jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsxRuntime.jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
|
|
663
703
|
});
|
|
664
704
|
AccordionItem.displayName = "AccordionItem";
|
|
665
705
|
|
|
666
706
|
var Accordion = { Root: AccordionRoot, Item: AccordionItem };
|
|
667
707
|
|
|
668
|
-
var style$
|
|
708
|
+
var style$d = {"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"};
|
|
669
709
|
|
|
670
710
|
var ModalElement = function (_a) {
|
|
671
711
|
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"]);
|
|
672
712
|
var modalRef = React.useRef(null);
|
|
673
|
-
return (jsxRuntime.jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$
|
|
713
|
+
return (jsxRuntime.jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$d.modal, className), "data-test": "Modal__Div__content", "data-visible": visible, "data-is-not-closable": !onClose }, attributes, { children: [jsxRuntime.jsx("dialog", { className: style$d.backdrop }), jsxRuntime.jsx("div", { className: style$d.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxRuntime.jsxs("div", { className: style$d.bodyWrapper, children: __spreadArray([title && (jsxRuntime.jsxs("div", { className: style$d.header, children: [jsxRuntime.jsx("h2", { id: id, children: title }), jsxRuntime.jsx(SvgCross, { "data-icon": true, onClick: onClose })] })), jsxRuntime.jsx("div", { className: style$d.body, children: children })], actions.map(function (i, idx) { return jsxRuntime.jsx("div", { className: style$d.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
|
|
674
714
|
};
|
|
675
715
|
var Modal = function (_a) {
|
|
676
716
|
var visible = _a.visible, props = __rest(_a, ["visible"]);
|
|
@@ -701,28 +741,28 @@ var InfoModal = function (_a) {
|
|
|
701
741
|
return (jsxRuntime.jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
|
|
702
742
|
};
|
|
703
743
|
|
|
704
|
-
var style$
|
|
744
|
+
var style$c = {"content":"dropdown-menu-module__content__sSYNC","arrow":"dropdown-menu-module__arrow__AFHzK","trigger":"dropdown-menu-module__trigger__GLDRV"};
|
|
705
745
|
|
|
706
746
|
var DropdownMenu$1 = function (_a) {
|
|
707
747
|
var text = _a.text, children = _a.children, Icon = _a.icon, disabled = _a.disabled, body = _a.body, variant = _a.variant, buttonSize = _a.buttonSize, rest = __rest(_a, ["text", "children", "icon", "disabled", "body", "variant", "buttonSize"]);
|
|
708
748
|
var defaultBody = !text ? Icon && jsxRuntime.jsx(Icon, { viewBox: "0 0 24 24" }) : jsxRuntime.jsx(Button, { size: buttonSize, icon: Icon, variant: variant, children: text });
|
|
709
|
-
return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$
|
|
749
|
+
return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$c.trigger, disabled: disabled, children: body ? body : defaultBody })), jsxRuntime.jsx(RDropdownMenu__namespace.Portal, { children: jsxRuntime.jsxs(RDropdownMenu__namespace.Content, { className: style$c.content, sideOffset: 5, children: [children, jsxRuntime.jsx(RDropdownMenu__namespace.Arrow, { className: style$c.arrow })] }) })] }));
|
|
710
750
|
};
|
|
711
751
|
|
|
712
|
-
var style$
|
|
752
|
+
var style$b = {"root":"dropdown-menu-item-module__root__zs510"};
|
|
713
753
|
|
|
714
754
|
var DropdownMenuItem = function (_a) {
|
|
715
755
|
var children = _a.children, disabled = _a.disabled, onClick = _a.onClick, rest = __rest(_a, ["children", "disabled", "onClick"]);
|
|
716
|
-
return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$
|
|
756
|
+
return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$b.root, onClick: !disabled ? onClick : undefined, disabled: disabled }, rest, { children: children })));
|
|
717
757
|
};
|
|
718
758
|
|
|
719
759
|
var DropdownMenu = { Root: DropdownMenu$1, Item: DropdownMenuItem };
|
|
720
760
|
|
|
721
|
-
var style$
|
|
761
|
+
var style$a = {"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"};
|
|
722
762
|
|
|
723
763
|
var Tooltip = function (_a) {
|
|
724
764
|
var children = _a.children, title = _a.title, description = _a.description, rest = __rest(_a, ["children", "title", "description"]);
|
|
725
|
-
return (jsxRuntime.jsx(RTooltip__namespace.Provider, { children: jsxRuntime.jsxs(RTooltip__namespace.Root, __assign({}, rest, { children: [jsxRuntime.jsx(RTooltip__namespace.Trigger, { className: style$
|
|
765
|
+
return (jsxRuntime.jsx(RTooltip__namespace.Provider, { children: jsxRuntime.jsxs(RTooltip__namespace.Root, __assign({}, rest, { children: [jsxRuntime.jsx(RTooltip__namespace.Trigger, { className: style$a.trigger, asChild: true, children: children }), jsxRuntime.jsx(RTooltip__namespace.Portal, { children: jsxRuntime.jsxs(RTooltip__namespace.Content, { className: style$a.content, sideOffset: 2, children: [jsxRuntime.jsx(SvgInfo, { viewBox: "0 0 24 24", className: style$a.icon, width: 20, height: 20 }), jsxRuntime.jsxs("div", { className: style$a.body, children: [jsxRuntime.jsx("span", { className: style$a.title, children: title }), description && jsxRuntime.jsx("span", { className: style$a.description, children: description })] }), jsxRuntime.jsx(RTooltip__namespace.Arrow, { className: style$a.arrow })] }) })] })) }));
|
|
726
766
|
};
|
|
727
767
|
|
|
728
768
|
var isEnter = function (e) { return e.key === "Enter"; };
|
|
@@ -959,7 +999,7 @@ var ByProductChart = function (_a) {
|
|
|
959
999
|
} }), jsxRuntime.jsx(recharts.Legend, { content: getCustomLegend(data) }), data.map(function (item) { return (jsxRuntime.jsx(recharts.Area, { dataKey: item.id, name: item.id, stroke: item.color, strokeWidth: 1.5, fill: "url(#grad-".concat(item.id, ")"), fillOpacity: 1, dot: false, activeDot: { r: 4, fill: item.color } }, item.id)); })] }) }));
|
|
960
1000
|
};
|
|
961
1001
|
|
|
962
|
-
var style$
|
|
1002
|
+
var style$9 = {"root":"investments-graph-module__root__-BKux","paddedWrapper":"investments-graph-module__paddedWrapper__afkOR","graphButtons":"investments-graph-module__graphButtons__coxZq","graphButton":"investments-graph-module__graphButton__yVOBe","lockedPlaceholder":"investments-graph-module__lockedPlaceholder__EgBiO","lockIconCircle":"investments-graph-module__lockIconCircle__B0Tft"};
|
|
963
1003
|
|
|
964
1004
|
var TotalChart = function (_a) {
|
|
965
1005
|
var data = _a.data, ticks = _a.ticks, timeFrame = _a.timeFrame;
|
|
@@ -1037,28 +1077,28 @@ var InvestmentGraph = function (_a) {
|
|
|
1037
1077
|
}
|
|
1038
1078
|
return getMonthTicks(dates);
|
|
1039
1079
|
}, [timeFrame, viewMode, totalData, byProductChartData]);
|
|
1040
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
1080
|
+
return (jsxRuntime.jsxs(Stack, { className: style$9.root, space: "m", children: [jsxRuntime.jsxs(Stack, { space: "none", children: [header && (jsxRuntime.jsx("div", { className: style$9.paddedWrapper, children: header })), jsxRuntime.jsxs(Stack, { className: style$9.paddedWrapper, position: "horizontal-space", wrap: true, children: [jsxRuntime.jsx("div", { className: style$9.graphButtons, children: periodOptions.map(function (p) { return (jsxRuntime.jsx("button", { tabIndex: isLocked ? -1 : 0, disabled: isLocked, onKeyDown: function (e) {
|
|
1041
1081
|
return isEnter(e) && !isLocked
|
|
1042
1082
|
? setTimeFrame(p)
|
|
1043
1083
|
: null;
|
|
1044
|
-
}, className: style$
|
|
1084
|
+
}, className: style$9.graphButton, "data-active": (timeFrame === null || timeFrame === void 0 ? void 0 : timeFrame.value) === p.value
|
|
1045
1085
|
? 'true'
|
|
1046
|
-
: 'false', onClick: function () { return setTimeFrame(p); }, children: p.label }, p.value)); }) }), hasByProductView && (jsxRuntime.jsx("div", { className: style$
|
|
1086
|
+
: 'false', onClick: function () { return setTimeFrame(p); }, children: p.label }, p.value)); }) }), hasByProductView && (jsxRuntime.jsx("div", { className: style$9.graphButtons, children: ViewModes.map(function (mode) { return (jsxRuntime.jsx("button", { tabIndex: 0, className: style$9.graphButton, "data-active": viewMode === mode
|
|
1047
1087
|
? 'true'
|
|
1048
1088
|
: 'false', onClick: function () {
|
|
1049
1089
|
return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode(mode);
|
|
1050
|
-
}, children: mode === 'total' ? 'Total' : 'By Product' }, mode)); }) }))] })] }), isLocked ? (jsxRuntime.jsx("div", { className: style$
|
|
1090
|
+
}, children: mode === 'total' ? 'Total' : 'By Product' }, mode)); }) }))] })] }), isLocked ? (jsxRuntime.jsx("div", { className: style$9.lockedPlaceholder, children: jsxRuntime.jsx("div", { className: style$9.lockIconCircle, children: jsxRuntime.jsx(SvgLock, { viewBox: "0 0 24 24" }) }) })) : viewMode === 'byProduct' && hasByProductView ? (jsxRuntime.jsx(ByProductChart, { chartData: byProductChartData, data: byProductData, ticks: ticks, timeFrame: timeFrame === null || timeFrame === void 0 ? void 0 : timeFrame.value })) : (jsxRuntime.jsx(TotalChart, { data: totalData, ticks: ticks, timeFrame: timeFrame === null || timeFrame === void 0 ? void 0 : timeFrame.value }))] }));
|
|
1051
1091
|
};
|
|
1052
1092
|
|
|
1053
|
-
var style$
|
|
1093
|
+
var style$8 = {"root":"investments-header-module__root__fxQmk","total":"investments-header-module__total__DrEq0","badge":"investments-header-module__badge__-aeBM"};
|
|
1054
1094
|
|
|
1055
1095
|
var InvestmentsHeader = function (_a) {
|
|
1056
1096
|
var currentTotalInvestmentValue = _a.currentTotalInvestmentValue, _b = _a.currentGainLossValue, currentGainLossValue = _b === void 0 ? 0 : _b, _c = _a.currentGainLossPercentageValue, currentGainLossPercentageValue = _c === void 0 ? 0 : _c, _d = _a.title, title = _d === void 0 ? "Total Investments" : _d;
|
|
1057
1097
|
var isNegativePercentage = currentGainLossPercentageValue < 0;
|
|
1058
1098
|
var dataGain = isNegativePercentage ? "negative" : "positive";
|
|
1059
1099
|
var triangle = isNegativePercentage ? jsxRuntime.jsx(SvgArrowDownRight, { "data-gain": "negative" }) : jsxRuntime.jsx(SvgArrowUpRight, { "data-gain": "positive" });
|
|
1060
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
1061
|
-
? (jsxRuntime.jsx(Badge, { status: isNegativePercentage ? "rejected" : "success", className: style$
|
|
1100
|
+
return (jsxRuntime.jsxs(Stack, { className: style$8.root, space: "xs", children: [jsxRuntime.jsx("p", { className: style$8.total, children: title }), jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx("h1", { children: formatNumberWithCurrency(currentTotalInvestmentValue) }), currentGainLossValue && currentGainLossPercentageValue
|
|
1101
|
+
? (jsxRuntime.jsx(Badge, { status: isNegativePercentage ? "rejected" : "success", className: style$8.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)), "%)"] })] }) }))
|
|
1062
1102
|
: null] })] }));
|
|
1063
1103
|
};
|
|
1064
1104
|
|
|
@@ -1105,13 +1145,13 @@ var tableCustomStyles = {
|
|
|
1105
1145
|
},
|
|
1106
1146
|
};
|
|
1107
1147
|
|
|
1108
|
-
var style$
|
|
1148
|
+
var style$7 = {"tableWrapper":"table-module__tableWrapper__q2Fb1"};
|
|
1109
1149
|
|
|
1110
1150
|
var Table = function (_a) {
|
|
1111
1151
|
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"]);
|
|
1112
1152
|
return isLoading
|
|
1113
1153
|
? null
|
|
1114
|
-
: (jsxRuntime.jsx("div", { "data-test": dataTest, className: style$
|
|
1154
|
+
: (jsxRuntime.jsx("div", { "data-test": dataTest, className: style$7.tableWrapper, "data-is-row-clickable": !!onRowClicked, children: jsxRuntime.jsx(DataTable, __assign({ columns: columns, data: data, customStyles: tableCustomStyles, onRowClicked: onRowClicked }, rest)) }));
|
|
1115
1155
|
};
|
|
1116
1156
|
|
|
1117
1157
|
var useCanAnimate = function () {
|
|
@@ -1125,16 +1165,16 @@ var useCanAnimate = function () {
|
|
|
1125
1165
|
return canAnimate;
|
|
1126
1166
|
};
|
|
1127
1167
|
|
|
1128
|
-
var style$
|
|
1168
|
+
var style$6 = {"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"};
|
|
1129
1169
|
|
|
1130
1170
|
var Drawer = function (_a) {
|
|
1131
1171
|
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, rest = __rest(_a, ["isOpen", "title", "children", "className", "actions", "onClose", "isLarge", "subTitle"]);
|
|
1132
1172
|
var canAnimate = useCanAnimate();
|
|
1133
|
-
var drawerContent = (jsxRuntime.jsxs("div", { className: clsx(style$
|
|
1173
|
+
var drawerContent = (jsxRuntime.jsxs("div", { className: clsx(style$6.root, className), "data-is-open": isOpen, "data-can-animate": canAnimate, children: [jsxRuntime.jsx("button", { className: style$6.backdrop, tabIndex: 0, onClick: onClose, onKeyDown: function (e) { return (isEnter(e) ? onClose === null || onClose === void 0 ? void 0 : onClose() : null); } }), jsxRuntime.jsxs("div", __assign({ className: style$6.drawer, "data-is-large": isLarge }, rest, { children: [jsxRuntime.jsxs("div", { className: style$6.header, children: [jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx("h2", { className: style$6.title, children: title }), subTitle && jsxRuntime.jsx("p", { className: style$6.subTitle, children: subTitle })] }), jsxRuntime.jsx("button", { onClick: onClose, className: style$6.closeButton, type: "button", disabled: !onClose, children: jsxRuntime.jsx(SvgCross, { viewBox: "0 0 24 24" }) })] }), jsxRuntime.jsxs("div", { className: style$6.body, children: [jsxRuntime.jsx("div", { className: style$6.content, children: isOpen ? children : null }), actions && jsxRuntime.jsx("div", { className: style$6.actions, children: actions })] })] }))] }));
|
|
1134
1174
|
return reactDom.createPortal(drawerContent, document.body);
|
|
1135
1175
|
};
|
|
1136
1176
|
|
|
1137
|
-
var style$
|
|
1177
|
+
var style$5 = {"root":"alert-module__root__WGdLe","button":"alert-module__button__uNX69"};
|
|
1138
1178
|
|
|
1139
1179
|
var Alert = function (_a) {
|
|
1140
1180
|
var title = _a.title, _b = _a.type, type = _b === void 0 ? "info" : _b, children = _a.children, buttonText = _a.buttonText, dataTest = _a.dataTest, onClick = _a.onClick, rest = __rest(_a, ["title", "type", "children", "buttonText", "dataTest", "onClick"]);
|
|
@@ -1147,37 +1187,37 @@ var Alert = function (_a) {
|
|
|
1147
1187
|
default: return jsxRuntime.jsx(SvgLoader, { viewBox: "0 0 24 24" });
|
|
1148
1188
|
}
|
|
1149
1189
|
}, [type]);
|
|
1150
|
-
return (jsxRuntime.jsxs(Stack, __assign({ className: style$
|
|
1190
|
+
return (jsxRuntime.jsxs(Stack, __assign({ className: style$5.root, position: children ? "vertical" : "horizontal-space", space: "m", "data-type": type, "data-test": dataTest }, rest, { children: [jsxRuntime.jsxs(Stack, { position: "horizontal", children: [icon, title] }), jsxRuntime.jsx("p", { children: children }), buttonText && (jsxRuntime.jsx(Button, { className: style$5.button, variant: type, onClick: onClick, isInverted: true, size: "small", children: buttonText }))] })));
|
|
1151
1191
|
};
|
|
1152
1192
|
|
|
1153
|
-
var style$
|
|
1193
|
+
var style$4 = {"root":"box-module__root__dZ-MR","icon":"box-module__icon__3dFXL"};
|
|
1154
1194
|
|
|
1155
1195
|
var Box = function (_a) {
|
|
1156
1196
|
var title = _a.title, description = _a.description, Icon = _a.icon, iconType = _a.iconType, fullWidth = _a.fullWidth;
|
|
1157
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
1197
|
+
return (jsxRuntime.jsxs(Stack, { className: style$4.root, "data-is-full-width": fullWidth, as: "dl", children: [jsxRuntime.jsx("dt", { children: title }), jsxRuntime.jsxs("dd", { children: [description, Icon && jsxRuntime.jsx(Icon, { className: style$4.icon, "data-icon-type": iconType, viewBox: "0 0 24 24" })] })] }));
|
|
1158
1198
|
};
|
|
1159
1199
|
|
|
1160
|
-
var style$
|
|
1200
|
+
var style$3 = {"list":"tabs-module__list__Nuvl-","trigger":"tabs-module__trigger__qOk2r","content":"tabs-module__content__4w1tZ","counter":"tabs-module__counter__QkcJB"};
|
|
1161
1201
|
|
|
1162
1202
|
var Root = function (_a) {
|
|
1163
1203
|
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
1164
|
-
return (jsxRuntime.jsx(RTabs__namespace.Root, __assign({ className: clsx(style$
|
|
1204
|
+
return (jsxRuntime.jsx(RTabs__namespace.Root, __assign({ className: clsx(style$3.root, className) }, rest, { children: children })));
|
|
1165
1205
|
};
|
|
1166
1206
|
var List = function (_a) {
|
|
1167
1207
|
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
1168
|
-
return (jsxRuntime.jsx(RTabs__namespace.List, __assign({ className: clsx(style$
|
|
1208
|
+
return (jsxRuntime.jsx(RTabs__namespace.List, __assign({ className: clsx(style$3.list, className) }, rest, { children: children })));
|
|
1169
1209
|
};
|
|
1170
1210
|
var Trigger = function (_a) {
|
|
1171
1211
|
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
1172
|
-
return (jsxRuntime.jsx(RTabs__namespace.Trigger, __assign({ className: clsx(style$
|
|
1212
|
+
return (jsxRuntime.jsx(RTabs__namespace.Trigger, __assign({ className: clsx(style$3.trigger, className) }, rest, { children: children })));
|
|
1173
1213
|
};
|
|
1174
1214
|
var TriggerWithCounter = function (_a) {
|
|
1175
1215
|
var children = _a.children, className = _a.className, counter = _a.counter, rest = __rest(_a, ["children", "className", "counter"]);
|
|
1176
|
-
return (jsxRuntime.jsx(RTabs__namespace.Trigger, __assign({ className: clsx(style$
|
|
1216
|
+
return (jsxRuntime.jsx(RTabs__namespace.Trigger, __assign({ className: clsx(style$3.trigger, className) }, rest, { children: jsxRuntime.jsxs(Stack, { space: "m", position: "horizontal", children: [children, jsxRuntime.jsx("span", { className: style$3.counter, children: counter })] }) })));
|
|
1177
1217
|
};
|
|
1178
1218
|
var Content = function (_a) {
|
|
1179
1219
|
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
1180
|
-
return (jsxRuntime.jsx(RTabs__namespace.Content, __assign({ className: clsx(style$
|
|
1220
|
+
return (jsxRuntime.jsx(RTabs__namespace.Content, __assign({ className: clsx(style$3.content, className) }, rest, { children: children })));
|
|
1181
1221
|
};
|
|
1182
1222
|
var Tabs = {
|
|
1183
1223
|
Root: Root,
|
|
@@ -1191,7 +1231,7 @@ var TextArea = React.forwardRef(function (_a, ref) {
|
|
|
1191
1231
|
var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, _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, _f = _a.rows, rows = _f === void 0 ? 3 : _f, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur", "rows"]);
|
|
1192
1232
|
var _g = useFieldAutofill(), isAutofilled = _g.isAutofilled, internalRef = _g.internalRef;
|
|
1193
1233
|
React.useImperativeHandle(ref, function () { return internalRef.current; });
|
|
1194
|
-
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
1234
|
+
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$s.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsx("div", { className: style$s.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-floating-label": floatingLabel, children: jsxRuntime.jsxs("div", { className: style$s.fieldWrapper, children: [jsxRuntime.jsx("textarea", __assign({}, attributes, { id: id, ref: internalRef, value: value, defaultValue: defaultValue, placeholder: " ", className: style$s.field, "data-size": size, "data-autofilled": isAutofilled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, readOnly: readOnly, rows: rows })), label && (jsxRuntime.jsx("label", { className: style$s.label, htmlFor: id, "data-floating": floatingLabel, children: label })), hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$s.hint, children: hint })] }) }) }));
|
|
1195
1235
|
});
|
|
1196
1236
|
TextArea.displayName = "TextArea";
|
|
1197
1237
|
|
|
@@ -1201,11 +1241,11 @@ var FormattedTextField = React.forwardRef(function (_a, ref) {
|
|
|
1201
1241
|
});
|
|
1202
1242
|
FormattedTextField.displayName = "FormattedTextField";
|
|
1203
1243
|
|
|
1204
|
-
var style = {"root":"tile-module__root__ujItM"};
|
|
1244
|
+
var style$2 = {"root":"tile-module__root__ujItM"};
|
|
1205
1245
|
|
|
1206
1246
|
var Tile = function (_a) {
|
|
1207
1247
|
var title = _a.title, description = _a.description, Icon = _a.icon, onClick = _a.onClick, ariaLabel = _a.ariaLabel;
|
|
1208
|
-
return (jsxRuntime.jsx("article", { className: style.root, children: jsxRuntime.jsx("button", { type: "button", onClick: onClick, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : title, "aria-describedby": "tile-desc-".concat(title.toLowerCase().replace(/\s+/g, '-')), children: jsxRuntime.jsxs(Stack, { space: "m", position: "horizontal", children: [Icon && jsxRuntime.jsx(Icon, { "aria-hidden": "true" }), jsxRuntime.jsxs(Stack, { space: "xs", children: [jsxRuntime.jsx("h4", { children: title }), jsxRuntime.jsx("p", { id: "tile-desc-".concat(title.toLowerCase().replace(/\s+/g, '-')), children: description })] })] }) }) }));
|
|
1248
|
+
return (jsxRuntime.jsx("article", { className: style$2.root, children: jsxRuntime.jsx("button", { type: "button", onClick: onClick, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : title, "aria-describedby": "tile-desc-".concat(title.toLowerCase().replace(/\s+/g, '-')), children: jsxRuntime.jsxs(Stack, { space: "m", position: "horizontal", children: [Icon && jsxRuntime.jsx(Icon, { "aria-hidden": "true" }), jsxRuntime.jsxs(Stack, { space: "xs", children: [jsxRuntime.jsx("h4", { children: title }), jsxRuntime.jsx("p", { id: "tile-desc-".concat(title.toLowerCase().replace(/\s+/g, '-')), children: description })] })] }) }) }));
|
|
1209
1249
|
};
|
|
1210
1250
|
|
|
1211
1251
|
var color = {
|
|
@@ -1503,10 +1543,186 @@ var designTokens = {
|
|
|
1503
1543
|
breakpoints: breakpoints
|
|
1504
1544
|
};
|
|
1505
1545
|
|
|
1546
|
+
var BaseLink = React.forwardRef(function BaseLink(_a, ref) {
|
|
1547
|
+
var href = _a.href, onClick = _a.onClick, onBeforeNavigate = _a.onBeforeNavigate, children = _a.children, _b = _a.linkWrapper, LinkWrapper = _b === void 0 ? "a" : _b, rest = __rest(_a, ["href", "onClick", "onBeforeNavigate", "children", "linkWrapper"]);
|
|
1548
|
+
var useLink = href && href.startsWith("/");
|
|
1549
|
+
if (!useLink || !href)
|
|
1550
|
+
return jsxRuntime.jsx("a", __assign({ "data-link": !onClick, href: href, onClick: onClick }, rest, { children: children }));
|
|
1551
|
+
var handleClick = function (event) {
|
|
1552
|
+
onBeforeNavigate === null || onBeforeNavigate === void 0 ? void 0 : onBeforeNavigate(href, event);
|
|
1553
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
1554
|
+
};
|
|
1555
|
+
return (jsxRuntime.jsx(LinkWrapper, __assign({ href: href, onClick: handleClick }, rest, { ref: ref, children: children })));
|
|
1556
|
+
});
|
|
1557
|
+
|
|
1558
|
+
function shouldTriggerStartEvent(href, event) {
|
|
1559
|
+
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
|
|
1560
|
+
return false;
|
|
1561
|
+
try {
|
|
1562
|
+
var target = new URL(href, window.location.href);
|
|
1563
|
+
return window.location.pathname !== target.pathname;
|
|
1564
|
+
}
|
|
1565
|
+
catch (_a) {
|
|
1566
|
+
return false;
|
|
1567
|
+
}
|
|
1568
|
+
}
|
|
1569
|
+
var Link = React.forwardRef(function Link(_a, ref) {
|
|
1570
|
+
var onBeforeNavigate = _a.onBeforeNavigate, rest = __rest(_a, ["onBeforeNavigate"]);
|
|
1571
|
+
return (jsxRuntime.jsx(BaseLink, __assign({ linkWrapper: NextJsLink, onBeforeNavigate: function (href, event) {
|
|
1572
|
+
if (shouldTriggerStartEvent(href, event))
|
|
1573
|
+
NProgress.start();
|
|
1574
|
+
onBeforeNavigate === null || onBeforeNavigate === void 0 ? void 0 : onBeforeNavigate(href, event);
|
|
1575
|
+
} }, rest, { ref: ref })));
|
|
1576
|
+
});
|
|
1577
|
+
|
|
1578
|
+
var MFA_SETUP_KEY = "MFA_SETUP";
|
|
1579
|
+
var useLogin = function (_a) {
|
|
1580
|
+
var email = _a.email, password = _a.password, code = _a.code, loginFn = _a.loginFn, mfaLoginFn = _a.mfaLoginFn, onSignIn = _a.onSignIn, onVerifyAccountRedirect = _a.onVerifyAccountRedirect, onError = _a.onError;
|
|
1581
|
+
var _b = React.useState(false), isShowOtp = _b[0], setIsShowOtp = _b[1];
|
|
1582
|
+
var _c = React.useState(false), isLoading = _c[0], setIsLoading = _c[1];
|
|
1583
|
+
var _d = React.useState(false), isOtpLoading = _d[0], setIsOtpLoading = _d[1];
|
|
1584
|
+
var _e = React.useState(false), isSuccessMfaAuth = _e[0], setIsSuccessMfaAuth = _e[1];
|
|
1585
|
+
var _f = React.useState(""), loginSession = _f[0], setLoginSession = _f[1];
|
|
1586
|
+
var onSubmit = React.useCallback(function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
|
|
1587
|
+
var _c, ChallengeName, qrCode, secretCode, Session, session, e_1;
|
|
1588
|
+
var email = _b.email, password = _b.password;
|
|
1589
|
+
return __generator(this, function (_d) {
|
|
1590
|
+
switch (_d.label) {
|
|
1591
|
+
case 0:
|
|
1592
|
+
setIsLoading(true);
|
|
1593
|
+
_d.label = 1;
|
|
1594
|
+
case 1:
|
|
1595
|
+
_d.trys.push([1, 3, 4, 5]);
|
|
1596
|
+
return [4 /*yield*/, loginFn({ email: email, password: password })];
|
|
1597
|
+
case 2:
|
|
1598
|
+
_c = _d.sent(), ChallengeName = _c.ChallengeName, qrCode = _c.qrCode, secretCode = _c.secretCode, Session = _c.Session, session = _c.session;
|
|
1599
|
+
if (ChallengeName === MFA_SETUP_KEY) {
|
|
1600
|
+
onVerifyAccountRedirect({ qrCode: qrCode, secretCode: secretCode, session: session || Session, email: email, password: password });
|
|
1601
|
+
return [2 /*return*/];
|
|
1602
|
+
}
|
|
1603
|
+
setLoginSession(Session || session);
|
|
1604
|
+
setIsShowOtp(true);
|
|
1605
|
+
return [3 /*break*/, 5];
|
|
1606
|
+
case 3:
|
|
1607
|
+
e_1 = _d.sent();
|
|
1608
|
+
onError === null || onError === void 0 ? void 0 : onError(e_1);
|
|
1609
|
+
return [3 /*break*/, 5];
|
|
1610
|
+
case 4:
|
|
1611
|
+
setIsLoading(false);
|
|
1612
|
+
return [7 /*endfinally*/];
|
|
1613
|
+
case 5: return [2 /*return*/];
|
|
1614
|
+
}
|
|
1615
|
+
});
|
|
1616
|
+
}); }, [loginFn, onVerifyAccountRedirect, onError]);
|
|
1617
|
+
var login = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
1618
|
+
var _a, IdToken, payload, e_2;
|
|
1619
|
+
return __generator(this, function (_b) {
|
|
1620
|
+
switch (_b.label) {
|
|
1621
|
+
case 0:
|
|
1622
|
+
setIsOtpLoading(true);
|
|
1623
|
+
setIsSuccessMfaAuth(false);
|
|
1624
|
+
_b.label = 1;
|
|
1625
|
+
case 1:
|
|
1626
|
+
_b.trys.push([1, 4, 5, 6]);
|
|
1627
|
+
return [4 /*yield*/, mfaLoginFn({ email: email, password: password, mfaCode: code, session: loginSession })];
|
|
1628
|
+
case 2:
|
|
1629
|
+
_a = _b.sent(), IdToken = _a.IdToken, payload = _a.payload;
|
|
1630
|
+
setIsSuccessMfaAuth(true);
|
|
1631
|
+
return [4 /*yield*/, onSignIn(IdToken, payload)];
|
|
1632
|
+
case 3:
|
|
1633
|
+
_b.sent();
|
|
1634
|
+
return [3 /*break*/, 6];
|
|
1635
|
+
case 4:
|
|
1636
|
+
e_2 = _b.sent();
|
|
1637
|
+
onError === null || onError === void 0 ? void 0 : onError(e_2);
|
|
1638
|
+
return [3 /*break*/, 6];
|
|
1639
|
+
case 5:
|
|
1640
|
+
setIsOtpLoading(false);
|
|
1641
|
+
return [7 /*endfinally*/];
|
|
1642
|
+
case 6: return [2 /*return*/];
|
|
1643
|
+
}
|
|
1644
|
+
});
|
|
1645
|
+
}); }, [email, password, code, loginSession, mfaLoginFn, onSignIn, onError]);
|
|
1646
|
+
return {
|
|
1647
|
+
isShowOtp: isShowOtp,
|
|
1648
|
+
loginData: { isLoading: isLoading },
|
|
1649
|
+
isOtpLoading: isOtpLoading,
|
|
1650
|
+
isSuccessMfaAuth: isSuccessMfaAuth,
|
|
1651
|
+
setIsShowOtp: setIsShowOtp,
|
|
1652
|
+
onSubmit: onSubmit,
|
|
1653
|
+
login: login,
|
|
1654
|
+
};
|
|
1655
|
+
};
|
|
1656
|
+
|
|
1657
|
+
var style$1 = {"root":"login-layout-module__root__kF5mq","body":"login-layout-module__body__vmm5x","footer":"login-layout-module__footer__NHAE-","backgroundLogo":"login-layout-module__backgroundLogo__-wPXr"};
|
|
1658
|
+
|
|
1659
|
+
var defaultFooter = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("p", { children: ["KAIO\u00A0", jsxRuntime.jsx("a", { href: "https://www.kaio.xyz/privacy-policy", target: "_blank", rel: "noreferrer", children: "Privacy Policy" }), ",\u00A0", jsxRuntime.jsx("a", { href: "https://www.kaio.xyz/terms-of-use", target: "_blank", rel: "noreferrer", children: "Disclaimer" }), "\u00A0and Terms of Conditions apply."] }), jsxRuntime.jsx("p", { children: "Alternative investments involve risk including loss of capital and are not suitable for all investors." })] }));
|
|
1660
|
+
var LoginLayout = function (_a) {
|
|
1661
|
+
var children = _a.children, actions = _a.actions, header = _a.header, logo = _a.logo, backgroundIcon = _a.backgroundIcon, _b = _a.footer, footer = _b === void 0 ? defaultFooter : _b;
|
|
1662
|
+
return (jsxRuntime.jsxs("div", { className: style$1.root, children: [jsxRuntime.jsxs("div", { className: style$1.body, children: [jsxRuntime.jsxs(Stack, { space: "xl", children: [logo, jsxRuntime.jsxs(Stack, { children: [header, jsxRuntime.jsx(Stack, { children: children })] })] }), actions, footer && jsxRuntime.jsx("div", { className: style$1.footer, children: footer })] }), backgroundIcon && (jsxRuntime.jsx("div", { className: style$1.backgroundLogo, children: backgroundIcon }))] }));
|
|
1663
|
+
};
|
|
1664
|
+
|
|
1665
|
+
var LoginCode = function (_a) {
|
|
1666
|
+
var _b;
|
|
1667
|
+
var isLoading = _a.isLoading, errors = _a.errors, disabled = _a.disabled, register = _a.register, login = _a.login;
|
|
1668
|
+
var onKeyDownHandler = function (e) {
|
|
1669
|
+
if (e.key === "Enter" && !disabled)
|
|
1670
|
+
login();
|
|
1671
|
+
};
|
|
1672
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { dataAlignItems: "center", children: [jsxRuntime.jsx("h2", { children: "Verify your account" }), jsxRuntime.jsx("p", { "data-text-align": "center", children: "Please enter the 6-digit number security code from your authenticator app" })] }), jsxRuntime.jsx(TextField, __assign({}, register("code", {
|
|
1673
|
+
required: "Verification code is required",
|
|
1674
|
+
validate: function (value) { return (value === null || value === void 0 ? void 0 : value.toString().length) === 6; },
|
|
1675
|
+
}), { id: "code", label: "6 digit code", "data-test": "LoginCode__TextField__Code", hint: (_b = errors === null || errors === void 0 ? void 0 : errors.code) === null || _b === void 0 ? void 0 : _b.message, invalid: Boolean(errors === null || errors === void 0 ? void 0 : errors.code), onKeyDown: onKeyDownHandler, disabled: isLoading, type: "number", fullWidth: true, autoComplete: "one-time-code", autoFocus: true }))] }));
|
|
1676
|
+
};
|
|
1677
|
+
|
|
1678
|
+
var emailPattern = {
|
|
1679
|
+
value: /^[a-zA-Z0-9_\-.+]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9\-.]+$/,
|
|
1680
|
+
message: "Invalid email address",
|
|
1681
|
+
};
|
|
1682
|
+
var LoginCredentials = function (_a) {
|
|
1683
|
+
var _b, _c;
|
|
1684
|
+
var isLoading = _a.isLoading, errors = _a.errors, register = _a.register;
|
|
1685
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Stack, { dataAlignItems: "center", children: jsxRuntime.jsx("h2", { children: "Welcome back" }) }), jsxRuntime.jsx(TextField, __assign({}, register("email", { required: "Email field is required", pattern: emailPattern }), { id: "email", label: "Email", "data-test": "LoginForm__Input__email", hint: (_b = errors === null || errors === void 0 ? void 0 : errors.email) === null || _b === void 0 ? void 0 : _b.message, invalid: Boolean(errors === null || errors === void 0 ? void 0 : errors.email), disabled: isLoading, fullWidth: true })), jsxRuntime.jsx(PasswordField, __assign({}, register("password", { required: "Password is required" }), { id: "password", label: "Password", "data-test": "LoginForm__Input__password", hint: (_c = errors === null || errors === void 0 ? void 0 : errors.password) === null || _c === void 0 ? void 0 : _c.message, invalid: Boolean(errors === null || errors === void 0 ? void 0 : errors.password), disabled: isLoading, fullWidth: true }))] }));
|
|
1686
|
+
};
|
|
1687
|
+
|
|
1688
|
+
var style = {"buttonRow":"login-module__buttonRow__4LBxx"};
|
|
1689
|
+
|
|
1690
|
+
var Login = function (_a) {
|
|
1691
|
+
var signupRequestRoute = _a.signupRequestRoute, forgotPasswordRoute = _a.forgotPasswordRoute, loginFn = _a.loginFn, mfaLoginFn = _a.mfaLoginFn, onSignIn = _a.onSignIn, onVerifyAccountRedirect = _a.onVerifyAccountRedirect, onError = _a.onError, logo = _a.logo, backgroundIcon = _a.backgroundIcon, footer = _a.footer;
|
|
1692
|
+
var _b = reactHookForm.useForm({ mode: "onChange" }), formState = _b.formState, control = _b.control, register = _b.register, handleSubmit = _b.handleSubmit, resetField = _b.resetField;
|
|
1693
|
+
var isValid = formState.isValid, errors = formState.errors;
|
|
1694
|
+
var email = reactHookForm.useWatch({ control: control, name: "email" });
|
|
1695
|
+
var password = reactHookForm.useWatch({ control: control, name: "password" });
|
|
1696
|
+
var code = reactHookForm.useWatch({ control: control, name: "code" });
|
|
1697
|
+
var _c = useLogin({
|
|
1698
|
+
email: email,
|
|
1699
|
+
password: password,
|
|
1700
|
+
code: code,
|
|
1701
|
+
loginFn: loginFn,
|
|
1702
|
+
mfaLoginFn: mfaLoginFn,
|
|
1703
|
+
onSignIn: onSignIn,
|
|
1704
|
+
onVerifyAccountRedirect: onVerifyAccountRedirect,
|
|
1705
|
+
onError: onError,
|
|
1706
|
+
}), isShowOtp = _c.isShowOtp, isOtpLoading = _c.isOtpLoading, isLoading = _c.loginData.isLoading, isSuccessMfaAuth = _c.isSuccessMfaAuth, onSubmit = _c.onSubmit, login = _c.login, setIsShowOtp = _c.setIsShowOtp;
|
|
1707
|
+
var loginSubmit = React.useCallback(function (form) {
|
|
1708
|
+
resetField("code");
|
|
1709
|
+
onSubmit(form);
|
|
1710
|
+
}, [resetField, onSubmit]);
|
|
1711
|
+
var bodyProps = { isLoading: isLoading, errors: errors, register: register };
|
|
1712
|
+
var body = isShowOtp
|
|
1713
|
+
? jsxRuntime.jsx(LoginCode, __assign({ login: login }, bodyProps, { disabled: !isValid || isOtpLoading }))
|
|
1714
|
+
: jsxRuntime.jsx(LoginCredentials, __assign({}, bodyProps));
|
|
1715
|
+
var actions = isShowOtp
|
|
1716
|
+
? (jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx(Button, { "data-test": "LoginWithMfa__Button__submit", onClick: login, disabled: !isValid || isOtpLoading || isSuccessMfaAuth, isLoading: isOtpLoading, children: "Confirm" }), jsxRuntime.jsxs(Stack, { position: "horizontal-center", className: style.buttonRow, dataAlignItems: "center", children: [jsxRuntime.jsx(Stack, { position: "horizontal", children: jsxRuntime.jsx("p", { children: "Wrong account?" }) }), jsxRuntime.jsx(Link, { onClick: function () { return setIsShowOtp(false); }, children: "Back to login" })] })] }))
|
|
1717
|
+
: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { "data-test": "LoginForm__Button__login", type: "submit", disabled: !isValid, isLoading: isLoading, children: "Log in" }), jsxRuntime.jsxs(Stack, { children: [signupRequestRoute && (jsxRuntime.jsxs(Stack, { position: "horizontal-center", className: style.buttonRow, dataAlignItems: "center", children: [jsxRuntime.jsx(Stack, { position: "horizontal", children: jsxRuntime.jsx("p", { children: "Don't have an account?" }) }), jsxRuntime.jsx(Link, { href: signupRequestRoute, "data-test": "LoginForm__Button__signup", children: "Sign up" })] })), jsxRuntime.jsxs(Stack, { position: "horizontal-center", className: style.buttonRow, dataAlignItems: "center", children: [jsxRuntime.jsx(Stack, { position: "horizontal", children: jsxRuntime.jsx("p", { children: "Forgot password?" }) }), jsxRuntime.jsx(Link, { href: forgotPasswordRoute, "data-test": "LoginForm__Button__forgotPassword", children: "Reset" })] })] })] }));
|
|
1718
|
+
return (jsxRuntime.jsx("form", { onSubmit: handleSubmit(loginSubmit), children: jsxRuntime.jsx(LoginLayout, { logo: logo, backgroundIcon: backgroundIcon, footer: footer, actions: actions, children: body }) }));
|
|
1719
|
+
};
|
|
1720
|
+
|
|
1506
1721
|
exports.Accordion = Accordion;
|
|
1507
1722
|
exports.Alert = Alert;
|
|
1508
1723
|
exports.Badge = Badge;
|
|
1509
1724
|
exports.BadgeStatuses = BadgeStatuses;
|
|
1725
|
+
exports.BaseLink = BaseLink;
|
|
1510
1726
|
exports.Box = Box;
|
|
1511
1727
|
exports.Button = Button;
|
|
1512
1728
|
exports.Checkbox = Checkbox;
|
|
@@ -1520,9 +1736,12 @@ exports.FormattedTextField = FormattedTextField;
|
|
|
1520
1736
|
exports.InfoModal = InfoModal;
|
|
1521
1737
|
exports.InvestmentGraph = InvestmentGraph;
|
|
1522
1738
|
exports.InvestmentsHeader = InvestmentsHeader;
|
|
1739
|
+
exports.Link = Link;
|
|
1523
1740
|
exports.List = List$1;
|
|
1524
1741
|
exports.ListItem = ListItem;
|
|
1525
1742
|
exports.Loader = Loader;
|
|
1743
|
+
exports.Login = Login;
|
|
1744
|
+
exports.LoginLayout = LoginLayout;
|
|
1526
1745
|
exports.Modal = Modal;
|
|
1527
1746
|
exports.OtpModal = OtpModal;
|
|
1528
1747
|
exports.PasswordField = PasswordField;
|