@antscorp/antsomi-ui 2.0.103 → 2.0.105

package/es/__mocks__/sql-query.json

@@ -0,0 +1,56 @@
+{
+  "queries": [
+    {
+      "name": "Tìm nhân viên có mức lương cao thứ hai của mỗi phòng ban",
+      "description": "Sử dụng Window Function DENSE_RANK() để xếp hạng nhân viên theo lương trong mỗi phòng ban và lấy ra những người có thứ hạng là 2.",
+      "query": "-- Sử dụng Window Function DENSE_RANK() để xếp hạng nhân viên theo lương trong mỗi phòng ban.\n-- DENSE_RANK() sẽ gán cùng một thứ hạng cho các nhân viên có cùng mức lương.\n-- Sau đó, chúng ta chỉ cần chọn những nhân viên có thứ hạng là 2.\nSELECT \n    e.name,\n    d.name AS department_name,\n    e.salary\nFROM (\n    SELECT\n        e.name,\n        e.salary,\n        e.department_id,\n        d.name AS department_name,\n        -- Xếp hạng nhân viên theo mức lương giảm dần trong từng phòng ban.\n        -- PARTITION BY chia dữ liệu thành các nhóm theo department_id.\n        -- ORDER BY sắp xếp các dòng trong mỗi nhóm theo salary.\n        DENSE_RANK() OVER (PARTITION BY e.department_id ORDER BY e.salary DESC) as salary_rank\n    FROM \n        employees e\n    JOIN \n        departments d ON e.department_id = d.id\n) as ranked_employees\nWHERE \n    ranked_employees.salary_rank = 2;"
+    },
+    {
+      "name": "Tính tổng doanh số tích lũy của mỗi nhân viên theo thời gian",
+      "description": "Sử dụng Window Function SUM() với ORDER BY để tính tổng doanh số tích lũy (Running Total) cho từng nhân viên theo ngày bán hàng.",
+      "query": "-- Sử dụng Window Function SUM() với ORDER BY để tính tổng doanh số tích lũy (Running Total).\n-- Điều này cho phép chúng ta tính tổng của một cột trong một cửa sổ dữ liệu được sắp xếp.\nSELECT\n    s.employee_id,\n    s.sale_date,\n    s.amount,\n    -- Tính tổng doanh số tích lũy cho mỗi nhân viên.\n    -- PARTITION BY employee_id đảm bảo tổng chỉ tính trong phạm vi của từng nhân viên.\n    -- ORDER BY sale_date sắp xếp các giao dịch theo thời gian.\n    -- Cửa sổ mặc định sẽ là từ đầu partition đến dòng hiện tại.\n    SUM(s.amount) OVER (PARTITION BY s.employee_id ORDER BY s.sale_date) as cumulative_sales\nFROM\n    sales s\nORDER BY \n    s.employee_id, \n    s.sale_date;"
+    },
+    {
+      "name": "Tìm phòng ban có doanh số cao hơn mức trung bình của tất cả các phòng ban",
+      "description": "Kết hợp Common Table Expression (CTE) để tính tổng doanh số của mỗi phòng ban, sau đó dùng subquery để so sánh với mức trung bình chung.",
+      "query": "-- Sử dụng Common Table Expression (CTE) để tính tổng doanh số của mỗi phòng ban trước.\n-- Điều này giúp cho truy vấn chính trở nên gọn gàng và dễ hiểu hơn.\nWITH DepartmentSales AS (\n    -- Bước 1: Tính tổng doanh số của mỗi phòng ban.\n    SELECT \n        d.id AS department_id,\n        d.name AS department_name,\n        SUM(s.amount) as total_department_sales\n    FROM \n        departments d\n    JOIN \n        employees e ON d.id = e.department_id\n    JOIN \n        sales s ON e.id = s.employee_id\n    GROUP BY \n        d.id, d.name\n)\n-- Bước 2: Truy vấn chính. Lấy những phòng ban có tổng doanh số lớn hơn mức trung bình của tất cả các phòng ban.\nSELECT\n    department_name,\n    total_department_sales\nFROM \n    DepartmentSales\nWHERE\n    total_department_sales > (\n        -- Subquery: Tính mức trung bình của tổng doanh số của tất cả các phòng ban.\n        -- Chúng ta không thể sử dụng trực tiếp AVG() trên total_department_sales ở đây.\n        SELECT \n            AVG(total_department_sales)\n        FROM \n            DepartmentSales\n    );"
+    },
+    {
+      "name": "Tìm nhân viên không có giao dịch bán hàng trong 30 ngày gần nhất",
+      "description": "Sử dụng LEFT JOIN từ bảng nhân viên đến bảng doanh số và dùng HAVING cùng hàm DATEDIFF() để lọc ra những nhân viên không có giao dịch gần đây.",
+      "query": "-- Tìm nhân viên không có giao dịch nào trong 30 ngày gần nhất.\n-- Bước 1: LEFT JOIN từ bảng employees đến bảng sales.\n-- Điều này đảm bảo tất cả nhân viên đều được hiển thị, ngay cả khi họ không có giao dịch nào.\nSELECT \n    e.name,\n    e.department_id,\n    e.salary\nFROM \n    employees e\nLEFT JOIN \n    sales s ON e.id = s.employee_id\nGROUP BY \n    e.id, e.name, e.department_id, e.salary\n-- Bước 2: Sử dụng HAVING để lọc các nhóm (nhân viên)\n-- có giao dịch gần nhất (MAX(s.sale_date)) đã lâu hơn 30 ngày so với ngày hiện tại (CURDATE()).\n-- COALESCE() được sử dụng để xử lý trường hợp nhân viên chưa bao giờ có giao dịch nào,\n-- khi đó MAX(s.sale_date) sẽ là NULL. COALESCE sẽ thay thế NULL bằng một ngày rất xa trong quá khứ\n-- để đảm bảo điều kiện DATEDIFF() luôn đúng.\nHAVING \n    COALESCE(MAX(s.sale_date), '1900-01-01') < CURDATE() - INTERVAL 30 DAY;"
+    },
+    {
+      "name": "Phân loại nhân viên dựa trên mức lương so với trung bình của phòng ban",
+      "description": "Sử dụng Window Function AVG() OVER() để tính mức lương trung bình của từng phòng ban, sau đó dùng CASE statement để phân loại từng nhân viên.",
+      "query": "-- Phân loại nhân viên dựa trên mức lương của họ so với mức lương trung bình của phòng ban.\nSELECT \n    e.name,\n    d.name AS department_name,\n    e.salary,\n    -- Sử dụng CASE statement để tạo một phân loại mới.\n    -- Mức lương của từng nhân viên được so sánh với mức lương trung bình của phòng ban.\n    CASE\n        -- AVG(e.salary) OVER (PARTITION BY e.department_id) tính mức lương trung bình của mỗi phòng ban.\n        -- Đây là một Window Function, giúp chúng ta tính toán giá trị tổng hợp (AVG) mà không làm mất các dòng dữ liệu chi tiết.\n        WHEN e.salary > AVG(e.salary) OVER (PARTITION BY e.department_id) THEN 'Above Average'\n        WHEN e.salary < AVG(e.salary) OVER (PARTITION BY e.department_id) THEN 'Below Average'\n        ELSE 'Average'\n    END AS salary_category\nFROM \n    employees e\nJOIN \n    departments d ON e.department_id = d.id;"
+    }
+  ],
+  "queries_optimization": [
+    {
+      "name": "Query 1: Top 3 lương cao nhất mỗi phòng ban (Correlated Subquery)",
+      "description": "Đây là cách tiếp cận cổ điển nhưng kém hiệu quả nhất, sử dụng một subquery phụ thuộc vào truy vấn chính. Subquery này sẽ chạy lại cho mỗi dòng của bảng chính, gây tốn tài nguyên trên dữ liệu lớn.",
+      "query": "-- Sử dụng Correlated Subquery để tìm 3 nhân viên có lương cao nhất.\n-- Subquery bên trong sẽ đếm số lượng nhân viên trong cùng phòng ban\n-- có mức lương cao hơn hoặc bằng nhân viên hiện tại.\n-- Nếu số lượng đó nhỏ hơn 3, nhân viên hiện tại sẽ được chọn.\nSELECT\n\te1.name,\n\te1.salary,\n\td.name AS department_name\nFROM\n\temployees e1\nJOIN\n\tdepartments d ON e1.department_id = d.id\nWHERE\n\t3 > (SELECT\n\t\tCOUNT(DISTINCT e2.salary)\n\tFROM\n\t\temployees e2\n\tWHERE\n\t\te2.department_id = e1.department_id\n\t\tAND e2.salary > e1.salary\n\t);"
+    },
+    {
+      "name": "Query 2: Top 3 lương cao nhất mỗi phòng ban (Self-JOIN)",
+      "description": "Một cách tiếp cận cũ khác sử dụng Self-JOIN. Đây là một cải tiến nhỏ so với subquery nhưng vẫn phức tạp và khó đọc. Hiệu suất cũng không cao trên dữ liệu lớn.",
+      "query": "-- Sử dụng kỹ thuật Self-JOIN để so sánh mỗi nhân viên với những người khác\n-- trong cùng phòng ban có mức lương cao hơn.\n-- Sau đó, GROUP BY và COUNT() để lọc ra những nhân viên nằm trong top 3.\nSELECT\n\te1.name,\n\te1.salary,\n\td.name AS department_name\nFROM\n\temployees e1\nJOIN\n\tdepartments d ON e1.department_id = d.id\nLEFT JOIN\n\temployees e2 ON e1.department_id = e2.department_id AND e1.salary < e2.salary\nGROUP BY\n\te1.id, e1.name, e1.salary, d.name\nHAVING\n\tCOUNT(DISTINCT e2.salary) < 3\nORDER BY\n\td.name, e1.salary DESC;"
+    },
+    {
+      "name": "Query 3: Top 3 lương cao nhất mỗi phòng ban (Window Function: RANK())",
+      "description": "Đây là cách hiện đại và được khuyến nghị nhất. Sử dụng Window Function giúp truy vấn hiệu quả và dễ đọc hơn rất nhiều. RANK() sẽ xếp hạng các nhân viên và bỏ qua các số thứ tự nếu có các giá trị bằng nhau.",
+      "query": "-- Cách hiện đại và hiệu quả nhất dùng Window Function RANK() trong một CTE (Common Table Expression).\n-- CTE giúp truy vấn dễ đọc hơn bằng cách tạo một tập kết quả tạm thời có tên.\nWITH RankedEmployees AS (\n\tSELECT\n\t\te.name,\n\t\te.salary,\n\t\td.name AS department_name,\n\t\t-- RANK() xếp hạng nhân viên theo lương trong từng phòng ban.\n\t\t-- PARTITION BY chia dữ liệu thành các nhóm theo department_id.\n\t\t-- ORDER BY sắp xếp các dòng trong mỗi nhóm theo salary DESC.\n\t\tRANK() OVER (PARTITION BY e.department_id ORDER BY e.salary DESC) as rnk\n\tFROM\n\t\temployees e\n\tJOIN\n\t\tdepartments d ON e.department_id = d.id\n)\n-- Truy vấn chính sẽ chọn ra các nhân viên có thứ hạng <= 3 từ CTE.\nSELECT\n\tname,\n\tsalary,\n\tdepartment_name\nFROM\n\tRankedEmployees\nWHERE\n\trnk <= 3\nORDER BY\n\tdepartment_name, salary DESC;"
+    },
+    {
+      "name": "Query 4: Top 3 lương cao nhất mỗi phòng ban (Window Function: DENSE_RANK())",
+      "description": "Một biến thể của Query 3, sử dụng DENSE_RANK(). Chức năng này tương tự RANK() nhưng sẽ không bỏ qua các số thứ tự khi có các giá trị bằng nhau, phù hợp cho nhiều trường hợp phân tích hơn.",
+      "query": "-- Biến thể của cách trên, dùng DENSE_RANK() thay vì RANK().\n-- DENSE_RANK() sẽ không bỏ qua các số thứ tự khi có các giá trị bằng nhau.\nWITH RankedEmployees AS (\n\tSELECT\n\t\te.name,\n\t\te.salary,\n\t\td.name AS department_name,\n\t\t-- DENSE_RANK() xếp hạng nhân viên, không bỏ qua các số thứ tự.\n\t\tDENSE_RANK() OVER (PARTITION BY e.department_id ORDER BY e.salary DESC) as rnk\n\tFROM\n\t\temployees e\n\tJOIN\n\t\tdepartments d ON e.department_id = d.id\n)\n-- Truy vấn chính sẽ chọn ra các nhân viên có thứ hạng <= 3.\nSELECT\n\tname,\n\tsalary,\n\tdepartment_name\nFROM\n\tRankedEmployees\nWHERE\n\trnk <= 3\nORDER BY\n\tdepartment_name, salary DESC;"
+    },
+    {
+      "name": "Query 5: Top 3 lương cao nhất mỗi phòng ban (Với JSON output)",
+      "description": "Đây là một cách tiếp cận nâng cao hơn, kết hợp Window Function và các hàm JSON để nhóm dữ liệu thành một định dạng JSON duy nhất. Rất hữu ích cho việc tạo API hoặc xử lý dữ liệu phức tạp trên tầng ứng dụng.",
+      "query": "-- Kết hợp Window Function với hàm JSON để nhóm dữ liệu thành một định dạng JSON duy nhất.\n-- Rất hữu ích khi bạn muốn trả về dữ liệu có cấu trúc từ database mà không cần xử lý thêm ở tầng ứng dụng.\nWITH RankedEmployees AS (\n\tSELECT\n\t\te.name,\n\t\te.salary,\n\t\td.name AS department_name,\n\t\tROW_NUMBER() OVER (PARTITION BY e.department_id ORDER BY e.salary DESC) as rnk\n\tFROM\n\t\temployees e\n\tJOIN\n\t\tdepartments d ON e.department_id = d.id\n)\nSELECT\n\tdepartment_name,\n\t-- Sử dụng JSON_ARRAYAGG để tổng hợp các nhân viên vào một mảng JSON.\n\tJSON_ARRAYAGG(\n\t\tJSON_OBJECT('name', name, 'salary', salary)\n\t) AS top_employees\nFROM\n\tRankedEmployees\nWHERE\n\trnk <= 3\nGROUP BY\n\tdepartment_name\nORDER BY\n\tdepartment_name;"
+    }
+  ]
+}

