@kaio-xyz/design-system 1.1.2 → 1.1.5
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/asset/icons/index.d.ts +1 -0
- package/dist/components/atoms/button/index.d.ts +1 -1
- package/dist/components/atoms/dropdown-menu/dropdown-menu-item/dropdown-menu-item.d.ts +7 -0
- package/dist/components/atoms/dropdown-menu/dropdown-menu-item/index.d.ts +1 -0
- package/dist/components/atoms/dropdown-menu/dropdown-menu.d.ts +11 -0
- package/dist/components/atoms/dropdown-menu/dropdown-menu.stories.d.ts +19 -0
- package/dist/components/atoms/dropdown-menu/index.d.ts +17 -0
- package/dist/components/atoms/modal/index.d.ts +1 -0
- package/dist/components/atoms/modal/modal.d.ts +13 -0
- package/dist/components/atoms/modal/modal.stories.d.ts +6 -0
- package/dist/components/molecules/modal/confirm-modal/confirm-modal.d.ts +11 -0
- package/dist/components/molecules/modal/confirm-modal/confirm-modal.stories.d.ts +6 -0
- package/dist/components/molecules/modal/confirm-modal/index.d.ts +1 -0
- package/dist/components/molecules/modal/index.d.ts +3 -0
- package/dist/components/molecules/modal/info-modal/index.d.ts +1 -0
- package/dist/components/molecules/modal/info-modal/info-modal.d.ts +6 -0
- package/dist/components/molecules/modal/otp-modal/index.d.ts +1 -0
- package/dist/components/molecules/modal/otp-modal/otp-modal.d.ts +8 -0
- package/dist/index.cjs.js +115 -50
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +112 -51
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +2 -1
|
@@ -11,3 +11,4 @@ export { default as ChevronGrabberIcon } from "./chevron-grabber.svg";
|
|
|
11
11
|
export { default as MinusIcon } from "./minus.svg";
|
|
12
12
|
export { default as ClipBoardIcon } from "./clipboard.svg";
|
|
13
13
|
export { default as LoadingCircleIcon } from "./loading-circle.svg";
|
|
14
|
+
export { default as UserIcon } from "./user.svg";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Button, type ButtonProps } from "./button";
|
|
1
|
+
export { Button, type ButtonProps, type CommonButtonProps } from "./button";
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { PropsWithChildren } from "react";
|
|
2
|
+
type DropdownMenuItemProps = PropsWithChildren & {
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
onClick: () => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const DropdownMenuItem: ({ children, disabled, ...rest }: DropdownMenuItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DropdownMenuItem } from "./dropdown-menu-item";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React, { PropsWithChildren } from "react";
|
|
2
|
+
import { CommonButtonProps } from "@/components/atoms/button";
|
|
3
|
+
type DropdownMenuProps = PropsWithChildren & {
|
|
4
|
+
text?: string;
|
|
5
|
+
icon?: SvgIcon;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
body?: React.ReactNode;
|
|
8
|
+
variant?: CommonButtonProps["variant"];
|
|
9
|
+
};
|
|
10
|
+
export declare const DropdownMenu: ({ text, children, icon: Icon, disabled, body, variant, ...rest }: DropdownMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: ({ text, children, icon: Icon, disabled, body, variant, ...rest }: {
|
|
5
|
+
children?: import("react").ReactNode | undefined;
|
|
6
|
+
} & {
|
|
7
|
+
text?: string;
|
|
8
|
+
icon?: SvgIcon;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
body?: React.ReactNode;
|
|
11
|
+
variant?: import("../button").CommonButtonProps["variant"];
|
|
12
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
tags: string[];
|
|
14
|
+
};
|
|
15
|
+
export default meta;
|
|
16
|
+
type Story = StoryObj<typeof meta>;
|
|
17
|
+
export declare const Default: Story;
|
|
18
|
+
export declare const WithIcon: Story;
|
|
19
|
+
export declare const Custom: Story;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export declare const DropdownMenu: {
|
|
2
|
+
Root: ({ text, children, icon: Icon, disabled, body, variant, ...rest }: {
|
|
3
|
+
children?: import("react").ReactNode | undefined;
|
|
4
|
+
} & {
|
|
5
|
+
text?: string;
|
|
6
|
+
icon?: SvgIcon;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
body?: React.ReactNode;
|
|
9
|
+
variant?: import("../button").CommonButtonProps["variant"];
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
Item: ({ children, disabled, ...rest }: {
|
|
12
|
+
children?: import("react").ReactNode | undefined;
|
|
13
|
+
} & {
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
onClick: () => void;
|
|
16
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Modal, type ModalProps } from "./modal";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { HTMLAttributes, PropsWithChildren, ReactNode } from "react";
|
|
2
|
+
export type ModalProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
|
|
3
|
+
id?: string;
|
|
4
|
+
visible?: boolean;
|
|
5
|
+
title?: string;
|
|
6
|
+
actions?: ReactNode[];
|
|
7
|
+
size?: "default" | "small" | "medium" | "large";
|
|
8
|
+
isFullWidth?: boolean;
|
|
9
|
+
isScrollable?: boolean;
|
|
10
|
+
onClose?: () => void;
|
|
11
|
+
};
|
|
12
|
+
declare const Modal: ({ visible, ...props }: ModalProps) => import("react").ReactPortal | null;
|
|
13
|
+
export default Modal;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ModalProps } from "@/components/atoms/modal";
|
|
2
|
+
export type ConfirmModalProps = Omit<ModalProps, "actions"> & {
|
|
3
|
+
isLoading?: boolean;
|
|
4
|
+
cancelDataTest: string;
|
|
5
|
+
confirmDataTest: string;
|
|
6
|
+
isConfirmDisabled?: boolean;
|
|
7
|
+
confirmText?: string;
|
|
8
|
+
cancelText?: string;
|
|
9
|
+
onConfirmClick: () => void;
|
|
10
|
+
};
|
|
11
|
+
export declare const ConfirmModal: ({ children, isLoading, cancelDataTest, confirmDataTest, isConfirmDisabled, confirmText, cancelText, onClose, onConfirmClick, ...props }: ConfirmModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ConfirmModal, type ConfirmModalProps } from "./confirm-modal";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { InfoModal } from "./info-modal";
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ModalProps } from '@/components/atoms/modal';
|
|
2
|
+
export type ConfirmModalProps = Omit<ModalProps, "actions"> & {
|
|
3
|
+
acceptDataTest: string;
|
|
4
|
+
acceptText?: string;
|
|
5
|
+
};
|
|
6
|
+
export declare const InfoModal: ({ children, acceptDataTest, acceptText, onClose, ...props }: ConfirmModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { OtpModal } from "./otp-modal";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
import { ConfirmModalProps } from '../confirm-modal';
|
|
3
|
+
type OtpModalProps = Omit<ConfirmModalProps, "cancelDataTest" | "confirmDataTest" | "title"> & {
|
|
4
|
+
code: string;
|
|
5
|
+
setCode: Dispatch<SetStateAction<string>>;
|
|
6
|
+
};
|
|
7
|
+
export declare const OtpModal: ({ code, setCode, onConfirmClick, isLoading, ...rest }: OtpModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
package/dist/index.cjs.js
CHANGED
|
@@ -6,6 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var ReactSelect = require('react-select');
|
|
7
7
|
var reactHookForm = require('react-hook-form');
|
|
8
8
|
var RAccordion = require('@radix-ui/react-accordion');
|
|
9
|
+
var reactDom = require('react-dom');
|
|
9
10
|
|
|
10
11
|
function _interopNamespaceDefault(e) {
|
|
11
12
|
var n = Object.create(null);
|
|
@@ -67,35 +68,59 @@ function __rest(s, e) {
|
|
|
67
68
|
return t;
|
|
68
69
|
}
|
|
69
70
|
|
|
71
|
+
function __spreadArray(to, from, pack) {
|
|
72
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
73
|
+
if (ar || !(i in from)) {
|
|
74
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
75
|
+
ar[i] = from[i];
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
79
|
+
}
|
|
80
|
+
|
|
70
81
|
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
71
82
|
var e = new Error(message);
|
|
72
83
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
73
84
|
};
|
|
74
85
|
|
|
86
|
+
var _path$c;
|
|
87
|
+
function _extends$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
|
|
88
|
+
var SvgCheck = function SvgCheck(props) {
|
|
89
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
|
|
90
|
+
width: "1em",
|
|
91
|
+
height: "1em",
|
|
92
|
+
fill: "none",
|
|
93
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
94
|
+
}, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
|
|
95
|
+
d: "M20.6474 3.30281C20.8943 2.97025 21.3647 2.90067 21.6972 3.14754C22.0298 3.39444 22.0994 3.86477 21.8525 4.19734L9.60251 20.6973C9.48001 20.8623 9.29478 20.9693 9.09079 20.9942C8.88673 21.0191 8.68101 20.959 8.52244 20.8282L2.27244 15.672C1.95326 15.4083 1.90836 14.9357 2.17185 14.6163C2.43551 14.2971 2.90813 14.2522 3.22751 14.5157L8.86716 19.169L20.6474 3.30281Z",
|
|
96
|
+
fill: "#98989D"
|
|
97
|
+
})));
|
|
98
|
+
};
|
|
99
|
+
|
|
75
100
|
var _path$b;
|
|
76
101
|
function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
|
|
77
|
-
var
|
|
102
|
+
var SvgCircleDashed = function SvgCircleDashed(props) {
|
|
78
103
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
|
|
79
104
|
width: "1em",
|
|
80
105
|
height: "1em",
|
|
81
106
|
fill: "none",
|
|
82
107
|
xmlns: "http://www.w3.org/2000/svg"
|
|
83
108
|
}, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
|
|
84
|
-
d: "
|
|
109
|
+
d: "M13.4258 20.3809C13.8341 20.3122 14.2211 20.5878 14.29 20.9961C14.3588 21.4044 14.0832 21.7914 13.6748 21.8604C13.1298 21.9523 12.5702 22 12 22C11.4298 22 10.8702 21.9523 10.3252 21.8604C9.91684 21.7914 9.6412 21.4044 9.70996 20.9961C9.77886 20.5878 10.1659 20.3122 10.5742 20.3809C11.0372 20.459 11.5137 20.5 12 20.5C12.4863 20.5 12.9628 20.459 13.4258 20.3809ZM4.02051 16.7422C4.35812 16.5022 4.82643 16.5813 5.06641 16.9189C5.62015 17.6979 6.30206 18.3799 7.08105 18.9336C7.41867 19.1736 7.49779 19.6419 7.25781 19.9795C7.01785 20.3166 6.55031 20.3957 6.21289 20.1562C5.297 19.5052 4.49477 18.703 3.84375 17.7871C3.6043 17.4497 3.68345 16.9821 4.02051 16.7422ZM18.9336 16.9189C19.1736 16.5813 19.6419 16.5022 19.9795 16.7422C20.3165 16.9822 20.3957 17.4497 20.1562 17.7871C19.5052 18.703 18.703 19.5052 17.7871 20.1562C17.4497 20.3957 16.9822 20.3165 16.7422 19.9795C16.5022 19.6419 16.5813 19.1736 16.9189 18.9336C17.6979 18.3799 18.3799 17.6979 18.9336 16.9189ZM2 12C2 11.4298 2.04769 10.8702 2.13965 10.3252C2.20855 9.91684 2.59556 9.6412 3.00391 9.70996C3.41221 9.77886 3.68781 10.1659 3.61914 10.5742C3.54102 11.0372 3.5 11.5137 3.5 12C3.5 12.4863 3.54102 12.9628 3.61914 13.4258C3.68781 13.8341 3.41221 14.2211 3.00391 14.29C2.59556 14.3588 2.20855 14.0832 2.13965 13.6748C2.04769 13.1298 2 12.5702 2 12ZM20.5 12C20.5 11.5137 20.459 11.0372 20.3809 10.5742C20.3122 10.1659 20.5878 9.77886 20.9961 9.70996C21.4044 9.6412 21.7914 9.91684 21.8604 10.3252C21.9523 10.8702 22 11.4298 22 12C22 12.5702 21.9523 13.1298 21.8604 13.6748C21.7914 14.0832 21.4044 14.3588 20.9961 14.29C20.5878 14.2211 20.3122 13.8341 20.3809 13.4258C20.459 12.9628 20.5 12.4863 20.5 12ZM6.21289 3.84375C6.55032 3.6043 7.01785 3.68344 7.25781 4.02051C7.49779 4.35812 7.41867 4.82643 7.08105 5.06641C6.30206 5.62015 5.62015 6.30206 5.06641 7.08105C4.82643 7.41867 4.35812 7.49779 4.02051 7.25781C3.68344 7.01785 3.6043 6.55032 3.84375 6.21289C4.49478 5.297 5.297 4.49478 6.21289 3.84375ZM16.7422 4.02051C16.9821 3.68345 17.4497 3.60431 17.7871 3.84375C18.703 4.49477 19.5052 5.297 20.1562 6.21289C20.3957 6.55031 20.3166 7.01785 19.9795 7.25781C19.6419 7.49779 19.1736 7.41867 18.9336 7.08105C18.3799 6.30206 17.6979 5.62015 16.9189 5.06641C16.5813 4.82643 16.5022 4.35812 16.7422 4.02051ZM12 2C12.5702 2 13.1298 2.04769 13.6748 2.13965C14.0832 2.20855 14.3588 2.59556 14.29 3.00391C14.2211 3.41221 13.8341 3.68781 13.4258 3.61914C12.9628 3.54102 12.4863 3.5 12 3.5C11.5137 3.5 11.0372 3.54102 10.5742 3.61914C10.1659 3.68781 9.77886 3.41221 9.70996 3.00391C9.6412 2.59556 9.91684 2.20855 10.3252 2.13965C10.8702 2.04769 11.4298 2 12 2Z",
|
|
85
110
|
fill: "#98989D"
|
|
86
111
|
})));
|
|
87
112
|
};
|
|
88
113
|
|
|
89
114
|
var _path$a;
|
|
90
115
|
function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
|
|
91
|
-
var
|
|
116
|
+
var SvgCross = function SvgCross(props) {
|
|
92
117
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
|
|
93
118
|
width: "1em",
|
|
94
119
|
height: "1em",
|
|
95
120
|
fill: "none",
|
|
96
121
|
xmlns: "http://www.w3.org/2000/svg"
|
|
97
122
|
}, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
|
|
98
|
-
d: "
|
|
123
|
+
d: "M18.7197 4.21967C19.0126 3.92678 19.4873 3.92678 19.7802 4.21967C20.0731 4.51256 20.0731 4.98732 19.7802 5.28022L13.0605 11.9999L19.7802 18.7197C20.0731 19.0126 20.0731 19.4873 19.7802 19.7802C19.4873 20.0731 19.0126 20.0731 18.7197 19.7802L11.9999 13.0605L5.28022 19.7802C4.98732 20.0731 4.51256 20.0731 4.21967 19.7802C3.92678 19.4873 3.92678 19.0126 4.21967 18.7197L10.9394 11.9999L4.21967 5.28022C3.92678 4.98732 3.92678 4.51256 4.21967 4.21967C4.51256 3.92678 4.98732 3.92678 5.28022 4.21967L11.9999 10.9394L18.7197 4.21967Z",
|
|
99
124
|
fill: "#98989D"
|
|
100
125
|
})));
|
|
101
126
|
};
|
|
@@ -262,16 +287,16 @@ var SvgLoadingCircle = function SvgLoadingCircle(props) {
|
|
|
262
287
|
})));
|
|
263
288
|
};
|
|
264
289
|
|
|
265
|
-
var style$
|
|
290
|
+
var style$l = {"root":"stack-module__root__AqSLk"};
|
|
266
291
|
|
|
267
292
|
var Stack = function (_a) {
|
|
268
293
|
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"]);
|
|
269
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$
|
|
294
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$l.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 })));
|
|
270
295
|
};
|
|
271
296
|
|
|
272
297
|
var baseStyle = {"root":"badge-base-module__root__oUZlm"};
|
|
273
298
|
|
|
274
|
-
var style$
|
|
299
|
+
var style$k = {"root":"badge-module__root__rXpaz"};
|
|
275
300
|
|
|
276
301
|
var BadgeStatuses = {
|
|
277
302
|
success: "success",
|
|
@@ -290,16 +315,16 @@ var Badge = function (_a) {
|
|
|
290
315
|
default: return jsxRuntime.jsx(SvgCircleDashed, {});
|
|
291
316
|
}
|
|
292
317
|
}, [status]);
|
|
293
|
-
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$
|
|
318
|
+
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$k.root), title: text, "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, text] }) })));
|
|
294
319
|
};
|
|
295
320
|
|
|
296
|
-
var style$
|
|
321
|
+
var style$j = {"root":"button-module__root__CDCDX"};
|
|
297
322
|
|
|
298
|
-
var style$
|
|
323
|
+
var style$i = {"root":"spinned-icon-module__root__xchkj"};
|
|
299
324
|
|
|
300
325
|
var SpinnedIcon = function (_a) {
|
|
301
326
|
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"]);
|
|
302
|
-
return (jsxRuntime.jsx("div", { className: clsx(style$
|
|
327
|
+
return (jsxRuntime.jsx("div", { className: clsx(style$i.root, className), style: {
|
|
303
328
|
width: size,
|
|
304
329
|
height: size,
|
|
305
330
|
animationDuration: "".concat(duration, "s"),
|
|
@@ -313,19 +338,19 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
313
338
|
var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps));
|
|
314
339
|
var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
|
|
315
340
|
var iconChild = loadingIcon || baseIcon || null;
|
|
316
|
-
var classes = clsx(style$
|
|
341
|
+
var classes = clsx(style$j.root, props.className);
|
|
317
342
|
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] }) }))));
|
|
318
343
|
});
|
|
319
344
|
Button.displayName = "Button";
|
|
320
345
|
|
|
321
|
-
var style$
|
|
346
|
+
var style$h = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
|
|
322
347
|
|
|
323
348
|
var Hint = function (_a) {
|
|
324
349
|
var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
|
|
325
|
-
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$
|
|
350
|
+
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$h.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$h.children, children: children })] })));
|
|
326
351
|
};
|
|
327
352
|
|
|
328
|
-
var style$
|
|
353
|
+
var style$g = {"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"};
|
|
329
354
|
|
|
330
355
|
var TextField = React.forwardRef(function (_a, ref) {
|
|
331
356
|
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"]);
|
|
@@ -362,28 +387,28 @@ var TextField = React.forwardRef(function (_a, ref) {
|
|
|
362
387
|
setHasValue(e.target.value.length > 0);
|
|
363
388
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
364
389
|
};
|
|
365
|
-
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
390
|
+
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$g.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$g.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$g.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$g.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$g.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$g.hint, children: hint })] }) }));
|
|
366
391
|
});
|
|
367
392
|
TextField.displayName = "TextField";
|
|
368
393
|
|
|
369
|
-
var style$
|
|
394
|
+
var style$f = {"container":"container-module__container__CAxQw"};
|
|
370
395
|
|
|
371
396
|
var Container = function (_a) {
|
|
372
397
|
var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
|
|
373
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$
|
|
398
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$f.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
374
399
|
};
|
|
375
400
|
|
|
376
|
-
var style$
|
|
401
|
+
var style$e = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
|
|
377
402
|
|
|
378
403
|
var PasswordField = React.forwardRef(function (_a, ref) {
|
|
379
404
|
var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
|
|
380
405
|
var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
|
|
381
|
-
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$
|
|
382
|
-
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$
|
|
406
|
+
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$e.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
|
|
407
|
+
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$e.field })));
|
|
383
408
|
});
|
|
384
409
|
PasswordField.displayName = "PasswordField";
|
|
385
410
|
|
|
386
|
-
var style$
|
|
411
|
+
var style$d = {"validator":"validate-password-field-module__validator__Do-6w"};
|
|
387
412
|
|
|
388
413
|
var rules = {
|
|
389
414
|
length: /^.{8,}$/,
|
|
@@ -408,19 +433,19 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
|
|
|
408
433
|
React.useEffect(function () {
|
|
409
434
|
setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
|
|
410
435
|
}, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
|
|
411
|
-
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$
|
|
436
|
+
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$d.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
|
|
412
437
|
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: @ $ ! % * ? & _ #)")] })] }));
|
|
413
438
|
});
|
|
414
439
|
ValidatePasswordField.displayName = "ValidatePasswordField";
|
|
415
440
|
|
|
416
|
-
var style$
|
|
441
|
+
var style$c = {"root":"label-module__root__34bJr"};
|
|
417
442
|
|
|
418
443
|
var Label = function (_a) {
|
|
419
444
|
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;
|
|
420
|
-
return (jsxRuntime.jsx("label", { className: clsx(style$
|
|
445
|
+
return (jsxRuntime.jsx("label", { className: clsx(style$c.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
|
|
421
446
|
};
|
|
422
447
|
|
|
423
|
-
var style$
|
|
448
|
+
var style$b = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
|
|
424
449
|
|
|
425
450
|
var IconAndLabel = function (_a) {
|
|
426
451
|
var children = _a.children, Icon = _a.icon;
|
|
@@ -441,7 +466,7 @@ var CustomSingleValue = function (_a) {
|
|
|
441
466
|
};
|
|
442
467
|
var Select = function (_a) {
|
|
443
468
|
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"]);
|
|
444
|
-
return (jsxRuntime.jsxs("div", { className: clsx(style$
|
|
469
|
+
return (jsxRuntime.jsxs("div", { className: clsx(style$b.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$b.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$b.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$b.hint, children: error })] })] }));
|
|
445
470
|
};
|
|
446
471
|
Select.displayName = "Select";
|
|
447
472
|
|
|
@@ -454,14 +479,14 @@ var FormSelect = function (_a) {
|
|
|
454
479
|
};
|
|
455
480
|
FormSelect.displayName = "FormSelect";
|
|
456
481
|
|
|
457
|
-
var style$
|
|
482
|
+
var style$a = {"root":"loader-module__root__qnInQ"};
|
|
458
483
|
|
|
459
484
|
var Loader = function (_a) {
|
|
460
485
|
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;
|
|
461
|
-
return (jsxRuntime.jsx("div", { className: style$
|
|
486
|
+
return (jsxRuntime.jsx("div", { className: style$a.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] }) }));
|
|
462
487
|
};
|
|
463
488
|
|
|
464
|
-
var style$
|
|
489
|
+
var style$9 = {"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"};
|
|
465
490
|
|
|
466
491
|
var Checkbox = function (_a) {
|
|
467
492
|
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"]);
|
|
@@ -474,11 +499,11 @@ var Checkbox = function (_a) {
|
|
|
474
499
|
var dynamicStyle = {
|
|
475
500
|
"--vAlign": verticalAlign,
|
|
476
501
|
};
|
|
477
|
-
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$
|
|
502
|
+
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$9.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$9.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$9.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$9.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$9.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$9.label, children: label })] }));
|
|
478
503
|
};
|
|
479
504
|
Checkbox.displayName = "Checkbox";
|
|
480
505
|
|
|
481
|
-
var style$
|
|
506
|
+
var style$8 = {"root":"clipboard-module__root__wVZhy"};
|
|
482
507
|
|
|
483
508
|
var trimString = function (str, noOfChars) {
|
|
484
509
|
if (noOfChars === void 0) { noOfChars = 4; }
|
|
@@ -503,42 +528,42 @@ var Clipboard = function (_a) {
|
|
|
503
528
|
}, [value]);
|
|
504
529
|
var text = isShowingCopy ? 'Copied!' : displayValue;
|
|
505
530
|
var icon = isShowingCopy ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgClipboard, {});
|
|
506
|
-
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$
|
|
531
|
+
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$8.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [jsxRuntime.jsx("span", { children: text }), icon] }) }));
|
|
507
532
|
};
|
|
508
533
|
|
|
509
|
-
var style$
|
|
534
|
+
var style$7 = {"root":"stepper-module__root__hgDss"};
|
|
510
535
|
|
|
511
536
|
var Stepper = function (_a) {
|
|
512
537
|
var children = _a.children;
|
|
513
|
-
return (jsxRuntime.jsx("ul", { className: style$
|
|
538
|
+
return (jsxRuntime.jsx("ul", { className: style$7.root, children: children }));
|
|
514
539
|
};
|
|
515
540
|
|
|
516
|
-
var style$
|
|
541
|
+
var style$6 = {"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"};
|
|
517
542
|
|
|
518
543
|
var Step = function (_a) {
|
|
519
544
|
var key = _a.key, label = _a.label, _b = _a.iconSize, iconSize = _b === void 0 ? 16 : _b, _c = _a.isCompleted, isCompleted = _c === void 0 ? false : _c, _d = _a.isCurrent, isCurrent = _d === void 0 ? false : _d;
|
|
520
545
|
var icon = React.useMemo(function () {
|
|
521
546
|
switch (true) {
|
|
522
|
-
case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$
|
|
523
|
-
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$
|
|
524
|
-
default: return jsxRuntime.jsx("span", { className: style$
|
|
547
|
+
case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$6.checkIcon });
|
|
548
|
+
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$6.loadingIcon });
|
|
549
|
+
default: return jsxRuntime.jsx("span", { className: style$6.emptyIcon });
|
|
525
550
|
}
|
|
526
551
|
}, [isCompleted, isCurrent]);
|
|
527
|
-
return (jsxRuntime.jsx("li", { className: style$
|
|
552
|
+
return (jsxRuntime.jsx("li", { className: style$6.root, "data-is-current": isCurrent, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$6.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$6.label, children: label })] }) }, key));
|
|
528
553
|
};
|
|
529
554
|
|
|
530
|
-
var style$
|
|
555
|
+
var style$5 = {"root":"list-module__root__OXx93"};
|
|
531
556
|
|
|
532
557
|
var List = function (_a) {
|
|
533
558
|
var label = _a.label, children = _a.children;
|
|
534
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
559
|
+
return (jsxRuntime.jsxs(Stack, { className: style$5.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
|
|
535
560
|
};
|
|
536
561
|
|
|
537
|
-
var style$
|
|
562
|
+
var style$4 = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
|
|
538
563
|
|
|
539
564
|
var ListItem = function (_a) {
|
|
540
565
|
var value = _a.value, label = _a.label, key = _a.key;
|
|
541
|
-
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style$
|
|
566
|
+
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style$4.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style$4.label, children: label }), jsxRuntime.jsx("span", { className: style$4.value, children: value })] }) }, key));
|
|
542
567
|
};
|
|
543
568
|
|
|
544
569
|
var AccordionRoot = function (_a) {
|
|
@@ -546,42 +571,82 @@ var AccordionRoot = function (_a) {
|
|
|
546
571
|
return (jsxRuntime.jsx(RAccordion__namespace.Root, __assign({}, rest, { children: children })));
|
|
547
572
|
};
|
|
548
573
|
|
|
549
|
-
var style$
|
|
574
|
+
var style$3 = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
|
|
550
575
|
|
|
551
576
|
var AccordionContent = React.forwardRef(function (_a, forwardedRef) {
|
|
552
577
|
var children = _a.children, className = _a.className, hasChildrenPadding = _a.hasChildrenPadding, rest = __rest(_a, ["children", "className", "hasChildrenPadding"]);
|
|
553
|
-
return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$
|
|
578
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$3.content, className), ref: forwardedRef }, rest, { children: jsxRuntime.jsx("div", { className: style$3.childrenContainer, children: jsxRuntime.jsx("div", { className: style$3.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
|
|
554
579
|
});
|
|
555
580
|
AccordionContent.displayName = "AccordionContent";
|
|
556
581
|
|
|
557
|
-
var style$
|
|
582
|
+
var style$2 = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
|
|
558
583
|
|
|
559
584
|
var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
|
|
560
585
|
var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, dataTest = _a.dataTest, rest = __rest(_a, ["children", "className", "dataTest"]);
|
|
561
|
-
return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$
|
|
586
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$2.header, children: jsxRuntime.jsx(RAccordion__namespace.Trigger, __assign({ className: clsx(style$2.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
|
|
562
587
|
});
|
|
563
588
|
AccordionTrigger.displayName = "AccordionTrigger";
|
|
564
589
|
|
|
565
|
-
var style = {"root":"accordion-item-module__root__1Yk4f"};
|
|
590
|
+
var style$1 = {"root":"accordion-item-module__root__1Yk4f"};
|
|
566
591
|
|
|
567
592
|
var AccordionItem = React.forwardRef(function (_a, forwardedRef) {
|
|
568
593
|
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;
|
|
569
|
-
return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsxRuntime.jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsxRuntime.jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
|
|
594
|
+
return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$1.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsxRuntime.jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsxRuntime.jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
|
|
570
595
|
});
|
|
571
596
|
AccordionItem.displayName = "AccordionItem";
|
|
572
597
|
|
|
573
598
|
var Accordion = { Root: AccordionRoot, Item: AccordionItem };
|
|
574
599
|
|
|
600
|
+
var style = {"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"};
|
|
601
|
+
|
|
602
|
+
var ModalElement = function (_a) {
|
|
603
|
+
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"]);
|
|
604
|
+
var modalRef = React.useRef(null);
|
|
605
|
+
return (jsxRuntime.jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style.modal, className), "data-test": "Modal__Div__content", "data-visible": visible, "data-is-not-closable": !onClose }, attributes, { children: [jsxRuntime.jsx("dialog", { className: style.backdrop }), jsxRuntime.jsx("div", { className: style.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxRuntime.jsxs("div", { className: style.bodyWrapper, children: __spreadArray([title && (jsxRuntime.jsxs("div", { className: style.header, children: [jsxRuntime.jsx("h2", { id: id, children: title }), jsxRuntime.jsx(SvgCross, { onClick: onClose })] })), jsxRuntime.jsx("div", { className: style.body, children: children })], actions.map(function (i, idx) { return jsxRuntime.jsx("div", { className: style.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
|
|
606
|
+
};
|
|
607
|
+
var Modal = function (_a) {
|
|
608
|
+
var visible = _a.visible, props = __rest(_a, ["visible"]);
|
|
609
|
+
var element = jsxRuntime.jsx(ModalElement, __assign({ visible: visible }, props));
|
|
610
|
+
return visible
|
|
611
|
+
? reactDom.createPortal(element, document.body)
|
|
612
|
+
: null;
|
|
613
|
+
};
|
|
614
|
+
|
|
615
|
+
var ConfirmModal = function (_a) {
|
|
616
|
+
var children = _a.children, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, cancelDataTest = _a.cancelDataTest, confirmDataTest = _a.confirmDataTest, _c = _a.isConfirmDisabled, isConfirmDisabled = _c === void 0 ? false : _c, _d = _a.confirmText, confirmText = _d === void 0 ? "Confirm" : _d, _e = _a.cancelText, cancelText = _e === void 0 ? "Cancel" : _e, onClose = _a.onClose, onConfirmClick = _a.onConfirmClick, props = __rest(_a, ["children", "isLoading", "cancelDataTest", "confirmDataTest", "isConfirmDisabled", "confirmText", "cancelText", "onClose", "onConfirmClick"]);
|
|
617
|
+
var actions = [
|
|
618
|
+
jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { variant: "secondary", onClick: onClose, "data-test": cancelDataTest, disabled: isLoading || !onClose, children: cancelText }, "cancel"), jsxRuntime.jsx(Button, { onClick: onConfirmClick, disabled: isConfirmDisabled || isLoading, "data-test": confirmDataTest, isLoading: isLoading, children: confirmText }, "confirm")] })
|
|
619
|
+
];
|
|
620
|
+
return (jsxRuntime.jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
|
|
621
|
+
};
|
|
622
|
+
|
|
623
|
+
var OtpModal = function (_a) {
|
|
624
|
+
var code = _a.code, setCode = _a.setCode, onConfirmClick = _a.onConfirmClick, isLoading = _a.isLoading, rest = __rest(_a, ["code", "setCode", "onConfirmClick", "isLoading"]);
|
|
625
|
+
return (jsxRuntime.jsx(ConfirmModal, __assign({}, rest, { title: "OTP", isFullWidth: false, onConfirmClick: onConfirmClick, isLoading: isLoading, cancelDataTest: "LoginWithMfa__Button__cancel", confirmDataTest: "LoginWithMfa__Button__submit", children: jsxRuntime.jsxs(Stack, { children: [jsxRuntime.jsx("p", { children: "Enter the code from the authenticator app" }), jsxRuntime.jsx(TextField, { value: code, onChange: function (e) { return setCode(e.target.value); }, id: "otp", label: "OTP*", "data-test": "ResetPassword__TextField__OTP", disabled: isLoading, fullWidth: true, type: "number" })] }) })));
|
|
626
|
+
};
|
|
627
|
+
|
|
628
|
+
var InfoModal = function (_a) {
|
|
629
|
+
var children = _a.children, acceptDataTest = _a.acceptDataTest, _b = _a.acceptText, acceptText = _b === void 0 ? "Close" : _b, onClose = _a.onClose, props = __rest(_a, ["children", "acceptDataTest", "acceptText", "onClose"]);
|
|
630
|
+
var actions = [
|
|
631
|
+
jsxRuntime.jsx(Button, { variant: "primary", onClick: onClose, "data-test": acceptDataTest, children: acceptText }, "accept")
|
|
632
|
+
];
|
|
633
|
+
return (jsxRuntime.jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
|
|
634
|
+
};
|
|
635
|
+
|
|
575
636
|
exports.Accordion = Accordion;
|
|
576
637
|
exports.Badge = Badge;
|
|
577
638
|
exports.Button = Button;
|
|
578
639
|
exports.Checkbox = Checkbox;
|
|
579
640
|
exports.Clipboard = Clipboard;
|
|
641
|
+
exports.ConfirmModal = ConfirmModal;
|
|
580
642
|
exports.Container = Container;
|
|
581
643
|
exports.FormSelect = FormSelect;
|
|
644
|
+
exports.InfoModal = InfoModal;
|
|
582
645
|
exports.List = List;
|
|
583
646
|
exports.ListItem = ListItem;
|
|
584
647
|
exports.Loader = Loader;
|
|
648
|
+
exports.Modal = Modal;
|
|
649
|
+
exports.OtpModal = OtpModal;
|
|
585
650
|
exports.PasswordField = PasswordField;
|
|
586
651
|
exports.Select = Select;
|
|
587
652
|
exports.SpinnedIcon = SpinnedIcon;
|