globuswebcomponents 0.3.9 → 0.4.1

package/dist/collection/components/gb-input-field/gb-input-field.css

@@ -1653,546 +1653,1309 @@
 }
 @import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
 
-:root {
-    --font-family: 'Sora';
-    --font-family-sans: sans-serif;
-    --font-style: normal;
-
-    /* ------------------base font sizes---------------- */
-    /* Display 2xl */
-    --display-2xl-bold-font-size: 4.5rem;
-    --display-2xl-bold-font-weight: 700;
-    --display-2xl-bold-line-height: 5rem;
-    --display-2xl-bold-letter-spacing: -0.09rem;
-
-    --display-2xl-semiBold-font-size: 4.5rem;
-    --display-2xl-semiBold-font-weight: 600;
-    --display-2xl-semiBold-line-height: 5rem;
-    --dispay-2xl-semiBold-letter-spacing: -0.09rem;
-
-    /* Display xl */
-    --display-xl-bold-font-size: 3.75rem;
-    --display-xl-bold-font-weight: 700;
-    --display-xl-bold-line-height: 4.25rem;
-    --display-xl-bold-letter-spacing: -0.075rem;
-
-    --display-xl-semiBold-font-size: 3.75rem;
-    --display-xl-semiBold-font-weight: 600;
-    --display-xl-semiBold-line-height: 4.25rem;
-    --display-xl-semiBold-letter-spacing: -0.075rem;
-
-    /* Display lg */
-    --display-lg-bold-font-size: 3rem;
-    --display-lg-bold-font-weight: 700;
-    --display-lg-bold-line-height: 4.25rem;
-    --display-lg-bold-letter-spacing: -0.075rem;
-
-    --display-lg-semiBold-font-size: 3rem;
-    --display-lg-semiBold-font-weight: 600;
-    --display-lg-semiBold-line-height: 4.25rem;
-    --display-lg-semiBold-letter-spacing: -0.075rem;
-
-    /* Display sm */
-    --display-sm-bold-font-size: 1.875rem;
-    --display-sm-bold-font-weight: 700;
-    --display-sm-bold-line-height: 2.375rem;
-    --display-sm-bold-letter-spacing: 0rem;
-
-    --display-sm-semiBold-font-size: 1.875rem;
-    --display-sm-semiBold-font-weight: 600;
-    --display-sm-semiBold-line-height: 2.375rem;
-    --display-sm-semiBold-letter-spacing: 0rem;
-
-    /* Display xs */
-    --display-xs-bold-font-size: 1.5rem;
-    --display-xs-bold-font-weight: 700;
-    --display-xs-bold-line-height: 2rem;
-    --display-xs-bold-letter-spacing: 0rem;
-
-    --display-xs-semiBold-font-size: 1.5rem;
-    --display-xs-semiBold-font-weight: 600;
-    --display-xs-semiBold-line-height: 2rem;
-    --display-xs-semiBold-letter-spacing: 0rem;
-
-    /* Text xl */
-    --text-xl-bold-font-size: 1.25rem;
-    --text-xl-bold-font-weight: 700;
-    --text-xl-bold-line-height: 1.875rem;
-
-    --text-xl-semiBold-font-size: 1.25rem;
-    --text-xl-semiBold-font-weight: 600;
-    --text-xl-semiBold-line-height: 1.875rem;
-
-    --text-xl-medium-font-size: 1.25rem;
-    --text-xl-medium-font-weight: 500;
-    --text-xl-medium-line-height: 1.875rem;
-
-    --text-xl-regular-font-size: 1.25rem;
-    --text-xl-regular-font-weight: 400;
-    --text-xl-regular-line-height: 1.875rem;
-
-    /* Text lg */
-    --text-lg-bold-font-size: 1.125rem;
-    --text-lg-bold-font-weight: 700;
-    --text-lg-bold-line-height: 1.75rem;
-
-    --text-lg-semiBold-font-size: 1.125rem;
-    --text-lg-semiBold-font-weight: 600;
-    --text-lg-semiBold-line-height: 1.75rem;
-
-    --text-lg-medium-font-size: 1.125rem;
-    --text-lg-medium-font-weight: 500;
-    --text-lg-medium-line-height: 1.75rem;
-
-    --text-lg-regular-font-size: 1.125rem;
-    --text-lg-regular-font-weight: 400;
-    --text-lg-regular-line-height: 1.75rem;
-
-    /* Text md */
-    --text-md-bold-font-size: 1rem;
-    --text-md-bold-font-weight: 700;
-    --text-md-bold-line-height: 1.5rem;
-
-    --text-md-semiBold-font-size: 1rem;
-    --text-md-semiBold-font-weight: 600;
-    --text-md-semiBold-line-height: 1.5rem;
-
-    --text-md-medium-font-size: 1rem;
-    --text-md-medium-font-weight: 500;
-    --text-md-medium-line-height: 1.5rem;
-
-    --text-md-regular-font-size: 1rem;
-    --text-md-regular-font-weight: 400;
-    --text-md-regular-line-height: 1.5rem;
-
-    /* Text sm */
-    --text-sm-bold-font-size: 0.875rem;
-    --text-sm-bold-font-weight: 700;
-    --text-sm-bold-line-height: 1.25rem;
-
-    --text-sm-semiBold-font-size: 0.875rem;
-    --text-sm-semiBold-font-weight: 600;
-    --text-sm-semiBold-line-height: 1.25rem;
-
-    --text-sm-medium-font-size: 0.875rem;
-    --text-sm-medium-font-weight: 500;
-    --text-sm-medium-line-height: 1.25rem;
-
-    --text-sm-regular-font-size: 0.875rem;
-    --text-sm-regular-font-weight: 400;
-    --text-sm-regular-line-height: 1.25rem;
-
-    /* Text xs */
-    --text-xs-bold-font-size: 0.75rem;
-    --text-xs-bold-font-weight: 700;
-    --text-xs-bold-line-height: 1.125rem;
-
-    --text-xs-semiBold-font-size: 0.75rem;
-    --text-xs-semiBold-font-weight: 600;
-    --text-xs-semiBold-line-height: 1.125rem;
-
-    --text-xs-medium-font-size: 0.75rem;
-    --text-xs-medium-font-weight: 500;
-    --text-xs-medium-line-height: 1.125rem;
-
-    --text-xs-regular-font-size: 0.75rem;
-    --text-xs-regular-font-weight: 400;
-    --text-xs-regular-line-height: 1.125rem;
-}
-
-/* ------------------Responsive adjustments---------------- */
-/* Medium screens */
-@media (max-width: 1199px){
+:root{
+    /* Font Sizes */
+    --font-size-d-2xl: 4.5rem;
+    --font-size-d-xl: 3.75rem;
+    --font-size-d-lg: 3rem;
+    --font-size-d-md: 2.25rem;
+    --font-size-d-sm: 1.875rem;
+    --font-size-d-xs: 1.5rem;
+    --font-size-t-xl: 1.25rem;
+    --font-size-t-lg: 1.125rem;
+    --font-size-t-md: 1rem;
+    --font-size-t-sm: 0.875rem;
+    --font-size-t-xs: 0.75rem;
+    --font-size-t-xxs: 0.625rem;
+
+    /* Font Weights */
+    --font-weight-bold: 700;
+    --font-weight-semi-bold: 600;
+    --font-weight-medium: 500;
+    --font-weight-regular: 400; 
+
+    /* Line Heights */
+    --font-line-height-d-2xl: 5rem;
+    --font-line-height-d-xl: 4.25rem;
+    --font-line-height-d-lg: 3.75rem;
+    --font-line-height-d-md: 2.75rem;
+    --font-line-height-d-sm: 2.375rem;   
+    --font-line-height-d-xs: 2rem;   
+    --font-line-height-t-xl: 1.875rem;
+    --font-line-height-t-lg: 1.688rem;
+    --font-line-height-t-md: 1.5rem;
+    --font-line-height-t-sm: 1.313rem;
+    --font-line-height-t-xs: 1.125rem;
+    --font-line-height-t-xxs: 0.938rem;
+
+    /* Letter Spacings */
+    --font-letter-spacing-d-2xl: -0.09rem;
+    --font-letter-spacing-d-xl: -0.075rem;
+    --font-letter-spacing-d-lg: -0.075rem;
+    --font-letter-spacing-d-md: -0.045rem;
+    --font-letter-spacing-d-sm: 0;
+    --font-letter-spacing-d-xs: 0;
+    --font-letter-spacing-d-xxs: 0;
+
+    /* Font Families */
+    --font-family-title: 'Sora';
+    --font-family-body: 'Sora';
+}
+
+/* Media queries for medium screens (tablet) */
+@media (max-width: 1199px) {
     :root{
-        /* Display 2xl */
-        --display-2xl-bold-font-size: 3.75rem;
-        --display-2xl-bold-font-weight: 700;
-        --display-2xl-bold-line-height: 4.25rem;
-        --display-2xl-bold-letter-spacing: -0.075rem;
-
-        --display-2xl-semiBold-font-size: 3.75rem;
-        --display-2xl-semiBold-font-weight: 600;
-        --display-2xl-semiBold-line-height: 4.25rem;
-        --display-2xl-semiBold-letter-spacing: -0.075rem;
-
-        /* Display xl */   
-        --display-xl-bold-font-size: 3.5rem;
-        --display-xl-bold-font-weight: 700;
-        --display-xl-bold-line-height: 3.75rem;
-        --display-xl-bold-letter-spacing: -0.065rem; 
-
-        --display-xl-semiBold-font-size: 3.5rem;
-        --display-xl-semiBold-font-weight: 600;
-        --display-xl-semiBold-line-height: 3.75rem;
-        --display-xl-semiBold-letter-spacing: -0.065rem; 
-
-        /* Display lg */   
-        --display-lg-bold-font-size: 2.75rem;
-        --display-lg-bold-font-weight: 700;
-        --display-lg-bold-line-height: 2.4375rem;
-        --display-lg-bold-letter-spacing: -0.045rem; 
-
-        --display-lg-semiBold-font-size: 2.75rem;
-        --display-lg-semiBold-font-weight: 600;
-        --display-lg-semiBold-line-height: 2.4375rem;
-        --display-lg-semiBold-letter-spacing: -0.045rem; 
-
-        /* Display md */   
-        --display-md-bold-font-size: 2.25rem;
-        --display-md-bold-font-weight: 700;
-        --display-md-bold-line-height: 2.75rem;
-        --display-md-bold-letter-spacing: -0.045rem; 
-
-        --display-md-semiBold-font-size: 2.25rem;
-        --display-md-semiBold-font-weight: 600;
-        --display-md-semiBold-line-height: 2.75rem;
-        --display-md-semiBold-letter-spacing: -0.045rem; 
-
-        /* Display sm */   
-        --display-sm-bold-font-size: 1.875rem;
-        --display-sm-bold-font-weight: 700;
-        --display-sm-bold-line-height: 2.375rem;
-        --display-sm-bold-letter-spacing: 0rem; 
-
-        --display-sm-semiBold-font-size: 1.875rem;
-        --display-sm-semiBold-font-weight: 600;
-        --display-sm-semiBold-line-height: 2.375rem;
-        --display-sm-semiBold-letter-spacing: 0rem; 
-
-        /* Display xs */   
-        --display-xs-bold-font-size: 1.5rem;
-        --display-xs-bold-font-weight: 700;
-        --display-xs-bold-line-height: 2rem;
-        --display-xs-bold-letter-spacing: 0rem; 
-
-        --display-xs-semiBold-font-size: 1.5rem;
-        --display-xs-semiBold-font-weight: 600;
-        --display-xs-semiBold-line-height: 2rem;
-        --display-xs-semiBold-letter-spacing: 0rem;
-    }
-}
-
-/* Small screens */
-@media (max-width: 743px){
+        /* Font Sizes */
+        --font-size-d-2xl: 3.75rem;
+        --font-size-d-xl: 3.5rem;
+        --font-size-d-lg: 2.75rem;
+        --font-size-d-md: 2.25rem;
+        --font-size-d-sm: 1.875rem;
+        --font-size-d-xs: 1.5rem;
+
+        /* Line Heights */
+        --font-line-height-d-2xl: 4.25rem;
+        --font-line-height-d-xl: 3.75rem;
+        --font-line-height-d-lg: 2.4375rem;
+        --font-line-height-d-md: 2.75rem;
+        --font-line-height-d-sm: 2.375rem;
+        --font-line-height-d-xs: 2rem;
+
+        /* Letter Spacings */
+        --font-letter-spacing-2xl: -0.075rem;
+        --font-letter-spacing-xl: -0.065rem;
+        --font-letter-spacing-lg: -0.045rem;
+        --font-letter-spacing-md: -0.045rem;
+        --font-letter-spacing-sm: 0rem;
+        --font-letter-spacing-xs: 0rem;
+    }
+}
+
+/* Media queries for smaller screens (mobile) */
+@media (max-width: 743px) {
     :root{
-         /* Display 2xl */
-        --display-2xl-bold-font-size: 3rem;
-        --display-2xl-bold-font-weight: 700;
-        --display-2xl-bold-line-height: 3.375rem;
-        --display-2xl-bold-letter-spacing: -0.06rem;
-
-        --display-2xl-semiBold-font-size: 3.75rem;
-        --display-2xl-semiBold-font-weight: 600;
-        --display-2xl-semiBold-line-height: 3.375rem;
-        --display-2xl-semiBold-letter-spacing: -0.06rem;
-
-         /* Display xl */
-        --display-xl-bold-font-size: 2.5rem;
-        --display-xl-bold-font-weight: 700;
-        --display-xl-bold-line-height: 2.875rem;
-        --display-xl-bold-letter-spacing: -0.05rem;
-
-        --display-xl-semiBold-font-size: 2.5rem;
-        --display-xl-semiBold-font-weight: 600;
-        --display-xl-semiBold-line-height: 2.875rem;
-        --display-xl-semiBold-letter-spacing: -0.05rem;
-
-         /* Display lg */
-        --display-lg-bold-font-size: 2rem;
-        --display-lg-bold-font-weight: 700;
-        --display-lg-bold-line-height: 2.5rem;
-        --display-lg-bold-letter-spacing: -0.045rem;
-
-        --display-lg-semiBold-font-size: 2rem;
-        --display-lg-semiBold-font-weight: 600;
-        --display-lg-semiBold-line-height: 2.5rem;
-        --display-lg-semiBold-letter-spacing: -0.045rem;
-
-         /* Display md */
-        --display-md-bold-font-size: 1.75rem;
-        --display-md-bold-font-weight: 700;
-        --display-md-bold-line-height: 2.1375rem;
-        --display-md-bold-letter-spacing: 0rem;
-
-        --display-md-semiBold-font-size: 1.75rem;
-        --display-md-semiBold-font-weight: 600;
-        --display-md-semiBold-line-height: 2.1375rem;
-        --display-md-semiBold-letter-spacing: 0rem;
-
-         /* Display sm */
-        --display-sm-bold-font-size: 1.5rem;
-        --display-sm-bold-font-weight: 700;
-        --display-sm-bold-line-height: 2rem;
-        --display-sm-bold-letter-spacing: 0rem;
-
-        --display-sm-semiBold-font-size: 1.5rem;
-        --display-sm-semiBold-font-weight: 600;
-        --display-sm-semiBold-line-height: 2rem;
-        --display-sm-semiBold-letter-spacing: 0rem;
-
-         /* Display xs */
-        --display-xs-bold-font-size: 1.25rem;
-        --display-xs-bold-font-weight: 700;
-        --display-xs-bold-line-height: 1.75rem;
-        --display-xs-bold-letter-spacing: 0rem;
-
-        --display-xs-semiBold-font-size: 1.25rem;
-        --display-xs-semiBold-font-weight: 600;
-        --display-xs-semiBold-line-height: 1.75rem;
-        --display-xs-semiBold-letter-spacing: 0rem;
+        /* Font Sizes */
+        --font-size-d-2xl: 3rem;
+        --font-size-d-xl: 2.5rem;
+        --font-size-d-lg: 2rem;
+        --font-size-d-md: 1.75rem;
+        --font-size-d-sm: 1.5rem;
+        --font-size-d-xs: 1.25rem;
+
+        /* Line Heights */
+        --font-line-height-d-2xl: 3.375rem;
+        --font-line-height-d-xl: 2.875rem;
+        --font-line-height-d-lg: 2.5rem;
+        --font-line-height-d-md: 2.1375rem;
+        --font-line-height-d-sm: 2rem;
+        --font-line-height-d-xs: 1.75rem;
+
+        /* Letter Spacings */
+        --font-letter-spacing-2xl: -0.06rem;
+        --font-letter-spacing-xl: -0.05rem;
+        --font-letter-spacing-lg: -0.045rem;
+        --font-letter-spacing-md: 0rem;
+        --font-letter-spacing-sm: 0rem;
+        --font-letter-spacing-xs: 0rem;
     }
 }
 
