@antscorp/antsomi-ui 2.0.71 → 2.0.72

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

@@ -0,0 +1,5 @@
+import type { SelectAssociatedTagProps } from './types';
+export declare const SelectAssociatedTag: {
+    (props: SelectAssociatedTagProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: SelectAssociatedTagProps;
+};

package/es/components/atoms/SelectAssociatedTag/SelectAssociatedTag.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Components
+import { StyledSpace } from './styled';
+import { Divider } from 'antd';
+import { Select } from '../../molecules';
+import SelectTag from './SelectTag';
+// Constants
+import { defaultProps } from './constants';
+export const SelectAssociatedTag = (props) => {
+    // Props
+    const { tagConfigs, style, status, selected, disabled, options, children, onSelect } = props;
+    const { tag, value } = selected || {};
+    return (_jsxs(StyledSpace, { className: `select-associated-tag ${status}`, style: style, children: [_jsx(SelectTag, { ...tagConfigs, selectedTag: tag }), _jsx(Divider, { type: "vertical", style: { margin: '0px 1px 0px 6px' }, className: "antsomi-divider-between-select" }), children ?? (_jsx(Select, { style: { width: '100%', height: '100%' }, value: value, disabled: disabled, options: options, onChange: onSelect }))] }));
+};
+SelectAssociatedTag.defaultProps = defaultProps;

package/es/components/atoms/SelectAssociatedTag/SelectTag.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TagConfigProps } from './types';
+declare const _default: import("react").MemoExoticComponent<(props: TagConfigProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/es/components/atoms/SelectAssociatedTag/SelectTag.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
+import { memo, useMemo, useState } from 'react';
+import { keyBy } from 'lodash';
+// Components
+import { Flex, Typography } from 'antd';
+import { Popover } from '../Popover';
+import { SelectedTag } from './styled';
+const SelectTag = (props) => {
+    // Props
+    const { selectedTag, disabled, title, options, onSelect } = props;
+    // State
+    const [open, setOpen] = useState(false);
+    // Memoized
+    const mapOptsMemo = useMemo(() => keyBy(options, 'value'), [options]);
+    const selectedItem = useMemo(() => mapOptsMemo?.[selectedTag] || {}, [selectedTag, mapOptsMemo]);
+    const handleOpenChange = () => {
+        setOpen(!open);
+    };
+    const handleClick = (item) => {
+        setOpen(false);
+        onSelect(item);
+    };
+    return (_jsx(Popover, { open: open && !disabled, title: _jsx(Typography.Text, { style: { fontWeight: '400', maxWidth: 130 }, ellipsis: { tooltip: title }, children: title }), content: _jsx(Flex, { wrap: "wrap", gap: 6, style: { padding: '10px 0px' }, children: options?.map(item => (_jsx(SelectedTag, { "$color": item.color, "$background": item.background, ellipsis: { tooltip: item.label }, onClick: () => handleClick(item), children: item.label }, item.value))) }), placement: "bottomLeft", trigger: "click", overlayInnerStyle: { padding: 10, maxWidth: 150 }, onOpenChange: handleOpenChange, children: _jsx(SelectedTag, { "$color": selectedItem?.color, "$background": selectedItem?.background, ellipsis: { tooltip: selectedItem?.label }, children: selectedItem?.label }) }));
+};
+export default memo(SelectTag);

package/es/components/atoms/SelectAssociatedTag/constants.d.ts

@@ -0,0 +1,11 @@
+import type { SelectAssociatedTagProps, TagItem } from './types';
+export declare const DEFAULT_TAGS: {
+    readonly RAW: "RAW";
+    readonly md5: "md5";
+    readonly sha_256: "sha_256";
+    readonly MD5: "MD5";
+    readonly SHA_256: "SHA_256";
+};
+export declare const DEFAULT_TAGS_OPTS: Record<string, TagItem>;
+export declare const DEFAULT_TAGS_LIST: TagItem[];
+export declare const defaultProps: SelectAssociatedTagProps;

package/es/components/atoms/SelectAssociatedTag/constants.js

@@ -0,0 +1,42 @@
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Locales
+import { translations, translate } from '@antscorp/antsomi-locales';
+export const DEFAULT_TAGS = {
+    RAW: 'RAW',
+    md5: 'md5',
+    sha_256: 'sha_256',
+    MD5: 'MD5',
+    SHA_256: 'SHA_256',
+};
+export const DEFAULT_TAGS_OPTS = {
+    RAW: { label: 'RAW', value: DEFAULT_TAGS.RAW, color: globalToken?.bw0, background: '#4CB4C9' },
+    md5: { label: 'md5', value: DEFAULT_TAGS.md5, color: globalToken?.bw0, background: '#3B8FDE' },
+    sha_256: {
+        label: 'sha-256',
+        value: DEFAULT_TAGS.sha_256,
+        color: globalToken?.bw0,
+        background: '#12B800',
+    },
+    MD5: { label: 'MD5', value: DEFAULT_TAGS.MD5, color: globalToken?.bw0, background: '#3B8FDE' },
+    SHA_265: {
+        label: 'SHA-256',
+        value: DEFAULT_TAGS.SHA_256,
+        color: globalToken?.bw0,
+        background: '#12B800',
+    },
+};
+export const DEFAULT_TAGS_LIST = Object.values(DEFAULT_TAGS_OPTS);
+export const defaultProps = {
+    tagConfigs: {
+        options: DEFAULT_TAGS_LIST,
+        title: translate(translations._INFO_STORY_WAIT_FOR_HASH, 'Hash Method'),
+        onSelect: () => { },
+    },
+    selected: {
+        tag: DEFAULT_TAGS.RAW,
+        value: DEFAULT_TAGS.SHA_256,
+    },
+    options: DEFAULT_TAGS_LIST,
+    onSelect: () => { },
+};

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

@@ -0,0 +1,3 @@
+export { SelectAssociatedTag } from './SelectAssociatedTag';
+export type { SelectAssociatedTagProps } from './types';
+export * from './constants';

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

@@ -0,0 +1,2 @@
+export { SelectAssociatedTag } from './SelectAssociatedTag';
+export * from './constants';

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { TagItem } from './types';
+export declare const StyledSpace: import("styled-components").StyledComponent<import("react").FC<import("antd/es/space/Compact").SpaceCompactProps>, any, {}, never>;
+export declare const SelectedTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    $background: TagItem['background'];
+    $color: TagItem['color'];
+}, never>;

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

