From cf18bf54585bce4b033916f1f3881d41e3fb8394 Mon Sep 17 00:00:00 2001
From: Mukul Bansal <mukulbansal01@gmail.com>
Date: Wed, 30 Oct 2024 09:32:46 +0530
Subject: [PATCH] feat: add close icon in date picker and date range picker
 calendar

affects: @medly-components/core, @medly-components/forms
---
 .../components/Calendar/Calendar.styled.tsx   |    2 +
 .../src/components/Calendar/Calendar.test.tsx |   16 +
 .../core/src/components/Calendar/Calendar.tsx |   11 +-
 .../__snapshots__/Calendar.test.tsx.snap      |  452 +--
 .../core/src/components/Calendar/types.ts     |    1 +
 .../src/components/DatePicker/DatePicker.tsx  |    1 +
 .../__snapshots__/DatePicker.test.tsx.snap    | 2928 ++++++++++-------
 .../DateRangeCalendar.styled.tsx              |    2 +
 .../DateRangeCalendar/DateRangeCalendar.tsx   |   12 +-
 .../Month/Styled/Month.styled.tsx             |    4 +-
 .../DateRangeCalendar/types.ts                |    1 +
 .../DateRangePicker/DateRangePicker.test.tsx  |   11 +
 .../DateRangePicker/DateRangePicker.tsx       |    1 +
 .../DateRangePicker.test.tsx.snap             |  116 +-
 14 files changed, 2059 insertions(+), 1499 deletions(-)

diff --git a/packages/core/src/components/Calendar/Calendar.styled.tsx b/packages/core/src/components/Calendar/Calendar.styled.tsx
index c6a6bde3d..3291d068e 100644
--- a/packages/core/src/components/Calendar/Calendar.styled.tsx
+++ b/packages/core/src/components/Calendar/Calendar.styled.tsx
@@ -33,6 +33,8 @@ export const MonthNavigation = styled.button.attrs({ type: 'button' })<{ disable
     }
 `;
 export const Header = styled.div`
+    padding: 0 0.8rem;
+    box-sizing: border-box;
     width: 100%;
     display: flex;
     align-items: center;
diff --git a/packages/core/src/components/Calendar/Calendar.test.tsx b/packages/core/src/components/Calendar/Calendar.test.tsx
index f4068eff9..3a825a6aa 100644
--- a/packages/core/src/components/Calendar/Calendar.test.tsx
+++ b/packages/core/src/components/Calendar/Calendar.test.tsx
@@ -203,4 +203,20 @@ describe('Calendar Component', () => {
         expect(month).toEqual('Dec');
         expect(year).toEqual('2021');
     });
+
+    it('should call onClose on click on close icon', () => {
+        const onClose = jest.fn();
+        render(
+            <Calendar
+                id="test-calendar"
+                date={new Date(2020, 11, 15)}
+                onChange={jest.fn()}
+                onClose={onClose}
+                minSelectableDate={new Date(2020, 11, 10)}
+                maxSelectableDate={new Date(2021, 11, 20)}
+            />
+        );
+        fireEvent.click(screen.getByTitle('test-calendar-close-icon'));
+        expect(onClose).toHaveBeenCalled();
+    });
 });
diff --git a/packages/core/src/components/Calendar/Calendar.tsx b/packages/core/src/components/Calendar/Calendar.tsx
index b0cc351b8..c4bb763c9 100644
--- a/packages/core/src/components/Calendar/Calendar.tsx
+++ b/packages/core/src/components/Calendar/Calendar.tsx
@@ -1,4 +1,4 @@
-import { KeyboardArrowLeftIcon, KeyboardArrowRightIcon } from '@medly-components/icons';
+import { CloseIcon, KeyboardArrowLeftIcon, KeyboardArrowRightIcon } from '@medly-components/icons';
 import { WithStyle } from '@medly-components/utils';
 import { endOfDay } from 'date-fns';
 import type { FC } from 'react';
