@antscorp/antsomi-ui 1.3.5-beta.7 → 1.3.5-beta.71

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

@@ -0,0 +1,108 @@
+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';
+import { RangePicker } from '../RangePicker';
+import { useCalendarSelectionContext } from '../../hooks';
+import dayjs from 'dayjs';
+import isBetween from 'dayjs/plugin/isBetween';
+import { AutoUpdateTo } from '../AutoUpdateTo';
+import { updateRangeValue } from '../../actions';
+import { CalendarContainerStyled, StyledCellDate, StyledCustomPickerRoot } from './styled';
+import { ConfigProvider } from 'antd';
+import { interpolateHsl } from 'd3-interpolate';
+import { isEmpty } from 'lodash';
+dayjs.extend(isBetween);
+const generateRangeInputLabel = (idx, label) => {
+    if (label)
+        return label;
+    if (idx === 0)
+        return 'custom';
+    return `custom compare${idx > 1 ? ` ${idx}}` : ''}`;
+};
+export const CustomPicker = props => {
+    const rest = __rest(props, []);
+    const popupContainer = useRef(null);
+    const { state, action } = useCalendarSelectionContext();
+    const { rangeValue } = state.value.current;
+    const [activeRangeIdx, setActiveRangeIdx] = useState(null);
+    useEffect(() => {
+        if (rangeValue.length > 0) {
+            setActiveRangeIdx(0);
+        }
+    }, [rangeValue.length]);
+    const handleCalendarChange = (start, end) => {
+        if (!start || !end || activeRangeIdx === null)
+            return;
+        const replacedRange = rangeValue[activeRangeIdx];
+        const updatedRangeValue = [...rangeValue];
+        updatedRangeValue.splice(activeRangeIdx, 1, Object.assign(Object.assign({}, replacedRange), { start,
+            end }));
+        action.dispatch(updateRangeValue(updatedRangeValue, { isManual: true }));
+    };
+    const renderCellDate = useCallback((date, originNode) => {
+        const colors = rangeValue.reduce((acc, cur) => {
+            if (date.isBetween(cur.start, cur.end, 'd', '[]') && cur.color) {
+                acc.push(cur.color);
+            }
+            return acc;
+        }, []);
+        if (isEmpty(colors))
+            return originNode;
+        const cellBgColor = new TinyColor(colors.length > 1
+            ? colors.reduce((acc, color) => interpolateHsl(acc, color)(0.5), colors[0])
+            : colors[0]);
+        return React.createElement(StyledCellDate, { rangeColor: cellBgColor }, originNode);
+    }, [rangeValue]);
+    return (React.createElement(StyledCustomPickerRoot, null,
+        React.createElement("div", { className: "range-inputs" }, rangeValue.map((range, rangeIdx) => (React.createElement(ConfigProvider, { key: rangeIdx, theme: {
+                components: {
+                    DatePicker: Object.assign({ cellHeight: 20 }, (range.color && {
+                        hoverBorderColor: range.color,
+                        colorBorder: range.color,
+                        colorPrimary: range.color,
+                        colorPrimaryActive: range.color,
+                        cellActiveWithRangeBg: new TinyColor(range.color).lighten(40).toHexString(),
+                    })),
+                },
+            } },
+            React.createElement("div", { className: "range-input" },
+                React.createElement("div", { className: "range-input-label" }, generateRangeInputLabel(rangeIdx, range.label)),
+                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;
+                    }, cellRender: (current, info) => {
+                        if (typeof current === 'number' || info.type !== 'date') {
+                            return info.originNode;
+                        }
+                        return renderCellDate(current, info.originNode);
+                    }, onCalendarChange: value => {
+                        var _a, _b;
+                        let start = '';
+                        let end = '';
+                        const valueFirst = dayjs((_a = value === null || value === void 0 ? void 0 : value.at(0)) === null || _a === void 0 ? void 0 : _a.toDate());
+                        const valueSecond = dayjs((_b = value === null || value === void 0 ? void 0 : value.at(1)) === null || _b === void 0 ? void 0 : _b.toDate());
+                        if (valueFirst.isBefore(valueSecond)) {
+                            start = valueFirst.toISOString();
+                            end = valueSecond.toISOString();
+                        }
+                        else {
+                            start = valueSecond.toISOString();
+                            end = valueFirst.toISOString();
+                        }
+                        handleCalendarChange(start, end);
+                    } }))))))),
+        React.createElement(AutoUpdateTo, null),
+        React.createElement(CalendarContainerStyled, { className: "calendar-container", ref: popupContainer })));
+};

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { TinyColor } from '@ctrl/tinycolor';
+export declare const StyledCellDate: import("styled-components").StyledComponent<"div", any, {
+    rangeColor: TinyColor;
+}, never>;
+export declare const StyledCustomPickerRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CalendarContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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/CustomPicker/types.js

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

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>;