@kaio-xyz/design-system 1.1.16 → 1.1.18

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 +82 -61
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +14 -2
  4. package/dist/index.esm.js +82 -62
  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$r = {"root":"stack-module__root__AqSLk"};
324
+ var style$s = {"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$r.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$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 })));
329
329
  };
330
330
 
331
331
  var baseStyle = {"root":"badge-base-module__root__oUZlm"};
332
332
 
333
- var style$q = {"root":"badge-module__root__rXpaz"};
333
+ var style$r = {"root":"badge-module__root__rXpaz"};
334
334
 
335
335
  var BadgeStatuses = {
336
336
  success: "success",
@@ -349,16 +349,16 @@ var Badge = function (_a) {
349
349
  default: return jsxRuntime.jsx(SvgCircleDashed, {});
350
350
  }
351
351
  }, [status]);
352
- return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$q.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] }) })));
352
+ 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
353
  };
354
354
 
355
- var style$p = {"root":"button-module__root__CDCDX"};
355
+ var style$q = {"root":"button-module__root__CDCDX"};
356
356
 
357
- var style$o = {"root":"spinned-icon-module__root__xchkj"};
357
+ var style$p = {"root":"spinned-icon-module__root__xchkj"};
358
358
 
359
359
  var SpinnedIcon = function (_a) {
360
360
  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"]);
361
- return (jsxRuntime.jsx("div", { className: clsx(style$o.root, className), style: {
361
+ return (jsxRuntime.jsx("div", { className: clsx(style$p.root, className), style: {
362
362
  width: size,
363
363
  height: size,
364
364
  animationDuration: "".concat(duration, "s"),
@@ -372,19 +372,19 @@ var Button = React.forwardRef(function (_a, ref) {
372
372
  var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps));
373
373
  var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
374
374
  var iconChild = loadingIcon || baseIcon || null;
375
- var classes = clsx(style$p.root, props.className);
375
+ var classes = clsx(style$q.root, props.className);
376
376
  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] }) }))));
377
377
  });
378
378
  Button.displayName = "Button";
379
379
 
380
- var style$n = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
380
+ var style$o = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
381
381
 
382
382
  var Hint = function (_a) {
383
383
  var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
384
- return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$n.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$n.children, children: children })] })));
384
+ 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
385
  };
386
386
 
387
- var style$m = {"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"};
387
+ 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
388
 
389
389
  var TextField = React.forwardRef(function (_a, ref) {
390
390
  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"]);
@@ -421,28 +421,28 @@ var TextField = React.forwardRef(function (_a, ref) {
421
421
  setHasValue(e.target.value.length > 0);
422
422
  onChange === null || onChange === void 0 ? void 0 : onChange(e);
423
423
  };
424
- return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$m.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$m.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$m.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$m.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$m.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$m.hint, children: hint })] }) }));
424
+ 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
425
  });
426
426
  TextField.displayName = "TextField";
427
427
 
428
- var style$l = {"container":"container-module__container__CAxQw"};
428
+ var style$m = {"container":"container-module__container__CAxQw"};
429
429
 
430
430
  var Container = function (_a) {
431
431
  var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
432
- return (jsxRuntime.jsx("div", __assign({ className: clsx(style$l.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
432
+ return (jsxRuntime.jsx("div", __assign({ className: clsx(style$m.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
433
433
  };
434
434
 
435
- var style$k = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
435
+ var style$l = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
436
436
 
437
437
  var PasswordField = React.forwardRef(function (_a, ref) {
438
438
  var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
439
439
  var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
440
- var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$k.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
441
- return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$k.field })));
440
+ 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, {}) }));
441
+ return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$l.field })));
442
442
  });
443
443
  PasswordField.displayName = "PasswordField";
444
444
 
445
- var style$j = {"validator":"validate-password-field-module__validator__Do-6w"};
445
+ var style$k = {"validator":"validate-password-field-module__validator__Do-6w"};
446
446
 
447
447
  var rules = {
448
448
  length: /^.{8,}$/,
@@ -467,19 +467,19 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
467
467
  React.useEffect(function () {
468
468
  setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
469
469
  }, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
470
- var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$j.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
470
+ 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
471
  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: @ $ ! % * ? & _ #)")] })] }));
472
472
  });
473
473
  ValidatePasswordField.displayName = "ValidatePasswordField";
474
474
 
475
- var style$i = {"root":"label-module__root__34bJr"};
475
+ var style$j = {"root":"label-module__root__34bJr"};
476
476
 
477
477
  var Label = function (_a) {
478
478
  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;
479
- return (jsxRuntime.jsx("label", { className: clsx(style$i.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
479
+ 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
480
  };
481
481
 
482
- var style$h = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
482
+ var style$i = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
483
483
 
484
484
  var IconAndLabel = function (_a) {
485
485
  var children = _a.children, Icon = _a.icon;
@@ -500,7 +500,7 @@ var CustomSingleValue = function (_a) {
500
500
  };
501
501
  var Select = function (_a) {
502
502
  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"]);
503
- return (jsxRuntime.jsxs("div", { className: clsx(style$h.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$h.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$h.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$h.hint, children: error })] })] }));
503
+ 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
504
  };
