@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

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

@@ -0,0 +1,14 @@
+import { CharacterType, CodeStructureData, SeparatorType } from './type';
+export declare const generateRandomCodeWithConfig: ({ characterType, digitalNumbers, alphabetLetters, capitalization, characterOrder, }: {
+    characterType: CodeStructureData['characterType'];
+    digitalNumbers: CodeStructureData['digitalNumbers'];
+    alphabetLetters: CodeStructureData['alphabetLetters'];
+    capitalization: CodeStructureData['capitalization'];
+    characterOrder: CodeStructureData['characterOrder'];
+}) => string;
+export declare const generateCodeWithPrefixAndSuffix: (code: string, prefix: string, suffix: string, separator: SeparatorType) => string;
+export declare const calculateTotalCodes: ({ numberOfLetters, numberOfDigits, characterType, }: {
+    numberOfLetters: number;
+    numberOfDigits: number;
+    characterType: CharacterType;
+}) => number;

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

@@ -0,0 +1,66 @@
+import { CapitalizationType, CharacterOrderType, CharacterType, SeparatorType, } from './type';
+export const generateRandomCodeWithConfig = ({ characterType, digitalNumbers, alphabetLetters, capitalization, characterOrder, }) => {
+    const digits = '0123456789';
+    const letters = 'abcdefghijklmnopqrstuvwxyz';
+    let numPart = '';
+    let letterPart = '';
+    if (characterType === CharacterType.DIGITS || characterType === CharacterType.DIGIT_AND_LETTERS) {
+        numPart = Array.from({ length: digitalNumbers }, () => digits[Math.floor(Math.random() * digits.length)]).join('');
+    }
+    if (characterType === CharacterType.LETTERS ||
+        characterType === CharacterType.DIGIT_AND_LETTERS) {
+        letterPart = Array.from({ length: alphabetLetters }, () => letters[Math.floor(Math.random() * letters.length)]).join('');
+    }
+    // Apply capitalization
+    if (capitalization === CapitalizationType.UPPERCASE) {
+        letterPart = letterPart.toUpperCase();
+    }
+    else if (capitalization === CapitalizationType.LOWERCASE) {
+        letterPart = letterPart.toLowerCase();
+    }
+    else if (capitalization === CapitalizationType.RANDOM) {
+        letterPart = Array.from(letterPart)
+            .map(char => (Math.random() < 0.5 ? char.toUpperCase() : char.toLowerCase()))
+            .join('');
+    }
+    // Order characters
+    let finalCode = '';
+    if (characterOrder === CharacterOrderType.RANDOM) {
+        finalCode = (numPart + letterPart)
+            .split('')
+            .sort(() => Math.random() - 0.5)
+            .join('');
+    }
+    else if (characterOrder === CharacterOrderType.LETTER_FIRST) {
+        finalCode = letterPart + numPart;
+    }
+    else {
+        finalCode = numPart + letterPart;
+    }
+    return finalCode;
+};
+export const generateCodeWithPrefixAndSuffix = (code, prefix, suffix, separator) => {
+    let finalCode = code;
+    // Apply prefix and suffix
+    if (prefix)
+        finalCode = `${prefix}${separator !== SeparatorType.NONE ? (separator === SeparatorType.HYPHEN ? '-' : separator === SeparatorType.DOT ? '.' : '_') : ''}${finalCode}`;
+    if (suffix)
+        finalCode = `${finalCode}${separator !== SeparatorType.NONE ? (separator === SeparatorType.HYPHEN ? '-' : separator === SeparatorType.DOT ? '.' : '_') : ''}${suffix}`;
+    return finalCode;
+};
+export const calculateTotalCodes = ({ numberOfLetters, numberOfDigits, characterType, }) => {
+    let totalCodes = 0;
+    switch (characterType) {
+        case CharacterType.LETTERS:
+        case CharacterType.DIGITS:
+            totalCodes = 26 ** numberOfLetters * 10 ** numberOfDigits;
+            break;
+        case CharacterType.DIGIT_AND_LETTERS:
+            totalCodes = 26 * 26 ** (numberOfLetters - 1) * 10 ** numberOfDigits;
+            break;
+        default:
+            totalCodes = 0;
+            break;
+    }
+    return totalCodes;
+};

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

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

