@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
 import styled, { css } from 'styled-components';
 // Components
@@ -7,7 +8,7 @@ import { Tree } from '@antscorp/antsomi-ui/es/components/molecules';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { EXTRA_VALUE_SHIFT_WIDTH, EXTRA_VALUE_WIDTH } from './constants';
 const { borderRadius, bw3, bw6, blue, blue1, colorPrimary, colorError } = globalToken || {};
-export const MatchesAnyWrapper = styled(Flex) `
+export const MatchesAnyWrapper = styled(props => _jsx(Flex, { ...props })) `
   width: 100%;
   height: 550px;
 
@@ -18,7 +19,7 @@ export const MatchesAnyWrapper = styled(Flex) `
       height: 50px;
       box-sizing: border-box;
       padding: 0px 15px;
-      border-bottom: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+      border-bottom: 1px solid ${globalToken?.bw3};
       gap: 10px;
 
       .antsomi-search-input {
@@ -36,7 +37,7 @@ export const MatchesAnyWrapper = styled(Flex) `
       height: 100%;
 
       &--left {
-        border-right: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+        border-right: 1px solid ${globalToken?.bw3};
       }
     }
 
@@ -150,7 +151,7 @@ export const MatchesAnyWrapper = styled(Flex) `
 
       &.antsomi-tree-treenode-disabled {
         .antsomi-typography {
-          color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw6} !important;
+          color: ${globalToken?.bw6} !important;
         }
 
         .select-button {
@@ -229,13 +230,13 @@ export const TextButton = styled(Typography.Text) `
       pointer-events: none;
     `}
 `;
