@kaio-xyz/design-system 1.1.28 → 1.1.30

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.d.ts CHANGED
@@ -325,5 +325,15 @@ type DrawerProps = {
325
325
  };
326
326
  declare const Drawer: ({ isOpen, title, children, className, actions, onClose, isLarge, }: DrawerProps) => react.ReactPortal;
327
327
 
328
- export { Accordion, Badge, BadgeStatuses, Button, Checkbox, Clipboard, ConfirmModal, Container, Drawer, DropdownMenu, FormSelect, InfoModal, InvestmentGraph, InvestmentsHeader, List, ListItem, Loader, Modal, OtpModal, PasswordField, Select, SpinnedIcon, Stack, Step, Stepper, Table, TextField, Timeframes, Tooltip, ValidatePasswordField, periodOptions };
329
- export type { BadgeStatus, ButtonProps, ConfirmModalProps$1 as ConfirmModalProps, DataPoint, DrawerProps, TimeFrame };
328
+ type AlertProps = PropsWithChildren<{
329
+ title: string;
330
+ dataTest: string;
331
+ description?: string;
332
+ type?: "primary" | "info" | "warning" | "danger" | "success";
333
+ buttonText?: string;
334
+ onClick?: () => void;
335
+ }>;
336
+ declare const Alert: ({ title, type, description, buttonText, dataTest, onClick, ...rest }: AlertProps) => react_jsx_runtime.JSX.Element;
337
+
338
+ export { Accordion, Alert, Badge, BadgeStatuses, Button, Checkbox, Clipboard, ConfirmModal, Container, Drawer, DropdownMenu, FormSelect, InfoModal, InvestmentGraph, InvestmentsHeader, List, ListItem, Loader, Modal, OtpModal, PasswordField, Select, SpinnedIcon, Stack, Step, Stepper, Table, TextField, Timeframes, Tooltip, ValidatePasswordField, periodOptions };
339
+ export type { AlertProps, BadgeStatus, ButtonProps, ConfirmModalProps$1 as ConfirmModalProps, DataPoint, DrawerProps, TimeFrame };
package/dist/index.esm.js CHANGED
@@ -298,16 +298,16 @@ var SvgArrowUpRight = function SvgArrowUpRight(props) {
298
298
  })));
299
299
  };
300
300
 
301
- var style$s = {"root":"stack-module__root__AqSLk"};
301
+ var style$t = {"root":"stack-module__root__AqSLk"};
302
302
 
303
303
  var Stack = function (_a) {
304
304
  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, rest = __rest(_a, ["children", "space", "className", "position", "fullHeight", "fullWidth", "dataTest", "dataAlignItems", "dataCapitalize", "dataMarginTop", "dataMarginBottom", "dataMarginLeft", "dataPaddingBottom"]);
305
- return (jsx("div", __assign({ className: clsx(style$s.root, className), "data-space": space, "data-position": position, "data-full-width": fullWidth, "data-full-height": fullHeight, "data-test": dataTest, "data-align-items": dataAlignItems, "data-capitalize": dataCapitalize, "data-margin-top": dataMarginTop, "data-margin-bottom": dataMarginBottom, "data-margin-left": dataMarginLeft, "data-padding-bottom": dataPaddingBottom }, rest, { children: children })));
305
+ return (jsx("div", __assign({ className: clsx(style$t.root, className), "data-space": space, "data-position": position, "data-full-width": fullWidth, "data-full-height": fullHeight, "data-test": dataTest, "data-align-items": dataAlignItems, "data-capitalize": dataCapitalize, "data-margin-top": dataMarginTop, "data-margin-bottom": dataMarginBottom, "data-margin-left": dataMarginLeft, "data-padding-bottom": dataPaddingBottom }, rest, { children: children })));
306
306
  };
307
307
 
308
308
  var baseStyle = {"root":"badge-base-module__root__oUZlm"};
309
309
 
310
- var style$r = {"root":"badge-module__root__rXpaz"};
310
+ var style$s = {"root":"badge-module__root__rXpaz"};
311
311
 
312
312
  var BadgeStatuses = {
313
313
  success: "success",
@@ -327,16 +327,16 @@ var Badge = function (_a) {
327
327
  default: return jsx(SvgCircleDashed, {});
328
328
  }
329
329
  }, [status]);
330
- return (jsx("label", __assign({ className: clsx(baseStyle.root, style$r.root, className), "data-status": status, "data-full-width": fullWidth, "data-test": dataTest, "data-reverted": reverted, "data-size": size }, props, { children: jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, children] }) })));
330
+ return (jsx("label", __assign({ className: clsx(baseStyle.root, style$s.root, className), "data-status": status, "data-full-width": fullWidth, "data-test": dataTest, "data-reverted": reverted, "data-size": size }, props, { children: jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, children] }) })));
331
331
  };
332
332
 
333
- var style$q = {"root":"button-module__root__CDCDX"};
333
+ var style$r = {"root":"button-module__root__CDCDX"};
334
334
 
335
- var style$p = {"root":"spinned-icon-module__root__xchkj"};
335
+ var style$q = {"root":"spinned-icon-module__root__xchkj"};
336
336
 
