@capillarytech/blaze-ui 6.0.1 → 6.0.4

package/CapEventCalendar/index.d.ts

@@ -1,81 +1,5 @@
-import PropTypes from 'prop-types';
-import './styles.scss';
-declare const CapEventCalendar: {
-    ({ calendarDate, events, popoverContent, onQuarterChange, selectedQuarter, calendarGridLineLabel, dayLabels, allQuartersLabel, monthLabels, todayTooltipProps, dashLineOffsetY, eventHeight, eventRowGap, textPadding, eventStartYOffset, minCanvasHeight, canvasFont, popoverPlacement, emptyState, emptyStateTitle, emptyStateDescription, emptyStateButtonLabel, onEmptyStateButtonClick, isButtonDisabled, }: {
-        calendarDate?: string;
-        events: any;
-        popoverContent: any;
-        onQuarterChange: any;
-        selectedQuarter: any;
-        calendarGridLineLabel: any;
-        dayLabels: any;
-        allQuartersLabel: any;
-        monthLabels: any;
-        todayTooltipProps: any;
-        dashLineOffsetY: any;
-        eventHeight: any;
-        eventRowGap: any;
-        textPadding: any;
-        eventStartYOffset: any;
-        minCanvasHeight: any;
-        canvasFont: any;
-        popoverPlacement: any;
-        emptyState: any;
-        emptyStateTitle: any;
-        emptyStateDescription: any;
-        emptyStateButtonLabel: any;
-        onEmptyStateButtonClick: any;
-        isButtonDisabled: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        calendarDate: PropTypes.Requireable<string>;
-        events: PropTypes.Requireable<any[]>;
-        popoverContent: PropTypes.Requireable<any>;
-        onQuarterChange: PropTypes.Requireable<(...args: any[]) => any>;
-        selectedQuarter: PropTypes.Requireable<string>;
-        calendarGridLineLabel: PropTypes.Requireable<string>;
-        dayLabels: PropTypes.Requireable<any[]>;
-        allQuartersLabel: PropTypes.Requireable<any[]>;
-        monthLabels: PropTypes.Requireable<any[]>;
-        todayTooltipProps: PropTypes.Requireable<object>;
-        dashLineOffsetY: PropTypes.Requireable<number>;
-        eventHeight: PropTypes.Requireable<number>;
-        eventRowGap: PropTypes.Requireable<number>;
-        textPadding: PropTypes.Requireable<number>;
-        eventStartYOffset: PropTypes.Requireable<number>;
-        minCanvasHeight: PropTypes.Requireable<number>;
-        canvasFont: PropTypes.Requireable<string>;
-        popoverPlacement: PropTypes.Requireable<string>;
-    };
-    defaultProps: {
-        popoverContent: {
-            ({ title }: {
-                title: any;
-            }): import("react/jsx-runtime").JSX.Element;
-            propTypes: {
-                title: PropTypes.Requireable<string>;
-            };
-        };
-        dashLineOffsetY: number;
-        eventHeight: number;
-        eventRowGap: number;
-        textPadding: number;
-        eventStartYOffset: number;
-        minCanvasHeight: number;
-        todayTooltipProps: {
-            title: string;
-        };
-        allQuartersLabel: string[];
-        dayLabels: string[];
-        monthLabels: string[];
-        canvasFont: string;
-        calendarGridLineLabel: string;
-        popoverPlacement: string;
-        emptyStateTitle: string;
-        emptyStateDescription: string;
-        emptyStateButtonLabel: string;
-        isButtonDisabled: boolean;
-    };
-};
-export default CapEventCalendar;
+import React from 'react';
+import type { CapEventCalendarProps } from './types';
+declare const _default: React.ComponentType<Omit<CapEventCalendarProps, "intl">>;
+export default _default;
 //# sourceMappingURL=index.d.ts.map

package/CapEventCalendar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapEventCalendar/index.tsx"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAenC,OAAO,eAAe,CAAC;AAcvB,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKrB,CAAC;AA2CF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapEventCalendar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkBnD,OAAO,KAAK,EAAE,qBAAqB,EAAoC,MAAM,SAAS,CAAC;;AAyMvF,wBAA4C"}

