@antscorp/antsomi-ui 2.0.110 → 2.0.112

package/es/assets/css/main.scss

@@ -3,4 +3,6 @@
 :root {
   --primary-color: #005fb8;
   --text-base-color: #222222;
+  --antsomi-box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }

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

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

package/es/components/atoms/Eyedropper/Eyedropper.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Typography, message } from 'antd';
+import { BgColorsOutlined } from '@ant-design/icons'; // Icon hình giọt nước
+import { ColorSwatch, StyledButton, StyledColorTag, StyledEyedropperContainer } from './styled';
+import tinycolor from 'tinycolor2';
+import clsx from 'clsx';
+const { Text } = Typography;
+export const Eyedropper = (props) => {
+    const { defaultColor, onColorPick, className } = props;
+    const [pickedColor, setPickedColor] = useState(defaultColor);
+    const [isLoading, setIsLoading] = useState(false);
+    const apiSupported = 'EyeDropper' in window;
+    // Cập nhật màu mặc định nếu prop thay đổi
+    useEffect(() => {
+        setPickedColor(defaultColor);
+    }, [defaultColor]);
+    const handlePickColor = async () => {
+        if (!apiSupported) {
+            message.error('Trình duyệt của bạn không hỗ trợ EyeDropper API.');
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const eyeDropper = new window.EyeDropper();
+            const { sRGBHex } = await eyeDropper.open();
+            setPickedColor(sRGBHex);
+            message.success(`Đã chọn màu: ${sRGBHex}`);
+            onColorPick?.(sRGBHex);
+        }
+        catch (e) {
+            if (e instanceof Error && e.name === 'AbortError') {
+                message.info('Người dùng đã hủy chọn màu.');
+            }
+            else if (e instanceof Error) {
+                message.error(`Đã xảy ra lỗi khi chọn màu: ${e.message}`);
+            }
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const isCurrentColorLight = tinycolor(pickedColor).isLight();
+    return (_jsxs(StyledEyedropperContainer, { className: className, children: [_jsxs(Typography.Title, { level: 4, children: [_jsx(BgColorsOutlined, {}), " C\u00F4ng c\u1EE5 tr\u00EDch xu\u1EA5t m\u00E0u"] }), _jsx(Text, { type: "secondary", children: "B\u1EA5m n\u00FAt b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 k\u00EDch ho\u1EA1t c\u00F4ng c\u1EE5 Eyedropper c\u1EE7a tr\u00ECnh duy\u1EC7t v\u00E0 ch\u1ECDn m\u00E0u t\u1EEB b\u1EA5t k\u1EF3 \u0111\u00E2u tr\u00EAn m\u00E0n h\u00ECnh." }), _jsx(StyledButton, { type: "primary", icon: _jsx(BgColorsOutlined, {}), onClick: handlePickColor, loading: isLoading, disabled: isLoading || !apiSupported, size: "large", children: "Ch\u1ECDn M\u00E0u" }), pickedColor && (_jsxs("div", { style: {
+                    marginTop: '20px',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: '10px',
+                }, children: [_jsx(Text, { children: "M\u00E0u \u0111\u00E3 ch\u1ECDn:" }), _jsx(StyledColorTag, { color: pickedColor, className: clsx({
+                            'is-lightcolor': isCurrentColorLight,
+                        }), children: pickedColor }), _jsx(ColorSwatch, { "$color": pickedColor })] })), !apiSupported && (_jsx(Text, { type: "danger", style: { marginTop: '15px', display: 'block' }, children: "Tr\u00ECnh duy\u1EC7t hi\u1EC7n t\u1EA1i kh\u00F4ng h\u1ED7 tr\u1EE3 EyeDropper API. Vui l\u00F2ng s\u1EED d\u1EE5ng Chrome, Edge ho\u1EB7c c\u00E1c tr\u00ECnh duy\u1EC7t d\u1EF1a tr\u00EAn Chromium." }))] }));
+};

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledEyedropperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;
+export declare const StyledColorTag: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;
+export declare const ColorSwatch: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+}, never>;

package/es/components/atoms/Eyedropper/styled.js

@@ -0,0 +1,45 @@
+import { Button, Tag } from 'antd';
+import styled from 'styled-components';
+export const StyledEyedropperContainer = styled.div `
+  padding: 20px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  max-width: 450px;
+  margin: 20px auto;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  text-align: center; /* Căn giữa nội dung */
+
+  h4 {
+    margin-bottom: 15px;
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Căn giữa icon và tiêu đề */
+    gap: 8px; /* Khoảng cách giữa icon và chữ */
+  }
+`;
+export const StyledButton = styled(Button) `
+  margin-top: 20px;
+  width: auto; /* Để nút không bị giãn full chiều rộng */
+`;
+export const StyledColorTag = styled(Tag) `
+  padding: 4px 8px;
+  font-size: 1em;
+  font-weight: bold;
+  min-width: 100px;
+  text-align: center;
+  border: none;
+  color: white;
+
+  &.is-lightcolor {
+    border: 1px solid #d9d9d9;
+    color: #333;
+  }
+`;
+export const ColorSwatch = styled.div `
+  width: 30px;
+  height: 30px;
+  background-color: ${props => props.$color || 'transparent'}; /* Nhận prop $color */
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+`;

package/es/components/atoms/Eyedropper/types.d.ts

@@ -0,0 +1,5 @@
+export type EyedropperProps = {
+    defaultColor?: string;
+    onColorPick?: (color: string) => void;
+    className?: string;
+};

package/es/components/atoms/Eyedropper/types.js

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

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

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

package/es/components/icons/ALignRightIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ALignRightIcon = 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: "M3 21H21V19H3V21ZM9 17H21V15H9V17ZM3 13H21V11H3V13ZM9 9H21V7H9V9ZM3 3V5H21V3H3Z", fill: "currentColor" }) }));
+});

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

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

