From ab80799a647563a146f582adb086561e5d32cef8 Mon Sep 17 00:00:00 2001
From: Chaitanya Deorukhkar <deorukhkarchaitanya@gmail.com>
Date: Thu, 11 Jan 2024 17:28:16 +0530
Subject: [PATCH] update snapshots

---
 packages/blade/rebranded-components.js        |  5 ++
 .../__snapshots__/BaseInput.ssr.test.tsx.snap | 38 +++++------
 .../__snapshots__/BaseInput.web.test.tsx.snap | 62 +++++++++---------
 .../__snapshots__/OTPInput.ssr.test.tsx.snap  | 30 ++++-----
 .../__snapshots__/OTPInput.web.test.tsx.snap  | 28 ++++----
 .../PasswordInput.ssr.test.tsx.snap           | 52 +++++++--------
 .../PasswordInput.web.test.tsx.snap           | 38 +++++------
 .../__snapshots__/TextArea.ssr.test.tsx.snap  | 30 ++++-----
 .../__snapshots__/TextArea.web.test.tsx.snap  | 56 ++++++++--------
 .../__snapshots__/TextInput.ssr.test.tsx.snap | 38 +++++------
 .../__snapshots__/TextInput.web.test.tsx.snap | 64 +++++++++----------
 11 files changed, 223 insertions(+), 218 deletions(-)

diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js
index 294aa75dd17..333f33693a2 100644
--- a/packages/blade/rebranded-components.js
+++ b/packages/blade/rebranded-components.js
@@ -34,6 +34,11 @@ const rebrandedComponents = [
   'Switch',
   'Radio',
   'Checkbox',
+  'BaseInput',
+  'TextInput',
+  'PasswordInput',
+  'OTPInput',
+  'TextArea',
 ];
 
 module.exports = { rebrandedComponents };
diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
index fd6f23d0b80..fa9d2606ec8 100644
--- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BaseInput /> should display success validation state 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="name-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO ddbvjp" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fRrfTw" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  kbENFz"><input type="text" id="name-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="name-undefined-successtext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dBzbMg"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" clip-rule="evenodd" fill="hsla(160, 100%, 26%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO gKXlrl" id="name-undefined-successtext-undefined" data-blade-component="base-text">Success</span></span></div></div></div></div></div>"`;
+exports[`<BaseInput /> should display success validation state 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="name-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  kEPOL"><input type="text" id="name-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="name-undefined-successtext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 keHBlw"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div id="name-undefined-successtext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" clip-rule="evenodd" fill="hsla(150, 100%, 21%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO hfLSMt" data-blade-component="text">Success</span></span></div></div></div></div></div>"`;
 
 exports[`<BaseInput /> should display success validation state 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -95,7 +95,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -117,7 +117,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -134,7 +134,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c15.c15.c15.c15.c15 {
-  color: hsla(160,100%,26%,1);
+  color: hsla(150,100%,21%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.6875rem;
   font-weight: 400;
@@ -151,7 +151,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -183,7 +183,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -200,7 +200,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -217,7 +217,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -234,7 +234,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -260,14 +260,14 @@ exports[`<BaseInput /> should display success validation state 2`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(155,100%,31%,0.09);
-  border-bottom-color: hsla(160,100%,26%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-bottom-color: hsla(150,100%,32%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -284,8 +284,8 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(155,100%,31%,0.09);
-  border-bottom-color: hsla(160,100%,26%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-bottom-color: hsla(150,100%,32%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -308,8 +308,8 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(155,100%,31%,0.09);
-  border-bottom-color: hsla(160,100%,26%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-bottom-color: hsla(150,100%,32%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -421,6 +421,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
         <div
           class="c12"
           data-blade-component="base-box"
+          id="name-1-successtext-5"
         >
           <span
             class="c13"
@@ -440,7 +441,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
                 clip-rule="evenodd"
                 d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z"
                 data-blade-component="svg-path"
-                fill="hsla(160, 100%, 26%, 1)"
+                fill="hsla(150, 100%, 21%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
@@ -450,8 +451,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
             />
             <span
               class="c15"
-              data-blade-component="base-text"
-              id="name-1-successtext-5"
+              data-blade-component="text"
             >
               Success
             </span>
diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap
index b54990f7804..76ab512c06e 100644
--- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap
@@ -71,7 +71,7 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -93,7 +93,7 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -110,7 +110,7 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -142,7 +142,7 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -159,7 +159,7 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -176,7 +176,7 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -193,7 +193,7 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -219,14 +219,14 @@ exports[`<BaseInput /> should render 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -243,8 +243,8 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -267,8 +267,8 @@ exports[`<BaseInput /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -484,7 +484,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -506,7 +506,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -523,7 +523,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -555,7 +555,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c10.c10.c10.c10.c10::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -572,7 +572,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c10.c10.c10.c10.c10::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -589,7 +589,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c10.c10.c10.c10.c10:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -606,7 +606,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c10.c10.c10.c10.c10::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -632,14 +632,14 @@ exports[`<BaseInput /> should render with icons 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -656,8 +656,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -680,8 +680,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -784,14 +784,14 @@ exports[`<BaseInput /> should render with icons 1`] = `
                 clip-rule="evenodd"
                 d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
                 fill-rule="evenodd"
               />
               <path
                 clip-rule="evenodd"
                 d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
@@ -829,7 +829,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
               <path
                 d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 22%, 56%, 1)"
               />
             </svg>
           </div>
diff --git a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap
index 36c444d3a44..9e530f7b4e4 100644
--- a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<OTPInput /> should have hidden input for form submissions 1`] = `"<div id="root"><div data-blade-component="otp-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx gbruaa"><label for="otp-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO ddbvjp" data-blade-component="text">Enter OTP</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fRrfTw" data-blade-component="text"></p></div></div></div></label><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input hidden="" id="otp-undefined-input-undefined" name="otpInput" readonly="" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx kYybk"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-0-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label="Enter OTP character 1" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 fqXanQ" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-1-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 2" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 fqXanQ" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-2-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 3" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 fqXanQ" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-3-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 4" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 fqXanQ" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-4-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 5" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 fqXanQ" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-5-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 6" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 fqXanQ" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"></div></div></div>"`;
+exports[`<OTPInput /> should have hidden input for form submissions 1`] = `"<div id="root"><div data-blade-component="otp-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx gbruaa"><label for="otp-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Enter OTP</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><input hidden="" id="otp-undefined-input-undefined" name="otpInput" readonly="" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx kYybk"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-0-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label="Enter OTP character 1" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 olDXE" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-1-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 2" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 olDXE" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-2-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 3" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 olDXE" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-3-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 4" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 olDXE" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-4-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 5" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 olDXE" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx emHbgU"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><input name="otpInput" type="text" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-5-undefined-input-undefined" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 6" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 olDXE" value=""/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"></div></div></div>"`;
 
 exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -78,7 +78,7 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -100,7 +100,7 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -117,7 +117,7 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -150,7 +150,7 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c10.c10.c10.c10.c10::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -168,7 +168,7 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c10.c10.c10.c10.c10::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -186,7 +186,7 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c10.c10.c10.c10.c10:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -204,7 +204,7 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c10.c10.c10.c10.c10::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -231,14 +231,14 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c9.c9.c9.c9.c9 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -255,8 +255,8 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c9.c9.c9.c9.c9:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -279,8 +279,8 @@ exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
diff --git a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.web.test.tsx.snap b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.web.test.tsx.snap
index c827c39f10d..2482ce9c5b7 100644
--- a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.web.test.tsx.snap
@@ -76,7 +76,7 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -98,7 +98,7 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -115,7 +115,7 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c10.c10.c10.c10.c10 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -148,7 +148,7 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c10.c10.c10.c10.c10::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -166,7 +166,7 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c10.c10.c10.c10.c10::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -184,7 +184,7 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c10.c10.c10.c10.c10:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -202,7 +202,7 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c10.c10.c10.c10.c10::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -229,14 +229,14 @@ exports[`<OTPInput /> should render 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c9.c9.c9.c9.c9 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -253,8 +253,8 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c9.c9.c9.c9.c9:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -277,8 +277,8 @@ exports[`<OTPInput /> should render 1`] = `
 }
 
 .c9.c9.c9.c9.c9:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
diff --git a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap
index 0293c30d577..6a8c058511a 100644
--- a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PasswordInput /> should display error validation state 1`] = `"<div id="root"><div data-blade-component="password-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="password-field-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO ddbvjp" data-blade-component="text">Enter password</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fRrfTw" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  cCQTka"><input type="password" autoCapitalize="none" enterKeyHint="done" id="password-field-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="true" aria-describedby="password-field-undefined-errortext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 lkFKAn"/><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><button type="button" aria-label="Show password" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 dOswfI"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path><path d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(8, 73%, 47%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO fVNdNw" id="password-field-undefined-errortext-undefined" data-blade-component="base-text">Error</span></span></div></div></div></div></div>"`;
+exports[`<PasswordInput /> should display error validation state 1`] = `"<div id="root"><div data-blade-component="password-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="password-field-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Enter password</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  hiwnfH"><input type="password" autoCapitalize="none" enterKeyHint="done" id="password-field-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="true" aria-describedby="password-field-undefined-errortext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 ePmaXL"/><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx fTNRoG"><button type="button" aria-label="Show password" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 jlRABJ"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path><path d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div id="password-field-undefined-errortext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(0, 83%, 33%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(0, 83%, 33%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(0, 83%, 33%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO jzbDUU" data-blade-component="text">Error</span></span></div></div></div></div></div>"`;
 
 exports[`<PasswordInput /> should display error validation state 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -127,7 +127,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -149,7 +149,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -166,7 +166,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c18.c18.c18.c18.c18 {
-  color: hsla(8,73%,47%,1);
+  color: hsla(0,83%,33%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.6875rem;
   font-weight: 400;
@@ -183,7 +183,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -215,7 +215,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -232,7 +232,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -249,7 +249,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -266,7 +266,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -292,14 +292,14 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(9,91%,56%,0.09);
-  border-bottom-color: hsla(8,73%,47%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-bottom-color: hsla(4,74%,49%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -316,8 +316,8 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(9,91%,56%,0.09);
-  border-bottom-color: hsla(8,73%,47%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-bottom-color: hsla(4,74%,49%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -340,8 +340,8 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(9,91%,56%,0.09);
-  border-bottom-color: hsla(8,73%,47%,1);
+  background-color: hsla(4,74%,49%,0.09);
+  border-bottom-color: hsla(4,74%,49%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -392,7 +392,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -402,17 +402,17 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
 }
 
 .c11.c11.c11.c11.c11:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c11.c11.c11.c11.c11:focus-visible {
   outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
+  color: hsla(211,26%,34%,1);
 }
 
 .c11.c11.c11.c11.c11:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 <div
@@ -537,6 +537,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
         <div
           class="c15"
           data-blade-component="base-box"
+          id="password-field-1-errortext-3"
         >
           <span
             class="c16"
@@ -555,18 +556,18 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
               <path
                 d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                 data-blade-component="svg-path"
-                fill="hsla(8, 73%, 47%, 1)"
+                fill="hsla(0, 83%, 33%, 1)"
               />
               <path
                 d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                 data-blade-component="svg-path"
-                fill="hsla(8, 73%, 47%, 1)"
+                fill="hsla(0, 83%, 33%, 1)"
               />
               <path
                 clip-rule="evenodd"
                 d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                 data-blade-component="svg-path"
-                fill="hsla(8, 73%, 47%, 1)"
+                fill="hsla(0, 83%, 33%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
@@ -576,8 +577,7 @@ exports[`<PasswordInput /> should display error validation state 2`] = `
             />
             <span
               class="c18"
-              data-blade-component="base-text"
-              id="password-field-1-errortext-3"
+              data-blade-component="text"
             >
               Error
             </span>
diff --git a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap
index 62b23e838bb..4111c7973c2 100644
--- a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.web.test.tsx.snap
@@ -103,7 +103,7 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -125,7 +125,7 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -142,7 +142,7 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -174,7 +174,7 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -191,7 +191,7 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -208,7 +208,7 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -225,7 +225,7 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -251,14 +251,14 @@ exports[`<PasswordInput /> should render 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -275,8 +275,8 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -299,8 +299,8 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -351,7 +351,7 @@ exports[`<PasswordInput /> should render 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -361,17 +361,17 @@ exports[`<PasswordInput /> should render 1`] = `
 }
 
 .c11.c11.c11.c11.c11:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c11.c11.c11.c11.c11:focus-visible {
   outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09);
+  color: hsla(211,26%,34%,1);
 }
 
 .c11.c11.c11.c11.c11:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 <div>
diff --git a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap
index f81f318efb2..b1c15956982 100644
--- a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TextArea /> should render TextArea on server and have autofocus on client 1`] = `"<div id="root"><div data-blade-component="textarea" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx WiWSl"><label for="textarea-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO ddbvjp" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fRrfTw" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  bHuzXQ"><textarea type="text" rows="2" id="textarea-undefined-input-undefined" autofocus="" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 iZBOBH"></textarea><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div>"`;
+exports[`<TextArea /> should render TextArea on server and have autofocus on client 1`] = `"<div id="root"><div data-blade-component="textarea" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx WiWSl"><label for="textarea-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  ePpXbk"><textarea type="text" rows="2" id="textarea-undefined-input-undefined" autofocus="" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 gVFbOH"></textarea><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div>"`;
 
 exports[`<TextArea /> should render TextArea on server and have autofocus on client 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -76,7 +76,7 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -98,7 +98,7 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -115,7 +115,7 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -146,7 +146,7 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -163,7 +163,7 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -180,7 +180,7 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -197,7 +197,7 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -223,14 +223,14 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -251,8 +251,8 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -275,8 +275,8 @@ exports[`<TextArea /> should render TextArea on server and have autofocus on cli
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
diff --git a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.web.test.tsx.snap b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.web.test.tsx.snap
index da82dd82f6b..b3c481a3ad8 100644
--- a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.web.test.tsx.snap
@@ -74,7 +74,7 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -96,7 +96,7 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -113,7 +113,7 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -144,7 +144,7 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -161,7 +161,7 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -178,7 +178,7 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -195,7 +195,7 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -221,14 +221,14 @@ exports[`<TextArea /> should render 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -249,8 +249,8 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -273,8 +273,8 @@ exports[`<TextArea /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -460,7 +460,7 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -482,7 +482,7 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -499,7 +499,7 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -530,7 +530,7 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -547,7 +547,7 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -564,7 +564,7 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -581,7 +581,7 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -607,14 +607,14 @@ exports[`<TextArea /> should set number of lines 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -635,8 +635,8 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -659,8 +659,8 @@ exports[`<TextArea /> should set number of lines 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
diff --git a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap
index 21fba2be1a1..956468c61bc 100644
--- a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TextInput /> should render TextInput 1`] = `"<div id="root"><div data-blade-component="textinput" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="textinput-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO ddbvjp" data-blade-component="text">Enter company website</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fRrfTw" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  buJvLF"><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx hdqaij"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(216, 27%, 36%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx gqvBWc"><p class="StyledBaseText-dVBfTO hFmabA" data-blade-component="text">https://</p></div></div><input type="url" inputMode="url" autoCapitalize="none" enterKeyHint="go" autoComplete="off" id="textinput-undefined-input-undefined" placeholder="something" prefix="https://" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 iZPoFc"/><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx SGzvk"><p class="StyledBaseText-dVBfTO hFmabA" data-blade-component="text">.com</p></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div>"`;
+exports[`<TextInput /> should render TextInput 1`] = `"<div id="root"><div data-blade-component="textinput" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="textinput-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Enter company website</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  inxdRN"><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx hdqaij"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx gqvBWc"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">https://</p></div></div><input type="url" inputMode="url" autoCapitalize="none" enterKeyHint="go" autoComplete="off" id="textinput-undefined-input-undefined" placeholder="something" prefix="https://" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 gpfLQk"/><div data-blade-component="base-box" class="BaseBox-bmPWx hGaCmA"><div data-blade-component="base-box" class="BaseBox-bmPWx SGzvk"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">.com</p></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx qIbA"></div></div></div></div>"`;
 
 exports[`<TextInput /> should render TextInput 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -106,7 +106,7 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -128,7 +128,7 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -145,7 +145,7 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -162,7 +162,7 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -194,7 +194,7 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c12.c12.c12.c12.c12::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -211,7 +211,7 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c12.c12.c12.c12.c12::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -228,7 +228,7 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c12.c12.c12.c12.c12:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -245,7 +245,7 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c12.c12.c12.c12.c12::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -271,14 +271,14 @@ exports[`<TextInput /> should render TextInput 2`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -295,8 +295,8 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -319,8 +319,8 @@ exports[`<TextInput /> should render TextInput 2`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -424,18 +424,18 @@ exports[`<TextInput /> should render TextInput 2`] = `
               <path
                 d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
               />
               <path
                 d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
               />
               <path
                 clip-rule="evenodd"
                 d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
diff --git a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.web.test.tsx.snap b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.web.test.tsx.snap
index 61c35fee632..b6cd2e5f960 100644
--- a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.web.test.tsx.snap
@@ -71,7 +71,7 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -93,7 +93,7 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -110,7 +110,7 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -142,7 +142,7 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -159,7 +159,7 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -176,7 +176,7 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -193,7 +193,7 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -219,14 +219,14 @@ exports[`<TextInput /> should render 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -243,8 +243,8 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -267,8 +267,8 @@ exports[`<TextInput /> should render 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -487,7 +487,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -509,7 +509,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -526,7 +526,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c11.c11.c11.c11.c11 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -543,7 +543,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c12.c12.c12.c12.c12 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -575,7 +575,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c12.c12.c12.c12.c12::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -592,7 +592,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c12.c12.c12.c12.c12::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -609,7 +609,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c12.c12.c12.c12.c12:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -626,7 +626,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c12.c12.c12.c12.c12::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -652,14 +652,14 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -676,8 +676,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(216,15%,54%,0.18);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -700,8 +700,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(216,15%,54%,0.09);
-  border-bottom-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.09);
+  border-bottom-color: hsla(211,20%,52%,0.18);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -803,18 +803,18 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
               <path
                 d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
               />
               <path
                 d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
               />
               <path
                 clip-rule="evenodd"
                 d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
                 data-blade-component="svg-path"
-                fill="hsla(216, 27%, 36%, 1)"
+                fill="hsla(211, 26%, 34%, 1)"
                 fill-rule="evenodd"
               />
             </svg>