package/es/components/molecules/ColorPicker/CustomPicker/index.js

@@ -1,17 +1,7 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/destructuring-assignment */
 // Libraries
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { CustomPicker as CustomPickerHOC } from 'react-color';
 import { Saturation, Hue, Alpha, EditableInput } from 'react-color/lib/components/common';
 // Atoms
@@ -51,14 +41,13 @@ const styleContainAlpha = {
     width: '100%',
 };
 const CustomPicker = props => {
-    var _a, _b, _c, _d;
     // Props
-    const { className, style, children, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "onChange", "onChangeComplete", "presetColors"]);
+    const { className, style, children, onChange, onChangeComplete, presetColors, ...restOf } = props;
     // State
     const [isShowRgbaInput, setShowRgbaInput] = useState(true);
     const onChangeRgbaColor = (key, value) => {
         try {
-            const draftRgb = Object.assign(Object.assign({}, props.rgb), { [key]: value });
+            const draftRgb = { ...props.rgb, [key]: value };
             onChange(`rgba(${draftRgb.r}, ${draftRgb.g}, ${draftRgb.b}, ${draftRgb.a})`);
         }
         catch (error) {
@@ -69,49 +58,19 @@ const CustomPicker = props => {
             });
         }
     };
-    return (React.createElement(CustomPickerWrapper, { className: className, style: style },
-        React.createElement("div", { style: {
-                position: 'relative',
-                overflow: 'hidden',
-                width: '100%',
-                height: 143,
-            } },
-            React.createElement(Saturation, Object.assign({}, restOf, { pointer: SaturationPointer, onChange: onChange }))),
-        React.createElement("div", { style: wrapperStyling },
-            React.createElement(PreviewColorPoint, { "$color": props.color }),
-            React.createElement("div", { style: styleContainAlpha },
-                React.createElement("div", { style: { position: 'relative', width: '100%', height: 12 } },
-                    React.createElement(Hue, Object.assign({}, restOf, { pointer: HuePointer, onChange: onChange }))),
-                React.createElement("div", { style: {
-                        position: 'relative',
-                        width: '100%',
-                        height: 12,
-                        marginTop: 10,
-                    } },
-                    React.createElement(Alpha, Object.assign({}, restOf, { pointer: HuePointer, onChange: onChange }))))),
-        React.createElement("div", { style: Object.assign(Object.assign({}, wrapperStyling), { paddingBottom: 15 }) },
-            React.createElement(Icon, { type: "icon-ants-unfold-more", style: { cursor: 'pointer', fontSize: '20px' }, onClick: () => setShowRgbaInput(!isShowRgbaInput) }),
-            isShowRgbaInput ? (React.createElement("div", { style: rgbaInputStyling },
-                React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumberWrapper, { value: (_a = props.rgb) === null || _a === void 0 ? void 0 : _a.r, controls: false, onChange: value => onChangeRgbaColor('r', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "R")),
-                React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumberWrapper, { value: (_b = props.rgb) === null || _b === void 0 ? void 0 : _b.g, controls: false, onChange: value => onChangeRgbaColor('g', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "G")),
-                React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumberWrapper, { value: (_c = props.rgb) === null || _c === void 0 ? void 0 : _c.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "B")),
-                React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumberWrapper, { value: (_d = props.rgb) === null || _d === void 0 ? void 0 : _d.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A")))) : (React.createElement(EditableInputWrapper, null,
-                React.createElement(EditableInput, { value: props.color, onChange: onChange }),
-                React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "HEX"))),
-            React.createElement(Button, { onClick: () => {
-                    setShowRgbaInput(true);
-                    onChange('rgba(0, 0, 0, 0)');
-                } }, "Clear")),
-        presetColors ? (React.createElement("div", null,
-            React.createElement(Divider, null),
-            presetColors)) : null));
+    return (_jsxs(CustomPickerWrapper, { className: className, style: style, children: [_jsx("div", { style: {
+                    position: 'relative',
+                    overflow: 'hidden',
+                    width: '100%',
+                    height: 143,
+                }, children: _jsx(Saturation, { ...restOf, pointer: SaturationPointer, onChange: onChange }) }), _jsxs("div", { style: wrapperStyling, children: [_jsx(PreviewColorPoint, { "$color": props.color }), _jsxs("div", { style: styleContainAlpha, children: [_jsx("div", { style: { position: 'relative', width: '100%', height: 12 }, children: _jsx(Hue, { ...restOf, pointer: HuePointer, onChange: onChange }) }), _jsx("div", { style: {
+                                    position: 'relative',
+                                    width: '100%',
+                                    height: 12,
+                                    marginTop: 10,
+                                }, children: _jsx(Alpha, { ...restOf, pointer: HuePointer, onChange: onChange }) })] })] }), _jsxs("div", { style: { ...wrapperStyling, paddingBottom: 15 }, children: [_jsx(Icon, { type: "icon-ants-unfold-more", style: { cursor: 'pointer', fontSize: '20px' }, onClick: () => setShowRgbaInput(!isShowRgbaInput) }), isShowRgbaInput ? (_jsxs("div", { style: rgbaInputStyling, children: [_jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.r, controls: false, onChange: value => onChangeRgbaColor('r', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "R" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.g, controls: false, onChange: value => onChangeRgbaColor('g', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "G" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "B" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "A" })] })] })) : (_jsxs(EditableInputWrapper, { children: [_jsx(EditableInput, { value: props.color, onChange: onChange }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "HEX" })] })), _jsx(Button, { onClick: () => {
+                            setShowRgbaInput(true);
+                            onChange('rgba(0, 0, 0, 0)');
+                        }, children: "Clear" })] }), presetColors ? (_jsxs("div", { children: [_jsx(Divider, {}), presetColors] })) : null] }));
 };
 export default CustomPickerHOC(CustomPicker);

