From 618602d21953133566ca6bf9a36558f386adcb13 Mon Sep 17 00:00:00 2001
From: Praveen Murali <itspraveenmurali@gmail.com>
Date: Thu, 21 Nov 2024 18:16:27 +0530
Subject: [PATCH 1/7] Convert static `px` values to `rem` for improved
 accessibility and scalability (#2380)

* Convert px units to rem in Button component

* Convert px units to rem in Spinner component

* Convert px units to rem in Checkbox component

* Convert px units to rem in Radio component

* Convert px units to rem in Switch component

* Convert px units to rem in Input component

* Convert px units to rem in Select component

* Convert px units to rem in Dropdown component

* Convert px units to rem in Email component

* Convert px units to rem in Tag component

* Convert px units to rem in Tab component

* Convert px units to rem in Accordion component

* Convert px units to rem in Avatar component

* Convert px units to rem in Pagination component

* Convert px units to rem in ColorPicker component

* Convert px units to rem in Date component

* Convert px units to rem in Time component

* Convert px units to rem in KBD component

* Convert px units to rem in Modal component
---
 src/styles/components/_accordion.scss        | 16 ++--
 src/styles/components/_avatar.scss           | 32 +++----
 src/styles/components/_button.scss           | 34 +++----
 src/styles/components/_checkbox.scss         |  4 +-
 src/styles/components/_color-picker.scss     | 44 ++++-----
 src/styles/components/_date-time-picker.scss | 94 +++++++++++---------
 src/styles/components/_dropdown.scss         | 20 ++---
 src/styles/components/_email-input.scss      | 10 +--
 src/styles/components/_input.scss            | 52 +++++------
 src/styles/components/_kbd.scss              | 10 +--
 src/styles/components/_modal.scss            | 34 +++----
 src/styles/components/_pagination.scss       | 14 +--
 src/styles/components/_radio.scss            | 10 +--
 src/styles/components/_select.scss           | 54 +++++------
 src/styles/components/_spinner.scss          | 10 +--
 src/styles/components/_switch.scss           | 16 ++--
 src/styles/components/_tab.scss              | 10 +--
 src/styles/components/_tag.scss              | 22 ++---
 18 files changed, 246 insertions(+), 240 deletions(-)

diff --git a/src/styles/components/_accordion.scss b/src/styles/components/_accordion.scss
index 260214d26..0065b44f5 100644
--- a/src/styles/components/_accordion.scss
+++ b/src/styles/components/_accordion.scss
@@ -11,18 +11,18 @@
   --neeto-ui-accordion-wrapper-border-radius: 0px;
 
   // Item
-  --neeto-ui-accordion-item-padding-x: 8px;
-  --neeto-ui-accordion-item-padding-y: 16px;
+  --neeto-ui-accordion-item-padding-x: 0.5rem;
+  --neeto-ui-accordion-item-padding-y: 1rem;
   --neeto-ui-accordion-item-font-size: var(--neeto-ui-text-base);
   --neeto-ui-accordion-item-font-weight: var(--neeto-ui-font-medium);
-  --neeto-ui-accordion-item-line-height: 16px;
+  --neeto-ui-accordion-item-line-height: 1rem;
   --neeto-ui-accordion-item-color: rgb(var(--neeto-ui-gray-800));
   --neeto-ui-accordion-item-bg-color: transparent;
 
   // Drop
-  --neeto-ui-accordion-drop-padding-x: 8px;
-  --neeto-ui-accordion-drop-padding-top: 4px;
-  --neeto-ui-accordion-drop-padding-bottom: 16px;
+  --neeto-ui-accordion-drop-padding-x: 0.5rem;
+  --neeto-ui-accordion-drop-padding-top: 0.25rem;
+  --neeto-ui-accordion-drop-padding-bottom: 1rem;
   --neeto-ui-accordion-drop-color: rgb(var(--neeto-ui-gray-800));
   --neeto-ui-accordion-drop-margin-bottom: 0px;
 
@@ -45,8 +45,8 @@
   background-color: var(--neeto-ui-accordion-outer-wrapper-bg-color);
 
   &--padded {
-    --neeto-ui-accordion-outer-wrapper-padding-x: 24px;
-    --neeto-ui-accordion-outer-wrapper-padding-y: 24px;
+    --neeto-ui-accordion-outer-wrapper-padding-x: 1.5rem;
+    --neeto-ui-accordion-outer-wrapper-padding-y: 1.5rem;
     --neeto-ui-accordion-outer-wrapper-border-radius: var(--neeto-ui-rounded-lg);
   }
 
diff --git a/src/styles/components/_avatar.scss b/src/styles/components/_avatar.scss
index 66082a06e..f7f1a287d 100644
--- a/src/styles/components/_avatar.scss
+++ b/src/styles/components/_avatar.scss
@@ -1,8 +1,8 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
   // Container
   --neeto-ui-avatar-container-border-radius: var(--neeto-ui-rounded);
-  --neeto-ui-avatar-container-width: 24px;
-  --neeto-ui-avatar-container-height: 24px;
+  --neeto-ui-avatar-container-width: 1.5rem;
+  --neeto-ui-avatar-container-height: 1.5rem;
 
   // Avatar
   --neeto-ui-avatar-width: 1.5rem;
@@ -10,8 +10,8 @@
   --neeto-ui-avatar-border-radius: var(--neeto-ui-rounded-full);
 
   // Status
-  --neeto-ui-avatar-status-width: 12px;
-  --neeto-ui-avatar-status-height: 12px;
+  --neeto-ui-avatar-status-width: 0.75rem;
+  --neeto-ui-avatar-status-height: 0.75rem;
   --neeto-ui-avatar-status-bg-color: var(--neeto-ui-white);
   --neeto-ui-avatar-status-border-width: 2px;
   --neeto-ui-avatar-status-border-color: rgb(var(--neeto-ui-white));
@@ -34,18 +34,18 @@
   }
 
   &--medium {
-    --neeto-ui-avatar-container-width: 32px;
-    --neeto-ui-avatar-container-height: 32px;
+    --neeto-ui-avatar-container-width: 2rem;
+    --neeto-ui-avatar-container-height: 2rem;
   }
 
   &--large {
-    --neeto-ui-avatar-container-width: 40px;
-    --neeto-ui-avatar-container-height: 40px;
+    --neeto-ui-avatar-container-width: 2.5rem;
+    --neeto-ui-avatar-container-height: 2.5rem;
   }
 
   &--xlarge {
-    --neeto-ui-avatar-container-width: 64px;
-    --neeto-ui-avatar-container-height: 64px;
+    --neeto-ui-avatar-container-width: 4rem;
+    --neeto-ui-avatar-container-height: 4rem;
   }
 
   .neeto-ui-avatar__status {
@@ -61,18 +61,18 @@
     z-index: 4;
 
     &.neeto-ui-avatar__status-medium {
-      --neeto-ui-avatar-status-width: 12px;
-      --neeto-ui-avatar-status-height: 12px;
+      --neeto-ui-avatar-status-width: 0.75rem;
+      --neeto-ui-avatar-status-height: 0.75rem;
     }
 
     &.neeto-ui-avatar__status-large {
-      --neeto-ui-avatar-status-width: 14px;
-      --neeto-ui-avatar-status-height: 14px;
+      --neeto-ui-avatar-status-width: 0.875rem;
+      --neeto-ui-avatar-status-height: 0.875rem;
     }
 
     &.neeto-ui-avatar__status-xlarge {
-      --neeto-ui-avatar-status-width: 16px;
-      --neeto-ui-avatar-status-height: 16px;
+      --neeto-ui-avatar-status-width: 1rem;
+      --neeto-ui-avatar-status-height: 1rem;
     }
 
     &.online {
diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
index 5ee4544fb..39f6b226c 100644
--- a/src/styles/components/_button.scss
+++ b/src/styles/components/_button.scss
@@ -1,16 +1,16 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
-  --neeto-ui-btn-padding-x: 8px;
-  --neeto-ui-btn-padding-y: 6px;
+  --neeto-ui-btn-padding-x: 0.5rem;
+  --neeto-ui-btn-padding-y: 0.375rem;
   --neeto-ui-btn-font-size: var(--neeto-ui-text-sm);
   --neeto-ui-btn-font-weight: var(--neeto-ui-font-medium);
-  --neeto-ui-btn-line-height: 16px;
+  --neeto-ui-btn-line-height: 1rem;
   --neeto-ui-btn-color: rgb(var(--neeto-ui-black));
   --neeto-ui-btn-bg-color: transparent;
   --neeto-ui-btn-border-width: 0;
   --neeto-ui-btn-border-color: transparent;
   --neeto-ui-btn-border-radius: var(--neeto-ui-rounded);
-  --neeto-ui-btn-gap: 4px;
-  --neeto-ui-btn-icon-size: 16px;
+  --neeto-ui-btn-gap: 0.25rem;
+  --neeto-ui-btn-icon-size: 1rem;
   --neeto-ui-btn-box-shadow: none;
   --neeto-ui-btn-outline: none;
 
@@ -60,8 +60,8 @@
   cursor: pointer;
 
   &.neeto-ui-btn--icon-only {
-    --neeto-ui-btn-padding-x: 6px;
-    --neeto-ui-btn-padding-y: 6px;
+    --neeto-ui-btn-padding-x: 0.375rem;
+    --neeto-ui-btn-padding-y: 0.375rem;
 
     .neeto-ui-btn__icon,
     .neeto-ui-btn__spinner svg {
@@ -73,23 +73,23 @@
 
   // size - medium - 32px
   &--size-medium {
-    --neeto-ui-btn-padding-x: 16px;
-    --neeto-ui-btn-padding-y: 8px;
-    --neeto-ui-btn-gap: 8px;
-    --neeto-ui-btn-icon-size: 20px;
+    --neeto-ui-btn-padding-x: 1rem;
+    --neeto-ui-btn-padding-y: 0.5rem;
+    --neeto-ui-btn-gap: 0.5rem;
+    --neeto-ui-btn-icon-size: 1.25rem;
   }
 
   // size - large - 40px
   &--size-large {
     --neeto-ui-btn-font-size: var(--neeto-ui-text-base);
-    --neeto-ui-btn-padding-x: 20px;
-    --neeto-ui-btn-padding-y: 12px;
-    --neeto-ui-btn-gap: 10px;
-    --neeto-ui-btn-icon-size: 24px;
+    --neeto-ui-btn-padding-x: 1.25rem;
+    --neeto-ui-btn-padding-y: 0.75rem;
+    --neeto-ui-btn-gap: 0.625rem;
+    --neeto-ui-btn-icon-size: 1.5rem;
 
     &.neeto-ui-btn--icon-only {
-      --neeto-ui-btn-padding-x: 8px;
-      --neeto-ui-btn-padding-y: 8px;
+      --neeto-ui-btn-padding-x: 0.5rem;
+      --neeto-ui-btn-padding-y: 0.5rem;
     }
   }
 
diff --git a/src/styles/components/_checkbox.scss b/src/styles/components/_checkbox.scss
index 1e3ea00f2..c3f9555ed 100644
--- a/src/styles/components/_checkbox.scss
+++ b/src/styles/components/_checkbox.scss
@@ -1,5 +1,5 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
-  --neeto-ui-checkbox-size: 16px;
+  --neeto-ui-checkbox-size: 1rem;
   --neeto-ui-checkbox-color: rgb(var(--neeto-ui-primary-500));
   --neeto-ui-checkbox-border-width: 2px;
   --neeto-ui-checkbox-border-color: rgb(var(--neeto-ui-gray-400));
@@ -24,7 +24,7 @@
   --neeto-ui-checkbox-checked-border-color: rgb(var(--neeto-ui-primary-500));
 
   // Margin
-  --neeto-ui-checkbox-label-margin: 8px;
+  --neeto-ui-checkbox-label-margin: 0.5rem;
   --neeto-ui-checkbox-label-line-height: 1.2;
 }
 
diff --git a/src/styles/components/_color-picker.scss b/src/styles/components/_color-picker.scss
index 2a1e432c7..3b7336052 100644
--- a/src/styles/components/_color-picker.scss
+++ b/src/styles/components/_color-picker.scss
@@ -1,18 +1,18 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
   // Popover
-  --neeto-ui-colorpicker-popover-width: 224px;
-  --neeto-ui-colorpicker-popover-padding: 12px;
+  --neeto-ui-colorpicker-popover-width: 14rem;
+  --neeto-ui-colorpicker-popover-padding: 0.75rem;
 
   // Pointer
-  --neeto-ui-colorpicker-pointer-width: 20px;
-  --neeto-ui-colorpicker-pointer-height: 20px;
+  --neeto-ui-colorpicker-pointer-width: 1.25rem;
+  --neeto-ui-colorpicker-pointer-height: 1.25rem;
 
   // Palette Wrapper
-  --neeto-ui-colorpicker-palette-wrapper-margin-bottom: 12px;
+  --neeto-ui-colorpicker-palette-wrapper-margin-bottom: 0.75rem;
 
   // Palette Item
-  --neeto-ui-colorpicker-palette-item-width: 32px;
-  --neeto-ui-colorpicker-palette-item-height: 32px;
+  --neeto-ui-colorpicker-palette-item-width: 2rem;
+  --neeto-ui-colorpicker-palette-item-height: 2rem;
   --neeto-ui-colorpicker-palette-item-border-width: 1px;
   --neeto-ui-colorpicker-palette-item-border-color: transparent;
   --neeto-ui-colorpicker-palette-item-border-radius: var(--neeto-ui-rounded-md);
@@ -20,16 +20,16 @@
   --neeto-ui-colorpicker-palette-item-margin-left: 1.25px;
 
   // Target Wrapper
-  --neeto-ui-colorpicker-target-wrapper-gap: 8px;
+  --neeto-ui-colorpicker-target-wrapper-gap: 0.5rem;
 
   // Target
   --neeto-ui-colorpicker-target-bg-color: rgb(var(--neeto-ui-white));
   --neeto-ui-colorpicker-target-border-radius: var(--neeto-ui-rounded);
   --neeto-ui-colorpicker-target-border-width: 1px;
   --neeto-ui-colorpicker-target-border-color: rgb(var(--neeto-ui-gray-400));
-  --neeto-ui-colorpicker-target-height: 28px;
-  --neeto-ui-colorpicker-target-padding: 8px;
-  --neeto-ui-colorpicker-target-gap: 12px;
+  --neeto-ui-colorpicker-target-height: 1.75rem;
+  --neeto-ui-colorpicker-target-padding: 0.5rem;
+  --neeto-ui-colorpicker-target-gap: 0.75rem;
 
   // Targer: Hover
   --neeto-ui-colorpicker-target-hover-border-color: rgb(var(--neeto-ui-gray-700));
@@ -41,14 +41,14 @@
 
   // Target - Color
   --neeto-ui-colorpicker-target-color-block-border-radius: var(--neeto-ui-rounded);
-  --neeto-ui-colorpicker-target-color-block-width: 20px;
-  --neeto-ui-colorpicker-target-color-block-height: 20px;
+  --neeto-ui-colorpicker-target-color-block-width: 1.25rem;
+  --neeto-ui-colorpicker-target-color-block-height: 1.25rem;
 
   // Target - Hexcode
   --neeto-ui-colorpicker-target-hexcode-font-size: var(--neeto-ui-text-sm);
   --neeto-ui-colorpicker-target-hexcode-color: rgb(var(--neeto-ui-gray-800));
   --neeto-ui-colorpicker-target-hexcode-font-weight: var(--neeto-ui-font-medium);
-  --neeto-ui-colorpicker-target-hexcode-min-width: 72px;
+  --neeto-ui-colorpicker-target-hexcode-min-width: 4.5rem;
 }
 
 .neeto-ui-colorpicker__dropdown{
@@ -151,17 +151,17 @@
   }
 
   &-size--medium {
-    --neeto-ui-colorpicker-target-height: 32px;
-    --neeto-ui-colorpicker-target-padding: 8px;
-    --neeto-ui-colorpicker-target-color-block-width: 24px;
-    --neeto-ui-colorpicker-target-color-block-height: 24px;
+    --neeto-ui-colorpicker-target-height: 2rem;
+    --neeto-ui-colorpicker-target-padding: 0.5rem;
+    --neeto-ui-colorpicker-target-color-block-width: 1.5rem;
+    --neeto-ui-colorpicker-target-color-block-height: 1.5rem;
   }
 
   &-size--large {
-    --neeto-ui-colorpicker-target-height: 40px;
-    --neeto-ui-colorpicker-target-padding: 12px;
-    --neeto-ui-colorpicker-target-color-block-width: 24px;
-    --neeto-ui-colorpicker-target-color-block-height: 24px;
+    --neeto-ui-colorpicker-target-height: 2.5rem;
+    --neeto-ui-colorpicker-target-padding: 0.75rem;
+    --neeto-ui-colorpicker-target-color-block-width: 1.5rem;
+    --neeto-ui-colorpicker-target-color-block-height: 1.5rem;
   }
 }
 
diff --git a/src/styles/components/_date-time-picker.scss b/src/styles/components/_date-time-picker.scss
index 4e53b95ad..dbc927b71 100644
--- a/src/styles/components/_date-time-picker.scss
+++ b/src/styles/components/_date-time-picker.scss
@@ -22,12 +22,12 @@
 
   // Prefix & Suffix
   --neeto-ui-date-input-prefix-suffix-color: rgb(var(--neeto-ui-gray-700));
-  --neeto-ui-date-input-prefix-suffix-size: 16px;
+  --neeto-ui-date-input-prefix-suffix-size: 1rem;
   --neeto-ui-date-input-focus-prefix-suffix-color: rgb(var(--neeto-ui-gray-700));
 
   // Cell
   --neeto-ui-date-input-cell-font-size: var(--neeto-ui-text-sm);
-  --neeto-ui-date-input-cell-height: 32px;
+  --neeto-ui-date-input-cell-height: 2rem;
   --neeto-ui-date-input-cell-border-radius: var(--neeto-ui-rounded-sm);
   --neeto-ui-date-input-cell-color: rgb(var(--neeto-ui-gray-800));
   --neeto-ui-date-input-cell-hover-bg-color: rgb(var(--neeto-ui-gray-200));
@@ -42,12 +42,12 @@
 
   // Footer
   --neeto-ui-date-input-footer-bg-color: rgb(var(--neeto-ui-gray-100));
-  --neeto-ui-date-input-footer-btn-padding-x: 8px;
-  --neeto-ui-date-input-footer-btn-padding-y: 5px;
-  --neeto-ui-date-input-footer-btn-gap: 4px;
+  --neeto-ui-date-input-footer-btn-padding-x: 0.5rem;
+  --neeto-ui-date-input-footer-btn-padding-y: 0.3125rem;
+  --neeto-ui-date-input-footer-btn-gap: 0.25rem;
   --neeto-ui-date-input-footer-btn-font-size: var(--neeto-ui-text-xs);
   --neeto-ui-date-input-footer-btn-font-weight: var(--neeto-ui-font-medium);
-  --neeto-ui-date-input-footer-btn-line-height: 16px;
+  --neeto-ui-date-input-footer-btn-line-height: 1rem;
   --neeto-ui-date-input-footer-btn-border-radius: var(--neeto-ui-rounded);
   --neeto-ui-date-input-footer-today-now-btn-color: rgb(var(--neeto-ui-gray-800));
   --neeto-ui-date-input-footer-today-now-btn-hover-color: rgb(var(--neeto-ui-gray-800));
@@ -60,14 +60,14 @@
   --neeto-ui-date-input-footer-ok-btn-disabled-opacity: 0.5;
 
   // Date Panel
-  --neeto-ui-date-panel-width: 320px;
-  --neeto-ui-date-panel-content-width: 272px;
+  --neeto-ui-date-panel-width: 20rem;
+  --neeto-ui-date-panel-content-width: 17rem;
   --neeto-ui-date-panel-content-header-color: rgb(var(--neeto-ui-gray-600));
   --neeto-ui-date-panel-content-header-font-size: var(--neeto-ui-text-xs);
 
 
   // Date Panel Dropdown
-  --neeto-ui-date-panel-dropdown-padding-y: 2px;
+  --neeto-ui-date-panel-dropdown-padding-y: 0.125rem;
 
   // Date Panel Container
   --neeto-ui-date-panel-container-border-width: 1px;
@@ -77,31 +77,31 @@
 
   // Date Panel Header
   --neeto-ui-date-panel-header-color: rgb(var(--neeto-ui-gray-800));
-  --neeto-ui-date-panel-header-min-height: 68px;
-  --neeto-ui-date-panel-header-padding-top: 12px;
+  --neeto-ui-date-panel-header-min-height: 4.25rem;
+  --neeto-ui-date-panel-header-padding-top: 0.75rem;
   --neeto-ui-date-panel-header-padding-bottom: 0px;
-  --neeto-ui-date-panel-header-padding-x: 24px;
+  --neeto-ui-date-panel-header-padding-x: 1.5rem;
   --neeto-ui-date-panel-header-border-bottom-width: 0px;
   --neeto-ui-date-panel-header-nav-btn-font-size: var(--neeto-ui-text-base);
   --neeto-ui-date-panel-header-nav-btn-font-weight: var(--neeto-ui-font-semibold);
-  --neeto-ui-date-panel-header-nav-btn-padding-right: 24px;
+  --neeto-ui-date-panel-header-nav-btn-padding-right: 1.5rem;
   --neeto-ui-date-panel-header-btn-color: rgb(var(--neeto-ui-gray-800));
 
   // Time Panel
-  --neeto-ui-time-panel-header-padding-top: 16px;
-  --neeto-ui-time-panel-header-padding-bottom: 8px;
-  --neeto-ui-time-panel-header-padding-x: 16px;
+  --neeto-ui-time-panel-header-padding-top: 1rem;
+  --neeto-ui-time-panel-header-padding-bottom: 0.5rem;
+  --neeto-ui-time-panel-header-padding-x: 1rem;
   --neeto-ui-time-panel-header-column-font-size: var(--neeto-ui-text-xs);
-  --neeto-ui-time-panel-header-column-line-height: 16px;
+  --neeto-ui-time-panel-header-column-line-height: 1rem;
   --neeto-ui-time-panel-header-column-color: rgb(var(--neeto-ui-gray-600));
-  --neeto-ui-time-panel-header-column-gap: 12px;
-  --neeto-ui-time-panel-body-gap: 12px;
-  --neeto-ui-time-panel-body-padding-x: 16px;
-  --neeto-ui-time-panel-column-width: 62px;
+  --neeto-ui-time-panel-header-column-gap: 0.75rem;
+  --neeto-ui-time-panel-body-gap: 0.75rem;
+  --neeto-ui-time-panel-body-padding-x: 1rem;
+  --neeto-ui-time-panel-column-width: 3.875rem;
   --neeto-ui-time-panel-column-border-left-color: rgb(var(--neeto-ui-gray-200));
   --neeto-ui-time-panel-cell-padding-x: 0px;
   --neeto-ui-time-panel-cell-color: rgb(var(--neeto-ui-gray-800));
-  --neeto-ui-time-panel-now-btn-margin-bottom: 22px;
+  --neeto-ui-time-panel-now-btn-margin-bottom: 1.375rem;
 
   // Time Input
   --neeto-ui-time-input-font-size: var(--neeto-ui-text-sm);
@@ -125,7 +125,7 @@
 
   // Prefix & Suffix
   --neeto-ui-time-input-prefix-suffix-color: rgb(var(--neeto-ui-gray-700));
-  --neeto-ui-time-input-prefix-suffix-size: 16px;
+  --neeto-ui-time-input-prefix-suffix-size: 1rem;
   --neeto-ui-time-input-focus-prefix-suffix-color: rgb(var(--neeto-ui-gray-700));
 
   // Date Time Picker
@@ -151,22 +151,23 @@
   box-shadow: var(--neeto-ui-date-input-box-shadow);
 
   &.neeto-ui-date-input--large {
-    --neeto-ui-date-input-padding-x: 12px;
-    --neeto-ui-date-input-padding-y: 8px;
+    --neeto-ui-date-input-padding-x: 0.75rem;
+    --neeto-ui-date-input-padding-y: 0.5rem;
   }
 
   &.neeto-ui-date-input--medium {
-    --neeto-ui-date-input-padding-x: 8px;
-    --neeto-ui-date-input-padding-y: 4px;
+    --neeto-ui-date-input-padding-x: 0.5rem;
+    --neeto-ui-date-input-padding-y: 0.25rem;
   }
 
   &.neeto-ui-date-input--small {
-    --neeto-ui-date-input-padding-x: 8px;
-    --neeto-ui-date-input-padding-y: 2px;
+    --neeto-ui-date-input-padding-x: 0.5rem;
+    --neeto-ui-date-input-padding-y: 0.125rem;
   }
 
   .ant-picker-input > input {
     color: var(--neeto-ui-date-input-color);
+    font-size: var(--neeto-ui-date-input-font-size);
   }
 
   &:hover:not(.neeto-ui-date-input--naked, .neeto-ui-date-input--disabled, .ant-picker-focused) {
@@ -242,18 +243,23 @@
   box-shadow: var(--neeto-ui-time-input-box-shadow);
 
   &.neeto-ui-time-input--large {
-    --neeto-ui-time-input-padding-x: 12px;
-    --neeto-ui-time-input-padding-y: 8px;
+    --neeto-ui-time-input-padding-x: 0.75rem;
+    --neeto-ui-time-input-padding-y: 0.5rem;
   }
 
   &.neeto-ui-time-input--medium {
-    --neeto-ui-time-input-padding-x: 8px;
-    --neeto-ui-time-input-padding-y: 4px;
+    --neeto-ui-time-input-padding-x: 0.5rem;
+    --neeto-ui-time-input-padding-y: 0.25rem;
   }
 
   &.neeto-ui-time-input--small {
-    --neeto-ui-time-input-padding-x: 8px;
-    --neeto-ui-time-input-padding-y: 2px;
+    --neeto-ui-time-input-padding-x: 0.5rem;
+    --neeto-ui-time-input-padding-y: 0.125rem;
+  }
+
+  .ant-picker-input > input {
+    color: var(--neeto-ui-time-input-color);
+    font-size: var(--neeto-ui-time-input-font-size);
   }
 
   &:hover:not(.neeto-ui-time-input--naked, .neeto-ui-time-input--disabled) {
@@ -364,8 +370,8 @@
     .ant-picker-body {
 
       @include viewport(xs-mob) {
-        padding-left: 8px;
-        padding-right: 8px;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
       }
 
       .ant-picker-content {
@@ -490,8 +496,8 @@
     border-bottom: var(--neeto-ui-date-panel-header-border-bottom-width);
 
     @include viewport(xs-mob) {
-      padding-left: 8px;
-      padding-right: 8px;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
     }
   }
 
@@ -511,7 +517,7 @@
       right: 0;
       top: 0;
       height: 100%;
-      width: 16px;
+      width: 1rem;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='16' width='16'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%232f3941' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: center;
@@ -527,7 +533,7 @@
     width: var(--neeto-ui-date-panel-width);
 
     @include viewport(xs-mob) {
-      width: 296px;
+      width: 18.5rem;
     }
   }
 
@@ -633,7 +639,7 @@
   }
 }
 .ant-picker-ranges > li {
-  margin-right: 8px;
+  margin-right: 0.5rem;
 }
 
 .ant-picker-ranges .ant-picker-preset > .ant-tag-blue {
@@ -697,6 +703,6 @@
 }
 
 .neetix-datetimepicker {
-  --neeto-ui-date-time-picker-gap: 2px;
-  --neeto-ui-date-time-picker-border-radius: 4px;
+  --neeto-ui-date-time-picker-gap: 0.125rem;
+  --neeto-ui-date-time-picker-border-radius: 0.25rem;
 }
diff --git a/src/styles/components/_dropdown.scss b/src/styles/components/_dropdown.scss
index 56b6d6aea..41e6e84f0 100644
--- a/src/styles/components/_dropdown.scss
+++ b/src/styles/components/_dropdown.scss
@@ -1,6 +1,6 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
   --neeto-ui-dropdown-margin-x: 0px;
-  --neeto-ui-dropdown-margin-y: 6px;
+  --neeto-ui-dropdown-margin-y: 0.375rem;
   --neeto-ui-dropdown-padding-x: 0px;
   --neeto-ui-dropdown-padding-y: 0px;
   --neeto-ui-dropdown-border-width: 1px;
@@ -10,27 +10,27 @@
 
   // Popup
   --neeto-ui-dropdown-popup-width: auto;
-  --neeto-ui-dropdown-popup-min-width: 168px;
-  --neeto-ui-dropdown-popup-max-height: 480px;
+  --neeto-ui-dropdown-popup-min-width: 10.5rem;
+  --neeto-ui-dropdown-popup-max-height: 30rem;
   --neeto-ui-dropdown-popup-bg-color: rgb(var(--neeto-ui-white));
   --neeto-ui-dropdown-popup-border-radius: var(--neeto-ui-rounded);
   --neeto-ui-dropdown-popup-z-index: 99999;
 
   // Popup Menu
   --neeto-ui-dropdown-popup-menu-padding-x: 0px;
-  --neeto-ui-dropdown-popup-menu-padding-y: 4px;
+  --neeto-ui-dropdown-popup-menu-padding-y: 0.25rem;
 
   // Item
-  --neeto-ui-dropdown-item-padding-y: 6px;
-  --neeto-ui-dropdown-item-padding-x: 12px;
+  --neeto-ui-dropdown-item-padding-y: 0.375rem;
+  --neeto-ui-dropdown-item-padding-x: 0.75rem;
   --neeto-ui-dropdown-item-font-size: var(--neeto-ui-text-sm);
   --neeto-ui-dropdown-item-font-weight: var(--neeto-ui-font-normal);
   --neeto-ui-dropdown-item-line-height: 1.143;
   --neeto-ui-dropdown-item-color: rgb(var(--neeto-ui-gray-800));
   --neeto-ui-dropdown-item-bg-color: rgb(var(--neeto-ui-white));
   --neeto-ui-dropdown-item-white-space: nowrap;
-  --neeto-ui-dropdown-item-min-height: 32px;
-  --neeto-ui-dropdown-item-gap: 8px;
+  --neeto-ui-dropdown-item-min-height: 2rem;
+  --neeto-ui-dropdown-item-gap: 0.5rem;
   --neeto-ui-dropdown-item-border-radius: 0px;
 
   // Item - Active
@@ -49,7 +49,7 @@
   // Divider
   --neeto-ui-dropdown-divider-height: 1px;
   --neeto-ui-dropdown-divider-bg-color: rgb(var(--neeto-ui-gray-200));
-  --neeto-ui-dropdown-divider-margin: 4px;
+  --neeto-ui-dropdown-divider-margin: 0.25rem;
 }
 
 .neeto-ui-dropdown {
@@ -76,7 +76,7 @@
   z-index: var(--neeto-ui-dropdown-popup-z-index);
 
   @media (max-height: 1000px) {
-    max-height: calc(40vh - 50px);
+    max-height: calc(40vh - 3.125rem);
   }
 
   li,
diff --git a/src/styles/components/_email-input.scss b/src/styles/components/_email-input.scss
index 2a96810ef..06f8a0b2b 100644
--- a/src/styles/components/_email-input.scss
+++ b/src/styles/components/_email-input.scss
@@ -1,13 +1,13 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
   // Label Wrapper
-  --neeto-ui-multi-email-input-label-wrapper-gap: 8px;
+  --neeto-ui-multi-email-input-label-wrapper-gap: 0.5rem;
   --neeto-ui-multi-email-input-counter-color: rgb(var(--neeto-ui-gray-700));
   --neeto-ui-multi-email-input-counter-line-height: 1;
-  --neeto-ui-multi-email-input-counter-margin-bottom: 8px;
+  --neeto-ui-multi-email-input-counter-margin-bottom: 0.5rem;
 
   // Prefx & Suffix
-  --neeto-ui-multi-email-input-prefix-suffix-icon-size: 16px;
-  --neeto-ui-multi-email-input-prefix-margin-left: 12px;
+  --neeto-ui-multi-email-input-prefix-suffix-icon-size: 1rem;
+  --neeto-ui-multi-email-input-prefix-margin-left: 0.75rem;
 }
 
 .neeto-ui-email-input__wrapper {
@@ -58,7 +58,7 @@
   .neeto-ui-email-input__suffix,
   .neeto-ui-email-input__prefix{
     line-height: 1.1;
-    min-height: 16px;
+    min-height: 1rem;
   }
 }
 
diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss
index fec472fa3..fe02445bb 100644
--- a/src/styles/components/_input.scss
+++ b/src/styles/components/_input.scss
@@ -3,11 +3,11 @@
   --neeto-ui-input-wrapper-flex-grow: 1;
 
   // Label Wrapper
-  --neeto-ui-input-label-wrapper-gap: 8px;
+  --neeto-ui-input-label-wrapper-gap: 0.5rem;
 
   // Label
   --neeto-ui-input-label-overflow-wrap: break-word;
-  --neeto-ui-input-label-margin: 8px;
+  --neeto-ui-input-label-margin: 0.5rem;
 
   // Max Length
   --neeto-ui-input-max-length-font-size: var(--neeto-ui-text-sm);
@@ -30,7 +30,7 @@
   --neeto-ui-textarea-padding-x: 0px;
   --neeto-ui-textarea-padding-y: 0px;
   --neeto-ui-textarea-line-height: 1.5;
-  --neeto-ui-textarea-max-height: 224px;
+  --neeto-ui-textarea-max-height: 14rem;
 
   // Placeholder
   --neeto-ui-input-placeholder-color: rgb(var(--neeto-ui-gray-400));
@@ -50,26 +50,26 @@
   --neeto-ui-input-prefix-suffix-color: rgb(var(--neeto-ui-gray-700));
   --neeto-ui-input-prefix-suffix-bg-color: transparent;
   --neeto-ui-input-prefix-suffix-line-height: 1;
