@antscorp/antsomi-ui 2.0.38 → 2.0.40

package/es/components/icons/ErrorIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const ErrorIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ErrorIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ErrorIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsxs("svg", { viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: [_jsx("circle", { cx: "8", cy: "9", r: "8", fill: "#F44336" }), _jsx("path", { d: "M7 13C7 12.8022 7.05865 12.6089 7.16853 12.4444C7.27841 12.28 7.43459 12.1518 7.61732 12.0761C7.80004 12.0004 8.00111 11.9806 8.19509 12.0192C8.38907 12.0578 8.56725 12.153 8.70711 12.2929C8.84696 12.4327 8.9422 12.6109 8.98079 12.8049C9.01937 12.9989 8.99957 13.2 8.92388 13.3827C8.84819 13.5654 8.72002 13.7216 8.55557 13.8315C8.39112 13.9414 8.19778 14 8 14C7.73478 14 7.48043 13.8946 7.29289 13.7071C7.10536 13.5196 7 13.2652 7 13ZM7 10V6C7 5.73478 7.10536 5.48043 7.29289 5.29289C7.48043 5.10536 7.73478 5 8 5C8.26522 5 8.51957 5.10536 8.70711 5.29289C8.89464 5.48043 9 5.73478 9 6V10C9 10.2652 8.89464 10.5196 8.70711 10.7071C8.51957 10.8946 8.26522 11 8 11C7.73478 11 7.48043 10.8946 7.29289 10.7071C7.10536 10.5196 7 10.2652 7 10Z", fill: "white" })] }));
+});

package/es/components/icons/LazyIcon/LazyIcon.d.ts

