@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

package/es/components/molecules/AccountSelection/components/AccountItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface AccountItemProps {
+    className?: string;
+    userName: string;
+    userId: number;
+    isSelected?: boolean;
+    onClick?: (userId: number) => void;
+}
+export declare const AccountItem: React.FC<AccountItemProps>;
+export {};

package/es/components/molecules/AccountSelection/components/AccountItem.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Text, Typography } from '../../../atoms';
+import { formatUserId } from '@antscorp/antsomi-ui/es/utils';
+export const AccountItem = React.memo(props => {
+    const { className, userName, userId, isSelected, onClick } = props;
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    React.createElement("li", { onClick: () => onClick && onClick(userId), className: `${className || ''} ${isSelected ? 'is-selected' : ''}` },
+        React.createElement(Typography.Text, { className: "account-name", ellipsis: { tooltip: true } }, userName),
+        React.createElement(Text, { className: "account-id" }, formatUserId(userId))));
+});

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

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

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

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

package/es/components/molecules/AccountSelection/hooks/index.d.ts

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

package/es/components/molecules/AccountSelection/hooks/index.js

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

package/es/components/molecules/AccountSelection/hooks/useAccountSelection.d.ts

@@ -0,0 +1,20 @@
+import { AccountRecent } from '@antscorp/antsomi-ui/es/models/AccountListing';
+interface AccountData {
+    email: any;
+    userId: any;
+    userName: any;
+    status: number;
+}
+export declare const useAccountSelection: (apiConfig: {
+    domain: string;
+    token: string;
+    userId: number;
+    portalId?: number;
+    languageCode?: string;
+    appCode?: string;
+    menuCode?: string;
+}) => {
+    recentData?: AccountRecent | undefined;
+    accountData: Array<AccountData>;
+};
+export {};

package/es/components/molecules/AccountSelection/hooks/useAccountSelection.js

@@ -0,0 +1,49 @@
+// Libraries
+import { useMemo } from 'react';
+// Queries
+import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount, } from '@antscorp/antsomi-ui/es/queries';
+// Constant
+import { PORTALS_IDS } from '@antscorp/antsomi-ui/es/constants';
+export const useAccountSelection = (apiConfig) => {
+    const { domain, token, userId, appCode, menuCode, portalId } = apiConfig;
+    const { data } = useGetAccountList({
+        apiConfig,
+        options: {
+            enabled: portalId !== PORTALS_IDS.SANDBOX_76753,
+        },
+    });
+    const { data: permissionAccountList } = useGetPermissionAccountList({
+        args: {
+            _account_id: userId,
+            _user_id: userId,
+            _app_code: appCode || '',
+            _token: token,
+            domain,
+            appCode: appCode || '',
+            fullParent: true,
+            menuCode: menuCode || appCode || '',
+        },
+        options: {
+            enabled: portalId === PORTALS_IDS.SANDBOX_76753,
+        },
+    });
+    const { data: recentData } = useGetRecentAccount({
+        apiConfig,
+        options: {
+            enabled: portalId !== PORTALS_IDS.SANDBOX_76753,
+        },
+    });
+    // Memos
+    const accountData = useMemo(() => {
+        if (portalId === PORTALS_IDS.SANDBOX_76753) {
+            return ((permissionAccountList === null || permissionAccountList === void 0 ? void 0 : permissionAccountList.map(account => ({
+                email: account.email,
+                userId: account.user_id,
+                userName: account.full_name,
+                status: 1,
+            }))) || []);
+        }
+        return (data === null || data === void 0 ? void 0 : data.entries) || [];
+    }, [data === null || data === void 0 ? void 0 : data.entries, permissionAccountList, portalId]);
+    return { recentData, accountData };
+};

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

@@ -0,0 +1,3 @@
+export { AccountSelection, type AccountSelectionProps } from './AccountSelection';
+export { AccountListing, AccountListingHandle } from './AccountListing';
+export { useAccountSelection } from './hooks';

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

@@ -0,0 +1,3 @@
+export { AccountSelection } from './AccountSelection';
+export { AccountListing } from './AccountListing';
+export { useAccountSelection } from './hooks';

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