@@ -0,0 +1,60 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Space } from '../Space';
+import { Typography } from 'antd';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const StyledSpace = styled(Space.Compact) `
+  width: 100%;
+  height: 30px;
+  padding-left: 5px;
+  align-items: center;
+
+  border-bottom: 1px solid ${globalToken?.blue1};
+
+  &.select-associated-tag {
+    &.warning {
+      border-bottom-color: ${globalToken?.colorWarning};
+    }
+
+    &.error {
+      border-bottom-color: ${globalToken?.colorError};
+    }
+
+    &.success {
+      border-bottom-color: ${globalToken?.colorSuccess};
+    }
+  }
+
+  > div:last-child {
+    width: 100%;
+  }
+
+  .antsomi-divider.antsomi-divider-vertical {
+    height: 20px;
+  }
+
+  .antsomi-select-selector {
+    border: none !important;
+  }
+`;
+export const SelectedTag = styled(Typography.Text) `
+  border-radius: 3px;
+  height: 16px;
+  line-height: 16px;
+  padding-left: 3px;
+  padding-right: 3px;
+  flex-shrink: 0;
+  cursor: pointer;
+
+  background: ${props => props.$background};
+
+  &.antsomi-typography {
+    color: ${props => props.$color};
+
+    &.antsomi-typography-ellipsis {
+      max-width: 70px;
+    }
+  }
+`;

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

