@kaio-xyz/design-system 1.1.29 → 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.
Files changed (7) hide show
  1. package/dist/index.cjs.js +80 -63
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +12 -2
  4. package/dist/index.esm.js +80 -64
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/styles.css +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -321,16 +321,16 @@ var SvgArrowUpRight = function SvgArrowUpRight(props) {
321
321
  })));
322
322
  };
323
323
 
324
- var style$s = {"root":"stack-module__root__AqSLk"};
324
+ var style$t = {"root":"stack-module__root__AqSLk"};
325
325
 
326
326
  var Stack = function (_a) {
327
327
  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"]);
328
- return (jsxRuntime.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 })));
328
+ return (jsxRuntime.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 })));
329
329
  };
330
330
 
331
331
  var baseStyle = {"root":"badge-base-module__root__oUZlm"};
332
332
 
333
- var style$r = {"root":"badge-module__root__rXpaz"};
333
+ var style$s = {"root":"badge-module__root__rXpaz"};
334
334
 
335
335
  var BadgeStatuses = {
336
336
  success: "success",
@@ -350,16 +350,16 @@ var Badge = function (_a) {
350
350
  default: return jsxRuntime.jsx(SvgCircleDashed, {});
351
351
  }
352
352
  }, [status]);
353
- return (jsxRuntime.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: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, children] }) })));
353
+ return (jsxRuntime.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: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, children] }) })));
354
354
  };
355
355
 
356
- var style$q = {"root":"button-module__root__CDCDX"};
356
+ var style$r = {"root":"button-module__root__CDCDX"};
357
357
 
358
- var style$p = {"root":"spinned-icon-module__root__xchkj"};
358
+ var style$q = {"root":"spinned-icon-module__root__xchkj"};
359
359
 
360
360
  var SpinnedIcon = function (_a) {
361
361
  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"]);
362
- return (jsxRuntime.jsx("div", { className: clsx(style$p.root, className), style: {
362
+ return (jsxRuntime.jsx("div", { className: clsx(style$q.root, className), style: {
363
363
  width: size,
364
364
  height: size,
365
365
  animationDuration: "".concat(duration, "s"),
@@ -373,19 +373,19 @@ var Button = React.forwardRef(function (_a, ref) {
373
373
  var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps, { viewBox: "0 0 24 24" }));
374
374
  var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
375
375
  var iconChild = loadingIcon || baseIcon || null;
376
- var classes = clsx(style$q.root, props.className);
376
+ var classes = clsx(style$r.root, props.className);
377
377
  return (isAnchor(props) ? (jsxRuntime.jsx("a", __assign({ "aria-disabled": props.disabled, ref: ref }, props, { className: classes, children: props.children }))) : (jsxRuntime.jsx("button", __assign({ "aria-disabled": props.disabled, ref: ref, type: "button" }, props, { className: classes, "data-type": variant, "data-size": size, "data-full-width": fullWidth, "data-inverted": isInverted, disabled: props.disabled || isLoading, "data-is-loading": isLoading, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconChild, isLoading ? "Loading" : props.children] }) }))));
378
378
  });
379
379
  Button.displayName = "Button";
380
380
 
381
- var style$o = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
381
+ var style$p = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
382
382
 
383
383
  var Hint = function (_a) {
384
384
  var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
385
- return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$o.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$o.children, children: children })] })));
385
+ return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$p.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$p.children, children: children })] })));
386
386
  };
387
387
 
388
- 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"};
388
+ 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"};
389
389
 
390
390
  var TextField = React.forwardRef(function (_a, ref) {
391
391
  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"]);
@@ -422,28 +422,28 @@ var TextField = React.forwardRef(function (_a, ref) {
422
422
  setHasValue(e.target.value.length > 0);
423
423
  onChange === null || onChange === void 0 ? void 0 : onChange(e);
424
424
  };
425
- return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$n.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$n.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$n.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$n.fieldWrapper, children: [jsxRuntime.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 && jsxRuntime.jsx(Hint, { kind: "error", className: style$n.hint, children: hint })] }) }));
425
+ return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$o.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$o.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$o.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$o.fieldWrapper, children: [jsxRuntime.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 && jsxRuntime.jsx(Hint, { kind: "error", className: style$o.hint, children: hint })] }) }));
426
426
  });