package/es/components/icons/AlignCenterIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const AlignCenterIcon = 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: "M7 15V17H17V15H7ZM3 21H21V19H3V21ZM3 13H21V11H3V13ZM7 7V9H17V7H7ZM3 3V5H21V3H3Z", fill: "currentColor" }) }));
+});

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

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

package/es/components/icons/AlignJustifyIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const AlignJustifyIcon = 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: "M3 21H21V19H3V21ZM3 17H21V15H3V17ZM3 13H21V11H3V13ZM3 9H21V7H3V9ZM3 3V5H21V3H3Z", fill: "currentColor" }) }));
+});

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

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

package/es/components/icons/AlignLeftIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const AlignLeftIcon = 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 15H3V17H15V15ZM15 7H3V9H15V7ZM3 13H21V11H3V13ZM3 21H21V19H3V21ZM3 3V5H21V3H3Z", fill: "currentColor" }) }));
+});

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

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

package/es/components/icons/ArrowDropDownIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ArrowDropDownIcon = 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: "M7 10L12 15L17 10H7Z", fill: "black" }) }));
+});

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

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

package/es/components/icons/ChevronRightIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ChevronRightIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "m9 18 6-6-6-6" }) }));
+});

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

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

package/es/components/icons/ColorizeIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ColorizeIcon = 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.6764 4.92454L19.0766 2.32489C18.9738 2.2219 18.8517 2.1402 18.7173 2.08445C18.5829 2.0287 18.4388 2 18.2933 2C18.1478 2 18.0037 2.0287 17.8693 2.08445C17.7349 2.1402 17.6128 2.2219 17.51 2.32489L14.0436 5.79109L11.8993 3.66916L10.3327 5.23561L11.9104 6.81317L2 16.7229V22H7.27741L17.1878 12.0902L18.7655 13.6678L20.332 12.1013L18.1989 9.9683L21.6653 6.50211C22.1097 6.05772 22.1097 5.35782 21.6764 4.92454ZM6.35525 19.7781L4.22207 17.645L13.177 8.6907L15.3102 10.8237L6.35525 19.7781Z", fill: "black" }) }));
+});

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