-  --neeto-ui-input-prefix-suffix-icon-size: 16px;
+  --neeto-ui-input-prefix-suffix-icon-size: 1rem;
   --neeto-ui-input-prefix-suffix-margin: 0px;
   --neeto-ui-input-prefix-suffix-padding-x: 0px;
   --neeto-ui-input-prefix-suffix-border-width: 0px;
   --neeto-ui-input-prefix-suffix-border-color: transparent;
 
   // Help Text
-  --neeto-ui-input-help-text-margin: 8px;
+  --neeto-ui-input-help-text-margin: 0.5rem;
   --neeto-ui-input-help-text-font-size: var(--neeto-ui-text-xs);
   --neeto-ui-input-help-text-color: rgb(var(--neeto-ui-gray-700));
   --neeto-ui-input-help-text-line-height: 1.1;
 
   // Warning Text
-  --neeto-ui-input-warning-text-margin: 8px;
+  --neeto-ui-input-warning-text-margin: 0.5rem;
   --neeto-ui-input-warning-text-font-size: var(--neeto-ui-text-xs);
   --neeto-ui-input-warning-text-color: rgb(var(--neeto-ui-warning-800));
   --neeto-ui-input-warning-text-line-height: 1.1;
 
   // Error Text
-  --neeto-ui-input-error-text-margin: 8px;
+  --neeto-ui-input-error-text-margin: 0.5rem;
   --neeto-ui-input-error-text-font-size: var(--neeto-ui-text-xs);
   --neeto-ui-input-error-text-color: rgb(var(--neeto-ui-error-800));
   --neeto-ui-input-error-text-line-height: 1.1;