-
 .display-2xl-bold{
-    font-size: var(--display-2xl-bold-font-size);
-    font-weight: var(--display-2xl-bold-font-weight);
-    line-height: var(--display-2xl-bold-line-height);
-    letter-spacing: var(--display-2xl-bold-letter-spacing);
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-2xl);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-d-2xl);
+    letter-spacing: var(--font-letter-spacing-d-2xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-2xl-bold::before,
+.display-2xl-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-2xl-bold::before{
+    margin-bottom: -0.135em;
+}
+
+.display-2xl-bold::after{
+    margin-top: -0.205em;
+}
+
+.display-2xl-semi-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-2xl);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-d-2xl);
+    letter-spacing: var(--font-letter-spacing-d-2xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
 }
 
-.display-2xl-semiBold{
-    font-size: var(--display-2xl-semiBold-font-size);
-    font-weight: var(--display-2xl-semiBold-font-weight);
-    line-height: var(--display-2xl-semiBold-line-height);
-    letter-spacing: var(--display-2xl-semiBold-letter-spacing);
+.display-2xl-semi-bold::before,
+.display-2xl-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-2xl-semi-bold::before{
+    margin-bottom: -0.135em;
+}
+
+.display-2xl-semi-bold::after{
+    margin-top: -0.205em;
 }
 
 .display-xl-bold{
-    font-size: var(--display-xl-bold-font-size);
-    font-weight: var(--display-xl-bold-font-weight);
-    line-height: var(--display-xl-bold-line-height);
-    letter-spacing: var(--display-xl-bold-letter-spacing);
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-xl);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-d-xl);
+    letter-spacing: var(--font-letter-spacing-d-xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-xl-bold::before,
+.display-xl-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-xl-bold::before{
+    margin-bottom: -0.145em;
+}
+
+.display-xl-bold::after{
+    margin-top: -0.215em;
 }
 
-.display-xl-semiBold{
-    font-size: var(--display-xl-semiBold-font-size);
-    font-weight: var(--display-xl-semiBold-font-weight);
-    line-height: var(--display-xl-semiBold-line-height);
-    letter-spacing: var(--display-xl-semiBold-letter-spacing);
+.display-xl-semi-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-xl);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-d-xl);
+    letter-spacing: var(--font-letter-spacing-d-xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-xl-semi-bold::before,
+.display-xl-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-xl-semi-bold::before{
+    margin-bottom: -0.145em;
+}
+
+.display-xl-semi-bold::after{
+    margin-top: -0.215em;
 }
 
 .display-lg-bold{
-    font-size: var(--display-lg-bold-font-size);
-    font-weight: var(--display-lg-bold-font-weight);
-    line-height: var(--display-lg-bold-line-height);
-    letter-spacing: var(--display-lg-bold-letter-spacing);
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-lg);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-d-lg);
+    letter-spacing: var(--font-letter-spacing-d-lg);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
 }
 