@@ -12,6 +12,10 @@ export declare const LazyIcon: {
     AddRadiusIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AddShoppingCartIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AdjustIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    AlignCenterIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    AlignJustifyIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    AlignLeftIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    ALignRightIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AllDevicesIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AllJourneyChannelsIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AnalyticModels30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -21,6 +25,7 @@ export declare const LazyIcon: {
     AnlysisIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AnlyticModelsIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AntsomiAIIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    ArrowDropDownIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ArrowGrowIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ArrowLineIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ArticleIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -63,12 +68,14 @@ export declare const LazyIcon: {
     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>>>;
+    ChevronRightIcon: 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>>>;
     CircleInfoIcon: 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>>>;
     CodeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Collection30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    ColorizeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ColorProfileStyleThemeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ColumnIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     CommentIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -232,6 +239,7 @@ export declare const LazyIcon: {
     LineIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     LinkManagement30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     LinkManagementIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    LinkOffIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ListIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     LoadingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & {
         backgroundColor?: string | undefined;
@@ -251,6 +259,7 @@ export declare const LazyIcon: {
     MenuImageMultiIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MenuImageSingleIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MergeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    MinusIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MobileFriendlyIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MobilePhoneIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MonitorAppIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;

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

@@ -12,6 +12,10 @@ export const LazyIcon = {
     AddRadiusIcon: lazy(() => import('../AddRadiusIcon').then(m => ({ default: m.AddRadiusIcon }))),
     AddShoppingCartIcon: lazy(() => import('../AddShoppingCartIcon').then(m => ({ default: m.AddShoppingCartIcon }))),
     AdjustIcon: lazy(() => import('../AdjustIcon').then(m => ({ default: m.AdjustIcon }))),
+    AlignCenterIcon: lazy(() => import('../AlignCenterIcon').then(m => ({ default: m.AlignCenterIcon }))),
+    AlignJustifyIcon: lazy(() => import('../AlignJustifyIcon').then(m => ({ default: m.AlignJustifyIcon }))),
+    AlignLeftIcon: lazy(() => import('../AlignLeftIcon').then(m => ({ default: m.AlignLeftIcon }))),
+    ALignRightIcon: lazy(() => import('../ALignRightIcon').then(m => ({ default: m.ALignRightIcon }))),
     AllDevicesIcon: lazy(() => import('../AllDevicesIcon').then(m => ({ default: m.AllDevicesIcon }))),
     AllJourneyChannelsIcon: lazy(() => import('../AllJourneyChannelsIcon').then(m => ({ default: m.AllJourneyChannelsIcon }))),
     AnalyticModels30Icon: lazy(() => import('../AnalyticModels30Icon').then(m => ({ default: m.AnalyticModels30Icon }))),
@@ -21,6 +25,7 @@ export const LazyIcon = {
     AnlysisIcon: lazy(() => import('../AnlysisIcon').then(m => ({ default: m.AnlysisIcon }))),
     AnlyticModelsIcon: lazy(() => import('../AnlyticModelsIcon').then(m => ({ default: m.AnlyticModelsIcon }))),
     AntsomiAIIcon: lazy(() => import('../AntsomiAIIcon').then(m => ({ default: m.AntsomiAIIcon }))),
+    ArrowDropDownIcon: lazy(() => import('../ArrowDropDownIcon').then(m => ({ default: m.ArrowDropDownIcon }))),
     ArrowGrowIcon: lazy(() => import('../ArrowGrowIcon').then(m => ({ default: m.ArrowGrowIcon }))),
     ArrowLineIcon: lazy(() => import('../ArrowLineIcon').then(m => ({ default: m.ArrowLineIcon }))),
     ArticleIcon: lazy(() => import('../ArticleIcon').then(m => ({ default: m.ArticleIcon }))),
@@ -69,12 +74,14 @@ 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 }))),
+    ChevronRightIcon: lazy(() => import('../ChevronRightIcon').then(m => ({ default: m.ChevronRightIcon }))),
     CircleAddElementIcon: lazy(() => import('../CircleAddElementIcon').then(m => ({ default: m.CircleAddElementIcon }))),
     CircleInfoIcon: lazy(() => import('../CircleInfoIcon').then(m => ({ default: m.CircleInfoIcon }))),
     CircleNotificationsIcon: lazy(() => import('../CircleNotificationsIcon').then(m => ({ default: m.CircleNotificationsIcon }))),
     CloseIcon: lazy(() => import('../CloseIcon').then(m => ({ default: m.CloseIcon }))),
     CodeIcon: lazy(() => import('../CodeIcon').then(m => ({ default: m.CodeIcon }))),
     Collection30Icon: lazy(() => import('../Collection30Icon').then(m => ({ default: m.Collection30Icon }))),
+    ColorizeIcon: lazy(() => import('../ColorizeIcon').then(m => ({ default: m.ColorizeIcon }))),
     ColorProfileStyleThemeIcon: lazy(() => import('../ColorProfileStyleThemeIcon').then(m => ({ default: m.ColorProfileStyleThemeIcon }))),
     ColumnIcon: lazy(() => import('../ColumnIcon').then(m => ({ default: m.ColumnIcon }))),
     CommentIcon: lazy(() => import('../CommentIcon').then(m => ({ default: m.CommentIcon }))),
@@ -235,6 +242,7 @@ export const LazyIcon = {
     LineIcon: lazy(() => import('../LineIcon').then(m => ({ default: m.LineIcon }))),
     LinkManagement30Icon: lazy(() => import('../LinkManagement30Icon').then(m => ({ default: m.LinkManagement30Icon }))),
     LinkManagementIcon: lazy(() => import('../LinkManagementIcon').then(m => ({ default: m.LinkManagementIcon }))),
+    LinkOffIcon: lazy(() => import('../LinkOffIcon').then(m => ({ default: m.LinkOffIcon }))),
     ListIcon: lazy(() => import('../ListIcon').then(m => ({ default: m.ListIcon }))),
     LoadingIcon: lazy(() => import('../LoadingIcon').then(m => ({ default: m.LoadingIcon }))),
     LocalMallIcon: lazy(() => import('../LocalMallIcon').then(m => ({ default: m.LocalMallIcon }))),
@@ -252,6 +260,7 @@ export const LazyIcon = {
     MenuImageMultiIcon: lazy(() => import('../MenuImageMultiIcon').then(m => ({ default: m.MenuImageMultiIcon }))),
     MenuImageSingleIcon: lazy(() => import('../MenuImageSingleIcon').then(m => ({ default: m.MenuImageSingleIcon }))),
     MergeIcon: lazy(() => import('../MergeIcon').then(m => ({ default: m.MergeIcon }))),
+    MinusIcon: lazy(() => import('../MinusIcon').then(m => ({ default: m.MinusIcon }))),
     MobileFriendlyIcon: lazy(() => import('../MobileFriendlyIcon').then(m => ({ default: m.MobileFriendlyIcon }))),
     MobilePhoneIcon: lazy(() => import('../MobilePhoneIcon').then(m => ({ default: m.MobilePhoneIcon }))),
     MonitorAppIcon: lazy(() => import('../MonitorAppIcon').then(m => ({ default: m.MonitorAppIcon }))),

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

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

package/es/components/icons/LinkOffIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const LinkOffIcon = 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.7338 20.4488C22.0886 20.8038 22.0888 21.3789 21.7338 21.7338C21.3789 22.0888 20.8038 22.0886 20.4488 21.7338L21.7338 20.4488ZM2 12.0006C2 10.554 2.57508 9.16568 3.59799 8.14276C4.16642 7.57438 4.8477 7.14486 5.58882 6.875L2.26633 3.55247L2.15048 3.40998C1.91716 3.05707 1.95555 2.57685 2.26633 2.26607C2.57711 1.95529 3.05732 1.91689 3.41023 2.15021L3.55271 2.26607L21.7338 20.4488L21.0907 21.0906L20.4488 21.7338L11.6239 12.9088H8.364C7.86207 12.9088 7.45471 12.5025 7.45447 12.0006C7.45447 11.4985 7.86193 11.0911 8.364 11.0911H9.80485L7.09493 8.37979C6.26264 8.46253 5.47964 8.83254 4.88304 9.42915C4.20138 10.1111 3.81905 11.0364 3.81905 12.0006C3.81916 12.9649 4.2012 13.8902 4.88304 14.5721C5.56488 15.2539 6.49022 15.636 7.45447 15.6361H9.27352L9.45596 15.6547C9.87039 15.7394 10.1817 16.1062 10.1817 16.5456C10.1817 16.9851 9.87039 17.3519 9.45596 17.4365L9.27352 17.4552H7.45447C6.00802 17.455 4.6208 16.88 3.59799 15.8572C2.57518 14.8343 2.00012 13.4471 2 12.0006ZM16.5457 6.54608C17.5584 6.54608 18.5512 6.82743 19.4128 7.35973C20.2744 7.89228 20.9719 8.65496 21.4249 9.56099C21.8778 10.4669 22.0685 11.4819 21.9775 12.4907C21.8865 13.4992 21.517 14.4624 20.9096 15.2725L20.7844 15.4084C20.468 15.6888 19.9879 15.7185 19.6365 15.455C19.2348 15.1537 19.1541 14.5836 19.4554 14.1819L19.5992 13.9742C19.9185 13.4802 20.1148 12.9152 20.1678 12.3269C20.2285 11.6543 20.0996 10.9773 19.7976 10.3733C19.4957 9.76978 19.032 9.26202 18.458 8.90714C17.8835 8.5521 17.221 8.36381 16.5457 8.36381H14.728C14.2259 8.36381 13.8185 7.95636 13.8185 7.45428C13.8187 6.95241 14.2261 6.54608 14.728 6.54608H16.5457Z", fill: "currentColor" }) }));
+});

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

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

package/es/components/icons/MinusIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const MinusIcon = 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: "M19 13H5V11H19V13Z", fill: "currentColor" }) }));
+});

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