505
505
  Select.displayName = "Select";
506
506
 
@@ -513,14 +513,14 @@ var FormSelect = function (_a) {
513
513
  };
514
514
  FormSelect.displayName = "FormSelect";
515
515
 
516
- var style$g = {"root":"loader-module__root__qnInQ"};
516
+ var style$h = {"root":"loader-module__root__qnInQ"};
517
517
 
518
518
  var Loader = function (_a) {
519
519
  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;
520
- return (jsxRuntime.jsx("div", { className: style$g.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] }) }));
520
+ 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
521
  };
522
522
 
523
- var style$f = {"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"};
523
+ 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
524
 
525
525
  var Checkbox = function (_a) {
526
526
  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"]);
@@ -533,11 +533,11 @@ var Checkbox = function (_a) {
533
533
  var dynamicStyle = {
534
534
  "--vAlign": verticalAlign,
535
535
  };
536
- return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$f.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$f.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$f.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$f.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$f.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$f.label, children: label })] }));
536
+ 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
537
  };
538
538
  Checkbox.displayName = "Checkbox";
539
539
 
540
- var style$e = {"root":"clipboard-module__root__wVZhy"};
540
+ var style$f = {"root":"clipboard-module__root__wVZhy"};
541
541
 
542
542
  var trimString = function (str, noOfChars) {
543
543
  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, {}) : jsxRuntime.jsx(SvgClipboard, {});
565
- return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$e.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [jsxRuntime.jsx("span", { children: text }), icon] }) }));
565
+ return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$f.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [jsxRuntime.jsx("span", { children: text }), icon] }) }));
566
566
  };
567
567
 
568
- var style$d = {"root":"stepper-module__root__hgDss"};
568
+ var style$e = {"root":"stepper-module__root__hgDss"};
569
569
 
570
570
  var Stepper = function (_a) {
571
571
  var children = _a.children;
572
- return (jsxRuntime.jsx("ul", { className: style$d.root, children: children }));
572
+ return (jsxRuntime.jsx("ul", { className: style$e.root, children: children }));
573
573
  };
574
574
 
575
- var style$c = {"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$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"};
576
576
 
577
577
  var Step = function (_a) {
578
578
  var key = _a.key, label = _a.label, _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$c.checkIcon });
582
- case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$c.loadingIcon });
583
- default: return jsxRuntime.jsx("span", { className: style$c.emptyIcon });
581
+ case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$d.checkIcon });
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 });
584
584
  }
585
585
  }, [isCompleted, isCurrent]);
586
- return (jsxRuntime.jsx("li", { className: style$c.root, "data-is-current": isCurrent, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$c.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$c.label, children: label })] }) }, key));
586
+ return (jsxRuntime.jsx("li", { className: style$d.root, "data-is-current": isCurrent, 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));
587
587
  };
588
588
 
589
- var style$b = {"root":"list-module__root__OXx93"};
589
+ var style$c = {"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$b.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
593
+ return (jsxRuntime.jsxs(Stack, { className: style$c.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
594
594
  };
595
595
 
596
- var style$a = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
596
+ var style$b = {"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$a.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style$a.label, children: label }), jsxRuntime.jsx("span", { className: style$a.value, children: value })] }) }, 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));
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$9 = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
608
+ var style$a = {"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$9.content, className), ref: forwardedRef }, rest, { children: jsxRuntime.jsx("div", { className: style$9.childrenContainer, children: jsxRuntime.jsx("div", { className: style$9.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
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 }) }) })));
613
613
  });
614
614
  AccordionContent.displayName = "AccordionContent";
615
615
 
616
- var style$8 = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
616
+ var style$9 = {"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$8.header, children: jsxRuntime.jsx(RAccordion__namespace.Trigger, __assign({ className: clsx(style$8.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
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 })) }));
621
621
  });
622
622
  AccordionTrigger.displayName = "AccordionTrigger";
623
623
 
624
- var style$7 = {"root":"accordion-item-module__root__1Yk4f"};
624
+ var style$8 = {"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$7.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$8.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$6 = {"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$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"};
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$6.modal, className), "data-test": "Modal__Div__content", "data-visible": visible, "data-is-not-closable": !onClose }, attributes, { children: [jsxRuntime.jsx("dialog", { className: style$6.backdrop }), jsxRuntime.jsx("div", { className: style$6.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxRuntime.jsxs("div", { className: style$6.bodyWrapper, children: __spreadArray([title && (jsxRuntime.jsxs("div", { className: style$6.header, children: [jsxRuntime.jsx("h2", { id: id, children: title }), jsxRuntime.jsx(SvgCross, { "data-icon": true, onClick: onClose })] })), jsxRuntime.jsx("div", { className: style$6.body, children: children })], actions.map(function (i, idx) { return jsxRuntime.jsx("div", { className: style$6.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$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) }) })] })));
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$5 = {"content":"dropdown-menu-module__content__sSYNC","arrow":"dropdown-menu-module__arrow__AFHzK","trigger":"dropdown-menu-module__trigger__GLDRV"};
670
+ var style$6 = {"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, {}) : 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$5.trigger, disabled: disabled, children: body ? body : defaultBody })), jsxRuntime.jsx(RDropdownMenu__namespace.Portal, { children: jsxRuntime.jsxs(RDropdownMenu__namespace.Content, { className: style$5.content, sideOffset: 5, children: [children, jsxRuntime.jsx(RDropdownMenu__namespace.Arrow, { className: style$5.arrow })] }) })] }));
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 })] }) })] }));
676
676
  };