-.display-lg-semiBold{
-    font-size: var(--display-lg-semiBold-font-size);
-    font-weight: var(--display-lg-semiBold-font-weight);
-    line-height: var(--display-lg-semiBold-line-height);
-    letter-spacing: var(--display-lg-semiBold-letter-spacing);
+.display-lg-bold::before,
+.display-lg-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-lg-bold::before{
+    margin-bottom: -0.015em;
+}
+
+.display-lg-bold::after{
+    margin-top: -0.095em;
+}
+
+.display-lg-semi-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-lg);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-d-lg);
+    letter-spacing: var(--font-letter-spacing-d-lg);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-lg-semi-bold::before,
+.display-lg-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-lg-semi-bold::before{
+    margin-bottom: -0.015em;
+}
+
+.display-lg-semi-bold::after{
+    margin-top: -0.095em;
 }
 
 .display-md-bold{
-    font-size: var(--display-md-bold-font-size);
-    font-weight: var(--display-md-bold-font-weight);
-    line-height: var(--display-md-bold-line-height);
-    letter-spacing: var(--display-md-bold-letter-spacing);
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-md);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-d-md);
+    letter-spacing: var(--font-letter-spacing-d-md);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
 }
 
-.display-md-semiBold{
-    font-size: var(--display-md-semiBold-font-size);
-    font-weight: var(--display-md-semiBold-font-weight);
-    line-height: var(--display-md-semiBold-line-height);
-    letter-spacing: var(--display-md-semiBold-letter-spacing);
+.display-md-bold::before,
+.display-md-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-md-bold::before{
+    margin-bottom: -0.195em;
+}
+
+.display-md-bold::after{
+    margin-top: -0.255em;
+}
+
+.display-md-semi-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-md);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-d-md);
+    letter-spacing: var(--font-letter-spacing-d-md);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-md-semi-bold::before,
+.display-md-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-md-semi-bold::before{
+    margin-bottom: -0.195em;
+}
+
+.display-md-semi-bold::after{
+    margin-top: -0.255em;
 }
 
 .display-sm-bold{
-    font-size: var(--display-sm-bold-font-size);
-    font-weight: var(--display-sm-bold-font-weight);
-    line-height: var(--display-sm-bold-line-height);
-    letter-spacing: var(--display-sm-bold-letter-spacing);
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-sm);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-d-sm);
+    letter-spacing: var(--font-letter-spacing-d-sm);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-sm-bold::before,
+.display-sm-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-sm-bold::before{
+    margin-bottom: -0.195em;
+}
+
+.display-sm-bold::after{
+    margin-top: -0.255em;
+}
+
+.display-sm-semi-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-sm);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-d-sm);
+    letter-spacing: var(--font-letter-spacing-d-sm);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-sm-semi-bold::before,
+.display-sm-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-sm-semi-bold::before{
+    margin-bottom: -0.195em;
 }
 