427
427
  TextField.displayName = "TextField";
428
428
 
429
- var style$m = {"container":"container-module__container__CAxQw"};
429
+ var style$n = {"container":"container-module__container__CAxQw"};
430
430
 
431
431
  var Container = function (_a) {
432
432
  var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
433
- return (jsxRuntime.jsx("div", __assign({ className: clsx(style$m.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
433
+ return (jsxRuntime.jsx("div", __assign({ className: clsx(style$n.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
434
434
  };
435
435
 
436
- var style$l = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
436
+ var style$m = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
437
437
 
438
438
  var PasswordField = React.forwardRef(function (_a, ref) {
439
439
  var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
440
440
  var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
441
- var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$l.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
442
- return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$l.field })));
441
+ var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$m.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
442
+ return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$m.field })));
443
443
  });
444
444
  PasswordField.displayName = "PasswordField";
445
445
 
446
- var style$k = {"validator":"validate-password-field-module__validator__Do-6w"};
446
+ var style$l = {"validator":"validate-password-field-module__validator__Do-6w"};
447
447
 
448
448
  var rules = {
449
449
  length: /^.{8,}$/,
@@ -468,19 +468,19 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
468
468
  React.useEffect(function () {
469
469
  setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
470
470
  }, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
471
- var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$k.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
471
+ var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$l.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
472
472
  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: @ $ ! % * ? & _ #)")] })] }));
473
473
  });
474
474
  ValidatePasswordField.displayName = "ValidatePasswordField";
475
475
 
476
- var style$j = {"root":"label-module__root__34bJr"};
476
+ var style$k = {"root":"label-module__root__34bJr"};
477
477
 
478
478
  var Label = function (_a) {
479
479
  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;
480
- return (jsxRuntime.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 }));
480
+ return (jsxRuntime.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 }));
481
481
  };
482
482
 
483
- var style$i = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
483
+ var style$j = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
484
484
 
485
485
  var IconAndLabel = function (_a) {
486
486
  var children = _a.children, Icon = _a.icon;
@@ -501,7 +501,7 @@ var CustomSingleValue = function (_a) {
501
501
  };
502
502
  var Select = function (_a) {
503
503
  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"]);
504
- return (jsxRuntime.jsxs("div", { className: clsx(style$i.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$i.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$i.selector, "data-error": !!error, children: [jsxRuntime.jsx(ReactSelect, __assign({ id: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { isDisabled: isDisabled })), error && jsxRuntime.jsx(Hint, { kind: "error", className: style$i.hint, children: error })] })] }));
504
+ return (jsxRuntime.jsxs("div", { className: clsx(style$j.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$j.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$j.selector, "data-error": !!error, children: [jsxRuntime.jsx(ReactSelect, __assign({ id: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { isDisabled: isDisabled })), error && jsxRuntime.jsx(Hint, { kind: "error", className: style$j.hint, children: error })] })] }));
505
505
  };
506
506
  Select.displayName = "Select";
507
507
 
@@ -514,14 +514,14 @@ var FormSelect = function (_a) {
514
514
  };
515
515
  FormSelect.displayName = "FormSelect";
516
516
 
517
- var style$h = {"root":"loader-module__root__qnInQ"};
517
+ var style$i = {"root":"loader-module__root__qnInQ"};
518
518
 
