@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/index.js

@@ -1,16 +1,6 @@
-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, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { isEmpty } from 'lodash';
 // Components
 import { Icon } from '@antscorp/antsomi-ui/es/components';
@@ -35,7 +25,7 @@ export const RichMenuCell = props => {
         try {
             e.stopPropagation();
             if (videoRef.current) {
-                setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'playing' })));
+                setVideoState(prev => ({ ...prev, status: 'playing' }));
                 videoRef.current.play();
             }
         }
@@ -48,7 +38,7 @@ export const RichMenuCell = props => {
         try {
             e.stopPropagation();
             if (videoRef.current) {
-                setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'idle' })));
+                setVideoState(prev => ({ ...prev, status: 'idle' }));
                 videoRef.current.pause();
             }
         }
@@ -59,17 +49,15 @@ export const RichMenuCell = props => {
     };
     const renderCellContent = (isShow, cellInfo) => {
         if (!isShow ||
-            (layerActive === 'video' && +context === cellActiveIdx && (action === null || action === void 0 ? void 0 : action.type) === 'video'))
+            (layerActive === 'video' && +context === cellActiveIdx && action?.type === 'video'))
             return null;
         const { image, active } = cellInfo;
         const { imageUrl, imageStyles } = image;
-        const { objectPosition, objectFit } = imageStyles, restImageStyles = __rest(imageStyles, ["objectPosition", "objectFit"]);
+        const { objectPosition, objectFit, ...restImageStyles } = imageStyles;
         const isBlank = isEmpty(imageUrl);
         if (isBlank)
-            return (React.createElement(AddContainer, { className: "cell-add-container" },
-                React.createElement(Icon, { type: "icon-ants-plus-circle", size: 20, style: { color: 'rgba(0, 95, 184, 1)' } }),
-                React.createElement(AddLabel, null, t(translations.cellAction).toString())));
-        return (React.createElement(CellImage, { active: active && !isPreview, src: imageUrl, imagePosition: objectPosition, imageSize: objectFit, style: restImageStyles }));
+            return (_jsxs(AddContainer, { className: "cell-add-container", children: [_jsx(Icon, { type: "icon-ants-plus-circle", size: 20, style: { color: 'rgba(0, 95, 184, 1)' } }), _jsx(AddLabel, { children: t(translations.cellAction).toString() })] }));
+        return (_jsx(CellImage, { active: active && !isPreview, src: imageUrl, imagePosition: objectPosition, imageSize: objectFit, style: restImageStyles }));
     };
     const renderVideoLayer = (action, cell) => {
         if (!action ||
@@ -80,31 +68,16 @@ export const RichMenuCell = props => {
         const { active } = cell;
         if (!previewImage && !videoUrl)
             return null;
-        return (React.createElement(LayerVideoContainer, { active: active && !isPreview && videoState.status === 'idle' },
-            !isPreview && videoUrl && (React.createElement(Video, { ref: videoRef, style: { width: '100%', height: '100%', objectFit: 'cover' }, onEnded: () => {
-                    setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'idle' })));
-                }, onClick: handleVideoStop, onLoadedData: () => {
-                    setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'idle' })));
-                } },
-                React.createElement("source", { src: videoUrl, type: "video/mp4" }))),
-            previewImage && (videoState.status === 'idle' || isPreview) && (React.createElement(ThumbnailBox, null,
-                React.createElement(Image, { src: previewImage, alt: "thumbnail" }))),
-            (videoState.status === 'idle' || isPreview) && videoUrl && (React.createElement(VideoAction, { className: "video-capture-action-ignore" },
-                React.createElement(ActionButton, { id: "video-capture-action-play", onClick: handleVideoPlay },
-                    React.createElement(Icon, { type: "icon-ants-play-circle", size: 24, style: { width: 26, color: '#fff' } }),
-                    isAddLabel && React.createElement(ActionButtonLabel, null, "Play")),
-                isAddLabel && action.label && (React.createElement(Link, Object.assign({ id: "video-capture-action-external" }, (isActionLink
-                    ? { href: action.externalUrl, target: '_blank', rel: 'noreferrer' }
-                    : {})),
-                    React.createElement("div", { style: { width: 26 } },
-                        React.createElement(CircleBorder, null,
-                            React.createElement(Icon, { type: "icon-ants-redo", size: 14, style: { color: '#fff', height: '17px' } }))),
-                    React.createElement(ActionButtonLabel, null, action.label)))))));
+        return (_jsxs(LayerVideoContainer, { active: active && !isPreview && videoState.status === 'idle', children: [!isPreview && videoUrl && (_jsx(Video, { ref: videoRef, style: { width: '100%', height: '100%', objectFit: 'cover' }, onEnded: () => {
+                        setVideoState(prev => ({ ...prev, status: 'idle' }));
+                    }, onClick: handleVideoStop, onLoadedData: () => {
+                        setVideoState(prev => ({ ...prev, status: 'idle' }));
+                    }, children: _jsx("source", { src: videoUrl, type: "video/mp4" }) })), previewImage && (videoState.status === 'idle' || isPreview) && (_jsx(ThumbnailBox, { children: _jsx(Image, { src: previewImage, alt: "thumbnail" }) })), (videoState.status === 'idle' || isPreview) && videoUrl && (_jsxs(VideoAction, { className: "video-capture-action-ignore", children: [_jsxs(ActionButton, { id: "video-capture-action-play", onClick: handleVideoPlay, children: [_jsx(Icon, { type: "icon-ants-play-circle", size: 24, style: { width: 26, color: '#fff' } }), isAddLabel && _jsx(ActionButtonLabel, { children: "Play" })] }), isAddLabel && action.label && (_jsxs(Link, { id: "video-capture-action-external", ...(isActionLink
+                                ? { href: action.externalUrl, target: '_blank', rel: 'noreferrer' }
+                                : {}), children: [_jsx("div", { style: { width: 26 }, children: _jsx(CircleBorder, { children: _jsx(Icon, { type: "icon-ants-redo", size: 14, style: { color: '#fff', height: '17px' } }) }) }), _jsx(ActionButtonLabel, { children: action.label })] }))] }))] }));
     };