@@ -213,36 +213,36 @@
     }
 
     &.neeto-ui-input--small {
-      --neeto-ui-input-padding-x: 8px;
-      --neeto-ui-input-padding-y: 4px;
-      --neeto-ui-input-min-height: 26px;
+      --neeto-ui-input-padding-x: 0.5rem;
+      --neeto-ui-input-padding-y: 0.25rem;
+      --neeto-ui-input-min-height: 1.625rem;
 
-      --neeto-ui-input-prefix-suffix-margin: 8px;
+      --neeto-ui-input-prefix-suffix-margin: 0.5rem;
 
-      --neeto-ui-textarea-padding-x: 8px;
-      --neeto-ui-textarea-padding-y: 4px;
+      --neeto-ui-textarea-padding-x: 0.5rem;
+      --neeto-ui-textarea-padding-y: 0.25rem;
     }
 
     &.neeto-ui-input--medium {
-      --neeto-ui-input-padding-x: 8px;
-      --neeto-ui-input-padding-y: 5px;
-      --neeto-ui-input-min-height: 30px;
+      --neeto-ui-input-padding-x: 0.5rem;
+      --neeto-ui-input-padding-y: 0.3125rem;
+      --neeto-ui-input-min-height: 1.875rem;
 
-      --neeto-ui-input-prefix-suffix-margin: 8px;
+      --neeto-ui-input-prefix-suffix-margin: 0.5rem;
 
-      --neeto-ui-textarea-padding-x: 8px;
-      --neeto-ui-textarea-padding-y: 8px;
+      --neeto-ui-textarea-padding-x: 0.5rem;
+      --neeto-ui-textarea-padding-y: 0.5rem;
     }
 
     &.neeto-ui-input--large {
-      --neeto-ui-input-padding-x: 12px;
-      --neeto-ui-input-padding-y: 8px;
-      --neeto-ui-input-min-height: 38px;
+      --neeto-ui-input-padding-x: 0.75rem;
+      --neeto-ui-input-padding-y: 0.5rem;
+      --neeto-ui-input-min-height: 2.375rem;
 
-      --neeto-ui-input-prefix-suffix-margin: 12px;
+      --neeto-ui-input-prefix-suffix-margin: 0.75rem;
 
-      --neeto-ui-textarea-padding-x: 12px;
-      --neeto-ui-textarea-padding-y: 12px;
+      --neeto-ui-textarea-padding-x: 0.75rem;
+      --neeto-ui-textarea-padding-y: 0.75rem;
     }
 
     &.neeto-ui-input--naked {
@@ -258,7 +258,7 @@
 
     &.neeto-ui-input--block-add-on {
       --neeto-ui-input-prefix-suffix-margin: 0px;
-      --neeto-ui-input-prefix-suffix-padding-x: 12px;
+      --neeto-ui-input-prefix-suffix-padding-x: 0.75rem;
       --neeto-ui-input-prefix-suffix-bg-color: rgb(var(--neeto-ui-gray-100));
       --neeto-ui-input-prefix-suffix-border-width: 1px;
       --neeto-ui-input-prefix-suffix-border-color: rgb(var(--neeto-ui-gray-400));
diff --git a/src/styles/components/_kbd.scss b/src/styles/components/_kbd.scss
index 1943090f4..9b4d32537 100644
--- a/src/styles/components/_kbd.scss
+++ b/src/styles/components/_kbd.scss
@@ -4,9 +4,9 @@
   --neeto-ui-kbd-color: rgb(var(--neeto-ui-gray-700));
   --neeto-ui-kbd-bg-color: rgb(var(--neeto-ui-gray-200));
   --neeto-ui-kbd-border-radius: var(--neeto-ui-rounded);
-  --neeto-ui-kbd-min-width: 24px;
-  --neeto-ui-kbd-height: 24px;
-  --neeto-ui-kbd-padding: 4px;
+  --neeto-ui-kbd-min-width: 1.5rem;
+  --neeto-ui-kbd-height: 1.5rem;
+  --neeto-ui-kbd-padding: 0.25rem;
 }
 
 .neeto-ui-kbd {
@@ -28,6 +28,6 @@
   --neeto-ui-kbd-color: rgb(var(--neeto-ui-primary-800));
   --neeto-ui-kbd-bg-color: rgb(var(--neeto-ui-primary-100));
   --neeto-ui-kbd-border-radius: var(--neeto-ui-rounded-sm);
-  --neeto-ui-kbd-min-width: 32px;
-  --neeto-ui-kbd-height: 32px;
+  --neeto-ui-kbd-min-width: 2rem;
+  --neeto-ui-kbd-height: 2rem;
 }
diff --git a/src/styles/components/_modal.scss b/src/styles/components/_modal.scss
index 16ba3ffed..22e51a6e8 100644
--- a/src/styles/components/_modal.scss
+++ b/src/styles/components/_modal.scss
@@ -1,5 +1,5 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
-  --neeto-ui-modal-spacing: 24px;
+  --neeto-ui-modal-spacing: 1.5rem;
 
   // Backdrop
   --neeto-ui-modal-backdrop-z-index: var(--neeto-ui-modal-z-index);
@@ -20,12 +20,12 @@
 
   // Header
   --neeto-ui-modal-header-padding-top: var(--neeto-ui-modal-spacing);
-  --neeto-ui-modal-header-padding-right: 64px;
-  --neeto-ui-modal-header-padding-bottom: 16px;
+  --neeto-ui-modal-header-padding-right: 4rem;
+  --neeto-ui-modal-header-padding-bottom: 1rem;
   --neeto-ui-modal-header-padding-left: var(--neeto-ui-modal-spacing);
 
   // Header Description
-  --neeto-ui-modal-header-description-margin-top: 8px;
+  --neeto-ui-modal-header-description-margin-top: 0.5rem;
   --neeto-ui-modal-header-description-color: rgb(var(--neeto-ui-gray-700));
 
   // Body
@@ -36,7 +36,7 @@
   --neeto-ui-modal-body-line-height: 1.5;
 
   // Footer
-  --neeto-ui-modal-footer-padding-y: 16px;
+  --neeto-ui-modal-footer-padding-y: 1rem;
   --neeto-ui-modal-footer-padding-x: var(--neeto-ui-modal-spacing);
   --neeto-ui-modal-footer-bg: rgb(var(--neeto-ui-gray-100));
   --neeto-ui-modal-footer-border-radius: var(--neeto-ui-rounded-xl);
@@ -97,15 +97,15 @@
     }
 
     &.neeto-ui-modal__wrapper--small {
-      --neeto-ui-modal-wrapper-width: 320px;
+      --neeto-ui-modal-wrapper-width: 20rem;
     }
 
     &.neeto-ui-modal__wrapper--medium {
-      --neeto-ui-modal-wrapper-width: 480px;
+      --neeto-ui-modal-wrapper-width: 30rem;
     }
 
     &.neeto-ui-modal__wrapper--large {
-      --neeto-ui-modal-wrapper-width: 720px;
+      --neeto-ui-modal-wrapper-width: 45rem;
     }
 
     &.neeto-ui-modal__wrapper--fullscreen {
@@ -113,7 +113,7 @@
       --neeto-ui-modal-wrapper-max-width: 100vw;
       --neeto-ui-modal-wrapper-height: 100%;
       --neeto-ui-modal-wrapper-border-radius: var(--neeto-ui-rounded-none);
-      --neeto-ui-modal-header-padding-top: 28px;
+      --neeto-ui-modal-header-padding-top: 1.75rem;
 
       max-height: 100vh;
       transform: scale(1);
@@ -181,13 +181,13 @@
 }
 
 .neetix-alert, .neetix-modal {
-  --neeto-ui-modal-close-btn-top: 32px;
-  --neeto-ui-modal-close-btn-right: 32px;
-  --neeto-ui-modal-header-padding-top: 32px;
-  --neeto-ui-modal-header-padding-left: 32px;
-  --neeto-ui-modal-body-padding-bottom: 32px;
-  --neeto-ui-modal-body-padding-x: 32px;
-  --neeto-ui-modal-footer-padding-bottom: 32px;
-  --neeto-ui-modal-footer-padding-x: 32px;
+  --neeto-ui-modal-close-btn-top: 2rem;
+  --neeto-ui-modal-close-btn-right: 2rem;
+  --neeto-ui-modal-header-padding-top: 2rem;
+  --neeto-ui-modal-header-padding-left: 2rem;
+  --neeto-ui-modal-body-padding-bottom: 2rem;
+  --neeto-ui-modal-body-padding-x: 2rem;
+  --neeto-ui-modal-footer-padding-bottom: 2rem;
+  --neeto-ui-modal-footer-padding-x: 2rem;
   --neeto-ui-modal-wrapper-border-radius: var(--neeto-ui-rounded-none);
 }