337
337
  var SpinnedIcon = function (_a) {
338
338
  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"]);
339
- return (jsx("div", { className: clsx(style$p.root, className), style: {
339
+ return (jsx("div", { className: clsx(style$q.root, className), style: {
340
340
  width: size,
341
341
  height: size,
342
342
  animationDuration: "".concat(duration, "s"),
@@ -347,22 +347,22 @@ var isAnchor = function (props) { return props.href !== undefined; };
347
347
  var Button = forwardRef(function (_a, ref) {
348
348
  var _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? "primary" : _c, _d = _a.size, size = _d === void 0 ? "normal" : _d, _e = _a.isInverted, isInverted = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.iconSize, iconSize = _g === void 0 ? 22 : _g, Icon = _a.icon, props = __rest(_a, ["fullWidth", "variant", "size", "isInverted", "isLoading", "iconSize", "icon"]);
349
349
  var iconProps = { width: iconSize, height: iconSize, "aria-hidden": "true" };
350
- var baseIcon = Icon && jsx(Icon, __assign({}, iconProps));
350
+ var baseIcon = Icon && jsx(Icon, __assign({}, iconProps, { viewBox: "0 0 24 24" }));
351
351
  var loadingIcon = isLoading && jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
352
352
  var iconChild = loadingIcon || baseIcon || null;
353
- var classes = clsx(style$q.root, props.className);
353
+ var classes = clsx(style$r.root, props.className);
354
354
  return (isAnchor(props) ? (jsx("a", __assign({ "aria-disabled": props.disabled, ref: ref }, props, { className: classes, children: props.children }))) : (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: jsxs(Fragment, { children: [iconChild, isLoading ? "Loading" : props.children] }) }))));
355
355
  });
356
356
  Button.displayName = "Button";
357
357
 
358
- var style$o = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
358
+ var style$p = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
359
359
 
360
360
  var Hint = function (_a) {
361
361
  var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
362
- return (jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$o.hint, className), "data-type": kind }, attributes, { children: [jsx(SvgInfo, {}), jsx("span", { className: style$o.children, children: children })] })));
362
+ return (jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$p.hint, className), "data-type": kind }, attributes, { children: [jsx(SvgInfo, {}), jsx("span", { className: style$p.children, children: children })] })));
363
363
  };
364
364
 
365
- var style$n = {"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"};
365
+ var style$o = {"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"};
366
366
 
367
367
  var TextField = forwardRef(function (_a, ref) {
368
368
  var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, invalid = _a.invalid, button = _a.button, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.noPadding, noPadding = _d === void 0 ? false : _d, _e = _a.floatingLabel, floatingLabel = _e === void 0 ? true : _e, value = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "invalid", "button", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur"]);
@@ -399,28 +399,28 @@ var TextField = forwardRef(function (_a, ref) {
399
399
  setHasValue(e.target.value.length > 0);
400
400
  onChange === null || onChange === void 0 ? void 0 : onChange(e);
401
401
  };
402
- return (jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$n.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxs("div", { className: style$n.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsx("label", { className: style$n.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxs("div", { className: style$n.fieldWrapper, children: [jsx("input", __assign({ "aria-readonly": readOnly, className: style$n.field, readOnly: readOnly, "data-type": "single", "data-size": size, "data-floating-label": floatingLabel, id: id, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, "data-invalid": invalid, ref: inputRef, type: "text", value: value, defaultValue: defaultValue }, attributes)), button ? button : null] }), hint && jsx(Hint, { kind: "error", className: style$n.hint, children: hint })] }) }));
402
+ return (jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$o.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxs("div", { className: style$o.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsx("label", { className: style$o.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxs("div", { className: style$o.fieldWrapper, children: [jsx("input", __assign({ "aria-readonly": readOnly, className: style$o.field, readOnly: readOnly, "data-type": "single", "data-size": size, "data-floating-label": floatingLabel, id: id, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, "data-invalid": invalid, ref: inputRef, type: "text", value: value, defaultValue: defaultValue }, attributes)), button ? button : null] }), hint && jsx(Hint, { kind: "error", className: style$o.hint, children: hint })] }) }));
403
403
  });
404
404
  TextField.displayName = "TextField";
405
405
 
406
- var style$m = {"container":"container-module__container__CAxQw"};
406
+ var style$n = {"container":"container-module__container__CAxQw"};
407
407
 
408
408
  var Container = function (_a) {
409
409
  var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
410
- return (jsx("div", __assign({ className: clsx(style$m.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
410
+ return (jsx("div", __assign({ className: clsx(style$n.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
411
411
  };
412
412
 
413
- var style$l = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
413
+ var style$m = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
414
414
 
415
415
  var PasswordField = forwardRef(function (_a, ref) {
416
416
  var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
417
417
  var _b = useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
418
- var button = (jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$l.button, children: isPasswordVisible ? jsx(SvgEyeOpen, {}) : jsx(SvgEyeClosed, {}) }));
419
- return (jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$l.field })));
418
+ var button = (jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$m.button, children: isPasswordVisible ? jsx(SvgEyeOpen, {}) : jsx(SvgEyeClosed, {}) }));
419
+ return (jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$m.field })));
420
420
  });
421
421
  PasswordField.displayName = "PasswordField";
422
422
 
423
- var style$k = {"validator":"validate-password-field-module__validator__Do-6w"};
423
+ var style$l = {"validator":"validate-password-field-module__validator__Do-6w"};
424
424
 