@@ -10,6 +10,10 @@ export { AddIcon } from './AddIcon';
 export { AddRadiusIcon } from './AddRadiusIcon';
 export { AddShoppingCartIcon } from './AddShoppingCartIcon';
 export { AdjustIcon } from './AdjustIcon';
+export { AlignCenterIcon } from './AlignCenterIcon';
+export { AlignJustifyIcon } from './AlignJustifyIcon';
+export { AlignLeftIcon } from './AlignLeftIcon';
+export { ALignRightIcon } from './ALignRightIcon';
 export { AllDevicesIcon } from './AllDevicesIcon';
 export { AllJourneyChannelsIcon } from './AllJourneyChannelsIcon';
 export { AnalyticModels30Icon } from './AnalyticModels30Icon';
@@ -19,6 +23,7 @@ export { AnalyticsIcon } from './AnalyticsIcon';
 export { AnlysisIcon } from './AnlysisIcon';
 export { AnlyticModelsIcon } from './AnlyticModelsIcon';
 export { AntsomiAIIcon } from './AntsomiAIIcon';
+export { ArrowDropDownIcon } from './ArrowDropDownIcon';
 export { ArrowGrowIcon } from './ArrowGrowIcon';
 export { ArrowLineIcon } from './ArrowLineIcon';
 export { ArticleIcon } from './ArticleIcon';
