@kaio-xyz/design-system 1.1.39 → 1.1.40
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 +102 -69
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +13 -2
- package/dist/index.esm.js +100 -69
- 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,12 +1,13 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes, ElementType, PropsWithChildren, ComponentPropsWithoutRef, InputHTMLAttributes, JSX, Dispatch, SetStateAction, HTMLAttributes } from 'react';
|
|
3
|
+
import { ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes, ElementType, PropsWithChildren, ComponentPropsWithoutRef, InputHTMLAttributes, JSX, Dispatch, SetStateAction, HTMLAttributes, ComponentProps } 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';
|
|
7
7
|
import * as _radix_ui_react_accordion from '@radix-ui/react-accordion';
|
|
8
8
|
import { TableProps as TableProps$1 } from 'react-data-table-component';
|
|
9
9
|
export { TableColumn } from 'react-data-table-component';
|
|
10
|
+
import * as RTabs from '@radix-ui/react-tabs';
|
|
10
11
|
|
|
11
12
|
declare const BadgeStatuses: {
|
|
12
13
|
readonly success: "success";
|
|
@@ -344,5 +345,15 @@ type BoxProps = {
|
|
|
344
345
|
};
|
|
345
346
|
declare const Box: ({ title, description, icon: Icon, iconType }: BoxProps) => react_jsx_runtime.JSX.Element;
|
|
346
347
|
|
|
347
|
-
|
|
348
|
+
declare const Tabs: {
|
|
349
|
+
Root: ({ children, ...rest }: ComponentProps<typeof RTabs.Root>) => react_jsx_runtime.JSX.Element;
|
|
350
|
+
List: ({ children, ...rest }: ComponentProps<typeof RTabs.List>) => react_jsx_runtime.JSX.Element;
|
|
351
|
+
Trigger: ({ children, ...rest }: ComponentProps<typeof RTabs.Trigger>) => react_jsx_runtime.JSX.Element;
|
|
352
|
+
Content: ({ children, ...rest }: ComponentProps<typeof RTabs.Content>) => react_jsx_runtime.JSX.Element;
|
|
353
|
+
TriggerWithCounter: ({ children, counter, ...rest }: ComponentProps<typeof RTabs.Trigger> & {
|
|
354
|
+
counter: number;
|
|
355
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
356
|
+
};
|
|
357
|
+
|
|
358
|
+
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, Tabs, TextField, Timeframes, Tooltip, ValidatePasswordField, periodOptions };
|
|
348
359
|
export type { AlertProps, BadgeStatus, BoxProps, ButtonProps, ConfirmModalProps$1 as ConfirmModalProps, DataPoint, DrawerProps, TimeFrame };
|
package/dist/index.esm.js
CHANGED
|
@@ -10,6 +10,7 @@ import * as RDropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
|
10
10
|
import * as RTooltip from '@radix-ui/react-tooltip';
|
|
11
11
|
import { ResponsiveContainer, AreaChart, XAxis, YAxis, Tooltip as Tooltip$1, Area } from 'recharts';
|
|
12
12
|
import DataTable from 'react-data-table-component';
|
|
13
|
+
import * as RTabs from '@radix-ui/react-tabs';
|
|
13
14
|
|
|
14
15
|
/******************************************************************************
|
|
15
16
|
Copyright (c) Microsoft Corporation.
|
|
@@ -298,17 +299,17 @@ var SvgArrowUpRight = function SvgArrowUpRight(props) {
|
|
|
298
299
|
})));
|
|
299
300
|
};
|
|
300
301
|
|
|
301
|
-
var style$
|
|
302
|
+
var style$v = {"root":"stack-module__root__AqSLk"};
|
|
302
303
|
|
|
303
304
|
var Stack = function (_a) {
|
|
304
305
|
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
306
|
var Tag = as || "div";
|
|
306
|
-
return (jsx(Tag, __assign({ className: clsx(style$
|
|
307
|
+
return (jsx(Tag, __assign({ className: clsx(style$v.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 })));
|
|
307
308
|
};
|
|
308
309
|
|
|
309
310
|
var baseStyle = {"root":"badge-base-module__root__oUZlm"};
|
|
310
311
|
|
|
311
|
-
var style$
|
|
312
|
+
var style$u = {"root":"badge-module__root__rXpaz"};
|
|
312
313
|
|
|
313
314
|
var BadgeStatuses = {
|
|
314
315
|
success: "success",
|
|
@@ -328,16 +329,16 @@ var Badge = function (_a) {
|
|
|
328
329
|
default: return jsx(SvgCircleDashed, {});
|
|
329
330
|
}
|
|
330
331
|
}, [status]);
|
|
331
|
-
return (jsx("label", __assign({ className: clsx(baseStyle.root, style$
|
|
332
|
+
return (jsx("label", __assign({ className: clsx(baseStyle.root, style$u.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] }) })));
|
|
332
333
|
};
|
|
333
334
|
|
|
334
|
-
var style$
|
|
335
|
+
var style$t = {"root":"button-module__root__CDCDX"};
|
|
335
336
|
|
|
336
|
-
var style$
|
|
337
|
+
var style$s = {"root":"spinned-icon-module__root__xchkj"};
|
|
337
338
|
|
|
338
339
|
var SpinnedIcon = function (_a) {
|
|
339
340
|
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"]);
|
|
340
|
-
return (jsx("div", { className: clsx(style$
|
|
341
|
+
return (jsx("div", { className: clsx(style$s.root, className), style: {
|
|
341
342
|
width: size,
|
|
342
343
|
height: size,
|
|
343
344
|
animationDuration: "".concat(duration, "s"),
|
|
@@ -351,19 +352,19 @@ var Button = forwardRef(function (_a, ref) {
|
|
|
351
352
|
var baseIcon = Icon && jsx(Icon, __assign({}, iconProps, { viewBox: "0 0 24 24" }));
|
|
352
353
|
var loadingIcon = isLoading && jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
|
|
353
354
|
var iconChild = loadingIcon || baseIcon || null;
|
|
354
|
-
var classes = clsx(style$
|
|
355
|
+
var classes = clsx(style$t.root, props.className);
|
|
355
356
|
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] }) }))));
|
|
356
357
|
});
|
|
357
358
|
Button.displayName = "Button";
|
|
358
359
|
|
|
359
|
-
var style$
|
|
360
|
+
var style$r = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
|
|
360
361
|
|
|
361
362
|
var Hint = function (_a) {
|
|
362
363
|
var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
|
|
363
|
-
return (jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$
|
|
364
|
+
return (jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$r.hint, className), "data-type": kind }, attributes, { children: [jsx(SvgInfo, {}), jsx("span", { className: style$r.children, children: children })] })));
|
|
364
365
|
};
|
|
365
366
|
|
|
366
|
-
var style$
|
|
367
|
+
var style$q = {"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"};
|
|
367
368
|
|
|
368
369
|
var TextField = forwardRef(function (_a, ref) {
|
|
369
370
|
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"]);
|
|
@@ -400,28 +401,28 @@ var TextField = forwardRef(function (_a, ref) {
|
|
|
400
401
|
setHasValue(e.target.value.length > 0);
|
|
401
402
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
402
403
|
};
|
|
403
|
-
return (jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
404
|
+
return (jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$q.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxs("div", { className: style$q.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsx("label", { className: style$q.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxs("div", { className: style$q.fieldWrapper, children: [jsx("input", __assign({ "aria-readonly": readOnly, className: style$q.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$q.hint, children: hint })] }) }));
|
|
404
405
|
});
|
|
405
406
|
TextField.displayName = "TextField";
|
|
406
407
|
|
|
407
|
-
var style$
|
|
408
|
+
var style$p = {"container":"container-module__container__CAxQw"};
|
|
408
409
|
|
|
409
410
|
var Container = function (_a) {
|
|
410
411
|
var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
|
|
411
|
-
return (jsx("div", __assign({ className: clsx(style$
|
|
412
|
+
return (jsx("div", __assign({ className: clsx(style$p.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
412
413
|
};
|
|
413
414
|
|
|
414
|
-
var style$
|
|
415
|
+
var style$o = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
|
|
415
416
|
|
|
416
417
|
var PasswordField = forwardRef(function (_a, ref) {
|
|
417
418
|
var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
|
|
418
419
|
var _b = useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
|
|
419
|
-
var button = (jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$
|
|
420
|
-
return (jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$
|
|
420
|
+
var button = (jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$o.button, children: isPasswordVisible ? jsx(SvgEyeOpen, {}) : jsx(SvgEyeClosed, {}) }));
|
|
421
|
+
return (jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$o.field })));
|
|
421
422
|
});
|
|
422
423
|
PasswordField.displayName = "PasswordField";
|
|
423
424
|
|
|
424
|
-
var style$
|
|
425
|
+
var style$n = {"validator":"validate-password-field-module__validator__Do-6w"};
|
|
425
426
|
|
|
426
427
|
var rules = {
|
|
427
428
|
length: /^.{8,}$/,
|
|
@@ -446,19 +447,19 @@ var ValidatePasswordField = forwardRef(function (_a, ref) {
|
|
|
446
447
|
useEffect(function () {
|
|
447
448
|
setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
|
|
448
449
|
}, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
|
|
449
|
-
var getValidator = function (isCheckOk, label) { return (jsxs(Stack, { position: "horizontal", className: style$
|
|
450
|
+
var getValidator = function (isCheckOk, label) { return (jsxs(Stack, { position: "horizontal", className: style$n.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsx(SvgCheck, {}) : jsx(SvgCircleDashed, {}), jsx("p", { children: label })] })); };
|
|
450
451
|
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: @ $ ! % * ? & _ #)")] })] }));
|
|
451
452
|
});
|
|
452
453
|
ValidatePasswordField.displayName = "ValidatePasswordField";
|
|
453
454
|
|
|
454
|
-
var style$
|
|
455
|
+
var style$m = {"root":"label-module__root__34bJr"};
|
|
455
456
|
|
|
456
457
|
var Label = function (_a) {
|
|
457
458
|
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;
|
|
458
|
-
return (jsx("label", { className: clsx(style$
|
|
459
|
+
return (jsx("label", { className: clsx(style$m.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
|
|
459
460
|
};
|
|
460
461
|
|
|
461
|
-
var style$
|
|
462
|
+
var style$l = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
|
|
462
463
|
|
|
463
464
|
var IconAndLabel = function (_a) {
|
|
464
465
|
var children = _a.children, Icon = _a.icon;
|
|
@@ -479,7 +480,7 @@ var CustomSingleValue = function (_a) {
|
|
|
479
480
|
};
|
|
480
481
|
var Select = function (_a) {
|
|
481
482
|
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"]);
|
|
482
|
-
return (jsxs("div", { className: clsx(style$
|
|
483
|
+
return (jsxs("div", { className: clsx(style$l.root, className), children: [label && jsx(Label, { id: id, label: label, className: style$l.label }), jsxs("div", { "data-test": dataTest, className: style$l.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$l.hint, children: error })] })] }));
|
|
483
484
|
};
|
|
484
485
|
Select.displayName = "Select";
|
|
485
486
|
|
|
@@ -492,14 +493,14 @@ var FormSelect = function (_a) {
|
|
|
492
493
|
};
|
|
493
494
|
FormSelect.displayName = "FormSelect";
|
|
494
495
|
|
|
495
|
-
var style$
|
|
496
|
+
var style$k = {"root":"loader-module__root__qnInQ"};
|
|
496
497
|
|
|
497
498
|
var Loader = function (_a) {
|
|
498
499
|
var text = _a.text, _b = _a.isLightOverlay, isLightOverlay = _b === void 0 ? false : _b, children = _a.children;
|
|
499
|
-
return (jsx("div", { className: style$
|
|
500
|
+
return (jsx("div", { className: style$k.root, "data-is-light-overlay": isLightOverlay, children: jsxs(Stack, { dataAlignItems: "center", children: [jsx(SpinnedIcon, { size: 50 }), text && jsx("p", { children: text }), children] }) }));
|
|
500
501
|
};
|
|
501
502
|
|
|
502
|
-
var style$
|
|
503
|
+
var style$j = {"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"};
|
|
503
504
|
|
|
504
505
|
var Checkbox = function (_a) {
|
|
505
506
|
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"]);
|
|
@@ -512,11 +513,11 @@ var Checkbox = function (_a) {
|
|
|
512
513
|
var dynamicStyle = {
|
|
513
514
|
"--vAlign": verticalAlign,
|
|
514
515
|
};
|
|
515
|
-
return (jsxs("label", { style: dynamicStyle, className: clsx(style$
|
|
516
|
+
return (jsxs("label", { style: dynamicStyle, className: clsx(style$j.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxs("span", { className: style$j.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$j.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsx(SvgCheck, { className: style$j.icon })), indeterminate && (jsx(SvgMinus, { className: style$j.icon }))] })] }), label && jsx("span", { className: style$j.label, children: label })] }));
|
|
516
517
|
};
|
|
517
518
|
Checkbox.displayName = "Checkbox";
|
|
518
519
|
|
|
519
|
-
var style$
|
|
520
|
+
var style$i = {"root":"clipboard-module__root__wVZhy"};
|
|
520
521
|
|
|
521
522
|
var trimString = function (str, noOfChars) {
|
|
522
523
|
if (noOfChars === void 0) { noOfChars = 4; }
|
|
@@ -540,42 +541,42 @@ var Clipboard = function (_a) {
|
|
|
540
541
|
}, [value]);
|
|
541
542
|
var text = isShowingCopy ? 'Copied!' : displayValue;
|
|
542
543
|
var icon = isShowingCopy ? jsx(SvgCheck, { viewBox: "0 0 24 24" }) : jsx(SvgClipboard, { viewBox: "0 0 24 24" });
|
|
543
|
-
return (jsx("button", { type: "button", onClick: handleClick, className: style$
|
|
544
|
+
return (jsx("button", { type: "button", onClick: handleClick, className: style$i.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, "data-test": dataTest, children: jsxs(Stack, { position: "horizontal", children: [jsx("span", { children: text }), icon] }) }));
|
|
544
545
|
};
|
|
545
546
|
|
|
546
|
-
var style$
|
|
547
|
+
var style$h = {"root":"stepper-module__root__hgDss"};
|
|
547
548
|
|
|
548
549
|
var Stepper = function (_a) {
|
|
549
550
|
var children = _a.children, dataTest = _a.dataTest, className = _a.className;
|
|
550
|
-
return (jsx("ul", { className: clsx(style$
|
|
551
|
+
return (jsx("ul", { className: clsx(style$h.root, className), "data-test": dataTest, children: children }));
|
|
551
552
|
};
|
|
552
553
|
|
|
553
|
-
var style$
|
|
554
|
+
var style$g = {"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"};
|
|
554
555
|
|
|
555
556
|
var Step = function (_a) {
|
|
556
557
|
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;
|
|
557
558
|
var icon = useMemo(function () {
|
|
558
559
|
switch (true) {
|
|
559
|
-
case isCompleted: return jsx(SvgCheck, { className: style$
|
|
560
|
-
case isCurrent: return jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$
|
|
561
|
-
default: return jsx("span", { className: style$
|
|
560
|
+
case isCompleted: return jsx(SvgCheck, { className: style$g.checkIcon, viewBox: "0 0 24 24" });
|
|
561
|
+
case isCurrent: return jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$g.loadingIcon });
|
|
562
|
+
default: return jsx("span", { className: style$g.emptyIcon });
|
|
562
563
|
}
|
|
563
564
|
}, [isCompleted, isCurrent]);
|
|
564
|
-
return (jsx("li", { className: style$
|
|
565
|
+
return (jsx("li", { className: style$g.root, "data-is-current": isCurrent, "data-test": dataTest, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxs(Stack, { className: style$g.container, position: "horizontal", children: [icon, jsx("span", { className: style$g.label, children: label })] }) }, key));
|
|
565
566
|
};
|
|
566
567
|
|
|
567
|
-
var style$
|
|
568
|
+
var style$f = {"root":"list-module__root__OXx93"};
|
|
568
569
|
|
|
569
|
-
var List = function (_a) {
|
|
570
|
+
var List$1 = function (_a) {
|
|
570
571
|
var label = _a.label, children = _a.children;
|
|
571
|
-
return (jsxs(Stack, { className: style$
|
|
572
|
+
return (jsxs(Stack, { className: style$f.root, children: [label && jsx("p", { children: label }), jsx("ul", { children: children })] }));
|
|
572
573
|
};
|
|
573
574
|
|
|
574
|
-
var style$
|
|
575
|
+
var style$e = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
|
|
575
576
|
|
|
576
577
|
var ListItem = function (_a) {
|
|
577
578
|
var value = _a.value, label = _a.label, key = _a.key;
|
|
578
|
-
return (jsx("li", { children: jsxs(Stack, { position: "horizontal-space", space: "m", className: style$
|
|
579
|
+
return (jsx("li", { children: jsxs(Stack, { position: "horizontal-space", space: "m", className: style$e.root, dataAlignItems: "flex-start", children: [jsx("span", { className: style$e.label, children: label }), jsx("span", { className: style$e.value, children: value })] }) }, key));
|
|
579
580
|
};
|
|
580
581
|
|
|
581
582
|
var AccordionRoot = function (_a) {
|
|
@@ -583,38 +584,38 @@ var AccordionRoot = function (_a) {
|
|
|
583
584
|
return (jsx(RAccordion.Root, __assign({}, rest, { children: children })));
|
|
584
585
|
};
|
|
585
586
|
|
|
586
|
-
var style$
|
|
587
|
+
var style$d = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
|
|
587
588
|
|
|
588
589
|
var AccordionContent = forwardRef(function (_a, forwardedRef) {
|
|
589
590
|
var children = _a.children, className = _a.className, hasChildrenPadding = _a.hasChildrenPadding, rest = __rest(_a, ["children", "className", "hasChildrenPadding"]);
|
|
590
|
-
return (jsx(RAccordion.Content, __assign({ className: clsx(style$
|
|
591
|
+
return (jsx(RAccordion.Content, __assign({ className: clsx(style$d.content, className), ref: forwardedRef }, rest, { children: jsx("div", { className: style$d.childrenContainer, children: jsx("div", { className: style$d.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
|
|
591
592
|
});
|
|
592
593
|
AccordionContent.displayName = "AccordionContent";
|
|
593
594
|
|
|
594
|
-
var style$
|
|
595
|
+
var style$c = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
|
|
595
596
|
|
|
596
597
|
var AccordionTrigger = forwardRef(function (_a, forwardedRef) {
|
|
597
598
|
var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, dataTest = _a.dataTest, rest = __rest(_a, ["children", "className", "dataTest"]);
|
|
598
|
-
return (jsx(RAccordion.Header, { className: style$
|
|
599
|
+
return (jsx(RAccordion.Header, { className: style$c.header, children: jsx(RAccordion.Trigger, __assign({ className: clsx(style$c.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
|
|
599
600
|
});
|
|
600
601
|
AccordionTrigger.displayName = "AccordionTrigger";
|
|
601
602
|
|
|
602
|
-
var style$
|
|
603
|
+
var style$b = {"root":"accordion-item-module__root__1Yk4f"};
|
|
603
604
|
|
|
604
605
|
var AccordionItem = forwardRef(function (_a, forwardedRef) {
|
|
605
606
|
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;
|
|
606
|
-
return (jsxs(RAccordion.Item, { className: style$
|
|
607
|
+
return (jsxs(RAccordion.Item, { className: style$b.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
|
|
607
608
|
});
|
|
608
609
|
AccordionItem.displayName = "AccordionItem";
|
|
609
610
|
|
|
610
611
|
var Accordion = { Root: AccordionRoot, Item: AccordionItem };
|
|
611
612
|
|
|
612
|
-
var style$
|
|
613
|
+
var style$a = {"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"};
|
|
613
614
|
|
|
614
615
|
var ModalElement = function (_a) {
|
|
615
616
|
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"]);
|
|
616
617
|
var modalRef = useRef(null);
|
|
617
|
-
return (jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$
|
|
618
|
+
return (jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$a.modal, className), "data-test": "Modal__Div__content", "data-visible": visible, "data-is-not-closable": !onClose }, attributes, { children: [jsx("dialog", { className: style$a.backdrop }), jsx("div", { className: style$a.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxs("div", { className: style$a.bodyWrapper, children: __spreadArray([title && (jsxs("div", { className: style$a.header, children: [jsx("h2", { id: id, children: title }), jsx(SvgCross, { "data-icon": true, onClick: onClose })] })), jsx("div", { className: style$a.body, children: children })], actions.map(function (i, idx) { return jsx("div", { className: style$a.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
|
|
618
619
|
};
|
|
619
620
|
var Modal = function (_a) {
|
|
620
621
|
var visible = _a.visible, props = __rest(_a, ["visible"]);
|
|
@@ -645,28 +646,28 @@ var InfoModal = function (_a) {
|
|
|
645
646
|
return (jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
|
|
646
647
|
};
|
|
647
648
|
|
|
648
|
-
var style$
|
|
649
|
+
var style$9 = {"content":"dropdown-menu-module__content__sSYNC","arrow":"dropdown-menu-module__arrow__AFHzK","trigger":"dropdown-menu-module__trigger__GLDRV"};
|
|
649
650
|
|
|
650
651
|
var DropdownMenu$1 = function (_a) {
|
|
651
652
|
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"]);
|
|
652
653
|
var defaultBody = !text ? Icon && jsx(Icon, { viewBox: "0 0 24 24" }) : jsx(Button, { icon: Icon, variant: variant, children: text });
|
|
653
|
-
return (jsxs(RDropdownMenu.Root, { children: [jsx(RDropdownMenu.Trigger, __assign({}, rest, { asChild: !!text, className: style$
|
|
654
|
+
return (jsxs(RDropdownMenu.Root, { children: [jsx(RDropdownMenu.Trigger, __assign({}, rest, { asChild: !!text, className: style$9.trigger, disabled: disabled, children: body ? body : defaultBody })), jsx(RDropdownMenu.Portal, { children: jsxs(RDropdownMenu.Content, { className: style$9.content, sideOffset: 5, children: [children, jsx(RDropdownMenu.Arrow, { className: style$9.arrow })] }) })] }));
|
|
654
655
|
};
|
|
655
656
|
|
|
656
|
-
var style$
|
|
657
|
+
var style$8 = {"root":"dropdown-menu-item-module__root__zs510"};
|
|
657
658
|
|
|
658
659
|
var DropdownMenuItem = function (_a) {
|
|
659
660
|
var children = _a.children, disabled = _a.disabled, onClick = _a.onClick, rest = __rest(_a, ["children", "disabled", "onClick"]);
|
|
660
|
-
return (jsx(RDropdownMenu.Item, __assign({ className: style$
|
|
661
|
+
return (jsx(RDropdownMenu.Item, __assign({ className: style$8.root, onClick: !disabled ? onClick : undefined, disabled: disabled }, rest, { children: children })));
|
|
661
662
|
};
|
|
662
663
|
|
|
663
664
|
var DropdownMenu = { Root: DropdownMenu$1, Item: DropdownMenuItem };
|
|
664
665
|
|
|
665
|
-
var style$
|
|
666
|
+
var style$7 = {"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"};
|
|
666
667
|
|
|
667
668
|
var Tooltip = function (_a) {
|
|
668
669
|
var children = _a.children, title = _a.title, description = _a.description;
|
|
669
|
-
return (jsx(RTooltip.Provider, { children: jsxs(RTooltip.Root, { children: [jsx(RTooltip.Trigger, { className: style$
|
|
670
|
+
return (jsx(RTooltip.Provider, { children: jsxs(RTooltip.Root, { children: [jsx(RTooltip.Trigger, { className: style$7.trigger, asChild: true, children: children }), jsx(RTooltip.Portal, { children: jsxs(RTooltip.Content, { className: style$7.content, sideOffset: 2, children: [jsx(SvgInfo, { className: style$7.icon, width: 20, height: 20 }), jsxs("div", { className: style$7.body, children: [jsx("span", { className: style$7.title, children: title }), description && jsx("span", { className: style$7.description, children: description })] }), jsx(RTooltip.Arrow, { className: style$7.arrow })] }) })] }) }));
|
|
670
671
|
};
|
|
671
672
|
|
|
672
673
|
var isEnter = function (e) { return e.key === "Enter"; };
|
|
@@ -712,7 +713,7 @@ var formatNumberWithCurrency = function (amount, currency) {
|
|
|
712
713
|
return "".concat(currency, " ").concat(formatNumber(amount, isDollarCurrency(currency) ? 2 : 6));
|
|
713
714
|
};
|
|
714
715
|
|
|
715
|
-
var style$
|
|
716
|
+
var style$6 = {"root":"investments-graph-module__root__-BKux","paddedWrapper":"investments-graph-module__paddedWrapper__afkOR","timeframeSelector":"investments-graph-module__timeframeSelector__7TkDU","timeFrameValue":"investments-graph-module__timeFrameValue__CQRqG"};
|
|
716
717
|
|
|
717
718
|
var Timeframes = {
|
|
718
719
|
month: "month",
|
|
@@ -781,8 +782,8 @@ var InvestmentGraph = function (_a) {
|
|
|
781
782
|
? ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][month]
|
|
782
783
|
: "";
|
|
783
784
|
};
|
|
784
|
-
return (jsxs(Stack, { className: style$
|
|
785
|
-
return jsx("button", { tabIndex: 0, onKeyDown: function (e) { return (isEnter(e) ? setTimeFrame(p) : null); }, className: style$
|
|
785
|
+
return (jsxs(Stack, { className: style$6.root, space: "m", children: [jsxs(Stack, { space: "none", children: [header && (jsx("div", { className: style$6.paddedWrapper, children: header })), jsx(Stack, { position: "horizontal-space", children: jsx("div", { className: clsx(style$6.timeframeSelector, style$6.paddedWrapper), children: periodOptions.map(function (p) {
|
|
786
|
+
return jsx("button", { tabIndex: 0, onKeyDown: function (e) { return (isEnter(e) ? setTimeFrame(p) : null); }, className: style$6.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);
|
|
786
787
|
}) }) })] }), 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
|
|
787
788
|
? (jsxs(Fragment, { children: [jsx("stop", { offset: off, stopColor: "var(--semantic-success)", stopOpacity: 1 }), jsx("stop", { offset: off, stopColor: "var(--semantic-error)", stopOpacity: 1 })] }))
|
|
788
789
|
: (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: {
|
|
@@ -797,14 +798,14 @@ var InvestmentGraph = function (_a) {
|
|
|
797
798
|
}, 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 })] }) })] }));
|
|
798
799
|
};
|
|
799
800
|
|
|
800
|
-
var style$
|
|
801
|
+
var style$5 = {"root":"investments-header-module__root__fxQmk","total":"investments-header-module__total__DrEq0","badge":"investments-header-module__badge__-aeBM"};
|
|
801
802
|
|
|
802
803
|
var InvestmentsHeader = function (_a) {
|
|
803
804
|
var currentTotalInvestmentValue = _a.currentTotalInvestmentValue, currentGainLossValue = _a.currentGainLossValue, currentGainLossPercentageValue = _a.currentGainLossPercentageValue;
|
|
804
805
|
var isNegativePercentage = currentGainLossPercentageValue < 0;
|
|
805
806
|
var dataGain = isNegativePercentage ? "negative" : "positive";
|
|
806
807
|
var triangle = isNegativePercentage ? jsx(SvgArrowDownRight, { "data-gain": "negative" }) : jsx(SvgArrowUpRight, { "data-gain": "positive" });
|
|
807
|
-
return (jsxs(Stack, { className: style$
|
|
808
|
+
return (jsxs(Stack, { className: style$5.root, space: "xs", children: [jsx("p", { className: style$5.total, children: "Total Investments" }), jsxs(Stack, { children: [jsx("h1", { children: formatNumberWithCurrency(currentTotalInvestmentValue) }), jsx(Badge, { status: isNegativePercentage ? "rejected" : "success", className: style$5.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)), "%)"] })] }) })] })] }));
|
|
808
809
|
};
|
|
809
810
|
|
|
810
811
|
var tableCustomStyles = {
|
|
@@ -850,13 +851,13 @@ var tableCustomStyles = {
|
|
|
850
851
|
},
|
|
851
852
|
};
|
|
852
853
|
|
|
853
|
-
var style$
|
|
854
|
+
var style$4 = {"tableWrapper":"table-module__tableWrapper__q2Fb1"};
|
|
854
855
|
|
|
855
856
|
var Table = function (_a) {
|
|
856
857
|
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"]);
|
|
857
858
|
return isLoading
|
|
858
859
|
? null
|
|
859
|
-
: (jsx("div", { "data-test": dataTest, className: style$
|
|
860
|
+
: (jsx("div", { "data-test": dataTest, className: style$4.tableWrapper, "data-is-row-clickable": !!onRowClicked, children: jsx(DataTable, __assign({ columns: columns, data: data, customStyles: tableCustomStyles, onRowClicked: onRowClicked }, rest)) }));
|
|
860
861
|
};
|
|
861
862
|
|
|
862
863
|
var useCanAnimate = function () {
|
|
@@ -870,16 +871,16 @@ var useCanAnimate = function () {
|
|
|
870
871
|
return canAnimate;
|
|
871
872
|
};
|
|
872
873
|
|
|
873
|
-
var style$
|
|
874
|
+
var style$3 = {"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","subTitle":"drawer-module__subTitle__ArBvv","closeButton":"drawer-module__closeButton__eP-nJ","body":"drawer-module__body__GIyF-","content":"drawer-module__content__bYS-4","actions":"drawer-module__actions__pUGTF"};
|
|
874
875
|
|
|
875
876
|
var Drawer = function (_a) {
|
|
876
877
|
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, subTitle = _a.subTitle;
|
|
877
878
|
var canAnimate = useCanAnimate();
|
|
878
|
-
var drawerContent = (jsxs("div", { className: clsx(style$
|
|
879
|
+
var drawerContent = (jsxs("div", { className: clsx(style$3.root, className), "data-is-open": isOpen, "data-can-animate": canAnimate, children: [jsx("button", { className: style$3.backdrop, tabIndex: 0, onClick: onClose, onKeyDown: function (e) { return (isEnter(e) ? onClose === null || onClose === void 0 ? void 0 : onClose() : null); } }), jsxs("div", { className: style$3.drawer, "data-is-large": isLarge, children: [jsxs("div", { className: style$3.header, children: [jsxs(Stack, { children: [jsx("h2", { className: style$3.title, children: title }), subTitle && jsx("p", { className: style$3.subTitle, children: subTitle })] }), jsx("button", { onClick: onClose, className: style$3.closeButton, type: "button", disabled: !onClose, children: jsx(SvgCross, { viewBox: "0 0 24 24" }) })] }), jsxs("div", { className: style$3.body, children: [jsx("div", { className: style$3.content, children: isOpen ? children : null }), actions && jsx("div", { className: style$3.actions, children: actions })] })] })] }));
|
|
879
880
|
return createPortal(drawerContent, document.body);
|
|
880
881
|
};
|
|
881
882
|
|
|
882
|
-
var style$
|
|
883
|
+
var style$2 = {"root":"alert-module__root__WGdLe","button":"alert-module__button__uNX69"};
|
|
883
884
|
|
|
884
885
|
var Alert = function (_a) {
|
|
885
886
|
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"]);
|
|
@@ -892,15 +893,45 @@ var Alert = function (_a) {
|
|
|
892
893
|
default: return jsx(SvgLoader, { viewBox: "0 0 24 24" });
|
|
893
894
|
}
|
|
894
895
|
}, [type]);
|
|
895
|
-
return (jsxs(Stack, __assign({ className: style$
|
|
896
|
+
return (jsxs(Stack, __assign({ className: style$2.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$2.button, variant: type, onClick: onClick, isInverted: true, size: "small", children: buttonText }))] })));
|
|
896
897
|
};
|
|
897
898
|
|
|
898
|
-
var style = {"root":"box-module__root__dZ-MR","icon":"box-module__icon__3dFXL"};
|
|
899
|
+
var style$1 = {"root":"box-module__root__dZ-MR","icon":"box-module__icon__3dFXL"};
|
|
899
900
|
|
|
900
901
|
var Box = function (_a) {
|
|
901
902
|
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
|
+
return (jsxs(Stack, { className: style$1.root, as: "dl", children: [jsx("dt", { children: title }), jsxs("dd", { children: [description, Icon && jsx(Icon, { className: style$1.icon, "data-icon-type": iconType, viewBox: "0 0 24 24" })] })] }));
|
|
904
|
+
};
|
|
905
|
+
|
|
906
|
+
var style = {"list":"tabs-module__list__Nuvl-","trigger":"tabs-module__trigger__qOk2r","content":"tabs-module__content__4w1tZ","counter":"tabs-module__counter__QkcJB"};
|
|
907
|
+
|
|
908
|
+
var Root = function (_a) {
|
|
909
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
910
|
+
return (jsx(RTabs.Root, __assign({ className: style.root }, rest, { children: children })));
|
|
911
|
+
};
|
|
912
|
+
var List = function (_a) {
|
|
913
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
914
|
+
return (jsx(RTabs.List, __assign({ className: style.list }, rest, { children: children })));
|
|
915
|
+
};
|
|
916
|
+
var Trigger = function (_a) {
|
|
917
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
918
|
+
return (jsx(RTabs.Trigger, __assign({ className: style.trigger }, rest, { children: children })));
|
|
919
|
+
};
|
|
920
|
+
var TriggerWithCounter = function (_a) {
|
|
921
|
+
var children = _a.children, counter = _a.counter, rest = __rest(_a, ["children", "counter"]);
|
|
922
|
+
return (jsx(RTabs.Trigger, __assign({ className: style.trigger }, rest, { children: jsxs(Stack, { space: "m", position: "horizontal", children: [children, jsx("span", { className: style.counter, children: counter })] }) })));
|
|
923
|
+
};
|
|
924
|
+
var Content = function (_a) {
|
|
925
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
926
|
+
return (jsx(RTabs.Content, __assign({ className: style.content }, rest, { children: children })));
|
|
927
|
+
};
|
|
928
|
+
var Tabs = {
|
|
929
|
+
Root: Root,
|
|
930
|
+
List: List,
|
|
931
|
+
Trigger: Trigger,
|
|
932
|
+
Content: Content,
|
|
933
|
+
TriggerWithCounter: TriggerWithCounter,
|
|
903
934
|
};
|
|
904
935
|
|
|
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 };
|
|
936
|
+
export { Accordion, Alert, Badge, BadgeStatuses, Box, Button, Checkbox, Clipboard, ConfirmModal, Container, Drawer, DropdownMenu, FormSelect, InfoModal, InvestmentGraph, InvestmentsHeader, List$1 as List, ListItem, Loader, Modal, OtpModal, PasswordField, Select, SpinnedIcon, Stack, Step, Stepper, Table, Tabs, TextField, Timeframes, Tooltip, ValidatePasswordField, periodOptions };
|
|
906
937
|
//# sourceMappingURL=index.esm.js.map
|