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