425
425
  var rules = {
426
426
  length: /^.{8,}$/,
@@ -445,19 +445,19 @@ var ValidatePasswordField = forwardRef(function (_a, ref) {
445
445
  useEffect(function () {
446
446
  setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
447
447
  }, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
448
- var getValidator = function (isCheckOk, label) { return (jsxs(Stack, { position: "horizontal", className: style$k.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsx(SvgCheck, {}) : jsx(SvgCircleDashed, {}), jsx("p", { children: label })] })); };
448
+ var getValidator = function (isCheckOk, label) { return (jsxs(Stack, { position: "horizontal", className: style$l.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsx(SvgCheck, {}) : jsx(SvgCircleDashed, {}), jsx("p", { children: label })] })); };
449
449
  return (jsxs(Stack, { space: "m", children: [jsx(PasswordField, __assign({ onChange: onHandleChange, ref: ref }, rest)), 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: @ $ ! % * ? & _ #)")] })] }));
450
450
  });
451
451
  ValidatePasswordField.displayName = "ValidatePasswordField";
452
452
 
453
- var style$j = {"root":"label-module__root__34bJr"};
453
+ var style$k = {"root":"label-module__root__34bJr"};
454
454
 
455
455
  var Label = function (_a) {
456
456
  var id = _a.id, label = _a.label, className = _a.className, _b = _a.hasMargin, hasMargin = _b === void 0 ? true : _b, _c = _a.hasHalfMargin, hasHalfMargin = _c === void 0 ? false : _c, _d = _a.hasCursorPointer, hasCursorPointer = _d === void 0 ? false : _d;
457
- return (jsx("label", { className: clsx(style$j.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
457
+ return (jsx("label", { className: clsx(style$k.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
458
458
  };
459
459
 
460
- var style$i = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
460
+ var style$j = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
461
461
 
462
462
  var IconAndLabel = function (_a) {
463
463
  var children = _a.children, Icon = _a.icon;
@@ -478,7 +478,7 @@ var CustomSingleValue = function (_a) {
478
478
  };
479
479
  var Select = function (_a) {
480
480
  var id = _a.id, label = _a.label, dataTest = _a.dataTest, isDisabled = _a.isDisabled, className = _a.className, error = _a.error, customComponents = _a.components, rest = __rest(_a, ["id", "label", "dataTest", "isDisabled", "className", "error", "components"]);
481
- return (jsxs("div", { className: clsx(style$i.root, className), children: [label && jsx(Label, { id: id, label: label, className: style$i.label }), jsxs("div", { "data-test": dataTest, className: style$i.selector, "data-error": !!error, children: [jsx(ReactSelect, __assign({ id: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { isDisabled: isDisabled })), error && jsx(Hint, { kind: "error", className: style$i.hint, children: error })] })] }));
481
+ return (jsxs("div", { className: clsx(style$j.root, className), children: [label && jsx(Label, { id: id, label: label, className: style$j.label }), jsxs("div", { "data-test": dataTest, className: style$j.selector, "data-error": !!error, children: [jsx(ReactSelect, __assign({ id: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { isDisabled: isDisabled })), error && jsx(Hint, { kind: "error", className: style$j.hint, children: error })] })] }));
482
482
  };
483
483
  Select.displayName = "Select";
484
484
 
@@ -491,14 +491,14 @@ var FormSelect = function (_a) {
491
491
  };
492
492
  FormSelect.displayName = "FormSelect";
493
493
 
494
- var style$h = {"root":"loader-module__root__qnInQ"};
494
+ var style$i = {"root":"loader-module__root__qnInQ"};
495
495
 
496
496
  var Loader = function (_a) {
497
497
  var text = _a.text, _b = _a.fullPage, fullPage = _b === void 0 ? true : _b, _c = _a.isLightOverlay, isLightOverlay = _c === void 0 ? false : _c, children = _a.children;
498
- return (jsx("div", { className: style$h.root, "data-full-page": fullPage, "data-is-light-overlay": isLightOverlay, children: jsxs(Stack, { dataAlignItems: "center", children: [jsx(SpinnedIcon, { size: 50 }), text && jsx("p", { children: text }), children] }) }));
498
+ return (jsx("div", { className: style$i.root, "data-full-page": fullPage, "data-is-light-overlay": isLightOverlay, children: jsxs(Stack, { dataAlignItems: "center", children: [jsx(SpinnedIcon, { size: 50 }), text && jsx("p", { children: text }), children] }) }));
499
499
  };
500
500
 
501
- var style$g = {"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"};
501
+ var style$h = {"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"};
502
502
 
503
503
  var Checkbox = function (_a) {
504
504
  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"]);
@@ -511,11 +511,11 @@ var Checkbox = function (_a) {
511
511
  var dynamicStyle = {
512
512
  "--vAlign": verticalAlign,
513
513
  };
514
- return (jsxs("label", { style: dynamicStyle, className: clsx(style$g.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxs("span", { className: style$g.frame, children: [jsx("input", __assign({ "aria-disabled": disabled, disabled: disabled, onChange: onChange, type: "checkbox", ref: inputRef, checked: checked }, attributes, { id: id, "data-test": dataTest })), jsxs("span", { className: style$g.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsx(SvgCheck, { className: style$g.icon })), indeterminate && (jsx(SvgMinus, { className: style$g.icon }))] })] }), label && jsx("span", { className: style$g.label, children: label })] }));
514
+ return (jsxs("label", { style: dynamicStyle, className: clsx(style$h.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxs("span", { className: style$h.frame, children: [jsx("input", __assign({ "aria-disabled": disabled, disabled: disabled, onChange: onChange, type: "checkbox", ref: inputRef, checked: checked }, attributes, { id: id, "data-test": dataTest })), jsxs("span", { className: style$h.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsx(SvgCheck, { className: style$h.icon })), indeterminate && (jsx(SvgMinus, { className: style$h.icon }))] })] }), label && jsx("span", { className: style$h.label, children: label })] }));
515
515
  };
516
516
  Checkbox.displayName = "Checkbox";
517
517
 
518
- var style$f = {"root":"clipboard-module__root__wVZhy"};
518
+ var style$g = {"root":"clipboard-module__root__wVZhy"};
519
519
 
520
520
  var trimString = function (str, noOfChars) {
521
521
  if (noOfChars === void 0) { noOfChars = 4; }
@@ -538,43 +538,43 @@ var Clipboard = function (_a) {
538
538
  }, 2000);
539
539
  }, [value]);
540
540
  var text = isShowingCopy ? 'Copied!' : displayValue;
541
- var icon = isShowingCopy ? jsx(SvgCheck, {}) : jsx(SvgClipboard, {});
542
- return (jsx("button", { type: "button", onClick: handleClick, className: style$f.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, "data-test": dataTest, children: jsxs(Stack, { position: "horizontal", children: [jsx("span", { children: text }), icon] }) }));
541
+ var icon = isShowingCopy ? jsx(SvgCheck, { viewBox: "0 0 24 24" }) : jsx(SvgClipboard, { viewBox: "0 0 24 24" });
542
+ return (jsx("button", { type: "button", onClick: handleClick, className: style$g.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, "data-test": dataTest, children: jsxs(Stack, { position: "horizontal", children: [jsx("span", { children: text }), icon] }) }));
543
543
  };
544
544
 
545
- var style$e = {"root":"stepper-module__root__hgDss"};
545
+ var style$f = {"root":"stepper-module__root__hgDss"};
546
546
 
547
547
  var Stepper = function (_a) {
548
548
  var children = _a.children, dataTest = _a.dataTest, className = _a.className;
549
- return (jsx("ul", { className: clsx(style$e.root, className), "data-test": dataTest, children: children }));
549
+ return (jsx("ul", { className: clsx(style$f.root, className), "data-test": dataTest, children: children }));
550
550
  };
551
551
 
552
- var style$d = {"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"};
552
+ var style$e = {"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"};
553
553
 
554
554
  var Step = function (_a) {
555
555
  var key = _a.key, label = _a.label, dataTest = _a.dataTest, _b = _a.iconSize, iconSize = _b === void 0 ? 16 : _b, _c = _a.isCompleted, isCompleted = _c === void 0 ? false : _c, _d = _a.isCurrent, isCurrent = _d === void 0 ? false : _d;
556
556
  var icon = useMemo(function () {
557
557
  switch (true) {
558
- case isCompleted: return jsx(SvgCheck, { className: style$d.checkIcon });
559
- case isCurrent: return jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$d.loadingIcon });
560
- default: return jsx("span", { className: style$d.emptyIcon });
558
+ case isCompleted: return jsx(SvgCheck, { className: style$e.checkIcon, viewBox: "0 0 24 24" });
559
+ case isCurrent: return jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$e.loadingIcon });
560
+ default: return jsx("span", { className: style$e.emptyIcon });
561
561
  }
562
562
  }, [isCompleted, isCurrent]);
563
- return (jsx("li", { className: style$d.root, "data-is-current": isCurrent, "data-test": dataTest, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxs(Stack, { className: style$d.container, position: "horizontal", children: [icon, jsx("span", { className: style$d.label, children: label })] }) }, key));
563
+ return (jsx("li", { className: style$e.root, "data-is-current": isCurrent, "data-test": dataTest, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxs(Stack, { className: style$e.container, position: "horizontal", children: [icon, jsx("span", { className: style$e.label, children: label })] }) }, key));
564
564
  };
565
565
 
566
- var style$c = {"root":"list-module__root__OXx93"};
566
+ var style$d = {"root":"list-module__root__OXx93"};
567
567
 
568
568
  var List = function (_a) {
569
569
  var label = _a.label, children = _a.children;
570
- return (jsxs(Stack, { className: style$c.root, children: [label && jsx("p", { children: label }), jsx("ul", { children: children })] }));
570
+ return (jsxs(Stack, { className: style$d.root, children: [label && jsx("p", { children: label }), jsx("ul", { children: children })] }));
571
571
  };
572
572
 
573
- var style$b = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
573
+ var style$c = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
574
574
 
575
575
  var ListItem = function (_a) {
576
576
  var value = _a.value, label = _a.label, key = _a.key;
577
- return (jsx("li", { children: jsxs(Stack, { position: "horizontal-space", space: "m", className: style$b.root, dataAlignItems: "flex-start", children: [jsx("span", { className: style$b.label, children: label }), jsx("span", { className: style$b.value, children: value })] }) }, key));
577
+ return (jsx("li", { children: jsxs(Stack, { position: "horizontal-space", space: "m", className: style$c.root, dataAlignItems: "flex-start", children: [jsx("span", { className: style$c.label, children: label }), jsx("span", { className: style$c.value, children: value })] }) }, key));
578
578
  };
579
579
 
580
580
  var AccordionRoot = function (_a) {
@@ -582,38 +582,38 @@ var AccordionRoot = function (_a) {
582
582
  return (jsx(RAccordion.Root, __assign({}, rest, { children: children })));
583
583
  };
584
584
 
585
- var style$a = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
585
+ var style$b = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
586
586
 
587
587
  var AccordionContent = forwardRef(function (_a, forwardedRef) {
588
588
  var children = _a.children, className = _a.className, hasChildrenPadding = _a.hasChildrenPadding, rest = __rest(_a, ["children", "className", "hasChildrenPadding"]);
589
- return (jsx(RAccordion.Content, __assign({ className: clsx(style$a.content, className), ref: forwardedRef }, rest, { children: jsx("div", { className: style$a.childrenContainer, children: jsx("div", { className: style$a.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
589
+ return (jsx(RAccordion.Content, __assign({ className: clsx(style$b.content, className), ref: forwardedRef }, rest, { children: jsx("div", { className: style$b.childrenContainer, children: jsx("div", { className: style$b.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
590
590
  });
591
591
  AccordionContent.displayName = "AccordionContent";
592
592
 
593
- var style$9 = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
593
+ var style$a = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
594
594
 
595
595
  var AccordionTrigger = forwardRef(function (_a, forwardedRef) {
596
596
  var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, dataTest = _a.dataTest, rest = __rest(_a, ["children", "className", "dataTest"]);
597
- return (jsx(RAccordion.Header, { className: style$9.header, children: jsx(RAccordion.Trigger, __assign({ className: clsx(style$9.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
597
+ return (jsx(RAccordion.Header, { className: style$a.header, children: jsx(RAccordion.Trigger, __assign({ className: clsx(style$a.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
598
598
  });
599
599
  AccordionTrigger.displayName = "AccordionTrigger";
600
600
 
601
- var style$8 = {"root":"accordion-item-module__root__1Yk4f"};
601
+ var style$9 = {"root":"accordion-item-module__root__1Yk4f"};
602
602
 
603
603
  var AccordionItem = forwardRef(function (_a, forwardedRef) {
604
604
  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;
605
- return (jsxs(RAccordion.Item, { className: style$8.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
605
+ return (jsxs(RAccordion.Item, { className: style$9.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
606
606
  });
607
607
  AccordionItem.displayName = "AccordionItem";
608
608
 
609
609
  var Accordion = { Root: AccordionRoot, Item: AccordionItem };
610
610
 
611
- var style$7 = {"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"};
611
+ var style$8 = {"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"};
612
612
 
613
613
  var ModalElement = function (_a) {
614
614
  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"]);
615
615
  var modalRef = useRef(null);
616
- return (jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$7.modal, className), "data-test": "Modal__Div__content", "data-visible": visible, "data-is-not-closable": !onClose }, attributes, { children: [jsx("dialog", { className: style$7.backdrop }), jsx("div", { className: style$7.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxs("div", { className: style$7.bodyWrapper, children: __spreadArray([title && (jsxs("div", { className: style$7.header, children: [jsx("h2", { id: id, children: title }), jsx(SvgCross, { "data-icon": true, onClick: onClose })] })), jsx("div", { className: style$7.body, children: children })], actions.map(function (i, idx) { return jsx("div", { className: style$7.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
616
+ return (jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$8.modal, className), "data-test": "Modal__Div__content", "data-visible": visible, "data-is-not-closable": !onClose }, attributes, { children: [jsx("dialog", { className: style$8.backdrop }), jsx("div", { className: style$8.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxs("div", { className: style$8.bodyWrapper, children: __spreadArray([title && (jsxs("div", { className: style$8.header, children: [jsx("h2", { id: id, children: title }), jsx(SvgCross, { "data-icon": true, onClick: onClose })] })), jsx("div", { className: style$8.body, children: children })], actions.map(function (i, idx) { return jsx("div", { className: style$8.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
617
617
  };
618
618
  var Modal = function (_a) {
619
619
  var visible = _a.visible, props = __rest(_a, ["visible"]);
@@ -644,28 +644,28 @@ var InfoModal = function (_a) {
644
644
  return (jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
645
645
  };
646
646
 
647
- var style$6 = {"content":"dropdown-menu-module__content__sSYNC","arrow":"dropdown-menu-module__arrow__AFHzK","trigger":"dropdown-menu-module__trigger__GLDRV"};
647
+ var style$7 = {"content":"dropdown-menu-module__content__sSYNC","arrow":"dropdown-menu-module__arrow__AFHzK","trigger":"dropdown-menu-module__trigger__GLDRV"};
648
648
 
649
649
  var DropdownMenu$1 = function (_a) {
650
650
  var text = _a.text, children = _a.children, Icon = _a.icon, disabled = _a.disabled, body = _a.body, variant = _a.variant, rest = __rest(_a, ["text", "children", "icon", "disabled", "body", "variant"]);
651
- var defaultBody = !text ? Icon && jsx(Icon, {}) : jsx(Button, { icon: Icon, variant: variant, children: text });
652
- return (jsxs(RDropdownMenu.Root, { children: [jsx(RDropdownMenu.Trigger, __assign({}, rest, { asChild: !!text, className: style$6.trigger, disabled: disabled, children: body ? body : defaultBody })), jsx(RDropdownMenu.Portal, { children: jsxs(RDropdownMenu.Content, { className: style$6.content, sideOffset: 5, children: [children, jsx(RDropdownMenu.Arrow, { className: style$6.arrow })] }) })] }));
651
+ var defaultBody = !text ? Icon && jsx(Icon, { viewBox: "0 0 24 24" }) : jsx(Button, { icon: Icon, variant: variant, children: text });
652
+ return (jsxs(RDropdownMenu.Root, { children: [jsx(RDropdownMenu.Trigger, __assign({}, rest, { asChild: !!text, className: style$7.trigger, disabled: disabled, children: body ? body : defaultBody })), jsx(RDropdownMenu.Portal, { children: jsxs(RDropdownMenu.Content, { className: style$7.content, sideOffset: 5, children: [children, jsx(RDropdownMenu.Arrow, { className: style$7.arrow })] }) })] }));
653
653
  };
654
654
 
655
- var style$5 = {"root":"dropdown-menu-item-module__root__zs510"};
655
+ var style$6 = {"root":"dropdown-menu-item-module__root__zs510"};
656
656
 
657
657
  var DropdownMenuItem = function (_a) {
658
658
  var children = _a.children, disabled = _a.disabled, onClick = _a.onClick, rest = __rest(_a, ["children", "disabled", "onClick"]);
659
- return (jsx(RDropdownMenu.Item, __assign({ className: style$5.root, onClick: !disabled ? onClick : undefined, disabled: disabled }, rest, { children: children })));
659
+ return (jsx(RDropdownMenu.Item, __assign({ className: style$6.root, onClick: !disabled ? onClick : undefined, disabled: disabled }, rest, { children: children })));
660
660
  };
661
661
 
662
662
  var DropdownMenu = { Root: DropdownMenu$1, Item: DropdownMenuItem };
663
663
 
664
- var style$4 = {"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"};
664
+ var style$5 = {"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"};
665
665
 
666
666
  var Tooltip = function (_a) {
667
667
  var children = _a.children, title = _a.title, description = _a.description;
668
- return (jsx(RTooltip.Provider, { children: jsxs(RTooltip.Root, { children: [jsx(RTooltip.Trigger, { className: style$4.trigger, asChild: true, children: children }), jsx(RTooltip.Portal, { children: jsxs(RTooltip.Content, { className: style$4.content, sideOffset: 2, children: [jsx(SvgInfo, { className: style$4.icon, width: 20, height: 20 }), jsxs("div", { className: style$4.body, children: [jsx("span", { className: style$4.title, children: title }), description && jsx("span", { className: style$4.description, children: description })] }), jsx(RTooltip.Arrow, { className: style$4.arrow })] }) })] }) }));
668
+ return (jsx(RTooltip.Provider, { children: jsxs(RTooltip.Root, { children: [jsx(RTooltip.Trigger, { className: style$5.trigger, asChild: true, children: children }), jsx(RTooltip.Portal, { children: jsxs(RTooltip.Content, { className: style$5.content, sideOffset: 2, children: [jsx(SvgInfo, { className: style$5.icon, width: 20, height: 20 }), jsxs("div", { className: style$5.body, children: [jsx("span", { className: style$5.title, children: title }), description && jsx("span", { className: style$5.description, children: description })] }), jsx(RTooltip.Arrow, { className: style$5.arrow })] }) })] }) }));
669
669
  };
670
670
 
671
671
  var isEnter = function (e) { return e.key === "Enter"; };
@@ -711,7 +711,7 @@ var formatNumberWithCurrency = function (amount, currency) {
711
711
  return "".concat(currency, " ").concat(formatNumber(amount, isDollarCurrency(currency) ? 2 : 6));
712
712
  };
713
713
 
714
- var style$3 = {"root":"investments-graph-module__root__-BKux","paddedWrapper":"investments-graph-module__paddedWrapper__afkOR","timeframeSelector":"investments-graph-module__timeframeSelector__7TkDU","timeFrameValue":"investments-graph-module__timeFrameValue__CQRqG"};
714
+ var style$4 = {"root":"investments-graph-module__root__-BKux","paddedWrapper":"investments-graph-module__paddedWrapper__afkOR","timeframeSelector":"investments-graph-module__timeframeSelector__7TkDU","timeFrameValue":"investments-graph-module__timeFrameValue__CQRqG"};
715
715
 
716
716
  var Timeframes = {
717
717
  month: "month",
@@ -780,8 +780,8 @@ var InvestmentGraph = function (_a) {
780
780
  ? ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month]
781
781
  : "";
782
782
  };
783
- return (jsxs(Stack, { className: style$3.root, space: "m", children: [jsxs(Stack, { space: "none", children: [header && (jsx("div", { className: style$3.paddedWrapper, children: header })), jsx(Stack, { position: "horizontal-space", children: jsx("div", { className: clsx(style$3.timeframeSelector, style$3.paddedWrapper), children: periodOptions.map(function (p) {
784
- return jsx("button", { tabIndex: 0, onKeyDown: function (e) { return (isEnter(e) ? setTimeFrame(p) : null); }, className: style$3.timeFrameValue, "data-active": (timeFrame === null || timeFrame === void 0 ? void 0 : timeFrame.value) === p.value ? "true" : "false", onClick: function () { return setTimeFrame(p); }, children: p.label }, p.value);
783
+ return (jsxs(Stack, { className: style$4.root, space: "m", children: [jsxs(Stack, { space: "none", children: [header && (jsx("div", { className: style$4.paddedWrapper, children: header })), jsx(Stack, { position: "horizontal-space", children: jsx("div", { className: clsx(style$4.timeframeSelector, style$4.paddedWrapper), children: periodOptions.map(function (p) {
784
+ return jsx("button", { tabIndex: 0, onKeyDown: function (e) { return (isEnter(e) ? setTimeFrame(p) : null); }, className: style$4.timeFrameValue, "data-active": (timeFrame === null || timeFrame === void 0 ? void 0 : timeFrame.value) === p.value ? "true" : "false", onClick: function () { return setTimeFrame(p); }, children: p.label }, p.value);
785
785
  }) }) })] }), jsx(ResponsiveContainer, { width: "100%", height: "100%", minHeight: 500, children: jsxs(AreaChart, { width: 500, height: 300, data: dataBasedOnPeriod, children: [jsx("defs", { children: jsx("linearGradient", { id: "splitColor", x1: "0", y1: "0", x2: "0", y2: "1", children: hasPositiveAndNegativeValues
786
786
  ? (jsxs(Fragment, { children: [jsx("stop", { offset: off, stopColor: "var(--semantic-success)", stopOpacity: 1 }), jsx("stop", { offset: off, stopColor: "var(--semantic-error)", stopOpacity: 1 })] }))
787
787
  : (jsxs(Fragment, { children: [jsx("stop", { offset: "5%", stopColor: "var(--primary-30)", stopOpacity: 0.8 }), jsx("stop", { offset: "95%", stopColor: "var(--neutral-90)", stopOpacity: 0 })] })) }) }), jsx(XAxis, { dataKey: "date", strokeWidth: 0, style: { fill: "var(--neutral-45)" }, tickFormatter: formatXAxis }), jsx(YAxis, { dataKey: "value", strokeWidth: 0, axisLine: false, tickLine: false, scale: "auto", domain: hasNegativeValues && hasPositiveValues ? ["auto", "auto"] : [dataMin, dataMax], tickCount: 6, tick: false, width: 10 }), jsx(Tooltip$1, { contentStyle: {
@@ -796,14 +796,14 @@ var InvestmentGraph = function (_a) {
796
796
  }, labelFormatter: function (e) { return formatDate(e); } }), jsx(Area, { dataKey: "value", strokeWidth: 2.5, activeDot: { r: 6, fill: "var(--neutral-90)", stroke: "white", strokeWidth: 2 }, stroke: "var(--neutral-70)", fillOpacity: 1, fill: "url(#splitColor)", baseValue: dataMin })] }) })] }));
797
797
  };
798
798
 
799
- var style$2 = {"root":"investments-header-module__root__fxQmk","total":"investments-header-module__total__DrEq0","badge":"investments-header-module__badge__-aeBM"};
799
+ var style$3 = {"root":"investments-header-module__root__fxQmk","total":"investments-header-module__total__DrEq0","badge":"investments-header-module__badge__-aeBM"};
800
800
 
801
801
  var InvestmentsHeader = function (_a) {
802
802
  var currentTotalInvestmentValue = _a.currentTotalInvestmentValue, currentGainLossValue = _a.currentGainLossValue, currentGainLossPercentageValue = _a.currentGainLossPercentageValue;
803
803
  var isNegativePercentage = currentGainLossPercentageValue < 0;
804
804
  var dataGain = isNegativePercentage ? "negative" : "positive";
805
805
  var triangle = isNegativePercentage ? jsx(SvgArrowDownRight, { "data-gain": "negative" }) : jsx(SvgArrowUpRight, { "data-gain": "positive" });
806
- return (jsxs(Stack, { className: style$2.root, space: "xs", children: [jsx("p", { className: style$2.total, children: "Total Investments" }), jsxs(Stack, { children: [jsx("h1", { children: formatNumberWithCurrency(currentTotalInvestmentValue) }), jsx(Badge, { status: isNegativePercentage ? "rejected" : "success", className: style$2.badge, children: jsxs(Stack, { space: "xs", position: "horizontal", children: [triangle, jsx("p", { "data-gain": dataGain, children: formatNumberWithCurrency(Math.abs(currentGainLossValue)) }), jsxs("p", { "data-gain": dataGain, children: ["(", formatNumber(Math.abs(currentGainLossPercentageValue)), "%)"] })] }) })] })] }));
806
+ return (jsxs(Stack, { className: style$3.root, space: "xs", children: [jsx("p", { className: style$3.total, children: "Total Investments" }), jsxs(Stack, { children: [jsx("h1", { children: formatNumberWithCurrency(currentTotalInvestmentValue) }), jsx(Badge, { status: isNegativePercentage ? "rejected" : "success", className: style$3.badge, children: jsxs(Stack, { space: "xs", position: "horizontal", children: [triangle, jsx("p", { "data-gain": dataGain, children: formatNumberWithCurrency(Math.abs(currentGainLossValue)) }), jsxs("p", { "data-gain": dataGain, children: ["(", formatNumber(Math.abs(currentGainLossPercentageValue)), "%)"] })] }) })] })] }));
807
807
  };
808
808
 
809
809
  var tableCustomStyles = {
@@ -848,13 +848,13 @@ var tableCustomStyles = {
848
848
  },
849
849
  };
850
850
 
851
- var style$1 = {"tableWrapper":"table-module__tableWrapper__q2Fb1"};
851
+ var style$2 = {"tableWrapper":"table-module__tableWrapper__q2Fb1"};
852
852
 
853
853
  var Table = function (_a) {
854
854
  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"]);
855
855
  return isLoading
856
856
  ? null
857
- : (jsx("div", { "data-test": dataTest, className: style$1.tableWrapper, "data-is-row-clickable": !!onRowClicked, children: jsx(DataTable, __assign({ columns: columns, data: data, customStyles: tableCustomStyles, onRowClicked: onRowClicked }, rest)) }));
857
+ : (jsx("div", { "data-test": dataTest, className: style$2.tableWrapper, "data-is-row-clickable": !!onRowClicked, children: jsx(DataTable, __assign({ columns: columns, data: data, customStyles: tableCustomStyles, onRowClicked: onRowClicked }, rest)) }));
858
858
  };
859
859
 
860
860
  var useCanAnimate = function () {
@@ -868,14 +868,30 @@ var useCanAnimate = function () {
868
868
  return canAnimate;
869
869
  };
870
870
 
871
- var style = {"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","closeButton":"drawer-module__closeButton__eP-nJ","body":"drawer-module__body__GIyF-","content":"drawer-module__content__bYS-4","actions":"drawer-module__actions__pUGTF"};
871
+ var style$1 = {"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","closeButton":"drawer-module__closeButton__eP-nJ","body":"drawer-module__body__GIyF-","content":"drawer-module__content__bYS-4","actions":"drawer-module__actions__pUGTF"};
872
872
 
873
873
  var Drawer = function (_a) {
874
874
  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;
875
875
  var canAnimate = useCanAnimate();
876
- var drawerContent = (jsxs("div", { className: clsx(style.root, className), "data-is-open": isOpen, "data-can-animate": canAnimate, children: [jsx("button", { className: style.backdrop, tabIndex: 0, onClick: onClose, onKeyDown: function (e) { return (isEnter(e) ? onClose === null || onClose === void 0 ? void 0 : onClose() : null); } }), jsxs("div", { className: style.drawer, "data-is-large": isLarge, children: [jsxs("div", { className: style.header, children: [jsx("h2", { className: style.title, children: title }), jsx("button", { onClick: onClose, className: style.closeButton, type: "button", disabled: !onClose, children: jsx(SvgCross, {}) })] }), jsxs("div", { className: style.body, children: [jsx("div", { className: style.content, children: isOpen ? children : null }), actions && jsx("div", { className: style.actions, children: actions })] })] })] }));
876
+ var drawerContent = (jsxs("div", { className: clsx(style$1.root, className), "data-is-open": isOpen, "data-can-animate": canAnimate, children: [jsx("button", { className: style$1.backdrop, tabIndex: 0, onClick: onClose, onKeyDown: function (e) { return (isEnter(e) ? onClose === null || onClose === void 0 ? void 0 : onClose() : null); } }), jsxs("div", { className: style$1.drawer, "data-is-large": isLarge, children: [jsxs("div", { className: style$1.header, children: [jsx("h2", { className: style$1.title, children: title }), jsx("button", { onClick: onClose, className: style$1.closeButton, type: "button", disabled: !onClose, children: jsx(SvgCross, {}) })] }), jsxs("div", { className: style$1.body, children: [jsx("div", { className: style$1.content, children: isOpen ? children : null }), actions && jsx("div", { className: style$1.actions, children: actions })] })] })] }));
877
877
  return createPortal(drawerContent, document.body);
878
878
  };
879
879
 
880
- export { Accordion, Badge, BadgeStatuses, Button, Checkbox, Clipboard, ConfirmModal, Container, Drawer, DropdownMenu, FormSelect, InfoModal, InvestmentGraph, InvestmentsHeader, List, ListItem, Loader, Modal, OtpModal, PasswordField, Select, SpinnedIcon, Stack, Step, Stepper, Table, TextField, Timeframes, Tooltip, ValidatePasswordField, periodOptions };
880
+ var style = {"root":"alert-module__root__WGdLe","button":"alert-module__button__uNX69"};
881
+
882
+ var Alert = function (_a) {
883
+ var title = _a.title, _b = _a.type, type = _b === void 0 ? "info" : _b, description = _a.description, buttonText = _a.buttonText, dataTest = _a.dataTest, onClick = _a.onClick, rest = __rest(_a, ["title", "type", "description", "buttonText", "dataTest", "onClick"]);
884
+ var icon = useMemo(function () {
885
+ switch (type) {
886
+ case "success": return jsx(SvgCheck, { viewBox: "0 0 24 24" });
887
+ case "warning":
888
+ case "danger": return jsx(SvgWarning, { viewBox: "0 0 24 24" });
889
+ case "info": return jsx(SvgInfo, { viewBox: "0 0 24 24" });
890
+ default: return jsx(SvgLoader, { viewBox: "0 0 24 24" });
891
+ }
892
+ }, [type]);
893
+ return (jsxs(Stack, __assign({ className: style.root, position: description ? "vertical" : "horizontal-space", space: "m", "data-type": type, "data-test": dataTest }, rest, { children: [jsxs(Stack, { position: "horizontal", children: [icon, title] }), description, buttonText && (jsx(Button, { className: style.button, variant: type, onClick: onClick, isInverted: true, size: "small", children: buttonText }))] })));
894
+ };
895
+
896
+ export { Accordion, Alert, Badge, BadgeStatuses, Button, Checkbox, Clipboard, ConfirmModal, Container, Drawer, DropdownMenu, FormSelect, InfoModal, InvestmentGraph, InvestmentsHeader, List, ListItem, Loader, Modal, OtpModal, PasswordField, Select, SpinnedIcon, Stack, Step, Stepper, Table, TextField, Timeframes, Tooltip, ValidatePasswordField, periodOptions };
881
897
  //# sourceMappingURL=index.esm.js.map