677
677
 
678
- var style$4 = {"root":"dropdown-menu-item-module__root__zs510"};
678
+ var style$5 = {"root":"dropdown-menu-item-module__root__zs510"};
679
679
 
680
680
  var DropdownMenuItem = function (_a) {
681
681
  var children = _a.children, disabled = _a.disabled, rest = __rest(_a, ["children", "disabled"]);
682
- return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$4.root, disabled: disabled }, rest, { children: children })));
682
+ return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$5.root, disabled: disabled }, rest, { children: children })));
683
683
  };
684
684
 
685
685
  var DropdownMenu = { Root: DropdownMenu$1, Item: DropdownMenuItem };
686
686
 
687
- var style$3 = {"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$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"};
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$3.trigger, asChild: true, children: children }), jsxRuntime.jsx(RTooltip__namespace.Portal, { children: jsxRuntime.jsxs(RTooltip__namespace.Content, { className: style$3.content, sideOffset: 2, children: [jsxRuntime.jsx(SvgInfo, { className: style$3.icon, width: 20, height: 20 }), jsxRuntime.jsxs("div", { className: style$3.body, children: [jsxRuntime.jsx("span", { className: style$3.title, children: title }), description && jsxRuntime.jsx("span", { className: style$3.description, children: description })] }), jsxRuntime.jsx(RTooltip__namespace.Arrow, { className: style$3.arrow })] }) })] }) }));
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 })] }) })] }) }));
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$2 = {"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$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"};
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$2.root, space: "m", children: [jsxRuntime.jsxs(Stack, { space: "none", children: [header && (jsxRuntime.jsx("div", { className: style$2.paddedWrapper, children: header })), jsxRuntime.jsx(Stack, { position: "horizontal-space", children: jsxRuntime.jsx("div", { className: clsx(style$2.timeframeSelector, style$2.paddedWrapper), children: periodOptions.map(function (p) {
807
- return jsxRuntime.jsx("button", { tabIndex: 0, onKeyDown: function (e) { return (isEnter(e) ? setTimeFrame(p) : null); }, className: style$2.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$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);
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-90)", fillOpacity: 1, fill: "url(#splitColor)", baseValue: dataMin })] }) })] }));
820
820
  };
821
821
 
822
- var style$1 = {"root":"investments-header-module__root__fxQmk","total":"investments-header-module__total__DrEq0","badge":"investments-header-module__badge__-aeBM"};
822
+ var style$2 = {"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$1.root, space: "xs", children: [jsxRuntime.jsx("p", { className: style$1.total, children: "Total Investments" }), jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx("h1", { children: formatNumberWithCurrency(currentTotalInvestmentValue) }), jsxRuntime.jsx(Badge, { status: isNegativePercentage ? "rejected" : "success", className: style$1.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$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)), "%)"] })] }) })] })] }));
830
830
  };
831
831
 
832
832
  var tableCustomStyles = {
@@ -871,13 +871,33 @@ var tableCustomStyles = {
871
871
  },
872
872
  };
873
873
 
874
- var style = {"tableWrapper":"table-module__tableWrapper__q2Fb1"};
874
+ var style$1 = {"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.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$1.tableWrapper, "data-is-row-clickable": !!onRowClicked, children: jsxRuntime.jsx(DataTable, __assign({ columns: columns, data: data, customStyles: tableCustomStyles, onRowClicked: onRowClicked }, rest)) }));
881
+ };
882
+
883
+ var useCanAnimate = function () {
884
+ var _a = React.useState(false), canAnimate = _a[0], setCanAnimate = _a[1];
885
+ React.useEffect(function () {
886
+ var timer = setTimeout(function () {
887
+ setCanAnimate(true);
888
+ }, 100);
889
+ return function () { return clearTimeout(timer); };
890
+ }, []);
891
+ return canAnimate;
892
+ };
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"};
895
+
896
+ var Drawer = function (_a) {
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
+ 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 })] })] })] }));
900
+ return reactDom.createPortal(drawerContent, document.body);
881
901
  };
882
902
 
883
903
  exports.Accordion = Accordion;
@@ -887,6 +907,7 @@ exports.Checkbox = Checkbox;
887
907
  exports.Clipboard = Clipboard;
888
908
  exports.ConfirmModal = ConfirmModal;
889
909
  exports.Container = Container;
910
+ exports.Drawer = Drawer;
890
911
  exports.DropdownMenu = DropdownMenu;
891
912
  exports.FormSelect = FormSelect;
892
913
  exports.InfoModal = InfoModal;