@innovaccer/design-system 2.7.0 → 2.8.0-0

package/core/components/molecules/popover/__tests__/__snapshots__/Popover.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", dark: false
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -19,7 +20,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     Popover
   </div>
@@ -30,6 +31,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", dark: true
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -45,7 +47,7 @@ exports[`Popover component
     class="Popover Popover--dark"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     Popover
   </div>
@@ -56,6 +58,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "bottom"
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -71,7 +74,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     Popover
   </div>
@@ -82,6 +85,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "bottom-end"
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -97,7 +101,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top right; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     Popover
   </div>
@@ -108,6 +112,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "bottom-start"
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -123,7 +128,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     Popover
   </div>
@@ -134,6 +139,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "top"
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -149,7 +155,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: bottom; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     Popover
   </div>
@@ -160,6 +166,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "top-end"
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -175,7 +182,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: bottom right; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     Popover
   </div>
@@ -186,6 +193,7 @@ exports[`Popover component
   appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", position: "top-start"
  1`] = `
 <DocumentFragment>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -201,7 +209,7 @@ exports[`Popover component
     class="Popover"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: bottom left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     Popover
   </div>

package/core/components/molecules/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -25,6 +26,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -45,6 +47,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -65,6 +68,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -85,6 +89,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -105,6 +110,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -125,6 +131,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >
@@ -145,6 +152,7 @@ exports[`Tooltip component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger"
     >

package/core/components/organisms/calendar/__tests__/__snapshots__/Calendar.test.tsx.snap

@@ -11248,11 +11248,11 @@ exports[`Calendar component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--large Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--link Text--regular"
+                class="Text Text--default Text--regular"
                 data-test="DesignSystem-Text"
               >
                 2021
@@ -11263,11 +11263,11 @@ exports[`Calendar component
             class="Calendar-valueRow"
           >
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--large Calendar-value--currDateMonthYear"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--default Text--regular"
+                class="Text Text--link Text--regular"
                 data-test="DesignSystem-Text"
               >
                 2022
@@ -15555,11 +15555,11 @@ exports[`Calendar component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--small Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--small"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--link Text--small"
+                class="Text Text--default Text--small"
                 data-test="DesignSystem-Text"
               >
                 2021
@@ -15570,11 +15570,11 @@ exports[`Calendar component
             class="Calendar-valueRow"
           >
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--small"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--small Calendar-value--currDateMonthYear"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--default Text--small"
+                class="Text Text--link Text--small"
                 data-test="DesignSystem-Text"
               >
                 2022

package/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -645,7 +645,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:disabledAfter
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip-action--disabled"
+          class="Chip-wrapper Chip Chip-action--disabled"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -1307,7 +1307,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:disabledBefore
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -1969,7 +1969,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:disabledBefore
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip-action--disabled"
+          class="Chip-wrapper Chip Chip-action--disabled"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -2630,7 +2630,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:open
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -3291,7 +3291,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:open
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -3952,7 +3952,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:view
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -4208,7 +4208,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:view
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -4363,11 +4363,11 @@ exports[`DatePicker component snapshots renders snapshot for prop:view
                   </span>
                 </div>
                 <div
-                  class="Calendar-value Calendar-yearValue Calendar-yearValue--large Calendar-value--currDateMonthYear"
+                  class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
                   data-test="DesignSystem-Calendar--yearValue"
                 >
                   <span
-                    class="Text Text--link Text--regular"
+                    class="Text Text--default Text--regular"
                     data-test="DesignSystem-Text"
                   >
                     2021
@@ -4378,11 +4378,11 @@ exports[`DatePicker component snapshots renders snapshot for prop:view
                 class="Calendar-valueRow"
               >
                 <div
-                  class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
+                  class="Calendar-value Calendar-yearValue Calendar-yearValue--large Calendar-value--currDateMonthYear"
                   data-test="DesignSystem-Calendar--yearValue"
                 >
                   <span
-                    class="Text Text--default Text--regular"
+                    class="Text Text--link Text--regular"
                     data-test="DesignSystem-Text"
                   >
                     2022
@@ -4457,7 +4457,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:view
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -5118,7 +5118,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:withInput
         data-test="DesignSystem-Select--TodaysDate-wrapper"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-Chip--GenericChip"
         >
           <span
@@ -5139,6 +5139,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:withInput
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >

package/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap

@@ -39233,11 +39233,11 @@ exports[`DateRangePicker component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-monthValue Calendar-monthValue--large Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
               data-test="DesignSystem-Calendar--monthValue"
             >
               <span
-                class="Text Text--link Text--regular"
+                class="Text Text--default Text--regular"
                 data-test="DesignSystem-Text"
               >
                 Dec
@@ -39386,11 +39386,11 @@ exports[`DateRangePicker component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--large Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--link Text--regular"
+                class="Text Text--default Text--regular"
                 data-test="DesignSystem-Text"
               >
                 2021
@@ -39401,11 +39401,11 @@ exports[`DateRangePicker component
             class="Calendar-valueRow"
           >
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--large Calendar-value--currDateMonthYear"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--default Text--regular"
+                class="Text Text--link Text--regular"
                 data-test="DesignSystem-Text"
               >
                 2022
@@ -39483,6 +39483,7 @@ exports[`DateRangePicker component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -39641,6 +39642,7 @@ exports[`DateRangePicker component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -39799,6 +39801,7 @@ exports[`DateRangePicker component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -40807,11 +40810,11 @@ exports[`DateRangePicker component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-monthValue Calendar-monthValue--small Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-monthValue Calendar-monthValue--small"
               data-test="DesignSystem-Calendar--monthValue"
             >
               <span
-                class="Text Text--link Text--small"
+                class="Text Text--default Text--small"
                 data-test="DesignSystem-Text"
               >
                 Dec
@@ -40960,11 +40963,11 @@ exports[`DateRangePicker component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--small Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--small"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--link Text--small"
+                class="Text Text--default Text--small"
                 data-test="DesignSystem-Text"
               >
                 2021
@@ -40975,11 +40978,11 @@ exports[`DateRangePicker component
             class="Calendar-valueRow"
           >
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--small"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--small Calendar-value--currDateMonthYear"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--default Text--small"
+                class="Text Text--link Text--small"
                 data-test="DesignSystem-Text"
               >
                 2022
@@ -41057,6 +41060,7 @@ exports[`DateRangePicker component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -41215,6 +41219,7 @@ exports[`DateRangePicker component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -41373,6 +41378,7 @@ exports[`DateRangePicker component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -42381,11 +42387,11 @@ exports[`DateRangePicker component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-monthValue Calendar-monthValue--large Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
               data-test="DesignSystem-Calendar--monthValue"
             >
               <span
-                class="Text Text--link Text--regular"
+                class="Text Text--default Text--regular"
                 data-test="DesignSystem-Text"
               >
                 Dec
@@ -42534,11 +42540,11 @@ exports[`DateRangePicker component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--large Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--link Text--regular"
+                class="Text Text--default Text--regular"
                 data-test="DesignSystem-Text"
               >
                 2021
@@ -42549,11 +42555,11 @@ exports[`DateRangePicker component
             class="Calendar-valueRow"
           >
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--large Calendar-value--currDateMonthYear"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--default Text--regular"
+                class="Text Text--link Text--regular"
                 data-test="DesignSystem-Text"
               >
                 2022
@@ -42631,6 +42637,7 @@ exports[`DateRangePicker component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -42785,7 +42792,7 @@ exports[`DateRangePicker component
     class="Popover DateRangePicker DateRangePicker--left"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     <div
       class="Calendar-wrapper"
@@ -43802,6 +43809,7 @@ exports[`DateRangePicker component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -43956,7 +43964,7 @@ exports[`DateRangePicker component
     class="Popover DateRangePicker DateRangePicker--left"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     <div
       class="Calendar-wrapper"
@@ -44973,6 +44981,7 @@ exports[`DateRangePicker component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -45127,7 +45136,7 @@ exports[`DateRangePicker component
     class="Popover DateRangePicker DateRangePicker--left"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     <div
       class="Calendar-wrapper"
@@ -46994,11 +47003,11 @@ exports[`DateRangePicker component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-monthValue Calendar-monthValue--small Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-monthValue Calendar-monthValue--small"
               data-test="DesignSystem-Calendar--monthValue"
             >
               <span
-                class="Text Text--link Text--small"
+                class="Text Text--default Text--small"
                 data-test="DesignSystem-Text"
               >
                 Dec
@@ -47147,11 +47156,11 @@ exports[`DateRangePicker component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--small Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--small"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--link Text--small"
+                class="Text Text--default Text--small"
                 data-test="DesignSystem-Text"
               >
                 2021
@@ -47162,11 +47171,11 @@ exports[`DateRangePicker component
             class="Calendar-valueRow"
           >
             <div
-              class="Calendar-value Calendar-yearValue Calendar-yearValue--small"
+              class="Calendar-value Calendar-yearValue Calendar-yearValue--small Calendar-value--currDateMonthYear"
               data-test="DesignSystem-Calendar--yearValue"
             >
               <span
-                class="Text Text--default Text--small"
+                class="Text Text--link Text--small"
                 data-test="DesignSystem-Text"
               >
                 2022
@@ -47244,6 +47253,7 @@ exports[`DateRangePicker component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -47398,7 +47408,7 @@ exports[`DateRangePicker component
     class="Popover DateRangePicker DateRangePicker--left"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     <div
       class="Calendar-wrapper"
@@ -48415,6 +48425,7 @@ exports[`DateRangePicker component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -48569,7 +48580,7 @@ exports[`DateRangePicker component
     class="Popover DateRangePicker DateRangePicker--left"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     <div
       class="Calendar-wrapper"
@@ -49586,6 +49597,7 @@ exports[`DateRangePicker component
  1`] = `
 <body>
   <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -49740,7 +49752,7 @@ exports[`DateRangePicker component
     class="Popover DateRangePicker DateRangePicker--left"
     data-layer="true"
     data-test="DesignSystem-Popover"
-    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
+    style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none; transform-origin: top left; animation: popper-open- 120ms cubic-bezier(0, 0, 0.38, 0.9);"
   >
     <div
       class="Calendar-wrapper"