519
519
  var Loader = function (_a) {
520
520
  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;
521
- return (jsxRuntime.jsx("div", { className: style$h.root, "data-full-page": fullPage, "data-is-light-overlay": isLightOverlay, children: jsxRuntime.jsxs(Stack, { dataAlignItems: "center", children: [jsxRuntime.jsx(SpinnedIcon, { size: 50 }), text && jsxRuntime.jsx("p", { children: text }), children] }) }));
521
+ return (jsxRuntime.jsx("div", { className: style$i.root, "data-full-page": fullPage, "data-is-light-overlay": isLightOverlay, children: jsxRuntime.jsxs(Stack, { dataAlignItems: "center", children: [jsxRuntime.jsx(SpinnedIcon, { size: 50 }), text && jsxRuntime.jsx("p", { children: text }), children] }) }));
522
522
  };
523
523
 
524
- 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"};
524
+ 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"};
525
525
 
526
526
  var Checkbox = function (_a) {
527
527
  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"]);
@@ -534,11 +534,11 @@ var Checkbox = function (_a) {
534
534
  var dynamicStyle = {
535
535
  "--vAlign": verticalAlign,
536
536
  };
537
- return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$g.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$g.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$g.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$g.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$g.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$g.label, children: label })] }));
537
+ return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$h.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$h.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$h.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$h.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$h.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$h.label, children: label })] }));
538
538
  };
539
539
  Checkbox.displayName = "Checkbox";
540
540
 
541
- var style$f = {"root":"clipboard-module__root__wVZhy"};
541
+ var style$g = {"root":"clipboard-module__root__wVZhy"};
542
542
 
543
543
  var trimString = function (str, noOfChars) {
544
544
  if (noOfChars === void 0) { noOfChars = 4; }
@@ -562,42 +562,42 @@ var Clipboard = function (_a) {
562
562
  }, [value]);
563
563
  var text = isShowingCopy ? 'Copied!' : displayValue;
564
564
  var icon = isShowingCopy ? jsxRuntime.jsx(SvgCheck, { viewBox: "0 0 24 24" }) : jsxRuntime.jsx(SvgClipboard, { viewBox: "0 0 24 24" });
565
- return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$f.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] }) }));
565
+ return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$g.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] }) }));
566
566
  };
567
567
 
568
- var style$e = {"root":"stepper-module__root__hgDss"};
568
+ var style$f = {"root":"stepper-module__root__hgDss"};
569
569
 
570
570
  var Stepper = function (_a) {
571
571
  var children = _a.children, dataTest = _a.dataTest, className = _a.className;
572
- return (jsxRuntime.jsx("ul", { className: clsx(style$e.root, className), "data-test": dataTest, children: children }));
572
+ return (jsxRuntime.jsx("ul", { className: clsx(style$f.root, className), "data-test": dataTest, children: children }));
573
573
  };
574
574
 
575
- 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"};
575
+ 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"};
576
576
 
577
577
  var Step = function (_a) {
578
578
  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;
579
579
  var icon = React.useMemo(function () {
580
580
  switch (true) {
581
- case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$d.checkIcon, viewBox: "0 0 24 24" });
582
- case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$d.loadingIcon });
583
- default: return jsxRuntime.jsx("span", { className: style$d.emptyIcon });
581
+ case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$e.checkIcon, viewBox: "0 0 24 24" });
582
+ case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$e.loadingIcon });
583
+ default: return jsxRuntime.jsx("span", { className: style$e.emptyIcon });
584
584
  }
585
585
  }, [isCompleted, isCurrent]);
586
- return (jsxRuntime.jsx("li", { className: style$d.root, "data-is-current": isCurrent, "data-test": dataTest, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$d.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$d.label, children: label })] }) }, key));
586
+ return (jsxRuntime.jsx("li", { className: style$e.root, "data-is-current": isCurrent, "data-test": dataTest, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$e.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$e.label, children: label })] }) }, key));
587
587
  };
588
588
 
589
- var style$c = {"root":"list-module__root__OXx93"};
589
+ var style$d = {"root":"list-module__root__OXx93"};
590
590
 