package/CapEventCalendar/index.js

@@ -1,49 +1,49 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import classNames from "classnames";
-import PropTypes from "prop-types";
 import { useState, useEffect } from "react";
+import { injectIntl } from "react-intl";
 import "../utils/dayjs.js";
 import EmptyStateIllustrationForPromos from "../assets/images/EmptyStateIllustrationForPromos.png.js";
 import CapIcon from "../CapIcon/index.js";
 import CapIllustration from "../CapIllustration/index.js";
+import CapLabelWithStatic from "../CapLabel/index.js";
 import CapRow from "../CapRow/index.js";
 import { FONT_SIZE_S, FONT_FAMILY } from "../styles/_variables.js";
 import CalendarCanvas from "./CalendarCanvas/index.js";
 import DayDropdown from "./components/DayDropdown/index.js";
 import MonthHeader from "./components/MonthHeader/index.js";
-import { QUARTERS, MONTH_LABELS, DAY_LABELS, QUARTER_LABELS } from "./constants.js";
-import './styles.css';/* empty css            */
+import { QUARTERS, QUARTER_LABELS, DAY_LABELS, MONTH_LABELS } from "./constants.js";
+import messages from "./messages.js";
+import styles from "./styles.module.scss.js";
 import { splitMonthsArrayToQuarterChunks, getMonthsForQuarter, formatDataToSuitCanvas, handleYearChange } from "./utils.js";
 import dayjs from "dayjs";
 const DefaultPopover = ({ title }) => /* @__PURE__ */ jsx("div", { children: title });