@@ -2,10 +2,10 @@
 export declare const LazyIcon: {
     AccountCircleIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountCircleOutlineIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    Accounts30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountSharing30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountSharingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountTreeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    Accounts30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AddChartIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AddFolderIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AddIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -53,7 +53,6 @@ export declare const LazyIcon: {
     ChatConversationCommentAddCommentIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ChatMentionIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ChatUnreadIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    CheckSlimIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CheckboxChecked5RadiusIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CheckboxCheckedIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CheckboxIndeterminate5RadiusIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -61,6 +60,7 @@ export declare const LazyIcon: {
     CheckboxUnchecked5RadiusIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CheckboxUncheckedIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ChecklistRtlIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    CheckSlimIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CircleAddElementIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CircleNotificationsIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CloseIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -95,15 +95,15 @@ export declare const LazyIcon: {
     DataDestinationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataEncryption30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataEncryptionIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    Dataflows30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataRefreshIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataSchema30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataSource30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    DataView30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    DataViewIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    Dataflows30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DatasourceIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DatasourceSegment30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    DataView30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    DataViewIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DecreaseDecimalIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DeleteRemoveTrashIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DeliveryLogIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -143,6 +143,7 @@ export declare const LazyIcon: {
     EmojiRamenDiningIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     EmojiReactionIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     EmojiSmileIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    ErrorIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     EventAttribute30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     EventAttributeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     EventIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -179,13 +180,13 @@ export declare const LazyIcon: {
     ForwardIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     FreeDrawIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     FullReviewIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    GPTIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GalleryTemplateIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GeneralSettingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GeneralSettings30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GenerateAutoWizardIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Geofence30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GetInsightIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    GPTIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GridViewIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GroupIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     GroupLayerIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -248,8 +249,8 @@ export declare const LazyIcon: {
     MuteIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     NodeViewIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     NotificationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    NotificationSettingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     NotificationsActiveIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    NotificationSettingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     OpenNewTabIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     OpenUrlIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     OrchestrationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -300,7 +301,6 @@ export declare const LazyIcon: {
     ResumeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     RightExpandIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Role30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    SQLWorkspace30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SaveAsIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SaveIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ScheduleEmailDeliveryIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -324,6 +324,7 @@ export declare const LazyIcon: {
     SlideGroupIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Sort1Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SortIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    SQLWorkspace30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SqlWorkspaceIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     StatisticIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     StickerIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -370,9 +371,9 @@ export declare const LazyIcon: {
     VisitorInformationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WarningIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WebAssetIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    WebhookIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WebIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WebPersonalizationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    WebhookIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WidgetIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WritingAIAssitantIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
 };

package/es/components/icons/LazyIcon/LazyIcon.js

@@ -2,10 +2,10 @@ import { lazy } from 'react';
 export const LazyIcon = {
     AccountCircleIcon: lazy(() => import('../AccountCircleIcon').then(m => ({ default: m.AccountCircleIcon }))),
     AccountCircleOutlineIcon: lazy(() => import('../AccountCircleOutlineIcon').then(m => ({ default: m.AccountCircleOutlineIcon }))),
+    Accounts30Icon: lazy(() => import('../Accounts30Icon').then(m => ({ default: m.Accounts30Icon }))),
     AccountSharing30Icon: lazy(() => import('../AccountSharing30Icon').then(m => ({ default: m.AccountSharing30Icon }))),
     AccountSharingIcon: lazy(() => import('../AccountSharingIcon').then(m => ({ default: m.AccountSharingIcon }))),
     AccountTreeIcon: lazy(() => import('../AccountTreeIcon').then(m => ({ default: m.AccountTreeIcon }))),
-    Accounts30Icon: lazy(() => import('../Accounts30Icon').then(m => ({ default: m.Accounts30Icon }))),
     AddChartIcon: lazy(() => import('../AddChartIcon').then(m => ({ default: m.AddChartIcon }))),
     AddFolderIcon: lazy(() => import('../AddFolderIcon').then(m => ({ default: m.AddFolderIcon }))),
     AddIcon: lazy(() => import('../AddIcon').then(m => ({ default: m.AddIcon }))),
@@ -55,7 +55,6 @@ export const LazyIcon = {
     }))),
     ChatMentionIcon: lazy(() => import('../ChatMentionIcon').then(m => ({ default: m.ChatMentionIcon }))),
     ChatUnreadIcon: lazy(() => import('../ChatUnreadIcon').then(m => ({ default: m.ChatUnreadIcon }))),
-    CheckSlimIcon: lazy(() => import('../CheckSlimIcon').then(m => ({ default: m.CheckSlimIcon }))),
     CheckboxChecked5RadiusIcon: lazy(() => import('../CheckboxChecked5RadiusIcon').then(m => ({ default: m.CheckboxChecked5RadiusIcon }))),
     CheckboxCheckedIcon: lazy(() => import('../CheckboxCheckedIcon').then(m => ({ default: m.CheckboxCheckedIcon }))),
     CheckboxIndeterminate5RadiusIcon: lazy(() => import('../CheckboxIndeterminate5RadiusIcon').then(m => ({
@@ -67,6 +66,7 @@ export const LazyIcon = {
     }))),
     CheckboxUncheckedIcon: lazy(() => import('../CheckboxUncheckedIcon').then(m => ({ default: m.CheckboxUncheckedIcon }))),
     ChecklistRtlIcon: lazy(() => import('../ChecklistRtlIcon').then(m => ({ default: m.ChecklistRtlIcon }))),
+    CheckSlimIcon: lazy(() => import('../CheckSlimIcon').then(m => ({ default: m.CheckSlimIcon }))),
     CircleAddElementIcon: lazy(() => import('../CircleAddElementIcon').then(m => ({ default: m.CircleAddElementIcon }))),
     CircleNotificationsIcon: lazy(() => import('../CircleNotificationsIcon').then(m => ({ default: m.CircleNotificationsIcon }))),
     CloseIcon: lazy(() => import('../CloseIcon').then(m => ({ default: m.CloseIcon }))),
@@ -101,15 +101,15 @@ export const LazyIcon = {
     DataDestinationIcon: lazy(() => import('../DataDestinationIcon').then(m => ({ default: m.DataDestinationIcon }))),
     DataEncryption30Icon: lazy(() => import('../DataEncryption30Icon').then(m => ({ default: m.DataEncryption30Icon }))),
     DataEncryptionIcon: lazy(() => import('../DataEncryptionIcon').then(m => ({ default: m.DataEncryptionIcon }))),
+    Dataflows30Icon: lazy(() => import('../Dataflows30Icon').then(m => ({ default: m.Dataflows30Icon }))),
     DataIcon: lazy(() => import('../DataIcon').then(m => ({ default: m.DataIcon }))),
     DataRefreshIcon: lazy(() => import('../DataRefreshIcon').then(m => ({ default: m.DataRefreshIcon }))),
     DataSchema30Icon: lazy(() => import('../DataSchema30Icon').then(m => ({ default: m.DataSchema30Icon }))),
     DataSource30Icon: lazy(() => import('../DataSource30Icon').then(m => ({ default: m.DataSource30Icon }))),
-    DataView30Icon: lazy(() => import('../DataView30Icon').then(m => ({ default: m.DataView30Icon }))),
-    DataViewIcon: lazy(() => import('../DataViewIcon').then(m => ({ default: m.DataViewIcon }))),
-    Dataflows30Icon: lazy(() => import('../Dataflows30Icon').then(m => ({ default: m.Dataflows30Icon }))),
     DatasourceIcon: lazy(() => import('../DatasourceIcon').then(m => ({ default: m.DatasourceIcon }))),
     DatasourceSegment30Icon: lazy(() => import('../DatasourceSegment30Icon').then(m => ({ default: m.DatasourceSegment30Icon }))),
+    DataView30Icon: lazy(() => import('../DataView30Icon').then(m => ({ default: m.DataView30Icon }))),
+    DataViewIcon: lazy(() => import('../DataViewIcon').then(m => ({ default: m.DataViewIcon }))),
     DecreaseDecimalIcon: lazy(() => import('../DecreaseDecimalIcon').then(m => ({ default: m.DecreaseDecimalIcon }))),
     DeleteRemoveTrashIcon: lazy(() => import('../DeleteRemoveTrashIcon').then(m => ({ default: m.DeleteRemoveTrashIcon }))),
     DeliveryLogIcon: lazy(() => import('../DeliveryLogIcon').then(m => ({ default: m.DeliveryLogIcon }))),
@@ -149,6 +149,7 @@ export const LazyIcon = {
     EmojiRamenDiningIcon: lazy(() => import('../EmojiRamenDiningIcon').then(m => ({ default: m.EmojiRamenDiningIcon }))),
     EmojiReactionIcon: lazy(() => import('../EmojiReactionIcon').then(m => ({ default: m.EmojiReactionIcon }))),
     EmojiSmileIcon: lazy(() => import('../EmojiSmileIcon').then(m => ({ default: m.EmojiSmileIcon }))),
+    ErrorIcon: lazy(() => import('../ErrorIcon').then(m => ({ default: m.ErrorIcon }))),
     EventAttribute30Icon: lazy(() => import('../EventAttribute30Icon').then(m => ({ default: m.EventAttribute30Icon }))),
     EventAttributeIcon: lazy(() => import('../EventAttributeIcon').then(m => ({ default: m.EventAttributeIcon }))),
     EventIcon: lazy(() => import('../EventIcon').then(m => ({ default: m.EventIcon }))),
@@ -185,13 +186,13 @@ export const LazyIcon = {
     ForwardIcon: lazy(() => import('../ForwardIcon').then(m => ({ default: m.ForwardIcon }))),
     FreeDrawIcon: lazy(() => import('../FreeDrawIcon').then(m => ({ default: m.FreeDrawIcon }))),
     FullReviewIcon: lazy(() => import('../FullReviewIcon').then(m => ({ default: m.FullReviewIcon }))),
-    GPTIcon: lazy(() => import('../GPTIcon').then(m => ({ default: m.GPTIcon }))),
     GalleryTemplateIcon: lazy(() => import('../GalleryTemplateIcon').then(m => ({ default: m.GalleryTemplateIcon }))),
     GeneralSettingIcon: lazy(() => import('../GeneralSettingIcon').then(m => ({ default: m.GeneralSettingIcon }))),
     GeneralSettings30Icon: lazy(() => import('../GeneralSettings30Icon').then(m => ({ default: m.GeneralSettings30Icon }))),
     GenerateAutoWizardIcon: lazy(() => import('../GenerateAutoWizardIcon').then(m => ({ default: m.GenerateAutoWizardIcon }))),
     Geofence30Icon: lazy(() => import('../Geofence30Icon').then(m => ({ default: m.Geofence30Icon }))),
     GetInsightIcon: lazy(() => import('../GetInsightIcon').then(m => ({ default: m.GetInsightIcon }))),
+    GPTIcon: lazy(() => import('../GPTIcon').then(m => ({ default: m.GPTIcon }))),
     GridViewIcon: lazy(() => import('../GridViewIcon').then(m => ({ default: m.GridViewIcon }))),
     GroupIcon: lazy(() => import('../GroupIcon').then(m => ({ default: m.GroupIcon }))),
     GroupLayerIcon: lazy(() => import('../GroupLayerIcon').then(m => ({ default: m.GroupLayerIcon }))),
@@ -252,8 +253,8 @@ export const LazyIcon = {
     MuteIcon: lazy(() => import('../MuteIcon').then(m => ({ default: m.MuteIcon }))),
     NodeViewIcon: lazy(() => import('../NodeViewIcon').then(m => ({ default: m.NodeViewIcon }))),
     NotificationIcon: lazy(() => import('../NotificationIcon').then(m => ({ default: m.NotificationIcon }))),
-    NotificationSettingIcon: lazy(() => import('../NotificationSettingIcon').then(m => ({ default: m.NotificationSettingIcon }))),
     NotificationsActiveIcon: lazy(() => import('../NotificationsActiveIcon').then(m => ({ default: m.NotificationsActiveIcon }))),
+    NotificationSettingIcon: lazy(() => import('../NotificationSettingIcon').then(m => ({ default: m.NotificationSettingIcon }))),
     OpenNewTabIcon: lazy(() => import('../OpenNewTabIcon').then(m => ({ default: m.OpenNewTabIcon }))),
     OpenUrlIcon: lazy(() => import('../OpenUrlIcon').then(m => ({ default: m.OpenUrlIcon }))),
     OrchestrationIcon: lazy(() => import('../OrchestrationIcon').then(m => ({ default: m.OrchestrationIcon }))),
@@ -306,7 +307,6 @@ export const LazyIcon = {
     ResumeIcon: lazy(() => import('../ResumeIcon').then(m => ({ default: m.ResumeIcon }))),
     RightExpandIcon: lazy(() => import('../RightExpandIcon').then(m => ({ default: m.RightExpandIcon }))),
     Role30Icon: lazy(() => import('../Role30Icon').then(m => ({ default: m.Role30Icon }))),
-    SQLWorkspace30Icon: lazy(() => import('../SQLWorkspace30Icon').then(m => ({ default: m.SQLWorkspace30Icon }))),
     SaveAsIcon: lazy(() => import('../SaveAsIcon').then(m => ({ default: m.SaveAsIcon }))),
     SaveIcon: lazy(() => import('../SaveIcon').then(m => ({ default: m.SaveIcon }))),
     ScheduleEmailDeliveryIcon: lazy(() => import('../ScheduleEmailDeliveryIcon').then(m => ({ default: m.ScheduleEmailDeliveryIcon }))),
@@ -330,6 +330,7 @@ export const LazyIcon = {
     SlideGroupIcon: lazy(() => import('../SlideGroupIcon').then(m => ({ default: m.SlideGroupIcon }))),
     Sort1Icon: lazy(() => import('../Sort1Icon').then(m => ({ default: m.Sort1Icon }))),
     SortIcon: lazy(() => import('../SortIcon').then(m => ({ default: m.SortIcon }))),
+    SQLWorkspace30Icon: lazy(() => import('../SQLWorkspace30Icon').then(m => ({ default: m.SQLWorkspace30Icon }))),
     SqlWorkspaceIcon: lazy(() => import('../SqlWorkspaceIcon').then(m => ({ default: m.SqlWorkspaceIcon }))),
     StatisticIcon: lazy(() => import('../StatisticIcon').then(m => ({ default: m.StatisticIcon }))),
     StickerIcon: lazy(() => import('../StickerIcon').then(m => ({ default: m.StickerIcon }))),
@@ -376,9 +377,9 @@ export const LazyIcon = {
     VisitorInformationIcon: lazy(() => import('../VisitorInformationIcon').then(m => ({ default: m.VisitorInformationIcon }))),
     WarningIcon: lazy(() => import('../WarningIcon').then(m => ({ default: m.WarningIcon }))),
     WebAssetIcon: lazy(() => import('../WebAssetIcon').then(m => ({ default: m.WebAssetIcon }))),
+    WebhookIcon: lazy(() => import('../WebhookIcon').then(m => ({ default: m.WebhookIcon }))),
     WebIcon: lazy(() => import('../WebIcon').then(m => ({ default: m.WebIcon }))),
     WebPersonalizationIcon: lazy(() => import('../WebPersonalizationIcon').then(m => ({ default: m.WebPersonalizationIcon }))),
-    WebhookIcon: lazy(() => import('../WebhookIcon').then(m => ({ default: m.WebhookIcon }))),
     WidgetIcon: lazy(() => import('../WidgetIcon').then(m => ({ default: m.WidgetIcon }))),
     WritingAIAssitantIcon: lazy(() => import('../WritingAIAssitantIcon').then(m => ({ default: m.WritingAIAssitantIcon }))),
 };

package/es/components/icons/index.d.ts

@@ -1,9 +1,9 @@
 export { AccountCircleIcon } from './AccountCircleIcon';
 export { AccountCircleOutlineIcon } from './AccountCircleOutlineIcon';
+export { Accounts30Icon } from './Accounts30Icon';
 export { AccountSharing30Icon } from './AccountSharing30Icon';
 export { AccountSharingIcon } from './AccountSharingIcon';
 export { AccountTreeIcon } from './AccountTreeIcon';
-export { Accounts30Icon } from './Accounts30Icon';
 export { AddChartIcon } from './AddChartIcon';
 export { AddFolderIcon } from './AddFolderIcon';
 export { AddIcon } from './AddIcon';
@@ -51,7 +51,6 @@ export { ChatBubbleOutlineIcon } from './ChatBubbleOutlineIcon';
 export { ChatConversationCommentAddCommentIcon } from './ChatConversationCommentAddCommentIcon';
 export { ChatMentionIcon } from './ChatMentionIcon';
 export { ChatUnreadIcon } from './ChatUnreadIcon';
-export { CheckSlimIcon } from './CheckSlimIcon';
 export { CheckboxChecked5RadiusIcon } from './CheckboxChecked5RadiusIcon';
 export { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
 export { CheckboxIndeterminate5RadiusIcon } from './CheckboxIndeterminate5RadiusIcon';
@@ -59,6 +58,7 @@ export { CheckboxIndeterminateIcon } from './CheckboxIndeterminateIcon';
 export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
 export { ChecklistRtlIcon } from './ChecklistRtlIcon';
+export { CheckSlimIcon } from './CheckSlimIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
@@ -93,15 +93,15 @@ export { DataDestination30Icon } from './DataDestination30Icon';
 export { DataDestinationIcon } from './DataDestinationIcon';
 export { DataEncryption30Icon } from './DataEncryption30Icon';
 export { DataEncryptionIcon } from './DataEncryptionIcon';
+export { Dataflows30Icon } from './Dataflows30Icon';
 export { DataIcon } from './DataIcon';
 export { DataRefreshIcon } from './DataRefreshIcon';
 export { DataSchema30Icon } from './DataSchema30Icon';
 export { DataSource30Icon } from './DataSource30Icon';
-export { DataView30Icon } from './DataView30Icon';
-export { DataViewIcon } from './DataViewIcon';
-export { Dataflows30Icon } from './Dataflows30Icon';
 export { DatasourceIcon } from './DatasourceIcon';
 export { DatasourceSegment30Icon } from './DatasourceSegment30Icon';
+export { DataView30Icon } from './DataView30Icon';
+export { DataViewIcon } from './DataViewIcon';
 export { DecreaseDecimalIcon } from './DecreaseDecimalIcon';
 export { DeleteRemoveTrashIcon } from './DeleteRemoveTrashIcon';
 export { DeliveryLogIcon } from './DeliveryLogIcon';
@@ -141,6 +141,7 @@ export { EmojiPetFootIcon } from './EmojiPetFootIcon';
 export { EmojiRamenDiningIcon } from './EmojiRamenDiningIcon';
 export { EmojiReactionIcon } from './EmojiReactionIcon';
 export { EmojiSmileIcon } from './EmojiSmileIcon';
+export { ErrorIcon } from './ErrorIcon';
 export { EventAttribute30Icon } from './EventAttribute30Icon';
 export { EventAttributeIcon } from './EventAttributeIcon';
 export { EventIcon } from './EventIcon';
@@ -177,13 +178,13 @@ export { Form30Icon } from './Form30Icon';
 export { ForwardIcon } from './ForwardIcon';
 export { FreeDrawIcon } from './FreeDrawIcon';
 export { FullReviewIcon } from './FullReviewIcon';
-export { GPTIcon } from './GPTIcon';
 export { GalleryTemplateIcon } from './GalleryTemplateIcon';
 export { GeneralSettingIcon } from './GeneralSettingIcon';
 export { GeneralSettings30Icon } from './GeneralSettings30Icon';
 export { GenerateAutoWizardIcon } from './GenerateAutoWizardIcon';
 export { Geofence30Icon } from './Geofence30Icon';
 export { GetInsightIcon } from './GetInsightIcon';
+export { GPTIcon } from './GPTIcon';
 export { GridViewIcon } from './GridViewIcon';
 export { GroupIcon } from './GroupIcon';
 export { GroupLayerIcon } from './GroupLayerIcon';
@@ -244,8 +245,8 @@ export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NotificationIcon } from './NotificationIcon';
-export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { NotificationsActiveIcon } from './NotificationsActiveIcon';
+export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OpenUrlIcon } from './OpenUrlIcon';
 export { OrchestrationIcon } from './OrchestrationIcon';
@@ -296,7 +297,6 @@ export { RestoreDefaultIcon } from './RestoreDefaultIcon';
 export { ResumeIcon } from './ResumeIcon';
 export { RightExpandIcon } from './RightExpandIcon';
 export { Role30Icon } from './Role30Icon';
-export { SQLWorkspace30Icon } from './SQLWorkspace30Icon';
 export { SaveAsIcon } from './SaveAsIcon';
 export { SaveIcon } from './SaveIcon';
 export { ScheduleEmailDeliveryIcon } from './ScheduleEmailDeliveryIcon';
@@ -320,6 +320,7 @@ export { SignatureIcon } from './SignatureIcon';
 export { SlideGroupIcon } from './SlideGroupIcon';
 export { Sort1Icon } from './Sort1Icon';
 export { SortIcon } from './SortIcon';
+export { SQLWorkspace30Icon } from './SQLWorkspace30Icon';
 export { SqlWorkspaceIcon } from './SqlWorkspaceIcon';
 export { StatisticIcon } from './StatisticIcon';
 export { StickerIcon } from './StickerIcon';
@@ -366,8 +367,8 @@ export { VisitorIcon } from './VisitorIcon';
 export { VisitorInformationIcon } from './VisitorInformationIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
+export { WebhookIcon } from './WebhookIcon';
 export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
-export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

package/es/components/icons/index.js

@@ -1,9 +1,9 @@
 export { AccountCircleIcon } from './AccountCircleIcon';
 export { AccountCircleOutlineIcon } from './AccountCircleOutlineIcon';
+export { Accounts30Icon } from './Accounts30Icon';
 export { AccountSharing30Icon } from './AccountSharing30Icon';
 export { AccountSharingIcon } from './AccountSharingIcon';
 export { AccountTreeIcon } from './AccountTreeIcon';
-export { Accounts30Icon } from './Accounts30Icon';
 export { AddChartIcon } from './AddChartIcon';
 export { AddFolderIcon } from './AddFolderIcon';
 export { AddIcon } from './AddIcon';
@@ -51,7 +51,6 @@ export { ChatBubbleOutlineIcon } from './ChatBubbleOutlineIcon';
 export { ChatConversationCommentAddCommentIcon } from './ChatConversationCommentAddCommentIcon';
 export { ChatMentionIcon } from './ChatMentionIcon';
 export { ChatUnreadIcon } from './ChatUnreadIcon';
-export { CheckSlimIcon } from './CheckSlimIcon';
 export { CheckboxChecked5RadiusIcon } from './CheckboxChecked5RadiusIcon';
 export { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
 export { CheckboxIndeterminate5RadiusIcon } from './CheckboxIndeterminate5RadiusIcon';
@@ -59,6 +58,7 @@ export { CheckboxIndeterminateIcon } from './CheckboxIndeterminateIcon';
 export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
 export { ChecklistRtlIcon } from './ChecklistRtlIcon';
+export { CheckSlimIcon } from './CheckSlimIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
@@ -93,15 +93,15 @@ export { DataDestination30Icon } from './DataDestination30Icon';
 export { DataDestinationIcon } from './DataDestinationIcon';
 export { DataEncryption30Icon } from './DataEncryption30Icon';
 export { DataEncryptionIcon } from './DataEncryptionIcon';
+export { Dataflows30Icon } from './Dataflows30Icon';
 export { DataIcon } from './DataIcon';
 export { DataRefreshIcon } from './DataRefreshIcon';
 export { DataSchema30Icon } from './DataSchema30Icon';
 export { DataSource30Icon } from './DataSource30Icon';
-export { DataView30Icon } from './DataView30Icon';
-export { DataViewIcon } from './DataViewIcon';
-export { Dataflows30Icon } from './Dataflows30Icon';
 export { DatasourceIcon } from './DatasourceIcon';
 export { DatasourceSegment30Icon } from './DatasourceSegment30Icon';
+export { DataView30Icon } from './DataView30Icon';
+export { DataViewIcon } from './DataViewIcon';
 export { DecreaseDecimalIcon } from './DecreaseDecimalIcon';
 export { DeleteRemoveTrashIcon } from './DeleteRemoveTrashIcon';
 export { DeliveryLogIcon } from './DeliveryLogIcon';
@@ -141,6 +141,7 @@ export { EmojiPetFootIcon } from './EmojiPetFootIcon';
 export { EmojiRamenDiningIcon } from './EmojiRamenDiningIcon';
 export { EmojiReactionIcon } from './EmojiReactionIcon';
 export { EmojiSmileIcon } from './EmojiSmileIcon';
+export { ErrorIcon } from './ErrorIcon';
 export { EventAttribute30Icon } from './EventAttribute30Icon';
 export { EventAttributeIcon } from './EventAttributeIcon';
 export { EventIcon } from './EventIcon';
@@ -177,13 +178,13 @@ export { Form30Icon } from './Form30Icon';
 export { ForwardIcon } from './ForwardIcon';
 export { FreeDrawIcon } from './FreeDrawIcon';
 export { FullReviewIcon } from './FullReviewIcon';
-export { GPTIcon } from './GPTIcon';
 export { GalleryTemplateIcon } from './GalleryTemplateIcon';
 export { GeneralSettingIcon } from './GeneralSettingIcon';
 export { GeneralSettings30Icon } from './GeneralSettings30Icon';
 export { GenerateAutoWizardIcon } from './GenerateAutoWizardIcon';
 export { Geofence30Icon } from './Geofence30Icon';
 export { GetInsightIcon } from './GetInsightIcon';
+export { GPTIcon } from './GPTIcon';
 export { GridViewIcon } from './GridViewIcon';
 export { GroupIcon } from './GroupIcon';
 export { GroupLayerIcon } from './GroupLayerIcon';
@@ -244,8 +245,8 @@ export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NotificationIcon } from './NotificationIcon';
-export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { NotificationsActiveIcon } from './NotificationsActiveIcon';
+export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OpenUrlIcon } from './OpenUrlIcon';
 export { OrchestrationIcon } from './OrchestrationIcon';
@@ -296,7 +297,6 @@ export { RestoreDefaultIcon } from './RestoreDefaultIcon';
 export { ResumeIcon } from './ResumeIcon';
 export { RightExpandIcon } from './RightExpandIcon';
 export { Role30Icon } from './Role30Icon';
-export { SQLWorkspace30Icon } from './SQLWorkspace30Icon';
 export { SaveAsIcon } from './SaveAsIcon';
 export { SaveIcon } from './SaveIcon';
 export { ScheduleEmailDeliveryIcon } from './ScheduleEmailDeliveryIcon';
@@ -320,6 +320,7 @@ export { SignatureIcon } from './SignatureIcon';
 export { SlideGroupIcon } from './SlideGroupIcon';
 export { Sort1Icon } from './Sort1Icon';
 export { SortIcon } from './SortIcon';
+export { SQLWorkspace30Icon } from './SQLWorkspace30Icon';
 export { SqlWorkspaceIcon } from './SqlWorkspaceIcon';
 export { StatisticIcon } from './StatisticIcon';
 export { StickerIcon } from './StickerIcon';
@@ -366,8 +367,8 @@ export { VisitorIcon } from './VisitorIcon';
 export { VisitorInformationIcon } from './VisitorInformationIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
+export { WebhookIcon } from './WebhookIcon';
 export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
-export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

package/es/components/molecules/ApplyPopupContent/ApplyPopupContent.js

@@ -5,13 +5,11 @@ import { Flex, Typography, Icon, Button, } from '@antscorp/antsomi-ui/es/compone
 // Styled
 import { CloseButton, ContentWrapper } from './styled';
 // Locales
-import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
-// Constants
-import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import { translate, translations } from '@antscorp/antsomi-locales';
 const { Text } = Typography;
 export const ApplyPopupContent = props => {
     const { title, children, cancelButtonProps, applyButtonProps, footerProps, onApply, onCancel, ...restProps } = props;
     const { align = 'center', justify = 'flex-end' } = footerProps || {};
-    const { t } = i18nInstance;
-    return (_jsxs(ContentWrapper, { ...restProps, children: [_jsxs(Flex, { className: "content__body", vertical: true, gap: 20, children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { className: "content__title", ellipsis: { tooltip: true }, children: title }), _jsx(CloseButton, { align: "center", justify: "center", onClick: onCancel, children: _jsx(Icon, { type: "icon-ants-remove-slim" }) })] }), children] }), _jsxs(Flex, { ...footerProps, align: align, justify: justify, className: clsx('content__footer', footerProps?.className), children: [_jsx(Button, { onClick: onCancel, ...cancelButtonProps, children: t(translations.cancel.title).toString() }), _jsx(Button, { type: "primary", onClick: onApply, ...applyButtonProps, children: t(translations.apply.title).toString() })] })] }));
+    // const { t } = i18nInstance;
+    return (_jsxs(ContentWrapper, { ...restProps, children: [_jsxs(Flex, { className: "content__body", vertical: true, gap: 20, children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { className: "content__title", ellipsis: { tooltip: true }, children: title }), _jsx(CloseButton, { align: "center", justify: "center", onClick: onCancel, children: _jsx(Icon, { type: "icon-ants-remove-slim" }) })] }), children] }), _jsxs(Flex, { ...footerProps, align: align, justify: justify, className: clsx('content__footer', footerProps?.className), children: [_jsx(Button, { onClick: onCancel, ...cancelButtonProps, children: translate(translations._ACT_CANCEL) }), _jsx(Button, { type: "primary", onClick: onApply, ...applyButtonProps, children: translate(translations._ACT_APPLY) })] })] }));
 };

package/es/components/molecules/EditableName/EditableName.js

@@ -7,6 +7,7 @@ import Icon from '@antscorp/icons';
 import { useInView } from 'react-intersection-observer';
 import { Spin } from '../../atoms';
 import { EditIcon } from '../../icons';
+import { translate, translations } from '@antscorp/antsomi-locales';
 export const EditableName = React.forwardRef((props, ref) => {
     const { className, isLoading, required, error, value, style, readonly, maxLength = 255, editIcon, onBlur, onChange, } = props;
     const defaultValue = useRef(props.defaultValue);
@@ -15,7 +16,7 @@ export const EditableName = React.forwardRef((props, ref) => {
     const { ref: componentInViewRef, inView: componentInView } = useInView();
     const requiredError = useMemo(() => {
         const newValue = value ? value.trim() : internalValue.trim();
-        return required && newValue.length === 0 ? 'This field is required' : '';
+        return required && newValue.length === 0 ? translate(translations._NOTI_EMPTY_NAME) : '';
     }, [required, internalValue, value]);
     const spanRef = useRef(null);
     const inputRef = useRef(null);

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

@@ -25,7 +25,8 @@ import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } fr
 import { flatTree, recursiveFindParents, recursiveSearchItems, } from '@antscorp/antsomi-ui/es/utils';
 import { getSelectedTreeData } from './utils';
 // Icons
-import { DataIcon, LongerIcon, WarningIcon } from '../../icons';
+import { DataIcon, ErrorIcon, LongerIcon, WarningIcon } from '../../icons';
+import { translate, translations as translationsLocale } from '@antscorp/antsomi-locales';
 const initialState = {
     isOpenPopover: false,
     searchValue: '',
@@ -42,13 +43,26 @@ const { t } = i18nInstance;
 const { Text } = Typography;
 export function MatchesAny(props) {
     // Props
-    const { objectName, loading = false, showExtendValue = true, selectedItems: selectedItemsProp, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, searchValue = '', isExternalSearch, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch, ...restOfProps } = props;
+    const { maxSelectedItem, maxLengthEachItem, objectName, loading = false, showExtendValue = true, selectedItems: selectedItemsProp, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, searchValue = '', isExternalSearch, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch, ...restOfProps } = props;
     // State
     const [state, setState] = useState(matchesAnyInitialState);
+    const [maxItemsError, setMaxItemsError] = useState(false);
+    const [itemOverMaxLength, setItemOverMaxLength] = useState(false);
+    const [isApply, setIsApply] = useState(false);
     // Variables
     const { selectedItems, selectedTreeData, isShowLoadMoreEl, expandedKeys, selectedExpandedKeys } = state;
     const { icon: listEmptyIcon = _jsx(LongerIcon, {}), description: listEmptyDescription = (_jsx("div", { dangerouslySetInnerHTML: { __html: t(translations.matchesAnySelect.noData) } })), ...restListEmptyProps } = listEmptyProps || {};
     const { description: selectedListEmptyDescription = t(translations.global.selectItemsFromList).toString(), icon: selectedListEmptyIcon = _jsx(DataIcon, { color: globalToken?.bw5, size: 48 }), ...restSelectedListEmptyProps } = selectedListEmptyProps || {};
+    useDeepCompareEffect(() => {
+        const isOverMaxSelected = maxSelectedItem && selectedItems && selectedItems.length > maxSelectedItem;
+        const isSomeTextTooLong = maxLengthEachItem
+            ? selectedItems && selectedItems.some(item => item.key?.toString().length > maxLengthEachItem)
+            : false;
+        setMaxItemsError(!!isOverMaxSelected);
+        setItemOverMaxLength(!!isSomeTextTooLong);
+        if (isApply && !isOverMaxSelected && !isSomeTextTooLong)
+            setIsApply(false);
+    }, [selectedItems, maxSelectedItem, maxLengthEachItem, isApply]);
     // Refs
     const { ref: loadMoreRef } = useIntersectionObserver({
         threshold: 0,
@@ -142,27 +156,41 @@ export function MatchesAny(props) {
      *
      */
     const onRemoveItem = (item) => {
-        const newSelectedItems = selectedItems?.filter(selectedItem => {
-            if (item.children) {
-                const flattenChild = flatTree(item.children, 'children');
-                return (selectedItem.key !== item.key &&
-                    !flattenChild?.some(item => item.key === selectedItem.key));
-            }
-            return selectedItem.key !== item.key;
+        setState(prev => {
+            const newSelectedItems = prev.selectedItems?.filter(selectedItem => {
+                if (item.children) {
+                    const flattenChild = flatTree(item.children, 'children');
+                    return (selectedItem.key !== item.key &&
+                        !flattenChild?.some(item => item.key === selectedItem.key));
+                }
+                return selectedItem.key !== item.key;
+            });
+            const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
+            return {
+                ...prev,
+                selectedItems: newSelectedItems,
+                selectedTreeData: newSelectedTreeData,
+            };
         });
-        const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
-        setState(prev => ({
-            ...prev,
-            selectedItems: newSelectedItems,
-            selectedTreeData: newSelectedTreeData,
-        }));
     };
     const onRemoveAll = () => {
         setState(prev => ({ ...prev, selectedItems: [], selectedTreeData: [] }));
     };
     const onClickApply = () => {
+        if (maxItemsError || itemOverMaxLength) {
+            setIsApply(true);
+            return;
+        }
         onApply(selectedItems || [], selectedTreeData || []);
     };
+    const handleClickRemoveInvalid = () => {
+        selectedItems?.forEach(item => {
+            if (maxLengthEachItem && item.key?.toString().length > maxLengthEachItem) {
+                onRemoveItem(item);
+            }
+        });
+        // setItemOverMaxLength(false);
+    };
     const renderItemError = useCallback((item) => {
         if (customItemRenders?.error) {
             return customItemRenders?.error(item);
@@ -177,7 +205,10 @@ export function MatchesAny(props) {
                                         ? typeof extraValue.render === 'function'
                                             ? extraValue.render(item)
                                             : extraValue.render
-                                        : item[extraValue.key] }) }, `${extraValue.key}`))) }))] }), _jsxs(Flex, { align: "center", gap: 10, children: [mode === 'select' && renderItemError(item), isExtendValue && (_jsx(Icon, { type: "icon-ants-empty-flag", size: 20, color: globalToken?.colorPrimary })), _jsx(ActionButton, { className: "select-button", align: "center", justify: "center", onClick: () => {
+                                        : item[extraValue.key] }) }, `${extraValue.key}`))) }))] }), _jsxs(Flex, { align: "center", gap: 10, children: [mode === 'select' && renderItemError(item), mode === 'select' &&
+                            item.key?.toString().length &&
+                            maxLengthEachItem &&
+                            item.key?.toString().length > maxLengthEachItem && _jsx(ErrorIcon, { size: 16 }), isExtendValue && (_jsx(Icon, { type: "icon-ants-empty-flag", size: 20, color: globalToken?.colorPrimary })), _jsx(ActionButton, { className: "select-button", align: "center", justify: "center", onClick: () => {
                                 // Call onSelectItem function if provided
                                 if (onSelectItem) {
                                     onSelectItem(item);
@@ -187,7 +218,7 @@ export function MatchesAny(props) {
                                     onRemoveItem(item);
                                 }
                             }, children: _jsx(Icon, { type: `icon-ants-${onSelectItem ? 'double-arrow-up' : 'remove-slim'}`, size: 11 }) })] })] }));