-    return (React.createElement(CellContainer, { key: context, style: !isSingleMode ? areaStyles : {}, onClick: e => {
+    return (_jsxs(CellContainer, { style: !isSingleMode ? areaStyles : {}, onClick: e => {
             e.stopPropagation();
             tryCatchWrapper(onClick, PATH)(context);
-        } },
-        renderCellContent(!isSingleMode, cell),
-        renderVideoLayer(action, cell)));
+        }, children: [renderCellContent(!isSingleMode, cell), renderVideoLayer(action, cell)] }, context));
 };

package/es/components/molecules/RichMenu/RichMenuBlock/styled.js

@@ -5,8 +5,8 @@ export const StyledRichMenu = styled.div `
   width: 100%;
   grid-gap: 1px;
   aspect-ratio: ${({ $isCompact }) => ($isCompact ? '3 / 1' : '3/ 2')};
-  grid-template-columns: ${({ $gridTemplateCols }) => $gridTemplateCols === null || $gridTemplateCols === void 0 ? void 0 : $gridTemplateCols.map(col => col).join(' ')};
-  grid-template-rows: ${({ $gridTemplateRows }) => $gridTemplateRows === null || $gridTemplateRows === void 0 ? void 0 : $gridTemplateRows.map(row => row).join(' ')};
+  grid-template-columns: ${({ $gridTemplateCols }) => $gridTemplateCols?.map(col => col).join(' ')};
+  grid-template-rows: ${({ $gridTemplateRows }) => $gridTemplateRows?.map(row => row).join(' ')};
 `;
 export const StyledCell = styled.div `
   display: flex;

package/es/components/molecules/RichMenu/RichMenuChatBar/RichMenuChatBar.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, Fragment as _Fragment } from "react/jsx-runtime";
 // Components
 import { Icon, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styles
@@ -23,11 +11,7 @@ const defaultProps = {
     showTypingChat: false,
 };
 export const RichMenuChatBar = props => {
-    const { disabled, label, showRichMenu, showTypingChat, className, size, onToggleRichMenu, onToggleTypingChat = () => { } } = props, restOfProps = __rest(props, ["disabled", "label", "showRichMenu", "showTypingChat", "className", "size", "onToggleRichMenu", "onToggleTypingChat"]);
-    return (React.createElement(ChatBarWrapper, Object.assign({ "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, "$size": size, className: `antsomi-chat-bar ${className}` }, restOfProps), showTypingChat ? (React.createElement(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (React.createElement(React.Fragment, null,
-        React.createElement(Icon, { type: "icon-ants-keyboard", className: "icon-keyboard", onClick: () => onToggleTypingChat(!showTypingChat) }),
-        React.createElement(ChatBarMenuBox, { onClick: () => onToggleRichMenu && onToggleRichMenu(!showRichMenu) },
-            React.createElement(Typography.Text, { className: "ants-text-sm" }, label),
-            label && React.createElement(Icon, { className: "icon-caret", type: "icon-ants-caret-down", size: 10 }))))));
+    const { disabled, label, showRichMenu, showTypingChat, className, size, onToggleRichMenu, onToggleTypingChat = () => { }, ...restOfProps } = props;
+    return (_jsx(ChatBarWrapper, { "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, "$size": size, className: `antsomi-chat-bar ${className}`, ...restOfProps, children: showTypingChat ? (_jsx(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { type: "icon-ants-keyboard", className: "icon-keyboard", onClick: () => onToggleTypingChat(!showTypingChat) }), _jsxs(ChatBarMenuBox, { onClick: () => onToggleRichMenu && onToggleRichMenu(!showRichMenu), children: [_jsx(Typography.Text, { className: "ants-text-sm", children: label }), label && _jsx(Icon, { className: "icon-caret", type: "icon-ants-caret-down", size: 10 })] })] })) }));
 };
 RichMenuChatBar.defaultProps = defaultProps;

package/es/components/molecules/RichMenu/RichMenuChatBar/TypingChat/index.js

@@ -1,15 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import { Icon } from '@antscorp/antsomi-ui/es/components/atoms';
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Styled
 import { TypingChatWrapper, TypingInput, TypingWrapper } from './styled';
 export const TypingChat = memo(props => {
     const { onClickMenu } = props;
-    return (React.createElement(TypingChatWrapper, { gap: 8, justify: "space-between", align: "center" },
-        React.createElement(Icon, { type: "icon-ants-list-view-thumbnail", className: "ants-cursor-pointer", onClick: () => onClickMenu && onClickMenu() }),
-        React.createElement(Icon, { type: "icon-ants-angle-right", className: "icon-angle", size: 14 }),
-        React.createElement(TypingWrapper, null,
-            React.createElement(TypingInput, { placeholder: "Aa" }),
-            React.createElement(Icon, { type: "icon-ants-smile-face", size: 16 })),
-        React.createElement(Icon, { type: "icon-ants-big-search", className: "icon-search" })));
+    return (_jsxs(TypingChatWrapper, { gap: 8, justify: "space-between", align: "center", children: [_jsx(Icon, { type: "icon-ants-list-view-thumbnail", className: "ants-cursor-pointer", onClick: () => onClickMenu && onClickMenu() }), _jsx(Icon, { type: "icon-ants-angle-right", className: "icon-angle", size: 14 }), _jsxs(TypingWrapper, { children: [_jsx(TypingInput, { placeholder: "Aa" }), _jsx(Icon, { type: "icon-ants-smile-face", size: 16 })] }), _jsx(Icon, { type: "icon-ants-big-search", className: "icon-search" })] }));
 });

package/es/components/molecules/RichMenu/RichMenuChatBar/TypingChat/styled.js

@@ -1,7 +1,7 @@
 // Libraries
-import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
-// Styled
 import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 export const TypingInput = styled.input `
   width: 100%;
   border-radius: 18px;