package/es/components/molecules/ColorPicker/CustomPicker/styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const CustomPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SaturationPointer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HuePointer: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -6,4 +5,4 @@ export declare const PreviewColorPoint: import("styled-components").StyledCompon
     $color?: string | undefined;
 }, never>;
 export declare const EditableInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputNumberWrapper: import("styled-components").StyledComponent<import("react").FC<import("../../InputNumber").InputNumberProps>, any, {}, never>;
+export declare const InputNumberWrapper: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/es/components/molecules/ColorPicker/CustomPicker/styled.js

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f;
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
 import styled from 'styled-components';
 // Components
@@ -53,18 +53,18 @@ export const EditableInputWrapper = styled.div `
     padding-left: 5px;
     padding-right: 5px;
     font-family: Roboto;
-    font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+    font-size: ${THEME.token?.fontSize}px;
     --tw-shadow: 0 1px 0 0 #e0e0e0;
     --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
       var(--tw-shadow);
 
     &::placeholder {
-      color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent5};
+      color: ${THEME.token?.accent5};
     }
 
     &:hover {
-      background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue0};
+      background-color: ${THEME.token?.blue0};
     }
 
     transition-property: all;
@@ -74,7 +74,7 @@ export const EditableInputWrapper = styled.div `
 
     &:active,
     &:focus {
-      background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue0};
+      background-color: ${THEME.token?.blue0};
       --tw-shadow: 0 1px 0 0 #194e8d;
       --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
       box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -82,8 +82,8 @@ export const EditableInputWrapper = styled.div `
     }
 
     &:disabled {
-      background-color: ${(_e = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _e === void 0 ? void 0 : _e.accent1};
-      color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.accent5};
+      background-color: ${THEME?.token?.accent1};
+      color: ${THEME.token?.accent5};
       --tw-shadow: 0 1px 0 0 #e0e0e0;
       --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
       box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -91,7 +91,7 @@ export const EditableInputWrapper = styled.div `
     }
   }
 `;
-export const InputNumberWrapper = styled(InputNumber) `
+export const InputNumberWrapper = styled(props => _jsx(InputNumber, { ...props })) `
   & > div {
     width: unset !important;
     padding: 0;

package/es/components/molecules/ColorPicker/SketchPicker/index.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 // Styled
 import { SketchPickerWrapper } from './styled';
-export const SketchPicker = props => (React.createElement(SketchPickerWrapper, Object.assign({}, props)));
+export const SketchPicker = props => (_jsx(SketchPickerWrapper, { ...props }));

package/es/components/molecules/ColorPicker/index.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/button-has-type */
 /* eslint-disable react/destructuring-assignment */
 // Libraries
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 // Components
 import { Icon, Input, Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styled
@@ -36,7 +37,7 @@ export const ColorPicker = props => {
     useEffect(() => {
         if (icon) {
             if (typeof icon === 'string') {
-                setIconNode(React.createElement(Icon, { type: icon }));
+                setIconNode(_jsx(Icon, { type: icon }));
             }
             else {
                 setIconNode(icon);
@@ -45,9 +46,8 @@ export const ColorPicker = props => {
     }, [icon]);
     // Handlers
     const onChangeColorPicker = color => {
-        var _a;
         if (['hsv', 'hsl'].includes(color.source)) {
-            if (!((_a = color === null || color === void 0 ? void 0 : color.rgb) === null || _a === void 0 ? void 0 : _a.a)) {
+            if (!color?.rgb?.a) {
                 setColor(color.hex);
                 return;
             }
@@ -55,9 +55,8 @@ export const ColorPicker = props => {
         setColor(hexWithAlpha(color));
     };
     const onChangeComplete = color => {
-        var _a;
         if (['hsv', 'hsl'].includes(color.source)) {
-            if (!((_a = color === null || color === void 0 ? void 0 : color.rgb) === null || _a === void 0 ? void 0 : _a.a)) {
+            if (!color?.rgb?.a) {
                 onChange(color.hex);
                 return;
             }
@@ -72,17 +71,13 @@ export const ColorPicker = props => {
     const onPopoverVisibleChange = visible => {
         setPopoverVisible(visible);
     };
-    return (React.createElement(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style },
-        showInput && positionInput === 'left' && (React.createElement(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput })),
-        React.createElement(Popover, { arrow: true, content: React.createElement(CustomPicker, { color: color, presetColors: presetColors, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange },
-            React.createElement("div", { className: "antsomi-popover-button", style: styleBtnColor }, iconNode || (React.createElement("span", { style: {
-                    backgroundColor: color,
-                    display: 'block',
-                    width: 20,
-                    height: 20,
-                    border: '2px solid rgb(224 224 224 / 1)',
-                } })))),
-        showInput && positionInput === 'right' && (React.createElement(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput }))));
+    return (_jsxs(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style, children: [showInput && positionInput === 'left' && (_jsx(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput })), _jsx(Popover, { arrow: true, content: _jsx(CustomPicker, { color: color, presetColors: presetColors, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange, children: _jsx("div", { className: "antsomi-popover-button", style: styleBtnColor, children: iconNode || (_jsx("span", { style: {
+                            backgroundColor: color,
+                            display: 'block',
+                            width: 20,
+                            height: 20,
+                            border: '2px solid rgb(224 224 224 / 1)',
+                        } })) }) }), showInput && positionInput === 'right' && (_jsx(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput }))] }));
 };
 ColorPicker.defaultProps = {
     className: '',

package/es/components/molecules/ColorSetting/index.js

@@ -1,16 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Molecules
 import { SettingWrapper } from '../SettingWrapper';
 import { ColorPicker, } from '@antscorp/antsomi-ui/es/components/molecules/ColorPicker';
@@ -27,7 +15,7 @@ const stylingCenter = {
     width: '100%',
 };
 export const ColorSetting = props => {
-    const { label, color, labelClassName, labelStyling, isHideBtnEdit, customColors, className, vertical, callback, onChange } = props, restOf = __rest(props, ["label", "color", "labelClassName", "labelStyling", "isHideBtnEdit", "customColors", "className", "vertical", "callback", "onChange"]);
+    const { label, color, labelClassName, labelStyling, isHideBtnEdit, customColors, className, vertical, callback, onChange, ...restOf } = props;
     const onClickPresetColor = (color) => {
         try {
             // eslint-disable-next-line @typescript-eslint/no-unused-expressions
@@ -43,7 +31,7 @@ export const ColorSetting = props => {
     };
     const onClickAddNewPresetColor = () => {
         try {
-            if (color && typeof customColors !== 'undefined' && !(customColors === null || customColors === void 0 ? void 0 : customColors.includes(color))) {
+            if (color && typeof customColors !== 'undefined' && !customColors?.includes(color)) {
                 const draftCustomColors = [...customColors];
                 draftCustomColors.push(color);
                 if (typeof callback === 'function') {
@@ -73,19 +61,10 @@ export const ColorSetting = props => {
             });
         }
     };
-    const presetColors = customColors ? (React.createElement("div", null,
-        React.createElement("div", { style: stylingCenter },
-            React.createElement(Text, null, "Color Profile"),
-            !isHideBtnEdit && (React.createElement(Button, { type: "primary", onClick: onClickEdit }, "Edit"))),
-        React.createElement(PresetWrapper, null,
-            React.createElement(ButtonPreset, { shape: "circle", onClick: onClickAddNewPresetColor },
-                React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } })),
-            customColors && customColors.length
-                ? customColors.map((customColor, idx) => (React.createElement(PresetColor, { key: idx, color: customColor, onClick: () => onClickPresetColor(customColor) },
-                    React.createElement("div", { className: "__color", style: { backgroundColor: customColor } }))))
-                : null))) : null;
-    return (React.createElement(SettingWrapper, { label: label, className: className, labelClassName: labelClassName, labelStyle: labelStyling, vertical: vertical },
-        React.createElement(ColorPicker, Object.assign({}, restOf, { color: color, presetColors: presetColors, onChange: onChange }))));
+    const presetColors = customColors ? (_jsxs("div", { children: [_jsxs("div", { style: stylingCenter, children: [_jsx(Text, { children: "Color Profile" }), !isHideBtnEdit && (_jsx(Button, { type: "primary", onClick: onClickEdit, children: "Edit" }))] }), _jsxs(PresetWrapper, { children: [_jsx(ButtonPreset, { shape: "circle", onClick: onClickAddNewPresetColor, children: _jsx(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } }) }), customColors && customColors.length
+                        ? customColors.map((customColor, idx) => (_jsx(PresetColor, { color: customColor, onClick: () => onClickPresetColor(customColor), children: _jsx("div", { className: "__color", style: { backgroundColor: customColor } }) }, idx)))
+                        : null] })] })) : null;
+    return (_jsx(SettingWrapper, { label: label, className: className, labelClassName: labelClassName, labelStyle: labelStyling, vertical: vertical, children: _jsx(ColorPicker, { ...restOf, color: color, presetColors: presetColors, onChange: onChange }) }));
 };
 ColorSetting.defaultProps = {
     label: '',

package/es/components/molecules/ColorSetting/styled.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 export declare const ColorSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PresetColor: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonPreset: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {}, never>;
+export declare const ButtonPreset: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
 export declare const PresetWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 // Image
 import TransparentSvg from '@antscorp/antsomi-ui/es/assets/svg/transparent.svg';
 // Components
-import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
 export const ColorSettingWrapper = styled.div ``;
 export const PresetColor = styled.div `
   position: relative;