-export const GroupSelectButton = styled(Button) `
+export const GroupSelectButton = styled(props => _jsx(Button, { ...props })) `
   gap: 4px !important;
   .group-name {
     font-weight: normal !important;
   }
 `;
-export const ActionButton = styled(Flex) `
+export const ActionButton = styled(props => _jsx(Flex, { ...props })) `
   height: 16px;
   width: 16px;
   opacity: 0;
@@ -247,7 +248,7 @@ export const ActionButton = styled(Flex) `
   }
 `;
 export const StyledTree = styled(Tree) ``;
-export const TextArea = styled(Input.TextArea) `
+export const TextArea = styled(props => _jsx(Input.TextArea, { ...props })) `
   &.antsomi-input-borderless {
     border: 1px solid ${blue1} !important;
     border-radius: ${borderRadius}px;
@@ -259,4 +260,4 @@ export const ExtraValueLabel = styled.div `
   align-items: center;
   justify-content: center;
 `;
-export const ItemStatus = styled(Flex) ``;
+export const ItemStatus = styled(props => _jsx(Flex, { ...props })) ``;

package/es/components/molecules/MatchAnySelect/utils.js

@@ -15,33 +15,34 @@ const customMergeTreeData = (key) => (target, source) => {
     return [...merged, ...newItems];
 };
 export const getSelectedTreeData = (items, selectedItems, selectedTreeData = []) => {
-    const notExtendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue)) || [];
-    const extendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue)) || [];
-    const serializeTreeData = (list) => {
-        var _a;
-        return ((_a = list
-            .filter(item => {
-            /**
-             * Checks if the given item or any of its descendants are selected.
-             *
-             * If the item has children, it flattens the children tree structure and checks if any node is selected.
-             * If the item does not have children, it directly checks if the item is in the selected items list.
-             *
-             */
-            const isSelected = item.children
-                ? flatTree(item.children, 'children').some(item => notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.some(selectedItem => selectedItem.key === item.key))
-                : notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.some(selectedItem => selectedItem.key === item.key);
-            return isSelected;
-        })) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), (item.children && {
+    const notExtendValueSelectedItems = selectedItems?.filter(item => !item.isExtendValue) || [];
+    const extendValueSelectedItems = selectedItems?.filter(item => item.isExtendValue) || [];
+    const serializeTreeData = (list) => list
+        .filter(item => {
+        /**
+         * Checks if the given item or any of its descendants are selected.
+         *
+         * If the item has children, it flattens the children tree structure and checks if any node is selected.
+         * If the item does not have children, it directly checks if the item is in the selected items list.
+         *
+         */
+        const isSelected = item.children
+            ? flatTree(item.children, 'children').some(item => notExtendValueSelectedItems?.some(selectedItem => selectedItem.key === item.key))
+            : notExtendValueSelectedItems?.some(selectedItem => selectedItem.key === item.key);
+        return isSelected;
+    })
+        ?.map(item => ({
+        ...item,
+        ...(item.children && {
             children: serializeTreeData(item.children),
-        }))))) || [];
-    };
+        }),
+    })) || [];
     const mergeItems = deepmerge(selectedTreeData || [], items || [], {
         arrayMerge: customMergeTreeData('key'),
     });
     // If all of items not have children then filter item is not found in list but has selected for display
     const notFoundItems = !mergeItems.some(item => !isEmpty(item.children))
-        ? notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.filter(item => !(items === null || items === void 0 ? void 0 : items.some(i => i.key === item.key)))
+        ? notExtendValueSelectedItems?.filter(item => !items?.some(i => i.key === item.key))
         : [];
     const treeData = serializeTreeData(mergeItems).concat([
         ...notFoundItems,

package/es/components/molecules/Modal/Modal.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Atoms
 import { Button, Icon, Spin } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styled
@@ -7,18 +8,18 @@ import { StyledModal, WrapperSpin } from './styled';
 export const OriginalModal = memo(props => {
     // Props
     const { loading } = props;
-    return (React.createElement(StyledModal, Object.assign({ closeIcon: React.createElement(Icon, { disabled: loading, type: "icon-ants-remove-slim", size: 15 }),
-        footer: (React.createElement(React.Fragment, null,
-            React.createElement(Button, Object.assign({ type: "primary", onClick: props.onOk }, props.okButtonProps), props.okText ? props.okText : 'OK'),
-            React.createElement(Button, Object.assign({ onClick: props.onCancel }, props.cancelButtonProps), props.cancelText ? props.cancelText : 'Cancel'))),
-        modalRender: node => loading ? (React.createElement(WrapperSpin, null,
-            React.createElement(Spin, { spinning: loading }, node))) : (node) }, props, { maskClosable: loading ? false : props.maskClosable }),
-        props.header || null,
-        props.children || null));
+    return (_jsxs(StyledModal, { closeIcon: _jsx(Icon, { disabled: loading, type: "icon-ants-remove-slim", size: 15 }),
+        footer: (_jsxs(_Fragment, { children: [_jsx(Button, { type: "primary", onClick: props.onOk, ...props.okButtonProps, children: props.okText ? props.okText : 'OK' }), _jsx(Button, { onClick: props.onCancel, ...props.cancelButtonProps, children: props.cancelText ? props.cancelText : 'Cancel' })] })),
+        modalRender: node => loading ? (_jsx(WrapperSpin, { children: _jsx(Spin, { spinning: loading, children: node }) })) : (node),
+        ...props,
+        maskClosable: loading ? false : props.maskClosable, children: [props.header || null, props.children || null] }));
 });
 OriginalModal.displayName = 'OriginalModal';
 export const Modal = OriginalModal;
-Modal.confirm = (props) => StyledModal.confirm(Object.assign({ cancelText: 'Cancel' }, props));
+Modal.confirm = (props) => StyledModal.confirm({
+    cancelText: 'Cancel',
+    ...props,
+});
 Modal.useModal = StyledModal.useModal;
 Modal.success = StyledModal.success;
 Modal.info = StyledModal.info;

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

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d, _e, _f, _g;
 // Libraries
 import styled, { css } from 'styled-components';
 import { Modal as AntdModal } from 'antd';
@@ -55,21 +54,21 @@ export const StyledModal = styled(AntdModal) `
 
       .antsomi-btn {
         height: 28px;
-        border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
-        font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
-        color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary};
+        border-radius: ${THEME.token?.borderRadius}px;
+        font-size: ${THEME.token?.fontSize}px;
+        color: ${THEME.token?.colorPrimary};
         font-weight: 700;
 
         &:hover {
-          color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorTextHover};
+          color: ${THEME.token?.colorTextHover};
         }
 
         &.antsomi-btn-primary {
-          background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorPrimary};
-          color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw0};
+          background-color: ${THEME.token?.colorPrimary};
+          color: ${THEME.token?.bw0};
 
           &:hover {
-            background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.colorTextHover};
+            background-color: ${THEME.token?.colorTextHover};
           }
         }
       }

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

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

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