@@ -0,0 +1,2 @@
+export declare const AccountSelectionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PopoverFieldStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,108 @@
+var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const AccountSelectionStyled = styled.div `
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  height: 450px;
+  box-shadow: 0px 3px 20px 0px #002e5933;
+
+  .antsomi-input-affix-wrapper {
+    padding: 8px 10px;
+    height: 40px;
+    box-sizing: border-box;
+  }
+
+  .recent-text {
+    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw7};
+    padding: 6px 10px;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  ul.account-list {
+    border-top: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw3};
+    overflow-y: auto;
+  }
+
+  li {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px 10px;
+    margin-bottom: 6px;
+    cursor: pointer;
+
+    .account-name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .account-id {
+      flex-shrink: 0;
+    }
+  }
+
+  .all-account {
+    padding: 13px 10px;
+    height: 46px;
+    box-sizing: border-box;
+    border-top: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw3};
+    cursor: pointer;
+  }
+
+  li:hover,
+  .all-account:hover {
+    background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue};
+  }
+
+  li.is-selected,
+  .all-account.is-selected {
+    background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1_1};
+  }
+`;
+export const PopoverFieldStyled = styled.div `
+  box-sizing: border-box;
+  width: 190px;
+  height: 36px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  cursor: pointer;
+
+  background-color: white;
+
+  font-size: 12px;
+  font-weight: bold;
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  i {
+    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw8};
+  }
+
+  &.select {
+    border: 1px solid ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw3};
+    border-radius: 999px;
+  }
+
+  &.input {
+    border-bottom: 1px solid ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.colorPrimary};
+    width: 300px;
+  }
+
+  & .is-placeholder {
+    color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.bw6};
+    font-weight: normal;
+  }
+`;

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

@@ -14,6 +14,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { omit, isEmpty, flatMapDeep, set, get, isNaN } from 'lodash';
+import { useQueryClient } from '@tanstack/react-query';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Components
@@ -27,7 +28,6 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { useGetDynamicContentAttr, useGetListPromotionPool, useGetListEventAttr, useGetListPromotionCodeAttr, useGetListBO, useGetListAllEvents, useGetListSourceByEvent, useGetListAttributeBO, useGetCustomFunction, useAddSavedCSFunction, useUpdateCSFunction, } from '@antscorp/antsomi-ui/es/queries';
 import { useGetEventTrackingAttributes } from '@antscorp/antsomi-ui/es/queries/ThirdParty';
 // Queries config
-import { queryClientAntsomiUI } from '@antscorp/antsomi-ui/es/queries/configs';
 import { QUERY_KEYS } from '@antscorp/antsomi-ui/es/constants/queries';
 import { dateExample } from './components/FormatDatetime';
 import DisplayFormat from './components/DisplayFormat';