package/es/components/molecules/DatePicker/DatePicker.js

@@ -1,14 +1,13 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DatePicker as AntdDatePicker } from 'antd';
 // Components
 import { AdvancedPicker } from './components/AdvancedPicker';
 import { AdvancedRangePicker } from './components/AdvancedRangePicker';
-import { EventIcon } from '../../icons';
+import { EventIcon } from '@antscorp/antsomi-ui/es/components/icons';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const DatePicker = AntdDatePicker;
 DatePicker.defaultProps = {
-    suffixIcon: React.createElement(EventIcon, { width: 20, height: 20, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }),
+    suffixIcon: _jsx(EventIcon, { width: 20, height: 20, color: globalToken?.bw8 }),
 };
 DatePicker.AdvancedPicker = AdvancedPicker;
 DatePicker.AdvancedRangePicker = AdvancedRangePicker;

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.d.ts

@@ -19,12 +19,18 @@ export interface AdvancedPickerProps {
      */
     date?: string;
     format?: string;
+    /**
+     * @deprecated this props has no effect, now input display auto calculate base on prop `valueType`
+     */
     formatInputDisplay?: string;
     inputStyle?: React.CSSProperties;
     popupStyle?: React.CSSProperties;
     disableAfterDate?: string;
     disableBeforeDate?: string;
     errorMessage?: string;
+    /**
+     * @deprecated showTime (DropdownLabel component) now base on valueType
+     */
     showTime?: boolean;
     timezone?: string;
     isViewMode?: boolean;