package/es/assets/css/main.scss

@@ -1,6 +1,6 @@
+@use '../../components';
+
 :root {
   --primary-color: #005fb8;
   --text-base-color: #222222;
 }
-
-

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

@@ -0,0 +1,7 @@
+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/App.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { App as AntdApp } from 'antd';
+const App = (props) => (_jsx(AntdApp, { notification: { placement: 'bottomLeft', maxCount: 3 }, ...props }));
+App.useApp = AntdApp.useApp;
+export { App };

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

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

package/es/components/atoms/App/index.js

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

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

@@ -1,6 +1,5 @@
-/// <reference types="hoist-non-react-statics" />
 import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps, Input as AntdInput, InputRef } from 'antd';
+import { InputProps as AntdInputProps, InputRef } from 'antd';
 export interface InputProps extends AntdInputProps {
     noborder?: 'true' | 'false' | boolean;
     debounce?: number;
@@ -16,20 +15,15 @@ export interface InputProps extends AntdInputProps {
     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;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> & {
+    readonly DefaultInput: 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>>;
+    };
+    readonly CustomSearch: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+    readonly TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    readonly Password: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 };
-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/Input.js

@@ -17,7 +17,7 @@ import { PreviewVisibilityEyeIcon, VisibilityOffEyeIcon } from '../../icons';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
 const OriginInput = React.forwardRef((props, ref) => {
     // Props
-    const { withWrapper, debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg, ...restProps } = props;
+    const { debounce = 400, isHideErrMessage = false, withWrapper = true, errorArchive, required, labelColor, isReverseMask, focused, label, onAfterChange, onChange, errorMsg, ...restProps } = props;
     // State
     const [value, setValue] = useState(props.value);
     const [isFocused, setFocused] = useState(false);
@@ -74,21 +74,20 @@ const OriginInput = React.forwardRef((props, ref) => {
                         setFocused(true);
                     }
                     restProps.onBlur && restProps.onBlur(e);
-                }, onChange: onChangeInput, ...getPreventKeyboardAction(listDisableActions) }), (restProps.status === 'error' || errorArchive || requiredMsg) && !isHideErrMessage ? (_jsx(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 }, children: errorMsg || errorArchive || requiredMsg })) : null] }));
+                }, onChange: onChangeInput, ...getPreventKeyboardAction(listDisableActions, {
+                    onKeydown: restProps.onKeyDown,
+                    onKeyup: restProps.onKeyUp,
+                }) }), (restProps.status === 'error' || errorArchive || requiredMsg) && !isHideErrMessage ? (_jsx(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 }, children: errorMsg || errorArchive || requiredMsg })) : null] }));
     if (!withWrapper)
         return content;
     return _jsx("div", { className: "input__wrapper", children: content });
 });
