@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/molecules/ChatBox/ChatBoxInsight/MessageItem.js

@@ -1,4 +1,4 @@
-import Icon from '@antscorp/icons';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from 'clsx';
 import 'highlight.js/styles/vs2015.css';
 import React, { useEffect, useRef, useState } from 'react';
@@ -7,18 +7,23 @@ import rehypeHighlight from 'rehype-highlight';
 import remarkGfm from 'remark-gfm';
 // Atoms
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
-// Components
-import { GPTIcon, UserIcon } from '@antscorp/antsomi-ui/es/components/icons';
 // Style
-import { MessageItemWrapper, WrapperIsHelpful } from './styled';
+import { MessageItemWrapper } from './styled';
+// Components
+import AntsomiAI from '../AntsomiAI';
 const { Text } = Typography;
 const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avatar, idx, isPlaceholder, renderType, }) => {
     const isBot = role === "assistant" /* Role.Assistant */;
     const [text, setText] = useState(isBot && doAnimation ? '' : content);
     const contentRef = useRef();
     const MAP_ICON = {
-        ["assistant" /* Role.Assistant */]: React.createElement(GPTIcon, { className: clsx('icon', 'gpt') }),
-        ["user" /* Role.User */]: avatar ? (React.createElement("img", { className: clsx('avatar'), src: avatar, alt: "avatar" })) : (React.createElement(UserIcon, { className: clsx('icon', 'user') })),
+        ["assistant" /* Role.Assistant */]: _jsx(AntsomiAI, {}),
+        ["user" /* Role.User */]: null,
+        // [Role.User]: avatar ? (
+        //   <img className={clsx('avatar')} src={avatar} alt="avatar" />
+        // ) : (
+        //   <UserIcon className={clsx('icon', 'user')} />
+        // ),
     };
     useEffect(() => {
         if (isBot && doAnimation) {
@@ -44,10 +49,7 @@ const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avata
     }, [isBot]);
     const renderMarkdown = () => {
         try {
-            const newContent = isPlaceholder ? (React.createElement("div", { className: "reactMarkDown" },
-                React.createElement("pre", null,
-                    React.createElement("code", null,
-                        React.createElement("span", null))))) : (React.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], className: clsx('reactMarkDown', role === "user" /* Role.User */ && 'user') }, text));
+            const newContent = isPlaceholder ? (_jsx("div", { className: "reactMarkDown", children: _jsx("pre", { children: _jsx("code", { children: _jsx("span", {}) }) }) })) : (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], className: clsx('reactMarkDown', role === "user" /* Role.User */ && 'user'), children: text }));
             contentRef.current = newContent;
             return contentRef.current;
         }