diff --git a/src/styles/components/_pagination.scss b/src/styles/components/_pagination.scss
index cdafc0c52..9d3c3908d 100644
--- a/src/styles/components/_pagination.scss
+++ b/src/styles/components/_pagination.scss
@@ -1,9 +1,9 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
-  --neeto-ui-pagination-item-padding-x: 4px;
-  --neeto-ui-pagination-item-padding-y: 4px;
-  --neeto-ui-pagination-item-width: 28px;
-  --neeto-ui-pagination-item-height: 28px;
-  --neeto-ui-pagination-item-margin-x: 4px;
+  --neeto-ui-pagination-item-padding-x: 0.25rem;
+  --neeto-ui-pagination-item-padding-y: 0.25rem;
+  --neeto-ui-pagination-item-width: 1.75rem;
+  --neeto-ui-pagination-item-height: 1.75rem;
+  --neeto-ui-pagination-item-margin-x: 0.25rem;
   --neeto-ui-pagination-item-margin-y: 0px;
   --neeto-ui-pagination-item-font-size: var(--neeto-ui-text-sm);
   --neeto-ui-pagination-item-font-weight: var(--neeto-ui-font-medium);
@@ -104,8 +104,8 @@
 }
 
 .neetix-pagination {
-  --neeto-ui-pagination-item-width: 32px;
-  --neeto-ui-pagination-item-height: 32px;
+  --neeto-ui-pagination-item-width: 2rem;
+  --neeto-ui-pagination-item-height: 2rem;
   --neeto-ui-pagination-item-active-border-color: rgb(var(--neeto-ui-gray-800));
   --neeto-ui-pagination-item-active-bg-color: rgb(var(--neeto-ui-gray-800));
 }
diff --git a/src/styles/components/_radio.scss b/src/styles/components/_radio.scss
index aa65ad207..b9c28c545 100644
--- a/src/styles/components/_radio.scss
+++ b/src/styles/components/_radio.scss
@@ -1,5 +1,5 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
-  --neeto-ui-radio-size: 16px;
+  --neeto-ui-radio-size: 1rem;
   --neeto-ui-radio-color: rgb(var(--neeto-ui-primary-500));
   --neeto-ui-radio-border-width: 2px;
   --neeto-ui-radio-border-color: rgb(var(--neeto-ui-gray-400));
@@ -28,11 +28,11 @@
   --neeto-ui-radio-error-font-size: var(--neeto-ui-text-xs);
 
   // Margin
-  --neeto-ui-radio-wrapper-label-margin: 12px;
-  --neeto-ui-radio-wrapper-error-margin: 4px;
-  --neeto-ui-radio-label-margin: 8px;
+  --neeto-ui-radio-wrapper-label-margin: 0.75rem;
+  --neeto-ui-radio-wrapper-error-margin: 0.25rem;
+  --neeto-ui-radio-label-margin: 0.5rem;
   --neeto-ui-radio-label-line-height: 1.2;
