@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

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

@@ -20,17 +20,23 @@ export const StyledCustomPickerRoot = styled.div `
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 8px 12px;
 
-  .range-inputs {
+  .section-input {
+    padding: 8px 12px;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 4px;
 
-    .range-input {
+    .range-inputs {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: 8px;
+
+      .range-input {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
     }
   }
 
@@ -68,83 +74,8 @@ export const CalendarContainerStyled = styled.div `
 
     /* Content */
     .antsomi-picker-content {
-      /* Rectangle */
-      & td,
-      & th,
-      & .antsomi-picker-cell-inner,
-      & td::before {
-        /* width: var(--cellWidth);
-        height: var(--cellHeight); */
-      }
-
-      /* Date node */
-      .antsomi-picker-cell-inner {
-      }
-
-      /* Today node */
-      .antsomi-picker-cell-today {
-        .antsomi-picker-cell-inner {
-          &::before {
-            border-radius: 18px;
-            border: 0.0001rem solid var(--colorToDay);
-          }
-        }
-      }
-
-      /* Selected node */
-      .antsomi-picker-cell-in-view {
-        &.antsomi-picker-cell-selected,
-        &.antsomi-picker-cell-range-start,
-        &.antsomi-picker-cell-range-end {
-          .antsomi-picker-cell-inner {
-            background: var(--colorSelected) !important;
-            border-radius: 18px !important;
-          }
-        }
-      }
-
-      /* In Range */
-      .antsomi-picker-cell-in-range.antsomi-picker-cell-in-view {
-        &::before {
-          background: var(--colorInRange) !important;
-        }
-        .antsomi-picker-cell-inner {
-          /* background: var(--colorInRange) !important; */
-          &::after {
-            content: none !important;
-            background: var(--colorInRange) !important;
-          }
-        }
-      }
-
-      /* In Range Start End */
-      .antsomi-picker-cell-in-view.antsomi-picker-cell-range-start:not(
-          .antsomi-picker-cell-range-start-single
-        ) {
-        &::before {
-          background: var(--colorInRange) !important;
-        }
-      }
-      .antsomi-picker-cell-in-view.antsomi-picker-cell-range-end:not(
-          .antsomi-picker-cell-range-end-single
-        ) {
-        &::before {
-          background: var(--colorInRange) !important;
-        }
-      }
-
-      /* Hover */
-      .antsomi-picker-cell-in-view {
-        &.antsomi-picker-cell-range-hover,
-        &.antsomi-picker-cell-range-hover-start,
-        &.antsomi-picker-cell-range-hover-end {
-          &:not(.antsomi-picker-cell-in-range)::after {
-            content: none !important;
-            border: none;
-          }
-        }
-      }
     }
+
     .antsomi-picker-range-arrow {
       display: none !important;
     }

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { StyledRangePicker } from './styled';
 const DATE_FORMAT = 'DD/MM/YYYY';
-export const RangePicker = props => (React.createElement(StyledRangePicker, Object.assign({}, props, { allowEmpty: [true, true], allowClear: false, autoFocus: false, size: "large", suffixIcon: false, format: DATE_FORMAT })));
+export const RangePicker = props => (React.createElement(StyledRangePicker, Object.assign({}, props, { allowEmpty: [true, true], allowClear: false, autoFocus: false, bordered: false, size: "middle", suffixIcon: false, format: DATE_FORMAT })));

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

@@ -1,13 +1,26 @@
 import { DatePicker } from '@antscorp/antsomi-ui/es/components/molecules';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 const { RangePicker } = DatePicker;
 export const StyledRangePicker = styled(RangePicker) `
-  font-size: 12px;
-  padding-right: 8px;
+  &.antsomi-picker {
+    font-size: 12px;
+    padding: 0;
 
-  .ant-picker-input {
-    input {
-      width: 80px;
+    .antsomi-picker-active-bar {
+      display: none;
+    }
+
+    .antsomi-picker-input {
+      padding: 4px 10px;
+
+      &.antsomi-picker-input-active {
+        border-bottom: 2px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+      }
+
+      input {
+        font-size: inherit;
+      }
     }
   }
 `;

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/NumOfDaysRanges/index.d.ts

@@ -1 +1 @@
-export * from './NumOfDaysRanges';
+export { NumOfDaysRanges } from './NumOfDaysRanges';

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/NumOfDaysRanges/index.js

@@ -1 +1 @@
-export * from './NumOfDaysRanges';
+export { NumOfDaysRanges } from './NumOfDaysRanges';

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

@@ -1,12 +1,39 @@
 import React, { useRef } from 'react';
+import { List, Menu } from 'antd';
 import Icon from '@antscorp/icons';