@@ -55,18 +57,11 @@ const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avata
             return contentRef.current;
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MessageItemWrapper, { className: clsx({ greyBg: isBot }) },
-            MAP_ICON[role],
-            renderType === 'markdown' ? (React.createElement("div", { className: isPlaceholder || (isBot && doAnimation && text.length < content.length)
-                    ? 'ants-text-streaming'
-                    : '' }, renderMarkdown())) : (React.createElement(Text, { className: isPlaceholder || (isBot && doAnimation && text !== content)
-                    ? 'ants-text-streaming'
-                    : '' }, isPlaceholder ? '' : text))),
-        role === "assistant" /* Role.Assistant */ && (React.createElement(WrapperIsHelpful, null,
-            React.createElement("span", null, "Was this answer helful?"),
-            React.createElement(Icon, { className: "icon-vote", type: "icon-ants-angle-up" }),
-            React.createElement(Icon, { className: "icon-vote", type: "icon-ants-angle-down" })))));
+    return (_jsx(_Fragment, { children: _jsxs(MessageItemWrapper, { className: clsx({ sender: !isBot, bot: isBot }), children: [MAP_ICON[role], renderType === 'markdown' ? (_jsx("div", { className: clsx('answer', {
+                        'ants-text-streaming': isPlaceholder || (isBot && doAnimation && text.length < content.length),
+                    }), children: renderMarkdown() })) : (_jsx(Text, { className: clsx('answer', {
+                        'ants-text-streaming': isPlaceholder || (isBot && doAnimation && text !== content),
+                    }), children: isPlaceholder ? '' : text }))] }) }));
 };
 MessageItem.defaultProps = {
     renderType: 'markdown',

package/es/components/molecules/ChatBox/ChatBoxInsight/QuestionItem.js

@@ -1,11 +1,16 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 const Item = styled.div `
-  padding: 10px;
-  background-color: #f3f9ff;
+  padding: 5px 10px;
+  background-color: #ffffff;
+  border-radius: 10px;
   cursor: pointer;
+
+  &:hover {
+    background-color: #f2f9ff;
+  }
 `;
 export const QuestionItem = props => {
     const { message, onClickItem } = props;
-    return React.createElement(Item, { onClick: () => onClickItem(Object.assign({}, props)) }, message);
+    return _jsx(Item, { onClick: () => onClickItem({ ...props }), children: message });
 };

package/es/components/molecules/ChatBox/ChatBoxInsight/index.js

@@ -1,7 +1,6 @@
-/* eslint-disable prettier/prettier */
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
-import { PopupDraggable } from '../..';
+import { PopupDraggable } from '@antscorp/antsomi-ui/es/components/molecules/PopupDraggable';
 import { ChatBox } from './ChatBox';
 import { Header, WrapperBody, WrapperHeader } from './styled';
 export const ChatBoxInsight = props => {
@@ -20,19 +19,15 @@ export const ChatBoxInsight = props => {
     };
     if (!isShowPopup)
         return null;
-    return createPortal(React.createElement(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
+    return createPortal(_jsxs(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
             display: 'flex',
             flexDirection: 'column',
             textAlign: 'left',
             zIndex: 9999,
-        } },
-        React.createElement(WrapperHeader, { className: "cursor" },
-            React.createElement(Header, null, title)),
-        React.createElement(WrapperBody, { className: "popup-content", style: { padding: 0 } },
-            React.createElement(ChatBox, { domain: domain, userId: userId, token: token, avatar: avatar, lang: lang, chartSettings: chartSettings }))), document.body, 'PORTALS_ANTSOMI_PACKAGE_UI_KEY_POPUP');
+        }, children: [_jsx(WrapperHeader, { className: "cursor", children: _jsx(Header, { children: title }) }), _jsx(WrapperBody, { className: "popup-content", style: { padding: 0 }, children: _jsx(ChatBox, { domain: domain, userId: userId, token: token, avatar: avatar, lang: lang, chartSettings: chartSettings }) })] }), document.body, 'PORTALS_ANTSOMI_PACKAGE_UI_KEY_POPUP');
 };
 ChatBoxInsight.defaultProps = {
-    title: 'Insights',
+    title: 'Antsomi Intelligence',
     boundsDraggable: 'body',
     isShowResizeHover: true,
     configs: {

package/es/components/molecules/ChatBox/ChatBoxInsight/styled.d.ts

@@ -8,6 +8,7 @@ export declare const WarningWrapper: import("styled-components").StyledComponent
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TypingCursor: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperIsHelpful: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleSuggest: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperContentSuggest: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperHeader: import("styled-components").StyledComponent<"strong", any, {}, never>;
 export declare const Header: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

package/es/components/molecules/ChatBox/ChatBoxInsight/styled.js

@@ -1,4 +1,3 @@
-var _a, _b, _c;
 // Libraries
 import { Typography } from 'antd';
 import styled from 'styled-components';
@@ -20,7 +19,7 @@ export const ChatBoxWrapper = styled.div `
   flex-direction: column;
 
   font-family: Roboto, san-serif;
-  border: 1px solid #e5e5e5;
+  /* border: 1px solid #e5e5e5; */
   height: calc(100% - 50px);
 `;
 export const ChatBoxHeader = styled.div `
@@ -51,7 +50,7 @@ export const ChatBoxBody = styled.div `
   flex-direction: column;
   gap: 5px;
 
-  padding: 11px 0;
+  padding: 10px;
 
   ::-webkit-scrollbar {
     height: 1rem;
@@ -91,9 +90,9 @@ export const ChatBoxFooter = styled.div `
   background: #fff;
 `;
 export const MessageItemWrapper = styled.div `
-  margin: 0 11px;
-  padding: 10px;
-  border-radius: 3px;
+  /* margin: 0 11px;
+  padding: 10px; */
+  border-radius: 10px;
   background: transparent;
 
   display: flex;
@@ -101,6 +100,26 @@ export const MessageItemWrapper = styled.div `
   gap: 10px;
   // text-align: justify;
 
+  &.bot {
+    padding: 10px;
+    .answer {
+      background: ${THEME.token?.accent};
+    }
+  }
+  &.sender {
+    padding: 0 10px;
+    justify-content: flex-end;
+    .answer {
+      background: ${THEME.token?.blue};
+    }
+  }
+
+  .answer {
+    padding: 10px;
+    border-radius: 10px;
+    word-break: break-word;
+  }
+
   .icon {
     min-width: 30px;
     min-height: 30px;
@@ -123,7 +142,7 @@ export const MessageItemWrapper = styled.div `
 
   .reactMarkDown * {
     font-size: 12px;
-    line-height: 1.5;
+    line-height: 14px;
   }
   .reactMarkDown > *:first-child {
     margin-top: 0 !important;
@@ -152,7 +171,9 @@ export const MessageItemWrapper = styled.div `
     white-space: nowrap; /* Keeps the content on a single line */
     margin: 0 auto; /* Gives that scrolling effect as the typing happens */
     letter-spacing: 0.15em; /* Adjust as needed */
-    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+    animation:
+      typing 3.5s steps(40, end),
+      blink-caret 0.75s step-end infinite;
   }
 
   @keyframes cursor-blink {
@@ -216,7 +237,7 @@ export const MessageItemWrapper = styled.div `
   }
 
   &.greyBg {
-    background: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw2};
+    background: ${THEME.token?.bw2};
   }
   .reactMarkDown.user {
     padding: 5px;
@@ -224,36 +245,58 @@ export const MessageItemWrapper = styled.div `
   }
 `;
 export const WarningWrapper = styled.div `
-  padding: 10px;
   display: flex;
-  align-item: flex-start;
+  align-items: center;
   gap: 10px;
-  border: 1px solid #fec9c9;
-  background: #fec9c9;
-  margin: 0 10px;
+
+  padding: 10px;
+  margin: 10px 20px;
+
+  border-radius: 10px;
+  background: #ffd8db;
 
   .icon {
     min-width: 18px;
   }
 `;
 export const InputWrapper = styled.div `
-  min-height: 44px;
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 0 15px 0 10px;
-  margin: 10px;
 
-  border: 1px solid #e5e5e5;
-  background: #fff;
+  min-height: 50px;
+  max-height: 250px;
+  padding: 0px 15px;
+  margin: 10px 20px;
+
+  /* border: 1px solid #e5e5e5; */
+  background: #eef5fc;
+  border-radius: 25px;
 
   .input {
     border: none;
     font-size: 12px;
+    line-height: 1.5 !important;
+
+    /* padding: 10px 0px; */
+    min-height: auto !important;
+    max-height: 230px !important;
+    background: #eef5fc;
+    margin: 10px 0;
+    padding: 0;
 
     &:focus {
       outline: none !important;
       box-shadow: none !important;
+      background: #eef5fc;
+    }
+
+    &::placeholder {
+      font-size: 12px;
+      font-style: normal !important;
+      line-height: 1.5 !important;
+      color: #a2a2a2;
+      font-weight: 400;
     }
   }
   .submit-btn {
@@ -264,12 +307,16 @@ export const InputWrapper = styled.div `
     // border: 1px solid;
     position: relative;
     left: -3px;
+    background: #eef5fc;
+    color: #666666;
 
     &:focus {
       outline: none !important;
     }
     &.disabled {
       opacity: 0.65;
+      background-color: #f0f0f0;
+      color: #bebebe;
     }
   }
   .icon {
@@ -301,15 +348,22 @@ export const WrapperIsHelpful = styled.div `
     }
   }
 `;
+export const TitleSuggest = styled.div `
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 18.75px;
+  padding: 0 10px;
+  margin-bottom: 10px;
+`;
 export const WrapperContentSuggest = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 6px;
 `;
 export const WrapperHeader = styled.strong `
   display: block;
   height: 50px;
-  border-bottom: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw3};
+  border-bottom: 1px solid ${THEME.token?.bw3};
   line-height: 50px;
   padding-left: 15px;
   box-sizing: border-box;
@@ -320,7 +374,7 @@ export const WrapperHeader = styled.strong `
 `;
 export const Header = styled(AntText) `
   font-size: 16px !important;
-  color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorText} !important;
+  color: ${THEME.token?.colorText} !important;
   font-weight: normal !important;
 `;
 export const WrapperBody = styled.div `

package/es/components/molecules/ChatBox/MessageItem.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import ReactMarkdown from 'react-markdown';
@@ -6,18 +7,23 @@ import rehypeHighlight from 'rehype-highlight';
 import 'highlight.js/styles/vs2015.css';
 // Atoms
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
-// Components
-import { GPTIcon, UserIcon } from '@antscorp/antsomi-ui/es/components/icons';
 // Style
 import { MessageItemWrapper } from './styled';
+// Components
+import AntsomiAI from './AntsomiAI';
 const { Text } = Typography;
 const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avatar, idx, isPlaceholder, renderType, }) => {
     const isBot = role === "assistant" /* Role.Assistant */;
     const [text, setText] = useState(isBot && doAnimation ? '' : content);
     const contentRef = useRef();
     const MAP_ICON = {
-        ["assistant" /* Role.Assistant */]: React.createElement(GPTIcon, { className: clsx('icon', 'gpt') }),
-        ["user" /* Role.User */]: avatar ? (React.createElement("img", { className: clsx('avatar'), src: avatar, alt: "avatar" })) : (React.createElement(UserIcon, { className: clsx('icon', 'user') })),
+        ["assistant" /* Role.Assistant */]: _jsx(AntsomiAI, {}),
+        ["user" /* Role.User */]: null,
+        // [Role.User]: avatar ? (
+        //   <img className={clsx('avatar')} src={avatar} alt="avatar" />
+        // ) : (
+        //   <UserIcon className={clsx('icon', 'user')} />
+        // ),
     };
     useEffect(() => {
         if (isBot && doAnimation) {
@@ -43,10 +49,7 @@ const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avata
     }, [isBot]);
     const renderMarkdown = () => {
         try {
-            const newContent = isPlaceholder ? (React.createElement("div", { className: "reactMarkDown" },
-                React.createElement("pre", null,
-                    React.createElement("code", null,
-                        React.createElement("span", null))))) : (React.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], className: "reactMarkDown" }, text));
+            const newContent = isPlaceholder ? (_jsx("div", { className: "reactMarkDown", children: _jsx("pre", { children: _jsx("code", { children: _jsx("span", {}) }) }) })) : (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], className: "reactMarkDown", children: text }));
             contentRef.current = newContent;
             return contentRef.current;
         }
