@antscorp/antsomi-ui 1.3.4 → 1.3.5-beta.2

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

@@ -0,0 +1,2 @@
+export * from './AddDynamicContent';
+export * from './types';

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

@@ -0,0 +1,2 @@
+export * from './AddDynamicContent';
+export * from './types';

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const InputSuggestion: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").AutoCompleteProps<ValueType, OptionType> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+    Option: import("rc-select/lib/Option").OptionFC;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
+}, any, {}, never>;
+export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Modal/styled").CustomModalProps, any>;
+export declare const ButtonCustom: 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>;

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

@@ -0,0 +1,30 @@
+// Libraries
+import { AutoComplete, Button } from 'antd';
+import styled from 'styled-components';
+import { Modal } from '../Modal';
+export const InputSuggestion = styled(AutoComplete) `
+  .antsomi-select-selector {
+    border-right: none !important;
+    border-left: none !important;
+    border-top: none !important;
+    border-bottom: 1px solid #d9d9d9 !important;
+  }
+`;
+export const ModalCustom = styled(Modal) `
+  .antsomi-modal-body {
+    overflow: auto;
+    max-height: 500px;
+  }
+`;
+export const ButtonCustom = styled(Button) `
+  width: 64px;
+  background-color: rgb(191 219 254);
+
+  &:hover {
+    background-color: rgb(147 197 253);
+  }
+
+  &:focus {
+    background-color: rgb(147 197 253);
+  }
+`;

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

@@ -0,0 +1,13 @@
+import { DYNAMIC_CONTENT_TYPE_KEY } from './constants';
+export type TDataType = 'string' | 'number' | 'datetime' | 'array' | 'boolean' | 'object' | 'text' | 'array_string' | 'array_number' | 'array_datetime' | 'array_text' | 'suggestion' | 'date' | 'object_id' | 'unique' | null;
+export type APIConfig = {
+    domain: string;
+    slug: string;
+    token: string;
+    userId: string;
+    accountId: string;
+};
+export type APIParams = {
+    url: string;
+} & Record<string, any>;
+export type DynamicContentType = (typeof DYNAMIC_CONTENT_TYPE_KEY)[keyof typeof DYNAMIC_CONTENT_TYPE_KEY];

package/es/components/molecules/AddDynamicContent/types.js

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

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

@@ -0,0 +1,41 @@
+import dayjs from 'dayjs';
+import type { TDatetimeFormatSetting, TNumberFormatSettings } from './components';
+import { LabeledTreeValue, LabeledValue } from './AddDynamicContent';
+export declare function getStringFormatDateDF(formatSettings: TDatetimeFormatSetting): string;
+export declare function formatDatetimeDF(date: string | number | dayjs.Dayjs | Date, formatSettings: TDatetimeFormatSetting): string;
+export declare function formatNumberDF(number: number, fType: 'number' | 'percentage' | 'currency', fOptions?: Omit<TNumberFormatSettings, 'type'>): string;
+export declare function getAvailableAttrs(listAttribute: any[]): any[];
+export declare const regexCSType: RegExp;
+export declare const serilizeBOAttr: (data: any, additionalAttrProperties?: string[]) => LabeledValue[];
+export declare const serializeCSSelectedString: (value?: string) => {
+    contentSourceKey: string;
+    groupId: string;
+    itemTypeId: number;
+};
+export declare const serilizeDynamicContentAttr: (attrs: any[] | undefined, language: any, additionalAttrProperties?: string[]) => {
+    label: any;
+    value: any;
+    dataType: any;
+    disabled: boolean;
+    status: any;
+}[];
+export declare const serilizeEventAttr: (attrs: any[] | undefined, language: any, additionalAttrProperties?: string[]) => LabeledTreeValue[];
+export declare const serilizePromotionPool: (data: any, additionalAttrProperties?: string[]) => LabeledValue[];
+export declare const CUSTOM_TYPE: {
+    index: number;
+    label: string;
+    value: string;
+};
+export declare const buildOptionAttrArchive: (list: any[], selected: any) => any[];
+export declare const checkStatusAttr: ({ listBO, itemTypeId, listAttribute, field, }: {
+    listBO?: any[] | undefined;
+    itemTypeId?: number | undefined;
+    listAttribute?: any[] | undefined;
+    field?: string | undefined;
+}) => {
+    errorMessage: string;
+    isDisable: boolean;
+};
+export declare function serializeLabelToCode(name: string): string;
+export declare const buildMappingFields: (dynamicItem: any, isFormatNumber?: boolean, key?: string) => string;
+export declare const transformDateFormat: (dateParseFormat: any, dateParseOption: any) => string;

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

