@antscorp/antsomi-ui 1.3.5-beta.92 → 1.3.5-beta.921

package/es/components/molecules/ModalSelect/Card.js

@@ -0,0 +1,49 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { CardDefinationContainer, CardRecommendedContainer, RecommendItem, StyledCard, } from './styled';
+import { Tooltip, Typography } from 'antd';
+import clsx from 'clsx';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const { Text, Paragraph } = Typography;
+export const Card = (props) => {
+    const { children, bordered = false, ...rest } = props;
+    return (_jsx(StyledCard, { bordered: bordered, ...rest, children: children }));
+};
+export const CardDefination = (props) => {
+    const refreshKey = useRef(0);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [expandable, setExpandable] = useState(true);
+    const { title, description, descriptionEllipsis = {} } = props;
+    useEffect(() => {
+        if (!expandable) {
+            setExpandable(true);
+        }
+    }, [expandable]);
+    const handleCollapse = () => {
+        refreshKey.current += 1;
+        setExpandable(false);
+    };
+    return (_jsxs(CardDefinationContainer, { children: [title && _jsx(Text, { className: "title", children: title }), description && (_jsxs(Paragraph, { ellipsis: {
+                    rows: 3,
+                    tooltip: true,
+                    symbol: 'View more',
+                    ...descriptionEllipsis,
+                    expandable,
+                    onExpand: () => setIsExpanded(true),
+                }, className: "description", children: [description, isExpanded && (_jsx("span", { className: "antsomi-typography-collapse", onClick: handleCollapse, children: "View less" }))] }, refreshKey.current))] }));
+};
+export const CardRecommended = (props) => {
+    const { title, recomendations = [] } = props;
+    return (_jsxs(CardRecommendedContainer, { children: [title && _jsx(Text, { className: "title", children: title }), _jsx("div", { className: "recomendations", children: recomendations.map(i => {
+                    const { description, className, color = globalToken?.blue2, bordered = false } = i;
+                    const item = (_createElement(RecommendItem, { ...i, key: i.key, color: color, bordered: bordered, className: clsx('item', className) }));
+                    if (typeof description === 'string') {
+                        return (_jsx(Tooltip, { title: description, placement: "top", children: item }));
+                    }
+                    if (description) {
+                        return _jsx(Tooltip, { ...description, children: item });
+                    }
+                    return item;
+                }) })] }));
+};

package/es/components/molecules/ModalSelect/ModalSelect.d.ts

@@ -0,0 +1,2 @@
+import { ModalSelectProps } from './types';
+export declare const ModalSelect: (props: ModalSelectProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/ModalSelect/ModalSelect.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { Menu } from 'antd';
+import { StyledModal } from './styled';
+import { isFunction } from 'lodash';
+import clsx from 'clsx';
+export const ModalSelect = (props) => {
+    const { value, content, options = [], okButtonProps = {}, cancelButtonProps = {}, title, open: openProp, menuRef: menuRefProp, onChange, onOk, contentWrapperProps = {}, ...rest } = props;
+    const [selected, setSelected] = useState(null);
+    const [open, setOpen] = useState(false);
+    const handleSetMenuRef = useCallback((ref) => {
+        if (!ref?.menu?.list)
+            return;
+        if (menuRefProp) {
+            menuRefProp(ref.menu.list);
+        }
+    }, [menuRefProp]);
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        setSelected(value);
+    }, [value]);
+    useEffect(() => {
+        if (openProp === undefined)
+            return;
+        setOpen(openProp);
+    }, [openProp]);
+    const renderContent = () => {
+        if (!isFunction(content))
+            return null;
+        return content(selected || null);
+    };
+    const handleClickItem = (key) => {
+        setSelected(key);
+        if (onChange)
+            onChange(key);
+    };
+    const handleOk = (e) => {
+        if (onOk)
+            onOk(e, selected);
+    };
+    return (_jsxs(StyledModal, { ...rest, open: open, onOk: handleOk, okButtonProps: {
+            ...okButtonProps,
+            className: `${okButtonProps.className} ok-btn`,
+        }, cancelButtonProps: {
+            ...cancelButtonProps,
+            className: `${cancelButtonProps.className} cancel-btn`,
+        }, title: title || 'Select', children: [_jsx(Menu, { ref: handleSetMenuRef, items: options, selectedKeys: [selected || ''], onClick: info => handleClickItem(info.key) }), _jsx("div", { ...contentWrapperProps, className: clsx(contentWrapperProps?.className, 'ModalSelect-content'), children: renderContent() })] }));
+};