-DefaultPopover.propTypes = {
-  title: PropTypes.string
-};
 const CapEventCalendar = ({
+  intl: { formatMessage },
   calendarDate = dayjs().format(),
-  events,
-  popoverContent,
+  events = [],
+  popoverContent = DefaultPopover,
   onQuarterChange,
   selectedQuarter,
   calendarGridLineLabel,
-  dayLabels,
-  allQuartersLabel,
-  monthLabels,
+  dayLabels = DAY_LABELS,
+  allQuartersLabel = QUARTER_LABELS,
+  monthLabels = MONTH_LABELS,
   todayTooltipProps,
-  dashLineOffsetY,
-  eventHeight,
-  eventRowGap,
-  textPadding,
-  eventStartYOffset,
-  minCanvasHeight,
-  canvasFont,
-  popoverPlacement,
+  dashLineOffsetY = 20,
+  eventHeight = 24,
+  eventRowGap = 12,
+  textPadding = 12,
+  eventStartYOffset = 40,
+  minCanvasHeight = 0,
+  canvasFont = `normal ${FONT_SIZE_S} ${FONT_FAMILY}`,
+  popoverPlacement = "leftTop",
   emptyState,
   emptyStateTitle,
   emptyStateDescription,
   emptyStateButtonLabel,
   onEmptyStateButtonClick,
-  isButtonDisabled
+  isButtonDisabled = false
 }) => {
   const [carouselDate, setCarouselDate] = useState(calendarDate);
   const [quarter, setQuarter] = useState(
@@ -54,25 +54,27 @@ const CapEventCalendar = ({
   const [error, showError] = useState(false);
   const [dayGrid, setDayGrid] = useState(1);
   const [quarterMonths] = useState(splitMonthsArrayToQuarterChunks(monthLabels));
+  const resolvedCalendarGridLineLabel = calendarGridLineLabel || formatMessage(messages.calendarGridLineLabel);
+  const resolvedEmptyStateTitle = emptyStateTitle || formatMessage(messages.emptyStateTitle);
+  const resolvedEmptyStateDescription = emptyStateDescription || formatMessage(messages.emptyStateDescription);
+  const resolvedEmptyStateButtonLabel = emptyStateButtonLabel || formatMessage(messages.emptyStateButtonLabel);
+  const resolvedTodayTooltipProps = todayTooltipProps || {
+    title: formatMessage(messages.todayLabel)
+  };
   useEffect(() => {
     const _quarter = selectedQuarter ? QUARTERS[selectedQuarter] : quarter;
     setDisplayMonths(
       getMonthsForQuarter(_quarter, quarterMonths)
       //show months of the quarter
     );
-    setFormattedEvents(
-      formatDataToSuitCanvas(
-        events,
-        selectedQuarter ? QUARTERS[selectedQuarter] : quarter || dayjs().quarter()
-      )
-    );
+    setFormattedEvents(formatDataToSuitCanvas(events));
   }, [events]);
   const handleCarouselClick = (currentQuarter, date, increment, referenceDate) => {
     if (increment) showError(false);
     const values = handleYearChange(currentQuarter, date, increment, referenceDate);
     if (values) {
       setCarouselDate(values[1]);
-      onQuarterChange(values[0], dayjs(values[1]));
+      onQuarterChange == null ? void 0 : onQuarterChange(values[0], dayjs(values[1]));
       if (values[2]) showError(true);
       return values[0];
     }
@@ -94,26 +96,30 @@ const CapEventCalendar = ({
   const onClickQuarterRight = () => handleQuarterSelection(false);
   const getIllustrationProps = (hasAccess) => ({
     illustrationImage: EmptyStateIllustrationForPromos,
-    title: emptyStateTitle,
+    title: resolvedEmptyStateTitle,
     hasAccess,
-    description: emptyStateDescription,
+    description: resolvedEmptyStateDescription,
     descriptionPosition: "bottom",
-    buttonLabel: emptyStateButtonLabel,
+    buttonLabel: resolvedEmptyStateButtonLabel,
     //prevents the required warning in the console
-    onClick: onEmptyStateButtonClick,
+    onClick: onEmptyStateButtonClick ?? (() => {
+    }),
     //prevents the required warning in the console
     disabled: isButtonDisabled
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "event-calendar__header", children: [
-      /* @__PURE__ */ jsxs("div", { className: "event-calendar__header__left", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles["event-calendar__header"], children: [
+      /* @__PURE__ */ jsxs("div", { className: styles["event-calendar__header__left"], children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx(
             CapIcon,
             {
               type: "chevron-left",
               style: { cursor: "pointer" },
-              className: classNames({ "disable-left": error, "carousel-icon": true }),
+              className: classNames({
+                [styles["disable-left"]]: error,
+                [styles["carousel-icon"]]: true
+              }),
               onClick: onClickQuarterLeft,
               "data-testid": "event-calander-left-chevron"
             }
@@ -122,30 +128,38 @@ const CapEventCalendar = ({
             CapIcon,
             {
               type: "chevron-right",
-              className: "carousel-icon",
+              className: styles["carousel-icon"],
               onClick: onClickQuarterRight,
               "data-testid": "event-calander-right-chevron"
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "quarter-label", children: [
-          /* @__PURE__ */ jsx("span", { children: allQuartersLabel[quarter - 1] }),
-          dayjs(carouselDate).year()
+        /* @__PURE__ */ jsxs(CapRow, { className: styles["quarter-label"], align: "middle", justify: "center", children: [
+          /* @__PURE__ */ jsx(CapLabelWithStatic, { className: styles["quarter-label__text"], type: "label17", children: allQuartersLabel[quarter - 1] }),
+          /* @__PURE__ */ jsx(CapLabelWithStatic, { className: styles["quarter-label__text"], type: "label17", children: dayjs(carouselDate).year() })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "event-calendar__header__right", children: [
-        calendarGridLineLabel,
-        /* @__PURE__ */ jsx(DayDropdown, { fetchDay: handleDayGridSelection, day: dayGrid, dayLabels })
-      ] })
+      /* @__PURE__ */ jsxs(
+        CapRow,
+        {
+          className: styles["event-calendar__header__right"],
+          justify: "space-between",
+          align: "middle",
+          children: [
+            /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label15", children: resolvedCalendarGridLineLabel }),
+            /* @__PURE__ */ jsx(DayDropdown, { fetchDay: handleDayGridSelection, day: dayGrid, dayLabels })
+          ]
+        }
+      )
     ] }),
-    emptyState && !formattedEvents.length && /* @__PURE__ */ jsx(CapRow, { children: /* @__PURE__ */ jsx(CapIllustration, { ...getIllustrationProps(true) }) }),
+    emptyState && !formattedEvents.length && /* @__PURE__ */ jsx(CapRow, { align: "middle", justify: "center", children: /* @__PURE__ */ jsx(CapIllustration, { ...getIllustrationProps(true) }) }),
     formattedEvents.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(MonthHeader, { displayMonths }),
       /* @__PURE__ */ jsx(
         CalendarCanvas,
         {
           ...{
-            todayTooltipProps,
+            todayTooltipProps: resolvedTodayTooltipProps,
             formattedEvents,
             dayGrid,
             displayMonths,
@@ -165,46 +179,7 @@ const CapEventCalendar = ({
     ] })
   ] });
 };
-CapEventCalendar.propTypes = {
-  calendarDate: PropTypes.string,
-  events: PropTypes.array,
-  popoverContent: PropTypes.any,
-  onQuarterChange: PropTypes.func,
-  selectedQuarter: PropTypes.string,
-  calendarGridLineLabel: PropTypes.string,
-  dayLabels: PropTypes.array,
-  allQuartersLabel: PropTypes.array,
-  monthLabels: PropTypes.array,
-  todayTooltipProps: PropTypes.object,
-  dashLineOffsetY: PropTypes.number,
-  eventHeight: PropTypes.number,
-  eventRowGap: PropTypes.number,
-  textPadding: PropTypes.number,
-  eventStartYOffset: PropTypes.number,
-  minCanvasHeight: PropTypes.number,
-  canvasFont: PropTypes.string,
-  popoverPlacement: PropTypes.string
-};
-CapEventCalendar.defaultProps = {
-  popoverContent: DefaultPopover,
-  dashLineOffsetY: 20,
-  eventHeight: 24,
-  eventRowGap: 12,
-  textPadding: 12,
-  eventStartYOffset: 40,
-  minCanvasHeight: 0,
-  todayTooltipProps: { title: "Today" },
-  allQuartersLabel: QUARTER_LABELS,
-  dayLabels: DAY_LABELS,
-  monthLabels: MONTH_LABELS,
-  canvasFont: `normal ${FONT_SIZE_S} ${FONT_FAMILY}`,
-  calendarGridLineLabel: "Calendar Grid Line",
-  popoverPlacement: "leftTop",
-  emptyStateTitle: "You have no events for this quarter",
-  emptyStateDescription: "Please create an event to view it here",
-  emptyStateButtonLabel: "Create Event",
-  isButtonDisabled: false
-};
+const index = injectIntl(CapEventCalendar);
 export {
-  CapEventCalendar as default
+  index as default
 };

package/CapEventCalendar/messages.d.ts

@@ -0,0 +1,25 @@
+export declare const scope = "app.commonUtils.capUiLibrary.CapEventCalendar";
+declare const _default: {
+    calendarGridLineLabel: {
+        id: string;
+        defaultMessage: string;
+    };
+    emptyStateTitle: {
+        id: string;
+        defaultMessage: string;
+    };
+    emptyStateDescription: {
+        id: string;
+        defaultMessage: string;
+    };
+    emptyStateButtonLabel: {
+        id: string;
+        defaultMessage: string;
+    };
+    todayLabel: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=messages.d.ts.map

package/CapEventCalendar/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../components/CapEventCalendar/messages.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,kDAAkD,CAAC;;;;;;;;;;;;;;;;;;;;;;;AAErE,wBAqBG"}

package/CapEventCalendar/messages.js

@@ -0,0 +1,28 @@
+import { defineMessages } from "react-intl";
+const scope = "app.commonUtils.capUiLibrary.CapEventCalendar";
+const messages = defineMessages({
+  calendarGridLineLabel: {
+    id: `${scope}.calendarGridLineLabel`,
+    defaultMessage: "Calendar Grid Line"
+  },
+  emptyStateTitle: {
+    id: `${scope}.emptyStateTitle`,
+    defaultMessage: "You have no events for this quarter"
+  },
+  emptyStateDescription: {
+    id: `${scope}.emptyStateDescription`,
+    defaultMessage: "Please create an event to view it here"
+  },
+  emptyStateButtonLabel: {
+    id: `${scope}.emptyStateButtonLabel`,
+    defaultMessage: "Create Event"
+  },
+  todayLabel: {
+    id: `${scope}.todayLabel`,
+    defaultMessage: "Today"
+  }
+});
+export {
+  messages as default,
+  scope
+};

package/CapEventCalendar/styles.css

@@ -7,7 +7,7 @@
 /* Transition */
 /* Timezones Footer */
 .event-calendar {
-  height: 700px;
+  height: 50rem;
 }
 .event-calendar__header {
   display: flex;
@@ -19,94 +19,22 @@
   padding-top: 0.571rem;
 }
 .event-calendar__header__left .quarter-label {
-  width: 152px;
+  width: fit-content;
   height: 1.428rem;
-  margin: 2px 0 2px 0.571rem;
-  font-size: 1.143rem;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.25;
-  letter-spacing: normal;
-  color: #091e42;
+  margin: 0.142rem 0 0.142rem 0.571rem;
+  gap: 0.857rem;
 }
-.event-calendar__header__left .quarter-label span {
-  margin-right: 10px;
+.event-calendar__header__left .quarter-label__text {
+  font-size: 1.143rem;
 }
 .event-calendar__header__left .disable-left {
-  color: grey;
+  color: #97a0af !important;
   cursor: not-allowed;
   pointer-events: none;
 }
 .event-calendar__header__left .carousel-icon {
   cursor: pointer;
 }
-.event-calendar__header__right .grid-label {
-  width: 111px;
-  height: 1.428rem;
-  margin: 9px 0.571rem 11px 0;
-  font-size: 1rem;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.43;
-  letter-spacing: normal;
-  color: #091e42;
-}
-.event-calendar__header .ant-btn-flat {
-  width: 140px !important;
-  height: 2.857rem !important;
-  margin: 0 0 0 0.571rem !important;
-  padding: 0.571rem !important;
-  border-radius: 0.285rem !important;
-  border: solid 1px #b3bac5 !important;
-  color: #091e42;
-  font-weight: normal;
-}
-.event-calendar__header .ant-btn-flat .cap-button-v2-suffix {
-  position: absolute;
-  right: 0.571rem;
-}
-.event-calendar__header .flat-btn:hover {
-  background-color: #ffffff !important;
-}
-.event-calendar__month-header {
-  display: flex;
-  justify-content: center;
-  position: relative;
-  text-align: center;
-  top: 0;
-  margin-bottom: 10px;
-  margin-top: 25px;
-}
-.event-calendar__month-header__label {
-  width: 33.33%;
-  height: 1.428rem;
-  text-align: center;
-  color: #091e42;
-  font-size: 1rem;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.43;
-  letter-spacing: normal;
-}
-.ant-dropdown-placement-bottomCenter .ant-dropdown-menu-item {
-  height: 2.857rem !important;
-  padding: 9px 0.571rem 11px 1.142rem !important;
-  background-color: #ffffff !important;
-  color: #091e42 !important;
-  font-size: 1rem;
-}
-.ant-dropdown-placement-bottomCenter .ant-dropdown-menu-item:hover {
-  background-color: #fefcf0 !important;
-}
-.ant-dropdown-placement-bottomCenter .ant-dropdown-menu-item-selected {
-  background-color: #e9f0fe !important;
-  border-left: 1px solid #2466ea !important;
-  color: #091e42 !important;
-}
-.ant-dropdown-placement-bottomCenter .ant-dropdown-menu-vertical {
-  width: 140px !important;
-  margin-left: 35px !important;
+.event-calendar__header__right {
+  gap: 0.857rem;
 }

package/CapEventCalendar/styles.module.scss.js

@@ -0,0 +1,12 @@
+import './styles.css';const styles = {
+  "event-calendar__header": "event-calendar__header",
+  "event-calendar__header__left": "event-calendar__header__left",
+  "quarter-label": "quarter-label",
+  "quarter-label__text": "quarter-label__text",
+  "disable-left": "disable-left",
+  "carousel-icon": "carousel-icon",
+  "event-calendar__header__right": "event-calendar__header__right"
+};
+export {
+  styles as default
+};

package/CapEventCalendar/styles.scss

@@ -1,114 +1,41 @@
+@import '../styles/_variables.scss';
 
-@import "../styles/_variables.scss";
+.event-calendar {
+  height: 50rem;
 
-.event-calendar{
-    height: 700px;
-    &__header{
-        display: flex;
-        position: relative;
-        justify-content: space-between;
-        &__left{
-            display: flex;
-            padding-top:  $CAP_SPACE_08;
-            .quarter-label{
-                width: 152px;
-                height: $CAP_SPACE_20;
-                margin: 2px 0 2px $CAP_SPACE_08;
-                font-size: $FONT_SIZE_L;
-                font-weight: $FONT_WEIGHT_MEDIUM;
-                font-stretch: normal;
-                font-style: normal;
-                line-height: 1.25;
-                letter-spacing: normal;
-                color: $FONT_COLOR_01;
-                span{
-                    margin-right: 10px;
-                }
-            }
-            .disable-left{
-                color:grey;
-                cursor: not-allowed;
-                pointer-events: none;
-            }
-            .carousel-icon{
-                cursor: pointer;
-            }
-        }
-        &__right{
-            .grid-label{
-                width: 111px;
-                height: $CAP_SPACE_20;
-                margin: 9px $CAP_SPACE_08 11px 0;
-                font-size: $FONT_SIZE_M;
-                font-weight: $FONT_WEIGHT_MEDIUM;
-                font-stretch: normal;
-                font-style: normal;
-                line-height: 1.43;
-                letter-spacing: normal;
-                color: $FONT_COLOR_01;
-            }
-        }
-        .ant-btn-flat{
-            width: 140px !important;
-            height: $CAP_SPACE_40 !important;
-            margin: 0 0 0 $CAP_SPACE_08 !important;
-            padding: $CAP_SPACE_08 !important;
-            border-radius: $CAP_SPACE_04 !important;
-            border: solid 1px $CAP_G06 !important;
-            color: $FONT_COLOR_01;
-            font-weight: normal;
-            .cap-button-v2-suffix{
-                position: absolute;
-                right: $CAP_SPACE_08;
-            }
-        } 
-        .flat-btn:hover{
-            background-color:  $CAP_WHITE!important;
-        }      
-    }
-    &__month-header{
-        display: flex;
-        justify-content: center;
-        position: relative;
-        text-align: center;
-        top: 0;
-        margin-bottom: 10px;
-        margin-top: 25px;
-        &__label{
-            width: 33.33%;
-            height: $CAP_SPACE_20;
-            text-align: center;
-            color: $FONT_COLOR_01;
-            font-size:$FONT_SIZE_M ;
-            font-weight: $FONT_WEIGHT_MEDIUM;
-            font-stretch: normal;
-            font-style: normal;
-            line-height: 1.43;
-            letter-spacing: normal;
+  &__header {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    &__left {
+      display: flex;
+      padding-top: $CAP_SPACE_08;
+
+      .quarter-label {
+        width: fit-content;
+        height: $CAP_SPACE_20;
+        margin: 0.142rem 0 0.142rem $CAP_SPACE_08;
+        gap: $CAP_SPACE_12;
+
+        &__text {
+          font-size: $FONT_SIZE_L;
         }
-    }
-}
+      }
 
-.ant-dropdown-placement-bottomCenter{
-    .ant-dropdown-menu-item{
-        height: $CAP_SPACE_40 !important;
-        padding: 9px $CAP_SPACE_08 11px $CAP_SPACE_16 !important;
-        background-color: $CAP_WHITE !important;
-        color: $FONT_COLOR_01 !important;
-        font-size: $FONT_SIZE_M;
-    }
-    .ant-dropdown-menu-item:hover{
-        background-color: $BG_02 !important;
-    }
-    .ant-dropdown-menu-item-selected{
-        background-color: $CAP_PALE_GREY !important;
-        border-left: 1px solid $FONT_COLOR_05 !important;
-        color: $FONT_COLOR_01 !important;
+      .disable-left {
+        color: $FONT_COLOR_03 !important;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      .carousel-icon {
+        cursor: pointer;
+      }
     }
-    .ant-dropdown-menu-vertical{
-        width: 140px !important; 
-        margin-left: 35px !important;
+
+    &__right {
+      gap: $CAP_SPACE_12;
     }
+  }
 }
-
-