@@ -0,0 +1,396 @@
+/* eslint-disable prefer-regex-literals */
+// Libraries
+import dayjs from 'dayjs';
+import currencyFormatter from 'currency-formatter';
+import { has, get, set } from 'lodash';
+// Json
+import Currencies from './currencies.json';
+// Constants
+import { ATTRIBUTE_STATUS, BO_STATUS, DYNAMIC_CONTENT_TYPE } from './constants';
+// Models
+import { ListAttribute } from '@antscorp/antsomi-ui/es/models/BusinessObject';
+export function getStringFormatDateDF(formatSettings) {
+    const { hasDateFormat, hasTimeFormat, timeParseFormat, dateParseFormat, timeParseOption, dateParseOption, } = formatSettings;
+    let dateFormat = '';
+    let timeFormat = '';
+    if (hasDateFormat) {
+        switch (dateParseFormat) {
+            case 'MM/DD/YYYY':
+                if (dateParseOption === 'short')
+                    dateFormat = 'MM/DD/YYYY';
+                if (dateParseOption === 'medium')
+                    dateFormat = 'MMM DD, YYYY';
+                if (dateParseOption === 'long')
+                    dateFormat = 'MMMM DD, YYYY';
+                break;
+            case 'DD/MM/YYYY':
+                if (dateParseOption === 'short')
+                    dateFormat = 'DD/MM/YYYY';
+                if (dateParseOption === 'medium')
+                    dateFormat = 'DD MMM, YYYY';
+                if (dateParseOption === 'long')
+                    dateFormat = 'DD MMMM, YYYY';
+                break;
+            case 'YYYY/MM/DD':
+                if (dateParseOption === 'short')
+                    dateFormat = 'YYYY/MM/DD';
+                if (dateParseOption === 'medium')
+                    dateFormat = 'YYYY, MMM DD';
+                if (dateParseOption === 'long')
+                    dateFormat = 'YYYY, MMMM DD';
+                break;
+            default:
+                break;
+        }
+    }
+    if (hasTimeFormat) {
+        if (timeParseFormat === '12hour') {
+            if (timeParseOption === 'short')
+                timeFormat = 'h:mm A';
+            if (timeParseOption === 'medium')
+                timeFormat = 'h:mm:ss A';
+            if (timeParseOption === 'long')
+                timeFormat = 'h:mm:ss A [GMT]';
+        }
+        else {
+            if (timeParseOption === 'short')
+                timeFormat = 'H:mm';
+            if (timeParseOption === 'medium')
+                timeFormat = 'H:mm:ss';
+            if (timeParseOption === 'long')
+                timeFormat = 'H:mm:ss [GMT]';
+        }
+    }
+    return `${dateFormat} ${timeFormat}`;
+}
+export function formatDatetimeDF(date, formatSettings) {
+    var _a, _b;
+    let formatedDate = '';
+    const timezone = Math.round(dayjs(date).utcOffset() / 60);
+    const prefix = timezone > 0 ? '+' : '';
+    if (dayjs(date).isValid()) {
+        formatedDate = dayjs(date)
+            .locale(formatSettings.language || 'en')
+            .format(getStringFormatDateDF(formatSettings));
+        return (_a = formatedDate.replace(/\W*(GMT)\W*/, ` GMT ${prefix}${timezone}`)) === null || _a === void 0 ? void 0 : _a.trim();
+    }
+    return (_b = date.toString()) === null || _b === void 0 ? void 0 : _b.trim();
+}
+export function formatNumberDF(number, fType, fOptions = {
+    grouping: ',',
+    decimal: '.',
+    decimalPlaces: 0,
+    isCompact: false,
+    currencyCode: 'USD',
+    prefixType: 'code',
+}) {
+    const { grouping, decimal, decimalPlaces, isCompact, currencyCode, prefixType } = fOptions;
+    const result = {
+        textNumberFormated: String(number),
+        hasSymbol: false,
+        symbol: '',
+        symbolOnLeft: false,
+    };
+    if (isCompact) {
+        // 1234.56 => 1.23K
+        const lookup = [
+            { value: 1, symbol: '' },
+            { value: 1e3, symbol: 'K' },
+            { value: 1e6, symbol: 'M' },
+            { value: 1e9, symbol: 'G' },
+            { value: 1e12, symbol: 'T' },
+            { value: 1e15, symbol: 'P' },
+            { value: 1e18, symbol: 'E' },
+        ];
+        const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+        const item = lookup
+            .slice()
+            .reverse()
+            .find(item => {
+            if (number >= 0) {
+                return number >= item.value;
+            }
+            return number <= item.value * -1;
+        });
+        let formatedCompactNumber;
+        if (item) {
+            const compactNumber = (number / item.value).toFixed(decimalPlaces).replace(rx, '$1');
+            formatedCompactNumber =
+                currencyFormatter.format(Number(compactNumber), {
+                    decimal,
+                    precision: decimalPlaces,
+                }) + item.symbol;
+        }
+        else {
+            formatedCompactNumber = '0';
+        }
+        // 1.23K => 1.23K | 1.23% | 1.23K USD | $1.23K
+        result.textNumberFormated = formatedCompactNumber;
+    }
+    else {
+        result.textNumberFormated = currencyFormatter.format(number, {
+            thousand: grouping === 'none' ? '' : grouping,
+            decimal,
+            precision: decimalPlaces,
+        });
+    }
+    switch (fType) {
+        case 'percentage':
+            result.hasSymbol = true;
+            result.symbol = '%';
+            break;
+        case 'currency': {
+            result.hasSymbol = true;
+            switch (prefixType) {
+                case 'symbol': {
+                    const currency = Currencies[currencyCode];
+                    if (currency) {
+                        result.symbol = currency.symbol;
+                        result.symbolOnLeft = currency.symbolOnLeft;
+                    }
+                    break;
+                }
+                case 'code': {
+                    result.symbol = ` ${currencyCode}`;
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    let html = result.textNumberFormated;
+    if (result.hasSymbol) {
+        if (result.symbolOnLeft) {
+            html = `${result.symbol}${html}`;
+        }
+        else {
+            html = `${html}${result.symbol}`;
+        }
+    }
+    return html;
+}
+export function getAvailableAttrs(listAttribute) {
+    return (listAttribute === null || listAttribute === void 0 ? void 0 : listAttribute.filter(({ status }) => !ATTRIBUTE_STATUS[+status])) || [];
+}
+export const regexCSType = new RegExp(/^content-source::.*/);
+export const serilizeBOAttr = (data, additionalAttrProperties) => {
+    var _a;
+    const { rows = [] } = data || {};
+    return (((_a = rows[0]) === null || _a === void 0 ? void 0 : _a.properties.map((item) => {
+        const temp = {
+            value: item.itemPropertyName,
+            label: item.translateLabel,
+            status: item.status,
+            disabled: parseInt(item.status) === 4,
+            dataType: item.dataType,
+        };
+        additionalAttrProperties === null || additionalAttrProperties === void 0 ? void 0 : additionalAttrProperties.forEach(propName => {
+            if (has(item, propName)) {
+                temp[propName] = item[propName];
+            }
+        });
+        return temp;
+    })) || []);
+};
+export const serializeCSSelectedString = (value = '') => {
+    const [contentSourceKey = '', groupId = '', itemTypeId] = value.split('::');
+    return {
+        contentSourceKey,
+        groupId,
+        itemTypeId: Number(itemTypeId),
+    };
+};
+export const serilizeDynamicContentAttr = (attrs = [], language, additionalAttrProperties) => attrs.map(attr => {
+    const temp = {
+        label: attr.label[language && language.toUpperCase()] ||
+            attr.label[get(attr, 'label.DEFAULT_LANG')] ||
+            attr.defaultLabel,
+        value: attr.value,
+        dataType: attr.dataType,
+        disabled: parseInt(attr.status) === 4,
+        status: attr.status,
+    };
+    additionalAttrProperties === null || additionalAttrProperties === void 0 ? void 0 : additionalAttrProperties.forEach(propName => {
+        if (has(attr, propName))
+            temp[propName] = attr[propName];
+    });
+    return temp;
+});
+export const serilizeEventAttr = (attrs = [], language, additionalAttrProperties) => attrs.map(row => {
+    var _a;
+    const event = new ListAttribute(row);
+    const temp = {
+        value: `${event.id}`,
+        itemTypeId: event.itemTypeId,
+        propertyName: event.eventPropertyName,
+        label: event.eventPropertyDisplay,
+        status: 1,
+        dataType: event.dataType,
+        type: event.propertyType,
+        children: [],
+    };
+    const tempChildren = (_a = event.items) === null || _a === void 0 ? void 0 : _a.map((child) => {
+        const tempChildrenItem = {
+            value: `${event.id}.${child.itemPropertyName}`,
+            itemTypeId: child.itemTypeId,
+            itemTypeName: event.itemTypeName,
+            propertyName: child.itemPropertyName,
+            eventPropertySyntax: child.eventPropertySyntax,
+            label: child.propertyDisplayMultilang[language] ||
+                child.propertyDisplayMultilang[get(child, "propertyDisplayMultilang['DEFAULT_LANG']")] ||
+                child.itemPropertyDisplay,
+            children: [],
+            status: +child.status,
+            type: +child.type,
+            dataType: child.dataType,
+        };
+        additionalAttrProperties === null || additionalAttrProperties === void 0 ? void 0 : additionalAttrProperties.forEach(propName => {
+            if (has(child, propName))
+                set(tempChildrenItem, propName, child[propName]);
+        });
+        return tempChildrenItem;
+    });
+    additionalAttrProperties === null || additionalAttrProperties === void 0 ? void 0 : additionalAttrProperties.forEach(propName => {
+        if (has(event, propName))
+            set(temp, propName, event[propName]);
+    });
+    set(temp, 'children', tempChildren);
+    return temp;
+});
+export const serilizePromotionPool = (data, additionalAttrProperties) => data.rows.map((pool) => {
+    const temp = {
+        label: pool.name,
+        value: pool.code,
+    };
+    additionalAttrProperties === null || additionalAttrProperties === void 0 ? void 0 : additionalAttrProperties.forEach(propName => {
+        if (has(pool, propName))
+            temp[propName] = pool[propName];
+    });
+    return temp;
+});
+export const CUSTOM_TYPE = {
+    index: 0,
+    label: 'Custom Function',
+    value: 'custom',
+};
+export const buildOptionAttrArchive = (list, selected) => {
+    const arrSelected = Array.isArray(selected) ? selected : [selected];
+    const result = (list === null || list === void 0 ? void 0 : list.filter(each => parseInt(each.status) !== 4 || arrSelected.includes(each.value))) || [];
+    return result;
+};
+export const checkStatusAttr = ({ listBO, itemTypeId, listAttribute, field, }) => {
+    let errorMessage = '';
+    let isDisable = false;
+    const isEmptyField = !field || (Array.isArray(field) && !field.length);
+    // If field is empty, listAttribute is empty array then return empty errorMessage
+    if (isEmptyField || !(listAttribute === null || listAttribute === void 0 ? void 0 : listAttribute.length)) {
+        return {
+            errorMessage: '',
+            isDisable: false,
+        };
+    }
+    const selectedAttrs = listAttribute === null || listAttribute === void 0 ? void 0 : listAttribute.filter(bo => Array.isArray(field) ? field.includes(bo.value) : bo.value === field);
+    if (!(selectedAttrs === null || selectedAttrs === void 0 ? void 0 : selectedAttrs.length)) {
+        errorMessage = ATTRIBUTE_STATUS.DELETE.errorMessage;
+    }
+    else {
+        if (selectedAttrs.some(selectedAttr => ATTRIBUTE_STATUS[selectedAttr.status])) {
+            errorMessage = ATTRIBUTE_STATUS[4].errorMessage;
+        }
+    }
+    if (Array.isArray(listBO) && !!itemTypeId) {
+        const selectedBO = listBO === null || listBO === void 0 ? void 0 : listBO.find(bo => bo.value === itemTypeId);
+        if (!selectedBO) {
+            errorMessage = BO_STATUS.DELETE.errorMessage;
+            isDisable = true;
+        }
+        else {
+            if (BO_STATUS[selectedBO.status]) {
+                errorMessage = BO_STATUS[selectedBO.status].errorMessage;
+                isDisable = true;
+            }
+        }
+    }
+    return { errorMessage, isDisable };
+};
+export function serializeLabelToCode(name) {
+    // console.log('name', name);
+    return name
+        .toLocaleLowerCase()
+        .replace(/ /g, '_')
+        .replace(/[^\w]/g, '')
+        .replace(/^(\d|aud|sgmt|_)+/g, '');
+}
+export const buildMappingFields = (dynamicItem, isFormatNumber = false, key = '') => {
+    if (!dynamicItem || !dynamicItem.type) {
+        return '';
+    }
+    const { type, attribute, index, pool } = dynamicItem;
+    if (attribute === null || attribute === void 0 ? void 0 : attribute.value) {
+        const keySurfix = isFormatNumber ? `.format("${key}")` : '';
+        switch (true) {
+            case type === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value:
+                if (index != null) {
+                    return `event.${attribute.itemTypeName}[${index}].${attribute.propertyName}${keySurfix}`;
+                }
+                return `event.${attribute.value}${keySurfix}`;
+            case type === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value:
+                return `visitor.${attribute.value}${keySurfix}`;
+            case type === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value:
+                return `customer.${attribute.value}${keySurfix}`;
+            case type === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value:
+                return pool ? `promotion_code.${pool}.${attribute.value}${keySurfix}` : '';
+            case regexCSType.test(type): {
+                const { groupId } = serializeCSSelectedString(type);
+                return index || index === 0
+                    ? `groups.${groupId}[${index}].${attribute.value}${keySurfix}`
+                    : '';
+            }
+            case type === DYNAMIC_CONTENT_TYPE.BO_SETTINGS.value:
+                return index || index === 0 ? `items[${index}].${attribute.value}${keySurfix}` : '';
+            case type === 'custom':
+                return `#{custom.${attribute.value}}`;
+            default:
+                return '';
+        }
+    }
+    return '';
+};
+export const transformDateFormat = (dateParseFormat, dateParseOption) => {
+    let dateFormat = '';
+    switch (dateParseFormat) {
+        case 'MM/DD/YYYY':
+            if (dateParseOption === 'short')
+                dateFormat = 'MM/DD/YYYY';
+            if (dateParseOption === 'medium')
+                dateFormat = 'MMM DD, YYYY';
+            if (dateParseOption === 'long')
+                dateFormat = 'MMMM DD, YYYY';
+            break;
+        case 'DD/MM/YYYY':
+            if (dateParseOption === 'short')
+                dateFormat = 'DD/MM/YYYY';
+            if (dateParseOption === 'medium')
+                dateFormat = 'DD MMM, YYYY';
+            if (dateParseOption === 'long')
+                dateFormat = 'DD MMMM, YYYY';
+            break;
+        case 'YYYY/MM/DD':
+            if (dateParseOption === 'short')
+                dateFormat = 'YYYY/MM/DD';
+            if (dateParseOption === 'medium')
+                dateFormat = 'YYYY, MMM DD';
+            if (dateParseOption === 'long')
+                dateFormat = 'YYYY, MMMM DD';
+            break;
+        default:
+            break;
+    }
+    return dateFormat;
+};

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

@@ -1,6 +1,7 @@
+import React from 'react';
 import { IImageEditorProps } from './types';
 declare const CaptureScreen: {
-    (props: IImageEditorProps): JSX.Element;
+    (props: IImageEditorProps): React.JSX.Element;
     defaultProps: {
         isOpen: boolean;
         src: string;

package/es/components/molecules/CaptureScreen/components/CommentBox/CommentBox.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { CommentBoxProps } from './types';
 declare const CommentBox: {
-    (props: CommentBoxProps): JSX.Element;
+    (props: CommentBoxProps): React.JSX.Element;
     defaultProps: {
         info: {
             id: string;

package/es/components/molecules/CaptureScreen/components/Cursor/Cursor.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { CursorProps } from './types';
-declare const Cursor: (props: CursorProps) => JSX.Element | null;
+declare const Cursor: (props: CursorProps) => React.JSX.Element | null;
 export { Cursor };

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const Collapse: import("react").ForwardRefExoticComponent<import("antd").CollapseProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Panel: import("react").ForwardRefExoticComponent<import("antd").CollapsePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+import React from 'react';
+export declare const Collapse: React.ForwardRefExoticComponent<import("antd").CollapseProps & React.RefAttributes<HTMLDivElement>> & {
+    Panel: React.ForwardRefExoticComponent<import("antd").CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
 };

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

@@ -1,2 +1,11 @@
+// Libraries
+import React from 'react';
 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' } }));
+    },
+};

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

@@ -16,10 +16,8 @@ import { CustomPicker as CustomPickerHOC } from 'react-color';
 import { Saturation, Hue, Alpha, EditableInput } from 'react-color/lib/components/common';
 // Atoms
 import { Button, Divider, Icon, Text } from '@antscorp/antsomi-ui/es/components/atoms';
-// Molecules
-import { InputNumber } from '../../InputNumber';
 // Styled
-import { CustomPickerWrapper, HuePointer, PreviewColorPoint, SaturationPointer, EditableInputWrapper, } from './styled';
+import { CustomPickerWrapper, HuePointer, PreviewColorPoint, SaturationPointer, EditableInputWrapper, InputNumberWrapper, } from './styled';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/ColorPicker/CustomPicker/index.tsx';
@@ -41,14 +39,15 @@ const rgbaInputStyling = {
 const wrapperStyling = {
     display: 'flex',
     alignItems: 'center',
-    margin: '15px 8px 0',
+    // margin: '15px 8px 0',
+    marginTop: '15px',
     width: '100%',
 };
 const styleContainAlpha = {
     display: 'flex',
     flexDirection: 'column',
     marginLeft: 10,
-    marginRight: 10,
+    // marginRight: 10,
     width: '100%',
 };
 const CustomPicker = props => {
@@ -79,15 +78,7 @@ const CustomPicker = props => {
             } },
             React.createElement(Saturation, Object.assign({}, restOf, { pointer: SaturationPointer, onChange: onChange }))),
         React.createElement("div", { style: wrapperStyling },
-            React.createElement(PreviewColorPoint, null,
-                React.createElement("div", { style: {
-                        backgroundColor: props.color,
-                        position: 'absolute',
-                        top: '0px',
-                        right: '0px',
-                        bottom: '0px',
-                        left: '0px',
-                    } })),
+            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 }))),
@@ -102,16 +93,16 @@ const CustomPicker = props => {
             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(InputNumber, { value: (_a = props.rgb) === null || _a === void 0 ? void 0 : _a.r, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('r', value) }),
+                    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(InputNumber, { value: (_b = props.rgb) === null || _b === void 0 ? void 0 : _b.g, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('g', value) }),
+                    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(InputNumber, { value: (_c = props.rgb) === null || _c === void 0 ? void 0 : _c.b, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('b', value) }),
+                    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(InputNumber, { value: (_d = props.rgb) === null || _d === void 0 ? void 0 : _d.a, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('a', value) }),
+                    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"))),

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

@@ -1,5 +1,9 @@
+/// <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>;
-export declare const PreviewColorPoint: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PreviewColorPoint: import("styled-components").StyledComponent<"div", any, {
+    $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>;