-OriginInput.defaultProps = {
-    debounce: 400,
-    isHideErrMessage: false,
-    withWrapper: true,
-};
-export const Input = OriginInput;
 const SearchInput = React.forwardRef((props, ref) => (_jsx(OriginInput, { bordered: false, autoFocus: true, suffix: _jsx(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken?.bw8 }), ...props, ref: ref, className: `${props.className} antsomi-search-input` })));
 const PasswordInput = React.forwardRef((props, ref) => (_jsx(AntdInput.Password, { iconRender: visible => visible ? (_jsx(StyledIconWrapper, { type: "text", children: _jsx(PreviewVisibilityEyeIcon, {}) })) : (_jsx(StyledIconWrapper, { type: "text", children: _jsx(VisibilityOffEyeIcon, {}) })), ...props, ref: ref })));
-Input.CustomSearch = SearchInput;
-Input.TextArea = StyledInput.TextArea;
-Input.DefaultInput = AntdInput;
-Input.Password = PasswordInput;
+export const Input = Object.assign(OriginInput, {
+    DefaultInput: AntdInput,
+    CustomSearch: SearchInput,
+    TextArea: StyledInput.TextArea,
+    Password: PasswordInput,
+});
 export const { TextArea } = StyledInput;

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

@@ -0,0 +1 @@
+export { List, type ListProps } from 'antd';