@@ -126,6 +126,7 @@ export const AddDynamicContent = props => {
     const [attrDFOptions, setAttrDFOptions] = useState([]);
     // Template Custom
     const [templateId, settemplateId] = useState();
+    const queryClient = useQueryClient();
     const { data: listBoAttributes = [], isFetching: isFetchingListBoAttr, isError: isErrorBoAttr, } = useGetListAttributeBO({
         url,
         itemTypeIds: itemTypeId ? [itemTypeId] : [],
@@ -911,7 +912,7 @@ export const AddDynamicContent = props => {
                             break;
                         setItemTypeId(Number(selectedItemTypeId));
                         const key = [QUERY_KEYS.GET_EVENT_ATTRIBUTE_BO, [selectedItemTypeId]];
-                        const listAttBOByItemTypeId = serilizeBOAttr(queryClientAntsomiUI.getQueryData(key));
+                        const listAttBOByItemTypeId = serilizeBOAttr(queryClient.getQueryData(key));
                         if (listAttBOByItemTypeId.length) {
                             form.setFieldsValue({
                                 [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: listAttBOByItemTypeId[0],

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

@@ -99,3 +99,20 @@ export declare const ATTRIBUTE_NUMBERIC_FORMAT_OPTION: {
         };
     };
 };
+export declare const COLLECTION_STATUS: {
+    2: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+    4: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+    DELETE: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+};

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

@@ -150,3 +150,20 @@ export const ATTRIBUTE_NUMBERIC_FORMAT_OPTION = {
         },
     },
 };
+export const COLLECTION_STATUS = {
+    2: {
+        value: 2,
+        label: 'Disable',
+        errorMessage: 'This collection is disabled',
+    },
+    4: {
+        value: 4,
+        label: 'Archive',
+        errorMessage: 'This collection is not available',
+    },
+    DELETE: {
+        value: 3,
+        label: 'Delete',
+        errorMessage: 'This collection does not exist',
+    },
+};

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

@@ -6,7 +6,7 @@ export declare const InputSuggestion: import("styled-components").StyledComponen
     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 ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, 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/AlignSetting/utils.d.ts

@@ -1,3 +1,3 @@
 import { TAlign } from './index';
-export declare const mapAlignToJustifyContent: (value: TAlign) => "center" | "auto" | "end" | "start";
+export declare const mapAlignToJustifyContent: (value: TAlign) => "auto" | "center" | "end" | "start";
 export declare const mapJustifyContentToAlign: (value: 'start' | 'end' | 'center') => string | undefined;

package/es/components/molecules/CalendarSelection/CalendarSelection.js

@@ -10,12 +10,12 @@ import { initState, resetValue } from './actions';
 import { useTriggerOut } from './hooks/useTriggerOut';
 export const CalendarSelection = props => {
     const initialed = useRef(false);
-    const { value, popoverProps, rangeLimit = RANGE_LIMIT, timezone = LOCAL_TIMEZONE, timeDisplayProps, onChange, } = props;
+    const { value, rangeLimit = RANGE_LIMIT, timezone = LOCAL_TIMEZONE, timeDisplayProps, popoverProps, rangePickerProps, onChange, } = props;
     const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
     useLayoutEffect(() => {
-        if (!value)
+        if (!value || initialed.current)
             return;
-        dispatch(initState(value, !initialed.current));
+        dispatch(initState(value, initialed.current));
         initialed.current = true;
     }, [value]);
     useLayoutEffect(() => {
@@ -30,7 +30,7 @@ export const CalendarSelection = props => {
         React.createElement(StyledPopoverBody, null,
             React.createElement(RangeSelectOptions, null),
             React.createElement(Divider, { type: "vertical", style: { margin: 0, height: 'auto' } }),
-            React.createElement(CustomPicker, null)),
+            React.createElement(CustomPicker, Object.assign({}, rangePickerProps))),
         React.createElement(Divider, { style: { margin: 0 } }),
         React.createElement(Footer, null)));
     // console.log(state.value.current.rangeValue);

package/es/components/molecules/CalendarSelection/components/CustomPicker/CustomPicker.js

@@ -1,3 +1,14 @@
+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;
+};
 /* eslint-disable react/no-array-index-key */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { TinyColor } from '@ctrl/tinycolor';
@@ -19,7 +30,8 @@ const generateRangeInputLabel = (idx, label) => {
         return 'custom';
     return `custom compare${idx > 1 ? ` ${idx}}` : ''}`;
 };
-export const CustomPicker = () => {
+export const CustomPicker = props => {
+    const rest = __rest(props, []);
     const popupContainer = useRef(null);
     const { state, action } = useCalendarSelectionContext();
     const { rangeValue } = state.value.current;
@@ -66,7 +78,7 @@ export const CustomPicker = () => {
             } },
             React.createElement("div", { className: "range-input" },
                 React.createElement("div", { className: "range-input-label" }, generateRangeInputLabel(rangeIdx, range.label)),
-                React.createElement(RangePicker, { open: true, value: [dayjs(range.start), dayjs(range.end)], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
+                React.createElement(RangePicker, Object.assign({}, rest, { open: true, value: [dayjs(range.start), dayjs(range.end)], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
                         if (activeRangeIdx !== rangeIdx)
                             return null;
                         return originalPanel;
@@ -90,7 +102,7 @@ export const CustomPicker = () => {
                             end = valueFirst.toISOString();
                         }
                         handleCalendarChange(start, end);
-                    } })))))),
+                    } }))))))),
         React.createElement(AutoUpdateTo, null),
         React.createElement(CalendarContainerStyled, { className: "calendar-container", ref: popupContainer })));
 };