package/es/components/molecules/ModalSelect/index.d.ts

@@ -0,0 +1,7 @@
+export declare const ModalSelect: {
+    Modal: (props: import("./types").ModalSelectProps) => import("react/jsx-runtime").JSX.Element;
+    Card: (props: import("antd").CardProps) => import("react/jsx-runtime").JSX.Element;
+    CardRecommended: (props: import("./types").CardRecommendedProps) => import("react/jsx-runtime").JSX.Element;
+    CardDefination: (props: import("./types").CardDefinationProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type { ModalSelectProps } from './types';

package/es/components/molecules/ModalSelect/index.js

@@ -0,0 +1,8 @@
+import { ModalSelect as Modal } from './ModalSelect';
+import { Card, CardDefination, CardRecommended } from './Card';
+export const ModalSelect = {
+    Modal,
+    Card,
+    CardRecommended,
+    CardDefination,
+};

package/es/components/molecules/ModalSelect/styled.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("antd").ModalProps> & import("antd/es/modal/confirm").ModalStaticFunctions & {
+    useModal: typeof import("antd/es/modal/useModal").default;
+    destroyAll: () => void;
+    config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
+}, any, {}, never>;
+export declare const StyledCard: import("styled-components").StyledComponent<import("antd/es/card").CardInterface, any, {}, never>;
+export declare const CardDefinationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardRecommendedContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RecommendItem: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;

package/es/components/molecules/ModalSelect/styled.js

@@ -0,0 +1,161 @@
+import { Modal, Card, Tag } from 'antd';
+import styled from 'styled-components';
+import { get } from 'lodash';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const StyledModal = styled(Modal) `
+  --modal-padding: 20px;
+
+  &.antsomi-modal {
+    .antsomi-modal-content {
+      max-height: 70vh;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .antsomi-modal-close {
+      &:hover {
+        background-color: transparent;
+      }
+
+      .antsomi-modal-close-x {
+        padding: 10px;
+        font-size: 16px;
+      }
+    }
+
+    .antsomi-modal-header {
+      padding-inline: var(--modal-padding);
+      padding-top: var(--modal-padding);
+      margin-bottom: calc(var(--modal-padding) - 5px);
+
+      .antsomi-modal-title {
+        font-weight: 400;
+        font-size: 14px;
+      }
+    }
+
+    .antsomi-modal-body {
+      flex: 1;
+      overflow: hidden;
+
+      &:hover {
+        overflow: auto;
+      }
+
+      padding-inline: var(--modal-padding);
+      padding-bottom: var(--modal-padding);
+      margin-bottom: 10px;
+      display: flex;
+
+      > .antsomi-menu {
+        flex-shrink: 0;
+        overflow: hidden;
+
+        &:hover {
+          overflow-y: auto;
+        }
+
+        .antsomi-menu-item {
+          width: 200px;
+          padding-inline: 10px;
+          font-weight: bold;
+        }
+      }
+
+      > .ModalSelect-content {
+        margin-left: 80px;
+        border-radius: 10px;
+        overflow: hidden;
+
+        &:hover {
+          overflow: auto;
+          scrollbar-width: none;
+        }
+      }
+    }
+
+    .antsomi-modal-footer {
+      padding: var(--modal-padding) !important;
+      margin-top: 0;
+      text-align: start;
+      display: flex;
+      justify-content: start;
+      gap: 10px;
+      flex-direction: row-reverse;
+
+      .antsomi-btn + .antsomi-btn {
+        margin: 0;
+      }
+    }
+  }
+`;
+export const StyledCard = styled(Card) `
+  font-size: 12px;
+
+  &.antsomi-card {
+    padding: 15px;
+    background-color: ${get(globalToken, 'blue1_3')};
+
+    > .antsomi-card-cover {
+      padding: 20px;
+    }
+
+    > .antsomi-card-body {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      background-color: transparent;
+      padding: 0px;
+    }
+  }
+`;
+export const CardDefinationContainer = styled.div `
+  > .title {
+    font-size: 16px;
+    font-weight: normal;
+    margin-bottom: 8px;
+    display: block;
+  }
+
+  > .description.antsomi-typography {
+    margin-bottom: 0;
+    color: ${get(globalToken, 'bw8')};
+
+    .antsomi-typography-expand {
+      font-weight: 500;
+    }
+
+    .antsomi-typography-collapse {
+      font-weight: 500;
+      color: ${globalToken?.colorPrimary};
+      cursor: pointer;
+    }
+  }
+`;
+export const CardRecommendedContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  > .title {
+    margin-bottom: 8px;
+  }
+
+  > .recomendations {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 8px;
+
+    > .item {
+      color: ${globalToken?.colorText};
+      line-height: 14px;
+      font-size: 12px;
+      padding: 5px 10px;
+
+      &.antsomi-tag-borderless {
+        border-width: 0;
+      }
+    }
+  }
+`;
+export const RecommendItem = styled(Tag) ``;

package/es/components/molecules/ModalSelect/types.d.ts

@@ -0,0 +1,29 @@
+import React, { RefCallback } from 'react';
+import { MenuProps, ModalProps, TagProps } from 'antd';
+import { EllipsisConfig } from 'antd/es/typography/Base';
+import { TooltipProps } from 'antd/lib';
+export type ModalSelectProps = {
+    open?: boolean;
+    value?: string;
+    options?: MenuProps['items'];
+    content?: (active: string | null) => React.ReactNode;
+    contentWrapperProps?: React.ComponentProps<'div'>;
+    onChange?: (active: string) => void;
+    menuRef?: RefCallback<HTMLUListElement>;
+    onOk?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, active: string | null) => void;
+} & Omit<ModalProps, 'onOk'>;
+export type CardProps = {
+    children?: React.ReactNode;
+};
+export type CardDefinationProps = {
+    title?: string;
+    description?: string;
+    descriptionEllipsis?: EllipsisConfig;
+};
+export type CardRecommendedProps = {
+    title?: string;
+    recomendations?: (TagProps & {
+        key?: React.Key;
+        description?: string | TooltipProps;
+    })[];
+};

package/es/components/molecules/ModalSelect/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/molecules/ModalV2/ModalV2.js

@@ -1,25 +1,11 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyledModal } from './styled';
 // Components
 import { Button, Flex } from '../../atoms';
 export const ModalV2 = props => {
     const { okButtonProps, cancelButtonProps, okText, cancelText, onCancel, onOk } = props;
-    const restOfProps = __rest(props, []);
-    return (React.createElement(StyledModal, Object.assign({ footer: React.createElement(Flex, { gap: 10, align: "center" },
-            React.createElement(Button, Object.assign({ type: "primary", onClick: onOk }, okButtonProps), okText || 'OK'),
-            React.createElement(Button, Object.assign({ onClick: onCancel }, cancelButtonProps), cancelText || 'Cancel')) }, restOfProps)));
+    const { ...restOfProps } = props;
+    return (_jsx(StyledModal, { footer: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Button, { type: "primary", onClick: onOk, ...okButtonProps, children: okText || 'OK' }), _jsx(Button, { onClick: onCancel, ...cancelButtonProps, children: cancelText || 'Cancel' })] }), ...restOfProps }));
 };
 ModalV2.defaultProps = {
 // footer,

package/es/components/molecules/ModalV2/styled.js

@@ -21,6 +21,11 @@ export const StyledModal = styled(Modal) `
 
     .antsomi-modal-header {
       padding: 15px 15px 0px 15px;
+      margin-bottom: 0px;
+    }
+
+    .antsomi-modal-footer {
+      margin-top: 0px;
     }
   }
 `;

package/es/components/molecules/PopupDraggable/PopupDraggable.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Draggable from 'react-draggable';
 import { Resizable } from 'react-resizable';
 import 'react-resizable/css/styles.css';
@@ -10,7 +11,7 @@ import Icon from '@antscorp/icons';
 const PopupDraggable = props => {
     const { id, name, bounds, isHiddenClose, isHiddenResizing, isShowResizeHover, styleContainer, callback, defaultPosition, children, } = props;
     const [activeDrags, setActiveDrags] = useState(0);
-    const [width, setWidth] = useState(300);
+    const [width, setWidth] = useState(450);
     const [height, setHeight] = useState(window.innerHeight || 300);
     const handleStart = () => {
         setActiveDrags(activeDrags + 1);
@@ -30,16 +31,11 @@ const PopupDraggable = props => {
         setWidth(size.width);
         setHeight(size.height);
     };
-    return (React.createElement(Draggable, { handle: "strong", 
+    return (_jsx(Draggable, { handle: "strong", 
         // axis="x"
-        defaultPosition: defaultPosition, bounds: bounds, onStart: handleStart, onStop: handleStop },
-        React.createElement(Resizable, { width: width, height: height, onResize: handleResize, 
+        defaultPosition: defaultPosition, bounds: bounds, onStart: handleStart, onStop: handleStop, children: _jsx(Resizable, { width: width, height: height, onResize: handleResize, 
             // handlewrapperclass="resize-handle"
-            resizeHandles: ['w', 'e', 'n', 's'] },
-            React.createElement(PopupContainer, { id: id, isHiddenResizing: isHiddenResizing, isShowResizeHover: isShowResizeHover, style: Object.assign({ width, height }, styleContainer), className: "popup-container no-cursor" },
-                !isHiddenClose && (React.createElement(WrapperIcon, { onClick: () => callback('ON_CLOSE_POPUP', { name }) },
-                    React.createElement(Icon, { type: "icon-ants-remove-slim", className: "icon-close" }))),
-                children))));
+            resizeHandles: ['w', 'e', 'n', 's'], children: _jsxs(PopupContainer, { id: id, isHiddenResizing: isHiddenResizing, isShowResizeHover: isShowResizeHover, style: { width, height, ...styleContainer }, className: "popup-container no-cursor", children: [!isHiddenClose && (_jsx(WrapperIcon, { onClick: () => callback('ON_CLOSE_POPUP', { name }), children: _jsx(Icon, { type: "icon-ants-remove-slim", className: "icon-close" }) })), children] }) }) }));
 };
 PopupDraggable.defaultProps = {
     name: 'popup_dynamic',

package/es/components/molecules/PopupDraggable/styled.js

@@ -1,4 +1,3 @@
-var _a, _b;
 // Libraries
 import styled, { css } from 'styled-components';
 // Constants
@@ -7,10 +6,11 @@ export const PopupContainer = styled.div `
   position: fixed !important;
   top: 0px;
   right: 0px;
-  min-width: 450px;
+  min-width: 300px;
   min-height: 50px;
-  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
-  box-shadow: 0px 0 6px 2px rgba(0, 0, 0, 0.1);
+  background-color: ${THEME.token?.bw0};
+  box-shadow: -3px 0px 3px 0px #002e591a;
+
   z-index: 1003;
 
   &.no-cursor {
@@ -26,6 +26,19 @@ export const PopupContainer = styled.div `
       .react-resizable-handle {
         display: none;
       }
+      .react-resizable-handle-w {
+        width: 30px;
+        height: 30px;
+        border-radius: 999px;
+        transform: translate(-30%);
+        background: #ffffff;
+        background-image: none;
+        box-shadow: -3px 0px 3px 0px #002e591a;
+        padding: 0px;
+        background-image: url("data:image/svg+xml,%3Csvg width='4' height='14' viewBox='0 0 4 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0.5L0 13.5H1L1 0.5H0ZM3 0.5L3 13.5H4L4 0.5H3Z' fill='%23595959'/%3E%3C/svg%3E%0A");
+        background-position: center;
+        background-repeat: no-repeat;
+      }
     `}
 
   ${props => props.isShowResizeHover &&
@@ -47,6 +60,6 @@ export const WrapperIcon = styled.div `
 
   .icon-close {
     font-size: 12px;
-    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon};
+    color: ${THEME.token?.colorIcon};
   }
 `;

package/es/components/molecules/PreviewModal/PreviewModal.js

@@ -1,16 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { Button, Icon } from '../../atoms';
 // Styled
@@ -19,12 +7,7 @@ import { ModalBody, ModalHeader, StyledModal } from './styled';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 export const PreviewModal = props => {
     const { onCancel } = props;
-    const { children, modalHeaderClassName, modalBodyClassName } = props, restProps = __rest(props, ["children", "modalHeaderClassName", "modalBodyClassName"]);
+    const { children, modalHeaderClassName, modalBodyClassName, ...restProps } = props;
     const { t } = i18nInstance;
-    return (React.createElement(StyledModal, Object.assign({}, restProps, { centered: true, closeIcon: null, footer: null, width: "100vw" }),
-        React.createElement(ModalHeader, { className: modalHeaderClassName },
-            React.createElement(Button, { className: "close-btn", onClick: onCancel },
-                React.createElement(Icon, { type: "icon-ants-remove-slim", size: 12 }),
-                t(translations.close.title))),
-        React.createElement(ModalBody, { className: modalBodyClassName }, children)));
+    return (_jsxs(StyledModal, { ...restProps, centered: true, closeIcon: null, footer: null, width: "100vw", children: [_jsx(ModalHeader, { className: modalHeaderClassName, children: _jsxs(Button, { className: "close-btn", onClick: onCancel, children: [_jsx(Icon, { type: "icon-ants-remove-slim", size: 12 }), t(translations.close.title)] }) }), _jsx(ModalBody, { className: modalBodyClassName, children: children })] }));
 };

package/es/components/molecules/PreviewModal/styled.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("../ModalV2").ModalV2Props>, any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const ModalHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const ModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/PreviewModal/styled.js

@@ -1,10 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
 import styled from 'styled-components';
 // Components
-import { ModalV2 } from '../ModalV2';
-import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { ModalV2 } from '@antscorp/antsomi-ui/es/components/molecules/ModalV2';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 const HEADER_HEIGHT = '50px';
-export const StyledModal = styled(ModalV2) `
+export const StyledModal = styled(props => _jsx(ModalV2, { ...props })) `
   max-width: 100vw !important;
 
   .antsomi-modal-content {

package/es/components/molecules/ProcessLoading/ProcessLoading.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { ModalProps } from '@antscorp/antsomi-ui/es/components/molecules';
+interface TimeOut {
+    show?: boolean;
+    message?: ReactNode;
+    second?: number;
+}
+export interface ProcessLoadingProps extends ModalProps {
+    message?: ReactNode;
+    timeout?: TimeOut;
+}
+export declare const ProcessLoading: React.FC<ProcessLoadingProps>;
+export {};

package/es/components/molecules/ProcessLoading/ProcessLoading.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useEffect, useRef, useState } from 'react';
+// Atoms
+import { Spin, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Molecules
+import { ModalV2 } from '@antscorp/antsomi-ui/es/components/molecules';
+import { ProcessLoadingContent } from './styled';
+export const ProcessLoading = ({ ...restProps }) => {
+    // Props
+    const { open, message = 'Loading ...', timeout } = restProps;
+    // State
+    const [isShowTimeoutMessage, setShowAlert] = useState(false);
+    // Ref
+    const timeoutShowAlert = useRef(null);
+    // Variables
+    const { second = 7, message: timeOutMessage = (_jsxs("div", { children: ["This might take a little longer than usual. ", _jsx("br", {}), "Thank you for waiting!"] })), show: showTimeOutMessage = true, } = timeout || {};
+    // Effects
+    /* Base timeout second to show timeout message */
+    useEffect(() => {
+        if (open) {
+            timeoutShowAlert.current = setTimeout(() => {
+                setShowAlert(true);
+            }, 1000 * second);
+        }
+        return () => {
+            clearTimeout(timeoutShowAlert.current);
+            setShowAlert(false);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    // Handlers
+    const renderMessage = () => {
+        let draftMessage = null;
+        if (isShowTimeoutMessage && showTimeOutMessage) {
+            draftMessage = timeOutMessage;
+        }
+        else if (message) {
+            draftMessage = message;
+        }
+        if (draftMessage) {
+            return (_jsx(Typography.Text
+            /* Key to force update for refresh animation when timeout */
+            , { className: "animate__animated animate__fadeIn", style: { lineHeight: '14.06px' }, children: draftMessage }, !showTimeOutMessage ? '1' : `${isShowTimeoutMessage}`));
+        }
+        return null;
+    };
+    return (_jsx(ModalV2, { closable: false, destroyOnClose: true, ...restProps, footer: null, centered: true, width: "300px", styles: {
+            body: {
+                padding: 20,
+            },
+            mask: {
+                background: `rgba(255, 255, 255, 0.5)`,
+            },
+        }, children: _jsxs(ProcessLoadingContent, { vertical: true, align: "center", justify: "center", gap: 16, children: [_jsx(Spin, { spinning: true, showIndicatorBackground: true }), renderMessage()] }) }));
+};

package/es/components/molecules/ProcessLoading/index.d.ts

@@ -0,0 +1,2 @@
+export { ProcessLoading } from './ProcessLoading';
+export type { ProcessLoadingProps } from './ProcessLoading';

package/es/components/molecules/ProcessLoading/index.js

@@ -0,0 +1 @@
+export { ProcessLoading } from './ProcessLoading';

package/es/components/molecules/ProcessLoading/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ProcessLoadingContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/molecules/ProcessLoading/styled.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
+export const ProcessLoadingContent = styled(Flex) `
+  text-align: center;
+`;

package/es/components/molecules/RadioGroup/index.js

@@ -1,23 +1,9 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Components
 import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styled
 import { RadioGroupWrapper, StyledRadioGroup } from './styled';
 export const RadioGroup = props => {
-    const { label } = props, restOf = __rest(props, ["label"]);
-    return (React.createElement(RadioGroupWrapper, null,
-        label ? React.createElement(Text, null, label) : null,
-        React.createElement(StyledRadioGroup, Object.assign({}, restOf))));
+    const { label, ...restOf } = props;
+    return (_jsxs(RadioGroupWrapper, { children: [label ? _jsx(Text, { children: label }) : null, _jsx(StyledRadioGroup, { ...restOf })] }));
 };

package/es/components/molecules/RequestAccess/RequestAccess.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface RequestAccessProps {
+    fullscreen?: boolean;
+    className?: string;
+    placeholder?: string;
+    deniedTitle?: string;
+    deniedSubTitle?: string;
+    sentTitle?: string;
+    sentSubTitle?: string;
+    requestText?: string;
+    switchAccountText?: string;
+    onRequest?: (message: string) => Promise<any>;
+    onSwitchAccount?: () => void;
+}
+export declare const RequestAccess: React.FC<RequestAccessProps>;
+export {};