@kaio-xyz/design-system 1.1.146 → 1.1.148
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 +128 -85
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +18 -2
- package/dist/index.esm.js +128 -86
- 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
|
@@ -415,17 +415,17 @@ var SvgLoginLogo = function SvgLoginLogo(props) {
|
|
|
415
415
|
}))));
|
|
416
416
|
};
|
|
417
417
|
|
|
418
|
-
var style$
|
|
418
|
+
var style$y = {"root":"stack-module__root__AqSLk"};
|
|
419
419
|
|
|
420
420
|
var Stack = function (_a) {
|
|
421
421
|
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"]);
|
|
422
422
|
var Tag = as || "div";
|
|
423
|
-
return (jsxRuntime.jsx(Tag, __assign({ className: clsx(style$
|
|
423
|
+
return (jsxRuntime.jsx(Tag, __assign({ className: clsx(style$y.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 })));
|
|
424
424
|
};
|
|
425
425
|
|
|
426
426
|
var baseStyle = {"root":"badge-base-module__root__oUZlm"};
|
|
427
427
|
|
|
428
|
-
var style$
|
|
428
|
+
var style$x = {"root":"badge-module__root__rXpaz"};
|
|
429
429
|
|
|
430
430
|
var BadgeStatuses = {
|
|
431
431
|
success: "success",
|
|
@@ -447,16 +447,16 @@ var Badge = function (_a) {
|
|
|
447
447
|
default: return jsxRuntime.jsx(SvgCircleDashed, {});
|
|
448
448
|
}
|
|
449
449
|
}, [status]);
|
|
450
|
-
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$
|
|
450
|
+
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$x.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] }) })));
|
|
451
451
|
};
|
|
452
452
|
|
|
453
|
-
var style$
|
|
453
|
+
var style$w = {"root":"button-module__root__CDCDX"};
|
|
454
454
|
|
|
455
|
-
var style$
|
|
455
|
+
var style$v = {"root":"spinned-icon-module__root__xchkj"};
|
|
456
456
|
|
|
457
457
|
var SpinnedIcon = function (_a) {
|
|
458
458
|
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"]);
|
|
459
|
-
return (jsxRuntime.jsx("div", { className: clsx(style$
|
|
459
|
+
return (jsxRuntime.jsx("div", { className: clsx(style$v.root, className), style: {
|
|
460
460
|
width: size,
|
|
461
461
|
height: size,
|
|
462
462
|
animationDuration: "".concat(duration, "s"),
|
|
@@ -470,7 +470,7 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
470
470
|
var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps, { viewBox: "0 0 24 24" }));
|
|
471
471
|
var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
|
|
472
472
|
var iconChild = loadingIcon || baseIcon || null;
|
|
473
|
-
var classes = clsx(style$
|
|
473
|
+
var classes = clsx(style$w.root, props.className);
|
|
474
474
|
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] }) }))));
|
|
475
475
|
});
|
|
476
476
|
Button.displayName = "Button";
|
|
@@ -495,41 +495,41 @@ var useFieldAutofill = function () {
|
|
|
495
495
|
return { isAutofilled: isAutofilled, internalRef: internalRef };
|
|
496
496
|
};
|
|
497
497
|
|
|
498
|
-
var style$
|
|
498
|
+
var style$u = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
|
|
499
499
|
|
|
500
500
|
var Hint = function (_a) {
|
|
501
501
|
var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
|
|
502
|
-
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$
|
|
502
|
+
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$u.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$u.children, children: children })] })));
|
|
503
503
|
};
|
|
504
504
|
|
|
505
|
-
var style$
|
|
505
|
+
var style$t = {"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"};
|
|
506
506
|
|
|
507
507
|
var TextField = React.forwardRef(function (_a, ref) {
|
|
508
508
|
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"]);
|
|
509
509
|
var _g = useFieldAutofill(), isAutofilled = _g.isAutofilled, internalRef = _g.internalRef;
|
|
510
510
|
React.useImperativeHandle(ref, function () { return internalRef.current; });
|
|
511
|
-
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
511
|
+
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$t.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsx("div", { className: style$t.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: jsxRuntime.jsxs("div", { className: style$t.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({}, attributes, { id: id, ref: internalRef, type: type, value: value, defaultValue: defaultValue, placeholder: " ", className: style$t.field, "data-size": size, "data-autofilled": isAutofilled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, readOnly: readOnly })), label && (jsxRuntime.jsx("label", { className: style$t.label, htmlFor: id, "data-floating": floatingLabel, children: label })), button ? button : null, hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$t.hint, children: hint })] }) }) }));
|
|
512
512
|
});
|
|
513
513
|
TextField.displayName = "TextField";
|
|
514
514
|
|
|
515
|
-
var style$
|
|
515
|
+
var style$s = {"container":"container-module__container__CAxQw"};
|
|
516
516
|
|
|
517
517
|
var Container = function (_a) {
|
|
518
518
|
var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
|
|
519
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$
|
|
519
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$s.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
520
520
|
};
|
|
521
521
|
|
|
522
|
-
var style$
|
|
522
|
+
var style$r = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
|
|
523
523
|
|
|
524
524
|
var PasswordField = React.forwardRef(function (_a, ref) {
|
|
525
525
|
var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
|
|
526
526
|
var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
|
|
527
|
-
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$
|
|
528
|
-
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$
|
|
527
|
+
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$r.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
|
|
528
|
+
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$r.field })));
|
|
529
529
|
});
|
|
530
530
|
PasswordField.displayName = "PasswordField";
|
|
531
531
|
|
|
532
|
-
var style$
|
|
532
|
+
var style$q = {"validator":"validate-password-field-module__validator__Do-6w"};
|
|
533
533
|
|
|
534
534
|
var rules = {
|
|
535
535
|
length: /^.{8,}$/,
|
|
@@ -554,12 +554,12 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
|
|
|
554
554
|
React.useEffect(function () {
|
|
555
555
|
setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
|
|
556
556
|
}, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
|
|
557
|
-
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$
|
|
557
|
+
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$q.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
|
|
558
558
|
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: @ $ ! % * ? & _ #)")] })] }));
|
|
559
559
|
});
|
|
560
560
|
ValidatePasswordField.displayName = "ValidatePasswordField";
|
|
561
561
|
|
|
562
|
-
var style$
|
|
562
|
+
var style$p = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
|
|
563
563
|
|
|
564
564
|
var IconAndLabel = function (_a) {
|
|
565
565
|
var children = _a.children, Icon = _a.icon;
|
|
@@ -606,7 +606,7 @@ var Select = function (_a) {
|
|
|
606
606
|
setUncontrolledHasValue(v != null && (!Array.isArray(v) || v.length > 0));
|
|
607
607
|
onChange === null || onChange === void 0 ? void 0 : onChange(newValue, actionMeta);
|
|
608
608
|
};
|
|
609
|
-
return (jsxRuntime.jsx("div", { className: clsx(style$
|
|
609
|
+
return (jsxRuntime.jsx("div", { className: clsx(style$p.root, className), children: jsxRuntime.jsxs("div", { className: style$p.selector, "data-error": !!error, "data-has-floating-label": !!label, "data-floating-active": isFloating, children: [label && (jsxRuntime.jsx("label", { className: style$p.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$p.hint, children: error })] }) }));
|
|
610
610
|
};
|
|
611
611
|
Select.displayName = "Select";
|
|
612
612
|
|
|
@@ -619,14 +619,14 @@ var FormSelect = function (_a) {
|
|
|
619
619
|
};
|
|
620
620
|
FormSelect.displayName = "FormSelect";
|
|
621
621
|
|
|
622
|
-
var style$
|
|
622
|
+
var style$o = {"root":"loader-module__root__qnInQ","body":"loader-module__body__B-xBi"};
|
|
623
623
|
|
|
624
624
|
var Loader = function (_a) {
|
|
625
625
|
var text = _a.text, children = _a.children, className = _a.className, _b = _a.isLighter, isLighter = _b === void 0 ? false : _b;
|
|
626
|
-
return (jsxRuntime.jsx("div", { className: clsx(style$
|
|
626
|
+
return (jsxRuntime.jsx("div", { className: clsx(style$o.root, className), "data-is-lighter": isLighter, children: jsxRuntime.jsxs(Stack, { className: style$o.body, dataAlignItems: "center", children: [jsxRuntime.jsx(SpinnedIcon, { size: 50 }), text && jsxRuntime.jsx("p", { children: text }), children] }) }));
|
|
627
627
|
};
|
|
628
628
|
|
|
629
|
-
var style$
|
|
629
|
+
var style$n = {"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"};
|
|
630
630
|
|
|
631
631
|
var Checkbox = function (_a) {
|
|
632
632
|
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"]);
|
|
@@ -639,11 +639,11 @@ var Checkbox = function (_a) {
|
|
|
639
639
|
var dynamicStyle = {
|
|
640
640
|
"--vAlign": verticalAlign,
|
|
641
641
|
};
|
|
642
|
-
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$
|
|
642
|
+
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$n.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$n.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$n.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$n.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$n.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$n.label, children: label })] }));
|
|
643
643
|
};
|
|
644
644
|
Checkbox.displayName = "Checkbox";
|
|
645
645
|
|
|
646
|
-
var style$
|
|
646
|
+
var style$m = {"root":"clipboard-module__root__wVZhy"};
|
|
647
647
|
|
|
648
648
|
var trimString = function (str, noOfChars) {
|
|
649
649
|
if (noOfChars === void 0) { noOfChars = 4; }
|
|
@@ -667,42 +667,42 @@ var Clipboard = function (_a) {
|
|
|
667
667
|
}, [value]);
|
|
668
668
|
var text = isShowingCopy ? 'Copied!' : displayValue;
|
|
669
669
|
var icon = isShowingCopy ? jsxRuntime.jsx(SvgCheck, { viewBox: "0 0 24 24" }) : jsxRuntime.jsx(SvgClipboard, { viewBox: "0 0 24 24" });
|
|
670
|
-
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$
|
|
670
|
+
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$m.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] }) }));
|
|
671
671
|
};
|
|
672
672
|
|
|
673
|
-
var style$
|
|
673
|
+
var style$l = {"root":"stepper-module__root__hgDss"};
|
|
674
674
|
|
|
675
675
|
var Stepper = function (_a) {
|
|
676
676
|
var children = _a.children, dataTest = _a.dataTest, className = _a.className, _b = _a.direction, direction = _b === void 0 ? 'vertical' : _b;
|
|
677
|
-
return (jsxRuntime.jsx("ul", { className: clsx(style$
|
|
677
|
+
return (jsxRuntime.jsx("ul", { className: clsx(style$l.root, className), "data-is-stepper-horizontal": direction === 'horizontal', "data-test": dataTest, children: children }));
|
|
678
678
|
};
|
|
679
679
|
|
|
680
|
-
var style$
|
|
680
|
+
var style$k = {"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"};
|
|
681
681
|
|
|
682
682
|
var Step = function (_a) {
|
|
683
683
|
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"]);
|
|
684
684
|
var icon = React.useMemo(function () {
|
|
685
685
|
switch (true) {
|
|
686
|
-
case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$
|
|
687
|
-
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$
|
|
688
|
-
default: return jsxRuntime.jsx("span", { className: style$
|
|
686
|
+
case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$k.checkIcon, viewBox: "0 0 24 24" });
|
|
687
|
+
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$k.loadingIcon });
|
|
688
|
+
default: return jsxRuntime.jsx("span", { className: style$k.emptyIcon });
|
|
689
689
|
}
|
|
690
690
|
}, [isCompleted, isCurrent, iconSize]);
|
|
691
|
-
return (jsxRuntime.jsx("li", __assign({ className: clsx(style$
|
|
691
|
+
return (jsxRuntime.jsx("li", __assign({ className: clsx(style$k.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$k.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$k.label, children: label })] }) })));
|
|
692
692
|
};
|
|
693
693
|
|
|
694
|
-
var style$
|
|
694
|
+
var style$j = {"root":"list-module__root__OXx93"};
|
|
695
695
|
|
|
696
696
|
var List$1 = function (_a) {
|
|
697
697
|
var label = _a.label, children = _a.children;
|
|
698
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
698
|
+
return (jsxRuntime.jsxs(Stack, { className: style$j.root, children: [label && jsxRuntime.jsx("h3", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
|
|
699
699
|
};
|
|
700
700
|
|
|
701
|
-
var style$
|
|
701
|
+
var style$i = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
|
|
702
702
|
|
|
703
703
|
var ListItem = function (_a) {
|
|
704
704
|
var value = _a.value, label = _a.label, key = _a.key, icon = _a.icon;
|
|
705
|
-
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { space: "m", className: style$
|
|
705
|
+
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { space: "m", className: style$i.root, children: [jsxRuntime.jsxs(Stack, { position: "horizontal", space: "m", dataAlignItems: "center", children: [icon, jsxRuntime.jsx("span", { className: style$i.label, children: label })] }), jsxRuntime.jsx("span", { className: style$i.value, children: value })] }) }, key));
|
|
706
706
|
};
|
|
707
707
|
|
|
708
708
|
var AccordionRoot = function (_a) {
|
|
@@ -710,38 +710,38 @@ var AccordionRoot = function (_a) {
|
|
|
710
710
|
return (jsxRuntime.jsx(RAccordion__namespace.Root, __assign({}, rest, { children: children })));
|
|
711
711
|
};
|
|
712
712
|
|
|
713
|
-
var style$
|
|
713
|
+
var style$h = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
|
|
714
714
|
|
|
715
715
|
var AccordionContent = React.forwardRef(function (_a, forwardedRef) {
|
|
716
716
|
var children = _a.children, className = _a.className, hasChildrenPadding = _a.hasChildrenPadding, rest = __rest(_a, ["children", "className", "hasChildrenPadding"]);
|
|
717
|
-
return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$
|
|
717
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$h.content, className), ref: forwardedRef }, rest, { children: jsxRuntime.jsx("div", { className: style$h.childrenContainer, children: jsxRuntime.jsx("div", { className: style$h.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
|
|
718
718
|
});
|
|
719
719
|
AccordionContent.displayName = "AccordionContent";
|
|
720
720
|
|
|
721
|
-
var style$
|
|
721
|
+
var style$g = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
|
|
722
722
|
|
|
723
723
|
var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
|
|
724
724
|
var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, dataTest = _a.dataTest, rest = __rest(_a, ["children", "className", "dataTest"]);
|
|
725
|
-
return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$
|
|
725
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$g.header, children: jsxRuntime.jsx(RAccordion__namespace.Trigger, __assign({ className: clsx(style$g.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
|
|
726
726
|
});
|
|
727
727
|
AccordionTrigger.displayName = "AccordionTrigger";
|
|
728
728
|
|
|
729
|
-
var style$
|
|
729
|
+
var style$f = {"root":"accordion-item-module__root__1Yk4f"};
|
|
730
730
|
|
|
731
731
|
var AccordionItem = React.forwardRef(function (_a, forwardedRef) {
|
|
732
732
|
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;
|
|
733
|
-
return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$
|
|
733
|
+
return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$f.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsxRuntime.jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsxRuntime.jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
|
|
734
734
|
});
|
|
735
735
|
AccordionItem.displayName = "AccordionItem";
|
|
736
736
|
|
|
737
737
|
var Accordion = { Root: AccordionRoot, Item: AccordionItem };
|
|
738
738
|
|
|
739
|
-
var style$
|
|
739
|
+
var style$e = {"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"};
|
|
740
740
|
|
|
741
741
|
var ModalElement = function (_a) {
|
|
742
742
|
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"]);
|
|
743
743
|
var modalRef = React.useRef(null);
|
|
744
|
-
return (jsxRuntime.jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$
|
|
744
|
+
return (jsxRuntime.jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$e.modal, className), "data-test": "Modal__Div__content", "data-visible": visible, "data-is-not-closable": !onClose }, attributes, { children: [jsxRuntime.jsx("dialog", { className: style$e.backdrop }), jsxRuntime.jsx("div", { className: style$e.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxRuntime.jsxs("div", { className: style$e.bodyWrapper, children: __spreadArray([title && (jsxRuntime.jsxs("div", { className: style$e.header, children: [jsxRuntime.jsx("h2", { id: id, children: title }), jsxRuntime.jsx(SvgCross, { "data-icon": true, onClick: onClose })] })), jsxRuntime.jsx("div", { className: style$e.body, children: children })], actions.map(function (i, idx) { return jsxRuntime.jsx("div", { className: style$e.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
|
|
745
745
|
};
|
|
746
746
|
var Modal = function (_a) {
|
|
747
747
|
var visible = _a.visible, props = __rest(_a, ["visible"]);
|
|
@@ -772,28 +772,28 @@ var InfoModal = function (_a) {
|
|
|
772
772
|
return (jsxRuntime.jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
|
|
773
773
|
};
|
|
774
774
|
|
|
775
|
-
var style$
|
|
775
|
+
var style$d = {"content":"dropdown-menu-module__content__sSYNC","arrow":"dropdown-menu-module__arrow__AFHzK","trigger":"dropdown-menu-module__trigger__GLDRV"};
|
|
776
776
|
|
|
777
777
|
var DropdownMenu$1 = function (_a) {
|
|
778
778
|
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"]);
|
|
779
779
|
var defaultBody = !text ? Icon && jsxRuntime.jsx(Icon, { viewBox: "0 0 24 24" }) : jsxRuntime.jsx(Button, { size: buttonSize, icon: Icon, variant: variant, children: text });
|
|
780
|
-
return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$
|
|
780
|
+
return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$d.trigger, disabled: disabled, children: body ? body : defaultBody })), jsxRuntime.jsx(RDropdownMenu__namespace.Portal, { children: jsxRuntime.jsxs(RDropdownMenu__namespace.Content, { className: style$d.content, sideOffset: 5, children: [children, jsxRuntime.jsx(RDropdownMenu__namespace.Arrow, { className: style$d.arrow })] }) })] }));
|
|
781
781
|
};
|
|
782
782
|
|
|
783
|
-
var style$
|
|
783
|
+
var style$c = {"root":"dropdown-menu-item-module__root__zs510"};
|
|
784
784
|
|
|
785
785
|
var DropdownMenuItem = function (_a) {
|
|
786
786
|
var children = _a.children, disabled = _a.disabled, onClick = _a.onClick, rest = __rest(_a, ["children", "disabled", "onClick"]);
|
|
787
|
-
return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$
|
|
787
|
+
return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$c.root, onClick: !disabled ? onClick : undefined, disabled: disabled }, rest, { children: children })));
|
|
788
788
|
};
|
|
789
789
|
|
|
790
790
|
var DropdownMenu = { Root: DropdownMenu$1, Item: DropdownMenuItem };
|
|
791
791
|
|
|
792
|
-
var style$
|
|
792
|
+
var style$b = {"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"};
|
|
793
793
|
|
|
794
794
|
var Tooltip = function (_a) {
|
|
795
795
|
var children = _a.children, title = _a.title, description = _a.description, rest = __rest(_a, ["children", "title", "description"]);
|
|
796
|
-
return (jsxRuntime.jsx(RTooltip__namespace.Provider, { children: jsxRuntime.jsxs(RTooltip__namespace.Root, __assign({}, rest, { children: [jsxRuntime.jsx(RTooltip__namespace.Trigger, { className: style$
|
|
796
|
+
return (jsxRuntime.jsx(RTooltip__namespace.Provider, { children: jsxRuntime.jsxs(RTooltip__namespace.Root, __assign({}, rest, { children: [jsxRuntime.jsx(RTooltip__namespace.Trigger, { className: style$b.trigger, asChild: true, children: children }), jsxRuntime.jsx(RTooltip__namespace.Portal, { children: jsxRuntime.jsxs(RTooltip__namespace.Content, { className: style$b.content, sideOffset: 2, children: [jsxRuntime.jsx(SvgInfo, { viewBox: "0 0 24 24", className: style$b.icon, width: 20, height: 20 }), jsxRuntime.jsxs("div", { className: style$b.body, children: [jsxRuntime.jsx("span", { className: style$b.title, children: title }), description && jsxRuntime.jsx("span", { className: style$b.description, children: description })] }), jsxRuntime.jsx(RTooltip__namespace.Arrow, { className: style$b.arrow })] }) })] })) }));
|
|
797
797
|
};
|
|
798
798
|
|
|
799
799
|
var isEnter = function (e) { return e.key === "Enter"; };
|
|
@@ -1030,7 +1030,7 @@ var ByProductChart = function (_a) {
|
|
|
1030
1030
|
} }), 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)); })] }) }));
|
|
1031
1031
|
};
|
|
1032
1032
|
|
|
1033
|
-
var style$
|
|
1033
|
+
var style$a = {"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"};
|
|
1034
1034
|
|
|
1035
1035
|
var TotalChart = function (_a) {
|
|
1036
1036
|
var data = _a.data, ticks = _a.ticks, timeFrame = _a.timeFrame;
|
|
@@ -1108,28 +1108,28 @@ var InvestmentGraph = function (_a) {
|
|
|
1108
1108
|
}
|
|
1109
1109
|
return getMonthTicks(dates);
|
|
1110
1110
|
}, [timeFrame, viewMode, totalData, byProductChartData]);
|
|
1111
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
1111
|
+
return (jsxRuntime.jsxs(Stack, { className: style$a.root, space: "m", children: [jsxRuntime.jsxs(Stack, { space: "none", children: [header && (jsxRuntime.jsx("div", { className: style$a.paddedWrapper, children: header })), jsxRuntime.jsxs(Stack, { className: style$a.paddedWrapper, position: "horizontal-space", wrap: true, children: [jsxRuntime.jsx("div", { className: style$a.graphButtons, children: periodOptions.map(function (p) { return (jsxRuntime.jsx("button", { tabIndex: isLocked ? -1 : 0, disabled: isLocked, onKeyDown: function (e) {
|
|
1112
1112
|
return isEnter(e) && !isLocked
|
|
1113
1113
|
? setTimeFrame(p)
|
|
1114
1114
|
: null;
|
|
1115
|
-
}, className: style$
|
|
1115
|
+
}, className: style$a.graphButton, "data-active": (timeFrame === null || timeFrame === void 0 ? void 0 : timeFrame.value) === p.value
|
|
1116
1116
|
? 'true'
|
|
1117
|
-
: 'false', onClick: function () { return setTimeFrame(p); }, children: p.label }, p.value)); }) }), hasByProductView && (jsxRuntime.jsx("div", { className: style$
|
|
1117
|
+
: 'false', onClick: function () { return setTimeFrame(p); }, children: p.label }, p.value)); }) }), hasByProductView && (jsxRuntime.jsx("div", { className: style$a.graphButtons, children: ViewModes.map(function (mode) { return (jsxRuntime.jsx("button", { tabIndex: 0, className: style$a.graphButton, "data-active": viewMode === mode
|
|
1118
1118
|
? 'true'
|
|
1119
1119
|
: 'false', onClick: function () {
|
|
1120
1120
|
return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode(mode);
|
|
1121
|
-
}, children: mode === 'total' ? 'Total' : 'By Product' }, mode)); }) }))] })] }), isLocked ? (jsxRuntime.jsx("div", { className: style$
|
|
1121
|
+
}, children: mode === 'total' ? 'Total' : 'By Product' }, mode)); }) }))] })] }), isLocked ? (jsxRuntime.jsx("div", { className: style$a.lockedPlaceholder, children: jsxRuntime.jsx("div", { className: style$a.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 }))] }));
|
|
1122
1122
|
};
|
|
1123
1123
|
|
|
1124
|
-
var style$
|
|
1124
|
+
var style$9 = {"root":"investments-header-module__root__fxQmk","total":"investments-header-module__total__DrEq0","badge":"investments-header-module__badge__-aeBM"};
|
|
1125
1125
|
|
|
1126
1126
|
var InvestmentsHeader = function (_a) {
|
|
1127
1127
|
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;
|
|
1128
1128
|
var isNegativePercentage = currentGainLossPercentageValue < 0;
|
|
1129
1129
|
var dataGain = isNegativePercentage ? "negative" : "positive";
|
|
1130
1130
|
var triangle = isNegativePercentage ? jsxRuntime.jsx(SvgArrowDownRight, { "data-gain": "negative" }) : jsxRuntime.jsx(SvgArrowUpRight, { "data-gain": "positive" });
|
|
1131
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
1132
|
-
? (jsxRuntime.jsx(Badge, { status: isNegativePercentage ? "rejected" : "success", className: style$
|
|
1131
|
+
return (jsxRuntime.jsxs(Stack, { className: style$9.root, space: "xs", children: [jsxRuntime.jsx("p", { className: style$9.total, children: title }), jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx("h1", { children: formatNumberWithCurrency(currentTotalInvestmentValue) }), currentGainLossValue && currentGainLossPercentageValue
|
|
1132
|
+
? (jsxRuntime.jsx(Badge, { status: isNegativePercentage ? "rejected" : "success", className: style$9.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)), "%)"] })] }) }))
|
|
1133
1133
|
: null] })] }));
|
|
1134
1134
|
};
|
|
1135
1135
|
|
|
@@ -1176,13 +1176,13 @@ var tableCustomStyles = {
|
|
|
1176
1176
|
},
|
|
1177
1177
|
};
|
|
1178
1178
|
|
|
1179
|
-
var style$
|
|
1179
|
+
var style$8 = {"tableWrapper":"table-module__tableWrapper__q2Fb1"};
|
|
1180
1180
|
|
|
1181
1181
|
var Table = function (_a) {
|
|
1182
1182
|
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"]);
|
|
1183
1183
|
return isLoading
|
|
1184
1184
|
? null
|
|
1185
|
-
: (jsxRuntime.jsx("div", { "data-test": dataTest, className: style$
|
|
1185
|
+
: (jsxRuntime.jsx("div", { "data-test": dataTest, className: style$8.tableWrapper, "data-is-row-clickable": !!onRowClicked, children: jsxRuntime.jsx(DataTable, __assign({ columns: columns, data: data, customStyles: tableCustomStyles, onRowClicked: onRowClicked }, rest)) }));
|
|
1186
1186
|
};
|
|
1187
1187
|
|
|
1188
1188
|
var useCanAnimate = function () {
|
|
@@ -1196,16 +1196,16 @@ var useCanAnimate = function () {
|
|
|
1196
1196
|
return canAnimate;
|
|
1197
1197
|
};
|
|
1198
1198
|
|
|
1199
|
-
var style$
|
|
1199
|
+
var style$7 = {"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"};
|
|
1200
1200
|
|
|
1201
1201
|
var Drawer = function (_a) {
|
|
1202
1202
|
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"]);
|
|
1203
1203
|
var canAnimate = useCanAnimate();
|
|
1204
|
-
var drawerContent = (jsxRuntime.jsxs("div", { className: clsx(style$
|
|
1204
|
+
var drawerContent = (jsxRuntime.jsxs("div", { className: clsx(style$7.root, className), "data-is-open": isOpen, "data-can-animate": canAnimate, children: [jsxRuntime.jsx("button", { className: style$7.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$7.drawer, "data-is-large": isLarge }, rest, { children: [jsxRuntime.jsxs("div", { className: style$7.header, children: [jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx("h2", { className: style$7.title, children: title }), subTitle && jsxRuntime.jsx("p", { className: style$7.subTitle, children: subTitle })] }), jsxRuntime.jsx("button", { onClick: onClose, className: style$7.closeButton, type: "button", disabled: !onClose, children: jsxRuntime.jsx(SvgCross, { viewBox: "0 0 24 24" }) })] }), jsxRuntime.jsxs("div", { className: style$7.body, children: [jsxRuntime.jsx("div", { className: style$7.content, children: isOpen ? children : null }), actions && jsxRuntime.jsx("div", { className: style$7.actions, children: actions })] })] }))] }));
|
|
1205
1205
|
return reactDom.createPortal(drawerContent, document.body);
|
|
1206
1206
|
};
|
|
1207
1207
|
|
|
1208
|
-
var style$
|
|
1208
|
+
var style$6 = {"root":"alert-module__root__WGdLe","button":"alert-module__button__uNX69"};
|
|
1209
1209
|
|
|
1210
1210
|
var Alert = function (_a) {
|
|
1211
1211
|
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"]);
|
|
@@ -1218,37 +1218,37 @@ var Alert = function (_a) {
|
|
|
1218
1218
|
default: return jsxRuntime.jsx(SvgLoader, { viewBox: "0 0 24 24" });
|
|
1219
1219
|
}
|
|
1220
1220
|
}, [type]);
|
|
1221
|
-
return (jsxRuntime.jsxs(Stack, __assign({ className: style$
|
|
1221
|
+
return (jsxRuntime.jsxs(Stack, __assign({ className: style$6.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$6.button, variant: type, onClick: onClick, isInverted: true, size: "small", children: buttonText }))] })));
|
|
1222
1222
|
};
|
|
1223
1223
|
|
|
1224
|
-
var style$
|
|
1224
|
+
var style$5 = {"root":"box-module__root__dZ-MR","icon":"box-module__icon__3dFXL"};
|
|
1225
1225
|
|
|
1226
1226
|
var Box = function (_a) {
|
|
1227
1227
|
var title = _a.title, description = _a.description, Icon = _a.icon, iconType = _a.iconType, fullWidth = _a.fullWidth;
|
|
1228
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
1228
|
+
return (jsxRuntime.jsxs(Stack, { className: style$5.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$5.icon, "data-icon-type": iconType, viewBox: "0 0 24 24" })] })] }));
|
|
1229
1229
|
};
|
|
1230
1230
|
|
|
1231
|
-
var style$
|
|
1231
|
+
var style$4 = {"list":"tabs-module__list__Nuvl-","trigger":"tabs-module__trigger__qOk2r","content":"tabs-module__content__4w1tZ","counter":"tabs-module__counter__QkcJB"};
|
|
1232
1232
|
|
|
1233
1233
|
var Root = function (_a) {
|
|
1234
1234
|
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
1235
|
-
return (jsxRuntime.jsx(RTabs__namespace.Root, __assign({ className: clsx(style$
|
|
1235
|
+
return (jsxRuntime.jsx(RTabs__namespace.Root, __assign({ className: clsx(style$4.root, className) }, rest, { children: children })));
|
|
1236
1236
|
};
|
|
1237
1237
|
var List = function (_a) {
|
|
1238
1238
|
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
1239
|
-
return (jsxRuntime.jsx(RTabs__namespace.List, __assign({ className: clsx(style$
|
|
1239
|
+
return (jsxRuntime.jsx(RTabs__namespace.List, __assign({ className: clsx(style$4.list, className) }, rest, { children: children })));
|
|
1240
1240
|
};
|
|
1241
1241
|
var Trigger = function (_a) {
|
|
1242
1242
|
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
1243
|
-
return (jsxRuntime.jsx(RTabs__namespace.Trigger, __assign({ className: clsx(style$
|
|
1243
|
+
return (jsxRuntime.jsx(RTabs__namespace.Trigger, __assign({ className: clsx(style$4.trigger, className) }, rest, { children: children })));
|
|
1244
1244
|
};
|
|
1245
1245
|
var TriggerWithCounter = function (_a) {
|
|
1246
1246
|
var children = _a.children, className = _a.className, counter = _a.counter, rest = __rest(_a, ["children", "className", "counter"]);
|
|
1247
|
-
return (jsxRuntime.jsx(RTabs__namespace.Trigger, __assign({ className: clsx(style$
|
|
1247
|
+
return (jsxRuntime.jsx(RTabs__namespace.Trigger, __assign({ className: clsx(style$4.trigger, className) }, rest, { children: jsxRuntime.jsxs(Stack, { space: "m", position: "horizontal", children: [children, jsxRuntime.jsx("span", { className: style$4.counter, children: counter })] }) })));
|
|
1248
1248
|
};
|
|
1249
1249
|
var Content = function (_a) {
|
|
1250
1250
|
var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
|
|
1251
|
-
return (jsxRuntime.jsx(RTabs__namespace.Content, __assign({ className: clsx(style$
|
|
1251
|
+
return (jsxRuntime.jsx(RTabs__namespace.Content, __assign({ className: clsx(style$4.content, className) }, rest, { children: children })));
|
|
1252
1252
|
};
|
|
1253
1253
|
var Tabs = {
|
|
1254
1254
|
Root: Root,
|
|
@@ -1262,7 +1262,7 @@ var TextArea = React.forwardRef(function (_a, ref) {
|
|
|
1262
1262
|
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"]);
|
|
1263
1263
|
var _g = useFieldAutofill(), isAutofilled = _g.isAutofilled, internalRef = _g.internalRef;
|
|
1264
1264
|
React.useImperativeHandle(ref, function () { return internalRef.current; });
|
|
1265
|
-
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
1265
|
+
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$t.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsx("div", { className: style$t.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-floating-label": floatingLabel, children: jsxRuntime.jsxs("div", { className: style$t.fieldWrapper, children: [jsxRuntime.jsx("textarea", __assign({}, attributes, { id: id, ref: internalRef, value: value, defaultValue: defaultValue, placeholder: " ", className: style$t.field, "data-size": size, "data-autofilled": isAutofilled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, readOnly: readOnly, rows: rows })), label && (jsxRuntime.jsx("label", { className: style$t.label, htmlFor: id, "data-floating": floatingLabel, children: label })), hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$t.hint, children: hint })] }) }) }));
|
|
1266
1266
|
});
|
|
1267
1267
|
TextArea.displayName = "TextArea";
|
|
1268
1268
|
|
|
@@ -1272,11 +1272,11 @@ var FormattedTextField = React.forwardRef(function (_a, ref) {
|
|
|
1272
1272
|
});
|
|
1273
1273
|
FormattedTextField.displayName = "FormattedTextField";
|
|
1274
1274
|
|
|
1275
|
-
var style$
|
|
1275
|
+
var style$3 = {"root":"tile-module__root__ujItM"};
|
|
1276
1276
|
|
|
1277
1277
|
var Tile = function (_a) {
|
|
1278
1278
|
var title = _a.title, description = _a.description, Icon = _a.icon, onClick = _a.onClick, ariaLabel = _a.ariaLabel;
|
|
1279
|
-
return (jsxRuntime.jsx("article", { className: style$
|
|
1279
|
+
return (jsxRuntime.jsx("article", { className: style$3.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 })] })] }) }) }));
|
|
1280
1280
|
};
|
|
1281
1281
|
|
|
1282
1282
|
var color = {
|
|
@@ -1734,12 +1734,12 @@ var SvgKaioLogoLight = function SvgKaioLogoLight(props) {
|
|
|
1734
1734
|
})))));
|
|
1735
1735
|
};
|
|
1736
1736
|
|
|
1737
|
-
var style$
|
|
1737
|
+
var style$2 = {"root":"login-layout-module__root__kF5mq","body":"login-layout-module__body__vmm5x","footer":"login-layout-module__footer__NHAE-","backgroundLogo":"login-layout-module__backgroundLogo__-wPXr"};
|
|
1738
1738
|
|
|
1739
|
-
var defaultFooter = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("p", { children: ["KAIO\u00A0", jsxRuntime.jsx(
|
|
1739
|
+
var defaultFooter = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("p", { children: ["KAIO\u00A0", jsxRuntime.jsx(Link, { href: "https://www.kaio.xyz/privacy-policy", target: "_blank", rel: "noreferrer", children: "Privacy Policy" }), ",\u00A0", jsxRuntime.jsx(Link, { 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." })] }));
|
|
1740
1740
|
var LoginLayout = function (_a) {
|
|
1741
1741
|
var children = _a.children, actions = _a.actions, header = _a.header, _b = _a.logo, logo = _b === void 0 ? jsxRuntime.jsx(SvgKaioLogoLight, { width: 114, height: 30 }) : _b, _c = _a.backgroundIcon, backgroundIcon = _c === void 0 ? jsxRuntime.jsx(SvgLoginLogo, { width: 444, height: 499 }) : _c, _d = _a.footer, footer = _d === void 0 ? defaultFooter : _d;
|
|
1742
|
-
return (jsxRuntime.jsxs("div", { className: style$
|
|
1742
|
+
return (jsxRuntime.jsxs("div", { className: style$2.root, children: [jsxRuntime.jsxs("div", { className: style$2.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$2.footer, children: footer })] }), backgroundIcon && (jsxRuntime.jsx("div", { className: style$2.backgroundLogo, children: backgroundIcon }))] }));
|
|
1743
1743
|
};
|
|
1744
1744
|
|
|
1745
1745
|
var LoginCode = function (_a) {
|
|
@@ -1755,17 +1755,17 @@ var LoginCode = function (_a) {
|
|
|
1755
1755
|
}), { 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 }))] }));
|
|
1756
1756
|
};
|
|
1757
1757
|
|
|
1758
|
-
var emailPattern = {
|
|
1758
|
+
var emailPattern$1 = {
|
|
1759
1759
|
value: /^[a-zA-Z0-9_\-.+]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9\-.]+$/,
|
|
1760
1760
|
message: "Invalid email address",
|
|
1761
1761
|
};
|
|
1762
1762
|
var LoginCredentials = function (_a) {
|
|
1763
1763
|
var _b, _c;
|
|
1764
1764
|
var isLoading = _a.isLoading, errors = _a.errors, register = _a.register;
|
|
1765
|
-
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 }))] }));
|
|
1765
|
+
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$1 }), { 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 }))] }));
|
|
1766
1766
|
};
|
|
1767
1767
|
|
|
1768
|
-
var style = {"buttonRow":"login-module__buttonRow__qwlav"};
|
|
1768
|
+
var style$1 = {"buttonRow":"login-module__buttonRow__qwlav"};
|
|
1769
1769
|
|
|
1770
1770
|
var Login = function (_a) {
|
|
1771
1771
|
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, header = _a.header, bannerAlert = _a.bannerAlert, backgroundIcon = _a.backgroundIcon, footer = _a.footer;
|
|
@@ -1793,11 +1793,53 @@ var Login = function (_a) {
|
|
|
1793
1793
|
? jsxRuntime.jsx(LoginCode, __assign({ login: login }, bodyProps, { disabled: !isValid || isOtpLoading }))
|
|
1794
1794
|
: jsxRuntime.jsx(LoginCredentials, __assign({}, bodyProps));
|
|
1795
1795
|
var actions = isShowOtp
|
|
1796
|
-
? (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" })] })] }))
|
|
1797
|
-
: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [bannerAlert, 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" })] })] })] }));
|
|
1796
|
+
? (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$1.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" })] })] }))
|
|
1797
|
+
: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [bannerAlert, 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$1.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$1.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" })] })] })] }));
|
|
1798
1798
|
return (jsxRuntime.jsx("form", { onSubmit: handleSubmit(loginSubmit), children: jsxRuntime.jsx(LoginLayout, { logo: logo, header: header, backgroundIcon: backgroundIcon, footer: footer, actions: actions, children: body }) }));
|
|
1799
1799
|
};
|
|
1800
1800
|
|
|
1801
|
+
var style = {"buttonRow":"forgot-password-module__buttonRow__3iKt6"};
|
|
1802
|
+
|
|
1803
|
+
var emailPattern = {
|
|
1804
|
+
value: /^[a-zA-Z0-9_\-.+]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9\-.]+$/,
|
|
1805
|
+
message: "Invalid email address",
|
|
1806
|
+
};
|
|
1807
|
+
var ForgotPassword = function (_a) {
|
|
1808
|
+
var _b;
|
|
1809
|
+
var forgotPasswordFn = _a.forgotPasswordFn, onSuccess = _a.onSuccess, onError = _a.onError, loginRoute = _a.loginRoute, signupRequestRoute = _a.signupRequestRoute, logo = _a.logo, header = _a.header, backgroundIcon = _a.backgroundIcon, footer = _a.footer;
|
|
1810
|
+
var _c = React.useState(false), isLoading = _c[0], setIsLoading = _c[1];
|
|
1811
|
+
var _d = reactHookForm.useForm({ mode: 'onChange' }), formState = _d.formState, register = _d.register, handleSubmit = _d.handleSubmit;
|
|
1812
|
+
var isValid = formState.isValid, errors = formState.errors;
|
|
1813
|
+
var onSubmit = React.useCallback(function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
|
|
1814
|
+
var e_1;
|
|
1815
|
+
var email = _b.email;
|
|
1816
|
+
return __generator(this, function (_c) {
|
|
1817
|
+
switch (_c.label) {
|
|
1818
|
+
case 0:
|
|
1819
|
+
setIsLoading(true);
|
|
1820
|
+
_c.label = 1;
|
|
1821
|
+
case 1:
|
|
1822
|
+
_c.trys.push([1, 3, 4, 5]);
|
|
1823
|
+
return [4 /*yield*/, forgotPasswordFn({ email: email })];
|
|
1824
|
+
case 2:
|
|
1825
|
+
_c.sent();
|
|
1826
|
+
onSuccess(email);
|
|
1827
|
+
return [3 /*break*/, 5];
|
|
1828
|
+
case 3:
|
|
1829
|
+
e_1 = _c.sent();
|
|
1830
|
+
onError === null || onError === void 0 ? void 0 : onError(e_1);
|
|
1831
|
+
return [3 /*break*/, 5];
|
|
1832
|
+
case 4:
|
|
1833
|
+
setIsLoading(false);
|
|
1834
|
+
return [7 /*endfinally*/];
|
|
1835
|
+
case 5: return [2 /*return*/];
|
|
1836
|
+
}
|
|
1837
|
+
});
|
|
1838
|
+
}); }, [forgotPasswordFn, onSuccess, onError]);
|
|
1839
|
+
var actions = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { "data-test": "ForgotPassword__Button__Submit", type: "submit", disabled: !isValid || isLoading, isLoading: isLoading, children: "Reset password" }), jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsxs(Stack, { space: "xs", position: "horizontal-center", className: style.buttonRow, dataAlignItems: "center", children: [jsxRuntime.jsx(Stack, { position: "horizontal", children: jsxRuntime.jsx("p", { children: "Go back to" }) }), jsxRuntime.jsx(Link, { href: loginRoute, "data-test": "ForgotPassword__Link__login", children: "Login" })] }), 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": "ForgotPassword__Link__signup", children: "Sign up" })] }))] })] }));
|
|
1840
|
+
return (jsxRuntime.jsx("form", { onSubmit: handleSubmit(onSubmit), children: jsxRuntime.jsxs(LoginLayout, { logo: logo, header: header, backgroundIcon: backgroundIcon, footer: footer, actions: actions, children: [jsxRuntime.jsxs(Stack, { dataAlignItems: "center", children: [jsxRuntime.jsx("h2", { children: "Reset your password" }), jsxRuntime.jsx("p", { style: { textAlign: 'center' }, children: "Enter your email associated with your account to reset your password." })] }), jsxRuntime.jsx(TextField, __assign({}, register('email', { required: 'Email field is required', pattern: emailPattern }), { id: "email", label: "E-mail", "data-test": "ForgotPassword__TextField__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 }))] }) }));
|
|
1841
|
+
};
|
|
1842
|
+
|
|
1801
1843
|
exports.Accordion = Accordion;
|
|
1802
1844
|
exports.Alert = Alert;
|
|
1803
1845
|
exports.Badge = Badge;
|
|
@@ -1811,6 +1853,7 @@ exports.ConfirmModal = ConfirmModal;
|
|
|
1811
1853
|
exports.Container = Container;
|
|
1812
1854
|
exports.Drawer = Drawer;
|
|
1813
1855
|
exports.DropdownMenu = DropdownMenu;
|
|
1856
|
+
exports.ForgotPassword = ForgotPassword;
|
|
1814
1857
|
exports.FormSelect = FormSelect;
|
|
1815
1858
|
exports.FormattedTextField = FormattedTextField;
|
|
1816
1859
|
exports.InfoModal = InfoModal;
|