package/es/components/molecules/CalendarSelection/hooks/useStateContext.d.ts

@@ -1,4 +1,4 @@
 export declare const useCalendarSelectionContext: () => {
-    state: import("../types").ReducerState;
-    action: import("../types").ActionType;
+    state: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ReducerState;
+    action: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ActionType;
 };

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

@@ -1,4 +1,4 @@
-import { PopoverProps } from 'antd';
+import { DatePickerProps, PopoverProps } from 'antd';
 import { Dispatch } from 'react';
 import { ValueOf } from 'type-fest';
 import { updateRangeInfo, changeRangeType, updateRangeValue, changeAutoUpdateTo, initState, togglePopover, apply, resetValue } from './actions';
@@ -11,6 +11,7 @@ export type CalendarSelectionProps = Partial<{
     toDay: Date;
     value: CalendarSelectionValue;
     timeDisplayProps: TimeRangeDisplayProps;
+    rangePickerProps: DatePickerProps;
     onChange: (value: CalendarSelectionValue, info: TriggerOutInfo) => void;
 }>;
 export type Range = (typeof SELECTION_KEY)[keyof typeof SELECTION_KEY];

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

@@ -0,0 +1,19 @@
+import React from 'react';
+interface Page {
+    id: string;
+    name: string;
+    mode?: string;
+}
+interface EditorTabProps {
+    hiddenMenuOption?: boolean;
+    className?: string;
+    pages: Page[];
+    pageActiveId?: string;
+    onChangeActivePage?: (id: string) => void;
+    onDuplicate?: (id: string) => void;
+    onRemove?: (id: string) => void;
+    onSaveName?: (id: string, value: string) => void;
+    onDnD?: (page: Page[]) => void;
+}
+export declare const ChartTab: React.FC<EditorTabProps>;
+export {};

package/es/components/molecules/ChartTab/ChartTab.js

@@ -0,0 +1,36 @@
+// Lib
+import React, { useState } from 'react';
+// Utils
+import { ChartTabStyled } from './styled';
+import { Item } from './components/Item';
+import { DndContext } from '@dnd-kit/core';
+import { arrayMove, horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
+export const ChartTab = props => {
+    const { hiddenMenuOption, className, pages, pageActiveId, onChangeActivePage, onDuplicate, onRemove, onSaveName, onDnD, } = props;
+    const [activePage, setActivePage] = useState(pageActiveId || (pages === null || pages === void 0 ? void 0 : pages[0].id));
+    const [pageList, setPageList] = useState(pages);
+    const handleChangeActivePage = (id) => {
+        setActivePage(id);
+        onChangeActivePage === null || onChangeActivePage === void 0 ? void 0 : onChangeActivePage(id);
+    };
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+            setPageList(items => {
+                const oldIndex = items.findIndex(item => item.id === active.id);
+                const newIndex = items.findIndex(item => item.id === (over === null || over === void 0 ? void 0 : over.id));
+                const newArray = arrayMove(items, oldIndex, newIndex);
+                onDnD === null || onDnD === void 0 ? void 0 : onDnD(newArray);
+                return arrayMove(items, oldIndex, newIndex);
+            });
+        }
+    };
+    return (React.createElement(DndContext, { onDragEnd: handleDragEnd, 
+        // HACK: trick as click tab => set new active page
+        onDragStart: event => {
+            var _a;
+            handleChangeActivePage((_a = event === null || event === void 0 ? void 0 : event.active) === null || _a === void 0 ? void 0 : _a.id);
+        } },
+        React.createElement(SortableContext, { items: pageList === null || pageList === void 0 ? void 0 : pageList.map(item => item.id), strategy: horizontalListSortingStrategy },
+            React.createElement(ChartTabStyled, { className: className || '' }, pageList.map((pageItem, index) => (React.createElement(Item, { key: pageItem.id, page: pageItem, hiddenMenuOption: hiddenMenuOption, isActive: activePage === pageItem.id, onDuplicate: onDuplicate, onRemove: onRemove, onSaveName: onSaveName })))))));
+};