@@ -61,12 +66,14 @@ export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
 export { ChecklistRtlIcon } from './ChecklistRtlIcon';
 export { CheckSlimIcon } from './CheckSlimIcon';
+export { ChevronRightIcon } from './ChevronRightIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleInfoIcon } from './CircleInfoIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
 export { CodeIcon } from './CodeIcon';
 export { Collection30Icon } from './Collection30Icon';
+export { ColorizeIcon } from './ColorizeIcon';
 export { ColorProfileStyleThemeIcon } from './ColorProfileStyleThemeIcon';
 export { ColumnIcon } from './ColumnIcon';
 export { CommentIcon } from './CommentIcon';
@@ -227,6 +234,7 @@ export { LibraryIcon } from './LibraryIcon';
 export { LineIcon } from './LineIcon';
 export { LinkManagement30Icon } from './LinkManagement30Icon';
 export { LinkManagementIcon } from './LinkManagementIcon';
+export { LinkOffIcon } from './LinkOffIcon';
 export { ListIcon } from './ListIcon';
 export { LoadingIcon } from './LoadingIcon';
 export { LocalMallIcon } from './LocalMallIcon';
@@ -244,6 +252,7 @@ export { MenuExpandIcon } from './MenuExpandIcon';
 export { MenuImageMultiIcon } from './MenuImageMultiIcon';
 export { MenuImageSingleIcon } from './MenuImageSingleIcon';
 export { MergeIcon } from './MergeIcon';