-  --neeto-ui-radio-margin: 16px;
+  --neeto-ui-radio-margin: 1rem;
 }
 
 .neeto-ui-radio__wrapper {
diff --git a/src/styles/components/_select.scss b/src/styles/components/_select.scss
index ae073b097..d933c87b0 100644
--- a/src/styles/components/_select.scss
+++ b/src/styles/components/_select.scss
@@ -28,7 +28,7 @@
 
   // Indicators
   --neeto-ui-select-indicators-padding: 0px;
-  --neeto-ui-select-indicators-gap: 8px;
+  --neeto-ui-select-indicators-gap: 0.5rem;
   --neeto-ui-select-indicators-color: rgb(var(--neeto-ui-gray-800));
   --neeto-ui-select-indicators-hover-color: rgb(var(--neeto-ui-gray-700));
 
@@ -36,19 +36,19 @@
   --neeto-ui-select-menu-border-width: 1px;
   --neeto-ui-select-menu-border-color: rgb(var(--neeto-ui-gray-400));
   --neeto-ui-select-menu-border-radius: var(--neeto-ui-rounded);
-  --neeto-ui-select-menu-margin-top: 6px;
-  --neeto-ui-select-menu-margin-bottom: 16px;
+  --neeto-ui-select-menu-margin-top: 0.375rem;
+  --neeto-ui-select-menu-margin-bottom: 1rem;
   --neeto-ui-select-menu-z-index: 20;
   --neeto-ui-select-menu-bg-color: rgb(var(--neeto-ui-white));
   --neeto-ui-select-menu-box-shadow: var(--neeto-ui-shadow-lg);
-  --neeto-ui-select-menu-max-height: 480px;
+  --neeto-ui-select-menu-max-height: 30rem;
 
   // Menu Option
   --neeto-ui-select-menu-option-color: rgb(var(--neeto-ui-gray-800));
-  --neeto-ui-select-menu-option-padding-x: 12px;
-  --neeto-ui-select-menu-option-padding-y: 8px;
+  --neeto-ui-select-menu-option-padding-x: 0.75rem;
+  --neeto-ui-select-menu-option-padding-y: 0.5rem;
   --neeto-ui-select-menu-option-line-height: 1.1;
-  --neeto-ui-select-menu-option-min-height: 32px;
+  --neeto-ui-select-menu-option-min-height: 2rem;
 
   // Menu Option Focus
   --neeto-ui-select-menu-option-focus-bg-color: rgb(var(--neeto-ui-gray-200));
@@ -64,20 +64,20 @@
   --neeto-ui-select-menu-fixed-option-border-top-width: 1px;
   --neeto-ui-select-menu-fixed-option-border-top-color: rgb(var(--neeto-ui-gray-100));
   --neeto-ui-select-menu-fixed-option-padding-x: 0px;
-  --neeto-ui-select-menu-fixed-option-padding-y: 2px;
+  --neeto-ui-select-menu-fixed-option-padding-y: 0.125rem;
   --neeto-ui-select-menu-fixed-option-link-color: rgb(var(--neeto-ui-gray-700));
-  --neeto-ui-select-menu-fixed-option-link-padding-x: 12px;
-  --neeto-ui-select-menu-fixed-option-link-padding-y: 8px;
+  --neeto-ui-select-menu-fixed-option-link-padding-x: 0.75rem;
+  --neeto-ui-select-menu-fixed-option-link-padding-y: 0.5rem;
   --neeto-ui-select-menu-fixed-option-link-hover-color: rgb(var(--neeto-ui-gray-800));
 
   // Multi Value
   --neeto-ui-select-multi-value-bg-color: transparent;
   --neeto-ui-select-multi-value-border-width: 1px;
   --neeto-ui-select-multi-value-border-color: rgb(var(--neeto-ui-gray-400));
-  --neeto-ui-select-multi-value-border-radius: 100px;
-  --neeto-ui-select-multi-value-margin-right: 4px;
-  --neeto-ui-select-multi-value-margin-y: 4px;
-  --neeto-ui-select-multi-value-padding-x: 8px;
+  --neeto-ui-select-multi-value-border-radius: 6.25rem;
+  --neeto-ui-select-multi-value-margin-right: 0.25rem;
+  --neeto-ui-select-multi-value-margin-y: 0.25rem;
+  --neeto-ui-select-multi-value-padding-x: 0.5rem;
   --neeto-ui-select-multi-value-padding-y: 0px;
   --neeto-ui-select-multi-value-color: rgb(var(--neeto-ui-gray-800));
 
@@ -85,14 +85,14 @@
   --neeto-ui-select-multi-value-label-font-size: var(--neeto-ui-text-sm);
   --neeto-ui-select-multi-value-label-line-height: 1;
   --neeto-ui-select-multi-value-label-padding-x: 0px;
-  --neeto-ui-select-multi-value-label-padding-y: 2px;
+  --neeto-ui-select-multi-value-label-padding-y: 0.125rem;
 
   --neeto-ui-select-multi-value-remove-hover-opacity: 0.7;
 
   // Add Button
   --neeto-ui-select-add-btn-font-size: var(--neeto-ui-text-xs);
-  --neeto-ui-select-add-btn-padding-x: 8px;
-  --neeto-ui-select-add-btn-padding-y: 4px;
+  --neeto-ui-select-add-btn-padding-x: 0.5rem;
+  --neeto-ui-select-add-btn-padding-y: 0.25rem;
   --neeto-ui-select-add-btn-margin-left: 0px;
 }
 
@@ -160,21 +160,21 @@
   }
 
   &.neeto-ui-react-select__container--small {
-    --neeto-ui-select-min-height: 26px;
-    --neeto-ui-select-padding-x: 8px;
-    --neeto-ui-select-indicators-padding: 8px;
+    --neeto-ui-select-min-height: 1.625rem;
+    --neeto-ui-select-padding-x: 0.5rem;
+    --neeto-ui-select-indicators-padding: 0.5rem;
   }
 
   &.neeto-ui-react-select__container--medium {
-    --neeto-ui-select-min-height: 30px;
-    --neeto-ui-select-padding-x: 8px;
-    --neeto-ui-select-indicators-padding: 8px;
+    --neeto-ui-select-min-height: 1.875rem;
+    --neeto-ui-select-padding-x: 0.5rem;
+    --neeto-ui-select-indicators-padding: 0.5rem;
   }
 
   &.neeto-ui-react-select__container--large {
-    --neeto-ui-select-min-height: 38px;
-    --neeto-ui-select-padding-x: 12px;
-    --neeto-ui-select-indicators-padding: 12px;
+    --neeto-ui-select-min-height: 2.375rem;
+    --neeto-ui-select-padding-x: 0.75rem;
+    --neeto-ui-select-indicators-padding: 0.75rem;
   }
 
   .neeto-ui-react-select__placeholder {
@@ -231,7 +231,7 @@
       max-height: var(--neeto-ui-select-menu-max-height);
 
       @media (max-height: 1000px) {
-        max-height: calc(40vh - 50px);
+        max-height: calc(40vh - 3.125rem);
       }
     }
 
diff --git a/src/styles/components/_spinner.scss b/src/styles/components/_spinner.scss
index a8baed904..a24591f6a 100644
--- a/src/styles/components/_spinner.scss
+++ b/src/styles/components/_spinner.scss
@@ -1,6 +1,6 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
-  --neeto-ui-spinner-size: 20px;
-  --neeto-ui-spinner-border-width: 3px;
+  --neeto-ui-spinner-size: 1.25rem;
+  --neeto-ui-spinner-border-width: 0.1875rem;
   --neeto-ui-spinner-color: rgb(var(--neeto-ui-gray-600));
 }
 
@@ -23,8 +23,8 @@
   }
 
   &--size-small {
-    --neeto-ui-spinner-size: 16px;
-    --neeto-ui-spinner-border-width: 3px;
+    --neeto-ui-spinner-size: 1rem;
+    --neeto-ui-spinner-border-width: 0.1875rem;
   }
 }
 
@@ -115,6 +115,6 @@
 }
 
 .neetix-spinner {
-  --neeto-ui-spinner-size: 32px;
+  --neeto-ui-spinner-size: 2rem;
   --neeto-ui-spinner-color: rgb(var(--neeto-ui-primary-500));
 }
diff --git a/src/styles/components/_switch.scss b/src/styles/components/_switch.scss
index b7b23b301..1f5ab5093 100644
--- a/src/styles/components/_switch.scss
+++ b/src/styles/components/_switch.scss
@@ -3,30 +3,30 @@
   --neeto-ui-switch-wrapper-width: fit-content;
 
   // Switch Item
-  --neeto-ui-switch-item-width: 44px;
-  --neeto-ui-switch-item-height: 24px;
+  --neeto-ui-switch-item-width: 2.75rem;
+  --neeto-ui-switch-item-height: 1.5rem;
   --neeto-ui-switch-item-border-width: 2px;
   --neeto-ui-switch-item-border-color: transparent;
-  --neeto-ui-switch-item-border-radius: 20px;
+  --neeto-ui-switch-item-border-radius: 1.25rem;
   --neeto-ui-switch-item-bg-color: rgb(var(--neeto-ui-gray-300));
   --neeto-ui-switch-item-opacity: 1;
 
   // Switch
-  --neeto-ui-switch-width: 20px;
-  --neeto-ui-switch-height: 20px;
+  --neeto-ui-switch-width: 1.25rem;
+  --neeto-ui-switch-height: 1.25rem;
   --neeto-ui-switch-color: rgb(var(--neeto-ui-gray-400));
   --neeto-ui-switch-bg-color: rgb(var(--neeto-ui-white));
   --neeto-ui-switch-transform: translateX(0);