+import styled from 'styled-components';
 import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import classNames from 'classnames';
 import { useCalendarSelectionContext } from '../../../../hooks';
 import { changeRangeType } from '../../../../actions';
 import { rangeInfoToStringType } from '../../../../utils';
-import { StyledMenu } from './styled';
-import { List } from 'antd';
+const StyledMenu = styled(Menu) `
+  &.antsomi-menu-root {
+    .antsomi-menu-item {
+      position: relative;
+      color: black;
+      height: 32px;
+      line-height: 32px;
+      border-radius: 0;
+      width: 100%;
+      margin: 0;
+
+      &.antsomi-menu-item-selected {
+        font-weight: bold;
+
+        &:after {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 4px;
+          height: 100%;
+          background-color: #005fb8;
+        }
+      }
+    }
+  }
+`;
 export const Option = props => {
     const itemRef = useRef(null);
     const { label = '', options = [], type } = props;

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Option';
-export * from './NumOfDaysRanges';
+export { Option } from './Option';
+export { NumOfDaysRanges } from './NumOfDaysRanges';

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

@@ -1,2 +1,2 @@
-export * from './Option';
-export * from './NumOfDaysRanges';
+export { Option } from './Option';
+export { NumOfDaysRanges } from './NumOfDaysRanges';

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

@@ -10,22 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import cls from 'clsx';
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef } from 'react';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { ACTION_TYPES } from '../../actions';
 import { useCalendarSelectionContext } from '../../hooks';
 import { getRangeTypeSelectedTitle, getRangeValueSelctedTitle } from '../../utils';
 import { StyledBtnDisplayWrapper } from './styled';
-import Icon from '@antscorp/icons';
 const { Text } = Typography;
 export const TimeRangeDisplay = forwardRef((props, ref) => {
     const { showType = true, formatStart, formatEnd, operator } = props, rest = __rest(props, ["showType", "formatStart", "formatEnd", "operator"]);
     const { state, action } = useCalendarSelectionContext();
-    // console.log({ state, action });
-    const [collapse, setCollapse] = useState(false);
-    useEffect(() => {
-        setCollapse(false);
-    }, []);
     const { rangeInfo, rangeValue } = state.value.original;
     const handleOpenPopover = () => {
         action.dispatch({ type: ACTION_TYPES.togglePopover });
@@ -36,14 +30,14 @@ export const TimeRangeDisplay = forwardRef((props, ref) => {
         formatEnd,
         operator,
     });
-    // console.log({ rangeSelectedTitle, rangeValueTitles });
+    const renderDateTitle = (title) => (React.createElement(Text, { className: "range-date-title", ellipsis: {
+            tooltip: title,
+        } }, title));
     return (React.createElement(StyledBtnDisplayWrapper, Object.assign({ ref: ref }, rest, { onClick: handleOpenPopover, role: "button" }),
         showType && (React.createElement(Text, { className: "range-type", ellipsis: { tooltip: rangeSelectedTitle } }, rangeSelectedTitle)),
-        React.createElement("div", { className: cls('range-date', { collapse: state.open }) },
-            rangeValue.length > 0 && (React.createElement(Text, { className: "range-date-title", ellipsis: { tooltip: rangeValueTitles[0] } },
-                rangeValueTitles[0],
-                React.createElement(Icon, { className: "collapse-btn", type: "icon-ants-angle-down", style: { fontSize: 9 } }))),
+        React.createElement("div", { className: cls('range-date') },
+            rangeValue.length > 0 && renderDateTitle(rangeValueTitles[0]),
             rangeValue.length > 1 && (React.createElement("div", { className: cls('collapse-wrapper') }, rangeValueTitles.slice(1).map(title => (React.createElement(React.Fragment, { key: title },
                 React.createElement("div", { className: "compare-title" }, "Compare"),
-                React.createElement(Text, { className: "range-date-title", ellipsis: { tooltip: title } }, title)))))))));
+                renderDateTitle(title)))))))));
 });

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