@@ -0,0 +1,76 @@
+import { Dictionary } from 'lodash';
+import { CSSProperties, ReactNode } from 'react';
+export type TagItem = {
+    label: string;
+    value: string;
+    background: CSSProperties['background'];
+    color: CSSProperties['color'];
+};
+export type Status = 'error' | 'warning' | 'success';
+export interface TagConfigProps {
+    selectedTag: TagItem['value'];
+    title?: string;
+    disabled?: boolean;
+    options: TagItem[];
+    onSelect: (newItem: TagItem) => void;
+}
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+/**
+ * Properties for the SelectAssociatedTag component.
+ */
+export interface SelectAssociatedTagProps {
+    /**
+     * Configuration properties for tag options, excluding the selected tag.
+     * @type {Omit<TagConfigProps, 'selectedTag'>}
+     */
+    tagConfigs: Omit<TagConfigProps, 'selectedTag'>;
+    /**
+     * The currently selected tag and its associated value.
+     * @type {{ tag: string; value: string; }}
+     */
+    selected: {
+        /**
+         * The identifier for the selected tag.
+         * @type {string}
+         */
+        tag: string;
+        /**
+         * The value associated with the selected tag.
+         * @type {Dictionary<SelectOption>}
+         */
+        value: Dictionary<SelectOption>;
+    };
+    /**
+     * Whether the SelectAssociatedTag is disabled.
+     * @type {boolean}
+     */
+    disabled?: boolean;
+    /**
+     * The status of the SelectAssociatedTag, if any.
+     * @type {'error' | 'warning' | 'success' }
+     */
+    status?: Status;
+    /**
+     * A list of selectable options.
+     * @type {SelectOption[]}
+     */
+    options: SelectOption[];
+    /**
+     * The style object for the SelectAssociatedTag component.
+     * @type {CSSProperties}
+     */
+    style?: CSSProperties;
+    /**
+     * The children to be rendered inside the SelectAssociatedTag component.
+     * @type {ReactNode}
+     */
+    children?: ReactNode;
+    /**
+     * Callback function called when an option is selected.
+     * @type {(value: Dictionary<SelectOption>, option: SelectOption | SelectOption[]) => void}
+     */
+    onSelect: (value: Dictionary<SelectOption>, option: SelectOption | SelectOption[]) => void;
+}

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

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

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

@@ -48,6 +48,7 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './SelectAssociatedTag';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -48,3 +48,4 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './SelectAssociatedTag';

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

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import { memo, useEffect } from 'react';
-import { Form, InputNumber, Radio, Select, Typography, Flex, Input, Row, Col } from 'antd';
+import { Form, Typography, Flex, Row, Col } from 'antd';
 import { useImmer } from 'use-immer';
 import { translate, translations } from '@antscorp/antsomi-locales';
 import { isEmpty } from 'lodash';