-.display-sm-semiBold{
-    font-size: var(--display-sm-semiBold-font-size);
-    font-weight: var(--display-sm-semiBold-font-weight);
-    line-height: var(--display-sm-semiBold-line-height);
-    letter-spacing: var(--display-sm-semiBold-letter-spacing);
+.display-sm-semi-bold::after{
+    margin-top: -0.255em;
 }
 
 .display-xs-bold{
-    font-size: var(--display-xs-bold-font-size);
-    font-weight: var(--display-xs-bold-font-weight);
-    line-height: var(--display-xs-bold-line-height);
-    letter-spacing: var(--display-xs-bold-letter-spacing);
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-xs);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-d-xs);
+    letter-spacing: var(--font-letter-spacing-d-xs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
 }
 
-.display-xs-semiBold{
-    font-size: var(--display-xs-semiBold-font-size);
-    font-weight: var(--display-xs-semiBold-font-weight);
-    line-height: var(--display-xs-semiBold-line-height);
-    letter-spacing: var(--display-xs-semiBold-letter-spacing);
+.display-xs-bold::before,
+.display-xs-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-xs-bold::before{
+    margin-bottom: -0.199em;
+}
+
+.display-xs-bold::after{
+    margin-top: -0.195em; /* Continue from here */
+}
+
+.display-xs-semi-bold{
+    font-family: var(--font-family-title);
+    font-size: var(--font-size-d-xs);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-d-xs);
+    letter-spacing: var(--font-letter-spacing-d-xs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.display-xs-semi-bold::before,
+.display-xs-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.display-xs-semi-bold::before{
+    margin-bottom: -0.259em;
+}
+
+.display-xs-semi-bold::after{
+    margin-top: -0.295em;
 }
 
 .text-xl-bold{
-    font-size: var(--text-xl-bold-font-size);
-    font-weight: var(--text-xl-bold-font-weight);
-    line-height: var(--text-xl-bold-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xl);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xl-bold::before,
+.text-xl-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xl-bold::before{
+    margin-bottom: -0.329em;
+}
+
+.text-xl-bold::after{
+    margin-top: -0.359em;
+}
+
+.text-xl-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xl);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
 }
 
-.text-xl-semiBold{
-    font-size: var(--text-xl-semiBold-font-size);
-    font-weight: var(--text-xl-semiBold-font-weight);
-    line-height: var(--text-xl-semiBold-line-height);
+.text-xl-semi-bold::before,
+.text-xl-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xl-semi-bold::before{
+    margin-bottom: -0.329em;
+}
+
+.text-xl-semi-bold::after{
+    margin-top: -0.359em;
 }
 
 .text-xl-medium{
-    font-size: var(--text-xl-medium-font-size);
-    font-weight: var(--text-xl-medium-font-weight);
-    line-height: var(--text-xl-medium-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xl);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xl-medium::before,
+.text-xl-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-xl-medium::before{
+    margin-bottom: -0.339em;
+}
+
+.text-xl-medium::after{
+    margin-top: -0.399em;
 }
 
 .text-xl-regular{
-    font-size: var(--text-xl-regular-font-size);
-    font-weight: var(--text-xl-regular-font-weight);
-    line-height: var(--text-xl-regular-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xl);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-xl);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xl-regular::before,
+.text-xl-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-xl-regular::before{
+    margin-bottom: -0.339em;
+}
+
+.text-xl-regular::after{
+    margin-top: -0.399em;
 }
 
 .text-lg-bold{
-    font-size: var(--text-lg-bold-font-size);
-    font-weight: var(--text-lg-bold-font-weight);
-    line-height: var(--text-lg-bold-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-lg);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-lg);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-lg-bold::before,
+.text-lg-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-lg-bold::before{
+    margin-bottom: -0.339em;
+}
+
+.text-lg-bold::after{
+    margin-top: -0.399em;
+}
+
+.text-lg-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-lg);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-lg);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
 }
 
