fix: fix year dropdown paddings and icon container size

packages/lsd-react/src/components/Calendar/Calendar.classes.ts

@@ -2,6 +2,10 @@ export const calendarClasses = {
   root: `lsd-calendar`,
   container: 'lsd-calendar-container',
 
+  small: 'lsd-calendar--small',
+  medium: 'lsd-calendar--medium',
+  large: 'lsd-calendar--large',
+
   open: 'lsd-calendar--open',
   disabled: 'lsd-calendar--disabled',
 

packages/lsd-react/src/components/Calendar/Calendar.styles.ts

@@ -69,8 +69,6 @@ export const CalendarStyles = css`
     align-items: center;
     cursor: pointer;
     border: none;
-    width: 14px;
-    padding: 0 6px;
   }
 
   .${calendarClasses.month} {
@@ -222,8 +220,6 @@ export const CalendarStyles = css`
 
     background: rgb(var(--lsd-surface-primary));
 
-    padding: 5px 0px 5px 12px;
-
     :hover {
       text-decoration: underline;
     }
@@ -232,4 +228,34 @@ export const CalendarStyles = css`
   .${calendarClasses.yearAndIcon} {
     border: 1px solid rgb(var(--lsd-border-primary));
   }
+
+  .${calendarClasses.large} {
+    .${calendarClasses.year} {
+      padding: 6px 0px 6px 14px;
+    }
+
+    .${calendarClasses.changeYearIconContainer} {
+      width: 32px;
+    }
+  }
+
+  .${calendarClasses.medium} {
+    .${calendarClasses.year} {
+      padding: 6px 0px 6px 12px;
+    }
+
+    .${calendarClasses.changeYearIconContainer} {
+      width: 28px;
+    }
+  }
+
+  .${calendarClasses.small} {
+    .${calendarClasses.year} {
+      padding: 6px 0px 6px 12px;
+    }
+
+    .${calendarClasses.changeYearIconContainer} {
+      width: 28px;
+    }
+  }
 `

packages/lsd-react/src/components/Calendar/Calendar.tsx

@@ -184,6 +184,7 @@ export const Calendar: React.FC<CalendarProps> & {
           commonProps.className,
           props.className,
           calendarClasses.root,
+          calendarClasses[size],
           open && calendarClasses.open,
           disabled && calendarClasses.disabled,
         )}