+// Components
+import { Input, Radio } from '../../atoms';
+import { InputNumber } from '../InputNumber';
+import { Select } from '../Select';
 // Utils
 import { calculateTotalCodes, generateCodeWithPrefixAndSuffix, generateRandomCodeWithConfig, } from './utils';
 // Types

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export type ValueType = 'input' | 'select';
+type Value = {
+    source: any;
+    code: any;
+} | string;
+type Option = {
+    [key: string]: any;
+    label: string;
+    value: string;
+};
+export interface InputSelectAttributeProps {
+    sourceOptions: Option[];
+    mapCodeOptions: Record<string, Option[]>;
+    label?: string;
+    isErrorTag?: boolean;
+    errorMsg?: string;
+    value: Value;
+    onChange: (newValueData: {
+        value: Value;
+        valueType: ValueType;
+    }) => void;
+}
+declare const _default: import("react").MemoExoticComponent<(props: InputSelectAttributeProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Libraries
+import { memo, useCallback, useMemo, useState } from 'react';
+import { get, has, keyBy, upperFirst } from 'lodash';
+import { Flex, Form, Select, Tooltip, Typography } from 'antd';
+// Translations
+import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
+// Components
+import Icon from '@antscorp/icons';
+import { ModalV2 } from '../ModalV2';
+import { StyledTag as Tag } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2/styled';
+import { StyledSelect } from './styled';
+import { EmptyData } from '../EmptyData';
+import { Dashboard30Icon, ErrorIcon } from '../../icons';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { TAG_TYPE } from '../TagifyInput';
+const InputSelectAttribute = (props) => {
+    const { value, errorMsg, label, isErrorTag, sourceOptions = [], mapCodeOptions = {}, onChange, } = props;
+    const [form] = Form.useForm();
+    const sourceValue = Form.useWatch('source', form);
+    // States
+    const [openModal, setOpenModal] = useState(false);
+    const codeOptions = useMemo(() => {
+        if (sourceValue) {
+            return get(mapCodeOptions, sourceValue, []);
+        }
+        return [];
+    }, [sourceValue, mapCodeOptions]);
+    const initCodeTitleField = useMemo(() => {
+        if (sourceValue === TAG_TYPE.PROMOTION_CODE) {
+            return 'Allocated Code';
+        }
+        return upperFirst(translate(translations._ITEM_NAME_ATTRIBUTE, 'attribute'));
+    }, [sourceValue]);
+    const mapCodeBySource = useMemo(() => {
+        if (typeof value === 'string')
+            return {};
+        return keyBy(get(mapCodeOptions, value?.source, []), 'value');
+    }, [mapCodeOptions, value]);
+    const mapSourceOptions = useMemo(() => {
+        if (typeof value === 'string')
+            return {};
+        return keyBy(sourceOptions, 'value');
+    }, [sourceOptions, value]);
+    const getCodeDefaultBySource = useCallback((source) => get(mapCodeOptions, [source, '0', 'value'], ''), [mapCodeOptions]);
+    const onOpenModal = useCallback(() => {
+        if (value && typeof value !== 'string') {
+            const isExistCode = has(mapCodeBySource, [value?.code, 'label']);
+            const isExistSource = has(mapSourceOptions, [value?.source]);
+            form.setFieldsValue({
+                source: isExistSource ? value?.source : undefined,
+                code: isExistCode ? value?.code : undefined,
+            });
+        }
+        else {
+            const source = sourceOptions[0]?.value || '';
+            const code = getCodeDefaultBySource(source);
+            form.setFieldsValue({ source, code });
+        }
+        setOpenModal(true);
+    }, [value, mapCodeBySource, form, sourceOptions, mapSourceOptions, getCodeDefaultBySource]);
+    const onDeselect = useCallback(() => {
+        onChange({ value: '', valueType: 'input' });
+    }, [onChange]);
+    const onHideModal = useCallback(() => {
+        setOpenModal(false);
+    }, []);
+    const onAfterClose = useCallback(() => {
+        form.resetFields();
+    }, [form]);
+    const onOk = async () => {
+        try {
+            // Validate form fields before getting values
+            const values = await form.validateFields();
+            if (typeof values !== 'string') {
+                const newValue = {
+                    source: values?.source,
+                    code: values?.code,
+                };
+                onChange({ value: newValue, valueType: 'select' });
+            }
+            setOpenModal(false);
+        }
+        catch (errorInfo) {
+            // eslint-disable-next-line no-console
+            console.error('Validation Failed:', errorInfo);
+        }
+    };
+    const onChangeInput = useCallback((val) => {
+        onChange({ value: val, valueType: 'input' });
+    }, [onChange]);
+    const onValuesChange = useCallback((changedValues) => {
+        // If source changed -> set new code based on new source
+        if (changedValues?.source) {
+            const newCode = getCodeDefaultBySource(changedValues.source);
+            form.setFieldValue('code', newCode);
+        }
+    }, [form, getCodeDefaultBySource]);
+    const renderInput = () => {
+        let element = null;
+        const isObjValue = value && typeof value !== 'string';
+        if (openModal || isObjValue) {
+            element = (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    height: 32,
+                    padding: '4px 12px 4px 4px',
+                    borderBottom: `1px solid ${errorMsg ? THEME.token?.colorError : THEME.token?.blue1}`,
+                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && (_jsx(Tag, { isError: isErrorTag, children: isErrorTag ? (_jsxs(Flex, { gap: 5, align: "center", children: ["Unknown", _jsx(Tooltip, { title: "The used dynamic content is removed", children: _jsx(ErrorIcon, { size: 16 }) })] })) : (_jsx(Typography.Text, { ellipsis: {
+                                    tooltip: get(mapCodeBySource, [value?.code, 'label'], value?.code),
+                                }, style: { maxWidth: 150 }, children: get(mapCodeBySource, [value?.code, 'label'], value?.code) })) })) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
+        }
+        else {
+            element = (_jsx(StyledSelect, { mode: "multiple", options: [{ value: '', label: 'Or select a field' }], notFoundContent: null, onSelect: onOpenModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, status: errorMsg ? 'error' : undefined, placeholder: typeof value === 'string' ? value : translate(translations.inputYourValue.title), "$isPlaceholder": !value, "$isError": !!errorMsg, dropdownStyle: {
+                    ...(openModal ? { display: 'none' } : {}),
+                } }));
+        }
+        return element;
+    };
+    return (_jsxs(_Fragment, { children: [renderInput(), errorMsg ? (_jsx(Typography.Text, { style: { marginLeft: 8, color: THEME.token?.red8, marginTop: 5 }, children: errorMsg })) : null, _jsx(ModalV2, { title: translate(translations._PREDICT_MODEL_SELECT_ATTRIBUTE, 'Select attribute'), okText: translate(translations._ACT_APPLY, 'Apply'), open: openModal, onOk: onOk, onCancel: onHideModal, afterClose: onAfterClose, destroyOnClose: true, centered: true, children: _jsxs(Form, { colon: false, form: form, onValuesChange: onValuesChange, children: [_jsx(Form.Item, { label: translate(translations._TITL_PERSONALIZATION_TYPE, 'Content Source'), name: "source", required: true, labelCol: { span: 6 }, labelAlign: "left", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), options: sourceOptions, placeholder: "Please select an item" }) }), _jsx(Form.Item, { label: label || initCodeTitleField, required: true, labelCol: { span: 6 }, labelAlign: "left", name: "code", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), notFoundContent: _jsx(EmptyData, { size: "small", icon: _jsx(Dashboard30Icon, {}), description: "No personalized content in this journey" }), placeholder: "Please select an item", options: codeOptions }) })] }) })] }));
+};
+export default memo(InputSelectAttribute);

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