package/es/components/atoms/List/List.js

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

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

@@ -0,0 +1 @@
+export { List, type ListProps } from './List';

package/es/components/atoms/List/index.js

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

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

@@ -1,5 +1,4 @@
 import { ScrollbarProps as CustomScrollbarProps } from 'react-custom-scrollbars';
-import React from 'react';
-export interface ScrollbarsProps extends CustomScrollbarProps {
-}
-export declare const Scrollbars: React.FC<ScrollbarsProps>;
+import { FC } from 'react';
+export type ScrollbarsProps = CustomScrollbarProps & {};
+export declare const Scrollbars: FC<ScrollbarsProps>;

package/es/components/atoms/Scrollbars/Scrollbars.js

@@ -40,7 +40,8 @@ export const Scrollbars = forwardRef((props, refProp) => {
             ref.current.thumbVertical.style.height = `${thumbHeight}px`;
             ref.current.thumbVertical.style.transform = `translateY(${thumbVerticalPosition}px)`;
             ref.current.thumbHorizontal.style.width = `${thumbWidth}px`;
-            ref.current.thumbHorizontal.style.transform = `translateX(${thumbHorizontalPosition}px)`;
+            ref.current.thumbHorizontal.style.transform =
+                `translateX(${thumbHorizontalPosition}px)`;
         }
         // Handle show hide track bar
         ref.current.trackVertical.style.visibility =

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

@@ -270,7 +270,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, { size: size, isViewMode: isViewMode, className: classNames({ 'slider-wrapper--borderless': borderless }), 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/atoms/Tag/Tag.js

@@ -10,7 +10,7 @@ import { CloseIcon } from '../../icons';
 import { Flex } from '../Flex';
 import { Button } from '../Button';
 import { Typography } from '../Typography';
-import { SearchPopover } from '../../molecules';
+import { SearchPopover } from '../../molecules/SearchPopover';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';

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

@@ -33,6 +33,7 @@ export { ContentEditable } from './ContentEditable';
 export { Image } from './Image';
 export { IconField } from './IconField';
 export { Suspense } from './Suspense';
+export { App } from './App';
 export { default as MobileBrandingBar } from './MobileBrandingBar';
 export { MobileFrameV3 } from './MobileFrameV3';
 export * from './Flex';
@@ -48,9 +49,11 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './List';
 export * from './Upload';
 export * from './NotificationStatus';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';
 export type { ImageProps } from './Image';
+export type { AppProps } from './App';

package/es/components/atoms/index.js

@@ -33,6 +33,7 @@ export { ContentEditable } from './ContentEditable';
 export { Image } from './Image';
 export { IconField } from './IconField';
 export { Suspense } from './Suspense';
+export { App } from './App';
 export { default as MobileBrandingBar } from './MobileBrandingBar';
 export { MobileFrameV3 } from './MobileFrameV3';
 export * from './Flex';
@@ -48,5 +49,6 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './List';
 export * from './Upload';
 export * from './NotificationStatus';

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

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

package/es/components/icons/FeedbackOutlinedIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const FeedbackOutlinedIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M20 2H4C2.9 2 2.01 2.9 2.01 4L2 22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H5.17L4.58 16.59L4 17.17V4H20V16ZM11 12H13V14H11V12ZM11 6H13V10H11V6Z", fill: "currentColor" }) }));
+});

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