@@ -12,7 +12,7 @@ import { getCalendarDates, getMonthAndYearFromDate, getNextMonthAndYear, getPrev
 import { CalendarProps } from './types';
 
 const Component: FC<CalendarProps> = memo(
-    ({ date, onChange, minSelectableDate, maxSelectableDate, isErrorPresent, defaultMonth = 0, defaultYear, ...restProps }) => {
+    ({ date, onChange, onClose, minSelectableDate, maxSelectableDate, isErrorPresent, defaultMonth = 0, defaultYear, ...restProps }) => {
         const today = new Date(),
             ref = useRef<HTMLDivElement>(null),
             defaultDate = defaultYear ? new Date(defaultYear, defaultMonth, 1) : null,
@@ -78,6 +78,13 @@ const Component: FC<CalendarProps> = memo(
                     >
                         <KeyboardArrowRightIcon title={`${restProps.id}-navigation-forward-icon`} />
                     </Styled.MonthNavigation>
+                    <CloseIcon
+                        title={`${restProps.id}-close-icon`}
+                        onClick={() => {
+                            onClose?.();
+                            setCalenderVisibility(false);
+                        }}
+                    />
                 </Styled.Header>
                 <Styled.CalendarGrid>
                     <WeekDays />
diff --git a/packages/core/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap b/packages/core/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
index e88aa5f91..26a8a5095 100644
--- a/packages/core/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
+++ b/packages/core/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
@@ -31,6 +31,21 @@ exports[`Calendar Component should render given date 1`] = `
   fill: #607890;
 }
 
+.c11 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c11 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c6 {
   margin: 0;
   color: inherit;
@@ -45,7 +60,7 @@ exports[`Calendar Component should render given date 1`] = `
   display: inline-block;
 }
 
-.c12 {
+.c13 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -59,7 +74,7 @@ exports[`Calendar Component should render given date 1`] = `
   display: inline-block;
 }
 
-.c15 {
+.c16 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -123,6 +138,8 @@ exports[`Calendar Component should render given date 1`] = `
 }
 
 .c1 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -138,13 +155,13 @@ exports[`Calendar Component should render given date 1`] = `
   justify-content: space-between;
 }
 
-.c11 {
+.c12 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c14 {
+.c15 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -175,20 +192,20 @@ exports[`Calendar Component should render given date 1`] = `
   align-items: center;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
 }
 
-.c14:disabled {
+.c15:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c14:hover {
+.c15:hover {
   background-color: #eff2f4;
 }
 
-.c16 {
+.c17 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -218,29 +235,29 @@ exports[`Calendar Component should render given date 1`] = `
   align-items: center;
 }
 
-.c16:focus {
+.c17:focus {
   outline: none;
 }
 
-.c16:disabled {
+.c17:disabled {
   cursor: not-allowed;
 }
 
-.c16:hover {
+.c17:hover {
   background-color: #eff2f4;
 }
 
-.c16 span {
+.c17 span {
   font-weight: bold;
 }
 
-.c16,
-.c16:hover {
+.c17,
+.c17:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -270,16 +287,16 @@ exports[`Calendar Component should render given date 1`] = `
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
@@ -473,7 +490,7 @@ exports[`Calendar Component should render given date 1`] = `
   padding: 0 0 0 1rem;
 }
 
-.c13 {
+.c14 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -605,426 +622,441 @@ exports[`Calendar Component should render given date 1`] = `
           />
         </svg>
       </button>
+      <svg
+        class="c11"
+        fill="none"
+        height="1em"
+        title="test-calendar-close-icon"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+          fill="#000"
+          fill-opacity=".54"
+        />
+      </svg>
     </div>
     <div
-      class="c11"
+      class="c12"
     >
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         S
       </strong>
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         M
       </strong>
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         T
       </strong>
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         W
       </strong>
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         T
       </strong>
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         F
       </strong>
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         S
       </strong>
       <button
-        class="c14"
+        class="c15"
         title="Sun Dec 29 2019"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           29
         </span>
       </button>
       <button
-        class="c14"
+        class="c15"
         title="Mon Dec 30 2019"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           30
         </span>
       </button>
       <button
-        class="c14"
+        class="c15"
         title="Tue Dec 31 2019"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           31
         </span>
       </button>
       <button
-        class="c16"
+        class="c17"
         title="Wed Jan 01 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           1
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Thu Jan 02 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           2
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Fri Jan 03 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           3
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sat Jan 04 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           4
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sun Jan 05 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           5
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Mon Jan 06 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           6
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Tue Jan 07 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           7
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Wed Jan 08 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           8
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Thu Jan 09 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           9
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Fri Jan 10 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           10
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sat Jan 11 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           11
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sun Jan 12 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           12
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Mon Jan 13 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           13
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Tue Jan 14 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           14
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Wed Jan 15 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           15
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Thu Jan 16 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           16
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Fri Jan 17 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           17
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sat Jan 18 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           18
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sun Jan 19 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           19
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Mon Jan 20 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           20
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Tue Jan 21 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           21
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Wed Jan 22 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           22
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Thu Jan 23 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           23
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Fri Jan 24 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           24
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sat Jan 25 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           25
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sun Jan 26 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           26
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Mon Jan 27 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           27
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Tue Jan 28 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           28
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Wed Jan 29 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           29
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Thu Jan 30 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           30
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Fri Jan 31 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           31
         </span>
       </button>
       <button
-        class="c14"
+        class="c15"
         title="Sat Feb 01 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           1
         </span>
@@ -1065,6 +1097,21 @@ exports[`Calendar Component should render properly with with error state 1`] = `
   fill: #607890;
 }
 
+.c11 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c11 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c6 {
   margin: 0;
   color: inherit;
@@ -1079,7 +1126,7 @@ exports[`Calendar Component should render properly with with error state 1`] = `
   display: inline-block;
 }
 
-.c12 {
+.c13 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -1093,7 +1140,7 @@ exports[`Calendar Component should render properly with with error state 1`] = `
   display: inline-block;
 }
 
-.c15 {
+.c16 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -1157,6 +1204,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
 }
 
 .c1 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1172,13 +1221,13 @@ exports[`Calendar Component should render properly with with error state 1`] = `
   justify-content: space-between;
 }
 
-.c11 {
+.c12 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c14 {
+.c15 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -1209,20 +1258,20 @@ exports[`Calendar Component should render properly with with error state 1`] = `
   align-items: center;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
 }
 
-.c14:disabled {
+.c15:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c14:hover {
+.c15:hover {
   background-color: #eff2f4;
 }
 
-.c16 {
+.c17 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -1252,29 +1301,29 @@ exports[`Calendar Component should render properly with with error state 1`] = `
   align-items: center;
 }
 
-.c16:focus {
+.c17:focus {
   outline: none;
 }
 
-.c16:disabled {
+.c17:disabled {
   cursor: not-allowed;
 }
 
-.c16:hover {
+.c17:hover {
   background-color: #eff2f4;
 }
 
-.c16 span {
+.c17 span {
   font-weight: bold;
 }
 
-.c16,
-.c16:hover {
+.c17,
+.c17:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -1304,16 +1353,16 @@ exports[`Calendar Component should render properly with with error state 1`] = `
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
@@ -1507,7 +1556,7 @@ exports[`Calendar Component should render properly with with error state 1`] = `
   padding: 0 0 0 1rem;
 }
 
-.c13 {
+.c14 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1641,426 +1690,441 @@ exports[`Calendar Component should render properly with with error state 1`] = `
           />
         </svg>
       </button>
+      <svg
+        class="c11"
+        fill="none"
+        height="1em"
+        title="test-calendar-close-icon"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+          fill="#000"
+          fill-opacity=".54"
+        />
+      </svg>
     </div>
     <div
-      class="c11"
+      class="c12"
     >
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         S
       </strong>
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         M
       </strong>
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         T
       </strong>
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         W
       </strong>
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         T
       </strong>
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         F
       </strong>
       <strong
-        class="c12 c13"
+        class="c13 c14"
       >
         S
       </strong>
       <button
-        class="c14"
+        class="c15"
         title="Sun Dec 29 2019"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           29
         </span>
       </button>
       <button
-        class="c14"
+        class="c15"
         title="Mon Dec 30 2019"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           30
         </span>
       </button>
       <button
-        class="c14"
+        class="c15"
         title="Tue Dec 31 2019"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           31
         </span>
       </button>
       <button
-        class="c16"
+        class="c17"
         title="Wed Jan 01 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           1
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Thu Jan 02 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           2
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Fri Jan 03 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           3
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sat Jan 04 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           4
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sun Jan 05 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           5
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Mon Jan 06 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           6
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Tue Jan 07 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           7
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Wed Jan 08 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           8
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Thu Jan 09 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           9
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Fri Jan 10 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           10
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sat Jan 11 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           11
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sun Jan 12 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           12
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Mon Jan 13 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           13
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Tue Jan 14 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           14
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Wed Jan 15 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           15
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Thu Jan 16 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           16
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Fri Jan 17 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           17
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sat Jan 18 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           18
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sun Jan 19 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           19
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Mon Jan 20 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           20
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Tue Jan 21 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           21
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Wed Jan 22 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           22
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Thu Jan 23 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           23
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Fri Jan 24 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           24
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sat Jan 25 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           25
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Sun Jan 26 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           26
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Mon Jan 27 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           27
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Tue Jan 28 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           28
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Wed Jan 29 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           29
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Thu Jan 30 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           30
         </span>
       </button>
       <button
-        class="c17"
+        class="c18"
         title="Fri Jan 31 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           31
         </span>
       </button>
       <button
-        class="c14"
+        class="c15"
         title="Sat Feb 01 2020"
         type="button"
       >
         <span
-          class="c15"
+          class="c16"
         >
           1
         </span>
diff --git a/packages/core/src/components/Calendar/types.ts b/packages/core/src/components/Calendar/types.ts
index 7b20e334c..cd80aed1f 100644
--- a/packages/core/src/components/Calendar/types.ts
+++ b/packages/core/src/components/Calendar/types.ts
@@ -2,6 +2,7 @@ import { HTMLProps, Omit, WithThemeProp } from '@medly-components/utils';
 
 export interface CalendarProps extends Omit<HTMLProps<HTMLDivElement>, 'onChange'> {
     date: Date | null;
+    onClose?: () => void;
     onChange: (date: Date, e: React.MouseEvent<HTMLButtonElement>) => void;
     minSelectableDate: Date;
     maxSelectableDate: Date;
diff --git a/packages/core/src/components/DatePicker/DatePicker.tsx b/packages/core/src/components/DatePicker/DatePicker.tsx
index 752f4dae3..c7aba4fb0 100644
--- a/packages/core/src/components/DatePicker/DatePicker.tsx
+++ b/packages/core/src/components/DatePicker/DatePicker.tsx
@@ -221,6 +221,7 @@ const Component: FC<DatePickerProps> = memo(
                         id={`${id}-calendar`}
                         date={date}
                         isErrorPresent={isErrorPresent}
+                        onClose={() => toggleCalendar(false)}
                         onChange={onDateChange}
                         defaultMonth={defaultMonth}
                         defaultYear={defaultYear}
diff --git a/packages/core/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/core/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
index 39bc05046..952db4dee 100644
--- a/packages/core/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/core/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -759,6 +759,21 @@ exports[`DatePicker component calendar icon should show calendar icon displayed
 `;
 
 exports[`DatePicker component popover placement should render properly with "bottom" position 1`] = `
+.c12 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c12 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c8 {
   overflow: visible;
   font-size: 2rem;
@@ -803,7 +818,7 @@ exports[`DatePicker component popover placement should render properly with "bot
   display: inline-block;
 }
 
-.c13 {
+.c14 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -817,7 +832,7 @@ exports[`DatePicker component popover placement should render properly with "bot
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -881,6 +896,8 @@ exports[`DatePicker component popover placement should render properly with "bot
 }
 
 .c2 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -896,13 +913,13 @@ exports[`DatePicker component popover placement should render properly with "bot
   justify-content: space-between;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c15 {
+.c16 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -933,20 +950,20 @@ exports[`DatePicker component popover placement should render properly with "bot
   align-items: center;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #eff2f4;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -976,29 +993,29 @@ exports[`DatePicker component popover placement should render properly with "bot
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
-.c17 span {
+.c18 span {
   font-weight: bold;
 }
 
-.c17,
-.c17:hover {
+.c18,
+.c18:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -1028,16 +1045,16 @@ exports[`DatePicker component popover placement should render properly with "bot
   align-items: center;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
 }
 
-.c18:disabled {
+.c19:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c18:hover {
+.c19:hover {
   background-color: #eff2f4;
 }
 
@@ -1176,22 +1193,22 @@ exports[`DatePicker component popover placement should render properly with "bot
   margin: 0.8rem 0.8rem 0.8rem 0;
 }
 
-.c4 .c20 {
+.c4 .c21 {
   margin: 0;
   caret-color: transparent;
 }
 
-.c4 .c20 label {
+.c4 .c21 label {
   pointer-events: none;
 }
 
-.c4 .c20 div,
-.c4 .c20 input,
-.c4 .c20 label {
+.c4 .c21 div,
+.c4 .c21 input,
+.c4 .c21 label {
   cursor: pointer;
 }
 
-.c4 .c20 .c21 {
+.c4 .c21 .c22 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -1221,17 +1238,17 @@ exports[`DatePicker component popover placement should render properly with "bot
   overflow: auto;
 }
 
-.c3 .c20 {
+.c3 .c21 {
   min-width: unset;
   max-width: 9.5rem;
 }
 
-.c3 .c20 > div {
+.c3 .c21 > div {
   height: 3.5rem;
   padding: 0 0 0 1rem;
 }
 
-.c14 {
+.c15 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1241,7 +1258,7 @@ exports[`DatePicker component popover placement should render properly with "bot
   margin-bottom: 0.8rem;
 }
 
-.c19 .c0 {
+.c20 .c0 {
   z-index: 4;
   position: absolute;
   top: calc(100% + 0px);
@@ -1373,426 +1390,441 @@ exports[`DatePicker component popover placement should render properly with "bot
         />
       </svg>
     </button>
+    <svg
+      class="c12"
+      fill="none"
+      height="1em"
+      title="dob-calendar-close-icon"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        fill="#000"
+        fill-opacity=".54"
+      />
+    </svg>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       M
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       W
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       F
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <button
-      class="c15"
+      class="c16"
       title="Sun Dec 29 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Mon Dec 30 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Tue Dec 31 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c17"
+      class="c18"
       title="Wed Jan 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 02 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         2
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 03 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         3
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 04 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         4
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 05 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         5
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 06 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         6
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 07 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         7
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 08 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         8
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 09 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         9
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 10 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         10
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 11 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         11
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 12 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         12
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 13 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         13
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 14 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         14
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 15 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         15
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 16 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         16
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 17 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         17
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 18 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         18
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 19 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         19
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 20 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         20
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 21 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         21
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 22 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         22
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 23 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         23
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 24 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         24
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 25 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         25
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 26 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         26
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 27 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         27
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 28 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         28
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 29 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 30 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 31 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Sat Feb 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
@@ -1802,6 +1834,21 @@ exports[`DatePicker component popover placement should render properly with "bot
 `;
 
 exports[`DatePicker component popover placement should render properly with "bottom-end" position 1`] = `
+.c12 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c12 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c8 {
   overflow: visible;
   font-size: 2rem;
@@ -1846,7 +1893,7 @@ exports[`DatePicker component popover placement should render properly with "bot
   display: inline-block;
 }
 
-.c13 {
+.c14 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -1860,7 +1907,7 @@ exports[`DatePicker component popover placement should render properly with "bot
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -1924,6 +1971,8 @@ exports[`DatePicker component popover placement should render properly with "bot
 }
 
 .c2 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1939,13 +1988,13 @@ exports[`DatePicker component popover placement should render properly with "bot
   justify-content: space-between;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c15 {
+.c16 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -1976,20 +2025,20 @@ exports[`DatePicker component popover placement should render properly with "bot
   align-items: center;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #eff2f4;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -2019,29 +2068,29 @@ exports[`DatePicker component popover placement should render properly with "bot
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
-.c17 span {
+.c18 span {
   font-weight: bold;
 }
 
-.c17,
-.c17:hover {
+.c18,
+.c18:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -2071,16 +2120,16 @@ exports[`DatePicker component popover placement should render properly with "bot
   align-items: center;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
 }
 
-.c18:disabled {
+.c19:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c18:hover {
+.c19:hover {
   background-color: #eff2f4;
 }
 
@@ -2219,22 +2268,22 @@ exports[`DatePicker component popover placement should render properly with "bot
   margin: 0.8rem 0.8rem 0.8rem 0;
 }
 
-.c4 .c20 {
+.c4 .c21 {
   margin: 0;
   caret-color: transparent;
 }
 
-.c4 .c20 label {
+.c4 .c21 label {
   pointer-events: none;
 }
 
-.c4 .c20 div,
-.c4 .c20 input,
-.c4 .c20 label {
+.c4 .c21 div,
+.c4 .c21 input,
+.c4 .c21 label {
   cursor: pointer;
 }
 
-.c4 .c20 .c21 {
+.c4 .c21 .c22 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -2264,17 +2313,17 @@ exports[`DatePicker component popover placement should render properly with "bot
   overflow: auto;
 }
 
-.c3 .c20 {
+.c3 .c21 {
   min-width: unset;
   max-width: 9.5rem;
 }
 
-.c3 .c20 > div {
+.c3 .c21 > div {
   height: 3.5rem;
   padding: 0 0 0 1rem;
 }
 
-.c14 {
+.c15 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2284,7 +2333,7 @@ exports[`DatePicker component popover placement should render properly with "bot
   margin-bottom: 0.8rem;
 }
 
-.c19 .c0 {
+.c20 .c0 {
   z-index: 4;
   position: absolute;
   top: calc(100% + 0px);
@@ -2413,426 +2462,441 @@ exports[`DatePicker component popover placement should render properly with "bot
         />
       </svg>
     </button>
+    <svg
+      class="c12"
+      fill="none"
+      height="1em"
+      title="dob-calendar-close-icon"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        fill="#000"
+        fill-opacity=".54"
+      />
+    </svg>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       M
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       W
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       F
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <button
-      class="c15"
+      class="c16"
       title="Sun Dec 29 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Mon Dec 30 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Tue Dec 31 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c17"
+      class="c18"
       title="Wed Jan 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 02 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         2
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 03 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         3
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 04 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         4
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 05 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         5
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 06 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         6
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 07 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         7
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 08 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         8
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 09 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         9
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 10 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         10
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 11 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         11
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 12 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         12
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 13 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         13
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 14 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         14
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 15 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         15
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 16 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         16
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 17 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         17
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 18 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         18
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 19 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         19
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 20 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         20
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 21 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         21
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 22 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         22
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 23 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         23
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 24 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         24
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 25 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         25
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 26 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         26
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 27 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         27
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 28 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         28
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 29 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 30 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 31 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Sat Feb 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
@@ -2842,6 +2906,21 @@ exports[`DatePicker component popover placement should render properly with "bot
 `;
 
 exports[`DatePicker component popover placement should render properly with "bottom-start" position 1`] = `
+.c12 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c12 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c8 {
   overflow: visible;
   font-size: 2rem;
@@ -2886,7 +2965,7 @@ exports[`DatePicker component popover placement should render properly with "bot
   display: inline-block;
 }
 
-.c13 {
+.c14 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -2900,7 +2979,7 @@ exports[`DatePicker component popover placement should render properly with "bot
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -2964,6 +3043,8 @@ exports[`DatePicker component popover placement should render properly with "bot
 }
 
 .c2 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2979,13 +3060,13 @@ exports[`DatePicker component popover placement should render properly with "bot
   justify-content: space-between;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c15 {
+.c16 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -3016,20 +3097,20 @@ exports[`DatePicker component popover placement should render properly with "bot
   align-items: center;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #eff2f4;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -3059,29 +3140,29 @@ exports[`DatePicker component popover placement should render properly with "bot
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
-.c17 span {
+.c18 span {
   font-weight: bold;
 }
 
-.c17,
-.c17:hover {
+.c18,
+.c18:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -3111,16 +3192,16 @@ exports[`DatePicker component popover placement should render properly with "bot
   align-items: center;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
 }
 
-.c18:disabled {
+.c19:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c18:hover {
+.c19:hover {
   background-color: #eff2f4;
 }
 
@@ -3259,22 +3340,22 @@ exports[`DatePicker component popover placement should render properly with "bot
   margin: 0.8rem 0.8rem 0.8rem 0;
 }
 
-.c4 .c20 {
+.c4 .c21 {
   margin: 0;
   caret-color: transparent;
 }
 
-.c4 .c20 label {
+.c4 .c21 label {
   pointer-events: none;
 }
 
-.c4 .c20 div,
-.c4 .c20 input,
-.c4 .c20 label {
+.c4 .c21 div,
+.c4 .c21 input,
+.c4 .c21 label {
   cursor: pointer;
 }
 
-.c4 .c20 .c21 {
+.c4 .c21 .c22 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -3304,17 +3385,17 @@ exports[`DatePicker component popover placement should render properly with "bot
   overflow: auto;
 }
 
-.c3 .c20 {
+.c3 .c21 {
   min-width: unset;
   max-width: 9.5rem;
 }
 
-.c3 .c20 > div {
+.c3 .c21 > div {
   height: 3.5rem;
   padding: 0 0 0 1rem;
 }
 
-.c14 {
+.c15 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3324,7 +3405,7 @@ exports[`DatePicker component popover placement should render properly with "bot
   margin-bottom: 0.8rem;
 }
 
-.c19 .c0 {
+.c20 .c0 {
   z-index: 4;
   position: absolute;
   top: calc(100% + 0px);
@@ -3453,426 +3534,441 @@ exports[`DatePicker component popover placement should render properly with "bot
         />
       </svg>
     </button>
+    <svg
+      class="c12"
+      fill="none"
+      height="1em"
+      title="dob-calendar-close-icon"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        fill="#000"
+        fill-opacity=".54"
+      />
+    </svg>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       M
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       W
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       F
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <button
-      class="c15"
+      class="c16"
       title="Sun Dec 29 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Mon Dec 30 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Tue Dec 31 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c17"
+      class="c18"
       title="Wed Jan 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 02 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         2
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 03 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         3
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 04 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         4
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 05 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         5
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 06 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         6
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 07 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         7
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 08 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         8
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 09 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         9
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 10 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         10
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 11 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         11
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 12 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         12
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 13 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         13
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 14 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         14
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 15 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         15
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 16 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         16
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 17 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         17
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 18 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         18
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 19 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         19
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 20 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         20
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 21 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         21
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 22 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         22
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 23 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         23
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 24 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         24
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 25 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         25
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 26 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         26
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 27 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         27
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 28 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         28
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 29 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 30 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 31 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Sat Feb 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
@@ -3882,6 +3978,21 @@ exports[`DatePicker component popover placement should render properly with "bot
 `;
 
 exports[`DatePicker component popover placement should render properly with "left" position 1`] = `
+.c12 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c12 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c8 {
   overflow: visible;
   font-size: 2rem;
@@ -3926,7 +4037,7 @@ exports[`DatePicker component popover placement should render properly with "lef
   display: inline-block;
 }
 
-.c13 {
+.c14 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -3940,7 +4051,7 @@ exports[`DatePicker component popover placement should render properly with "lef
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -4004,6 +4115,8 @@ exports[`DatePicker component popover placement should render properly with "lef
 }
 
 .c2 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4019,13 +4132,13 @@ exports[`DatePicker component popover placement should render properly with "lef
   justify-content: space-between;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c15 {
+.c16 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -4056,20 +4169,20 @@ exports[`DatePicker component popover placement should render properly with "lef
   align-items: center;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #eff2f4;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -4099,29 +4212,29 @@ exports[`DatePicker component popover placement should render properly with "lef
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
-.c17 span {
+.c18 span {
   font-weight: bold;
 }
 
-.c17,
-.c17:hover {
+.c18,
+.c18:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -4151,16 +4264,16 @@ exports[`DatePicker component popover placement should render properly with "lef
   align-items: center;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
 }
 
-.c18:disabled {
+.c19:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c18:hover {
+.c19:hover {
   background-color: #eff2f4;
 }
 
@@ -4299,22 +4412,22 @@ exports[`DatePicker component popover placement should render properly with "lef
   margin: 0.8rem 0.8rem 0.8rem 0;
 }
 
-.c4 .c20 {
+.c4 .c21 {
   margin: 0;
   caret-color: transparent;
 }
 
-.c4 .c20 label {
+.c4 .c21 label {
   pointer-events: none;
 }
 
-.c4 .c20 div,
-.c4 .c20 input,
-.c4 .c20 label {
+.c4 .c21 div,
+.c4 .c21 input,
+.c4 .c21 label {
   cursor: pointer;
 }
 
-.c4 .c20 .c21 {
+.c4 .c21 .c22 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -4344,17 +4457,17 @@ exports[`DatePicker component popover placement should render properly with "lef
   overflow: auto;
 }
 
-.c3 .c20 {
+.c3 .c21 {
   min-width: unset;
   max-width: 9.5rem;
 }
 
-.c3 .c20 > div {
+.c3 .c21 > div {
   height: 3.5rem;
   padding: 0 0 0 1rem;
 }
 
-.c14 {
+.c15 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -4364,7 +4477,7 @@ exports[`DatePicker component popover placement should render properly with "lef
   margin-bottom: 0.8rem;
 }
 
-.c19 .c0 {
+.c20 .c0 {
   z-index: 4;
   position: absolute;
   right: calc(100% + 0px);
@@ -4495,426 +4608,441 @@ exports[`DatePicker component popover placement should render properly with "lef
         />
       </svg>
     </button>
+    <svg
+      class="c12"
+      fill="none"
+      height="1em"
+      title="dob-calendar-close-icon"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        fill="#000"
+        fill-opacity=".54"
+      />
+    </svg>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       M
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       W
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       F
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <button
-      class="c15"
+      class="c16"
       title="Sun Dec 29 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Mon Dec 30 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Tue Dec 31 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c17"
+      class="c18"
       title="Wed Jan 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 02 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         2
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 03 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         3
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 04 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         4
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 05 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         5
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 06 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         6
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 07 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         7
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 08 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         8
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 09 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         9
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 10 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         10
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 11 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         11
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 12 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         12
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 13 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         13
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 14 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         14
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 15 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         15
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 16 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         16
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 17 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         17
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 18 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         18
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 19 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         19
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 20 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         20
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 21 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         21
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 22 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         22
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 23 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         23
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 24 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         24
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 25 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         25
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 26 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         26
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 27 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         27
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 28 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         28
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 29 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 30 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 31 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Sat Feb 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
@@ -4924,6 +5052,21 @@ exports[`DatePicker component popover placement should render properly with "lef
 `;
 
 exports[`DatePicker component popover placement should render properly with "left-end" position 1`] = `
+.c12 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c12 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c8 {
   overflow: visible;
   font-size: 2rem;
@@ -4968,7 +5111,7 @@ exports[`DatePicker component popover placement should render properly with "lef
   display: inline-block;
 }
 
-.c13 {
+.c14 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -4982,7 +5125,7 @@ exports[`DatePicker component popover placement should render properly with "lef
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -5046,6 +5189,8 @@ exports[`DatePicker component popover placement should render properly with "lef
 }
 
 .c2 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5061,13 +5206,13 @@ exports[`DatePicker component popover placement should render properly with "lef
   justify-content: space-between;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c15 {
+.c16 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -5098,20 +5243,20 @@ exports[`DatePicker component popover placement should render properly with "lef
   align-items: center;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #eff2f4;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -5141,29 +5286,29 @@ exports[`DatePicker component popover placement should render properly with "lef
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
-.c17 span {
+.c18 span {
   font-weight: bold;
 }
 
-.c17,
-.c17:hover {
+.c18,
+.c18:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -5193,16 +5338,16 @@ exports[`DatePicker component popover placement should render properly with "lef
   align-items: center;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
 }
 
-.c18:disabled {
+.c19:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c18:hover {
+.c19:hover {
   background-color: #eff2f4;
 }
 
@@ -5341,22 +5486,22 @@ exports[`DatePicker component popover placement should render properly with "lef
   margin: 0.8rem 0.8rem 0.8rem 0;
 }
 
-.c4 .c20 {
+.c4 .c21 {
   margin: 0;
   caret-color: transparent;
 }
 
-.c4 .c20 label {
+.c4 .c21 label {
   pointer-events: none;
 }
 
-.c4 .c20 div,
-.c4 .c20 input,
-.c4 .c20 label {
+.c4 .c21 div,
+.c4 .c21 input,
+.c4 .c21 label {
   cursor: pointer;
 }
 
-.c4 .c20 .c21 {
+.c4 .c21 .c22 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -5386,17 +5531,17 @@ exports[`DatePicker component popover placement should render properly with "lef
   overflow: auto;
 }
 
-.c3 .c20 {
+.c3 .c21 {
   min-width: unset;
   max-width: 9.5rem;
 }
 
-.c3 .c20 > div {
+.c3 .c21 > div {
   height: 3.5rem;
   padding: 0 0 0 1rem;
 }
 
-.c14 {
+.c15 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -5406,7 +5551,7 @@ exports[`DatePicker component popover placement should render properly with "lef
   margin-bottom: 0.8rem;
 }
 
-.c19 .c0 {
+.c20 .c0 {
   z-index: 4;
   position: absolute;
   right: calc(100% + 0px);
@@ -5534,426 +5679,441 @@ exports[`DatePicker component popover placement should render properly with "lef
         />
       </svg>
     </button>
+    <svg
+      class="c12"
+      fill="none"
+      height="1em"
+      title="dob-calendar-close-icon"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        fill="#000"
+        fill-opacity=".54"
+      />
+    </svg>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       M
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       W
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       F
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <button
-      class="c15"
+      class="c16"
       title="Sun Dec 29 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Mon Dec 30 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Tue Dec 31 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c17"
+      class="c18"
       title="Wed Jan 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 02 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         2
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 03 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         3
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 04 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         4
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 05 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         5
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 06 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         6
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 07 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         7
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 08 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         8
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 09 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         9
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 10 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         10
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 11 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         11
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 12 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         12
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 13 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         13
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 14 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         14
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 15 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         15
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 16 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         16
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 17 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         17
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 18 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         18
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 19 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         19
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 20 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         20
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 21 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         21
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 22 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         22
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 23 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         23
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 24 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         24
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 25 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         25
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 26 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         26
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 27 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         27
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 28 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         28
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 29 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 30 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 31 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Sat Feb 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
@@ -5963,6 +6123,21 @@ exports[`DatePicker component popover placement should render properly with "lef
 `;
 
 exports[`DatePicker component popover placement should render properly with "left-start" position 1`] = `
+.c12 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c12 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c8 {
   overflow: visible;
   font-size: 2rem;
@@ -6007,7 +6182,7 @@ exports[`DatePicker component popover placement should render properly with "lef
   display: inline-block;
 }
 
-.c13 {
+.c14 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -6021,7 +6196,7 @@ exports[`DatePicker component popover placement should render properly with "lef
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -6085,6 +6260,8 @@ exports[`DatePicker component popover placement should render properly with "lef
 }
 
 .c2 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6100,13 +6277,13 @@ exports[`DatePicker component popover placement should render properly with "lef
   justify-content: space-between;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c15 {
+.c16 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -6137,20 +6314,20 @@ exports[`DatePicker component popover placement should render properly with "lef
   align-items: center;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #eff2f4;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -6180,29 +6357,29 @@ exports[`DatePicker component popover placement should render properly with "lef
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
-.c17 span {
+.c18 span {
   font-weight: bold;
 }
 
-.c17,
-.c17:hover {
+.c18,
+.c18:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -6232,16 +6409,16 @@ exports[`DatePicker component popover placement should render properly with "lef
   align-items: center;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
 }
 
-.c18:disabled {
+.c19:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c18:hover {
+.c19:hover {
   background-color: #eff2f4;
 }
 
@@ -6380,22 +6557,22 @@ exports[`DatePicker component popover placement should render properly with "lef
   margin: 0.8rem 0.8rem 0.8rem 0;
 }
 
-.c4 .c20 {
+.c4 .c21 {
   margin: 0;
   caret-color: transparent;
 }
 
-.c4 .c20 label {
+.c4 .c21 label {
   pointer-events: none;
 }
 
-.c4 .c20 div,
-.c4 .c20 input,
-.c4 .c20 label {
+.c4 .c21 div,
+.c4 .c21 input,
+.c4 .c21 label {
   cursor: pointer;
 }
 
-.c4 .c20 .c21 {
+.c4 .c21 .c22 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -6425,17 +6602,17 @@ exports[`DatePicker component popover placement should render properly with "lef
   overflow: auto;
 }
 
-.c3 .c20 {
+.c3 .c21 {
   min-width: unset;
   max-width: 9.5rem;
 }
 
-.c3 .c20 > div {
+.c3 .c21 > div {
   height: 3.5rem;
   padding: 0 0 0 1rem;
 }
 
-.c14 {
+.c15 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -6445,7 +6622,7 @@ exports[`DatePicker component popover placement should render properly with "lef
   margin-bottom: 0.8rem;
 }
 
-.c19 .c0 {
+.c20 .c0 {
   z-index: 4;
   position: absolute;
   right: calc(100% + 0px);
@@ -6573,426 +6750,441 @@ exports[`DatePicker component popover placement should render properly with "lef
         />
       </svg>
     </button>
+    <svg
+      class="c12"
+      fill="none"
+      height="1em"
+      title="dob-calendar-close-icon"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        fill="#000"
+        fill-opacity=".54"
+      />
+    </svg>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       M
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       W
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       F
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <button
-      class="c15"
+      class="c16"
       title="Sun Dec 29 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Mon Dec 30 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Tue Dec 31 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c17"
+      class="c18"
       title="Wed Jan 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 02 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         2
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 03 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         3
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 04 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         4
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 05 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         5
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 06 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         6
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 07 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         7
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 08 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         8
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 09 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         9
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 10 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         10
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 11 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         11
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 12 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         12
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 13 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         13
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 14 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         14
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 15 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         15
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 16 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         16
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 17 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         17
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 18 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         18
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 19 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         19
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 20 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         20
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 21 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         21
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 22 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         22
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 23 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         23
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 24 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         24
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 25 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         25
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 26 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         26
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 27 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         27
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 28 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         28
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 29 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 30 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 31 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Sat Feb 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
@@ -7002,6 +7194,21 @@ exports[`DatePicker component popover placement should render properly with "lef
 `;
 
 exports[`DatePicker component popover placement should render properly with "right" position 1`] = `
+.c12 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c12 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c8 {
   overflow: visible;
   font-size: 2rem;
@@ -7046,7 +7253,7 @@ exports[`DatePicker component popover placement should render properly with "rig
   display: inline-block;
 }
 
-.c13 {
+.c14 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -7060,7 +7267,7 @@ exports[`DatePicker component popover placement should render properly with "rig
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -7124,6 +7331,8 @@ exports[`DatePicker component popover placement should render properly with "rig
 }
 
 .c2 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7139,13 +7348,13 @@ exports[`DatePicker component popover placement should render properly with "rig
   justify-content: space-between;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c15 {
+.c16 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -7176,20 +7385,20 @@ exports[`DatePicker component popover placement should render properly with "rig
   align-items: center;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #eff2f4;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -7219,29 +7428,29 @@ exports[`DatePicker component popover placement should render properly with "rig
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
-.c17 span {
+.c18 span {
   font-weight: bold;
 }
 
-.c17,
-.c17:hover {
+.c18,
+.c18:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -7271,16 +7480,16 @@ exports[`DatePicker component popover placement should render properly with "rig
   align-items: center;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
 }
 
-.c18:disabled {
+.c19:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c18:hover {
+.c19:hover {
   background-color: #eff2f4;
 }
 
@@ -7419,22 +7628,22 @@ exports[`DatePicker component popover placement should render properly with "rig
   margin: 0.8rem 0.8rem 0.8rem 0;
 }
 
-.c4 .c20 {
+.c4 .c21 {
   margin: 0;
   caret-color: transparent;
 }
 
-.c4 .c20 label {
+.c4 .c21 label {
   pointer-events: none;
 }
 
-.c4 .c20 div,
-.c4 .c20 input,
-.c4 .c20 label {
+.c4 .c21 div,
+.c4 .c21 input,
+.c4 .c21 label {
   cursor: pointer;
 }
 
-.c4 .c20 .c21 {
+.c4 .c21 .c22 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -7464,17 +7673,17 @@ exports[`DatePicker component popover placement should render properly with "rig
   overflow: auto;
 }
 
-.c3 .c20 {
+.c3 .c21 {
   min-width: unset;
   max-width: 9.5rem;
 }
 
-.c3 .c20 > div {
+.c3 .c21 > div {
   height: 3.5rem;
   padding: 0 0 0 1rem;
 }
 
-.c14 {
+.c15 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -7484,7 +7693,7 @@ exports[`DatePicker component popover placement should render properly with "rig
   margin-bottom: 0.8rem;
 }
 
-.c19 .c0 {
+.c20 .c0 {
   z-index: 4;
   position: absolute;
   left: calc(100% + 0px);
@@ -7615,426 +7824,441 @@ exports[`DatePicker component popover placement should render properly with "rig
         />
       </svg>
     </button>
+    <svg
+      class="c12"
+      fill="none"
+      height="1em"
+      title="dob-calendar-close-icon"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        fill="#000"
+        fill-opacity=".54"
+      />
+    </svg>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       M
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       W
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       F
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <button
-      class="c15"
+      class="c16"
       title="Sun Dec 29 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Mon Dec 30 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Tue Dec 31 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c17"
+      class="c18"
       title="Wed Jan 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 02 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         2
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 03 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         3
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 04 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         4
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 05 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         5
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 06 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         6
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 07 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         7
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 08 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         8
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 09 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         9
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 10 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         10
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 11 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         11
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 12 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         12
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 13 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         13
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 14 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         14
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 15 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         15
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 16 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         16
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 17 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         17
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 18 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         18
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 19 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         19
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 20 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         20
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 21 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         21
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 22 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         22
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 23 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         23
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 24 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         24
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 25 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         25
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 26 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         26
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 27 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         27
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 28 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         28
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 29 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 30 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 31 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Sat Feb 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
@@ -8044,6 +8268,21 @@ exports[`DatePicker component popover placement should render properly with "rig
 `;
 
 exports[`DatePicker component popover placement should render properly with "right-end" position 1`] = `
+.c12 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c12 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c8 {
   overflow: visible;
   font-size: 2rem;
@@ -8088,7 +8327,7 @@ exports[`DatePicker component popover placement should render properly with "rig
   display: inline-block;
 }
 
-.c13 {
+.c14 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -8102,7 +8341,7 @@ exports[`DatePicker component popover placement should render properly with "rig
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -8166,6 +8405,8 @@ exports[`DatePicker component popover placement should render properly with "rig
 }
 
 .c2 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -8181,13 +8422,13 @@ exports[`DatePicker component popover placement should render properly with "rig
   justify-content: space-between;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c15 {
+.c16 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -8218,20 +8459,20 @@ exports[`DatePicker component popover placement should render properly with "rig
   align-items: center;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #eff2f4;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -8261,29 +8502,29 @@ exports[`DatePicker component popover placement should render properly with "rig
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
-.c17 span {
+.c18 span {
   font-weight: bold;
 }
 
-.c17,
-.c17:hover {
+.c18,
+.c18:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -8313,16 +8554,16 @@ exports[`DatePicker component popover placement should render properly with "rig
   align-items: center;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
 }
 
-.c18:disabled {
+.c19:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c18:hover {
+.c19:hover {
   background-color: #eff2f4;
 }
 
@@ -8461,22 +8702,22 @@ exports[`DatePicker component popover placement should render properly with "rig
   margin: 0.8rem 0.8rem 0.8rem 0;
 }
 
-.c4 .c20 {
+.c4 .c21 {
   margin: 0;
   caret-color: transparent;
 }
 
-.c4 .c20 label {
+.c4 .c21 label {
   pointer-events: none;
 }
 
-.c4 .c20 div,
-.c4 .c20 input,
-.c4 .c20 label {
+.c4 .c21 div,
+.c4 .c21 input,
+.c4 .c21 label {
   cursor: pointer;
 }
 
-.c4 .c20 .c21 {
+.c4 .c21 .c22 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -8506,17 +8747,17 @@ exports[`DatePicker component popover placement should render properly with "rig
   overflow: auto;
 }
 
-.c3 .c20 {
+.c3 .c21 {
   min-width: unset;
   max-width: 9.5rem;
 }
 
-.c3 .c20 > div {
+.c3 .c21 > div {
   height: 3.5rem;
   padding: 0 0 0 1rem;
 }
 
-.c14 {
+.c15 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -8526,7 +8767,7 @@ exports[`DatePicker component popover placement should render properly with "rig
   margin-bottom: 0.8rem;
 }
 
-.c19 .c0 {
+.c20 .c0 {
   z-index: 4;
   position: absolute;
   bottom: 0;
@@ -8654,426 +8895,441 @@ exports[`DatePicker component popover placement should render properly with "rig
         />
       </svg>
     </button>
+    <svg
+      class="c12"
+      fill="none"
+      height="1em"
+      title="dob-calendar-close-icon"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        fill="#000"
+        fill-opacity=".54"
+      />
+    </svg>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       M
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       W
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       F
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <button
-      class="c15"
+      class="c16"
       title="Sun Dec 29 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Mon Dec 30 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Tue Dec 31 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c17"
+      class="c18"
       title="Wed Jan 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 02 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         2
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 03 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         3
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 04 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         4
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 05 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         5
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 06 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         6
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 07 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         7
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 08 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         8
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 09 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         9
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 10 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         10
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 11 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         11
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 12 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         12
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 13 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         13
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 14 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         14
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 15 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         15
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 16 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         16
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 17 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         17
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 18 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         18
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 19 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         19
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 20 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         20
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 21 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         21
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 22 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         22
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 23 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         23
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 24 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         24
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 25 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         25
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 26 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         26
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 27 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         27
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 28 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         28
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 29 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 30 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 31 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Sat Feb 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
@@ -9083,6 +9339,21 @@ exports[`DatePicker component popover placement should render properly with "rig
 `;
 
 exports[`DatePicker component popover placement should render properly with "right-start" position 1`] = `
+.c12 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c12 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c8 {
   overflow: visible;
   font-size: 2rem;
@@ -9127,7 +9398,7 @@ exports[`DatePicker component popover placement should render properly with "rig
   display: inline-block;
 }
 
-.c13 {
+.c14 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -9141,7 +9412,7 @@ exports[`DatePicker component popover placement should render properly with "rig
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -9205,6 +9476,8 @@ exports[`DatePicker component popover placement should render properly with "rig
 }
 
 .c2 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -9220,13 +9493,13 @@ exports[`DatePicker component popover placement should render properly with "rig
   justify-content: space-between;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c15 {
+.c16 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -9257,20 +9530,20 @@ exports[`DatePicker component popover placement should render properly with "rig
   align-items: center;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #eff2f4;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -9300,29 +9573,29 @@ exports[`DatePicker component popover placement should render properly with "rig
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
-.c17 span {
+.c18 span {
   font-weight: bold;
 }
 
-.c17,
-.c17:hover {
+.c18,
+.c18:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -9352,16 +9625,16 @@ exports[`DatePicker component popover placement should render properly with "rig
   align-items: center;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
 }
 
-.c18:disabled {
+.c19:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c18:hover {
+.c19:hover {
   background-color: #eff2f4;
 }
 
@@ -9500,22 +9773,22 @@ exports[`DatePicker component popover placement should render properly with "rig
   margin: 0.8rem 0.8rem 0.8rem 0;
 }
 
-.c4 .c20 {
+.c4 .c21 {
   margin: 0;
   caret-color: transparent;
 }
 
-.c4 .c20 label {
+.c4 .c21 label {
   pointer-events: none;
 }
 
-.c4 .c20 div,
-.c4 .c20 input,
-.c4 .c20 label {
+.c4 .c21 div,
+.c4 .c21 input,
+.c4 .c21 label {
   cursor: pointer;
 }
 
-.c4 .c20 .c21 {
+.c4 .c21 .c22 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -9545,17 +9818,17 @@ exports[`DatePicker component popover placement should render properly with "rig
   overflow: auto;
 }
 
-.c3 .c20 {
+.c3 .c21 {
   min-width: unset;
   max-width: 9.5rem;
 }
 
-.c3 .c20 > div {
+.c3 .c21 > div {
   height: 3.5rem;
   padding: 0 0 0 1rem;
 }
 
-.c14 {
+.c15 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -9565,7 +9838,7 @@ exports[`DatePicker component popover placement should render properly with "rig
   margin-bottom: 0.8rem;
 }
 
-.c19 .c0 {
+.c20 .c0 {
   z-index: 4;
   position: absolute;
   top: 0%;
@@ -9693,426 +9966,441 @@ exports[`DatePicker component popover placement should render properly with "rig
         />
       </svg>
     </button>
+    <svg
+      class="c12"
+      fill="none"
+      height="1em"
+      title="dob-calendar-close-icon"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        fill="#000"
+        fill-opacity=".54"
+      />
+    </svg>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       M
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       W
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       F
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <button
-      class="c15"
+      class="c16"
       title="Sun Dec 29 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Mon Dec 30 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Tue Dec 31 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c17"
+      class="c18"
       title="Wed Jan 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 02 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         2
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 03 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         3
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 04 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         4
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 05 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         5
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 06 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         6
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 07 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         7
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 08 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         8
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 09 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         9
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 10 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         10
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 11 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         11
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 12 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         12
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 13 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         13
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 14 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         14
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 15 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         15
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 16 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         16
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 17 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         17
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 18 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         18
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 19 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         19
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 20 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         20
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 21 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         21
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 22 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         22
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 23 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         23
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 24 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         24
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 25 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         25
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 26 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         26
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 27 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         27
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 28 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         28
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 29 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 30 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 31 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Sat Feb 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
@@ -10122,6 +10410,21 @@ exports[`DatePicker component popover placement should render properly with "rig
 `;
 
 exports[`DatePicker component popover placement should render properly with "top" position 1`] = `
+.c12 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c12 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c8 {
   overflow: visible;
   font-size: 2rem;
@@ -10166,7 +10469,7 @@ exports[`DatePicker component popover placement should render properly with "top
   display: inline-block;
 }
 
-.c13 {
+.c14 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -10180,7 +10483,7 @@ exports[`DatePicker component popover placement should render properly with "top
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -10244,6 +10547,8 @@ exports[`DatePicker component popover placement should render properly with "top
 }
 
 .c2 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -10259,13 +10564,13 @@ exports[`DatePicker component popover placement should render properly with "top
   justify-content: space-between;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c15 {
+.c16 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -10296,20 +10601,20 @@ exports[`DatePicker component popover placement should render properly with "top
   align-items: center;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #eff2f4;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -10339,29 +10644,29 @@ exports[`DatePicker component popover placement should render properly with "top
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
-.c17 span {
+.c18 span {
   font-weight: bold;
 }
 
-.c17,
-.c17:hover {
+.c18,
+.c18:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -10391,16 +10696,16 @@ exports[`DatePicker component popover placement should render properly with "top
   align-items: center;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
 }
 
-.c18:disabled {
+.c19:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c18:hover {
+.c19:hover {
   background-color: #eff2f4;
 }
 
@@ -10539,22 +10844,22 @@ exports[`DatePicker component popover placement should render properly with "top
   margin: 0.8rem 0.8rem 0.8rem 0;
 }
 
-.c4 .c20 {
+.c4 .c21 {
   margin: 0;
   caret-color: transparent;
 }
 
-.c4 .c20 label {
+.c4 .c21 label {
   pointer-events: none;
 }
 
-.c4 .c20 div,
-.c4 .c20 input,
-.c4 .c20 label {
+.c4 .c21 div,
+.c4 .c21 input,
+.c4 .c21 label {
   cursor: pointer;
 }
 
-.c4 .c20 .c21 {
+.c4 .c21 .c22 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -10584,17 +10889,17 @@ exports[`DatePicker component popover placement should render properly with "top
   overflow: auto;
 }
 
-.c3 .c20 {
+.c3 .c21 {
   min-width: unset;
   max-width: 9.5rem;
 }
 
-.c3 .c20 > div {
+.c3 .c21 > div {
   height: 3.5rem;
   padding: 0 0 0 1rem;
 }
 
-.c14 {
+.c15 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -10604,7 +10909,7 @@ exports[`DatePicker component popover placement should render properly with "top
   margin-bottom: 0.8rem;
 }
 
-.c19 .c0 {
+.c20 .c0 {
   z-index: 4;
   position: absolute;
   bottom: calc(100% + 0px);
@@ -10735,426 +11040,441 @@ exports[`DatePicker component popover placement should render properly with "top
         />
       </svg>
     </button>
+    <svg
+      class="c12"
+      fill="none"
+      height="1em"
+      title="dob-calendar-close-icon"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        fill="#000"
+        fill-opacity=".54"
+      />
+    </svg>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       M
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       W
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       F
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <button
-      class="c15"
+      class="c16"
       title="Sun Dec 29 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Mon Dec 30 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Tue Dec 31 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c17"
+      class="c18"
       title="Wed Jan 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 02 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         2
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 03 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         3
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 04 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         4
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 05 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         5
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 06 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         6
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 07 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         7
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 08 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         8
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 09 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         9
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 10 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         10
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 11 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         11
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 12 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         12
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 13 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         13
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 14 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         14
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 15 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         15
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 16 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         16
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 17 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         17
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 18 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         18
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 19 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         19
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 20 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         20
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 21 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         21
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 22 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         22
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 23 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         23
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 24 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         24
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 25 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         25
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 26 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         26
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 27 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         27
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 28 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         28
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 29 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 30 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 31 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Sat Feb 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
@@ -11164,6 +11484,21 @@ exports[`DatePicker component popover placement should render properly with "top
 `;
 
 exports[`DatePicker component popover placement should render properly with "top-end" position 1`] = `
+.c12 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c12 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c8 {
   overflow: visible;
   font-size: 2rem;
@@ -11208,7 +11543,7 @@ exports[`DatePicker component popover placement should render properly with "top
   display: inline-block;
 }
 
-.c13 {
+.c14 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -11222,7 +11557,7 @@ exports[`DatePicker component popover placement should render properly with "top
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -11286,6 +11621,8 @@ exports[`DatePicker component popover placement should render properly with "top
 }
 
 .c2 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -11301,13 +11638,13 @@ exports[`DatePicker component popover placement should render properly with "top
   justify-content: space-between;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c15 {
+.c16 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -11338,20 +11675,20 @@ exports[`DatePicker component popover placement should render properly with "top
   align-items: center;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #eff2f4;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -11381,29 +11718,29 @@ exports[`DatePicker component popover placement should render properly with "top
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
-.c17 span {
+.c18 span {
   font-weight: bold;
 }
 
-.c17,
-.c17:hover {
+.c18,
+.c18:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -11433,16 +11770,16 @@ exports[`DatePicker component popover placement should render properly with "top
   align-items: center;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
 }
 
-.c18:disabled {
+.c19:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c18:hover {
+.c19:hover {
   background-color: #eff2f4;
 }
 
@@ -11581,22 +11918,22 @@ exports[`DatePicker component popover placement should render properly with "top
   margin: 0.8rem 0.8rem 0.8rem 0;
 }
 
-.c4 .c20 {
+.c4 .c21 {
   margin: 0;
   caret-color: transparent;
 }
 
-.c4 .c20 label {
+.c4 .c21 label {
   pointer-events: none;
 }
 
-.c4 .c20 div,
-.c4 .c20 input,
-.c4 .c20 label {
+.c4 .c21 div,
+.c4 .c21 input,
+.c4 .c21 label {
   cursor: pointer;
 }
 
-.c4 .c20 .c21 {
+.c4 .c21 .c22 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -11626,17 +11963,17 @@ exports[`DatePicker component popover placement should render properly with "top
   overflow: auto;
 }
 
-.c3 .c20 {
+.c3 .c21 {
   min-width: unset;
   max-width: 9.5rem;
 }
 
-.c3 .c20 > div {
+.c3 .c21 > div {
   height: 3.5rem;
   padding: 0 0 0 1rem;
 }
 
-.c14 {
+.c15 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -11646,7 +11983,7 @@ exports[`DatePicker component popover placement should render properly with "top
   margin-bottom: 0.8rem;
 }
 
-.c19 .c0 {
+.c20 .c0 {
   z-index: 4;
   position: absolute;
   bottom: calc(100% + 0px);
@@ -11774,426 +12111,441 @@ exports[`DatePicker component popover placement should render properly with "top
         />
       </svg>
     </button>
+    <svg
+      class="c12"
+      fill="none"
+      height="1em"
+      title="dob-calendar-close-icon"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        fill="#000"
+        fill-opacity=".54"
+      />
+    </svg>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       M
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       W
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       F
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <button
-      class="c15"
+      class="c16"
       title="Sun Dec 29 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Mon Dec 30 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Tue Dec 31 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c17"
+      class="c18"
       title="Wed Jan 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 02 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         2
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 03 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         3
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 04 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         4
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 05 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         5
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 06 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         6
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 07 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         7
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 08 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         8
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 09 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         9
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 10 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         10
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 11 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         11
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 12 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         12
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 13 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         13
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 14 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         14
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 15 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         15
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 16 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         16
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 17 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         17
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 18 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         18
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 19 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         19
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 20 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         20
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 21 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         21
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 22 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         22
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 23 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         23
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 24 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         24
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 25 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         25
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 26 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         26
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 27 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         27
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 28 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         28
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 29 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 30 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 31 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Sat Feb 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
@@ -12203,6 +12555,21 @@ exports[`DatePicker component popover placement should render properly with "top
 `;
 
 exports[`DatePicker component popover placement should render properly with "top-start" position 1`] = `
+.c12 {
+  overflow: visible;
+  font-size: 2.4rem;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  cursor: pointer;
+}
+
+.c12 * {
+  fill-opacity: 1;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  fill: #607890;
+}
+
 .c8 {
   overflow: visible;
   font-size: 2rem;
@@ -12247,7 +12614,7 @@ exports[`DatePicker component popover placement should render properly with "top
   display: inline-block;
 }
 
-.c13 {
+.c14 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -12261,7 +12628,7 @@ exports[`DatePicker component popover placement should render properly with "top
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   margin: 0;
   color: inherit;
   font-size: 1.4rem;
@@ -12325,6 +12692,8 @@ exports[`DatePicker component popover placement should render properly with "top
 }
 
 .c2 {
+  padding: 0 0.8rem;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -12340,13 +12709,13 @@ exports[`DatePicker component popover placement should render properly with "top
   justify-content: space-between;
 }
 
-.c12 {
+.c13 {
   display: grid;
   grid-template-columns: repeat(7,4rem);
   grid-auto-rows: auto;
 }
 
-.c15 {
+.c16 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -12377,20 +12746,20 @@ exports[`DatePicker component popover placement should render properly with "top
   align-items: center;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c15:hover {
+.c16:hover {
   background-color: #eff2f4;
 }
 
-.c17 {
+.c18 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -12420,29 +12789,29 @@ exports[`DatePicker component popover placement should render properly with "top
   align-items: center;
 }
 
-.c17:focus {
+.c18:focus {
   outline: none;
 }
 
-.c17:disabled {
+.c18:disabled {
   cursor: not-allowed;
 }
 
-.c17:hover {
+.c18:hover {
   background-color: #eff2f4;
 }
 
-.c17 span {
+.c18 span {
   font-weight: bold;
 }
 
-.c17,
-.c17:hover {
+.c18,
+.c18:hover {
   background-color: #3872D2;
   color: #ffffff;
 }
 
-.c18 {
+.c19 {
   background-color: transparent;
   border: 0.2rem solid transparent;
   -webkit-text-decoration: none;
@@ -12472,16 +12841,16 @@ exports[`DatePicker component popover placement should render properly with "top
   align-items: center;
 }
 
-.c18:focus {
+.c19:focus {
   outline: none;
 }
 
-.c18:disabled {
+.c19:disabled {
   cursor: not-allowed;
   color: #b0bcc8;
 }
 
-.c18:hover {
+.c19:hover {
   background-color: #eff2f4;
 }
 
@@ -12620,22 +12989,22 @@ exports[`DatePicker component popover placement should render properly with "top
   margin: 0.8rem 0.8rem 0.8rem 0;
 }
 
-.c4 .c20 {
+.c4 .c21 {
   margin: 0;
   caret-color: transparent;
 }
 
-.c4 .c20 label {
+.c4 .c21 label {
   pointer-events: none;
 }
 
-.c4 .c20 div,
-.c4 .c20 input,
-.c4 .c20 label {
+.c4 .c21 div,
+.c4 .c21 input,
+.c4 .c21 label {
   cursor: pointer;
 }
 
-.c4 .c20 .c21 {
+.c4 .c21 .c22 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -12665,17 +13034,17 @@ exports[`DatePicker component popover placement should render properly with "top
   overflow: auto;
 }
 
-.c3 .c20 {
+.c3 .c21 {
   min-width: unset;
   max-width: 9.5rem;
 }
 
-.c3 .c20 > div {
+.c3 .c21 > div {
   height: 3.5rem;
   padding: 0 0 0 1rem;
 }
 
-.c14 {
+.c15 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -12685,7 +13054,7 @@ exports[`DatePicker component popover placement should render properly with "top
   margin-bottom: 0.8rem;
 }
 
-.c19 .c0 {
+.c20 .c0 {
   z-index: 4;
   position: absolute;
   bottom: calc(100% + 0px);
@@ -12813,426 +13182,441 @@ exports[`DatePicker component popover placement should render properly with "top
         />
       </svg>
     </button>
+    <svg
+      class="c12"
+      fill="none"
+      height="1em"
+      title="dob-calendar-close-icon"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        fill="#000"
+        fill-opacity=".54"
+      />
+    </svg>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       M
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       W
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       T
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       F
     </strong>
     <strong
-      class="c13 c14"
+      class="c14 c15"
     >
       S
     </strong>
     <button
-      class="c15"
+      class="c16"
       title="Sun Dec 29 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Mon Dec 30 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Tue Dec 31 2019"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c17"
+      class="c18"
       title="Wed Jan 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 02 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         2
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 03 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         3
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 04 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         4
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 05 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         5
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 06 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         6
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 07 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         7
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 08 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         8
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 09 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         9
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 10 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         10
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 11 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         11
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 12 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         12
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 13 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         13
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 14 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         14
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 15 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         15
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 16 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         16
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 17 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         17
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 18 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         18
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 19 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         19
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 20 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         20
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 21 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         21
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 22 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         22
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 23 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         23
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 24 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         24
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sat Jan 25 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         25
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Sun Jan 26 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         26
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Mon Jan 27 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         27
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Tue Jan 28 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         28
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Wed Jan 29 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         29
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Thu Jan 30 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         30
       </span>
     </button>
     <button
-      class="c18"
+      class="c19"
       title="Fri Jan 31 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         31
       </span>
     </button>
     <button
-      class="c15"
+      class="c16"
       title="Sat Feb 01 2020"
       type="button"
     >
       <span
-        class="c16"
+        class="c17"
       >
         1
       </span>
diff --git a/packages/core/src/components/DateRangePicker/DateRangeCalendar/DateRangeCalendar.styled.tsx b/packages/core/src/components/DateRangePicker/DateRangeCalendar/DateRangeCalendar.styled.tsx
index 521774cb4..3ec84d2da 100644
--- a/packages/core/src/components/DateRangePicker/DateRangeCalendar/DateRangeCalendar.styled.tsx
+++ b/packages/core/src/components/DateRangePicker/DateRangeCalendar/DateRangeCalendar.styled.tsx
@@ -45,6 +45,8 @@ export const DateRangeCalendar = styled(DatePickerStyled.Calendar)<{ size: 'S' |
         `}
 `;
 export const Header = styled.div`
+    padding: 1.6rem 1.6rem 0;
+    box-sizing: border-box;
     width: 100%;
     display: flex;
     align-items: center;
diff --git a/packages/core/src/components/DateRangePicker/DateRangeCalendar/DateRangeCalendar.tsx b/packages/core/src/components/DateRangePicker/DateRangeCalendar/DateRangeCalendar.tsx
index b048a5ff2..b55c96adc 100644
--- a/packages/core/src/components/DateRangePicker/DateRangeCalendar/DateRangeCalendar.tsx
+++ b/packages/core/src/components/DateRangePicker/DateRangeCalendar/DateRangeCalendar.tsx
@@ -1,4 +1,4 @@
-import { KeyboardArrowLeftIcon, KeyboardArrowRightIcon } from '@medly-components/icons';
+import { CloseIcon, KeyboardArrowLeftIcon, KeyboardArrowRightIcon } from '@medly-components/icons';
 import { WithStyle, useMediaQuery } from '@medly-components/utils';
 import { add } from 'date-fns';
 import type { FC } from 'react';
@@ -24,6 +24,7 @@ const Component: FC<Props> = memo(props => {
             maxSelectableDate,
             withSingleMonth,
             autoSelectEndDateIn,
+            onClose,
             ...restProps
         } = props,
         { startDate, endDate } = selectedDates;
@@ -141,6 +142,15 @@ const Component: FC<Props> = memo(props => {
                 <DatePickerStyled.MonthNavigation id={`${id}-navigation-forward`} onClick={handleNextIconClick}>
                     <KeyboardArrowRightIcon title={`${id}-navigation-forward-icon`} />
                 </DatePickerStyled.MonthNavigation>
+                {_withSingleMonth && (
+                    <CloseIcon
+                        title={`${id}-close-icon`}
+                        onClick={event => {
+                            event.stopPropagation();
+                            onClose();
+                        }}
+                    />
+                )}
             </Styled.Header>
             <Styled.MonthsWrapper
                 key={month}
diff --git a/packages/core/src/components/DateRangePicker/DateRangeCalendar/Month/Styled/Month.styled.tsx b/packages/core/src/components/DateRangePicker/DateRangeCalendar/Month/Styled/Month.styled.tsx
index 629fb533e..4bc3f2393 100644
--- a/packages/core/src/components/DateRangePicker/DateRangeCalendar/Month/Styled/Month.styled.tsx
+++ b/packages/core/src/components/DateRangePicker/DateRangeCalendar/Month/Styled/Month.styled.tsx
@@ -5,7 +5,7 @@ import Text from '../../../../Text';
 export const Wrapper = styled.div`
     position: relative;
     ${CalendarStyled.CalendarGrid} {
-        padding: 0 2rem 2rem;
+        padding: 0 1.6rem 1.6rem;
     }
 `;
 
@@ -13,5 +13,5 @@ export const MonthText = styled(Text)`
     user-select: none;
     display: block;
     width: 100%;
-    margin: 2.7rem 0 1.5rem;
+    margin: 1.1rem 0 1.5rem;
 `;
diff --git a/packages/core/src/components/DateRangePicker/DateRangeCalendar/types.ts b/packages/core/src/components/DateRangePicker/DateRangeCalendar/types.ts
index 6a809093e..ca71e2bd4 100644
--- a/packages/core/src/components/DateRangePicker/DateRangeCalendar/types.ts
+++ b/packages/core/src/components/DateRangePicker/DateRangeCalendar/types.ts
@@ -16,4 +16,5 @@ export type Props = Omit<HTMLProps<HTMLDivElement>, 'size'> & {
     focusedElement?: FOCUS_ELEMENT;
     onFocusChange?: (element: FOCUS_ELEMENT) => void;
     autoSelectEndDateIn?: number;
+    onClose: () => void;
 };
diff --git a/packages/core/src/components/DateRangePicker/DateRangePicker.test.tsx b/packages/core/src/components/DateRangePicker/DateRangePicker.test.tsx
index 25fcef961..ee428986c 100644
--- a/packages/core/src/components/DateRangePicker/DateRangePicker.test.tsx
+++ b/packages/core/src/components/DateRangePicker/DateRangePicker.test.tsx
@@ -82,6 +82,17 @@ describe('DateRangePicker', () => {
         expect(container).toMatchSnapshot();
     });
 
+    it('should close the popover on click on close icon', () => {
+        const { container } = renderComponent({
+            withSingleMonth: true,
+            value: { startDate: new Date(2010, 0, 1), endDate: new Date(2010, 0, 2) }
+        });
+        fireEvent.click(screen.getByTitle('contract-calendar-icon'));
+        expect(container.querySelector('#contract-calendar')).toBeVisible();
+        fireEvent.click(screen.getByTitle('contract-calendar-close-icon'));
+        expect(container.querySelector('#contract-calendar')).toBeNull();
+    });
+
     describe('popover placement', () => {
         afterEach(cleanup);
 
diff --git a/packages/core/src/components/DateRangePicker/DateRangePicker.tsx b/packages/core/src/components/DateRangePicker/DateRangePicker.tsx
index a942606b6..91be5d8a7 100644
--- a/packages/core/src/components/DateRangePicker/DateRangePicker.tsx
+++ b/packages/core/src/components/DateRangePicker/DateRangePicker.tsx
@@ -147,6 +147,7 @@ export const DateRangePicker: FC<DateRangeProps> = memo(props => {
                         placement={popoverPlacement!}
                         selectedDates={value}
                         withSingleMonth={withSingleMonth}
+                        onClose={() => setActive(false)}
                         onDateSelection={onChange}
                         focusedElement={focusedElement}
                         onFocusChange={onFocusChange}
diff --git a/packages/core/src/components/DateRangePicker/__snapshots__/DateRangePicker.test.tsx.snap b/packages/core/src/components/DateRangePicker/__snapshots__/DateRangePicker.test.tsx.snap
index 8532f0a6c..f719de4f4 100644
--- a/packages/core/src/components/DateRangePicker/__snapshots__/DateRangePicker.test.tsx.snap
+++ b/packages/core/src/components/DateRangePicker/__snapshots__/DateRangePicker.test.tsx.snap
@@ -2630,6 +2630,8 @@ exports[`DateRangePicker popover placement should render properly with "bottom"
 }
 
 .c1 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3018,7 +3020,7 @@ exports[`DateRangePicker popover placement should render properly with "bottom"
 }
 
 .c7 .c11 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c10 {
@@ -3028,7 +3030,7 @@ exports[`DateRangePicker popover placement should render properly with "bottom"
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c25 .c4:first-of-type {
@@ -4430,6 +4432,8 @@ exports[`DateRangePicker popover placement should render properly with "bottom-e
 }
 
 .c1 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4818,7 +4822,7 @@ exports[`DateRangePicker popover placement should render properly with "bottom-e
 }
 
 .c7 .c11 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c10 {
@@ -4828,7 +4832,7 @@ exports[`DateRangePicker popover placement should render properly with "bottom-e
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c25 .c4:first-of-type {
@@ -6230,6 +6234,8 @@ exports[`DateRangePicker popover placement should render properly with "bottom-s
 }
 
 .c1 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6618,7 +6624,7 @@ exports[`DateRangePicker popover placement should render properly with "bottom-s
 }
 
 .c7 .c11 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c10 {
@@ -6628,7 +6634,7 @@ exports[`DateRangePicker popover placement should render properly with "bottom-s
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c25 .c4:first-of-type {
@@ -8032,6 +8038,8 @@ exports[`DateRangePicker popover placement should render properly with "left" po
 }
 
 .c1 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -8420,7 +8428,7 @@ exports[`DateRangePicker popover placement should render properly with "left" po
 }
 
 .c7 .c11 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c10 {
@@ -8430,7 +8438,7 @@ exports[`DateRangePicker popover placement should render properly with "left" po
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c25 .c4:first-of-type {
@@ -9831,6 +9839,8 @@ exports[`DateRangePicker popover placement should render properly with "left-end
 }
 
 .c1 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -10219,7 +10229,7 @@ exports[`DateRangePicker popover placement should render properly with "left-end
 }
 
 .c7 .c11 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c10 {
@@ -10229,7 +10239,7 @@ exports[`DateRangePicker popover placement should render properly with "left-end
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c25 .c4:first-of-type {
@@ -11630,6 +11640,8 @@ exports[`DateRangePicker popover placement should render properly with "left-sta
 }
 
 .c1 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -12018,7 +12030,7 @@ exports[`DateRangePicker popover placement should render properly with "left-sta
 }
 
 .c7 .c11 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c10 {
@@ -12028,7 +12040,7 @@ exports[`DateRangePicker popover placement should render properly with "left-sta
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c25 .c4:first-of-type {
@@ -13432,6 +13444,8 @@ exports[`DateRangePicker popover placement should render properly with "right" p
 }
 
 .c1 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -13820,7 +13834,7 @@ exports[`DateRangePicker popover placement should render properly with "right" p
 }
 
 .c7 .c11 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c10 {
@@ -13830,7 +13844,7 @@ exports[`DateRangePicker popover placement should render properly with "right" p
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c25 .c4:first-of-type {
@@ -15231,6 +15245,8 @@ exports[`DateRangePicker popover placement should render properly with "right-en
 }
 
 .c1 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -15619,7 +15635,7 @@ exports[`DateRangePicker popover placement should render properly with "right-en
 }
 
 .c7 .c11 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c10 {
@@ -15629,7 +15645,7 @@ exports[`DateRangePicker popover placement should render properly with "right-en
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c25 .c4:first-of-type {
@@ -17030,6 +17046,8 @@ exports[`DateRangePicker popover placement should render properly with "right-st
 }
 
 .c1 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -17418,7 +17436,7 @@ exports[`DateRangePicker popover placement should render properly with "right-st
 }
 
 .c7 .c11 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c10 {
@@ -17428,7 +17446,7 @@ exports[`DateRangePicker popover placement should render properly with "right-st
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c25 .c4:first-of-type {
@@ -18832,6 +18850,8 @@ exports[`DateRangePicker popover placement should render properly with "top" pos
 }
 
 .c1 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -19220,7 +19240,7 @@ exports[`DateRangePicker popover placement should render properly with "top" pos
 }
 
 .c7 .c11 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c10 {
@@ -19230,7 +19250,7 @@ exports[`DateRangePicker popover placement should render properly with "top" pos
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c25 .c4:first-of-type {
@@ -20631,6 +20651,8 @@ exports[`DateRangePicker popover placement should render properly with "top-end"
 }
 
 .c1 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -21019,7 +21041,7 @@ exports[`DateRangePicker popover placement should render properly with "top-end"
 }
 
 .c7 .c11 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c10 {
@@ -21029,7 +21051,7 @@ exports[`DateRangePicker popover placement should render properly with "top-end"
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c25 .c4:first-of-type {
@@ -22430,6 +22452,8 @@ exports[`DateRangePicker popover placement should render properly with "top-star
 }
 
 .c1 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -22818,7 +22842,7 @@ exports[`DateRangePicker popover placement should render properly with "top-star
 }
 
 .c7 .c11 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c10 {
@@ -22828,7 +22852,7 @@ exports[`DateRangePicker popover placement should render properly with "top-star
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c25 .c4:first-of-type {
@@ -24438,6 +24462,8 @@ exports[`DateRangePicker should render properly 1`] = `
 }
 
 .c16 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -24826,7 +24852,7 @@ exports[`DateRangePicker should render properly 1`] = `
 }
 
 .c21 .c25 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c24 {
@@ -24836,7 +24862,7 @@ exports[`DateRangePicker should render properly 1`] = `
   user-select: none;
   display: block;
   width: 100%;
-  margin: 2.7rem 0 1.5rem;
+  margin: 1.1rem 0 1.5rem;
 }
 
 .c4 {
@@ -26890,6 +26916,8 @@ exports[`DateRangePicker should render properly with single month 1`] = `
 }
 
 .c17 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -27278,7 +27306,7 @@ exports[`DateRangePicker should render properly with single month 1`] = `
 }
 
 .c29 .c30 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c5 {
@@ -27679,6 +27707,21 @@ exports[`DateRangePicker should render properly with single month 1`] = `
             />
           </svg>
         </button>
+        <svg
+          class="c3 c4"
+          fill="none"
+          height="1em"
+          title="contract-calendar-close-icon"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+            fill="#000"
+            fill-opacity=".54"
+          />
+        </svg>
       </div>
       <div
         class="c28"
@@ -28843,6 +28886,8 @@ exports[`DateRangePicker should render properly with single month for mobile scr
 }
 
 .c17 {
+  padding: 1.6rem 1.6rem 0;
+  box-sizing: border-box;
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -29231,7 +29276,7 @@ exports[`DateRangePicker should render properly with single month for mobile scr
 }
 
 .c29 .c30 {
-  padding: 0 2rem 2rem;
+  padding: 0 1.6rem 1.6rem;
 }
 
 .c5 {
@@ -29632,6 +29677,21 @@ exports[`DateRangePicker should render properly with single month for mobile scr
             />
           </svg>
         </button>
+        <svg
+          class="c3 c4"
+          fill="none"
+          height="1em"
+          title="contract-calendar-close-icon"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+            fill="#000"
+            fill-opacity=".54"
+          />
+        </svg>
       </div>
       <div
         class="c28"