-  --neeto-ui-switch-border-radius: 16px;
+  --neeto-ui-switch-border-radius: 1rem;
   --neeto-ui-switch-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
 
   // Checked
   --neeto-ui-switch-item-checked-bg-color: rgb(var(--neeto-ui-primary-500));
   --neeto-ui-switch-checked-color: rgb(var(--neeto-ui-primary-500));
-  --neeto-ui-switch-checked-transform: translateX(20px);
+  --neeto-ui-switch-checked-transform: translateX(1.25rem);
 
   // Margin
-  --neeto-ui-switch-label-margin: 12px;
+  --neeto-ui-switch-label-margin: 0.75rem;
 
   // Focus Within
   --neeto-ui-switch-focus-within-box-shadow: 0 0 0 3px rgb(var(--neeto-ui-gray-200));
diff --git a/src/styles/components/_tab.scss b/src/styles/components/_tab.scss
index c0c5f8f8f..fb6f90539 100644
--- a/src/styles/components/_tab.scss
+++ b/src/styles/components/_tab.scss
@@ -1,15 +1,15 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
   --neeto-ui-tab-wrapper-border-width: 2px;
   --neeto-ui-tab-wrapper-border-color: rgb(var(--neeto-ui-gray-200));
-  --neeto-ui-tab-padding-x: 8px;
-  --neeto-ui-tab-padding-y: 12px;
+  --neeto-ui-tab-padding-x: 0.5rem;
+  --neeto-ui-tab-padding-y: 0.75rem;
   --neeto-ui-tab-font-size: var(--neeto-ui-text-sm);
   --neeto-ui-tab-font-weight: var(--neeto-ui-font-semibold);
   --neeto-ui-tab-line-height: 1;
   --neeto-ui-tab-color: rgb(var(--neeto-ui-gray-600));
   --neeto-ui-tab-border-color: transparent;
-  --neeto-ui-tab-gap: 12px;
-  --neeto-ui-tab-icon-size: 16px;
+  --neeto-ui-tab-gap: 0.75rem;
+  --neeto-ui-tab-icon-size: 1rem;
   --neeto-ui-tab-text-decoration: none;
   --neeto-ui-tab-outline: none;
 
@@ -43,7 +43,7 @@
   &--size-large {
     .neeto-ui-tab {
       --neeto-ui-tab-font-size: var(--neeto-ui-text-xl);
-      --neeto-ui-tab-padding-x: 12px;
+      --neeto-ui-tab-padding-x: 0.75rem;
     }
   }
 
diff --git a/src/styles/components/_tag.scss b/src/styles/components/_tag.scss
index ac6772d37..0a05f01b3 100644
--- a/src/styles/components/_tag.scss
+++ b/src/styles/components/_tag.scss
@@ -1,19 +1,19 @@
 :root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
-  --neeto-ui-tag-padding-x: 8px;
-  --neeto-ui-tag-padding-y: 3px;
+  --neeto-ui-tag-padding-x: 0.5rem;
+  --neeto-ui-tag-padding-y: 0.1875rem;
   --neeto-ui-tag-font-size: var(--neeto-ui-text-xs);
   --neeto-ui-tag-font-weight: var(--neeto-ui-font-normal);
-  --neeto-ui-tag-line-height: 12px;
+  --neeto-ui-tag-line-height: 0.75rem;
   --neeto-ui-tag-color: rgb(var(--neeto-ui-black));
   --neeto-ui-tag-bg-color: transparent;
   --neeto-ui-tag-border-width: 1px;
   --neeto-ui-tag-border-color: transparent;
   --neeto-ui-tag-border-radius: var(--neeto-ui-rounded-full);
-  --neeto-ui-tag-gap: 4px;
-  --neeto-ui-tag-icon-size: 12px;
+  --neeto-ui-tag-gap: 0.25rem;
+  --neeto-ui-tag-icon-size: 0.75rem;
 
   // Indicator
-  --neeto-ui-tag-indicator-size: 8px;
+  --neeto-ui-tag-indicator-size: 0.5rem;
   --neeto-ui-tag-indicator-border-radius: var(--neeto-ui-rounded-full);
 
   // Hover