@@ -174,6 +174,7 @@ export declare const LazyIcon: {
     ExtendValueIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     FactCheckIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     FailSlim: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    FeedbackOutlinedIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     FeedbackRatingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     FileDownloadIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     FileTransferIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -257,6 +258,8 @@ export declare const LazyIcon: {
     MoreInfoIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MoveToIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MuteIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    NavigateBeforeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    NavigateNextIcon: 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>>>;
     NoteNewIcon: 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>>>;
@@ -270,6 +273,7 @@ export declare const LazyIcon: {
     PaymentIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     PenDrawingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     PenRulerIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    PenSparkIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     PersonAddDisabledIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     PersonUserAccountIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     PhoneCallbackIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -341,6 +345,7 @@ export declare const LazyIcon: {
     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>>>;
     StatusInfoIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    StatusSuccessIcon: 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>>>;
     StopRecordIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     StoreIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;

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

@@ -177,6 +177,7 @@ export const LazyIcon = {
     ExtendValueIcon: lazy(() => import('../ExtendValueIcon').then(m => ({ default: m.ExtendValueIcon }))),
     FactCheckIcon: lazy(() => import('../FactCheckIcon').then(m => ({ default: m.FactCheckIcon }))),
     FailSlim: lazy(() => import('../FailSlim').then(m => ({ default: m.FailSlim }))),
+    FeedbackOutlinedIcon: lazy(() => import('../FeedbackOutlinedIcon').then(m => ({ default: m.FeedbackOutlinedIcon }))),
     FeedbackRatingIcon: lazy(() => import('../FeedbackRatingIcon').then(m => ({ default: m.FeedbackRatingIcon }))),
     FileDownloadIcon: lazy(() => import('../FileDownloadIcon').then(m => ({ default: m.FileDownloadIcon }))),
     FileTransferIcon: lazy(() => import('../FileTransferIcon').then(m => ({ default: m.FileTransferIcon }))),
@@ -258,6 +259,8 @@ export const LazyIcon = {
     MoreInfoIcon: lazy(() => import('../MoreInfoIcon').then(m => ({ default: m.MoreInfoIcon }))),
     MoveToIcon: lazy(() => import('../MoveToIcon').then(m => ({ default: m.MoveToIcon }))),
     MuteIcon: lazy(() => import('../MuteIcon').then(m => ({ default: m.MuteIcon }))),
+    NavigateBeforeIcon: lazy(() => import('../NavigateBeforeIcon').then(m => ({ default: m.NavigateBeforeIcon }))),
+    NavigateNextIcon: lazy(() => import('../NavigateNextIcon').then(m => ({ default: m.NavigateNextIcon }))),
     NodeViewIcon: lazy(() => import('../NodeViewIcon').then(m => ({ default: m.NodeViewIcon }))),
     NoteNewIcon: lazy(() => import('../NoteNewIcon').then(m => ({ default: m.NoteNewIcon }))),
     NotificationIcon: lazy(() => import('../NotificationIcon').then(m => ({ default: m.NotificationIcon }))),
@@ -271,6 +274,7 @@ export const LazyIcon = {
     PaymentIcon: lazy(() => import('../PaymentIcon').then(m => ({ default: m.PaymentIcon }))),
     PenDrawingIcon: lazy(() => import('../PenDrawingIcon').then(m => ({ default: m.PenDrawingIcon }))),
     PenRulerIcon: lazy(() => import('../PenRulerIcon').then(m => ({ default: m.PenRulerIcon }))),
+    PenSparkIcon: lazy(() => import('../PenSparkIcon').then(m => ({ default: m.PenSparkIcon }))),
     PersonAddDisabledIcon: lazy(() => import('../PersonAddDisabledIcon').then(m => ({ default: m.PersonAddDisabledIcon }))),
     PersonUserAccountIcon: lazy(() => import('../PersonUserAccountIcon').then(m => ({ default: m.PersonUserAccountIcon }))),
     PhoneCallbackIcon: lazy(() => import('../PhoneCallbackIcon').then(m => ({ default: m.PhoneCallbackIcon }))),
@@ -344,6 +348,7 @@ export const LazyIcon = {
     SqlWorkspaceIcon: lazy(() => import('../SqlWorkspaceIcon').then(m => ({ default: m.SqlWorkspaceIcon }))),
     StatisticIcon: lazy(() => import('../StatisticIcon').then(m => ({ default: m.StatisticIcon }))),
     StatusInfoIcon: lazy(() => import('../StatusInfoIcon').then(m => ({ default: m.StatusInfoIcon }))),
+    StatusSuccessIcon: lazy(() => import('../StatusSuccessIcon').then(m => ({ default: m.StatusSuccessIcon }))),
     StickerIcon: lazy(() => import('../StickerIcon').then(m => ({ default: m.StickerIcon }))),
     StopRecordIcon: lazy(() => import('../StopRecordIcon').then(m => ({ default: m.StopRecordIcon }))),
     StoreIcon: lazy(() => import('../StoreIcon').then(m => ({ default: m.StoreIcon }))),

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

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

package/es/components/icons/NavigateBeforeIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const NavigateBeforeIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z", fill: "currentColor" }) }));
+});

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

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

package/es/components/icons/NavigateNextIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const NavigateNextIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M10 6L8.59 7.41L13.17 12L8.59 16.59L10 18L16 12L10 6Z", fill: "currentColor" }) }));
+});

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

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

package/es/components/icons/PenSparkIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const PenSparkIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M21.4795 7.15625L20.2326 5.8975C20.0696 5.73091 19.8754 5.59864 19.6614 5.50836C19.4474 5.41809 19.2177 5.3716 18.9857 5.3716C18.7538 5.3716 18.5241 5.41809 18.3101 5.50836C18.096 5.59864 17.9019 5.73091 17.7389 5.8975L5.52889 18.2237V22H9.26952L21.4795 9.67375C22.1735 8.985 22.1735 7.85687 21.4795 7.15625ZM8.54021 20.2188H7.29334V18.96L16.492 9.67375L17.7389 10.9325L8.54021 20.2188ZM12.5867 8.34375C9.6577 8.34375 7.29334 5.95688 7.29334 3C7.29334 5.95688 4.92898 8.34375 2 8.34375C4.92898 8.34375 7.29334 10.7306 7.29334 13.6875C7.29334 10.7306 9.6577 8.34375 12.5867 8.34375Z", fill: "currentColor" }) }));
+});

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

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

package/es/components/icons/StatusSuccessIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const StatusSuccessIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M12 2C6.42857 2 2 6.42857 2 12C2 17.5714 6.42857 22 12 22C17.5714 22 22 17.5714 22 12C22 6.42857 17.5714 2 12 2ZM10 17L5 12L6.42857 10.5714L10 14.1429L17.5714 6.57143L19 8L10 17Z", fill: "currentColor" }) }));
+});

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

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

