@kaio-xyz/design-system 1.1.1 → 1.1.4

package/dist/components/atoms/modal/index.d.ts

@@ -0,0 +1 @@
+export { default as Modal, type ModalProps } from "./modal";

package/dist/components/atoms/modal/modal.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, PropsWithChildren, ReactNode } from "react";
+export type ModalProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+    id?: string;
+    visible?: boolean;
+    title?: string;
+    actions?: ReactNode[];
+    size?: "default" | "small" | "medium" | "large";
+    isFullWidth?: boolean;
+    isScrollable?: boolean;
+    onClose?: () => void;
+};
+declare const Modal: ({ visible, ...props }: ModalProps) => import("react").ReactPortal | null;
+export default Modal;

package/dist/components/atoms/modal/modal.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Modal } from './';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/molecules/modal/confirm-modal/confirm-modal.d.ts

@@ -0,0 +1,11 @@
+import { ModalProps } from "@/components/atoms/modal";
+export type ConfirmModalProps = Omit<ModalProps, "actions"> & {
+    isLoading?: boolean;
+    cancelDataTest: string;
+    confirmDataTest: string;
+    isConfirmDisabled?: boolean;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirmClick: () => void;
+};
+export declare const ConfirmModal: ({ children, isLoading, cancelDataTest, confirmDataTest, isConfirmDisabled, confirmText, cancelText, onClose, onConfirmClick, ...props }: ConfirmModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/modal/confirm-modal/confirm-modal.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ConfirmModal } from './confirm-modal';
+declare const meta: Meta<typeof ConfirmModal>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/molecules/modal/confirm-modal/index.d.ts

@@ -0,0 +1 @@
+export { ConfirmModal, type ConfirmModalProps } from "./confirm-modal";

package/dist/components/molecules/modal/index.d.ts

@@ -0,0 +1,3 @@
+export { ConfirmModal } from "./confirm-modal";
+export { OtpModal } from "./otp-modal";
+export { InfoModal } from "./info-modal";

package/dist/components/molecules/modal/info-modal/index.d.ts

@@ -0,0 +1 @@
+export { InfoModal } from "./info-modal";

package/dist/components/molecules/modal/info-modal/info-modal.d.ts

@@ -0,0 +1,6 @@
+import { ModalProps } from '@/components/atoms/modal';
+export type ConfirmModalProps = Omit<ModalProps, "actions"> & {
+    acceptDataTest: string;
+    acceptText?: string;
+};
+export declare const InfoModal: ({ children, acceptDataTest, acceptText, onClose, ...props }: ConfirmModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/modal/otp-modal/index.d.ts

@@ -0,0 +1 @@
+export { OtpModal } from "./otp-modal";

package/dist/components/molecules/modal/otp-modal/otp-modal.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ConfirmModalProps } from '../confirm-modal';
+type OtpModalProps = Omit<ConfirmModalProps, "cancelDataTest" | "confirmDataTest" | "title"> & {
+    code: string;
+    setCode: Dispatch<SetStateAction<string>>;
+};
+export declare const OtpModal: ({ code, setCode, onConfirmClick, isLoading, ...rest }: OtpModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.cjs.js

@@ -5,6 +5,8 @@ var clsx = require('clsx');
 var React = require('react');
 var ReactSelect = require('react-select');
 var reactHookForm = require('react-hook-form');
+var RAccordion = require('@radix-ui/react-accordion');
+var reactDom = require('react-dom');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -24,6 +26,7 @@ function _interopNamespaceDefault(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var RAccordion__namespace = /*#__PURE__*/_interopNamespaceDefault(RAccordion);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -65,35 +68,59 @@ function __rest(s, e) {
     return t;
 }
 
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var _path$c;
+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); }
+var SvgCheck = function SvgCheck(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+    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",
+    fill: "#98989D"
+  })));
+};
+
 var _path$b;
 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); }
-var SvgCheck = function SvgCheck(props) {
+var SvgCircleDashed = function SvgCircleDashed(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     width: "1em",
     height: "1em",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
-    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",
+    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",
     fill: "#98989D"
   })));
 };
 
 var _path$a;
 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); }
-var SvgCircleDashed = function SvgCircleDashed(props) {
+var SvgCross = function SvgCross(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     width: "1em",
     height: "1em",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
-    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",
+    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",
     fill: "#98989D"
   })));
 };
@@ -260,16 +287,16 @@ var SvgLoadingCircle = function SvgLoadingCircle(props) {
   })));
 };
 
-var style$h = {"root":"stack-module__root__AqSLk"};
+var style$l = {"root":"stack-module__root__AqSLk"};
 
 var Stack = function (_a) {
     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"]);
-    return (jsxRuntime.jsx("div", __assign({ className: clsx(style$h.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 })));
+    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 })));
 };
 
 var baseStyle = {"root":"badge-base-module__root__oUZlm"};
 
