@antscorp/antsomi-ui 1.3.5-beta.936 → 1.3.5-beta.938

package/es/components/atoms/RateV2/RateV2.js

@@ -29,7 +29,7 @@ export const RateV2 = ({ count = 5, className, defaultValue = 0, value, type = '
     // The real current value that will be return to parent component by onChange function
     // currWidth = value * STAR_WIDTH
     const [currWidth, setCurrWidth] = useState(0);
-    const handleMouseMove = e => {
+    const handleMouseMove = (e) => {
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const hoverWidth = Math.round(x);
@@ -48,7 +48,7 @@ export const RateV2 = ({ count = 5, className, defaultValue = 0, value, type = '
             setCurrWidth(width);
             setFillWidth(width);
         }
-    }, [value]);
+    }, [value, type]);
     return (_jsxs("div", { className: `antsomi-rate-continuous${className ? ` ${className}` : ''}`, style: {
             position: 'relative',
             width: `${fullWidth}px`,

package/es/components/atoms/SlideBar/SlideBar.js

@@ -257,7 +257,7 @@ export const SlideBar = props => {
                                             if (!disabledDelete) {
                                                 handleDeleteSlide(state.cacheInfoClicked);
                                             }
-                                        }, children: t(translations.delete.title) }) })] }), arrow: false, children: _jsx(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? THEME.token?.colorPrimary : THEME.token?.colorText, size: "20px", onClick: (event) => handleClick(event, item), disabled: false }) }))] })) }, item.value));
+                                        }, children: t(translations.delete.title) }) })] }), arrow: false, children: _jsx(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? THEME.token?.colorPrimary : THEME.token?.colorText, size: 20, onClick: (event) => handleClick(event, item), disabled: false }) }))] })) }, item.value));
     });
     const renderSliderDragDrop = () => (_jsx(WrapperOverflow, { ref: wrapperOverflowRef, id: "wrapper-overflow", children: _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: (providedDroppable, _snapshotDroppable) => (_jsx(MainContent, { ref: providedDroppable.innerRef, ...providedDroppable.droppableProps, children: renderMainContent() })) }) }) }));
     return (_jsxs(ContainerSlideBar, { children: [_jsxs(SliderWrapper, { isViewMode: isViewMode, children: [_jsx(Icon, { type: "icon-ants-angle-left", style: { fontSize: '16px', cursor: 'pointer', color: THEME.token?.colorPrimary }, className: "btn-arrow-left btn-action-slide-template", disabled: state.disabledPrev, onClick: (e) => {

package/es/components/molecules/CalendarSelection/constants.js

@@ -2,7 +2,7 @@ export const TRIGGER_OUT_MODE = {
     auto: 'auto',
     manual: 'manual',
 };
-export const LOCAL_TIMEZONE = 'Asia/Hong_Kong' || Intl.DateTimeFormat().resolvedOptions().timeZone;
+export const LOCAL_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
 export const RANGE_LIMIT = 365 * 2;
 export const DEFAULT_NUM_UP_TO = 30;
 export const AUTO_UPDATE_TO_KEY = {

package/es/components/molecules/CaptureScreen/CaptureScreen.js

@@ -786,8 +786,8 @@ CaptureScreen.defaultProps = {
     src: '',
     alt: 'CaptureScreen',
     defaultPositions: {
-        capture: null,
-        record: null,
+        capture: { x: 0, y: 0 },
+        record: { x: 0, y: 0 },
     },
     callback: () => { },
 };

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -10,12 +10,14 @@ import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 import { AccountSharing } from '@antscorp/antsomi-ui/es/components/organism/AccountSharing';
 import { Help } from '@antscorp/antsomi-ui/es/components/organism/Help';
 import { Notification } from '@antscorp/antsomi-ui/es/components/organism/Notification';
+import { ConversationAnalyticProvider, ConversationAnalytic } from '@antscorp/antsomi-genai';
 // Constants
 import { APP_CODES, APP_PERMISSION_DOMAIN, CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, PORTALS_IDS, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
 import { useContextSelector } from 'use-context-selector';
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers/AppConfigProvider';
 import { isNil } from 'lodash';
 import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
+import '@antscorp/antsomi-genai/css';
 const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 // const DOUBLE_RIGHT_POINTING = '»'
@@ -115,5 +117,5 @@ export const HeaderV2 = memo(props => {
         onSelectAccount?.(userId);
     };
     const QUOTE_ENTITY = _jsx(_Fragment, { children: "\u00BB" });
-    return (_jsxs(HeaderV2Styled, { "$show": show, className: className || '', style: style, children: [_jsxs("div", { className: "left-side", children: [showLogo && (_jsx(LogoWrapper, { className: "logo-wrapper", onClick: onCLickLogo, children: _jsx("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }) })), _jsx(AccountSelection, { ...accountSelectionProps, currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle, refreshOnSelect: true }), _jsxs("div", { className: "title-container", "data-test": "page-title", children: [breadcrumbs ? (_jsx("div", { className: "header-breadcrumbs", "data-test": "breadcrumbs", children: breadcrumbs.map((item, index) => (_jsxs(React.Fragment, { children: [isNil(item.useExternalLink) && !item.useExternalLink ? (_jsx(Link, { to: item.link || '', className: "header-breadcrumbs__item", children: item.title })) : (_jsx("a", { href: item.link, className: "header-breadcrumbs__item", children: item.title })), breadcrumbs.length === index + 1 ? null : _jsxs(_Fragment, { children: ["\u2002", QUOTE_ENTITY, "\u2002"] })] }, `${item.title}_${item.link}`))) })) : null, typeof pageTitle === 'string' ? (_jsx("div", { className: "page-title", children: pageTitle })) : (pageTitle)] })] }), _jsxs("div", { "data-test": "header-menu", className: "right-side", children: [_jsxs(Flex, { gap: 10, children: [rightContent, showHelp ? _jsx(Help, { configs: helpConfigProps, ...helpProps }) : null, showNotification ? _jsx(Notification, { ...notificationConfigProps }) : null] }), showAccountSharing ? (_jsx(AccountSharing, { isShowSharing: isShowSharing, isShareAccountAccess: isShareAccountAccess, ...accountSharingPropsFormatted, ...accountSharingProps })) : null] })] }));
+    return (_jsx(ConversationAnalyticProvider, { children: _jsxs(HeaderV2Styled, { "$show": show, className: className || '', style: style, children: [_jsxs("div", { className: "left-side", children: [showLogo && (_jsx(LogoWrapper, { className: "logo-wrapper", onClick: onCLickLogo, children: _jsx("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }) })), _jsx(AccountSelection, { ...accountSelectionProps, currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle, refreshOnSelect: true }), _jsxs("div", { className: "title-container", "data-test": "page-title", children: [breadcrumbs ? (_jsx("div", { className: "header-breadcrumbs", "data-test": "breadcrumbs", children: breadcrumbs.map((item, index) => (_jsxs(React.Fragment, { children: [isNil(item.useExternalLink) && !item.useExternalLink ? (_jsx(Link, { to: item.link || '', className: "header-breadcrumbs__item", children: item.title })) : (_jsx("a", { href: item.link, className: "header-breadcrumbs__item", children: item.title })), breadcrumbs.length === index + 1 ? null : _jsxs(_Fragment, { children: ["\u2002", QUOTE_ENTITY, "\u2002"] })] }, `${item.title}_${item.link}`))) })) : null, typeof pageTitle === 'string' ? (_jsx("div", { className: "page-title", children: pageTitle })) : (pageTitle)] })] }), _jsxs("div", { "data-test": "header-menu", className: "right-side", children: [_jsxs(Flex, { gap: 10, children: [rightContent, _jsx(ConversationAnalytic, {}), showHelp ? _jsx(Help, { configs: helpConfigProps, ...helpProps }) : null, showNotification ? _jsx(Notification, { ...notificationConfigProps }) : null] }), showAccountSharing ? (_jsx(AccountSharing, { isShowSharing: isShowSharing, isShareAccountAccess: isShareAccountAccess, ...accountSharingPropsFormatted, ...accountSharingProps })) : null] })] }) }));
 });

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

@@ -215,7 +215,7 @@ export function convertInputStringToOriginal(input) {
 export const getLinkLineURLImage = (productId = '', code = '') => `https://stickershop.line-scdn.net/sticonshop/v1/sticon/${productId}/android/${code}.png?detect-emoji=line-message&v=1`;
 export const getImageSourceViberEmoji = (fileName = '') => {
     // eslint-disable-next-line global-require, import/no-dynamic-require
-    const src = require(`@antscorp/antsomi-ui/es/assets/images/viber/96x96/${fileName}`);
+    const src = require(`../../../assets/images/viber/96x96/${fileName}`);
     return src.default || src;
 };
 /**

package/es/components/organism/AccountProfile/components/AccountSetting/AccountSetting.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/label-has-associated-control */
 // Libraries
 import axios from 'axios';
 import clsx from 'clsx';
@@ -402,7 +403,7 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
                     return _jsx("textarea", { ...inputProps });
                 case 'date':
                     // {...inputProps} isShowLabel={false} error={errorMsg}
-                    return (_jsx(StyledDatePicker, { value: inputProps.value, onChange: inputProps.onChange, popupClassName: "antsomi-custom-calendar-picker", showToday: false, prevIcon: _jsx(Icon, { type: "icon-ants-angle-left", size: "11" }), nextIcon: _jsx(Icon, { type: "icon-ants-angle-right1", size: "11" }), allowClear: false, suffixIcon: _jsx(Icon, { type: "icon-ants-calendar-picker", size: "24", color: "rgba(0, 0, 0, 0.54)" }) }));
+                    return (_jsx(StyledDatePicker, { value: inputProps.value, onChange: inputProps.onChange, popupClassName: "antsomi-custom-calendar-picker", showToday: false, prevIcon: _jsx(Icon, { type: "icon-ants-angle-left", size: 11 }), nextIcon: _jsx(Icon, { type: "icon-ants-angle-right1", size: 11 }), allowClear: false, suffixIcon: _jsx(Icon, { type: "icon-ants-calendar-picker", size: 24, color: "rgba(0, 0, 0, 0.54)" }) }));
                 case 'radio':
                     // return <RadioButtonGroup {...inputProps} />;
                     return (_jsx(StyledRadioGroup, { value: +inputProps.value, onChange: inputProps.onChange, name: inputProps.fieldName, disabled: inputProps.disabled, children: inputProps.arrRadios.map(item => (_jsx(Radio, { value: item.value, children: item.label }, item.value))) }));

package/es/components/organism/AccountProfile/components/AccountSetting/components/LanguageSelector/styles.js

@@ -14,7 +14,7 @@ export const StyledSelect = styled(Select) `
     background: url('~Assets/images/langs/vietnam.png') no-repeat;
   }
 `;
-export const StyledSelectOption = styled(Typography) `
+export const StyledSelectOption = styled(Typography.Text) `
   display: flex !important;
   justify-content: flex-start;
   align-items: center;

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-extra-boolean-cast */
 // Libraries
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -382,11 +383,11 @@ export function useDataTableListing(props) {
         if (columns?.toggle) {
             const { key, dataIndex, valueKey, title, value, disabled, onChange } = columns.toggle || {};
             data.push({
-                key: 'toggle' || key,
+                key: key || 'toggle',
                 fixed: 'left',
                 align: 'center',
-                dataIndex: 'toggle' || dataIndex,
-                title: 'Toggle' || title,
+                dataIndex: dataIndex || 'toggle',
+                title: title || 'Toggle',
                 width: DEFAULT_TOGGLE_WIDTH,
                 ...columns.toggle,
                 render: (_, record) => {
@@ -589,7 +590,7 @@ export function useDataTableListing(props) {
         if (!!modeView) {
             setState(prev => ({ ...prev, modeView }));
         }
-    }, [localStorageValues]);
+    }, [localStorageValues, disabledCache]);
     /**
      * Set default groupBy column
      */

package/es/components/organism/Login/components/LoginStep2/styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
 export const TextInfo = styled.span `
   color: #7f7f7f;
-  font-size: ${(props) => (props.isMobile ? ' 13px !important' : '11px')};
+  font-size: ${props => (props.isMobile ? ' 13px !important' : '11px')};
 `;

package/es/components/organism/Login/components/SetupGGAuthenticator/styled.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 export const LabelStep = styled.span `
   color: #005eb8;
-  font-size: ${(props) => (props.isMobile ? '16px' : '14px')};
+  font-size: ${props => (props.isMobile ? '16px' : '14px')};
   font-weight: 500;
 `;
 export const Link = styled.a `

package/es/components/organism/Login/components/SignIn/styled.js

@@ -6,5 +6,5 @@ export const Wrapper = styled.div `
 
   width: 100%;
 
-  ${(props) => !props.isMobile ? 'padding: 100px 50px' : ' padding: 100px 30px'}
+  ${props => (!props.isMobile ? 'padding: 100px 50px' : ' padding: 100px 30px')}
 `;

package/es/components/organism/Login/components/WidgetLayout/styled.js

@@ -1,7 +1,7 @@
 import { Flex } from 'antd';
 import styled from 'styled-components';
 export const Title = styled.div `
-  font-size: ${(props) => (props.isMobile ? '20px' : '18px')};
+  font-size: ${props => (props.isMobile ? '20px' : '18px')};
   font-weight: 700;
   color: #005eb8;
   text-align: center;

package/es/components/organism/Login/styled.js

@@ -28,7 +28,7 @@ export const WrapperLogin = styled(Flex) `
   min-width: ${props => (props.isMobile ? '100%' : '300px')};
   max-width: ${props => (props.isMobile ? '100%' : '404px')};
 
-  ${(props) => !props.isMobile ? 'box-shadow: 3px 0px 9px 0px #002e5926' : ''}
+  ${props => (!props.isMobile ? 'box-shadow: 3px 0px 9px 0px #002e5926' : '')}
 `;
 export const WrapperImage = styled.img `
   width: 180px;
@@ -73,8 +73,8 @@ export const AvatarImage = styled.img `
 `;
 export const StyledForm = styled(Form) `
   input {
-    height: ${(props) => (props.isMobile ? ' 44px' : '36px')};
-    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+    height: ${props => (props.isMobile ? ' 44px' : '36px')};
+    font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
 
     &::placeholder {
       font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
@@ -111,18 +111,18 @@ export const StyledForm = styled(Form) `
   }
 `;
 export const StyleInput = styled(Input) `
-  height: ${(props) => props.isMobile ? ' 44px !important' : '36px !important'};
-  font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+  height: ${props => (props.isMobile ? ' 44px !important' : '36px !important')};
+  font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
 
   &::placeholder {
     font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
   }
 `;
 export const StyleButton = styled(Button) `
-  height: ${(props) => props.isMobile ? ' 44px !important' : '40px !important'};
-  font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+  height: ${props => (props.isMobile ? ' 44px !important' : '40px !important')};
+  font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
 `;
 export const Text = styled.div `
-  color: ${(props) => props.color ? props.color : ' #000000'};
-  font-size: ${(props) => (props.isMobile ? ' 14px !important' : '12px')};
+  color: ${props => (props.color ? props.color : ' #000000')};
+  font-size: ${props => (props.isMobile ? ' 14px !important' : '12px')};
 `;

package/es/components/organism/TicketEditor/components/MessageComponent.js

@@ -46,7 +46,7 @@ const MessageComponent = ({ toUser, fromUser, followers, attachments, message, d
         return [arrImgs, arrFiles];
     }, [attachments]);
     const renderImage = file => (_jsx("div", { className: "image-item", children: _jsx("img", { src: file?.content_url, alt: "attachment" }) }, file?.content_url));
-    return (_jsxs(WrapperContentAvatar, { children: [_jsxs("div", { className: "comment-header", children: [_jsxs(WrapperAvatar, { children: [_jsx("img", { className: "avatar", alt: "avatar", src: fromUser?.photo }), _jsxs("div", { className: "user-info", children: [_jsx("span", { className: "user-info__name", children: fromUser?.name }), _jsxs("div", { className: "user-info__desc", children: [_jsxs("div", { className: "user-info__to-user", children: [_jsxs("span", { children: ["To: ", toUser?.name] }), !isExpand && (_jsx(Icon, { className: "user-info__expand-icon", type: "icon-ants-caret-down1", onClick: () => setIsExpand(true) }))] }), isExpand ? (_jsxs("div", { className: "user-info__followers", children: [_jsx("div", { className: "user-info__followers__name", children: _jsxs("span", { className: "user-info__to-user", children: ["Follower(s):", ` `, followers?.map(follower => follower?.name).join(', ')] }) }), _jsx(Icon, { className: "user-info__expand-icon open", type: "icon-ants-caret-down1", onClick: () => setIsExpand(false) })] })) : null] })] })] }), _jsx("div", { className: "comment-time", children: convertDateToTimestamp(date, timeZone) })] }), _jsxs("div", { className: "comment-content", children: [_jsx("div", { dangerouslySetInnerHTML: { __html: message }, ref: refMesage }), _jsxs(WrapperLinkItemFiles, { className: "no-border", children: [images.map(renderImage), files?.map(file => (_jsxs("div", { className: "file-item rounded", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx("a", { href: file?.content_url, download: true, children: _jsx(Icon, { className: "download-btn", type: "icon-ants-file-download" }) })] }, file?.content_url)))] })] }), _jsx(WrapperModalImg, { open: modalImg.isOpen, className: "image-modal", onClose: () => setModalImg({ ...modalImg, isOpen: false }), children: _jsxs("div", { className: "modal-img-content", children: [_jsx(Spin, { spinning: !modalImg?.src, children: _jsx(WrapperModalHeaderImg, { style: { cursor: 'pointer' }, onClick: () => setModalImg({ ...modalImg, isOpen: false }), children: _jsx(Icon, { type: "close", style: {
+    return (_jsxs(WrapperContentAvatar, { children: [_jsxs("div", { className: "comment-header", children: [_jsxs(WrapperAvatar, { children: [_jsx("img", { className: "avatar", alt: "avatar", src: fromUser?.photo }), _jsxs("div", { className: "user-info", children: [_jsx("span", { className: "user-info__name", children: fromUser?.name }), _jsxs("div", { className: "user-info__desc", children: [_jsxs("div", { className: "user-info__to-user", children: [_jsxs("span", { children: ["To: ", toUser?.name] }), !isExpand && (_jsx(Icon, { className: "user-info__expand-icon", type: "icon-ants-caret-down1", onClick: () => setIsExpand(true) }))] }), isExpand ? (_jsxs("div", { className: "user-info__followers", children: [_jsx("div", { className: "user-info__followers__name", children: _jsxs("span", { className: "user-info__to-user", children: ["Follower(s):", ` `, followers?.map(follower => follower?.name).join(', ')] }) }), _jsx(Icon, { className: "user-info__expand-icon open", type: "icon-ants-caret-down1", onClick: () => setIsExpand(false) })] })) : null] })] })] }), _jsx("div", { className: "comment-time", children: convertDateToTimestamp(date, timeZone) })] }), _jsxs("div", { className: "comment-content", children: [_jsx("div", { dangerouslySetInnerHTML: { __html: message }, ref: refMesage }), _jsxs(WrapperLinkItemFiles, { className: "no-border", children: [images.map(renderImage), files?.map(file => (_jsxs("div", { className: "file-item rounded", children: [_jsxs("div", { className: "file-name-group", children: [_jsx(Icon, { className: "file-icon", type: "icon-ants-attachment" }), _jsx(Tooltip, { title: file?.file_name, children: _jsx("span", { className: "file-name", children: file?.file_name }) })] }), _jsx("a", { href: file?.content_url, download: true, children: _jsx(Icon, { className: "download-btn", type: "icon-ants-file-download" }) })] }, file?.content_url)))] })] }), _jsx(WrapperModalImg, { open: modalImg.isOpen, className: "image-modal", afterClose: () => setModalImg({ ...modalImg, isOpen: false }), children: _jsxs("div", { className: "modal-img-content", children: [_jsx(Spin, { spinning: !modalImg?.src, children: _jsx(WrapperModalHeaderImg, { style: { cursor: 'pointer' }, onClick: () => setModalImg({ ...modalImg, isOpen: false }), children: _jsx(Icon, { type: "close", style: {
                                         height: '20px',
                                         width: '20px',
                                         color: '#005eb8',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.936",
+  "version": "1.3.5-beta.938",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -61,6 +61,8 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@antscorp/antsomi-genai": "1.0.1-beta-14",
+    "@antscorp/antsomi-constants": "1.0.5-beta.2",
     "@antscorp/antsomi-locales": "1.0.28",
     "@antscorp/icons": "0.27.54",
     "@antscorp/image-editor": "1.0.2",
@@ -136,7 +138,6 @@
     "remark-gfm-alias-story": "npm:remark-gfm@4.0.0",
     "socket.io-client": "^4.7.5",
     "string-replace-to-array": "^2.1.0",
-    "styled-components": "^5.3.9",
     "swiper": "^11.0.7",
     "tui-image-editor": "^3.15.3",
     "uniqid": "^5.4.0",
@@ -181,13 +182,12 @@
     "@types/lodash": "^4.17.13",
     "@types/node": "^18.15.10",
     "@types/pako": "2.0.0",
-    "@types/react": "^18.0.33",
+    "@types/react": "^18.0.8",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.0.11",
     "@types/react-helmet": "^6.1.11",
     "@types/react-resizable": "^3.0.7",
     "@types/react-syntax-highlighter": "^15.5.11",
-    "@types/styled-components": "^5.1.26",
     "@types/yaireo__tagify": "^4.27.0",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
@@ -234,13 +234,14 @@
     "sass-loader": "^16.0.1",
     "storybook": "^8.4.6",
     "style-loader": "^4.0.0",
+    "styled-components": "^6",
     "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "tsx": "^4.16.2",
     "type-fest": "^4.10.2",
-    "typescript": "^5.4.3",
+    "typescript": "5.7.3",
     "vite": "^5.4.3",
     "vite-plugin-commonjs": "^0.10.1",
     "vite-plugin-mkcert": "^1.17.6",

package/es/__tests__/fileMock.test.d.ts

@@ -1,2 +0,0 @@
-declare const _exports: string;
-export = _exports;

package/es/__tests__/styleMock.test.d.ts

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

package/es/components/atoms/Alert/Alert.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { AlertProps as AntdAlertProps } from 'antd';
-export declare const AlertStyled: import("styled-components").StyledComponent<React.FC<AntdAlertProps> & {
-    ErrorBoundary: typeof import("antd/es/alert/ErrorBoundary").default;
-}, any, {}, never>;
-export interface AlertProps extends AntdAlertProps {
-    variant?: 'default' | 'outline';
-}
-export declare const Alert: React.FC<AlertProps>;

package/es/components/atoms/Alert/index.d.ts

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

package/es/components/atoms/App/App.d.ts

@@ -1,7 +0,0 @@
-import { type AppProps as AntdAppProps } from 'antd';
-type AppProps = AntdAppProps;
-declare const App: {
-    (props: AppProps): import("react/jsx-runtime").JSX.Element;
-    useApp: () => import("antd/es/app/context").useAppProps;
-};
-export { App, type AppProps };

package/es/components/atoms/App/index.d.ts

@@ -1 +0,0 @@
-export * from './App';

package/es/components/atoms/Avatar/Avatar.d.ts

@@ -1,2 +0,0 @@
-export { Avatar } from 'antd';
-export type { AvatarProps } from 'antd';

package/es/components/atoms/Avatar/index.d.ts

@@ -1 +0,0 @@
-export * from './Avatar';

package/es/components/atoms/Button/Button.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { ButtonProps as AntdButtonProps } from 'antd';
-export type ButtonProps = AntdButtonProps;
-export declare const Button: React.ForwardRefExoticComponent<AntdButtonProps & React.RefAttributes<React.LegacyRef<HTMLElement>>>;

package/es/components/atoms/Button/index.d.ts

@@ -1 +0,0 @@
-export * from './Button';

package/es/components/atoms/Button/test.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const TestButton: React.FC;
-export default TestButton;

package/es/components/atoms/Checkbox/Checkbox.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import type { CheckboxProps as AntdCheckboxProps } from 'antd';
-export type CheckboxProps = AntdCheckboxProps;
-export declare const Checkbox: import("react").ForwardRefExoticComponent<AntdCheckboxProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>> & {
-    Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd/es/checkbox").CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
-};

package/es/components/atoms/Checkbox/index.d.ts

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

package/es/components/atoms/ContentEditable/ContentEditable.d.ts

@@ -1,16 +0,0 @@
-import React, { FocusEvent } from 'react';
-import { TypographyProps } from 'antd';
-import { EllipsisConfig } from 'antd/es/typography/Base';
-interface ContentEditableProps extends Omit<TypographyProps['Text'], 'className' | '$$typeof'> {
-    onSave: (innerText: string, e?: FocusEvent<any>) => void;
-    value?: string;
-    isEdit?: boolean;
-    disabledBlur?: boolean;
-    maxLength?: number;
-    breakWord?: boolean;
-    regexPattern?: RegExp;
-    className?: string;
-    ellipsis?: EllipsisConfig;
-}
-export declare const ContentEditable: React.FC<React.PropsWithChildren<ContentEditableProps>>;
-export {};

package/es/components/atoms/ContentEditable/index.d.ts

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

package/es/components/atoms/ContentEditable/styled.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const ContentEditableWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
-    $breakWord?: boolean | undefined;
-}, never>;

package/es/components/atoms/Divider/Divider.d.ts

@@ -1 +0,0 @@
-export { Divider } from 'antd';

package/es/components/atoms/Divider/index.d.ts

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

package/es/components/atoms/DividerPure/DividerPure.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-interface DividerProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
-    type?: 'vertical' | 'horizontal';
-    dot?: boolean;
-    dashed?: boolean;
-    height?: number | string;
-    width?: number | string;
-}
-export declare const DividerPure: React.FC<DividerProps>;
-export {};

package/es/components/atoms/DividerPure/index.d.ts

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

package/es/components/atoms/DividerPure/styled.d.ts

@@ -1 +0,0 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/Empty/Empty.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { EmptyProps } from 'antd';
-export interface IEmpty extends EmptyProps {
-    loading?: boolean;
-}
-export declare const Empty: React.FC<IEmpty>;

package/es/components/atoms/Empty/index.d.ts

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

package/es/components/atoms/Flex/Flex.d.ts

@@ -1,2 +0,0 @@
-export { Flex } from 'antd';
-export type { FlexProps } from 'antd';

package/es/components/atoms/Flex/index.d.ts

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

package/es/components/atoms/FloatButton/FloatButton.d.ts

@@ -1 +0,0 @@
-export { FloatButton } from 'antd';

package/es/components/atoms/FloatButton/index.d.ts

@@ -1 +0,0 @@
-export declare const FloatButton: import("antd/es/float-button/interface").CompoundedComponent;

package/es/components/atoms/Grid/Grid.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const Row: import("react").ForwardRefExoticComponent<import("antd").RowProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Col: import("react").ForwardRefExoticComponent<import("antd").ColProps & import("react").RefAttributes<HTMLDivElement>>;

package/es/components/atoms/Grid/index.d.ts

@@ -1 +0,0 @@
-export { Row, Col } from './Grid';

package/es/components/atoms/Icon/index.d.ts

@@ -1,9 +0,0 @@
-import { IconProps as OriginIconProps } from '../../icons/types';
-export interface IconProps extends OriginIconProps {
-    size?: number;
-    width?: number;
-    height?: number;
-    color?: string;
-    style?: React.CSSProperties;
-}
-export declare const Icon: import("styled-components").StyledComponent<any, any, IconProps, string | number | symbol>;

package/es/components/atoms/IconField/IconField.d.ts

@@ -1,5 +0,0 @@
-type IconFieldProps = {
-    dataType: string | number;
-};
-export declare const IconField: (props: IconFieldProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/es/components/atoms/IconField/constants.d.ts

@@ -1,27 +0,0 @@
-export declare const FIELD_DATA_TYPE: {
-    readonly NUMBER: {
-        readonly label: "Number";
-        readonly name: "number";
-        readonly value: 2;
-    };
-    readonly STRING: {
-        readonly label: "String";
-        readonly name: "string";
-        readonly value: 1;
-    };
-    readonly TEXT: {
-        readonly label: "Text";
-        readonly name: "text";
-        readonly value: 1;
-    };
-    readonly DATE_TIME: {
-        readonly label: "Datetime";
-        readonly name: "datetime";
-        readonly value: 5;
-    };
-    readonly BOOLEAN: {
-        readonly label: "Boolean";
-        readonly name: "boolean";
-        readonly value: 17;
-    };
-};

package/es/components/atoms/IconField/index.d.ts

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

package/es/components/atoms/Iframe/Iframe.d.ts

@@ -1,4 +0,0 @@
-import React, { IframeHTMLAttributes } from 'react';
-export interface IframeProps extends IframeHTMLAttributes<HTMLIFrameElement> {
-}
-export declare const Iframe: React.FC<IframeProps>;

package/es/components/atoms/Iframe/index.d.ts

@@ -1 +0,0 @@
-export { Iframe, type IframeProps } from './Iframe';

package/es/components/atoms/Image/Image.d.ts

@@ -1,2 +0,0 @@
-export { Image } from 'antd';
-export type { ImageProps } from 'antd';

package/es/components/atoms/Image/index.d.ts

@@ -1 +0,0 @@
-export * from './Image';

package/es/components/atoms/Input/Input.d.ts

@@ -1,35 +0,0 @@
-/// <reference types="hoist-non-react-statics" />
-import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps, Input as AntdInput, InputRef } from 'antd';
-export interface InputProps extends AntdInputProps {
-    noborder?: 'true' | 'false' | boolean;
-    debounce?: number;
-    label?: ReactNode;
-    onAfterChange?: (value: string) => void;
-    errorArchive?: string;
-    required?: boolean;
-    isReverseMask?: boolean;
-    labelColor?: string;
-    isHideErrMessage?: boolean;
-    focused?: boolean;
-    errorMsg?: string;
-    disableUndo?: boolean;
-    withWrapper?: boolean;
-}
-export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
-    Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
-    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
-}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
-    Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
-    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
-}, {}> & {
-    DefaultInput: typeof AntdInput;
-    CustomSearch: typeof SearchInput;
-};
-declare const SearchInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
-export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-export {};

package/es/components/atoms/Input/index.d.ts

@@ -1,2 +0,0 @@
-export { Input, TextArea } from './Input';
-export type { InputProps } from './Input';

package/es/components/atoms/Input/styled.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { InputProps } from './Input';
-export declare const StyledInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef>> & {
-    Group: import("react").FC<import("antd/es/input").GroupProps>;
-    Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>;
-    TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: import("react").ForwardRefExoticComponent<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef>>;
-}, any, InputProps, never>;
-export declare const TextArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>, any, {
-    showBorder?: boolean | undefined;
-}, never>;
-export declare const StyledSearchInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef>> & {
-    Group: import("react").FC<import("antd/es/input").GroupProps>;
-    Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>;
-    TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: import("react").ForwardRefExoticComponent<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef>>;
-}, any, {}, never>;
-export declare const StyledIconWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;

package/es/components/atoms/InputDynamic/EditCaretPositioning.d.ts

@@ -1,2 +0,0 @@
-declare const EditCaretPositioning: any;
-export default EditCaretPositioning;

package/es/components/atoms/InputDynamic/InputDynamic.d.ts

@@ -1,5 +0,0 @@
-import { InputDynamicProps } from './types';
-export declare const InputDynamic: {
-    (props: InputDynamicProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: InputDynamicProps;
-};