@kaio-xyz/design-system 1.1.17 → 1.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +84 -61
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +13 -2
- package/dist/index.esm.js +83 -62
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -321,20 +321,21 @@ var SvgArrowUpRight = function SvgArrowUpRight(props) {
|
|
|
321
321
|
})));
|
|
322
322
|
};
|
|
323
323
|
|
|
324
|
-
var style$
|
|
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$
|
|
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$
|
|
333
|
+
var style$r = {"root":"badge-module__root__rXpaz"};
|
|
334
334
|
|
|
335
335
|
var BadgeStatuses = {
|
|
336
336
|
success: "success",
|
|
337
337
|
rejected: "rejected",
|
|
338
|
+
none: "none",
|
|
338
339
|
warning: "warning",
|
|
339
340
|
loading: "loading"
|
|
340
341
|
};
|
|
@@ -349,16 +350,16 @@ var Badge = function (_a) {
|
|
|
349
350
|
default: return jsxRuntime.jsx(SvgCircleDashed, {});
|
|
350
351
|
}
|
|
351
352
|
}, [status]);
|
|
352
|
-
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$
|
|
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
354
|
};
|
|
354
355
|
|
|
355
|
-
var style$
|
|
356
|
+
var style$q = {"root":"button-module__root__CDCDX"};
|
|
356
357
|
|
|
357
|
-
var style$
|
|
358
|
+
var style$p = {"root":"spinned-icon-module__root__xchkj"};
|
|
358
359
|
|
|
359
360
|
var SpinnedIcon = function (_a) {
|
|
360
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"]);
|
|
361
|
-
return (jsxRuntime.jsx("div", { className: clsx(style$
|
|
362
|
+
return (jsxRuntime.jsx("div", { className: clsx(style$p.root, className), style: {
|
|
362
363
|
width: size,
|
|
363
364
|
height: size,
|
|
364
365
|
animationDuration: "".concat(duration, "s"),
|
|
@@ -372,19 +373,19 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
372
373
|
var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps));
|
|
373
374
|
var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
|
|
374
375
|
var iconChild = loadingIcon || baseIcon || null;
|
|
375
|
-
var classes = clsx(style$
|
|
376
|
+
var classes = clsx(style$q.root, props.className);
|
|
376
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] }) }))));
|
|
377
378
|
});
|
|
378
379
|
Button.displayName = "Button";
|
|
379
380
|
|
|
380
|
-
var style$
|
|
381
|
+
var style$o = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
|
|
381
382
|
|
|
382
383
|
var Hint = function (_a) {
|
|
383
384
|
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$
|
|
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
386
|
};
|
|
386
387
|
|
|
387
|
-
var style$
|
|
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
389
|
|
|
389
390
|
var TextField = React.forwardRef(function (_a, ref) {
|
|
390
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"]);
|
|
@@ -421,28 +422,28 @@ var TextField = React.forwardRef(function (_a, ref) {
|
|
|
421
422
|
setHasValue(e.target.value.length > 0);
|
|
422
423
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
423
424
|
};
|
|
424
|
-
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
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
426
|
});
|
|
426
427
|
TextField.displayName = "TextField";
|
|
427
428
|
|
|
428
|
-
var style$
|
|
429
|
+
var style$m = {"container":"container-module__container__CAxQw"};
|
|
429
430
|
|
|
430
431
|
var Container = function (_a) {
|
|
431
432
|
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$
|
|
433
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$m.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
433
434
|
};
|
|
434
435
|
|
|
435
|
-
var style$
|
|
436
|
+
var style$l = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
|
|
436
437
|
|
|
437
438
|
var PasswordField = React.forwardRef(function (_a, ref) {
|
|
438
439
|
var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
|
|
439
440
|
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$
|
|
441
|
-
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$
|
|
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 })));
|
|
442
443
|
});
|
|
443
444
|
PasswordField.displayName = "PasswordField";
|
|
444
445
|
|
|
445
|
-
var style$
|
|
446
|
+
var style$k = {"validator":"validate-password-field-module__validator__Do-6w"};
|
|
446
447
|
|
|
447
448
|
var rules = {
|
|
448
449
|
length: /^.{8,}$/,
|
|
@@ -467,19 +468,19 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
|
|
|
467
468
|
React.useEffect(function () {
|
|
468
469
|
setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
|
|
469
470
|
}, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
|
|
470
|
-
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$
|
|
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
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: @ $ ! % * ? & _ #)")] })] }));
|
|
472
473
|
});
|
|
473
474
|
ValidatePasswordField.displayName = "ValidatePasswordField";
|
|
474
475
|
|
|
475
|
-
var style$
|
|
476
|
+
var style$j = {"root":"label-module__root__34bJr"};
|
|
476
477
|
|
|
477
478
|
var Label = function (_a) {
|
|
478
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;
|
|
479
|
-
return (jsxRuntime.jsx("label", { className: clsx(style$
|
|
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
481
|
};
|
|
481
482
|
|
|
482
|
-
var style$
|
|
483
|
+
var style$i = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
|
|
483
484
|
|
|
484
485
|
var IconAndLabel = function (_a) {
|
|
485
486
|
var children = _a.children, Icon = _a.icon;
|
|
@@ -500,7 +501,7 @@ var CustomSingleValue = function (_a) {
|
|
|
500
501
|
};
|
|
501
502
|
var Select = function (_a) {
|
|
502
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"]);
|
|
503
|
-
return (jsxRuntime.jsxs("div", { className: clsx(style$
|
|
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
505
|
};
|
|
505
506
|
Select.displayName = "Select";
|
|
506
507
|
|
|
@@ -513,14 +514,14 @@ var FormSelect = function (_a) {
|
|
|
513
514
|
};
|
|
514
515
|
FormSelect.displayName = "FormSelect";
|
|
515
516
|
|
|
516
|
-
var style$
|
|
517
|
+
var style$h = {"root":"loader-module__root__qnInQ"};
|
|
517
518
|
|
|
518
519
|
var Loader = function (_a) {
|
|
519
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;
|
|
520
|
-
return (jsxRuntime.jsx("div", { className: style$
|
|
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
522
|
};
|
|
522
523
|
|
|
523
|
-
var style$
|
|
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
525
|
|
|
525
526
|
var Checkbox = function (_a) {
|
|
526
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"]);
|
|
@@ -533,11 +534,11 @@ var Checkbox = function (_a) {
|
|
|
533
534
|
var dynamicStyle = {
|
|
534
535
|
"--vAlign": verticalAlign,
|
|
535
536
|
};
|
|
536
|
-
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$
|
|
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
538
|
};
|
|
538
539
|
Checkbox.displayName = "Checkbox";
|
|
539
540
|
|
|
540
|
-
var style$
|
|
541
|
+
var style$f = {"root":"clipboard-module__root__wVZhy"};
|
|
541
542
|
|
|
542
543
|
var trimString = function (str, noOfChars) {
|
|
543
544
|
if (noOfChars === void 0) { noOfChars = 4; }
|
|
@@ -562,42 +563,42 @@ var Clipboard = function (_a) {
|
|
|
562
563
|
}, [value]);
|
|
563
564
|
var text = isShowingCopy ? 'Copied!' : displayValue;
|
|
564
565
|
var icon = isShowingCopy ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgClipboard, {});
|
|
565
|
-
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$
|
|
566
|
+
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
567
|
};
|
|
567
568
|
|
|
568
|
-
var style$
|
|
569
|
+
var style$e = {"root":"stepper-module__root__hgDss"};
|
|
569
570
|
|
|
570
571
|
var Stepper = function (_a) {
|
|
571
572
|
var children = _a.children;
|
|
572
|
-
return (jsxRuntime.jsx("ul", { className: style$
|
|
573
|
+
return (jsxRuntime.jsx("ul", { className: style$e.root, children: children }));
|
|
573
574
|
};
|
|
574
575
|
|
|
575
|
-
var style$
|
|
576
|
+
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
577
|
|
|
577
578
|
var Step = function (_a) {
|
|
578
579
|
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
580
|
var icon = React.useMemo(function () {
|
|
580
581
|
switch (true) {
|
|
581
|
-
case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$
|
|
582
|
-
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$
|
|
583
|
-
default: return jsxRuntime.jsx("span", { className: style$
|
|
582
|
+
case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$d.checkIcon });
|
|
583
|
+
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$d.loadingIcon });
|
|
584
|
+
default: return jsxRuntime.jsx("span", { className: style$d.emptyIcon });
|
|
584
585
|
}
|
|
585
586
|
}, [isCompleted, isCurrent]);
|
|
586
|
-
return (jsxRuntime.jsx("li", { className: style$
|
|
587
|
+
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
588
|
};
|
|
588
589
|
|
|
589
|
-
var style$
|
|
590
|
+
var style$c = {"root":"list-module__root__OXx93"};
|
|
590
591
|
|
|
591
592
|
var List = function (_a) {
|
|
592
593
|
var label = _a.label, children = _a.children;
|
|
593
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
594
|
+
return (jsxRuntime.jsxs(Stack, { className: style$c.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
|
|
594
595
|
};
|
|
595
596
|
|
|
596
|
-
var style$
|
|
597
|
+
var style$b = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
|
|
597
598
|
|
|
598
599
|
var ListItem = function (_a) {
|
|
599
600
|
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$
|
|
601
|
+
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
602
|
};
|
|
602
603
|
|
|
603
604
|
var AccordionRoot = function (_a) {
|
|
@@ -605,38 +606,38 @@ var AccordionRoot = function (_a) {
|
|
|
605
606
|
return (jsxRuntime.jsx(RAccordion__namespace.Root, __assign({}, rest, { children: children })));
|
|
606
607
|
};
|
|
607
608
|
|
|
608
|
-
var style$
|
|
609
|
+
var style$a = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
|
|
609
610
|
|
|
610
611
|
var AccordionContent = React.forwardRef(function (_a, forwardedRef) {
|
|
611
612
|
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$
|
|
613
|
+
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
614
|
});
|
|
614
615
|
AccordionContent.displayName = "AccordionContent";
|
|
615
616
|
|
|
616
|
-
var style$
|
|
617
|
+
var style$9 = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
|
|
617
618
|
|
|
618
619
|
var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
|
|
619
620
|
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$
|
|
621
|
+
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
622
|
});
|
|
622
623
|
AccordionTrigger.displayName = "AccordionTrigger";
|
|
623
624
|
|
|
624
|
-
var style$
|
|
625
|
+
var style$8 = {"root":"accordion-item-module__root__1Yk4f"};
|
|
625
626
|
|
|
626
627
|
var AccordionItem = React.forwardRef(function (_a, forwardedRef) {
|
|
627
628
|
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$
|
|
629
|
+
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
630
|
});
|
|
630
631
|
AccordionItem.displayName = "AccordionItem";
|
|
631
632
|
|
|
632
633
|
var Accordion = { Root: AccordionRoot, Item: AccordionItem };
|
|
633
634
|
|
|
634
|
-
var style$
|
|
635
|
+
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
636
|
|
|
636
637
|
var ModalElement = function (_a) {
|
|
637
638
|
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
639
|
var modalRef = React.useRef(null);
|
|
639
|
-
return (jsxRuntime.jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$
|
|
640
|
+
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
641
|
};
|
|
641
642
|
var Modal = function (_a) {
|
|
642
643
|
var visible = _a.visible, props = __rest(_a, ["visible"]);
|
|
@@ -667,28 +668,28 @@ var InfoModal = function (_a) {
|
|
|
667
668
|
return (jsxRuntime.jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
|
|
668
669
|
};
|
|
669
670
|
|
|
670
|
-
var style$
|
|
671
|
+
var style$6 = {"content":"dropdown-menu-module__content__sSYNC","arrow":"dropdown-menu-module__arrow__AFHzK","trigger":"dropdown-menu-module__trigger__GLDRV"};
|
|
671
672
|
|
|
672
673
|
var DropdownMenu$1 = function (_a) {
|
|
673
674
|
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
675
|
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$
|
|
676
|
+
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
677
|
};
|
|
677
678
|
|
|
678
|
-
var style$
|
|
679
|
+
var style$5 = {"root":"dropdown-menu-item-module__root__zs510"};
|
|
679
680
|
|
|
680
681
|
var DropdownMenuItem = function (_a) {
|
|
681
682
|
var children = _a.children, disabled = _a.disabled, rest = __rest(_a, ["children", "disabled"]);
|
|
682
|
-
return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$
|
|
683
|
+
return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$5.root, disabled: disabled }, rest, { children: children })));
|
|
683
684
|
};
|
|
684
685
|
|
|
685
686
|
var DropdownMenu = { Root: DropdownMenu$1, Item: DropdownMenuItem };
|
|
686
687
|
|
|
687
|
-
var style$
|
|
688
|
+
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
689
|
|
|
689
690
|
var Tooltip = function (_a) {
|
|
690
691
|
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$
|
|
692
|
+
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
693
|
};
|
|
693
694
|
|
|
694
695
|
var isEnter = function (e) { return e.key === "Enter"; };
|
|
@@ -734,7 +735,7 @@ var formatNumberWithCurrency = function (amount, currency) {
|
|
|
734
735
|
return "".concat(currency, " ").concat(formatNumber(amount, isDollarCurrency(currency) ? 2 : 6));
|
|
735
736
|
};
|
|
736
737
|
|
|
737
|
-
var style$
|
|
738
|
+
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
739
|
|
|
739
740
|
var Timeframes = {
|
|
740
741
|
month: "month",
|
|
@@ -803,8 +804,8 @@ var InvestmentGraph = function (_a) {
|
|
|
803
804
|
? ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month]
|
|
804
805
|
: "";
|
|
805
806
|
};
|
|
806
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
807
|
-
return jsxRuntime.jsx("button", { tabIndex: 0, onKeyDown: function (e) { return (isEnter(e) ? setTimeFrame(p) : null); }, className: style$
|
|
807
|
+
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) {
|
|
808
|
+
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
809
|
}) }) })] }), 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
810
|
? (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
811
|
: (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 +820,14 @@ var InvestmentGraph = function (_a) {
|
|
|
819
820
|
}, 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
821
|
};
|
|
821
822
|
|
|
822
|
-
var style$
|
|
823
|
+
var style$2 = {"root":"investments-header-module__root__fxQmk","total":"investments-header-module__total__DrEq0","badge":"investments-header-module__badge__-aeBM"};
|
|
823
824
|
|
|
824
825
|
var InvestmentsHeader = function (_a) {
|
|
825
826
|
var currentTotalInvestmentValue = _a.currentTotalInvestmentValue, currentGainLossValue = _a.currentGainLossValue, currentGainLossPercentageValue = _a.currentGainLossPercentageValue;
|
|
826
827
|
var isNegativePercentage = currentGainLossPercentageValue < 0;
|
|
827
828
|
var dataGain = isNegativePercentage ? "negative" : "positive";
|
|
828
829
|
var triangle = isNegativePercentage ? jsxRuntime.jsx(SvgArrowDownRight, { "data-gain": "negative" }) : jsxRuntime.jsx(SvgArrowUpRight, { "data-gain": "positive" });
|
|
829
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
830
|
+
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
831
|
};
|
|
831
832
|
|
|
832
833
|
var tableCustomStyles = {
|
|
@@ -871,22 +872,44 @@ var tableCustomStyles = {
|
|
|
871
872
|
},
|
|
872
873
|
};
|
|
873
874
|
|
|
874
|
-
var style = {"tableWrapper":"table-module__tableWrapper__q2Fb1"};
|
|
875
|
+
var style$1 = {"tableWrapper":"table-module__tableWrapper__q2Fb1"};
|
|
875
876
|
|
|
876
877
|
var Table = function (_a) {
|
|
877
878
|
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
879
|
return isLoading
|
|
879
880
|
? 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)) }));
|
|
881
|
+
: (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)) }));
|
|
882
|
+
};
|
|
883
|
+
|
|
884
|
+
var useCanAnimate = function () {
|
|
885
|
+
var _a = React.useState(false), canAnimate = _a[0], setCanAnimate = _a[1];
|
|
886
|
+
React.useEffect(function () {
|
|
887
|
+
var timer = setTimeout(function () {
|
|
888
|
+
setCanAnimate(true);
|
|
889
|
+
}, 100);
|
|
890
|
+
return function () { return clearTimeout(timer); };
|
|
891
|
+
}, []);
|
|
892
|
+
return canAnimate;
|
|
893
|
+
};
|
|
894
|
+
|
|
895
|
+
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"};
|
|
896
|
+
|
|
897
|
+
var Drawer = function (_a) {
|
|
898
|
+
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;
|
|
899
|
+
var canAnimate = useCanAnimate();
|
|
900
|
+
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 })] })] })] }));
|
|
901
|
+
return reactDom.createPortal(drawerContent, document.body);
|
|
881
902
|
};
|
|
882
903
|
|
|
883
904
|
exports.Accordion = Accordion;
|
|
884
905
|
exports.Badge = Badge;
|
|
906
|
+
exports.BadgeStatuses = BadgeStatuses;
|
|
885
907
|
exports.Button = Button;
|
|
886
908
|
exports.Checkbox = Checkbox;
|
|
887
909
|
exports.Clipboard = Clipboard;
|
|
888
910
|
exports.ConfirmModal = ConfirmModal;
|
|
889
911
|
exports.Container = Container;
|
|
912
|
+
exports.Drawer = Drawer;
|
|
890
913
|
exports.DropdownMenu = DropdownMenu;
|
|
891
914
|
exports.FormSelect = FormSelect;
|
|
892
915
|
exports.InfoModal = InfoModal;
|