package/es/components/icons/SummarizeIconIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const SummarizeIconIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M7.5 20C6.97005 19.9984 6.46225 19.7872 6.08752 19.4125C5.71279 19.0377 5.50158 18.5299 5.5 18L5.51001 6C5.51 5.4713 5.71934 4.9641 6.09225 4.58931C6.46517 4.21452 6.9713 4.00264 7.5 4H17.5C18.0299 4.00158 18.5377 4.2128 18.9125 4.58753C19.2872 4.96227 19.4984 5.47005 19.5 6V18C19.4984 18.5299 19.2872 19.0377 18.9125 19.4125C18.5377 19.7872 18.0299 19.9984 17.5 20H7.5ZM7.5 18H17.5V6H7.5V18ZM8.5 16V14H10.5V16H8.5ZM11.5 15V14H15.5V15H11.5ZM8.5 13V11H10.5V13H8.5ZM11.5 12V11H15.5V12H11.5ZM8.5 10V8H10.5V10H8.5ZM11.5 9V8H15.5V9H11.5Z", fill: "currentColor" }) }));
+});

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

@@ -169,6 +169,7 @@ export { ExportMenuIcon } from './ExportMenuIcon';
 export { ExtendValueIcon } from './ExtendValueIcon';
 export { FactCheckIcon } from './FactCheckIcon';
 export { FailSlim } from './FailSlim';