@@ -54,11 +57,11 @@ const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avata
             return contentRef.current;
         }
     };
-    return (React.createElement(MessageItemWrapper, { className: clsx({ greyBg: isBot }) },
-        MAP_ICON[role],
-        renderType === 'markdown' ? (React.createElement("div", { className: isPlaceholder || (isBot && doAnimation && text.length < content.length)
-                ? 'ants-text-streaming'
-                : '' }, renderMarkdown())) : (React.createElement(Text, { className: isPlaceholder || (isBot && doAnimation && text !== content) ? 'ants-text-streaming' : '' }, isPlaceholder ? '' : text))));
+    return (_jsxs(MessageItemWrapper, { className: clsx({ sender: !isBot, bot: isBot }), children: [MAP_ICON[role], renderType === 'markdown' ? (_jsx("div", { className: clsx('answer', {
+                    'ants-text-streaming': isPlaceholder || (isBot && doAnimation && text.length < content.length),
+                }), children: renderMarkdown() })) : (_jsx(Text, { className: clsx('answer', {
+                    'ants-text-streaming': isPlaceholder || (isBot && doAnimation && text !== content),
+                }), children: isPlaceholder ? '' : text }))] }));
 };
 MessageItem.defaultProps = {
     renderType: 'markdown',

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

@@ -1,11 +1,11 @@
-var _a;
 // Libraries
 import styled from 'styled-components';
 // Constantsim
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const ChatBoxWrapper = styled.div `
   box-sizing: border-box;
-  width: ${props => (props.withoutBox ? '100%' : '450px')};
+  min-width: 300px;
+  width: ${props => (props.withoutBox ? '100%' : '300px')};
   min-height: ${props => (props.withoutBox ? '100%' : '300px')};
   max-height: ${props => (props.withoutBox ? 'unset' : 'calc(100vh - 57px)')};
   position: ${props => (props.withoutBox ? 'static' : 'fixed')};
@@ -17,7 +17,7 @@ export const ChatBoxWrapper = styled.div `
   flex-direction: column;
 
   font-family: Roboto, san-serif;
-  border: 1px solid #e5e5e5;
+  /* border: 1px solid #e5e5e5; */
 `;
 export const ChatBoxHeader = styled.div `
   flex: 0 0 50px;
@@ -47,7 +47,7 @@ export const ChatBoxBody = styled.div `
   flex-direction: column;
   gap: 5px;
 
-  padding: 11px 0;
+  padding: 10px;
 
   ::-webkit-scrollbar {
     height: 1rem;
@@ -87,9 +87,9 @@ export const ChatBoxFooter = styled.div `
   background: #fff;
 `;
 export const MessageItemWrapper = styled.div `
-  margin: 0 11px;
-  padding: 10px;
-  border-radius: 3px;
+  /* margin: 0 11px; */
+  /* padding: 10px; */
+  border-radius: 10px;
   background: transparent;
 
   display: flex;
@@ -98,7 +98,27 @@ export const MessageItemWrapper = styled.div `
   // text-align: justify;
 
   &.greyBg {
-    background: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw2};
+    background: ${THEME.token?.bw2};
+  }
+
+  &.bot {
+    padding: 10px;
+    .answer {
+      background: ${THEME.token?.accent};
+    }
+  }
+  &.sender {
+    padding: 0 10px;
+    justify-content: flex-end;
+    .answer {
+      background: ${THEME.token?.blue};
+    }
+  }
+
+  .answer {
+    padding: 10px;
+    border-radius: 10px;
+    word-break: break-word;
   }
 
   .icon {
@@ -122,7 +142,7 @@ export const MessageItemWrapper = styled.div `
   }
   .reactMarkDown * {
     font-size: 12px;
-    line-height: 1.5;
+    line-height: 14px;
   }
   .reactMarkDown > *:first-child {
     margin-top: 0 !important;
@@ -151,7 +171,9 @@ export const MessageItemWrapper = styled.div `
     white-space: nowrap; /* Keeps the content on a single line */
     margin: 0 auto; /* Gives that scrolling effect as the typing happens */
     letter-spacing: 0.15em; /* Adjust as needed */
-    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+    animation:
+      typing 3.5s steps(40, end),
+      blink-caret 0.75s step-end infinite;
   }
 
   @keyframes cursor-blink {
@@ -215,36 +237,58 @@ export const MessageItemWrapper = styled.div `
   }
 `;
 export const WarningWrapper = styled.div `