@@ -0,0 +1,14 @@
+export declare const StyledSelect: import("styled-components").StyledComponent<{
+    (props: import("@antscorp/antsomi-ui/es/components/molecules").SelectV2Props): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        suffixIcon: import("react/jsx-runtime").JSX.Element;
+        filterOption: (input: any, option: any) => boolean;
+        tagRender: (props: any) => import("react/jsx-runtime").JSX.Element;
+        containerStyle: {};
+        labelStyle: {};
+        clearIcon: import("react/jsx-runtime").JSX.Element;
+    };
+}, any, {
+    $isPlaceholder?: any;
+    $isError?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,33 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { SelectV2 as Select } from '@antscorp/antsomi-ui/es/components/molecules';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const StyledSelect = styled(Select) `
+  .antsomi-select-selection-overflow .antsomi-select-selection-overflow-item {
+    flex: 1;
+
+    .antsomi-select-selection-search {
+      width: fit-content !important;
+      flex: 1;
+    }
+  }
+
+  ${({ $isError }) => $isError
+    ? css `
+          .antsomi-select-selector {
+            box-shadow: none !important;
+          }
+        `
+    : css ``}
+
+  .antsomi-select-selection-placeholder {
+    ${props => !props.$isPlaceholder
+    ? css `
+            color: rgba(0, 0, 0, 0.85);
+            font-size: ${THEME.token?.fontSize}px;
+          `
+    : css ``}
+  }
+`;

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

@@ -14,7 +14,7 @@ export const defaultSearch = (opt, search, config) => {
 };
 export const calDefaultListHeightInPopover = (params) => {
     const { listLength, itemSpacing, itemSize } = params;
-    const DEFAULT_NUM_ITEM_SHOWED = 6;
+    const DEFAULT_NUM_ITEM_SHOWED = 4;
     const itemLength = min([DEFAULT_NUM_ITEM_SHOWED, listLength]);
     return calInlineListSize(itemLength || 0, itemSize, itemSpacing);
 };

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

@@ -9,7 +9,9 @@ export declare const StyledSelect: import("styled-components").StyledComponent<(
     OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
     _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
-export declare const StyledTag: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;
+export declare const StyledTag: import("styled-components").StyledComponent<import("antd").TagType, any, {
+    isError?: boolean | undefined;
+}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<"div", any, {
     borderColor?: any;
 }, never>;

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

@@ -105,8 +105,8 @@ export const StyledTag = styled(Tag) `
   margin-right: 5px !important;
   padding: 5px 10px !important;
   border-radius: 15px !important;
-  border: none !important;
-  background-color: ${THEME.token?.blue2} !important;
+  border: ${p => (p.isError ? `1px solid ${THEME.token?.colorError}` : 'none')} !important;
+  background-color: ${p => (p.isError ? THEME.token?.bw0 : THEME.token?.blue2)} !important;
   cursor: pointer !important;
 
   .antsomi-tag-close-icon {