-var style$g = {"root":"badge-module__root__rXpaz"};
+var style$k = {"root":"badge-module__root__rXpaz"};
 
 var BadgeStatuses = {
     success: "success",
@@ -288,16 +315,16 @@ var Badge = function (_a) {
             default: return jsxRuntime.jsx(SvgCircleDashed, {});
         }
     }, [status]);
-    return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$g.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] }) })));
+    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] }) })));
 };
 
-var style$f = {"root":"button-module__root__CDCDX"};
+var style$j = {"root":"button-module__root__CDCDX"};
 
-var style$e = {"root":"spinned-icon-module__root__xchkj"};
+var style$i = {"root":"spinned-icon-module__root__xchkj"};
 
 var SpinnedIcon = function (_a) {
     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"]);
-    return (jsxRuntime.jsx("div", { className: clsx(style$e.root, className), style: {
+    return (jsxRuntime.jsx("div", { className: clsx(style$i.root, className), style: {
             width: size,
             height: size,
             animationDuration: "".concat(duration, "s"),
@@ -311,19 +338,19 @@ var Button = React.forwardRef(function (_a, ref) {
     var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps));
     var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
     var iconChild = loadingIcon || baseIcon || null;
-    var classes = clsx(style$f.root, props.className);
+    var classes = clsx(style$j.root, props.className);
     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] }) }))));
 });
 Button.displayName = "Button";
 
-var style$d = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
+var style$h = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
 
 var Hint = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
-    return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$d.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$d.children, children: children })] })));
+    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 })] })));
 };
 
-var style$c = {"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"};
+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"};
 
 var TextField = React.forwardRef(function (_a, ref) {
     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"]);
@@ -360,28 +387,28 @@ var TextField = React.forwardRef(function (_a, ref) {
         setHasValue(e.target.value.length > 0);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     };
-    return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$c.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$c.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$c.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$c.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$c.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$c.hint, children: hint })] }) }));
+    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 })] }) }));
 });
 TextField.displayName = "TextField";
 
-var style$b = {"container":"container-module__container__CAxQw"};
+var style$f = {"container":"container-module__container__CAxQw"};
 
 var Container = function (_a) {
     var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
-    return (jsxRuntime.jsx("div", __assign({ className: clsx(style$b.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
+    return (jsxRuntime.jsx("div", __assign({ className: clsx(style$f.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
 };
 
-var style$a = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
+var style$e = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
 
 var PasswordField = React.forwardRef(function (_a, ref) {
     var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
     var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
-    var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$a.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
-    return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$a.field })));
+    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, {}) }));
+    return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$e.field })));
 });
 PasswordField.displayName = "PasswordField";
 
-var style$9 = {"validator":"validate-password-field-module__validator__Do-6w"};
+var style$d = {"validator":"validate-password-field-module__validator__Do-6w"};
 
 var rules = {
     length: /^.{8,}$/,
@@ -406,19 +433,19 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
     React.useEffect(function () {
         setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
     }, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
-    var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$9.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
+    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 })] })); };
     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: @ $ ! % * ? & _ #)")] })] }));
 });
 ValidatePasswordField.displayName = "ValidatePasswordField";
 
-var style$8 = {"root":"label-module__root__34bJr"};
+var style$c = {"root":"label-module__root__34bJr"};
 
 var Label = function (_a) {
     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;
-    return (jsxRuntime.jsx("label", { className: clsx(style$8.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
+    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 }));
 };
 
-var style$7 = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
+var style$b = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
 
 var IconAndLabel = function (_a) {
     var children = _a.children, Icon = _a.icon;
@@ -439,7 +466,7 @@ var CustomSingleValue = function (_a) {
 };
 var Select = function (_a) {
     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"]);
-    return (jsxRuntime.jsxs("div", { className: clsx(style$7.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$7.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$7.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$7.hint, children: error })] })] }));
+    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 })] })] }));
 };
 Select.displayName = "Select";
 
@@ -452,14 +479,14 @@ var FormSelect = function (_a) {
 };
 FormSelect.displayName = "FormSelect";
 
-var style$6 = {"root":"loader-module__root__qnInQ"};
+var style$a = {"root":"loader-module__root__qnInQ"};
 
 var Loader = function (_a) {
     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;
-    return (jsxRuntime.jsx("div", { className: style$6.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] }) }));
+    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] }) }));
 };
 
-var style$5 = {"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"};
+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"};
 
 var Checkbox = function (_a) {
     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"]);
@@ -472,11 +499,11 @@ var Checkbox = function (_a) {
     var dynamicStyle = {
         "--vAlign": verticalAlign,
     };
-    return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$5.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$5.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$5.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$5.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$5.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$5.label, children: label })] }));
+    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 })] }));
 };
 Checkbox.displayName = "Checkbox";
 