+export { MinusIcon } from './MinusIcon';
 export { MobileFriendlyIcon } from './MobileFriendlyIcon';
 export { MobilePhoneIcon } from './MobilePhoneIcon';
 export { MonitorAppIcon } from './MonitorAppIcon';

package/es/components/icons/index.js

@@ -10,6 +10,10 @@ export { AddIcon } from './AddIcon';
 export { AddRadiusIcon } from './AddRadiusIcon';
 export { AddShoppingCartIcon } from './AddShoppingCartIcon';
 export { AdjustIcon } from './AdjustIcon';
+export { AlignCenterIcon } from './AlignCenterIcon';
+export { AlignJustifyIcon } from './AlignJustifyIcon';
+export { AlignLeftIcon } from './AlignLeftIcon';
+export { ALignRightIcon } from './ALignRightIcon';
 export { AllDevicesIcon } from './AllDevicesIcon';
 export { AllJourneyChannelsIcon } from './AllJourneyChannelsIcon';
 export { AnalyticModels30Icon } from './AnalyticModels30Icon';
@@ -19,6 +23,7 @@ export { AnalyticsIcon } from './AnalyticsIcon';
 export { AnlysisIcon } from './AnlysisIcon';
 export { AnlyticModelsIcon } from './AnlyticModelsIcon';
 export { AntsomiAIIcon } from './AntsomiAIIcon';
+export { ArrowDropDownIcon } from './ArrowDropDownIcon';
 export { ArrowGrowIcon } from './ArrowGrowIcon';
 export { ArrowLineIcon } from './ArrowLineIcon';
 export { ArticleIcon } from './ArticleIcon';
@@ -61,12 +66,14 @@ export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
 export { ChecklistRtlIcon } from './ChecklistRtlIcon';
 export { CheckSlimIcon } from './CheckSlimIcon';
+export { ChevronRightIcon } from './ChevronRightIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleInfoIcon } from './CircleInfoIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
 export { CodeIcon } from './CodeIcon';
 export { Collection30Icon } from './Collection30Icon';
+export { ColorizeIcon } from './ColorizeIcon';
 export { ColorProfileStyleThemeIcon } from './ColorProfileStyleThemeIcon';
 export { ColumnIcon } from './ColumnIcon';
 export { CommentIcon } from './CommentIcon';
@@ -227,6 +234,7 @@ export { LibraryIcon } from './LibraryIcon';
 export { LineIcon } from './LineIcon';
 export { LinkManagement30Icon } from './LinkManagement30Icon';
 export { LinkManagementIcon } from './LinkManagementIcon';
