@kaio-xyz/design-system 1.1.32 → 1.1.34
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 +77 -67
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +15 -6
- package/dist/index.esm.js +77 -68
- 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,16 +321,17 @@ var SvgArrowUpRight = function SvgArrowUpRight(props) {
|
|
|
321
321
|
})));
|
|
322
322
|
};
|
|
323
323
|
|
|
324
|
-
var style$
|
|
324
|
+
var style$u = {"root":"stack-module__root__AqSLk"};
|
|
325
325
|
|
|
326
326
|
var Stack = function (_a) {
|
|
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
|
-
|
|
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, as = _a.as, rest = __rest(_a, ["children", "space", "className", "position", "fullHeight", "fullWidth", "dataTest", "dataAlignItems", "dataCapitalize", "dataMarginTop", "dataMarginBottom", "dataMarginLeft", "dataPaddingBottom", "as"]);
|
|
328
|
+
var Tag = as || "div";
|
|
329
|
+
return (jsxRuntime.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 })));
|
|
329
330
|
};
|
|
330
331
|
|
|
331
332
|
var baseStyle = {"root":"badge-base-module__root__oUZlm"};
|
|
332
333
|
|
|
333
|
-
var style$
|
|
334
|
+
var style$t = {"root":"badge-module__root__rXpaz"};
|
|
334
335
|
|
|
335
336
|
var BadgeStatuses = {
|
|
336
337
|
success: "success",
|
|
@@ -350,16 +351,16 @@ var Badge = function (_a) {
|
|
|
350
351
|
default: return jsxRuntime.jsx(SvgCircleDashed, {});
|
|
351
352
|
}
|
|
352
353
|
}, [status]);
|
|
353
|
-
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$
|
|
354
|
+
return (jsxRuntime.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: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, children] }) })));
|
|
354
355
|
};
|
|
355
356
|
|
|
356
|
-
var style$
|
|
357
|
+
var style$s = {"root":"button-module__root__CDCDX"};
|
|
357
358
|
|
|
358
|
-
var style$
|
|
359
|
+
var style$r = {"root":"spinned-icon-module__root__xchkj"};
|
|
359
360
|
|
|
360
361
|
var SpinnedIcon = function (_a) {
|
|
361
362
|
var _b = _a.size, size = _b === void 0 ? 22 : _b, _c = _a.duration, duration = _c === void 0 ? 1 : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.icon, Icon = _e === void 0 ? SvgLoader : _e, rest = __rest(_a, ["size", "duration", "className", "icon"]);
|
|
362
|
-
return (jsxRuntime.jsx("div", { className: clsx(style$
|
|
363
|
+
return (jsxRuntime.jsx("div", { className: clsx(style$r.root, className), style: {
|
|
363
364
|
width: size,
|
|
364
365
|
height: size,
|
|
365
366
|
animationDuration: "".concat(duration, "s"),
|
|
@@ -373,19 +374,19 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
373
374
|
var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps, { viewBox: "0 0 24 24" }));
|
|
374
375
|
var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
|
|
375
376
|
var iconChild = loadingIcon || baseIcon || null;
|
|
376
|
-
var classes = clsx(style$
|
|
377
|
+
var classes = clsx(style$s.root, props.className);
|
|
377
378
|
return (isAnchor(props) ? (jsxRuntime.jsx("a", __assign({ "aria-disabled": props.disabled, ref: ref }, props, { className: classes, children: props.children }))) : (jsxRuntime.jsx("button", __assign({ "aria-disabled": props.disabled, ref: ref, type: "button" }, props, { className: classes, "data-type": variant, "data-size": size, "data-full-width": fullWidth, "data-inverted": isInverted, disabled: props.disabled || isLoading, "data-is-loading": isLoading, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconChild, isLoading ? "Loading" : props.children] }) }))));
|
|
378
379
|
});
|
|
379
380
|
Button.displayName = "Button";
|
|
380
381
|
|
|
381
|
-
var style$
|
|
382
|
+
var style$q = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
|
|
382
383
|
|
|
383
384
|
var Hint = function (_a) {
|
|
384
385
|
var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
|
|
385
|
-
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$
|
|
386
|
+
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$q.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$q.children, children: children })] })));
|
|
386
387
|
};
|
|
387
388
|
|
|
388
|
-
var style$
|
|
389
|
+
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"};
|
|
389
390
|
|
|
390
391
|
var TextField = React.forwardRef(function (_a, ref) {
|
|
391
392
|
var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, invalid = _a.invalid, button = _a.button, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.noPadding, noPadding = _d === void 0 ? false : _d, _e = _a.floatingLabel, floatingLabel = _e === void 0 ? true : _e, value = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "invalid", "button", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur"]);
|
|
@@ -422,28 +423,28 @@ var TextField = React.forwardRef(function (_a, ref) {
|
|
|
422
423
|
setHasValue(e.target.value.length > 0);
|
|
423
424
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
424
425
|
};
|
|
425
|
-
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
426
|
+
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$p.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$p.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$p.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$p.fieldWrapper, children: [jsxRuntime.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 && jsxRuntime.jsx(Hint, { kind: "error", className: style$p.hint, children: hint })] }) }));
|
|
426
427
|
});
|
|
427
428
|
TextField.displayName = "TextField";
|
|
428
429
|
|
|
429
|
-
var style$
|
|
430
|
+
var style$o = {"container":"container-module__container__CAxQw"};
|
|
430
431
|
|
|
431
432
|
var Container = function (_a) {
|
|
432
433
|
var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
|
|
433
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$
|
|
434
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$o.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
434
435
|
};
|
|
435
436
|
|
|
436
|
-
var style$
|
|
437
|
+
var style$n = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
|
|
437
438
|
|
|
438
439
|
var PasswordField = React.forwardRef(function (_a, ref) {
|
|
439
440
|
var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
|
|
440
441
|
var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
|
|
441
|
-
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$
|
|
442
|
-
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$
|
|
442
|
+
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$n.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
|
|
443
|
+
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$n.field })));
|
|
443
444
|
});
|
|
444
445
|
PasswordField.displayName = "PasswordField";
|
|
445
446
|
|
|
446
|
-
var style$
|
|
447
|
+
var style$m = {"validator":"validate-password-field-module__validator__Do-6w"};
|
|
447
448
|
|
|
448
449
|
var rules = {
|
|
449
450
|
length: /^.{8,}$/,
|
|
@@ -468,19 +469,19 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
|
|
|
468
469
|
React.useEffect(function () {
|
|
469
470
|
setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
|
|
470
471
|
}, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
|
|
471
|
-
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$
|
|
472
|
+
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$m.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
|
|
472
473
|
return (jsxRuntime.jsxs(Stack, { space: "m", children: [jsxRuntime.jsx(PasswordField, __assign({ onChange: onHandleChange, ref: ref }, rest)), jsxRuntime.jsxs(Stack, { children: [getValidator(isLenghtCheckOk, "At least 8 characters"), getValidator(isCaseCheckOk, "Include uppercase & lowercase letters"), getValidator(isNumberCheckOk, "Include at least one number"), getValidator(isSpecialCheckOk, "Include at least one special character (allowed: @ $ ! % * ? & _ #)")] })] }));
|
|
473
474
|
});
|
|
474
475
|
ValidatePasswordField.displayName = "ValidatePasswordField";
|
|
475
476
|
|
|
476
|
-
var style$
|
|
477
|
+
var style$l = {"root":"label-module__root__34bJr"};
|
|
477
478
|
|
|
478
479
|
var Label = function (_a) {
|
|
479
480
|
var id = _a.id, label = _a.label, className = _a.className, _b = _a.hasMargin, hasMargin = _b === void 0 ? true : _b, _c = _a.hasHalfMargin, hasHalfMargin = _c === void 0 ? false : _c, _d = _a.hasCursorPointer, hasCursorPointer = _d === void 0 ? false : _d;
|
|
480
|
-
return (jsxRuntime.jsx("label", { className: clsx(style$
|
|
481
|
+
return (jsxRuntime.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 }));
|
|
481
482
|
};
|
|
482
483
|
|
|
483
|
-
var style$
|
|
484
|
+
var style$k = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
|
|
484
485
|
|
|
485
486
|
var IconAndLabel = function (_a) {
|
|
486
487
|
var children = _a.children, Icon = _a.icon;
|
|
@@ -501,7 +502,7 @@ var CustomSingleValue = function (_a) {
|
|
|
501
502
|
};
|
|
502
503
|
var Select = function (_a) {
|
|
503
504
|
var id = _a.id, label = _a.label, dataTest = _a.dataTest, isDisabled = _a.isDisabled, className = _a.className, error = _a.error, customComponents = _a.components, rest = __rest(_a, ["id", "label", "dataTest", "isDisabled", "className", "error", "components"]);
|
|
504
|
-
return (jsxRuntime.jsxs("div", { className: clsx(style$
|
|
505
|
+
return (jsxRuntime.jsxs("div", { className: clsx(style$k.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$k.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$k.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$k.hint, children: error })] })] }));
|
|
505
506
|
};
|
|
506
507
|
Select.displayName = "Select";
|
|
507
508
|
|
|
@@ -514,14 +515,14 @@ var FormSelect = function (_a) {
|
|
|
514
515
|
};
|
|
515
516
|
FormSelect.displayName = "FormSelect";
|
|
516
517
|
|
|
517
|
-
var style$
|
|
518
|
+
var style$j = {"root":"loader-module__root__qnInQ"};
|
|
518
519
|
|
|
519
520
|
var Loader = function (_a) {
|
|
520
521
|
var text = _a.text, _b = _a.fullPage, fullPage = _b === void 0 ? true : _b, _c = _a.isLightOverlay, isLightOverlay = _c === void 0 ? false : _c, children = _a.children;
|
|
521
|
-
return (jsxRuntime.jsx("div", { className: style$
|
|
522
|
+
return (jsxRuntime.jsx("div", { className: style$j.root, "data-full-page": fullPage, "data-is-light-overlay": isLightOverlay, children: jsxRuntime.jsxs(Stack, { dataAlignItems: "center", children: [jsxRuntime.jsx(SpinnedIcon, { size: 50 }), text && jsxRuntime.jsx("p", { children: text }), children] }) }));
|
|
522
523
|
};
|
|
523
524
|
|
|
524
|
-
var style$
|
|
525
|
+
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"};
|
|
525
526
|
|
|
526
527
|
var Checkbox = function (_a) {
|
|
527
528
|
var className = _a.className, disabled = _a.disabled, id = _a.id, label = _a.label, _b = _a.verticalAlign, verticalAlign = _b === void 0 ? "center" : _b, onChange = _a.onChange, dataTest = _a.dataTest, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.variant, variant = _d === void 0 ? "primary" : _d, _e = _a.indeterminate, indeterminate = _e === void 0 ? false : _e, checked = _a.checked, attributes = __rest(_a, ["className", "disabled", "id", "label", "verticalAlign", "onChange", "dataTest", "size", "variant", "indeterminate", "checked"]);
|
|
@@ -534,11 +535,11 @@ var Checkbox = function (_a) {
|
|
|
534
535
|
var dynamicStyle = {
|
|
535
536
|
"--vAlign": verticalAlign,
|
|
536
537
|
};
|
|
537
|
-
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$
|
|
538
|
+
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$i.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$i.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$i.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$i.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$i.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$i.label, children: label })] }));
|
|
538
539
|
};
|
|
539
540
|
Checkbox.displayName = "Checkbox";
|
|
540
541
|
|
|
541
|
-
var style$
|
|
542
|
+
var style$h = {"root":"clipboard-module__root__wVZhy"};
|
|
542
543
|
|
|
543
544
|
var trimString = function (str, noOfChars) {
|
|
544
545
|
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, { viewBox: "0 0 24 24" }) : jsxRuntime.jsx(SvgClipboard, { viewBox: "0 0 24 24" });
|
|
565
|
-
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$
|
|
566
|
+
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$h.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, "data-test": dataTest, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [jsxRuntime.jsx("span", { children: text }), icon] }) }));
|
|
566
567
|
};
|
|
567
568
|
|
|
568
|
-
var style$
|
|
569
|
+
var style$g = {"root":"stepper-module__root__hgDss"};
|
|
569
570
|
|
|
570
571
|
var Stepper = function (_a) {
|
|
571
572
|
var children = _a.children, dataTest = _a.dataTest, className = _a.className;
|
|
572
|
-
return (jsxRuntime.jsx("ul", { className: clsx(style$
|
|
573
|
+
return (jsxRuntime.jsx("ul", { className: clsx(style$g.root, className), "data-test": dataTest, children: children }));
|
|
573
574
|
};
|
|
574
575
|
|
|
575
|
-
var style$
|
|
576
|
+
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"};
|
|
576
577
|
|
|
577
578
|
var Step = function (_a) {
|
|
578
579
|
var key = _a.key, label = _a.label, dataTest = _a.dataTest, _b = _a.iconSize, iconSize = _b === void 0 ? 16 : _b, _c = _a.isCompleted, isCompleted = _c === void 0 ? false : _c, _d = _a.isCurrent, isCurrent = _d === void 0 ? false : _d;
|
|
579
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$f.checkIcon, viewBox: "0 0 24 24" });
|
|
583
|
+
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$f.loadingIcon });
|
|
584
|
+
default: return jsxRuntime.jsx("span", { className: style$f.emptyIcon });
|
|
584
585
|
}
|
|
585
586
|
}, [isCompleted, isCurrent]);
|
|
586
|
-
return (jsxRuntime.jsx("li", { className: style$
|
|
587
|
+
return (jsxRuntime.jsx("li", { className: style$f.root, "data-is-current": isCurrent, "data-test": dataTest, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$f.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$f.label, children: label })] }) }, key));
|
|
587
588
|
};
|
|
588
589
|
|
|
589
|
-
var style$
|
|
590
|
+
var style$e = {"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$e.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
|
|
594
595
|
};
|
|
595
596
|
|
|
596
|
-
var style$
|
|
597
|
+
var style$d = {"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$d.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style$d.label, children: label }), jsxRuntime.jsx("span", { className: style$d.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$c = {"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$c.content, className), ref: forwardedRef }, rest, { children: jsxRuntime.jsx("div", { className: style$c.childrenContainer, children: jsxRuntime.jsx("div", { className: style$c.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
|
|
613
614
|
});
|
|
614
615
|
AccordionContent.displayName = "AccordionContent";
|
|
615
616
|
|
|
616
|
-
var style$
|
|
617
|
+
var style$b = {"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$b.header, children: jsxRuntime.jsx(RAccordion__namespace.Trigger, __assign({ className: clsx(style$b.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$a = {"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$a.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$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"};
|
|
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$9.modal, className), "data-test": "Modal__Div__content", "data-visible": visible, "data-is-not-closable": !onClose }, attributes, { children: [jsxRuntime.jsx("dialog", { className: style$9.backdrop }), jsxRuntime.jsx("div", { className: style$9.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxRuntime.jsxs("div", { className: style$9.bodyWrapper, children: __spreadArray([title && (jsxRuntime.jsxs("div", { className: style$9.header, children: [jsxRuntime.jsx("h2", { id: id, children: title }), jsxRuntime.jsx(SvgCross, { "data-icon": true, onClick: onClose })] })), jsxRuntime.jsx("div", { className: style$9.body, children: children })], actions.map(function (i, idx) { return jsxRuntime.jsx("div", { className: style$9.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$8 = {"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, { viewBox: "0 0 24 24" }) : jsxRuntime.jsx(Button, { icon: Icon, variant: variant, children: text });
|
|
675
|
-
return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$
|
|
676
|
+
return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$8.trigger, disabled: disabled, children: body ? body : defaultBody })), jsxRuntime.jsx(RDropdownMenu__namespace.Portal, { children: jsxRuntime.jsxs(RDropdownMenu__namespace.Content, { className: style$8.content, sideOffset: 5, children: [children, jsxRuntime.jsx(RDropdownMenu__namespace.Arrow, { className: style$8.arrow })] }) })] }));
|
|
676
677
|
};
|
|
677
678
|
|
|
678
|
-
var style$
|
|
679
|
+
var style$7 = {"root":"dropdown-menu-item-module__root__zs510"};
|
|
679
680
|
|
|
680
681
|
var DropdownMenuItem = function (_a) {
|
|
681
682
|
var children = _a.children, disabled = _a.disabled, onClick = _a.onClick, rest = __rest(_a, ["children", "disabled", "onClick"]);
|
|
682
|
-
return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$
|
|
683
|
+
return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$7.root, onClick: !disabled ? onClick : undefined, 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$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"};
|
|
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$6.trigger, asChild: true, children: children }), jsxRuntime.jsx(RTooltip__namespace.Portal, { children: jsxRuntime.jsxs(RTooltip__namespace.Content, { className: style$6.content, sideOffset: 2, children: [jsxRuntime.jsx(SvgInfo, { className: style$6.icon, width: 20, height: 20 }), jsxRuntime.jsxs("div", { className: style$6.body, children: [jsxRuntime.jsx("span", { className: style$6.title, children: title }), description && jsxRuntime.jsx("span", { className: style$6.description, children: description })] }), jsxRuntime.jsx(RTooltip__namespace.Arrow, { className: style$6.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$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"};
|
|
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$5.root, space: "m", children: [jsxRuntime.jsxs(Stack, { space: "none", children: [header && (jsxRuntime.jsx("div", { className: style$5.paddedWrapper, children: header })), jsxRuntime.jsx(Stack, { position: "horizontal-space", children: jsxRuntime.jsx("div", { className: clsx(style$5.timeframeSelector, style$5.paddedWrapper), children: periodOptions.map(function (p) {
|
|
808
|
+
return jsxRuntime.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);
|
|
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-70)", fillOpacity: 1, fill: "url(#splitColor)", baseValue: dataMin })] }) })] }));
|
|
820
821
|
};
|
|
821
822
|
|
|
822
|
-
var style$
|
|
823
|
+
var style$4 = {"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$4.root, space: "xs", children: [jsxRuntime.jsx("p", { className: style$4.total, children: "Total Investments" }), jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx("h1", { children: formatNumberWithCurrency(currentTotalInvestmentValue) }), jsxRuntime.jsx(Badge, { status: isNegativePercentage ? "rejected" : "success", className: style$4.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 = {
|
|
@@ -848,7 +849,7 @@ var tableCustomStyles = {
|
|
|
848
849
|
style: {
|
|
849
850
|
color: "var(--neutral-45)",
|
|
850
851
|
fontWeight: 500,
|
|
851
|
-
fontSize: "
|
|
852
|
+
fontSize: "var(--font-size-14-px)",
|
|
852
853
|
},
|
|
853
854
|
},
|
|
854
855
|
rows: {
|
|
@@ -860,6 +861,7 @@ var tableCustomStyles = {
|
|
|
860
861
|
cells: {
|
|
861
862
|
style: {
|
|
862
863
|
padding: "16px",
|
|
864
|
+
fontSize: "var(--font-size-16-px)",
|
|
863
865
|
},
|
|
864
866
|
},
|
|
865
867
|
pagination: {
|
|
@@ -871,13 +873,13 @@ var tableCustomStyles = {
|
|
|
871
873
|
},
|
|
872
874
|
};
|
|
873
875
|
|
|
874
|
-
var style$
|
|
876
|
+
var style$3 = {"tableWrapper":"table-module__tableWrapper__q2Fb1"};
|
|
875
877
|
|
|
876
878
|
var Table = function (_a) {
|
|
877
879
|
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
880
|
return isLoading
|
|
879
881
|
? null
|
|
880
|
-
: (jsxRuntime.jsx("div", { "data-test": dataTest, className: style$
|
|
882
|
+
: (jsxRuntime.jsx("div", { "data-test": dataTest, className: style$3.tableWrapper, "data-is-row-clickable": !!onRowClicked, children: jsxRuntime.jsx(DataTable, __assign({ columns: columns, data: data, customStyles: tableCustomStyles, onRowClicked: onRowClicked }, rest)) }));
|
|
881
883
|
};
|
|
882
884
|
|
|
883
885
|
var useCanAnimate = function () {
|
|
@@ -891,16 +893,16 @@ var useCanAnimate = function () {
|
|
|
891
893
|
return canAnimate;
|
|
892
894
|
};
|
|
893
895
|
|
|
894
|
-
var style$
|
|
896
|
+
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"};
|
|
895
897
|
|
|
896
898
|
var Drawer = function (_a) {
|
|
897
899
|
var isOpen = _a.isOpen, title = _a.title, children = _a.children, className = _a.className, actions = _a.actions, onClose = _a.onClose, _b = _a.isLarge, isLarge = _b === void 0 ? false : _b;
|
|
898
900
|
var canAnimate = useCanAnimate();
|
|
899
|
-
var drawerContent = (jsxRuntime.jsxs("div", { className: clsx(style$
|
|
901
|
+
var drawerContent = (jsxRuntime.jsxs("div", { className: clsx(style$2.root, className), "data-is-open": isOpen, "data-can-animate": canAnimate, children: [jsxRuntime.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); } }), jsxRuntime.jsxs("div", { className: style$2.drawer, "data-is-large": isLarge, children: [jsxRuntime.jsxs("div", { className: style$2.header, children: [jsxRuntime.jsx("h2", { className: style$2.title, children: title }), jsxRuntime.jsx("button", { onClick: onClose, className: style$2.closeButton, type: "button", disabled: !onClose, children: jsxRuntime.jsx(SvgCross, {}) })] }), jsxRuntime.jsxs("div", { className: style$2.body, children: [jsxRuntime.jsx("div", { className: style$2.content, children: isOpen ? children : null }), actions && jsxRuntime.jsx("div", { className: style$2.actions, children: actions })] })] })] }));
|
|
900
902
|
return reactDom.createPortal(drawerContent, document.body);
|
|
901
903
|
};
|
|
902
904
|
|
|
903
|
-
var style = {"root":"alert-module__root__WGdLe","button":"alert-module__button__uNX69"};
|
|
905
|
+
var style$1 = {"root":"alert-module__root__WGdLe","button":"alert-module__button__uNX69"};
|
|
904
906
|
|
|
905
907
|
var Alert = function (_a) {
|
|
906
908
|
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"]);
|
|
@@ -913,13 +915,21 @@ var Alert = function (_a) {
|
|
|
913
915
|
default: return jsxRuntime.jsx(SvgLoader, { viewBox: "0 0 24 24" });
|
|
914
916
|
}
|
|
915
917
|
}, [type]);
|
|
916
|
-
return (jsxRuntime.jsxs(Stack, __assign({ className: style.root, position: description ? "vertical" : "horizontal-space", space: "m", "data-type": type, "data-test": dataTest }, rest, { children: [jsxRuntime.jsxs(Stack, { position: "horizontal", children: [icon, title] }), description, buttonText && (jsxRuntime.jsx(Button, { className: style.button, variant: type, onClick: onClick, isInverted: true, size: "small", children: buttonText }))] })));
|
|
918
|
+
return (jsxRuntime.jsxs(Stack, __assign({ className: style$1.root, position: description ? "vertical" : "horizontal-space", space: "m", "data-type": type, "data-test": dataTest }, rest, { children: [jsxRuntime.jsxs(Stack, { position: "horizontal", children: [icon, title] }), description, buttonText && (jsxRuntime.jsx(Button, { className: style$1.button, variant: type, onClick: onClick, isInverted: true, size: "small", children: buttonText }))] })));
|
|
919
|
+
};
|
|
920
|
+
|
|
921
|
+
var style = {"root":"box-module__root__dZ-MR","icon":"box-module__icon__3dFXL"};
|
|
922
|
+
|
|
923
|
+
var Box = function (_a) {
|
|
924
|
+
var title = _a.title, description = _a.description, Icon = _a.icon, iconType = _a.iconType;
|
|
925
|
+
return (jsxRuntime.jsxs(Stack, { className: style.root, as: "dl", children: [jsxRuntime.jsx("dt", { children: title }), jsxRuntime.jsxs("dd", { children: [description, Icon && jsxRuntime.jsx(Icon, { className: style.icon, "data-icon-type": iconType, viewBox: "0 0 24 24" })] })] }));
|
|
917
926
|
};
|
|
918
927
|
|
|
919
928
|
exports.Accordion = Accordion;
|
|
920
929
|
exports.Alert = Alert;
|
|
921
930
|
exports.Badge = Badge;
|
|
922
931
|
exports.BadgeStatuses = BadgeStatuses;
|
|
932
|
+
exports.Box = Box;
|
|
923
933
|
exports.Button = Button;
|
|
924
934
|
exports.Checkbox = Checkbox;
|
|
925
935
|
exports.Clipboard = Clipboard;
|