+export { FeedbackOutlinedIcon } from './FeedbackOutlinedIcon';
 export { FeedbackRatingIcon } from './FeedbackRatingIcon';
 export { FileDownloadIcon } from './FileDownloadIcon';
 export { FileTransferIcon } from './FileTransferIcon';
@@ -250,6 +251,8 @@ export { MoreIcon } from './MoreIcon';
 export { MoreInfoIcon } from './MoreInfoIcon';
 export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
+export { NavigateBeforeIcon } from './NavigateBeforeIcon';
+export { NavigateNextIcon } from './NavigateNextIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NoteNewIcon } from './NoteNewIcon';
 export { NotificationIcon } from './NotificationIcon';
@@ -263,6 +266,7 @@ export { PauseIcon } from './PauseIcon';
 export { PaymentIcon } from './PaymentIcon';
 export { PenDrawingIcon } from './PenDrawingIcon';
 export { PenRulerIcon } from './PenRulerIcon';
+export { PenSparkIcon } from './PenSparkIcon';
 export { PersonAddDisabledIcon } from './PersonAddDisabledIcon';
 export { PersonUserAccountIcon } from './PersonUserAccountIcon';
 export { PhoneCallbackIcon } from './PhoneCallbackIcon';
@@ -334,6 +338,7 @@ export { SQLWorkspace30Icon } from './SQLWorkspace30Icon';
 export { SqlWorkspaceIcon } from './SqlWorkspaceIcon';
 export { StatisticIcon } from './StatisticIcon';
 export { StatusInfoIcon } from './StatusInfoIcon';