+export { LinkOffIcon } from './LinkOffIcon';
 export { ListIcon } from './ListIcon';
 export { LoadingIcon } from './LoadingIcon';
 export { LocalMallIcon } from './LocalMallIcon';
@@ -244,6 +252,7 @@ export { MenuExpandIcon } from './MenuExpandIcon';
 export { MenuImageMultiIcon } from './MenuImageMultiIcon';
 export { MenuImageSingleIcon } from './MenuImageSingleIcon';
 export { MergeIcon } from './MergeIcon';
+export { MinusIcon } from './MinusIcon';
 export { MobileFriendlyIcon } from './MobileFriendlyIcon';
 export { MobilePhoneIcon } from './MobilePhoneIcon';
 export { MonitorAppIcon } from './MonitorAppIcon';

package/es/components/index.scss

@@ -1 +1,2 @@
 @use './organism';
+@use './molecules';

package/es/components/molecules/EmojiCollections/CommonCollection/index.js

@@ -16,7 +16,7 @@ import { COMMON_TAB_COLLECTION, MIN_VISIBLE_COUNT, SMILEYS_BODY } from './consta
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { Text } = Typography;
 const emojiListParsed = JSON.parse(JSON.stringify(ICON_EMOJI_COMMON));
-const CommonCollection = ({ onEmojiClick }) => {
+const CommonCollection = ({ onEmojiClick, getPopupContainer }) => {
     // States
     const [visibleCount, setVisibleCount] = useState(MIN_VISIBLE_COUNT);
     const [state, setState] = useImmer({
@@ -93,7 +93,7 @@ const CommonCollection = ({ onEmojiClick }) => {
         });
         return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, onScroll: e => onScroll(e, emojiCollection.length), children: _jsx(Flex, { wrap: "wrap", children: content }) }));
     }, [emojiCollection, visibleCount, onScroll, onEmojiClick]);
-    return (_jsxs(WrapperCollection, { children: [_jsxs(Flex, { gap: 20, justify: "space-between", align: "flex-end", children: [_jsx(Input, { placeholder: "Search...", suffix: _jsx(SearchIcon, { color: globalToken?.bw8 }), styles: { affixWrapper: { minWidth: 280 } }, onChange: handleChangeInput }), _jsx(Select, { placeholder: "Select collection", value: state.collectionActive, style: { width: 200 }, options: collectionOptions, optionRender: renderOption, onChange: handleChangeSelect })] }), _jsx(EmojiList, { children: renderCommonCollection() })] }));
+    return (_jsxs(WrapperCollection, { children: [_jsxs(Flex, { gap: 20, justify: "space-between", align: "flex-end", children: [_jsx(Input, { placeholder: "Search...", suffix: _jsx(SearchIcon, { color: globalToken?.bw8 }), styles: { affixWrapper: { minWidth: 280 } }, onChange: handleChangeInput }), _jsx(Select, { placeholder: "Select collection", value: state.collectionActive, style: { width: 200 }, options: collectionOptions, optionRender: renderOption, onChange: handleChangeSelect, getPopupContainer: getPopupContainer })] }), _jsx(EmojiList, { children: renderCommonCollection() })] }));
 };
 CommonCollection.defaultProps = {
     onEmojiClick: () => { },

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

@@ -1,3 +1,4 @@
 export interface EmojiCollectionProps {
     onEmojiClick: (newEmoji: string) => void;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }

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

@@ -9,7 +9,9 @@ interface EmojiPopoverProps {
     collections?: CollectionItemProps[];
     isForceHide?: boolean;
     children?: React.ReactNode;
+    destroyTooltipOnHide?: boolean;
     onEmojiClick?: (emoji: string | TagDataCustomize) => void;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }
 declare const _default: React.NamedExoticComponent<EmojiPopoverProps>;
 export default _default;

package/es/components/molecules/EmojiPopover/EmojiPopover.js

@@ -11,7 +11,7 @@ import { EMOJI_COLLECTIONS, } from '@antscorp/antsomi-ui/es/components/molecules
 import { EmojiTabs, EmojiPopoverStyled } from './styled';
 // Utils
 import { handleGetTextToReplace } from './utils';
-const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiClick, }) => {
+const EmojiPopover = ({ disabled, collections, isForceHide, children, destroyTooltipOnHide, onEmojiClick, getPopupContainer, }) => {
     const [state, setState] = useImmer({
         isOpen: false,
         collectionActive: collections ? collections[0]?.key : EMOJI_COLLECTIONS.COMMON,
@@ -47,16 +47,16 @@ const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiCli
     const renderCollection = useCallback((collectionCurrent = '') => {
         switch (collectionCurrent) {
             case EMOJI_COLLECTIONS.VIBER: {
-                return _jsx(ViberCollection, { onEmojiClick: handleGetCodeEmoji });
+                return (_jsx(ViberCollection, { onEmojiClick: handleGetCodeEmoji, getPopupContainer: getPopupContainer }));
             }
             case EMOJI_COLLECTIONS.LINE: {
-                return _jsx(LineCollection, { onEmojiClick: handleGetCodeEmoji });
+                return (_jsx(LineCollection, { onEmojiClick: handleGetCodeEmoji, getPopupContainer: getPopupContainer }));
             }
             default: {
-                return _jsx(CommonCollection, { onEmojiClick: handleGetCodeEmoji });
+                return (_jsx(CommonCollection, { onEmojiClick: handleGetCodeEmoji, getPopupContainer: getPopupContainer }));
             }
         }
-    }, [handleGetCodeEmoji]);
+    }, [handleGetCodeEmoji, getPopupContainer]);
     const emojiCollections = useMemo(() => {
         if (!collections)
             return [];
@@ -66,7 +66,11 @@ const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiCli
             children: renderCollection(collection.key),
         }));
     }, [collections, renderCollection]);
