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

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

@@ -0,0 +1,152 @@
+import styled from 'styled-components';
+export const StyledCellDate = styled.div `
+  --cellTextColor: ${p => (p.rangeColor.isLight() ? '#000' : '#fff')};
+  --cellBgColor: ${p => p.rangeColor.lighten(40).toHexString()};
+  --cellHoverBgColor: ${p => p.rangeColor.lighten(30).toHexString()};
+  --rangeColor: ${p => p.rangeColor.toHexString()};
+
+  position: relative;
+
+  &:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    content: '';
+  }
+`;
+export const StyledCustomPickerRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 12px;
+
+  .range-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .range-input {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+  }
+
+  .custom-label,
+  .range-inputs .range-input-label {
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #838383;
+  }
+`;
+export const CalendarContainerStyled = styled.div `
+  /* Variables */
+  --cellHeight: 28px;
+  --cellWidth: 28px;
+  --colorToDay: rgb(211, 211, 211);
+  --colorSelected: rgb(0, 94, 184);
+  --colorInRange: rgb(216, 234, 252);
+
+  position: relative;
+
+  .antsomi-picker-dropdown {
+    position: relative;
+    top: 0 !important;
+    left: 0 !important;
+    box-shadow: none;
+    padding: 0;
+
+    .antsomi-picker-panel-container {
+      box-shadow: none;
+    }
+    .antsomi-picker-panels {
+      display: inline-flex;
+      flex-direction: column;
+    }
+
+    /* 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/CustomPicker/types.d.ts

@@ -0,0 +1 @@
+export type CustomPickerProps = {};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Footer: () => React.JSX.Element;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
+import { useCalendarSelectionContext } from '../../hooks';
+import { apply, togglePopover } from '../../actions';
+import { StyledFooterRoot } from './styled';
+export const Footer = () => {
+    const { action } = useCalendarSelectionContext();
+    return (React.createElement(StyledFooterRoot, null,
+        React.createElement(Button, { onClick: () => action.dispatch(apply()), type: "primary" }, "Apply"),
+        React.createElement(Button, { onClick: () => action.dispatch(togglePopover()) }, "Cancel")));
+};

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

@@ -0,0 +1 @@
+export * from './Footer';

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

@@ -0,0 +1 @@
+export * from './Footer';

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

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

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+export const StyledFooterRoot = styled.div `
+  display: flex;
+  gap: 8px;
+  padding: 8px 12px;
+`;

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

@@ -0,0 +1,5 @@
+import { DatePicker } from 'src/components/molecules';
+import React, { ComponentProps } from 'react';
+type RangePickerProps = {} & ComponentProps<typeof DatePicker.RangePicker>;
+export declare const RangePicker: React.FC<RangePickerProps>;
+export {};

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

@@ -0,0 +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 })));

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

@@ -0,0 +1 @@
+export * from './RangePicker';

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

@@ -0,0 +1 @@
+export * from './RangePicker';

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

@@ -0,0 +1,5 @@
+export declare const StyledRangePicker: import("styled-components").StyledComponent<import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<import("antd/es/date-picker/generatePicker").RangePickerProps<import("dayjs").Dayjs> & {
+    dropdownClassName?: string | undefined;
+    popupClassName?: string | undefined;
+    rootClassName?: string | undefined;
+}, unknown>, any, {}, never>;

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

@@ -0,0 +1,13 @@
+import { DatePicker } from '@antscorp/antsomi-ui/es/components/molecules';
+import styled from 'styled-components';
+const { RangePicker } = DatePicker;
+export const StyledRangePicker = styled(RangePicker) `
+  font-size: 12px;
+  padding-right: 8px;
+
+  .ant-picker-input {
+    input {
+      width: 80px;
+    }
+  }
+`;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ListRangeSelectionProps } from './types';
+export declare const RangeSelectOptions: React.FC<ListRangeSelectionProps>;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { RANGE_SELECTION_OPTIONS, RANGE_TIME, SELECTION_KEY } from '../../constants';
+import { Divider } from '@antscorp/antsomi-ui/es/components/atoms';
+import { List } from 'antd';
+import { NumOfDaysRanges, Option } from './components';
+import { RangeSelectOptionsRoot } from './styled';
+const customOption = RANGE_SELECTION_OPTIONS[SELECTION_KEY.custom];
+const baseOptions = RANGE_TIME.map(key => {
+    var _a;
+    const option = RANGE_SELECTION_OPTIONS[key];
+    return {
+        key,
+        type: key,
+        label: option.label.trim(),
+        options: ((_a = option.options) === null || _a === void 0 ? void 0 : _a.map(i => (Object.assign(Object.assign({}, i), { type: i.key })))) || [],
+    };
+});
+export const RangeSelectOptions = () => (React.createElement(RangeSelectOptionsRoot, null,
+    React.createElement(List, { dataSource: [customOption], renderItem: item => React.createElement(Option, { type: item.key, label: item.label }) }),
+    React.createElement(Divider, { style: { marginTop: 4, marginBottom: 4 } }),
+    React.createElement(List, { dataSource: baseOptions, renderItem: item => React.createElement(Option, { type: item.key, label: item.label, options: item.options }) }),
+    React.createElement(Divider, { style: { marginTop: 4, marginBottom: 4 } }),
+    React.createElement(NumOfDaysRanges, null)));

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NumOfDaysRanges: () => React.JSX.Element;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { DEFAULT_NUM_UP_TO, RANGE_SELECTION_OPTIONS, SELECTION_KEY } from '../../../../constants';
+import { Option } from '../Option';
+import { useCalendarSelectionContext } from '../../../../hooks';
+import { updateRangeInfo } from '../../../../actions';
+import { InputNumber } from '@antscorp/antsomi-ui/es/components/atoms';
+import { List } from 'antd';
+const numbericOptions = [
+    RANGE_SELECTION_OPTIONS[SELECTION_KEY.days_up_to_today],
+    RANGE_SELECTION_OPTIONS[SELECTION_KEY.days_up_to_yesterday],
+].map(i => (Object.assign(Object.assign({}, i), { type: i.key })));
+export const NumOfDaysRanges = () => {
+    const { state, action } = useCalendarSelectionContext();
+    const { rangeInfo } = state.value.current;
+    let upToDaysRangeInfo = null;
+    if (rangeInfo.type === SELECTION_KEY.days_up_to_yesterday ||
+        rangeInfo.type === SELECTION_KEY.days_up_to_today) {
+        upToDaysRangeInfo = rangeInfo;
+    }
+    const handleChangeNumOfDays = (value, rangeType) => {
+        if (!upToDaysRangeInfo || upToDaysRangeInfo.type !== rangeType)
+            return;
+        action.dispatch(updateRangeInfo({
+            numOfDays: value,
+        }));
+    };
+    const renderInput = (rangeType) => {
+        let value = DEFAULT_NUM_UP_TO;
+        if (rangeType === (upToDaysRangeInfo === null || upToDaysRangeInfo === void 0 ? void 0 : upToDaysRangeInfo.type)) {
+            value = upToDaysRangeInfo.numOfDays;
+        }
+        return (React.createElement(InputNumber, { onChange: value => {
+                if (typeof value === 'number') {
+                    handleChangeNumOfDays(value, rangeType);
+                }
+            }, readOnly: rangeType !== (upToDaysRangeInfo === null || upToDaysRangeInfo === void 0 ? void 0 : upToDaysRangeInfo.type), size: "small", type: "number", style: { width: 60 }, min: 1, step: 1, precision: 0, value: value }));
+    };
+    return (React.createElement(List, { className: "ants-text-normal", dataSource: numbericOptions, renderItem: item => (React.createElement(Option, { type: item.key, label: React.createElement("div", { className: "ants-flex ants-gap-2 ants-items-center" },
+                renderInput(item.type),
+                item.label) })) }));
+};

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

@@ -0,0 +1 @@
+export * from './NumOfDaysRanges';

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

@@ -0,0 +1 @@
+export * from './NumOfDaysRanges';

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

@@ -0,0 +1,11 @@
+import React from 'react';
+type ItemProps = {
+    type: string;
+    label?: React.ReactNode;
+    options?: {
+        type: string;
+        label: React.ReactNode;
+    }[];
+};
+export declare const Option: React.FC<ItemProps>;
+export {};

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

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react';
+import Icon from '@antscorp/icons';
+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';
+export const Option = props => {
+    const itemRef = useRef(null);
+    const { label = '', options = [], type } = props;
+    const { state, action } = useCalendarSelectionContext();
+    const { rangeInfo } = state.value.current;
+    const selectedRangeType = rangeInfoToStringType(rangeInfo);
+    const optionsTypes = options.map(o => o.type);
+    const hasSubOptionActive = optionsTypes.includes(selectedRangeType);
+    const isActive = selectedRangeType === type || hasSubOptionActive;
+    const withDropdown = options.length > 0;
+    const handleClickOption = (rangeType) => {
+        if (rangeType !== selectedRangeType) {
+            action.dispatch(changeRangeType(rangeType));
+        }
+    };
+    const content = (React.createElement(List.Item, { ref: itemRef, className: classNames({ active: isActive }), onClick: () => {
+            if (!withDropdown) {
+                handleClickOption(type);
+            }
+        } },
+        React.createElement("div", { className: classNames({
+                'ants-font-bold': isActive,
+            }) }, label),
+        withDropdown && (React.createElement(Icon, { style: {
+                fontSize: 8,
+            }, type: "icon-ants-angle-right" }))));
+    if (withDropdown) {
+        return (React.createElement(Popover, { placement: "rightTop", overlayClassName: "arrow-hidden", overlayInnerStyle: { padding: 0 }, arrow: false, content: React.createElement(StyledMenu, { selectedKeys: [selectedRangeType], items: options.map(o => (Object.assign(Object.assign({}, o), { key: o.type, onClick: () => handleClickOption(o.type) }))) }), destroyTooltipOnHide: true }, content));
+    }
+    return content;
+};

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

@@ -0,0 +1 @@
+export * from './Option';

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

@@ -0,0 +1 @@
+export * from './Option';

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

@@ -0,0 +1 @@
+export declare const StyledMenu: any;

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

@@ -0,0 +1,29 @@
+import { Menu } from 'antd';
+import styled from 'styled-components';
+export 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;
+        }
+      }
+    }
+  }
+`;

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

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

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

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

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

@@ -0,0 +1 @@
+export * from './RangeSelectOptions';

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

@@ -0,0 +1 @@
+export * from './RangeSelectOptions';

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

@@ -0,0 +1,3 @@
+import { List } from 'antd';
+export declare const StyledList: import("styled-components").StyledComponent<typeof List, any, {}, never>;
+export declare const RangeSelectOptionsRoot: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { List } from 'antd';
+export const StyledList = styled(List) ``;
+export const RangeSelectOptionsRoot = styled.div `
+  .antsomi-list-items {
+    font-size: inherit;
+
+    .antsomi-list-item {
+      border: none;
+      padding: 6px 12px;
+      cursor: pointer;
+      position: relative;
+
+      &.active {
+        background-color: #d8eafc;
+        font-weight: bold;
+
+        &:after {
+          position: absolute;
+          content: '';
+          width: 4px;
+          height: 100%;
+          left: 0;
+          top: 0;
+          background-color: #005fb8;
+        }
+      }
+
+      &:hover:not(.active) {
+        background-color: #f4f6f8;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1 @@
+export type ListRangeSelectionProps = {};

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export type TimeRangeDisplayProps = {
+    showType?: boolean;
+    formatStart?: string;
+    formatEnd?: string;
+    operator?: string;
+};
+export declare const TimeRangeDisplay: React.FC<TimeRangeDisplayProps>;

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

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cls from 'clsx';
+import React, { forwardRef, useEffect, useState } 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 });
+    };
+    const rangeSelectedTitle = getRangeTypeSelectedTitle(rangeInfo);
+    const rangeValueTitles = getRangeValueSelctedTitle(rangeValue, {
+        formatStart,
+        formatEnd,
+        operator,
+    });
+    // console.log({ rangeSelectedTitle, rangeValueTitles });
+    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 } }))),
+            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)))))))));
+});

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

@@ -0,0 +1,2 @@
+export { TimeRangeDisplay } from './TimeRangeDisplay';
+export { StyledBtnDisplayWrapper } from './styled';

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

@@ -0,0 +1,2 @@
+export { TimeRangeDisplay } from './TimeRangeDisplay';
+export { StyledBtnDisplayWrapper } from './styled';

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

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

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

@@ -0,0 +1,70 @@
+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;
+
+  .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);
+  }
+
+  .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);
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,5 @@
+export * from './CustomPicker';
+export * from './RangeSelectOptions';
+export * from './RangePicker';
+export * from './TimeRangeDisplay';
+export * from './Footer';

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

@@ -0,0 +1,5 @@
+export * from './CustomPicker';
+export * from './RangeSelectOptions';
+export * from './RangePicker';
+export * from './TimeRangeDisplay';
+export * from './Footer';