-.text-lg-semiBold{
-    font-size: var(--text-lg-semiBold-font-size);
-    font-weight: var(--text-lg-semiBold-font-weight);
-    line-height: var(--text-lg-semiBold-line-height);
+.text-lg-semi-bold::before,
+.text-lg-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-lg-semi-bold::before{
+    margin-bottom: -0.339em;
+}
+
+.text-lg-semi-bold::after{
+    margin-top: -0.399em;
 }
 
 .text-lg-medium{
-    font-size: var(--text-lg-medium-font-size);
-    font-weight: var(--text-lg-medium-font-weight);
-    line-height: var(--text-lg-medium-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-lg);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-lg);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-lg-medium::before,
+.text-lg-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-lg-medium::before{
+    margin-bottom: -0.349em;
+}
+
+.text-lg-medium::after{
+    margin-top: -0.389em;
 }
 
 .text-lg-regular{
-    font-size: var(--text-lg-regular-font-size);
-    font-weight: var(--text-lg-regular-font-weight);
-    line-height: var(--text-lg-regular-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-lg);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-lg);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-lg-regular::before,
+.text-lg-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-lg-regular::before{
+    margin-bottom: -0.349em;
+}
+
+.text-lg-regular::after{
+    margin-top: -0.389em;
 }
 
 .text-md-bold{
-    font-size: var(--text-md-bold-font-size);
-    font-weight: var(--text-md-bold-font-weight);
-    line-height: var(--text-md-bold-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-md);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-md);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-md-bold::before,
+.text-md-bold::after{
+    content: "";
+    display: table;
 }
 
-.text-md-semiBold{
-    font-size: var(--text-md-semiBold-font-size);
-    font-weight: var(--text-md-semiBold-font-weight);
-    line-height: var(--text-md-semiBold-line-height);
+.text-md-bold::before{
+    margin-bottom: -0.349em;
+}
+
+.text-md-bold::after{
+    margin-top: -0.389em;
+}
+
+.text-md-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-md);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-md);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-md-semi-bold::before,
+.text-md-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-md-semi-bold::before{
+    margin-bottom: -0.349em;
+}
+
+.text-md-semi-bold::after{
+    margin-top: -0.389em;
 }
 
 .text-md-medium{
-    font-size: var(--text-md-medium-font-size);
-    font-weight: var(--text-md-medium-font-weight);
-    line-height: var(--text-md-medium-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-md);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-md);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-md-medium::before,
+.text-md-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-md-medium::before{
+    margin-bottom: -0.349em;
+}
+
+.text-md-medium::after{
+    margin-top: -0.389em;
 }
 
 .text-md-regular{
-    font-size: var(--text-md-regular-font-size);
-    font-weight: var(--text-md-regular-font-weight);
-    line-height: var(--text-md-regular-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-md);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-md);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-md-regular::before,
+.text-md-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-md-regular::before{
+    margin-bottom: -0.349em;
+}
+
+.text-md-regular::after{
+    margin-top: -0.389em;
 }
 
 .text-sm-bold{
-    font-size: var(--text-sm-bold-font-size);
-    font-weight: var(--text-sm-bold-font-weight);
-    line-height: var(--text-sm-bold-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-sm);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-sm);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-sm-bold::before,
+.text-sm-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-sm-bold::before{
+    margin-bottom: -0.299em;
+}
+
+.text-sm-bold::after{
+    margin-top: -0.349em;
+}
+
+.text-sm-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-sm);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-sm);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-sm-semi-bold::before,
+.text-sm-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-sm-semi-bold::before{
+    margin-bottom: -0.299em;
 }
 