-    return (_jsx(EmojiPopoverStyled, { content: _jsx(EmojiTabs, { activeKey: state.collectionActive, onTabClick: handleClickCollection, items: emojiCollections }), placement: "topLeft", trigger: "click", fresh: false, style: { padding: 15 }, arrow: false, rootClassName: "antsomi-emoji-popover", open: state.isOpen, onOpenChange: handleOpenChange, children: children || (_jsx(Button, { type: "link", icon: _jsx(EmojiSmileIcon, {}), disabled: disabled, onClick: () => handleOpenChange(true) })) }));
+    let content = (_jsx(EmojiTabs, { activeKey: state.collectionActive, onTabClick: handleClickCollection, items: emojiCollections }));
+    if (emojiCollections.length <= 1) {
+        content = emojiCollections.at(0)?.children;
+    }
+    return (_jsx(EmojiPopoverStyled, { content: content, placement: "topLeft", destroyTooltipOnHide: destroyTooltipOnHide, trigger: "click", fresh: false, style: { padding: 15 }, arrow: false, rootClassName: "antsomi-emoji-popover", open: state.isOpen, onOpenChange: handleOpenChange, getPopupContainer: getPopupContainer, children: children || (_jsx(Button, { type: "link", icon: _jsx(EmojiSmileIcon, {}), disabled: disabled, onClick: () => handleOpenChange(true) })) }));
 };
 EmojiPopover.defaultProps = {
     disabled: false,

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

@@ -1,8 +1,8 @@
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Tabs as TabsUI } from '@antscorp/antsomi-ui/es/components/molecules';
+import { Popover } from '../../atoms/Popover';
 export const EmojiTabs = styled(TabsUI) `
   .antsomi-tabs-tab {
     padding: 5.5px 20px !important;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface EyedropperButtonProps {
+    onColorPick?: (color: string) => void;
+    size?: 'small' | 'middle' | 'large';
+    type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
+    disabled?: boolean;
+    className?: string;
+    showIcon?: boolean;
+}
+export declare const EyedropperButton: React.FC<EyedropperButtonProps>;
+export {};