package/es/components/molecules/ChartTab/components/Item.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface Page {
+    id: string;
+    name: string;
+    mode?: string;
+}
+interface ItemProps {
+    page: Page;
+    hiddenMenuOption?: boolean;
+    isActive?: boolean;
+    onSaveName?: (id: string, value: string) => void;
+    onDuplicate?: (id: string) => void;
+    onRemove?: (id: string) => void;
+}
+export declare const Item: React.FC<ItemProps>;
+export {};

package/es/components/molecules/ChartTab/components/Item.js

@@ -0,0 +1,47 @@
+// Libraries
+import React, { useState } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import Icon from '@antscorp/icons';
+// Styles
+import { ItemStyled } from './styled';
+// Components
+import { ContentEditable, Dropdown, Typography } from '@antscorp/antsomi-ui/es/components';
+export const Item = (props) => {
+    const { page, hiddenMenuOption = false, isActive, onSaveName, onDuplicate, onRemove } = props;
+    const [isEditable, setIsEditable] = useState(false);
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: page.id });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    return (React.createElement("li", Object.assign({ id: page.id, ref: setNodeRef, style: style }, attributes, listeners),
+        React.createElement(ItemStyled, { id: page.id, "$isActive": isActive },
+            isEditable ? (React.createElement(ContentEditable, { value: page.name, onSave: newValue => {
+                    setIsEditable(false);
+                    onSaveName === null || onSaveName === void 0 ? void 0 : onSaveName(page.id, newValue);
+                } })) : (React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, page.name)),
+            !hiddenMenuOption ? (React.createElement(Dropdown, { menu: {
+                    items: [
+                        { label: 'Rename', key: 'rename' },
+                        { label: 'Duplicate', key: 'duplicate' },
+                        { label: 'Remove', key: 'remove' },
+                    ],
+                    onClick: ({ key }) => {
+                        switch (key) {
+                            case 'rename':
+                                setIsEditable(true);
+                                break;
+                            case 'duplicate':
+                                onDuplicate === null || onDuplicate === void 0 ? void 0 : onDuplicate(page.id);
+                                break;
+                            case 'remove':
+                                onRemove === null || onRemove === void 0 ? void 0 : onRemove(page.id);
+                                break;
+                            default:
+                                break;
+                        }
+                    },
+                }, trigger: ['hover'], placement: "topLeft" },
+                React.createElement(Icon, { type: "icon-ants-three-dot-vertical", style: { cursor: 'pointer' } }))) : null)));
+};

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

@@ -0,0 +1,3 @@
+export declare const ItemStyled: import("styled-components").StyledComponent<"div", any, {
+    $isActive?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,30 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Tokens
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const ItemStyled = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 32px;
+  min-width: 80px;
+  max-width: 130px;
+
+  background-color: ${props => { var _a; return (props.$isActive ? 'white' : (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw2); }};
+  font-weight: ${props => (props.$isActive ? 500 : 400)};
+  padding: 6px 10px;
+
+  &:hover {
+    font-weight: 500;
+    background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue} !important;
+  }
+
+  span[contenteditable='true'] {
+    flex: 1;
+  }
+`;

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

@@ -0,0 +1 @@
+export declare const ChartTabStyled: import("styled-components").StyledComponent<"ul", any, {}, never>;

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

@@ -0,0 +1,23 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const ChartTabStyled = styled.ul `
+  list-style-type: none;
+  display: flex;
+
+  & > li {
+    border: 1px solid #e5e5e5;
+    cursor: default;
+
+    &:first-child {
+      overflow: hidden;
+      border-top-left-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      border-bottom-left-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      /* border-top-left-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}; */
+    }
+    &:last-child {
+      overflow: hidden;
+      border-top-right-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      border-bottom-right-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+    }
+  }
+`;