-  padding: 10px;
   display: flex;
-  align-item: flex-start;
+  align-items: center;
   gap: 10px;
-  border: 1px solid #fec9c9;
-  background: #fec9c9;
-  margin: 0 10px;
+
+  padding: 10px;
+  margin: 10px 20px;
+
+  border-radius: 10px;
+  background: #ffd8db;
 
   .icon {
     min-width: 18px;
   }
 `;
 export const InputWrapper = styled.div `
-  min-height: 44px;
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 0 15px 0 10px;
-  margin: 10px;
 
-  border: 1px solid #e5e5e5;
-  background: #fff;
+  min-height: 50px;
+  max-height: 250px;
+  padding: 0px 15px;
+  margin: 10px 20px;
+
+  /* border: 1px solid #e5e5e5; */
+  background: #eef5fc;
+  border-radius: 25px;
 
   .input {
     border: none;
     font-size: 12px;
+    line-height: 1.5 !important;
+
+    /* padding: 10px 0px; */
+    min-height: auto !important;
+    max-height: 230px !important;
+    background: #eef5fc;
+    margin: 10px 0;
+    padding: 0;
 
     &:focus {
       outline: none !important;
       box-shadow: none !important;
+      background: #eef5fc;
+    }
+
+    &::placeholder {
+      font-size: 12px;
+      font-style: normal !important;
+      line-height: 1.5 !important;
+      color: #a2a2a2;
+      font-weight: 400;
     }
   }
   .submit-btn {
@@ -255,12 +299,16 @@ export const InputWrapper = styled.div `
     // border: 1px solid;
     position: relative;
     left: -3px;
+    background: #eef5fc;
+    color: #666666;
 
     &:focus {
       outline: none !important;
     }
     &.disabled {
       opacity: 0.65;
+      background-color: #f0f0f0;
+      color: #bebebe;
     }
   }
   .icon {
@@ -268,6 +316,14 @@ export const InputWrapper = styled.div `
     position: relative;
     left: 3px;
   }
+
+  /* .textarea {
+    &::placeholder {
+      color: #a2a2a2;
+      font-size: 12px;
+      font-weight: 400;
+    }
+  } */
 `;
 export const TypingCursor = styled.div `
   width: 3px;

package/es/components/molecules/Collapse/Collapse.js

@@ -1,11 +1,10 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Collapse as AntdCollapse } from 'antd';
 // Icons
 import { Icon } from '../../atoms';
 export const Collapse = AntdCollapse;
 Collapse.defaultProps = {
     expandIcon({ isActive }) {
-        return (React.createElement(Icon, { type: "icon-ants-expand-more", size: 24, style: { transform: `rotate(${isActive ? -180 : 0}deg)`, color: '#666' } }));
+        return (_jsx(Icon, { type: "icon-ants-expand-more", size: 24, style: { transform: `rotate(${isActive ? -180 : 0}deg)`, color: '#666' } }));
     },
 };