kwant-ui 3.14.8 → 3.14.9-alpha.1

package/GlobalStyles/index.ts

@@ -83,9 +83,14 @@ const GlobalStyles = createGlobalStyle<{ theme: Color }>`
         }
     }  
 
+    .rmdp-calendar{
+      .rmdp-day-picker{
+        padding: 0;
+      }
+    }
+
     .date-picker-range{
       .rmdp-calendar {
-        width: 576px;
         .rmdp-day-picker{
           gap: 24px;
         }
@@ -124,6 +129,11 @@ const GlobalStyles = createGlobalStyle<{ theme: Color }>`
     padding: 1.5rem;
   }
 
+  .rmdp-header{
+    margin-top: 0;
+    padding: 0;
+  }
+
   .rmdp-container {
     width: 100%;
     display: block !important;
@@ -171,13 +181,23 @@ const GlobalStyles = createGlobalStyle<{ theme: Color }>`
     background-color: ${theme.secondary.secondary100};
   }
   .rmdp-week {
-    justify-content: stretch;
+    justify-content: space-between;
+
+    &:first-child {
+      padding: 16px 0;
+      margin-bottom: 0 !important;
+
+      .rmdp-week-day{
+        height: auto !important;
+        aspect-ratio: auto;
+      }
+    }
+
     .rmdp-day, .rmdp-week-day  {
+      flex: 1;
       ${typography.body2};
       font-weight: ${FONT_WEIGHT.regular};
       color: ${theme.grey.grey500};
-      width: 32px;
-      height: 32px;
     }
 
     &:not(:last-child){
@@ -200,6 +220,33 @@ const GlobalStyles = createGlobalStyle<{ theme: Color }>`
       color: ${(props) => props.theme.blue.blue1000} !important;
     }
   }
+  
+
+  .rmdp-day.rmdp-range{
+    &.start, &.end{
+      background-color: ${theme.blue.blue100};
+      span{
+        background-color: red;
+        width: 32px;
+        height: 32px;
+        aspect-ratio: 1 !important;
+        position: static;
+        background-color: rgb(16, 63, 232);
+        border-radius: 50% !important;
+      }
+    &.start.end{
+      background-color: transparent;
+    }
+    }
+
+    &.start{
+      border-radius: 50% 0 0 50% !important;
+    }
+
+    &.end{
+      border-radius: 0 50% 50% 0 !important;
+    }
+  }
 
   .rmdp-day.rmdp-today span {
     background-color: #d4e2e7;

package/dist/components/Calendar/CalendarUtils.d.ts

@@ -11,11 +11,8 @@ export declare const CALENDAR_CONSTANTS: {
     LAST_30_DAYS: DateObject[];
     THIS_MONTH: DateObject[];
 };
-export declare const getSidebarOptions: (projectDuration?: ICalendar.ProjectDuration) => ({
+export declare const getSidebarOptions: (projectDuration?: ICalendar.ProjectDuration) => {
     title: string;
     value: () => DateObject[];
-} | {
-    title: string;
-    value?: undefined;
-})[];
+}[];
 export { fullMonthsText, regexInputValidate, weeks };

package/dist/components/HoverCalender/types.d.ts

@@ -7,4 +7,5 @@ export type HIStyles = {
     onSelect?: any;
     editMode?: boolean;
     numberOfMonths?: 1 | 2;
+    disableEdit?: boolean;
 };

package/dist/hooks/useDropdown.d.ts

@@ -0,0 +1,11 @@
+declare const useDropdown: (props?: {
+    opened?: boolean;
+    onClose?: () => void;
+    targetRef?: React.RefObject<HTMLDivElement>;
+}) => {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export default useDropdown;