591
591
  var List = function (_a) {
592
592
  var label = _a.label, children = _a.children;
593
- return (jsxRuntime.jsxs(Stack, { className: style$c.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
593
+ return (jsxRuntime.jsxs(Stack, { className: style$d.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
594
594
  };
595
595
 
596
- var style$b = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
596
+ var style$c = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
597
597
 
598
598
  var ListItem = function (_a) {
599
599
  var value = _a.value, label = _a.label, key = _a.key;
600
- return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style$b.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style$b.label, children: label }), jsxRuntime.jsx("span", { className: style$b.value, children: value })] }) }, key));
600
+ return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style$c.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style$c.label, children: label }), jsxRuntime.jsx("span", { className: style$c.value, children: value })] }) }, key));
601
601
  };
602
602
 
603
603
  var AccordionRoot = function (_a) {
@@ -605,38 +605,38 @@ var AccordionRoot = function (_a) {
605
605
  return (jsxRuntime.jsx(RAccordion__namespace.Root, __assign({}, rest, { children: children })));
606
606
  };
607
607
 
608
- var style$a = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
608
+ var style$b = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
609
609
 
610
610
  var AccordionContent = React.forwardRef(function (_a, forwardedRef) {
611
611
  var children = _a.children, className = _a.className, hasChildrenPadding = _a.hasChildrenPadding, rest = __rest(_a, ["children", "className", "hasChildrenPadding"]);
612
- return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$a.content, className), ref: forwardedRef }, rest, { children: jsxRuntime.jsx("div", { className: style$a.childrenContainer, children: jsxRuntime.jsx("div", { className: style$a.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
612
+ return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$b.content, className), ref: forwardedRef }, rest, { children: jsxRuntime.jsx("div", { className: style$b.childrenContainer, children: jsxRuntime.jsx("div", { className: style$b.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
613
613
  });
614
614
  AccordionContent.displayName = "AccordionContent";
615
615
 
616
- var style$9 = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
616
+ var style$a = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
617
617
 
618
618
  var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
619
619
  var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, dataTest = _a.dataTest, rest = __rest(_a, ["children", "className", "dataTest"]);
620
- return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$9.header, children: jsxRuntime.jsx(RAccordion__namespace.Trigger, __assign({ className: clsx(style$9.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
620
+ return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$a.header, children: jsxRuntime.jsx(RAccordion__namespace.Trigger, __assign({ className: clsx(style$a.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
621
621
  });
622
622
  AccordionTrigger.displayName = "AccordionTrigger";
623
623
 
624
- var style$8 = {"root":"accordion-item-module__root__1Yk4f"};
624
+ var style$9 = {"root":"accordion-item-module__root__1Yk4f"};
625
625
 
626
626
  var AccordionItem = React.forwardRef(function (_a, forwardedRef) {
627
627
  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;
628
- return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$8.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsxRuntime.jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsxRuntime.jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
628
+ return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$9.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsxRuntime.jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsxRuntime.jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
629
629
  });
630
630
  AccordionItem.displayName = "AccordionItem";
631
631
 
632
632
  var Accordion = { Root: AccordionRoot, Item: AccordionItem };
633
633
 
634
- 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"};
634
+ 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"};
635
635
 
636
636
  var ModalElement = function (_a) {
637
637
  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"]);
638
638
  var modalRef = React.useRef(null);
639
- return (jsxRuntime.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: [jsxRuntime.jsx("dialog", { className: style$7.backdrop }), jsxRuntime.jsx("div", { className: style$7.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxRuntime.jsxs("div", { className: style$7.bodyWrapper, children: __spreadArray([title && (jsxRuntime.jsxs("div", { className: style$7.header, children: [jsxRuntime.jsx("h2", { id: id, children: title }), jsxRuntime.jsx(SvgCross, { "data-icon": true, onClick: onClose })] })), jsxRuntime.jsx("div", { className: style$7.body, children: children })], actions.map(function (i, idx) { return jsxRuntime.jsx("div", { className: style$7.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
639
+ return (jsxRuntime.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: [jsxRuntime.jsx("dialog", { className: style$8.backdrop }), jsxRuntime.jsx("div", { className: style$8.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxRuntime.jsxs("div", { className: style$8.bodyWrapper, children: __spreadArray([title && (jsxRuntime.jsxs("div", { className: style$8.header, children: [jsxRuntime.jsx("h2", { id: id, children: title }), jsxRuntime.jsx(SvgCross, { "data-icon": true, onClick: onClose })] })), jsxRuntime.jsx("div", { className: style$8.body, children: children })], actions.map(function (i, idx) { return jsxRuntime.jsx("div", { className: style$8.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
640
640
  };
641
641
  var Modal = function (_a) {
642
642
  var visible = _a.visible, props = __rest(_a, ["visible"]);
@@ -667,28 +667,28 @@ var InfoModal = function (_a) {
667
667
  return (jsxRuntime.jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
668
668
  };
669
669
 
670
- var style$6 = {"content":"dropdown-menu-module__content__sSYNC","arrow":"dropdown-menu-module__arrow__AFHzK","trigger":"dropdown-menu-module__trigger__GLDRV"};
670
+ var style$7 = {"content":"dropdown-menu-module__content__sSYNC","arrow":"dropdown-menu-module__arrow__AFHzK","trigger":"dropdown-menu-module__trigger__GLDRV"};
671
671
 
672
672
  var DropdownMenu$1 = function (_a) {
673
673
  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"]);
674
674
  var defaultBody = !text ? Icon && jsxRuntime.jsx(Icon, { viewBox: "0 0 24 24" }) : jsxRuntime.jsx(Button, { icon: Icon, variant: variant, children: text });
675
- return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$6.trigger, disabled: disabled, children: body ? body : defaultBody })), jsxRuntime.jsx(RDropdownMenu__namespace.Portal, { children: jsxRuntime.jsxs(RDropdownMenu__namespace.Content, { className: style$6.content, sideOffset: 5, children: [children, jsxRuntime.jsx(RDropdownMenu__namespace.Arrow, { className: style$6.arrow })] }) })] }));
675
+ return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$7.trigger, disabled: disabled, children: body ? body : defaultBody })), jsxRuntime.jsx(RDropdownMenu__namespace.Portal, { children: jsxRuntime.jsxs(RDropdownMenu__namespace.Content, { className: style$7.content, sideOffset: 5, children: [children, jsxRuntime.jsx(RDropdownMenu__namespace.Arrow, { className: style$7.arrow })] }) })] }));
676
676
  };
677
677
 
678
- var style$5 = {"root":"dropdown-menu-item-module__root__zs510"};
678
+ var style$6 = {"root":"dropdown-menu-item-module__root__zs510"};
679
679
 
680
680
  var DropdownMenuItem = function (_a) {
681
681
  var children = _a.children, disabled = _a.disabled, onClick = _a.onClick, rest = __rest(_a, ["children", "disabled", "onClick"]);
682
- return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$5.root, onClick: !disabled ? onClick : undefined, disabled: disabled }, rest, { children: children })));
682
+ return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$6.root, onClick: !disabled ? onClick : undefined, disabled: disabled }, rest, { children: children })));
683
683
  };
684
684
 
685
685
  var DropdownMenu = { Root: DropdownMenu$1, Item: DropdownMenuItem };
686
686
 
687
- 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"};
687
+ 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"};
688
688
 
689
689
  var Tooltip = function (_a) {
690
690
  var children = _a.children, title = _a.title, description = _a.description;
691
- return (jsxRuntime.jsx(RTooltip__namespace.Provider, { children: jsxRuntime.jsxs(RTooltip__namespace.Root, { children: [jsxRuntime.jsx(RTooltip__namespace.Trigger, { className: style$4.trigger, asChild: true, children: children }), jsxRuntime.jsx(RTooltip__namespace.Portal, { children: jsxRuntime.jsxs(RTooltip__namespace.Content, { className: style$4.content, sideOffset: 2, children: [jsxRuntime.jsx(SvgInfo, { className: style$4.icon, width: 20, height: 20 }), jsxRuntime.jsxs("div", { className: style$4.body, children: [jsxRuntime.jsx("span", { className: style$4.title, children: title }), description && jsxRuntime.jsx("span", { className: style$4.description, children: description })] }), jsxRuntime.jsx(RTooltip__namespace.Arrow, { className: style$4.arrow })] }) })] }) }));
691
+ return (jsxRuntime.jsx(RTooltip__namespace.Provider, { children: jsxRuntime.jsxs(RTooltip__namespace.Root, { children: [jsxRuntime.jsx(RTooltip__namespace.Trigger, { className: style$5.trigger, asChild: true, children: children }), jsxRuntime.jsx(RTooltip__namespace.Portal, { children: jsxRuntime.jsxs(RTooltip__namespace.Content, { className: style$5.content, sideOffset: 2, children: [jsxRuntime.jsx(SvgInfo, { className: style$5.icon, width: 20, height: 20 }), jsxRuntime.jsxs("div", { className: style$5.body, children: [jsxRuntime.jsx("span", { className: style$5.title, children: title }), description && jsxRuntime.jsx("span", { className: style$5.description, children: description })] }), jsxRuntime.jsx(RTooltip__namespace.Arrow, { className: style$5.arrow })] }) })] }) }));
692
692
  };
693
693
 
694
694
  var isEnter = function (e) { return e.key === "Enter"; };
@@ -734,7 +734,7 @@ var formatNumberWithCurrency = function (amount, currency) {
734
734
  return "".concat(currency, " ").concat(formatNumber(amount, isDollarCurrency(currency) ? 2 : 6));
735
735
  };
736
736
 
737
- 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"};
737
+ 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"};
738
738
 
739
739
  var Timeframes = {
740
740
  month: "month",
@@ -803,8 +803,8 @@ var InvestmentGraph = function (_a) {
803
803
  ? ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month]
804
804
  : "";
805
805
  };
806
- return (jsxRuntime.jsxs(Stack, { className: style$3.root, space: "m", children: [jsxRuntime.jsxs(Stack, { space: "none", children: [header && (jsxRuntime.jsx("div", { className: style$3.paddedWrapper, children: header })), jsxRuntime.jsx(Stack, { position: "horizontal-space", children: jsxRuntime.jsx("div", { className: clsx(style$3.timeframeSelector, style$3.paddedWrapper), children: periodOptions.map(function (p) {
807
- return jsxRuntime.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);
806
+ return (jsxRuntime.jsxs(Stack, { className: style$4.root, space: "m", children: [jsxRuntime.jsxs(Stack, { space: "none", children: [header && (jsxRuntime.jsx("div", { className: style$4.paddedWrapper, children: header })), jsxRuntime.jsx(Stack, { position: "horizontal-space", children: jsxRuntime.jsx("div", { className: clsx(style$4.timeframeSelector, style$4.paddedWrapper), children: periodOptions.map(function (p) {
807
+ return jsxRuntime.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);
808
808
  }) }) })] }), jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", minHeight: 500, children: jsxRuntime.jsxs(recharts.AreaChart, { width: 500, height: 300, data: dataBasedOnPeriod, children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("linearGradient", { id: "splitColor", x1: "0", y1: "0", x2: "0", y2: "1", children: hasPositiveAndNegativeValues
809
809
  ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("stop", { offset: off, stopColor: "var(--semantic-success)", stopOpacity: 1 }), jsxRuntime.jsx("stop", { offset: off, stopColor: "var(--semantic-error)", stopOpacity: 1 })] }))
810
810
  : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("stop", { offset: "5%", stopColor: "var(--primary-30)", stopOpacity: 0.8 }), jsxRuntime.jsx("stop", { offset: "95%", stopColor: "var(--neutral-90)", stopOpacity: 0 })] })) }) }), jsxRuntime.jsx(recharts.XAxis, { dataKey: "date", strokeWidth: 0, style: { fill: "var(--neutral-45)" }, tickFormatter: formatXAxis }), jsxRuntime.jsx(recharts.YAxis, { dataKey: "value", strokeWidth: 0, axisLine: false, tickLine: false, scale: "auto", domain: hasNegativeValues && hasPositiveValues ? ["auto", "auto"] : [dataMin, dataMax], tickCount: 6, tick: false, width: 10 }), jsxRuntime.jsx(recharts.Tooltip, { contentStyle: {
@@ -819,14 +819,14 @@ var InvestmentGraph = function (_a) {
819
819
  }, labelFormatter: function (e) { return formatDate(e); } }), jsxRuntime.jsx(recharts.Area, { dataKey: "value", strokeWidth: 2.5, activeDot: { r: 6, fill: "var(--neutral-90)", stroke: "white", strokeWidth: 2 }, stroke: "var(--neutral-70)", fillOpacity: 1, fill: "url(#splitColor)", baseValue: dataMin })] }) })] }));
820
820
  };
821
821
 
822
- var style$2 = {"root":"investments-header-module__root__fxQmk","total":"investments-header-module__total__DrEq0","badge":"investments-header-module__badge__-aeBM"};
822
+ var style$3 = {"root":"investments-header-module__root__fxQmk","total":"investments-header-module__total__DrEq0","badge":"investments-header-module__badge__-aeBM"};
823
823
 
824
824
  var InvestmentsHeader = function (_a) {
825
825
  var currentTotalInvestmentValue = _a.currentTotalInvestmentValue, currentGainLossValue = _a.currentGainLossValue, currentGainLossPercentageValue = _a.currentGainLossPercentageValue;
826
826
  var isNegativePercentage = currentGainLossPercentageValue < 0;
827
827
  var dataGain = isNegativePercentage ? "negative" : "positive";
828
828
  var triangle = isNegativePercentage ? jsxRuntime.jsx(SvgArrowDownRight, { "data-gain": "negative" }) : jsxRuntime.jsx(SvgArrowUpRight, { "data-gain": "positive" });
829
- return (jsxRuntime.jsxs(Stack, { className: style$2.root, space: "xs", children: [jsxRuntime.jsx("p", { className: style$2.total, children: "Total Investments" }), jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx("h1", { children: formatNumberWithCurrency(currentTotalInvestmentValue) }), jsxRuntime.jsx(Badge, { status: isNegativePercentage ? "rejected" : "success", className: style$2.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)), "%)"] })] }) })] })] }));
829
+ return (jsxRuntime.jsxs(Stack, { className: style$3.root, space: "xs", children: [jsxRuntime.jsx("p", { className: style$3.total, children: "Total Investments" }), jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx("h1", { children: formatNumberWithCurrency(currentTotalInvestmentValue) }), jsxRuntime.jsx(Badge, { status: isNegativePercentage ? "rejected" : "success", className: style$3.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)), "%)"] })] }) })] })] }));
830
830
  };