-var style$4 = {"root":"clipboard-module__root__wVZhy"};
+var style$8 = {"root":"clipboard-module__root__wVZhy"};
 
 var trimString = function (str, noOfChars) {
     if (noOfChars === void 0) { noOfChars = 4; }
@@ -501,53 +528,125 @@ var Clipboard = function (_a) {
     }, [value]);
     var text = isShowingCopy ? 'Copied!' : displayValue;
     var icon = isShowingCopy ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgClipboard, {});
-    return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$4.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [jsxRuntime.jsx("span", { children: text }), icon] }) }));
+    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] }) }));
 };
 
-var style$3 = {"root":"stepper-module__root__hgDss"};
+var style$7 = {"root":"stepper-module__root__hgDss"};
 
 var Stepper = function (_a) {
     var children = _a.children;
-    return (jsxRuntime.jsx("ul", { className: style$3.root, children: children }));
+    return (jsxRuntime.jsx("ul", { className: style$7.root, children: children }));
 };
 
-var style$2 = {"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"};
+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"};
 
 var Step = function (_a) {
     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;
     var icon = React.useMemo(function () {
         switch (true) {
-            case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$2.checkIcon });
-            case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$2.loadingIcon });
-            default: return jsxRuntime.jsx("span", { className: style$2.emptyIcon });
+            case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$6.checkIcon });
+            case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$6.loadingIcon });
+            default: return jsxRuntime.jsx("span", { className: style$6.emptyIcon });
         }
     }, [isCompleted, isCurrent]);
-    return (jsxRuntime.jsx("li", { className: style$2.root, "data-is-current": isCurrent, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$2.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$2.label, children: label })] }) }, key));
+    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));
 };
 
-var style$1 = {"root":"list-module__root__OXx93"};
+var style$5 = {"root":"list-module__root__OXx93"};
 
 var List = function (_a) {
     var label = _a.label, children = _a.children;
-    return (jsxRuntime.jsxs(Stack, { className: style$1.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
+    return (jsxRuntime.jsxs(Stack, { className: style$5.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
 };
 
-var style = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
+var style$4 = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
 
 var ListItem = function (_a) {
     var value = _a.value, label = _a.label, key = _a.key;
-    return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style.label, children: label }), jsxRuntime.jsx("span", { className: style.value, children: value })] }) }, key));
+    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));
+};
+
+var AccordionRoot = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (jsxRuntime.jsx(RAccordion__namespace.Root, __assign({}, rest, { children: children })));
+};
+
+var style$3 = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
+
+var AccordionContent = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, className = _a.className, hasChildrenPadding = _a.hasChildrenPadding, rest = __rest(_a, ["children", "className", "hasChildrenPadding"]);
+    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 }) }) })));
+});
+AccordionContent.displayName = "AccordionContent";
+
+var style$2 = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
+
+var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, dataTest = _a.dataTest, rest = __rest(_a, ["children", "className", "dataTest"]);
+    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 })) }));
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+
+var style$1 = {"root":"accordion-item-module__root__1Yk4f"};
+
+var AccordionItem = React.forwardRef(function (_a, forwardedRef) {
+    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;
+    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 })] }));
+});
+AccordionItem.displayName = "AccordionItem";
+
+var Accordion = { Root: AccordionRoot, Item: AccordionItem };
+
+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"};
+
+var ModalElement = function (_a) {
+    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"]);
+    var modalRef = React.useRef(null);
+    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) }) })] })));
+};
+var Modal = function (_a) {
+    var visible = _a.visible, props = __rest(_a, ["visible"]);
+    var element = jsxRuntime.jsx(ModalElement, __assign({ visible: visible }, props));
+    return visible
+        ? reactDom.createPortal(element, document.body)
+        : null;
+};
+
+var ConfirmModal = function (_a) {
+    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"]);
+    var actions = [
+        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")] })
+    ];
+    return (jsxRuntime.jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
+};
+
+var OtpModal = function (_a) {
+    var code = _a.code, setCode = _a.setCode, onConfirmClick = _a.onConfirmClick, isLoading = _a.isLoading, rest = __rest(_a, ["code", "setCode", "onConfirmClick", "isLoading"]);
+    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" })] }) })));
+};
+
+var InfoModal = function (_a) {
+    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"]);
+    var actions = [
+        jsxRuntime.jsx(Button, { variant: "primary", onClick: onClose, "data-test": acceptDataTest, children: acceptText }, "accept")
+    ];
+    return (jsxRuntime.jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
 };
 
+exports.Accordion = Accordion;
 exports.Badge = Badge;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.Clipboard = Clipboard;
+exports.ConfirmModal = ConfirmModal;
 exports.Container = Container;
 exports.FormSelect = FormSelect;
+exports.InfoModal = InfoModal;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.Loader = Loader;
+exports.Modal = Modal;
+exports.OtpModal = OtpModal;
 exports.PasswordField = PasswordField;
 exports.Select = Select;
 exports.SpinnedIcon = SpinnedIcon;