@@ -1,23 +1,14 @@
-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;
-};
-import React, { useEffect, useRef, useState } from 'react';
+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 } = props, rest = __rest(props, ["children", "bordered"]);
-    return (React.createElement(StyledCard, Object.assign({ bordered: bordered }, rest), children));
+    const { children, bordered = false, ...rest } = props;
+    return (_jsx(StyledCard, { bordered: bordered, ...rest, children: children }));
 };
 export const CardDefination = (props) => {
     const refreshKey = useRef(0);
@@ -33,25 +24,26 @@ export const CardDefination = (props) => {
         refreshKey.current += 1;
         setExpandable(false);
     };
-    return (React.createElement(CardDefinationContainer, null,
-        title && React.createElement(Text, { className: "title" }, title),
-        description && (React.createElement(Paragraph, { key: refreshKey.current, ellipsis: Object.assign(Object.assign({ rows: 3, tooltip: true, symbol: 'View more' }, descriptionEllipsis), { expandable, onExpand: () => setIsExpanded(true) }), className: "description" },
-            description,
-            isExpanded && (React.createElement("span", { className: "antsomi-typography-collapse", onClick: handleCollapse }, "View less"))))));
+    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 (React.createElement(CardRecommendedContainer, null,
-        title && React.createElement(Text, { className: "title" }, title),
-        React.createElement("div", { className: "recomendations" }, recomendations.map(i => {
-            const { description, className, color = globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue2, bordered = false } = i;
-            const item = (React.createElement(RecommendItem, Object.assign({}, i, { key: i.key, color: color, bordered: bordered, className: clsx('item', className) })));
-            if (typeof description === 'string') {
-                return (React.createElement(Tooltip, { title: description, placement: "top" }, item));
-            }
-            if (description) {
-                return React.createElement(Tooltip, Object.assign({}, description), item);
-            }
-            return item;
-        }))));
+    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

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

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

@@ -1,26 +1,15 @@
-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;
-};
-import React, { useCallback, useEffect, useState } from 'react';
+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 = {} } = props, rest = __rest(props, ["value", "content", "options", "okButtonProps", "cancelButtonProps", "title", "open", "menuRef", "onChange", "onOk", "contentWrapperProps"]);
+    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) => {
-        var _a;
-        if (!((_a = ref === null || ref === void 0 ? void 0 : ref.menu) === null || _a === void 0 ? void 0 : _a.list))
+        if (!ref?.menu?.list)
             return;
         if (menuRefProp) {
             menuRefProp(ref.menu.list);
@@ -50,7 +39,11 @@ export const ModalSelect = (props) => {
         if (onOk)
             onOk(e, selected);
     };
-    return (React.createElement(StyledModal, Object.assign({}, rest, { open: open, onOk: handleOk, okButtonProps: Object.assign(Object.assign({}, okButtonProps), { className: `${okButtonProps.className} ok-btn` }), cancelButtonProps: Object.assign(Object.assign({}, cancelButtonProps), { className: `${cancelButtonProps.className} cancel-btn` }), title: title || 'Select' }),
-        React.createElement(Menu, { ref: handleSetMenuRef, items: options, selectedKeys: [selected || ''], onClick: info => handleClickItem(info.key) }),
-        React.createElement("div", Object.assign({}, contentWrapperProps, { className: clsx(contentWrapperProps === null || contentWrapperProps === void 0 ? void 0 : contentWrapperProps.className, 'ModalSelect-content') }), renderContent())));
+    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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 export declare const ModalSelect: {
-    Modal: (props: import("./types").ModalSelectProps) => import("react").JSX.Element;
-    Card: (props: import("antd").CardProps) => import("react").JSX.Element;
-    CardRecommended: (props: import("./types").CardRecommendedProps) => import("react").JSX.Element;
-    CardDefination: (props: import("./types").CardDefinationProps) => import("react").JSX.Element;
+    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/styled.js

@@ -128,7 +128,7 @@ export const CardDefinationContainer = styled.div `
 
     .antsomi-typography-collapse {
       font-weight: 500;
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+      color: ${globalToken?.colorPrimary};
       cursor: pointer;
     }
   }
@@ -147,7 +147,7 @@ export const CardRecommendedContainer = styled.div `
     row-gap: 8px;
 
     > .item {
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorText};
+      color: ${globalToken?.colorText};
       line-height: 14px;
       font-size: 12px;
       padding: 5px 10px;

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/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.js

@@ -1,23 +1,12 @@
-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;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useEffect, useRef, useState } from 'react';
+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 = (_a) => {
-    var restProps = __rest(_a, []);
+export const ProcessLoading = ({ ...restProps }) => {
     // Props
     const { open, message = 'Loading ...', timeout } = restProps;
     // State
@@ -25,10 +14,7 @@ export const ProcessLoading = (_a) => {
     // Ref
     const timeoutShowAlert = useRef(null);
     // Variables
-    const { second = 7, message: timeOutMessage = (React.createElement("div", null,
-        "This might take a little longer than usual. ",
-        React.createElement("br", null),
-        "Thank you for waiting!")), show: showTimeOutMessage = true, } = timeout || {};
+    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(() => {
@@ -53,23 +39,18 @@ export const ProcessLoading = (_a) => {
             draftMessage = message;
         }
         if (draftMessage) {
-            return (React.createElement(Typography.Text
+            return (_jsx(Typography.Text
             /* Key to force update for refresh animation when timeout */
-            , { 
-                /* Key to force update for refresh animation when timeout */
-                key: !showTimeOutMessage ? '1' : `${isShowTimeoutMessage}`, className: "animate__animated animate__fadeIn", style: { lineHeight: '14.06px' } }, draftMessage));
+            , { className: "animate__animated animate__fadeIn", style: { lineHeight: '14.06px' }, children: draftMessage }, !showTimeOutMessage ? '1' : `${isShowTimeoutMessage}`));
         }
         return null;
     };
-    return (React.createElement(ModalV2, Object.assign({ closable: false, destroyOnClose: true }, restProps, { footer: null, centered: true, width: "300px", styles: {
+    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)`,
             },
-        } }),
-        React.createElement(ProcessLoadingContent, { vertical: true, align: "center", justify: "center", gap: 16 },
-            React.createElement(Spin, { spinning: true, showIndicatorBackground: true }),
-            renderMessage())));
+        }, children: _jsxs(ProcessLoadingContent, { vertical: true, align: "center", justify: "center", gap: 16, children: [_jsx(Spin, { spinning: true, showIndicatorBackground: true }), renderMessage()] }) }));
 };

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

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