-.text-sm-semiBold{
-    font-size: var(--text-sm-semiBold-font-size);
-    font-weight: var(--text-sm-semiBold-font-weight);
-    line-height: var(--text-sm-semiBold-line-height);
+.text-sm-semi-bold::after{
+    margin-top: -0.349em;
 }
 
 .text-sm-medium{
-    font-size: var(--text-sm-medium-font-size);
-    font-weight: var(--text-sm-medium-font-weight);
-    line-height: var(--text-sm-medium-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-sm);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    position: relative;
+    display: inline-block;
+}
+
+.text-sm-medium::before,
+.text-sm-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-sm-medium::before{
+    margin-bottom: -0.299em;
+}
+
+.text-sm-medium::after{
+    margin-top: -0.299em;
 }
 
 .text-sm-regular{
-    font-size: var(--text-sm-regular-font-size);
-    font-weight: var(--text-sm-regular-font-weight);
-    line-height: var(--text-sm-regular-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-sm);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-sm);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    position: relative;
+    display: inline-block;
+}
+
+.text-sm-regular::before,
+.text-sm-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-sm-regular::before{
+    margin-bottom: -0.299em;
+}
+
+.text-sm-regular::after{
+    margin-top: -0.299em;
 }
 
 .text-xs-bold{
-    font-size: var(--text-xs-bold-font-size);
-    font-weight: var(--text-xs-bold-font-weight);
-    line-height: var(--text-xs-bold-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xs);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-xs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xs-bold::before,
+.text-xs-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xs-bold::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xs-bold::after{
+    margin-top: -0.416em;
 }
 
-.text-xs-semiBold{
-    font-size: var(--text-xs-semiBold-font-size);
-    font-weight: var(--text-xs-semiBold-font-weight);
-    line-height: var(--text-xs-semiBold-line-height);
+.text-xs-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xs);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-xs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xs-semi-bold::before,
+.text-xs-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xs-semi-bold::before{
+    margin-bottom: -0.321em;
+}
+
+.text-xs-semi-bold::after{
+    margin-top: -0.416em;
 }
 
 .text-xs-medium{
-    font-size: var(--text-xs-medium-font-size);
-    font-weight: var(--text-xs-medium-font-weight);
-    line-height: var(--text-xs-medium-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xs);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-xs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xs-medium::before,
+.text-xs-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-xs-medium::before{
+    margin-bottom: -0.199em;
+}
+
+.text-xs-medium::after{
+    margin-top: -0.196em;
 }
 
 .text-xs-regular{
-    font-size: var(--text-xs-regular-font-size);
-    font-weight: var(--text-xs-regular-font-weight);
-    line-height: var(--text-xs-regular-line-height);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xs);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-xs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xs-regular::before,
+.text-xs-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-xs-regular::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xs-regular::after{
+    margin-top: -0.396em;
+}
+
+.text-xxs-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-bold::before,
+.text-xxs-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-bold::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-bold::after{
+    margin-top: -0.416em;
+}
+
+.text-xxs-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-semi-bold::before,
+.text-xxs-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-semi-bold::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-semi-bold::after{
+    margin-top: -0.416em;
+}
+
+.text-xxs-medium{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-medium::before,
+.text-xxs-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-medium::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-medium::after{
+    margin-top: -0.416em;
+}
+
+.text-xxs-regular{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-regular::before,
+.text-xxs-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-regular::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-regular::after{
+    margin-top: -0.416em;
 }
 
 div {
+  font-family: var(--font-family-body);
+  font-style: normal;
+  letter-spacing: var(--Font-Letter-spacing-T-md, 0rem);
+}
+
+div.sm {
   display: flex;
+  width: 20rem;
   flex-direction: column;
-  margin-bottom: 10px;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+div.md {
+  display: flex;
+  width: 20rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+.input-with-label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  align-self: stretch;
 }
 
 .input-wrapper {
   display: flex;
-  width: 320px;
+  justify-content: space-between;
   align-items: center;
-  border: 1px solid #ccc;
-  padding: 8px;
-  border-radius: 4px;
+  gap: var(--spacing-2);
+  align-self: stretch;
+  border-radius: var(--rounded-sm);
+  border: 1px solid var(--color-border-input, #CDD5DF);
+  background: var(--color-background-card, #FFFFFF);
 }
 
-input {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  --line-clamp: 1;
+.sm .input-wrapper {
+  height: var(--spacing-Positive-spacing-8, 2.5rem);
+  padding: 0.25rem var(--spacing-3, 0.75rem);
+}
+
+.md .input-wrapper{
+  height: 3rem;
+  padding: 0.45rem var(--spacing-3, 0.75rem);
+}
+
+.leading_text .input-wrapper.sm,
+.leading_text .input-wrapper.md {
+  flex-direction: row;
+}
+
+.count .input-wrapper.md,
+.count .input-wrapper.sm {
+  padding: 0;
+  flex-direction: row;
+}
+
+.input-wrapper:focus-within,
+.leading_text:focus-within .text-input {
+  border: 1.3px solid var(--color-border-selected,#075DB2);
+}
+
+.input-wrapper.disabled,
+.leading_text.disabled .text-input {
+  border: 1px solid var(--color-border-disabled, #E3E8EF);
+  background: var(--color-background-disabled, #F6F8FA);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.input-wrapper.disabled input,
+.leading_text.disabled input{
+  background: var(--color-background-disabled, #F6F8FA);
+}
+
+.content{
+  display: flex;
+  align-items: center;
+  align-content: center;
+  gap: 0.5rem var(--spacing-2);
   flex: 1 0 0;
+  align-self: stretch;
+}
+
+.password .content{
+  padding: var(--spacing-2) var(--spacing-none) var(--spacing-2) var(--spacing-3);
+  flex-wrap: wrap;
+}
+
+.icon {
+  position: relative;
+  top: 3px;
+}
+
+.leading_text{
+  display: flex;
+}
+
+.leading_text_wrapper{
+  display: flex;
+  width: fit-content;
+  border-radius: var(--rounded-sm);
+}
+
+.add-on {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;
+  border: 1px solid var(--color-border-input, #CDD5DF);
+  border-right: none;
+}
+
+.dropdown {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  align-self: stretch;
+  margin-top: 0.1rem;
+}
+
+select {
+  border: none; 
+  background-color: var(--color-background-card, #FFFFFF); 
+  color: #374151; /* Text color */
+  box-shadow: none; /* Remove default box shadow */
+  outline: none;
+}
+
+select:focus {
+  border:none; /* Maintain light border on focus */
+  box-shadow: none; /* Ensure no additional shadow appears on focus */
+}
+
+.text-input {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-Positive-spacing-2, 0.5rem);
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.trailing_button .text-input {
+  padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);
+}
+
+.count .text-input {
+  padding: var(--spacing-Positive-spacing-2, 0.5rem) 0rem var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);
+  border-radius: 0.5rem var(--Radius-rounded-none, 0rem) var(--Radius-rounded-none, 0rem) 0.5rem;
+  border: 1px solid var(--color-boarder-input, #CDD5DF);
+}
+
+.leading_dropdown .text-input {
+  padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem) var(--spacing-Positive-spacing-2, 0.5rem) 0rem;
+}
+
+.leading_text .text-input {
+  width: 14.4rem;
+  padding: 0.625rem 0.875rem;
+  border: 1px solid var(--gray-300, #D0D5DD);
+  border-radius: 0 var(--rounded-sm) var(--rounded-sm) 0;
 }
 
-.input-wrapper input, .input-wrapper select {
-  flex-grow: 1;
-  border: none;
+.leading_text.destructive .text-input {
+  border: 1.5px solid var(--color-border-danger, #B51726);
+}
+
+.trailing_dropdown .dropdown {
+  display: flex;
+  padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem) var(--spacing-Positive-spacing-2, 0.5rem) 0rem;
+  justify-content: space-between;
+}
+
+.count-action {
+  display: flex;
+  justify-content: space-between;
+  padding-right: var(--spacing-1);
+  align-items: center;
+  gap: var(--spacing-none);
+}
+
+.decrease-btn {
+  display: flex;
+  width: var(--spacing-Positive-spacing-8, 2.5rem);
+  height: var(--spacing-Positive-spacing-8, 2.5rem);
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--rounded-none);
+  border-right: 1px solid var(--color-border-input, #CDD5DF);
+}
+
+.payment-method {
+  display: flex;
+  width: 2.125rem;
+  height: var(--spacing-Positive-spacing-6, 1.5rem);
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--Radius-rounded-xs, 0.25rem);
+  border: 1px solid var(--color-border-subtler, #E3E8EF);
+  background: var(--color-background-card, #FFFFFF);
+}
+
+.tags-box {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+}
+
+.tags input {
+  width: 160px;
+  padding-right: 8px;
+}
+
+input {
+  border: none; 
+  background-color: var(--color-background-card, #FFFFFF); 
+  color: var(--color-text, #4B5565);
+  box-shadow: none; /* Remove default box shadow */
   outline: none;
+  font-family: var(--Font-Family-Body, Sora);
+  font-style: normal;
+  letter-spacing: var(--Font-Letter-spacing-T-md, 0rem);
+  width: 100%;
+}
+
+.input-wrapper.destructive{
+  border: 1px solid var(--color-border-danger, #B51726);
 }
 
-.tag {
+.trailing-btn {
   display: flex;
+  width: var(--spacing-Positive-spacing-8, 2.5rem);
+  height: var(--spacing-Positive-spacing-8, 2.5rem);
+  justify-content: center;
   align-items: center;
-  background-color: #f0f0f0;
-  border-radius: 12px;
-  padding: 4px 8px;
-  margin-right: 8px;
 }
 
-.help-text {
-  font-size: 12px;
-  color: #888;
-  margin-top: 4px;
+.trailing_dropdown .help-icon {
+  margin-left: -5px;
+}
+
+.password_icon_leading .help-icon {
+  margin-left: -15px;
+}
+
+.password_icon_leading .help-icon svg {
+  padding-right: 5px;
+}
+
+.trailing_dropdown .help-icon svg {
+  position: relative;
+  left: 5%;
+  top: 2px;
+}
+
+.tags .help-icon svg {
+  left: -52%;
+}
+
+.help-svg {
+  margin-right: 0.4rem;
 }
 
-button {
-  background: none;
-  border: none;
-  cursor: pointer;
+label{
+  color: var(--color-text, #4B5565);
 }
+
+.hint_text{
+  color: var(--color-text-subtle, #697586); 
+}
+
+.hint_text.destructive{
+  color: var(--color-text-danger, #B51726);
+}
+
+/* Destructive State Styles */
+.help_icon.destructive{
+  stroke: var(--color-icon-danger, #B51726);
+}