package/es/components/molecules/RichMenu/RichMenuChatBar/styled.js

@@ -1,7 +1,7 @@
 // Libraries
 import styled, { css } from 'styled-components';
 // Components
-import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 export const ChatBarWrapper = styled(Flex) `
   position: relative;
   height: ${props => (props.$size === 'medium' ? 65 : 84)}px;

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.js

@@ -1,16 +1,6 @@
-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, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import React, { useState } from 'react';
+import { useState } from 'react';
 // Assets
 import IphoneTopBar from '@antscorp/antsomi-ui/es/assets/images/iphone-top-bar.png';
 import TailMessage from '@antscorp/antsomi-ui/es/assets/images/tail.png';
@@ -22,7 +12,7 @@ import { RichMenuBlock } from '../RichMenuBlock';
 // Styles
 import { Image, Message, MessageBox, MessageWrapper, Profile, MobileContent, RichMenuWrapper, TopBar, } from './styled';
 export const RichMenuMobileView = props => {
-    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag, messagePreview, backgroundColor, size } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell", "reCalculateFlag", "messagePreview", "backgroundColor", "size"]);
+    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag, messagePreview, backgroundColor, size, ...restOfProps } = props;
     // State
     const [state, setState] = useState({
         showRichMenu: true,
@@ -31,26 +21,14 @@ export const RichMenuMobileView = props => {
     });
     // Variables
     const { showRichMenu, showTypingChat } = state;
-    return (React.createElement(MobileFrame, Object.assign({ size: size, backgroundColor: backgroundColor, className: `ants-mx-auto ${className}` }, restOfProps),
-        isPreview && (React.createElement(React.Fragment, null,
-            React.createElement(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }),
-            (messagePreview === null || messagePreview === void 0 ? void 0 : messagePreview.show) && (React.createElement(MessageBox, null,
-                React.createElement(Profile, null,
-                    React.createElement(Image, { src: ProfileMessage, alt: "profile user" })),
-                React.createElement(MessageWrapper, null,
-                    React.createElement("div", { style: {
-                            position: 'absolute',
-                            top: '-5px',
-                            left: '-10px',
-                            width: 20,
-                            height: 20,
-                        } },
-                        React.createElement(Image, { src: TailMessage, alt: "tail decorator", style: { objectFit: 'contain' } })),
-                    React.createElement(Message, null, (messagePreview === null || messagePreview === void 0 ? void 0 : messagePreview.text) ||
-                        `Antsomi CDP 365 helps businesses decode their customer data, understand the
+    return (_jsxs(MobileFrame, { size: size, backgroundColor: backgroundColor, className: `ants-mx-auto ${className}`, ...restOfProps, children: [isPreview && (_jsxs(_Fragment, { children: [_jsx(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }), messagePreview?.show && (_jsxs(MessageBox, { children: [_jsx(Profile, { children: _jsx(Image, { src: ProfileMessage, alt: "profile user" }) }), _jsxs(MessageWrapper, { children: [_jsx("div", { style: {
+                                            position: 'absolute',
+                                            top: '-5px',
+                                            left: '-10px',
+                                            width: 20,
+                                            height: 20,
+                                        }, children: _jsx(Image, { src: TailMessage, alt: "tail decorator", style: { objectFit: 'contain' } }) }), _jsx(Message, { children: messagePreview?.text ||
+                                            `Antsomi CDP 365 helps businesses decode their customer data, understand the
 nuances of their customer lifecycles, and act on them – 24 hours a day, 365 days a
-year.`)))))),
-        React.createElement(MobileContent, null,
-            React.createElement(RichMenuWrapper, { "$showRichMenu": showRichMenu && !showTypingChat, "$isPreview": !!isPreview }, richMenu && (React.createElement(RichMenuBlock, { richMenu: richMenu, isPreview: isPreview, onChange: onChangeRichMenu, onClickCell: onClickCell, reCalculateFlag: reCalculateFlag }))),
-            React.createElement(RichMenuChatBar, { disabled: !isPreview, label: richMenu === null || richMenu === void 0 ? void 0 : richMenu.chatBar.label, size: size, showRichMenu: showRichMenu, showTypingChat: showTypingChat, onToggleRichMenu: showRichMenu => setState(prevState => (Object.assign(Object.assign({}, prevState), { showRichMenu: !!showRichMenu }))), onToggleTypingChat: showTypingChat => setState(prevState => (Object.assign(Object.assign({}, prevState), { showTypingChat: !!showTypingChat }))) }))));
+year.` })] })] }))] })), _jsxs(MobileContent, { children: [_jsx(RichMenuWrapper, { "$showRichMenu": showRichMenu && !showTypingChat, "$isPreview": !!isPreview, children: richMenu && (_jsx(RichMenuBlock, { richMenu: richMenu, isPreview: isPreview, onChange: onChangeRichMenu, onClickCell: onClickCell, reCalculateFlag: reCalculateFlag })) }), _jsx(RichMenuChatBar, { disabled: !isPreview, label: richMenu?.chatBar.label, size: size, showRichMenu: showRichMenu, showTypingChat: showTypingChat, onToggleRichMenu: showRichMenu => setState(prevState => ({ ...prevState, showRichMenu: !!showRichMenu })), onToggleTypingChat: showTypingChat => setState(prevState => ({ ...prevState, showTypingChat: !!showTypingChat })) })] })] }));
 };

package/es/components/molecules/RichMenu/RichMenuMobileView/styled.js

@@ -1,4 +1,3 @@
-var _a;
 // Libraries
 import styled, { css } from 'styled-components';
 // Constants
@@ -37,7 +36,7 @@ export const Image = styled.img `
 `;
 export const Message = styled.div `
   color: rgba(37, 37, 37, 1);
-  font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+  font-size: ${THEME.token?.fontSize}px;
   line-height: 16px;
 `;
 export const MessageWrapper = styled.div `

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import './styles.scss';
 import { SearchPopoverProps } from './types';
-export declare const SearchPopover: (props: SearchPopoverProps) => React.JSX.Element;
+export declare const SearchPopover: (props: SearchPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/SearchPopover/SearchPopover.js

@@ -1,24 +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;
-};
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover } from 'antd';
 import { Icon } from '../../atoms';
 import './styles.scss';
 import clsx from 'clsx';
 import { StyledInput } from './styled';
 export const SearchPopover = (props) => {
-    const { inputSearchProps = {} } = props, popoverProps = __rest(props, ["inputSearchProps"]);
-    const { overlayClassName, arrow = false, children, content, trigger = ['click'] } = popoverProps, restPopoverProps = __rest(popoverProps, ["overlayClassName", "arrow", "children", "content", "trigger"]);
-    return (React.createElement(Popover, Object.assign({ trigger: trigger, arrow: arrow, destroyTooltipOnHide: true }, restPopoverProps, { overlayClassName: clsx('search-popover-overlay', overlayClassName), overlay: true, content: React.createElement(React.Fragment, null,
-            React.createElement(StyledInput, Object.assign({ placeholder: (inputSearchProps === null || inputSearchProps === void 0 ? void 0 : inputSearchProps.placeholder) || 'Search...', bordered: false }, inputSearchProps, { addonAfter: React.createElement(Icon, { type: "icon-ants-search-2" }), withWrapper: false })),
-            content) }), children));
+    const { inputSearchProps = {}, ...popoverProps } = props;
+    const { overlayClassName, arrow = false, children, content, trigger = ['click'], ...restPopoverProps } = popoverProps;
+    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('search-popover-overlay', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { placeholder: inputSearchProps?.placeholder || 'Search...', bordered: false, ...inputSearchProps, addonAfter: _jsx(Icon, { type: "icon-ants-search-2" }), withWrapper: false }), content] }), children: children }));
 };

package/es/components/molecules/SearchPopover/components/PopoverAddField/PopoverAddField.d.ts

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

package/es/components/molecules/SearchPopover/components/PopoverAddField/PopoverAddField.js

@@ -1,22 +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 React, { useCallback, useMemo } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
 import clsx from 'clsx';
 import { Button, Icon } from '../../../../atoms';
 import { renderIconField } from '../../utils';
 import { PopoverSelect } from '../PopoverSelect';
 import { Typography } from 'antd';
 export const PopoverAddField = (props) => {
-    const { fields, onSearchPredicate, className, children } = props, rest = __rest(props, ["fields", "onSearchPredicate", "className", "children"]);
+    const { fields, onSearchPredicate, className, children, ...rest } = props;
     const originalFieldByKey = useMemo(() => new Map(fields.map(field => [field.key, field])), [fields]);
     const handleOnSearchPredicate = useCallback((option) => {
         const originalField = originalFieldByKey.get(option.key);
@@ -27,16 +17,14 @@ export const PopoverAddField = (props) => {
         }
         return false;
     }, [onSearchPredicate, originalFieldByKey]);
-    const options = useCallback((params) => fields.map(field => (Object.assign(Object.assign({}, field), { label: (React.createElement(React.Fragment, null,
-            field.dataType && renderIconField(field.dataType),
-            typeof field.label === 'string' && (React.createElement(Typography.Text, { ellipsis: {
-                    tooltip: true,
-                } }, field.label)),
-            typeof field.label === 'function' &&
-                field.label({
-                    selected: params.selected.includes(field.key),
-                }))) }))), [fields]);
-    return (React.createElement(PopoverSelect, Object.assign({}, rest, { options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields') }), children || (React.createElement(Button, { type: "text" },
-        React.createElement(Icon, { type: "icon-ants-plus-slim", size: 14 }),
-        "Add fields"))));
+    const options = useCallback((params) => fields.map(field => ({
+        ...field,
+        label: (_jsxs(_Fragment, { children: [field.dataType && renderIconField(field.dataType), typeof field.label === 'string' && (_jsx(Typography.Text, { ellipsis: {
+                        tooltip: true,
+                    }, children: field.label })), typeof field.label === 'function' &&
+                    field.label({
+                        selected: params.selected.includes(field.key),
+                    })] })),
+    })), [fields]);
+    return (_jsx(PopoverSelect, { ...rest, options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields'), children: children || (_jsxs(Button, { type: "text", children: [_jsx(Icon, { type: "icon-ants-plus-slim", size: 14 }), "Add fields"] })) }));
 };

package/es/components/molecules/SearchPopover/components/PopoverSelect/PopoverSelect.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Option, PopoverSelectProps } from '../../types';
 import './styles.scss';
-export declare const PopoverSelect: <TOption extends Option>(props: PopoverSelectProps<TOption>) => React.JSX.Element;
+export declare const PopoverSelect: <TOption extends Option>(props: PopoverSelectProps<TOption>) => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/SearchPopover/components/PopoverSelect/PopoverSelect.js

@@ -1,15 +1,5 @@
-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, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { SearchPopover } from '../../SearchPopover';
 import './styles.scss';
@@ -22,9 +12,8 @@ import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 const { t } = i18nInstance;
 export const PopoverSelect = (props) => {
-    var _a, _b;
-    const { open: openProp, selected, options: optionsProp = [], onCancel, onApply, inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', onSearchPredicate } = props, rest = __rest(props, ["open", "selected", "options", "onCancel", "onApply", "inputSearchProps", "children", "showAllLabel", "showSelectedLabel", "selectAllLabel", "deselectAllLabel", "onSearchPredicate"]);
-    const { value: searchValue } = inputSearchProps, restInputSearchProps = __rest(inputSearchProps, ["value"]);
+    const { open: openProp, selected, options: optionsProp = [], onCancel, onApply, inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', onSearchPredicate, ...rest } = props;
+    const { value: searchValue, ...restInputSearchProps } = inputSearchProps;
     const refOnSearchPredicate = useRef(onSearchPredicate);
     useEffect(() => {
         refOnSearchPredicate.current = onSearchPredicate;
@@ -122,16 +111,11 @@ export const PopoverSelect = (props) => {
         }
         return option.label;
     };
-    return (React.createElement(SearchPopover, Object.assign({}, rest, { content: React.createElement(React.Fragment, null,
-            optionsProp.length > 0 && (React.createElement(StyledAction, null,
-                React.createElement(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current) }, showSelected ? showAllLabel : showSelectedLabel),
-                selectedKeys.size === options.length ? (React.createElement(Button, { type: "link", onClick: handleDeselectAll }, deselectAllLabel)) : (React.createElement(Button, { type: "link", onClick: handleSelectAll }, selectAllLabel)))),
-            filteredOptions.length ? (React.createElement(StyledListFieldsWrapper, { autoHeight: true, autoHeightMax: 260 },
-                React.createElement(List, { bordered: false, dataSource: filteredOptions, renderItem: option => (React.createElement(List.Item, null,
-                        React.createElement(Checkbox, { onChange: e => handleToggleField(option, e.target.checked), checked: selectedKeys.has(option.key) }, renderCheckBoxLabel(option)))) }))) : (React.createElement(EmptyData, { showIcon: false, description: t(translations.noData).toString() })),
-            React.createElement(StyledFooter, null,
-                React.createElement(Button, { onClick: handleCancel }, "Cancel"),
-                React.createElement(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary" }, "Apply"))), overlayInnerStyle: {
-            '--item-padding': `${((_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemPaddingInline) || 10}px`,
-        }, trigger: ['click'], placement: "bottomLeft", open: open, inputSearchProps: Object.assign(Object.assign({}, restInputSearchProps), { value: search, onAfterChange: handleOnSearch }), afterOpenChange: handleAfterOpenChange, onOpenChange: handleOpenChange }), children || React.createElement(Button, null, "Select")));
+    return (_jsx(SearchPopover, { ...rest, content: _jsxs(_Fragment, { children: [optionsProp.length > 0 && (_jsxs(StyledAction, { children: [_jsx(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current), children: showSelected ? showAllLabel : showSelectedLabel }), selectedKeys.size === options.length ? (_jsx(Button, { type: "link", onClick: handleDeselectAll, children: deselectAllLabel })) : (_jsx(Button, { type: "link", onClick: handleSelectAll, children: selectAllLabel }))] })), filteredOptions.length ? (_jsx(StyledListFieldsWrapper, { autoHeight: true, autoHeightMax: 260, children: _jsx(List, { bordered: false, dataSource: filteredOptions, renderItem: option => (_jsx(List.Item, { children: _jsx(Checkbox, { onChange: e => handleToggleField(option, e.target.checked), checked: selectedKeys.has(option.key), children: renderCheckBoxLabel(option) }) })) }) })) : (_jsx(EmptyData, { showIcon: false, description: t(translations.noData).toString() })), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: handleCancel, children: "Cancel" }), _jsx(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary", children: "Apply" })] })] }), overlayInnerStyle: {
+            '--item-padding': `${THEME.components?.Menu?.itemPaddingInline || 10}px`,
+        }, trigger: ['click'], placement: "bottomLeft", open: open, inputSearchProps: {
+            ...restInputSearchProps,
+            value: search,
+            onAfterChange: handleOnSearch,
+        }, afterOpenChange: handleAfterOpenChange, onOpenChange: handleOpenChange, children: children || _jsx(Button, { children: "Select" }) }));
 };

package/es/components/molecules/SearchPopover/components/PopoverSelect/styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAction: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledListFieldsWrapper: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/atoms").ScrollbarsProps>, any, {}, never>;
+export declare const StyledListFieldsWrapper: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/es/components/molecules/SearchPopover/components/PopoverSelect/styled.js

@@ -1,4 +1,4 @@
-var _a, _b;
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Scrollbars } from '@antscorp/antsomi-ui/es/components/atoms';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
@@ -22,12 +22,12 @@ export const StyledAction = styled.div `
     padding: 0 10px;
   }
 `;
-export const StyledListFieldsWrapper = styled(Scrollbars) `
+export const StyledListFieldsWrapper = styled(props => _jsx(Scrollbars, { ...props })) `
   .antsomi-list-items {
     > .antsomi-list-item {
       padding: 0;
       border-bottom: 0;
-      height: ${((_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemHeight) || 35}px;
+      height: ${THEME.components?.Menu?.itemHeight || 35}px;
 
       > .antsomi-checkbox-wrapper {
         padding: 0 var(--item-padding);

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

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const StyledInput: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
+export declare const StyledInput: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

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

@@ -1,6 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { Input } from '../../atoms';
-export const StyledInput = styled(Input) `
+export const StyledInput = styled(props => _jsx(Input, { ...props })) `
   &.antsomi-input-group-wrapper {
     padding: 8px 10px;
     border-bottom: 1px solid var(--divider-1);

package/es/components/molecules/SearchPopover/utils.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare const renderIconField: (dataType?: string | number) => React.JSX.Element;
+export declare const renderIconField: (dataType?: string | number) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from '../../atoms/Icon';
 import { FIELD_DATA_TYPE } from './constants';
 export const renderIconField = (dataType = FIELD_DATA_TYPE.STRING.name) => {
@@ -7,17 +7,17 @@ export const renderIconField = (dataType = FIELD_DATA_TYPE.STRING.name) => {
         case FIELD_DATA_TYPE.STRING.value:
         case FIELD_DATA_TYPE.TEXT.name:
         case FIELD_DATA_TYPE.TEXT.value:
-            return React.createElement(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+            return _jsx(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
         case FIELD_DATA_TYPE.BOOLEAN.name:
         case FIELD_DATA_TYPE.BOOLEAN.value:
-            return React.createElement(Icon, { type: "icon-ants-boolean", style: { color: '#51a5d5' } });
+            return _jsx(Icon, { type: "icon-ants-boolean", style: { color: '#51a5d5' } });
         case FIELD_DATA_TYPE.NUMBER.name:
         case FIELD_DATA_TYPE.NUMBER.value:
-            return React.createElement(Icon, { type: "icon-ants-123", style: { color: '#51a5d5' } });
+            return _jsx(Icon, { type: "icon-ants-123", style: { color: '#51a5d5' } });
         case FIELD_DATA_TYPE.DATE_TIME.name:
         case FIELD_DATA_TYPE.DATE_TIME.value:
-            return React.createElement(Icon, { type: "icon-ants-calendar-v2", style: { color: '#56b261' } });
+            return _jsx(Icon, { type: "icon-ants-calendar-v2", style: { color: '#56b261' } });
         default:
-            return React.createElement(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+            return _jsx(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
     }
 };

package/es/components/molecules/Select/Select.js

@@ -1,18 +1,6 @@
-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;
-};
-var _a;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import { Select as AntdSelect } from 'antd';
-import React from 'react';
 // Components
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Text } from '../../atoms/Text';
@@ -28,23 +16,20 @@ const tagRender = (props) => {
         event.preventDefault();
         event.stopPropagation();
     };
-    return (React.createElement(StyledTag, { onMouseDown: onPreventMouseDown, closable: closable, onClose: onClose, closeIcon: React.createElement(TagCloseBtn, null,
-            React.createElement(Icon, { type: "icon-ants-remove", className: "ants-text-primary", style: {
+    return (_jsx(StyledTag, { onMouseDown: onPreventMouseDown, closable: closable, onClose: onClose, closeIcon: _jsx(TagCloseBtn, { children: _jsx(Icon, { type: "icon-ants-remove", className: "ants-text-primary", style: {
                     fontSize: 10,
-                } })) }, label));
+                } }) }), children: label }));
 };
 const CustomSelect = props => {
-    const { label, labelProps } = props, rest = __rest(props, ["label", "labelProps"]);
-    return (React.createElement(Flex, { vertical: true, gap: 4 },
-        typeof label === 'string' ? React.createElement(Text, Object.assign({}, labelProps), label) : label,
-        React.createElement(AntdSelect, Object.assign({}, rest))));
+    const { label, labelProps, ...rest } = props;
+    return (_jsxs(Flex, { vertical: true, gap: 4, children: [typeof label === 'string' ? _jsx(Text, { ...labelProps, children: label }) : label, _jsx(AntdSelect, { ...rest })] }));
 };
 const Select = CustomSelect;
 Select.OptGroup = AntdSelect.OptGroup;
 Select.Option = AntdSelect.Option;
 Select.defaultProps = {
     labelProps: { color: '#66666' },
-    suffixIcon: (React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 16, color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw10 } })),
+    suffixIcon: (_jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: 16, color: THEME.token?.bw10 } })),
     tagRender,
 };
 export { Select };

package/es/components/molecules/Select/Test.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const SelectTest: () => React.JSX.Element;
+declare const SelectTest: () => import("react/jsx-runtime").JSX.Element;
 export default SelectTest;

package/es/components/molecules/Select/Test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Select } from './index';
 const options = [
     {
@@ -18,5 +18,5 @@ const options = [
         label: 'Item 4',
     },
 ];
-const SelectTest = () => React.createElement(Select, { options: options });
+const SelectTest = () => _jsx(Select, { options: options });
 export default SelectTest;