+export { StatusSuccessIcon } from './StatusSuccessIcon';
 export { StickerIcon } from './StickerIcon';
 export { StopRecordIcon } from './StopRecordIcon';
 export { StoreIcon } from './StoreIcon';

package/es/components/icons/index.js

@@ -169,6 +169,7 @@ export { ExportMenuIcon } from './ExportMenuIcon';
 export { ExtendValueIcon } from './ExtendValueIcon';
 export { FactCheckIcon } from './FactCheckIcon';
 export { FailSlim } from './FailSlim';
+export { FeedbackOutlinedIcon } from './FeedbackOutlinedIcon';
 export { FeedbackRatingIcon } from './FeedbackRatingIcon';
 export { FileDownloadIcon } from './FileDownloadIcon';
 export { FileTransferIcon } from './FileTransferIcon';
@@ -250,6 +251,8 @@ export { MoreIcon } from './MoreIcon';
 export { MoreInfoIcon } from './MoreInfoIcon';
 export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
+export { NavigateBeforeIcon } from './NavigateBeforeIcon';
+export { NavigateNextIcon } from './NavigateNextIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NoteNewIcon } from './NoteNewIcon';
 export { NotificationIcon } from './NotificationIcon';
@@ -263,6 +266,7 @@ export { PauseIcon } from './PauseIcon';
 export { PaymentIcon } from './PaymentIcon';
 export { PenDrawingIcon } from './PenDrawingIcon';
 export { PenRulerIcon } from './PenRulerIcon';
+export { PenSparkIcon } from './PenSparkIcon';
 export { PersonAddDisabledIcon } from './PersonAddDisabledIcon';
 export { PersonUserAccountIcon } from './PersonUserAccountIcon';
 export { PhoneCallbackIcon } from './PhoneCallbackIcon';
@@ -334,6 +338,7 @@ export { SQLWorkspace30Icon } from './SQLWorkspace30Icon';
 export { SqlWorkspaceIcon } from './SqlWorkspaceIcon';
 export { StatisticIcon } from './StatisticIcon';
 export { StatusInfoIcon } from './StatusInfoIcon';
+export { StatusSuccessIcon } from './StatusSuccessIcon';
 export { StickerIcon } from './StickerIcon';
 export { StopRecordIcon } from './StopRecordIcon';
 export { StoreIcon } from './StoreIcon';

package/es/components/index.scss

@@ -0,0 +1 @@
+@use './organism';

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

@@ -16,7 +16,7 @@ export interface LabeledTreeValue extends LabeledValue {
     type: number | null;
     status?: any;
 }
-interface AddDynamicContentProps {
+export interface AddDynamicContentProps {
     defaultDynamicIndex?: number;
     journeySettings: Record<string, any>;
     contentSources: Record<string, any>;
@@ -32,4 +32,3 @@ interface AddDynamicContentProps {
     APIConfig: APIConfig;
 }
 export declare const AddDynamicContent: React.FC<AddDynamicContentProps>;
-export {};

package/es/components/molecules/CalendarSelection/constants.d.ts

@@ -3,7 +3,7 @@ export declare const TRIGGER_OUT_MODE: {
     readonly auto: "auto";
     readonly manual: "manual";
 };
-export declare const LOCAL_TIMEZONE = "Asia/Hong_Kong";
+export declare const LOCAL_TIMEZONE: string;
 export declare const RANGE_LIMIT: number;
 export declare const DEFAULT_NUM_UP_TO = 30;
 export declare const AUTO_UPDATE_TO_KEY: {

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.d.ts

@@ -6,8 +6,14 @@ declare const CaptureScreen: {
         src: string;
         alt: string;
         defaultPositions: {
-            capture: null;
-            record: null;
+            capture: {
+                x: number;
+                y: number;
+            };
+            record: {
+                x: number;
+                y: number;
+            };
         };
         callback: () => void;
     };

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: () => { },
 };