@@ -1,70 +1,29 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledBtnDisplayWrapper = styled.div `
   display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
-  background-color: transparent;
   cursor: pointer;
   width: fit-content;
+  flex-direction: column;
+  gap: 4px;
+  line-height: 1.4;
 
   .range-type {
-    /* font-size: 0.75rem;
-    width: fit-content;
-    padding: 2px 8px; */
-
     display: block;
-    font-size: 0.813rem;
-    margin-right: 0.5rem;
-    color: rgb(127, 127, 127);
+    font-size: 11px;
+    padding: 3px 5px;
+    border-radius: 3px;
+    width: fit-content;
+    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw2};
+    line-height: inherit;
   }
 
-  .range-date {
-    border-top: none;
-    border-right: none;
-    border-left: none;
-    border-image: initial;
-    background: transparent;
-    border-bottom: 1px solid rgb(184, 207, 230);
-    text-align: left;
-    display: flex;
-    -webkit-box-pack: justify;
-    justify-content: space-between;
-    -webkit-box-align: center;
-    align-items: center;
-    font-size: 0.75rem;
-    padding: 2px 8px;
-    max-width: unset;
-
-    .range-date-title {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .collapse-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      overflow: hidden;
-
-      .compare-title {
-        font-size: 11px;
-        color: #878d93;
-      }
-    }
-
-    .collapse-btn {
-      padding: 4px;
-    }
-
-    &.collapse {
-      .collapse-wrapper {
-        height: 0;
-      }
-
-      .collapse-btn {
-        transform: rotate(180deg);
-      }
-    }
+  .range-date-title {
+    padding: 3px 5px;
+    border-radius: 3px;
+    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
+    line-height: inherit;
   }
 `;

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

@@ -21,5 +21,36 @@ export declare const CalendarSelectionConstants: {
         readonly days_up_to_today: "days_up_to_today";
         readonly days_up_to_yesterday: "days_up_to_yesterday";
     };
+    AUTO_UPDATE_TO_KEY: {
+        readonly today: "today";
+        readonly yesterday: "yesterday";
+        readonly fixed: "fixed";
+    };
 };
 export type { TriggerOutInfo, CalendarSelectionValue } from './types';
+export declare const CalendarSelectionUtils: {
+    getDefaultDate: () => {
+        toDay: string;
+        yesterday: string;
+        startWeekSS: string;
+        startWeekMS: string;
+        last7Days: string;
+        startLastWeekSS: string;
+        startLastWeekMS: string;
+        endLastWeekSS: string;
+        endLastWeekMS: string;
+        last14Days: string;
+        startOfThisMonth: string;
+        endOfThisMonth: string;
+        last30Days: string;
+        lastMonthFirstDate: string;
+        lastMonthLastDate: string;
+        thisQuaterFirstDate: string;
+        thisQuaterLastDate: string;
+        lastQuaterFirstDate: string;
+        lastQuaterLastDate: string;
+        maxSub: number;
+        todayUptoCount: (val: number) => string;
+        yesterdayUptoCount: (val: number) => string;
+    };
+};

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

@@ -1,6 +1,11 @@
-import { TRIGGER_OUT_MODE, SELECTION_KEY } from './constants';
+import { TRIGGER_OUT_MODE, SELECTION_KEY, AUTO_UPDATE_TO_KEY } from './constants';
+import { getDefaultDate } from './utils';
 export { CalendarSelection } from './CalendarSelection';
 export const CalendarSelectionConstants = {
     TRIGGER_OUT_MODE,
     SELECTION_KEY,
+    AUTO_UPDATE_TO_KEY,
+};
+export const CalendarSelectionUtils = {
+    getDefaultDate,
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledPopover: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
+export declare const StyledPopover: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/popover").PopoverProps & import("react").RefAttributes<unknown>> & {
     _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 }, any, {}, never>;
 export declare const StyledPopoverContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,5 +1,7 @@
-import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+// Libraries
 import styled from 'styled-components';
+// Components
+import { Popover } from '@antscorp/antsomi-ui/es/components/atoms/Popover';
 export const StyledPopover = styled(Popover) `
   font-size: 12px;
 `;

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

@@ -29,7 +29,7 @@ export declare const getDefaultDate: () => {
 export declare const getRangeValue: ({ rangeInfo, currentRangeValue, limitNumOfDays, }: {
     rangeInfo: RangeInfo;
     currentRangeValue: RangeValue[];
-    limitNumOfDays?: number | undefined;
+    limitNumOfDays?: number;
 }) => RangeValue[];
 export declare const getRangeValueSelctedTitle: (rangeValue: RangeValue[], options?: {
     formatStart?: string;
@@ -44,7 +44,7 @@ export declare const combineCurrentValue: (state: ReducerState) => {
 };
 export declare const genTriggerOut: ({ mode, id, }: {
     mode: ReducerState['triggerOut']['mode'];
-    id?: number | undefined;
+    id?: number;
 }) => {
     mode: "auto" | "manual";
     id: number;

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

@@ -7,7 +7,7 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import { AUTO_UPDATE_TO_KEY, DEFAULT_NUM_UP_TO, MAP_TITLE, RANGE_LIMIT, SELECTION_KEY, } from './constants';
 import { last } from 'lodash';
-import { asssertCannotReach } from '@antscorp/antsomi-ui/es/utils/common';
+import { asssertCannotReach } from '@antscorp/antsomi-ui/es/utils';
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(isoWeek);

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;
+    }
+  }
+`;