@@ -68,12 +68,12 @@
   }
 
   &--size-large {
-    --neeto-ui-tag-padding-x: 12px;
-    --neeto-ui-tag-padding-y: 3px;
-    --neeto-ui-tag-gap: 6px;
+    --neeto-ui-tag-padding-x: 0.75rem;
+    --neeto-ui-tag-padding-y: 0.1875rem;
+    --neeto-ui-tag-gap: 0.375rem;
     --neeto-ui-tag-font-size: var(--neeto-ui-text-sm);
-    --neeto-ui-tag-line-height: 16px;
-    --neeto-ui-tag-icon-size: 16px;
+    --neeto-ui-tag-line-height: 1rem;
+    --neeto-ui-tag-icon-size: 1rem;
   }
 
   &--type-outline {

From 47be884f1cb180401e0569d1daf9f9628faa8376 Mon Sep 17 00:00:00 2001
From: praveen-murali-ind <praveen-murali-ind@users.noreply.github.com>
Date: Thu, 21 Nov 2024 12:48:26 +0000
Subject: [PATCH 2/7] New version release

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2575461fe..89e0dc2ab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "8.2.37",
+  "version": "8.2.38",
   "author": "BigBinary",
   "license": "MIT",
   "description": "neetoUI drives the experience at all neeto products",

From 30ac2fa169d9a144e8bdb86115f79feb6f337f62 Mon Sep 17 00:00:00 2001
From: Thomas Mathai <85351738+thomas-mathai@users.noreply.github.com>
Date: Tue, 26 Nov 2024 17:23:11 +0530
Subject: [PATCH 3/7] Updated the favicon (#2383)

---
 .storybook/manager.js               |   2 +-
 .storybook/public/favicon.ico       | Bin 0 -> 15406 bytes
 .storybook/public/favicon_dark.ico  | Bin 27198 -> 0 bytes
 .storybook/public/favicon_light.ico | Bin 27198 -> 0 bytes
 4 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 .storybook/public/favicon.ico
 delete mode 100644 .storybook/public/favicon_dark.ico
 delete mode 100644 .storybook/public/favicon_light.ico

diff --git a/.storybook/manager.js b/.storybook/manager.js
index ef0bbe6c9..b41f29a26 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -7,5 +7,5 @@ addons.setConfig({
 
 const link = document.createElement("link");
 link.setAttribute("rel", "shortcut icon");
-link.setAttribute("href", "./favicon_light.ico");
+link.setAttribute("href", "./favicon.ico");
 document.head.appendChild(link);
diff --git a/.storybook/public/favicon.ico b/.storybook/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..a58e308f5e6ada8f3e62ab3a947e677a4cb267c0
GIT binary patch
literal 15406
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

literal 0
HcmV?d00001

diff --git a/.storybook/public/favicon_dark.ico b/.storybook/public/favicon_dark.ico
deleted file mode 100644
index 5f75558a794f0e8e1c24a1699758be08c5e55a96..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 27198
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

diff --git a/.storybook/public/favicon_light.ico b/.storybook/public/favicon_light.ico
deleted file mode 100644
index 66aa8c863e75ea6ebc11f7c41b22c18824122cb5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 27198
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
N_273}efgc%e*tB;bt?b>


From 938f5bddec57494056bb60205bc0e16d2b4936b2 Mon Sep 17 00:00:00 2001
From: Deepak Jose <deepak.jose@bigbinary.com>
Date: Wed, 27 Nov 2024 09:58:32 +0530
Subject: [PATCH 4/7] Updated the DatePicker to sanitize the value to the
 allowed limit only if user has changed the value. (#2381)

* Updated the DatePicker to sanitize the value to the allowed limit only if user has changed the value.

* Added test to verify that the UI shows the desired value in the mentioned scenario.

* Removed unused async keyword.

---------

Co-authored-by: Joseph Mathew <josephmathew900@gmail.com>
---
 src/components/DatePicker/index.jsx | 41 ++++++++++++++++++++---------
 tests/DatePicker.test.jsx           | 19 +++++++++++++
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/components/DatePicker/index.jsx b/src/components/DatePicker/index.jsx
index 6f34b7a7a..cd131dec2 100644
--- a/src/components/DatePicker/index.jsx
+++ b/src/components/DatePicker/index.jsx
@@ -1,4 +1,10 @@
-import React, { forwardRef, useState, useEffect } from "react";
+import React, {
+  forwardRef,
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "react";
 
 import { DatePicker as AntDatePicker } from "antd";
 import classnames from "classnames";
@@ -62,6 +68,7 @@ const DatePicker = forwardRef(
     const [value, setValue] = useState(inputValue);
     const [mode, setMode] = useState(picker);
     const [pickerValue, setPickerValue] = useState();
+    const [touched, setTouched] = useState(false);
     const id = useId(otherProps.id);
     const datePickerRef = useSyncedRef(ref);
 
@@ -78,17 +85,19 @@ const DatePicker = forwardRef(
       setMode(picker);
     }, [picker]);
 
+    const getAllowedValue = useCallback(
+      date => getAllowed(date, minDate, maxDate),
+      [minDate, maxDate]
+    );
+
     const handleOnChange = (date, dateString) => {
       if (type === "range" && isNotPresent(date)) {
         return onChange([], dateString);
       }
 
-      const allowed = getAllowed(
-        getTimezoneAppliedDateTime(date),
-        minDate,
-        maxDate
-      );
+      const allowed = getAllowedValue(getTimezoneAppliedDateTime(date));
       setValue(allowed);
+      setTouched(true);
 
       return onChange(allowed, formattedString(allowed, dateFormat));
     };
@@ -108,16 +117,29 @@ const DatePicker = forwardRef(
       );
     };
 
+    const { sanitizedValue, sanitizedDefaultValue } = useMemo(() => {
+      let sanitizedDefaultValue = convertToDayjsObjects(defaultValue);
+      let sanitizedValue = convertToDayjsObjects(value);
+
+      if (touched) {
+        sanitizedValue = getAllowedValue(sanitizedValue);
+        sanitizedDefaultValue = getAllowedValue(sanitizedDefaultValue);
+      }
+
+      return { sanitizedDefaultValue, sanitizedValue };
+    }, [defaultValue, value, touched, getAllowedValue]);
+
     return (
       <Provider>
         <div className="neeto-ui-input__wrapper">
           {label && <Label {...{ required, ...labelProps }}>{label}</Label>}
           <Component
             data-cy={label ? `${hyphenize(label)}-input` : "picker-input"}
+            defaultValue={sanitizedDefaultValue}
             placeholder={placeholder ?? format}
             ref={datePickerRef}
             showTime={showTime && { format: timeFormat, ...timePickerProps }}
-            value={getAllowed(convertToDayjsObjects(value), minDate, maxDate)}
+            value={sanitizedValue}
             className={classnames("neeto-ui-date-input", [className], {
               "neeto-ui-date-input--small": size === "small",
               "neeto-ui-date-input--medium": size === "medium",
@@ -126,11 +148,6 @@ const DatePicker = forwardRef(
               "neeto-ui-date-input--naked": nakedInput,
               "neeto-ui-date-input--error": !!error,
             })}
-            defaultValue={getAllowed(
-              convertToDayjsObjects(defaultValue),
-              minDate,
-              maxDate
-            )}
             popupClassName={classnames("neeto-ui-date-time-dropdown", [
               dropdownClassName, // Will be removed in the next major version
               popupClassName,
diff --git a/tests/DatePicker.test.jsx b/tests/DatePicker.test.jsx
index 890023dba..0a91995cb 100644
--- a/tests/DatePicker.test.jsx
+++ b/tests/DatePicker.test.jsx
@@ -190,4 +190,23 @@ describe("DatePicker", () => {
       );
     });
   });
+
+  it("it should render the saved value though it's outside the allowed ranges", () => {
+    const value = dayjs("2024-10-25T09:30:00.434Z");
+    const expectedValue = value.format("MM/DD/YYYY HH:mm:ss");
+
+    render(
+      <DatePicker
+        {...{ value }}
+        showTime
+        dateFormat="MM/DD/YYYY"
+        maxDate={dayjs("2024-10-30T09:30:00.434Z")}
+        minDate={dayjs()}
+        placeholder="Select date"
+      />
+    );
+
+    const dateInputBox = screen.getByRole("textbox");
+    expect(dateInputBox).toHaveValue(expectedValue);
+  });
 });

From fb8fe286d2b397ccc81097e7bcb9ba3424757b48 Mon Sep 17 00:00:00 2001
From: josephmathew900 <josephmathew900@users.noreply.github.com>
Date: Wed, 27 Nov 2024 04:30:12 +0000
Subject: [PATCH 5/7] New version release

---
 CHANGELOG.md | 6 ++++--
 package.json | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6abecc2c7..c072f5e06 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,10 @@ Each change is prefixed with one of these keywords::
 - *Fixed*: Denotes bug fixes.
 - *Security*: Pertains to actions taken in response to vulnerabilities.
 
+## 8.2.39 - 2024-11-27
+
+- Updates the value and default value fixed to the allowed range only if the user has touched the fields. This will fix the values outside the allowed ranges until not properly rendered initially.
+
 ## 8.2.36 - 2024-11-12
 
 - Removed the toastr icon by default.
@@ -191,7 +195,6 @@ Updates all formik components in neetoUI to use status to show server error and
 - Updated: `--neeto-ui-gray-100` from `#f8f9f9` to `#f6f7f8`.
 - Added: `--neeto-ui-gray-50` - `#fafafa`.
 - Updated: `--neeto-ui-primary-800` from `#2d36d4` to `#006653`.
-  
 - Updated: `--neeto-ui-primary-600` from `#3642df` to `#007a64`.
   
 - Updated: `--neeto-ui-primary-500` from `#4558f9` to `#008068`.
@@ -648,7 +651,6 @@ Added: `rejectCharsRegex` prop to *Input* component.
 - Fixed: Handled dot paths in *ScrollToErrorField*.
 ## 5.1.3 - 2023-08-02
 - Fixed: Disabled click in selected option close button if select is disabled.
-
 ## 5.1.2 - 2023-08-02
 
 - FIxed: Updated deprecated CSS property `color-adjust`
diff --git a/package.json b/package.json
index 89e0dc2ab..824ff2f04 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "8.2.38",
+  "version": "8.2.39",
   "author": "BigBinary",
   "license": "MIT",
   "description": "neetoUI drives the experience at all neeto products",

From 82a4d0d66554f0bfe626bc3ea2af5cb2590aba56 Mon Sep 17 00:00:00 2001
From: Praveen Murali <itspraveenmurali@gmail.com>
Date: Wed, 27 Nov 2024 14:28:47 +0530
Subject: [PATCH 6/7] Fix icon color in Toaster (#2384)

* Fix icon color in Toaster

* Fixed the default icon being visible even if the value icon was set to false.

---------

Co-authored-by: Deepak Jose <deepakjosp@gmail.com>
---
 src/components/Toastr/index.jsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Toastr/index.jsx b/src/components/Toastr/index.jsx
index 6eff48fca..781988685 100644
--- a/src/components/Toastr/index.jsx
+++ b/src/components/Toastr/index.jsx
@@ -44,7 +44,7 @@ const TOAST_ICON = {
   ),
   error: (
     <Warning
-      className="neeto-ui-white"
+      className="neeto-ui-text-white"
       data-cy="error-toast-icon"
       data-testid="error-toast-icon"
     />
@@ -99,7 +99,12 @@ const withUniqueCheck =
     if (toastrList.add({ type, message, buttonLabel })) {
       const config = {
         ...TOAST_CONFIG,
-        icon: showIcon && TOAST_ICON[type],
+        // The false value of the icon was ignored in the implementations before v9.0.2.
+        // After 9.0.2, the implementation is such that the icon is rendered as passed in the config.
+        // Since the `false` value used to show the default icon set internally, used a function that returns null
+        // which solved the problem.
+        // PR which addressed this issue: https://github.com/fkhadra/react-toastify/pull/758
+        icon: showIcon ? TOAST_ICON[type] : () => null,
         onClose: () => toastrList.remove({ type, message, buttonLabel }),
         ...customConfig,
       };

From 53226927a6280939c07ac4e567da77ee42b088a6 Mon Sep 17 00:00:00 2001
From: deepakjosp <deepakjosp@users.noreply.github.com>
Date: Wed, 27 Nov 2024 09:00:27 +0000
Subject: [PATCH 7/7] New version release

---
 CHANGELOG.md | 13 +++++++++++--
 package.json |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c072f5e06..65878ce0c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,17 @@ Each change is prefixed with one of these keywords::
 - *Fixed*: Denotes bug fixes.
 - *Security*: Pertains to actions taken in response to vulnerabilities.
 
+## 8.2.40 - 2024-11-27
+
+- The false value of the prop `icon` was ignored in the implementations before v9.0.2.
+- After 9.0.2, the [implementation](https://github.com/fkhadra/react-toastify/blob/main/src/components/Toast.tsx#L108-L117) is such that the icon is rendered as passed in the config.
+- Since the `false` value was used to show the default icon set internally, replaced it with a function that returns null
+  which solved the problem.
+  - Code ref: https://github.com/fkhadra/react-toastify/blob/v8.0.1/src/components/Toast.tsx#L65-L75.
+  - The `if (icon === false)` statement was never success for some reason.
+  
+- PR which addressed this issue: https://github.com/fkhadra/react-toastify/pull/758
+
 ## 8.2.39 - 2024-11-27
 
 - Updates the value and default value fixed to the allowed range only if the user has touched the fields. This will fix the values outside the allowed ranges until not properly rendered initially.
@@ -196,7 +207,6 @@ Updates all formik components in neetoUI to use status to show server error and
 - Added: `--neeto-ui-gray-50` - `#fafafa`.
 - Updated: `--neeto-ui-primary-800` from `#2d36d4` to `#006653`.
 - Updated: `--neeto-ui-primary-600` from `#3642df` to `#007a64`.
-  
 - Updated: `--neeto-ui-primary-500` from `#4558f9` to `#008068`.
   
 - Updated: `--neeto-ui-primary-100` from `#ebecfe` to `#e1f3ee`.
@@ -652,7 +662,6 @@ Added: `rejectCharsRegex` prop to *Input* component.
 ## 5.1.3 - 2023-08-02
 - Fixed: Disabled click in selected option close button if select is disabled.
 ## 5.1.2 - 2023-08-02
-
 - FIxed: Updated deprecated CSS property `color-adjust`
 
 ## 5.1.1 - 2023-08-02
diff --git a/package.json b/package.json
index 824ff2f04..6cfca063f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "8.2.39",
+  "version": "8.2.40",
   "author": "BigBinary",
   "license": "MIT",
   "description": "neetoUI drives the experience at all neeto products",