831
831
 
832
832
  var tableCustomStyles = {
@@ -871,13 +871,13 @@ var tableCustomStyles = {
871
871
  },
872
872
  };
873
873
 
874
- var style$1 = {"tableWrapper":"table-module__tableWrapper__q2Fb1"};
874
+ var style$2 = {"tableWrapper":"table-module__tableWrapper__q2Fb1"};
875
875
 
876
876
  var Table = function (_a) {
877
877
  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"]);
878
878
  return isLoading
879
879
  ? null
880
- : (jsxRuntime.jsx("div", { "data-test": dataTest, className: style$1.tableWrapper, "data-is-row-clickable": !!onRowClicked, children: jsxRuntime.jsx(DataTable, __assign({ columns: columns, data: data, customStyles: tableCustomStyles, onRowClicked: onRowClicked }, rest)) }));
880
+ : (jsxRuntime.jsx("div", { "data-test": dataTest, className: style$2.tableWrapper, "data-is-row-clickable": !!onRowClicked, children: jsxRuntime.jsx(DataTable, __assign({ columns: columns, data: data, customStyles: tableCustomStyles, onRowClicked: onRowClicked }, rest)) }));
881
881
  };
882
882
 
883
883
  var useCanAnimate = function () {
@@ -891,16 +891,33 @@ var useCanAnimate = function () {
891
891
  return canAnimate;
892
892
  };
893
893
 
894
- 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"};
894
+ 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"};
895
895
 
896
896
  var Drawer = function (_a) {
897
897
  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;
898
898
  var canAnimate = useCanAnimate();
899
- var drawerContent = (jsxRuntime.jsxs("div", { className: clsx(style.root, className), "data-is-open": isOpen, "data-can-animate": canAnimate, children: [jsxRuntime.jsx("button", { className: style.backdrop, tabIndex: 0, onClick: onClose, onKeyDown: function (e) { return (isEnter(e) ? onClose === null || onClose === void 0 ? void 0 : onClose() : null); } }), jsxRuntime.jsxs("div", { className: style.drawer, "data-is-large": isLarge, children: [jsxRuntime.jsxs("div", { className: style.header, children: [jsxRuntime.jsx("h2", { className: style.title, children: title }), jsxRuntime.jsx("button", { onClick: onClose, className: style.closeButton, type: "button", disabled: !onClose, children: jsxRuntime.jsx(SvgCross, {}) })] }), jsxRuntime.jsxs("div", { className: style.body, children: [jsxRuntime.jsx("div", { className: style.content, children: isOpen ? children : null }), actions && jsxRuntime.jsx("div", { className: style.actions, children: actions })] })] })] }));
899
+ var drawerContent = (jsxRuntime.jsxs("div", { className: clsx(style$1.root, className), "data-is-open": isOpen, "data-can-animate": canAnimate, children: [jsxRuntime.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); } }), jsxRuntime.jsxs("div", { className: style$1.drawer, "data-is-large": isLarge, children: [jsxRuntime.jsxs("div", { className: style$1.header, children: [jsxRuntime.jsx("h2", { className: style$1.title, children: title }), jsxRuntime.jsx("button", { onClick: onClose, className: style$1.closeButton, type: "button", disabled: !onClose, children: jsxRuntime.jsx(SvgCross, {}) })] }), jsxRuntime.jsxs("div", { className: style$1.body, children: [jsxRuntime.jsx("div", { className: style$1.content, children: isOpen ? children : null }), actions && jsxRuntime.jsx("div", { className: style$1.actions, children: actions })] })] })] }));
900
900
  return reactDom.createPortal(drawerContent, document.body);
