@soul-refiner/design-system 0.1.27 → 0.1.29

package/dist/components/iconography/icon/icon.stories.js

@@ -0,0 +1,113 @@
+/* eslint-disable */
+import React from 'react';
+import { COLORS } from 'common';
+import { Box, H, P } from 'components';
+// does not recognize index file in subdirectories
+// @ts-ignore
+import * as AudioVideoIcons from 'icons/audio_video';
+// @ts-ignore
+import * as ArrowIcons from 'icons/arrow';
+// @ts-ignore
+import * as BasicIcons from 'icons/basic';
+// @ts-ignore
+import * as DataIcons from 'icons/data';
+// @ts-ignore
+import * as EmailIcons from 'icons/email';
+// @ts-ignore
+import * as FileIcons from 'icons/file';
+// @ts-ignore
+import * as FinanceIcons from 'icons/finance';
+// @ts-ignore
+import * as LayoutIcons from 'icons/layout';
+// @ts-ignore
+import * as MapIcons from 'icons/maps';
+// @ts-ignore
+import * as MessageIcons from 'icons/message';
+// @ts-ignore
+import * as MiscIcons from 'icons/misc';
+// @ts-ignore
+import * as NotificationIcons from 'icons/notifications';
+// @ts-ignore
+import * as PeopleIcons from 'icons/people';
+// @ts-ignore
+import * as PhoneIcons from 'icons/phone';
+// @ts-ignore
+import * as SecurityIcons from 'icons/security';
+// @ts-ignore
+import * as ShoppingIcons from 'icons/shopping';
+// @ts-ignore
+import * as SymbolIcons from 'icons/symbols';
+// @ts-ignore
+import * as TechnologyIcons from 'icons/technology';
+// @ts-ignore
+import * as TextIcons from 'icons/text';
+// @ts-ignore
+import * as TimeIcons from 'icons/time';
+const meta = {
+    title: 'Iconography/Icons',
+    argTypes: {
+        color: {
+            options: COLORS,
+            control: 'select',
+        },
+        size: {
+            options: [16, 20, 24],
+            control: 'select',
+        },
+    },
+    args: {
+        size: 20,
+        color: 'grey-4',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+const StoryComponent = (iconSet, title) => (args) => (React.createElement(React.Fragment, null,
+    React.createElement(H.One, { "$textAlign": "center", "$semiBold": true }, title),
+    React.createElement(Box, { "$align": "center", "$gap": 32, "$flow": "wrap", "$justify": "center", "$margin": "medium-large", sx: "max-width: 850px;" }, Object.entries(iconSet).map(([name, Item], index) => (React.createElement(Box, { key: index.toString(36), "$dir": "column", "$gap": 8, "$justify": "center", "$align": "center", "$flex": 1 },
+        React.createElement(Item, { ...args }),
+        React.createElement(P, { as: "h4", "$textClampLines": 3, "$fontSize": 16, "$textAlign": "center" }, name.replaceAll(/[A-Z]/g, (match) => {
+            return ` ${match}`;
+        }))))))));
+const BasicIconsStory = StoryComponent(BasicIcons, 'Basic Icons');
+export const Basic = BasicIconsStory.bind({});
+const EmailIconsStory = StoryComponent(EmailIcons, 'Email Icons');
+export const Email = EmailIconsStory.bind({});
+const PeopleIconsStory = StoryComponent(PeopleIcons, 'People Icons');
+export const People = PeopleIconsStory.bind({});
+const SecurityIconsStory = StoryComponent(SecurityIcons, 'Security Icons');
+export const Security = SecurityIconsStory.bind({});
+const NotificationsIconsStory = StoryComponent(NotificationIcons, 'Notification Icons');
+export const Notifications = NotificationsIconsStory.bind({});
+const TimeIconsStory = StoryComponent(TimeIcons, 'Time Icons');
+export const Time = TimeIconsStory.bind({});
+const MapIconsStory = StoryComponent(MapIcons, 'Map Icons');
+export const Maps = MapIconsStory.bind({});
+const SymbolIconsStory = StoryComponent(SymbolIcons, 'Symbol Icons');
+export const Symbols = SymbolIconsStory.bind({});
+const FinanceIconsStory = StoryComponent(FinanceIcons, 'Finance Icons');
+export const Finance = FinanceIconsStory.bind({});
+const MessageIconsStory = StoryComponent(MessageIcons, 'Message Icons');
+export const Message = MessageIconsStory.bind({});
+const LayoutStory = StoryComponent(LayoutIcons, 'Layout Icons');
+export const Layout = LayoutStory.bind({});
+const DataIconsStory = StoryComponent(DataIcons, 'Data Icons');
+export const Data = DataIconsStory.bind({});
+const FileIconsStory = StoryComponent(FileIcons, 'File Icons');
+export const File = FileIconsStory.bind({});
+const ArrowIconsStory = StoryComponent(ArrowIcons, 'Arrow Icons');
+export const Arrow = ArrowIconsStory.bind({});
+const MiscIconsStory = StoryComponent(MiscIcons, 'Misc Icons');
+export const Misc = MiscIconsStory.bind({});
+const TextIconsStory = StoryComponent(TextIcons, 'Text Icons');
+export const Text = TextIconsStory.bind({});
+const ShoppingIconsStory = StoryComponent(ShoppingIcons, 'Shopping Icons');
+export const Shopping = ShoppingIconsStory.bind({});
+const TechnologyIconsStory = StoryComponent(TechnologyIcons, 'Technology Icons');
+export const Technology = TechnologyIconsStory.bind({});
+const AudioVideoIconsStory = StoryComponent(AudioVideoIcons, 'Audio-Video Icons');
+export const VideoAudio = AudioVideoIconsStory.bind({});
+const PhoneIconsStory = StoryComponent(PhoneIcons, 'Phone Icons');
+export const Phone = PhoneIconsStory.bind({});
+export default meta;

package/dist/components/iconography/icon/index.js

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

package/dist/components/iconography/index.js

@@ -0,0 +1,2 @@
+export { Avatar } from './avatar';
+export { Icon } from './icon';

package/dist/components/index.js

@@ -0,0 +1,9 @@
+export * from './actions';
+export * from './atoms';
+export * from './card';
+export * from './editor';
+export * from './feedback';
+export * from './iconography';
+export * from './input';
+export * from './navigation';
+export * from './surfaces';

package/dist/components/input/checkbox/checkbox.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { Checkmark } from 'icons';
+export const Checkbox = ({ disabled, selected, ...rest }) => {
+    return (React.createElement(Box, { "$align": "center", "$disabled": !!disabled, "$display": "flex", "$justify": "center", "$selected": selected, ...rest }, selected && React.createElement(Checkmark, { color: "white" })));
+};
+const Box = styled.div `
+  display: flex;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  ${({ $selected }) => $selected
+    ? `background-color: var(--color-primary-blue-2);
+    border: 1px solid var(--color-primary-blue-2);`
+    : 'border: 1px solid var(--color-grey-8);'}
+  ${Styles.flex}
+`;

package/dist/components/input/checkbox/checkbox.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Checkbox } from './checkbox';
+const meta = {
+    title: 'Input/Checkbox',
+    parameters: {
+        layout: 'centered',
+    },
+};
+// eslint-disable-next-line
+const Story = ({ selected: _, ...args }) => {
+    const [selected, setSelected] = React.useState(false);
+    const handleSelected = () => setSelected((prev) => !prev);
+    return React.createElement(Checkbox, { selected: selected, onClick: handleSelected, ...args });
+};
+export const Default = Story.bind({});
+Default.args = {
+    disabled: false,
+};
+export default meta;

package/dist/components/input/checkbox/index.js

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

package/dist/components/input/date/date.js

@@ -0,0 +1,516 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MONTHS, WEEKDAYS } from 'common';
+import { Button, P } from 'components';
+import { ChevronLeft, ChevronRight, ArrowRight } from 'icons';
+import { buildCalendar, getMonthDays, zeroPad } from 'utils';
+export const DatePicker = ({ endDate, label, onSelect: parentOnSelect, startDate, }) => {
+    const today = new Date();
+    today.setHours(0);
+    today.setMinutes(0);
+    today.setSeconds(0);
+    today.setMilliseconds(0);
+    const firstOfMonth = new Date(today);
+    firstOfMonth.setDate(1);
+    const thisMonth = firstOfMonth.getMonth() + 1;
+    const thisYear = firstOfMonth.getFullYear();
+    const isSingleDate = !endDate;
+    const pickerRef = React.useRef(null);
+    const [show, setShow] = React.useState(false);
+    const [displayDate, setDisplayDate] = React.useState(() => endDate?.toDateString() ?? startDate.toDateString());
+    const [componentStartDate, setComponentStartDate] = React.useState(() => startDate.toDateString());
+    const [componentEndDate, setComponentEndDate] = React.useState(() => endDate?.toDateString() ?? startDate.toDateString());
+    const [firstClick, setFirstClick] = React.useState(true);
+    React.useEffect(() => {
+        setComponentStartDate(startDate.toDateString());
+    }, [startDate]);
+    React.useEffect(() => {
+        setComponentEndDate((endDate ?? new Date())?.toDateString());
+    }, [endDate]);
+    React.useEffect(() => {
+        if (!isSingleDate &&
+            new Date(componentStartDate).getTime() >
+                new Date(componentEndDate).getTime()) {
+            const tempStart = componentStartDate;
+            setComponentStartDate(componentEndDate);
+            setComponentEndDate(tempStart);
+        }
+    }, [componentEndDate, componentStartDate]);
+    const handleShow = () => setShow((prev) => !prev);
+    const handleBlur = (event) => {
+        if (pickerRef?.current &&
+            !pickerRef?.current?.contains(event.relatedTarget)) {
+            setShow(false);
+        }
+    };
+    const handlePreviousMonth = () => {
+        setDisplayDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() - 1);
+            return newDate.toDateString();
+        });
+    };
+    const handleNextMonth = () => {
+        setDisplayDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() + 1);
+            return newDate.toDateString();
+        });
+    };
+    const handleFirstClick = () => !isSingleDate && setFirstClick((prev) => !prev);
+    const onSelect = ({ type, value, }) => {
+        if (type === 'start') {
+            setComponentStartDate(value.toDateString());
+        }
+        else {
+            setComponentEndDate(value.toDateString());
+        }
+    };
+    const handleClick = (event) => {
+        handleFirstClick();
+        const target = event.target;
+        const type = firstClick ? 'start' : 'end';
+        const day = target.getAttribute('data-day');
+        const month = target.getAttribute('data-month');
+        const year = target.getAttribute('data-year');
+        onSelect({ type, value: new Date(`${month}-${day}-${year}`) });
+    };
+    const handleApply = () => {
+        parentOnSelect({ type: 'start', value: new Date(componentStartDate) });
+        !isSingleDate &&
+            parentOnSelect({ type: 'end', value: new Date(componentEndDate) });
+        !isSingleDate && setFirstClick(true);
+        setShow(false);
+    };
+    const handleCancel = () => {
+        setComponentStartDate(startDate.toDateString());
+        setComponentEndDate((endDate ?? new Date())?.toDateString());
+        setFirstClick(true);
+        setShow(false);
+    };
+    const handleSetToday = () => {
+        onSelect({ type: 'start', value: today });
+        onSelect({ type: 'end', value: today });
+        setDisplayDate(today.toDateString());
+        setFirstClick(true);
+    };
+    const handleSetYesterday = () => {
+        const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+        onSelect({ type: 'start', value: yesterday });
+        onSelect({ type: 'end', value: yesterday });
+        setDisplayDate(today.toDateString());
+        setFirstClick(true);
+    };
+    const handleLastSevenDays = () => {
+        const lastWeekDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
+        onSelect({ type: 'start', value: lastWeekDate });
+        onSelect({ type: 'end', value: today });
+        setDisplayDate(today.toDateString());
+        setFirstClick(true);
+    };
+    const handleLastThirtyDays = () => {
+        const lastMonthDate = new Date(today);
+        lastMonthDate.setMonth(thisMonth - 2);
+        onSelect({ type: 'start', value: lastMonthDate });
+        onSelect({ type: 'end', value: today });
+        setDisplayDate(today.toDateString());
+        setFirstClick(true);
+    };
+    const handleThisMonth = () => {
+        onSelect({ type: 'start', value: firstOfMonth });
+        onSelect({
+            type: 'end',
+            value: new Date(firstOfMonth.getFullYear(), firstOfMonth.getMonth(), getMonthDays()),
+        });
+        setDisplayDate(today.toDateString());
+        setFirstClick(true);
+    };
+    const handleLastMonth = () => {
+        const lastMonthDate = new Date(firstOfMonth);
+        lastMonthDate.setMonth(thisMonth - 2);
+        onSelect({ type: 'start', value: lastMonthDate });
+        onSelect({
+            type: 'end',
+            value: new Date(lastMonthDate.getFullYear(), lastMonthDate.getMonth(), getMonthDays(lastMonthDate.getMonth() + 1)),
+        });
+        setDisplayDate(lastMonthDate.toDateString());
+        setFirstClick(true);
+    };
+    const handleLastYear = () => {
+        const lastYearDate = new Date(today);
+        lastYearDate.setFullYear(thisYear - 1);
+        onSelect({ type: 'start', value: lastYearDate });
+        onSelect({ type: 'end', value: today });
+        setDisplayDate(today.toDateString());
+        setFirstClick(true);
+    };
+    const calendar = buildCalendar(new Date(displayDate).getMonth() + 1, new Date(displayDate).getFullYear());
+    const minRange = new Date(componentStartDate).getTime();
+    const maxRange = new Date(componentEndDate).getTime();
+    const displayDateObj = new Date(displayDate);
+    const displayFirstOfMonth = new Date(displayDateObj);
+    displayFirstOfMonth.setDate(1);
+    const displayLastOfMonth = new Date(displayDateObj);
+    displayLastOfMonth.setDate(getMonthDays(displayDateObj.getMonth() + 1));
+    return (React.createElement(Wrapper, { onBlurCapture: handleBlur, ref: pickerRef, tabIndex: 0 },
+        React.createElement(Trigger, { onClick: handleShow },
+            label && (React.createElement(React.Fragment, null,
+                label,
+                ' | ')),
+            React.createElement("span", null, startDate.toLocaleDateString('en-US').replaceAll('/', '-')),
+            !!endDate && startDate.toDateString() !== endDate?.toDateString() && (React.createElement(ArrowRight, { sx: "padding: 0px 8px; margin-bottom: -2px;" })),
+            startDate.toDateString() !== endDate?.toDateString() && (React.createElement("span", null, endDate?.toLocaleDateString('en-US').replaceAll('/', '-')))),
+        show && (React.createElement(DateSelector, null,
+            React.createElement(InnerWrapper, null,
+                !!endDate && (React.createElement(Left, null,
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleSetToday }, "Today"),
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleSetYesterday }, "Yesterday"),
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleLastSevenDays }, "Last 7 days"),
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleLastThirtyDays }, "Last 30 days"),
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleThisMonth }, "This month"),
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleLastMonth }, "Last month"),
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleLastYear }, "Last Year"))),
+                React.createElement("div", null,
+                    React.createElement(MonthBar, null,
+                        React.createElement(Arrow, { onClick: handlePreviousMonth },
+                            React.createElement(ChevronLeft, { size: 24 })),
+                        React.createElement(P, null, `${Object.values(MONTHS)[Math.max(0, Math.min(new Date(displayDate).getMonth(), 11))]} ${new Date(displayDate).getFullYear()}`),
+                        React.createElement(Arrow, { onClick: handleNextMonth },
+                            React.createElement(ChevronRight, { size: 24 }))),
+                    React.createElement(WeekdayWrapper, null, Object.values(WEEKDAYS).map((day) => (React.createElement(P, { key: day }, day)))),
+                    React.createElement(Calendar, null, calendar.map((week, index) => {
+                        return (React.createElement(Week, { key: 'week-' + index.toString(36) }, week.map((day, dayIndex) => {
+                            const isCurrMonth = day[1] !==
+                                zeroPad(new Date(displayDate).getMonth() + 1, 2);
+                            const dateObj = new Date(`${day[1]}-${day[2]}-${day[0]}`);
+                            const isToday = Math.abs(dateObj.getTime() - today.getTime()) < 0.5;
+                            const time = dateObj.toDateString();
+                            const isStartDate = time === componentStartDate;
+                            const isEndDate = !isSingleDate && time === componentEndDate;
+                            const between = !isSingleDate &&
+                                minRange <= dateObj.getTime() &&
+                                dateObj.getTime() <= maxRange &&
+                                !isStartDate &&
+                                !isEndDate;
+                            const isFirstOfMonth = displayFirstOfMonth.toDateString() === time;
+                            const isLastOfMonth = displayLastOfMonth.toDateString() === time;
+                            return (React.createElement(Day, { className: `${isToday ? 'today' : ''}${isCurrMonth ? ' not-current' : ''}${isStartDate ? ' start-date' : ''}${isEndDate ? ' end-date' : ''}${between ? ' between' : ''}${isFirstOfMonth ? ' first-of-month' : ''}${isLastOfMonth ? ' last-of-month' : ''}`.trim(), "data-day": day[2], "data-month": day[1], "data-year": day[0], key: 'day-' + dayIndex.toString(36), onClick: handleClick }, `${day[2]}`.startsWith('0')
+                                ? `${day[2]}`[1]
+                                : day[2]));
+                        })));
+                    })),
+                    React.createElement(BottomWrapper, null,
+                        React.createElement(Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
+                        React.createElement(Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
+};
+const Wrapper = styled.div `
+  position: relative;
+  width: fit-content;
+  font-family: Inter;
+`;
+const Trigger = styled.button `
+  padding: 12px 24px;
+  background-color: #ffffff;
+  border: 1px solid var(--color-grey-6);
+  border-radius: 24px;
+  color: var(--color-grey-3);
+  outline: none;
+  line-height: 100%;
+  font-family: Inter;
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
+
+  span {
+    line-height: 20px;
+    color: var(--color-blue-5);
+  }
+
+  &:hover {
+    background-color: var(--color-blue-5);
+    border-color: var(--color-blue-5);
+    color: #ffffff;
+    span {
+      color: #ffffff;
+    }
+  }
+
+  &:active {
+    background-color: var(--color-blue-3);
+    border-color: var(--color-blue-3);
+  }
+`;
+const DateSelector = styled.div `
+  transform: translateY(26px);
+  position: absolute;
+  z-index: 5;
+  background-color: #ffffff;
+  border-radius: 25px;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
+`;
+const InnerWrapper = styled.div `
+  display: flex;
+  gap: 31px;
+  padding: 30px;
+  position: relative;
+  border-radius: 25px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 24px;
+    height: 24px;
+    top: -12px;
+    left: 48px;
+    background-color: #ffffff;
+    transform: rotate(45deg);
+    box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
+  }
+`;
+const Left = styled.div `
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 24px;
+  align-items: flex-start;
+  width: max-content;
+  margin-bottom: 96px;
+  padding-right: 48px;
+  border-right: 1px solid var(--color-grey-8);
+  user-select: none;
+
+  button {
+    padding: 0px;
+
+    span {
+      font-size: 16px;
+      line-height: 24px;
+      color: var(--color-grey-5);
+      font-weight: 400;
+    }
+
+    &:hover {
+      span {
+        color: var(--color-primary-blue-2);
+      }
+    }
+  }
+`;
+const MonthBar = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  user-select: none;
+`;
+const Arrow = styled.button `
+  appearance: none;
+  border: none;
+  outline: none;
+  padding: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: transparent;
+
+  &:hover {
+    background-color: var(--color-primary-blue-2);
+    border-color: #ffffff;
+    svg {
+      fill: #ffffff;
+    }
+  }
+`;
+const WeekdayWrapper = styled.div `
+  display: flex;
+  gap: 32px;
+  user-select: none;
+`;
+const Calendar = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin: 32px 0px;
+  user-select: none;
+`;
+const Week = styled.div `
+  display: flex;
+  gap: 32px;
+  border-radius: 24px;
+`;
+const Day = styled.button `
+  outline: none;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-family: Inter;
+  font-size: 16px;
+  line-height: 24px;
+
+  &.today {
+    color: var(--color-primary-blue-2);
+    font-weight: 600;
+  }
+
+  &:hover:not(&[class~='start-date']):not(&[class~='end-date']) {
+    background-color: var(--color-primary-blue-4);
+    color: var(--color-primary-blue-1);
+  }
+
+  &[class~='not-current'] {
+    color: var(--color-grey-9);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &[class~='start-date'],
+  &[class~='end-date'] {
+    background-color: var(--color-primary-blue-2);
+    color: #ffffff;
+
+    &[class~='not-current'] {
+      background-color: var(--color-blue-9);
+    }
+  }
+
+  &[class~='start-date'] + [class~='end-date'] {
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -2;
+      height: 32px;
+      width: 64px;
+      background-color: var(--color-primary-blue-3);
+      right: 16px;
+      top: 0;
+    }
+
+    &[class~='not-current'] {
+      &::before {
+        background-color: var(--color-blue-10);
+      }
+    }
+  }
+
+  &[class~='not-current'] {
+    position: relative;
+    &[class~='end-date']:not(:first-of-type):not(.start-date) {
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: -2;
+        height: 32px;
+        width: 62px;
+        background-color: var(--color-blue-10);
+        right: 16px;
+        top: 0;
+      }
+    }
+  }
+
+  &[class~='first-of-month'] {
+    &[class~='end-date'] {
+      &::before {
+        background-color: var(--color-blue-10);
+      }
+    }
+  }
+
+  &[class~='between'] {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -2;
+      height: 32px;
+      width: 132px;
+      background-color: var(--color-primary-blue-3);
+      right: -48px;
+      top: 0;
+    }
+
+    &:first-of-type::before {
+      width: 80px;
+      border-radius: 24px 0px 0px 24px;
+    }
+
+    &:last-of-type::before {
+      width: 80px;
+      right: 0px;
+      border-radius: 0px 24px 24px 0px;
+    }
+
+    &[class~='not-current'] {
+      &::before {
+        background-color: var(--color-blue-10);
+      }
+    }
+
+    &[class~='first-of-month']:not(:first-of-type) {
+      &::before {
+        width: 32px;
+        border-top-left-radius: 24px;
+        border-bottom-left-radius: 24px;
+      }
+    }
+
+    &[class~='first-of-month']:not([class~='not-current']):not(
+        :first-of-type
+      ):not(:last-of-type) {
+      &::before {
+        width: 64px;
+        border-top-left-radius: 24px;
+        border-bottom-left-radius: 24px;
+        background-color: var(--color-blue-10);
+        right: 16px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        z-index: -2;
+        height: 32px;
+        width: 70px;
+        background-color: var(--color-primary-blue-3);
+        right: -32px;
+        top: 0;
+        border-top-left-radius: 24px;
+        border-bottom-left-radius: 24px;
+      }
+      &:last-of-type {
+        &::before {
+          width: 32px;
+        }
+      }
+    }
+
+    &[class~='last-of-month']:not(&[class~='not-current']) {
+      &::before {
+        z-index: -1;
+        border-radius: 0px 24px 24px 0px;
+        width: 80px;
+        right: 0px;
+      }
+      &:first-of-type {
+        &::before {
+          border-top-left-radius: 24px;
+          border-bottom-left-radius: 24px;
+          width: 32px;
+        }
+      }
+    }
+  }
+`;
+const BottomWrapper = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  gap: 18px;
+`;