-    }, [customItemRenders, renderExtraValues, renderItemError]);
+    }, [renderExtraValues, customItemRenders, maxLengthEachItem, renderItemError]);
     // Memos
     const { treeData } = useDeepCompareMemo(() => {
         const { results, matchedParents } = recursiveSearchItems({
@@ -296,7 +327,7 @@ export function MatchesAny(props) {
         }
         return null;
     };
-    const renderSelectList = () => (_jsxs("div", { className: "matches-any__section matches-any__section--left", children: [_jsxs("div", { className: "matches-any__header", children: [!!groupSelectProps && (_jsx(PopoverSelect, { ...groupSelectProps, children: _jsxs(GroupSelectButton, { type: "default", size: "small", shape: "round", children: [_jsxs("span", { className: "group-name", children: [groupSelectProps?.name, ":"] }), `${groupSelectProps?.selected?.length || 0} ${t(translations.global.selected)}`] }) })), _jsx("div", { style: { width: '100%' }, children: _jsx(Input.CustomSearch, { ref: searchInputRef, autoFocus: true, value: searchValue, placeholder: `${t(translations.global.search)?.toString()}...`, onAfterChange: searchValue => {
+    const renderSelectList = () => (_jsxs("div", { className: "matches-any__section matches-any__section--left", children: [_jsxs("div", { className: "matches-any__header", children: [!!groupSelectProps && (_jsx(PopoverSelect, { ...groupSelectProps, children: _jsxs(GroupSelectButton, { type: "default", size: "small", shape: "round", children: [_jsxs("span", { className: "group-name", children: [groupSelectProps?.name, ":"] }), `${groupSelectProps?.selected?.length || 0} ${t(translations.global.selected)}`] }) })), _jsx("div", { style: { width: '100%' }, children: _jsx(Input.CustomSearch, { ref: searchInputRef, autoFocus: true, value: searchValue, placeholder: translate(translationsLocale._ACT_SEARCH), onAfterChange: searchValue => {
                                 if (onChangeSearch) {
                                     onChangeSearch(searchValue);
                                 }
@@ -312,7 +343,7 @@ export function MatchesAny(props) {
                          */
                         !loading &&
                             (!!searchValue && !listEmptyProps ? (_jsx(EmptyData, { showIcon: false, description: t(translations.global.noResultsMatchesKeyWord).toString() })) : (_jsx(EmptyData, { icon: listEmptyIcon, showIcon: !!listEmptyIcon, description: listEmptyDescription, ...restListEmptyProps })))) })] })] }));
-    const renderSelectedList = () => (_jsxs("div", { className: "matches-any__section", children: [_jsxs(Flex, { className: "matches-any__header", justify: "space-between", children: [_jsx(Text, { strong: true, children: `${t(translations.global.selected)} (${selectedItems?.length || 0})` }), _jsx(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll, children: t(translations.global.removeAll).toString() })] }), _jsx("div", { className: "matches-any__body", children: !selectedItems?.length && !loading ? (_jsx(EmptyData, { icon: selectedListEmptyIcon, description: selectedListEmptyDescription, ...restSelectedListEmptyProps })) : (_jsx(StyledTree, { defaultExpandAll: true, expandedKeys: selectedExpandedKeys, selectable: false, treeData: selectedTreeData, titleRender: item => renderItemNodeTitle({
+    const renderSelectedList = () => (_jsxs("div", { className: "matches-any__section", children: [_jsxs(Flex, { className: "matches-any__header", justify: "space-between", children: [_jsx(Text, { strong: true, children: `${t(translations.global.selected)} (${selectedItems?.length || 0}${maxSelectedItem && maxSelectedItem > 0 ? `/${maxSelectedItem}` : ''})` }), _jsx(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll, children: translate(translations._ACT_REMOVE_ALL) })] }), _jsx("div", { className: "matches-any__body", children: !selectedItems?.length && !loading ? (_jsx(EmptyData, { icon: selectedListEmptyIcon, description: selectedListEmptyDescription, ...restSelectedListEmptyProps })) : (_jsx(StyledTree, { defaultExpandAll: true, expandedKeys: selectedExpandedKeys, selectable: false, treeData: selectedTreeData, titleRender: item => renderItemNodeTitle({
                         item: item,
                         mode: 'select',
                         onRemoveItem,
@@ -345,10 +376,10 @@ export function MatchesAny(props) {
             }));
         }
     };
-    return (_jsx(ConfigProvider, { theme: MATCHES_ANY_THEME, children: _jsxs(MatchesAnyWrapper, { ...restOfProps, vertical: true, justify: "space-between", children: [_jsxs(Flex, { style: { width: '100%', height: '100%' }, children: [renderSelectList(), renderSelectedList()] }), _jsxs(Flex, { className: "matches-any__footer", align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 10, children: [_jsx(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply, children: t(translations.apply.title).toString() }), _jsx(Button, { onClick: () => onCancel(), children: t(translations.cancel.title).toString() })] }), showExtendValue && (_jsx(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, onApply: onApplyExtendValue, children: _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-empty-flag" }), children: t(translations.extendValue.title).toString() }) }))] })] }) }));
+    return (_jsx(ConfigProvider, { theme: MATCHES_ANY_THEME, children: _jsxs(MatchesAnyWrapper, { ...restOfProps, vertical: true, justify: "space-between", children: [_jsxs(Flex, { style: { width: '100%', height: '100%' }, children: [renderSelectList(), renderSelectedList()] }), _jsxs(Flex, { className: "matches-any__footer", align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 10, children: [_jsx(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply, children: translate(translationsLocale._ACT_APPLY) }), _jsx(Button, { onClick: () => onCancel(), children: translate(translationsLocale._ACT_CANCEL) }), isApply && (maxItemsError || itemOverMaxLength) && (_jsxs(_Fragment, { children: [_jsx(Typography, { style: { color: globalToken?.colorError }, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT) }), itemOverMaxLength && (_jsx(Button, { type: "text", onClick: handleClickRemoveInvalid, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT_REMOVE_INV) }))] }))] }), showExtendValue && (_jsx(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, onApply: onApplyExtendValue, children: _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-empty-flag" }), children: t(translations.extendValue.title).toString() }) }))] })] }) }));
 }
 export function MatchesAnySelect(props) {
-    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, error, onChangeSearch, onChange = () => { }, onLoadMore, ...restProps } = props;
+    const { maxSelectedItem, maxLengthEachItem, placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, error, onChangeSearch, onChange = () => { }, onLoadMore, ...restProps } = props;
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -365,7 +396,7 @@ export function MatchesAnySelect(props) {
         onChange(selectedItems, selectedTreeData);
         setState(prev => ({ ...prev, isOpenPopover: false }));
     };
-    return (_jsx(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: _jsx(MatchesAny, { isExternalSearch: !!onChangeSearch, searchValue: state.searchValue, className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, selectedTreeData: selectedTreeData, onChangeSearch: searchValue => {
+    return (_jsx(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: _jsx(MatchesAny, { maxSelectedItem: maxSelectedItem, maxLengthEachItem: maxLengthEachItem, isExternalSearch: !!onChangeSearch, searchValue: state.searchValue, className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, selectedTreeData: selectedTreeData, onChangeSearch: searchValue => {
                 setState(prev => ({ ...prev, searchValue }));
                 if (onChangeSearch)
                     onChangeSearch(searchValue);

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

@@ -28,6 +28,12 @@ export type CustomItemRenders<TItem> = {
     error?: (item: MatchesAnyItem<TItem>) => ReactNode;
 };
 export interface MatchesAnySelectProps<TItem = any> extends Omit<SelectProps, 'onChange'> {
+    /** Maximum item can select from items list */
+    maxSelectedItem?: number;
+    /** Max character of each item selected
+     * @default 200
+     */
+    maxLengthEachItem?: number;
     /** The name of object to be displayed in Popover */
     objectName?: string;
     /** Indicates whether show the extend value button */
@@ -61,7 +67,7 @@ export interface MatchesAnySelectProps<TItem = any> extends Omit<SelectProps, 'o
     /** Callback function that is called when the user scroll */
     onLoadMore?: () => void;
 }
-export interface MatchesAnyProps<TItem = any> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders' | 'listEmptyProps' | 'selectedListEmptyProps' | 'selectedTreeData' | 'searchValue'> {
+export interface MatchesAnyProps<TItem = any> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders' | 'listEmptyProps' | 'selectedListEmptyProps' | 'selectedTreeData' | 'searchValue' | 'maxSelectedItem' | 'maxLengthEachItem'> {
     /** Indicates handle search out of component */
     isExternalSearch?: boolean;
     /**

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

@@ -16,13 +16,13 @@ import '@yaireo/tagify/dist/tagify.css';
 // Styled
 import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 // Utils
-import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, } from './utils';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, } from './utils';
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getPersonalizeTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
 import { DETECT_LINK, EMOJI, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE_TAG, NO_VIEW_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, REMOVED_TAG, SHORT_LINK, SHORT_LINK_PTN, defaultCssVariables, tagifyDefaultProps, } from './constants';
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, escapeHTML, status, readonly, readonlyTag, disabled, maxLength, maxHeight, minWidth, placeholder, isSingleLineText, acceptableTagPattern, mapAttributes, mapErrorAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
+    const { initialValue, escapeHTML, status, readonly, readonlyTag, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, isSingleLineText, acceptableTagPattern, mapAttributes, mapErrorAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -80,8 +80,15 @@ const TagifyInput = forwardRef((props, ref) => {
     }, []);
     const onSelectionAfterInjection = useCallback((addRangeAfterInjected) => {
         try {
-            const selection = window.getSelection();
-            if (selection?.rangeCount) {
+            if (!tagifyRef.current) {
+                throw new Error('Tagify instance is not initialized');
+            }
+            const { scope } = tagifyRef.current?.DOM;
+            const isValidSelection = isAnchorNodeChildOfElement(scope);
+            if (isValidSelection) {
+                const selection = window.getSelection();
+                if (!selection?.rangeCount)
+                    return;
                 const range = selection.getRangeAt(0);
                 if (addRangeAfterInjected) {
                     // Need to re-select to keep the caret position
@@ -107,9 +114,10 @@ const TagifyInput = forwardRef((props, ref) => {
             const { settings, DOM } = tagifyRef.current;
             const rangeInstance = _.get(tagifyRef.current, 'state.selection.range', null);
             const { empty } = settings.classNames;
+            const isValidSelection = isAnchorNodeChildOfElement(DOM.scope);
             const selection = window.getSelection();
             // In case not have the selection yet or lost the selection,
-            if (!selection?.rangeCount || !rangeInstance) {
+            if (!selection?.rangeCount || !isValidSelection || !rangeInstance) {
                 // need to restore the last range before inject a new tag if the last range exists
                 if (lastRange.current) {
                     selection?.removeAllRanges();
@@ -406,15 +414,20 @@ const TagifyInput = forwardRef((props, ref) => {
     // Used to trigger replace URL detection and line break
     const onTagifyTyping = useCallback((event) => {
         if (event.detail) {
-            const { textContent } = event.detail;
+            const { textContent, tagify } = event.detail;
             // Tracking if the tagify input is line break
             setIsLineBreak(hasLineBreak(textContent));
             // Update URL to tag to show hint in the tooltip with tag
             if (textContent) {
                 detectReplaceURLToTag();
             }
+            if (realtime) {
+                const inputValue = tagify.getInputValue();
+                const convertedValue = convertInputStringToOriginal(inputValue);
+                onOutputData(convertedValue);
+            }
         }
-    }, [detectReplaceURLToTag]);
+    }, [realtime, detectReplaceURLToTag, onOutputData]);
     /**
      * Capture to trigger when tagify changed
      */

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

@@ -48,6 +48,7 @@ export const DEFAULT_ACCEPT_TAGS = [
 export const tagifyDefaultProps = {
     initialValue: '',
     name: 'tagifyInput',
+    realtime: true,
     maxHeight: 266,
     placeholder: undefined,
     acceptableTagPattern: DEFAULT_ACCEPT_TAGS,

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

@@ -20,6 +20,13 @@ export interface TagifyInputProps {
      * Defines whether the input should escape HTML characters.
      */
     escapeHTML?: boolean;
+    /**
+     * Defines whether the input should be in *realtime* mode.
+     * In *realtime* mode, the input is updated as the user stops typing, otherwise only on blur types.
+     *
+     * @default true
+     */
+    realtime?: boolean;
     /**
      * Optional mapping configuration for custom attributes associated with tags.
      * Defines how tag attributes are mapped and processed internally.

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

@@ -174,3 +174,11 @@ export declare function findURLInTextNodes(element: HTMLSpanElement, minLengthVa
  * // Returns: 'class="btn-primary" disabled data-testid="submit-button" aria-label="Submit form" tabindex="0"'
  */
 export declare const getAttributesString: (map: Map<string, string | boolean | number>) => string;
+/**
+ * Checks if the anchor node of the current text selection
+ * is a child of a specific DOM element.
+ *
+ * @param {HTMLElement} element - The parent element to check against
+ * @returns {boolean} True if the anchor node is a child of the element, false otherwise
+ */
+export declare const isAnchorNodeChildOfElement: (element: Node) => boolean;

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

@@ -617,3 +617,26 @@ export const getAttributesString = (map) => Array.from(map.entries())
 })
     .filter(Boolean)
     .join(' ');
+/**
+ * Checks if the anchor node of the current text selection
+ * is a child of a specific DOM element.
+ *
+ * @param {HTMLElement} element - The parent element to check against
+ * @returns {boolean} True if the anchor node is a child of the element, false otherwise
+ */
+export const isAnchorNodeChildOfElement = (element) => {
+    // Get the current selection
+    const selection = window.getSelection();
+    // Check if there's an active selection
+    if (!selection || selection.rangeCount === 0) {
+        return false;
+    }
+    // Get the anchor node (where the selection starts)
+    const { anchorNode } = selection;
+    // Check if the anchor node exists and the element exists
+    if (!anchorNode || !element) {
+        return false;
+    }
+    // Use Node.contains() to check if the element contains the anchor node
+    return element.contains(anchorNode);
+};

package/es/components/organism/DataTable/utils/filter.js

@@ -20,6 +20,8 @@ import { OPERATORS_CODE } from '@antscorp/antsomi-ui/es/constants/condition';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { EXCEPTION_OFF_FILTER_CLASS, METRIC_MAP_NUMBER_TYPE, METRIC_MAP_STRING_TYPE, } from '../constants/filter';
 const { MATCHES, MATCHES_ANY, NOT_MATCHES, ON, BEFORE, BEFORE_DATE, AFTER, AFTER_DATE } = OPERATORS_CODE;
+const MAX_SELECTED_ITEM = 100;
+const MAX_LENGTH_EACH_ITEM = 200;
 const { t } = i18nInstance;
 const { Text } = Typography;
 /* Filter */
@@ -161,7 +163,7 @@ export const renderValueField = ({ filterMetric, operator, value, matchesAny, on
         case OPERATORS_CODE.MATCHES_ANY:
         case OPERATORS_CODE.NOT_MATCHES: {
             const { list, isLoading } = matchesAny || {};
-            return (_jsx(MatchesAnySelect, { selectedItems: Array.isArray(value) ? value : [], popupClassName: EXCEPTION_OFF_FILTER_CLASS, objectName: name, items: list, loading: isLoading, onChange: onChangeValue, onLoadMore: onLoadMore }));
+            return (_jsx(MatchesAnySelect, { maxSelectedItem: MAX_SELECTED_ITEM, maxLengthEachItem: MAX_LENGTH_EACH_ITEM, selectedItems: Array.isArray(value) ? value : [], popupClassName: EXCEPTION_OFF_FILTER_CLASS, objectName: name, items: list, loading: isLoading, onChange: onChangeValue, onLoadMore: onLoadMore }));
         }
         case OPERATORS_CODE.AFTER:
         case OPERATORS_CODE.AFTER_DATE:

package/es/components/organism/Filter/utils/index.js

@@ -16,6 +16,8 @@ import { EXCEPTION_OFF_FILTER_CLASS, METRIC_MAP_NUMBER_TYPE, METRIC_MAP_STRING_T
 const { MATCHES, MATCHES_ANY, NOT_MATCHES, ON, BEFORE, BEFORE_DATE, AFTER, AFTER_DATE } = OPERATORS_CODE;
 const { t } = i18nInstance;
 const { Text } = Typography;
+const MAX_SELECTED_ITEM = 100;
+const MAX_LENGTH_EACH_ITEM = 200;
 /* Filter */
 export const serializeFilterMetricsToMenuItems = ({ filterMetrics = [], level = 0, onSelectFilterMetric, onClickFilterMetric, }) => {
     const isShowPopover = level >= 1;
@@ -155,7 +157,7 @@ export const renderValueField = ({ filterMetric, operator, value, matchesAny, on
         case OPERATORS_CODE.MATCHES_ANY:
         case OPERATORS_CODE.NOT_MATCHES: {
             const { list, isLoading } = matchesAny || {};
-            return (_jsx(MatchesAnySelect, { selectedItems: Array.isArray(value) ? value : [], popupClassName: EXCEPTION_OFF_FILTER_CLASS, objectName: name, items: list, loading: isLoading, onChange: onChangeValue, onLoadMore: onLoadMore }));
+            return (_jsx(MatchesAnySelect, { maxSelectedItem: MAX_SELECTED_ITEM, maxLengthEachItem: MAX_LENGTH_EACH_ITEM, selectedItems: Array.isArray(value) ? value : [], popupClassName: EXCEPTION_OFF_FILTER_CLASS, objectName: name, items: list, loading: isLoading, onChange: onChangeValue, onLoadMore: onLoadMore }));
         }
         case OPERATORS_CODE.AFTER:
         case OPERATORS_CODE.AFTER_DATE:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.38",
+  "version": "2.0.40",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -28,7 +28,7 @@
     "eslint": "eslint --ext js,ts,tsx",
     "lint": "yarn run eslint src",
     "lint:fix": "yarn run eslint src --fix",
-    "storybook": "yarn translate:init && storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "serve-storybook": "serve storybook-static",
     "version": "auto-changelog -p && git add CHANGELOG.md",
@@ -60,7 +60,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/antsomi-locales": "^1.0.13",
+    "@antscorp/antsomi-locales": "1.0.17",
     "@antscorp/icons": "0.27.54",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",