901
901
  };
902
902
 
903
+ var style = {"root":"alert-module__root__WGdLe","button":"alert-module__button__uNX69"};
904
+
905
+ var Alert = function (_a) {
906
+ 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"]);
907
+ var icon = React.useMemo(function () {
908
+ switch (type) {
909
+ case "success": return jsxRuntime.jsx(SvgCheck, { viewBox: "0 0 24 24" });
910
+ case "warning":
911
+ case "danger": return jsxRuntime.jsx(SvgWarning, { viewBox: "0 0 24 24" });
912
+ case "info": return jsxRuntime.jsx(SvgInfo, { viewBox: "0 0 24 24" });
913
+ default: return jsxRuntime.jsx(SvgLoader, { viewBox: "0 0 24 24" });
914
+ }
915
+ }, [type]);
916
+ return (jsxRuntime.jsxs(Stack, __assign({ className: style.root, position: description ? "vertical" : "horizontal-space", space: "m", "data-type": type, "data-test": dataTest }, rest, { children: [jsxRuntime.jsxs(Stack, { position: "horizontal", children: [icon, title] }), description, buttonText && (jsxRuntime.jsx(Button, { className: style.button, variant: type, onClick: onClick, isInverted: true, size: "small", children: buttonText }))] })));
917
+ };
918
+
903
919
  exports.Accordion = Accordion;
920
+ exports.Alert = Alert;
904
921
  exports.Badge = Badge;
905
922
  exports.BadgeStatuses = BadgeStatuses;
906
923
  exports.Button = Button;