diff --git a/docs/components/sass/abstracts/_variables.scss b/docs/components/sass/abstracts/_variables.scss
index 0a8c4eb..6f9a068 100644
--- a/docs/components/sass/abstracts/_variables.scss
+++ b/docs/components/sass/abstracts/_variables.scss
@@ -67,6 +67,28 @@ $input-field-box-width: 348px;
 $input-field-box-height: 48px;
 $input-field-border-radius: 4px;
 
+// Input field states
+$input-border-color-default: $color-dark-grey;
+$input-border-color-hover: #6F6F6F;   // or use $color-old-mid-grey
+$input-border-color-focus: $color-green;  // matches system accent
+$input-border-color-error: #B00020;   // add red tone if not defined yet
+$input-border-color-disabled: $color-old-light-grey;
+
+$input-label-color-default: $color-dark-grey;
+$input-label-color-error: #B00020;
+$input-label-color-disabled: $color-old-grey;
+
+$input-supporting-text-color: $color-dark-grey;
+$input-supporting-text-error: #B00020;
+
+$input-padding-x: 12px;   // horizontal padding
+$input-padding-y: 8px;    // vertical padding
+$input-icon-gap: 8px;     // space between icon and text
+$input-font-size: 16px;
+$input-label-font-size: 14px;
+$input-supporting-font-size: 12px;
+
+
 $text-area-height: 122px;
 $text-area-width: 348px;
 $text-area-border-radius: 4px;
@@ -140,6 +162,27 @@ $bp-below-tablet: '(max-width: #{$screen-tablet - 1})';
   --input-field-box-width: #{$input-field-box-width};
   --input-field-box-height: #{$input-field-box-height};
   --input-field-border-radius: #{$input-field-border-radius};
+
+  --input-border-color-default: #{$input-border-color-default};
+--input-border-color-hover: #{$input-border-color-hover};
+--input-border-color-focus: #{$input-border-color-focus};
+--input-border-color-error: #{$input-border-color-error};
+--input-border-color-disabled: #{$input-border-color-disabled};
+
+--input-label-color-default: #{$input-label-color-default};
+--input-label-color-error: #{$input-label-color-error};
+--input-label-color-disabled: #{$input-label-color-disabled};
+
+--input-supporting-text-color: #{$input-supporting-text-color};
+--input-supporting-text-error: #{$input-supporting-text-error};
+
+--input-padding-x: #{$input-padding-x};
+--input-padding-y: #{$input-padding-y};
+--input-icon-gap: #{$input-icon-gap};
+--input-font-size: #{$input-font-size};
+--input-label-font-size: #{$input-label-font-size};
+--input-supporting-font-size: #{$input-supporting-font-size};
+
   
   // Text area
   --text-area-height: #{$text-area-height};
diff --git a/docs/components/sass/components/_input-fields.scss b/docs/components/sass/components/_input-fields.scss
index cd0526e..843cb5b 100644
--- a/docs/components/sass/components/_input-fields.scss
+++ b/docs/components/sass/components/_input-fields.scss
@@ -1,56 +1,746 @@
-@use '../abstracts/variables' as *;
+// -----------------------------------------------------------------------------
+// Input Fields – Shared Base Styles
+// -----------------------------------------------------------------------------
 
+.input-wrapper {
+  position: relative;
+  width: var(--input-field-box-width);
+  height: 56px; // fixed per Figma
+  font-family: var(--text-font-stack);
 
-.input-field-container {
-    display: grid;
-    padding: 5%;
-    text-align: left;
-    
+  // ========================
+  // Input box (shared)
+  // ========================
+  .input-field {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--input-field-border-radius, 4px);
+    border: 1px solid var(--input-border-color-default, #C6C6C6);
+    padding: 0 16px;
+    font-size: 1rem;
+    font-weight: 600; // semibold
+    line-height: 56px; // center text vertically
+    color: var(--text-color);
+    background: #fff;
+
+    &::placeholder { color: var(--input-placeholder-color, #989898); }
+
+    // Hover
+    &:hover,
+    &.is-hover { border-color: var(--input-border-color-hover, #6F6F6F); }
+
+    // Focused
+    &:focus,
+    &.is-focused {
+      border: 2px solid var(--input-border-color-focus, #247984);
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(36, 121, 132, 0.2);
+    }
+
+    // Error
+    &.error {
+      border-color: var(--input-border-color-error, #D32F2F);
+      color: var(--input-border-color-error, #D32F2F);
+    }
+    &.error::placeholder {
+      color: var(--input-border-color-error, #D32F2F);
+    }
+
+    // Disabled
+    &:disabled {
+      border-color: #C6C6C6;
+      background-color: var(--color-light-grey);
+      color: #9D9F9F;
+      cursor: not-allowed;
+    }
+  }
+
+  .input-field:disabled ~ .input-icon,
+  .input-field:disabled + .input-label ~ .input-icon {
+    color: #C6C6C6;   // grey
+    opacity: 0.6;
+  }
+
+
+  // ========================
+  // Labels (default position = unpopulated)
+  // ========================
+  .input-label {
+    position: absolute;
+    top: 50%;
+    left: 16px;
+    transform: translateY(-50%);
+    font-size: 1rem;
+    font-weight: 510;
+    color: #333333;
+    pointer-events: none;
+    transition: all 0.2s ease;
+  }
+
+  // Error label
+  .input-field.error + .input-label {
+    color: var(--input-label-color-error, #D32F2F);
+  }
+
+  // Disabled label
+  .input-field:disabled + .input-label {
+    color: var(--input-label-color-disabled, #C6C6C6);
+  }
+
+  // Supporting/Helper text
+  .input-helper {
+    font-size: 0.75rem;
+    margin-top: 4px;
+    color: #989898;
+
+    &.error { color: #D32F2F; }
+  }
+
+  // Icons
+  .input-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1.25rem;
+    color: var(--text-muted);
+    pointer-events: none;
+
+    &.leading { left: 12px; }
+    &.trailing { right: 12px; }
+  }
+
+  .input-field.leading-icon { padding-left: 36px; }
+  .input-field.trailing-icon { padding-right: 36px; }
+
+  // Simulation helpers for docs
+  .input-field.with-label::placeholder { color: transparent; }
+}
+
+// -----------------------------------------------------------------------------
+// No Icon Variant  (snippet target)
+// -----------------------------------------------------------------------------
+/* === SNIPPET START: no-icon === */
+
+
+// --8<-- [start:no-icon]
+.input-wrapper.no-icon {
+  // Populated: float label above input
+  .input-field.has-value + .input-label {
+    top: 0;                           // sit on top border
+    transform: translateY(-50%);
+    font-size: 0.75rem;
+    font-weight: 500;                 // a touch lighter than input text
+    color: var(--text-color);         // same color as input text
+    background: #fff;                 // mask the border behind label
+    padding: 0 4px;                   // small mask padding
+    line-height: 1;
+  }
+
+  // Input text when populated
+  .input-field.has-value {
+    line-height: 1.5;                 // normal text line-height
+    padding-top: 16px;                // 16 + 16 = 32; with borders keeps 56px total
+    padding-bottom: 16px;
+    font-weight: 600;
+  }
+
+  // Focused + populated label color
+  .input-field.has-value.is-focused + .input-label {
+    color: var(--input-border-color-focus, #247984);
+  }
+
+  // Error label color (already sets input/helper via base)
+  .input-field.error + .input-label {
+    color: var(--input-label-color-error, #D32F2F);
+  }
+
+  // Disabled label color
+  .input-field:disabled + .input-label {
+    color: var(--input-label-color-disabled, #C6C6C6);
+  }
 }
-.input-main{
+// --8<-- [end:no-icon]
+
+/* === SNIPPET END: no-icon === */
+
+
+/* -------------------------------------------------------------------------- */
+/* Leading Icon Variant                                                       */
+/* -------------------------------------------------------------------------- */
+
+// --8<-- [start:leading-icon]
+.input-wrapper.leading-icon {
+  // Adjust input padding for icon + gap
+  .input-field {
+    padding-left: 52px;  // 12 (padding) + 24 (icon) + 16 (gap) = 52
+  }
+
+  // Icon placement
+  .input-icon.leading {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    width: 24px;
+    height: 24px;
+    transform: translateY(-50%);
     display: flex;
+    align-items: center;
     justify-content: center;
+    color: var(--text-muted);
+  }
+
+  // Label default (unpopulated) → stays with text start
+  .input-label {
+    left: 52px;   // inline with input text when unpopulated
+  }
+
+  // Populated: float label above border (like No Icon)
+  .input-field.has-value + .input-label {
+    top: 0;
+    transform: translateY(-50%);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-color);
+    background: #fff;
+    padding: 0 4px;
+    line-height: 1;
+
+    // ⬇️ shift back to match "No Icon" label position
+    left: 16px;   // instead of 52px
+  }
+
+  // Input text when populated
+  .input-field.has-value {
+    line-height: 1.5;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    font-weight: 600;
+  }
+
+  // Focused + populated label color
+  .input-field.has-value.is-focused + .input-label {
+    color: var(--input-border-color-focus, #247984);
+  }
+
+  // Error label
+  .input-field.error + .input-label {
+    color: var(--input-label-color-error, #D32F2F);
+  }
+
+  // Disabled label
+  .input-field:disabled + .input-label {
+    color: var(--input-label-color-disabled, #C6C6C6);
+  }
 }
-.input-vari{
-    display: grid;
+// --8<-- [end:leading-icon]
+
+
+/* -------------------------------------------------------------------------- */
+/* Trailing Icon Variant                                                       */
+/* -------------------------------------------------------------------------- */
+
+// --8<-- [start:trailing-icon]
+.input-wrapper.trailing-icon {
+  // Input padding adjusted for icon
+  .input-field {
+    padding-right: 52px; // 12 (padding) + 24 (icon) + 16 (gap)
+  }
+
+  // Icon placement
+  .input-icon.trailing {
+    position: absolute;
+    top: 50%;
+    right: 12px;               // 12px from right edge
+    width: 24px;
+    height: 24px;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
     justify-content: center;
-    align-content: center;
-    color: $color-dark-grey;
-    font-size: 45px;
-    font-weight: bold;
-    
+    color: #333333;
+  }
+
+  // Label default (centered when unpopulated)
+  .input-label {
+    left: 16px; // same as no-icon
+  }
+
+  // Label floats when populated
+  .input-field.has-value + .input-label {
+    top: 0;
+    transform: translateY(-50%);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-color);
+    background: #fff;
+    padding: 0 4px;
+    line-height: 1;
+  }
+
+  // Input text when populated
+  .input-field.has-value {
+    line-height: 1.5;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    font-weight: 600;
+  }
+
+  // Focused label
+  .input-field.has-value.is-focused + .input-label {
+    color: var(--input-border-color-focus, #247984);
+  }
+
+  // Error label
+  .input-field.error + .input-label {
+    color: var(--input-label-color-error, #D32F2F);
+  }
+
+  // Disabled label
+  .input-field:disabled + .input-label {
+    color: var(--input-label-color-disabled, #C6C6C6);
+  }
 }
-// --8<-- [start:input-fields]
-.input-box{
-    height: $input-field-box-height;
-    width: $input-field-box-width;
-    border-radius: $input-field-border-radius;
-    padding-left:10px;
-    &.default{
-        border: lightgrey 2px solid;
-        background-color: #FAFAFA;
-    }
-    &.hover,
-    :hover{
-        border: black 2px solid;
-        background-color: #FAFAFA;
-    }
-    &.focused,
-    :focus{
-        border: black 2px solid;
-        background-color: #E7F0F1;
-    }
-    &.alert
-    {
-        border: red 2px solid;
-        background-color: #FAFAFA;
-    }
-    &.success{
-        border: #73A03B 2px solid;
-        background-color: #FAFAFA;
-    }
-    &:placeholder{
-        color: $color-dark-grey;
+// --8<-- [end:trailing-icon]
+
+
+/* -------------------------------------------------------------------------- */
+/* No Icon + Supporting Text Variant                                          */
+/* -------------------------------------------------------------------------- */
+
+// --8<-- [start:no-icon-supporting]
+.input-wrapper.no-icon-supporting {
+  // Float label when populated (same as no-icon)
+  .input-field.has-value + .input-label {
+    top: 0;
+    transform: translateY(-50%);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-color);
+    background: #fff;
+    padding: 0 4px;
+    line-height: 1;
+  }
+
+  .input-field.has-value {
+    line-height: 1.5;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    font-weight: 600;
+  }
+
+  // Supporting text styles
+  .input-helper {
+    font-size: 0.75rem;
+    line-height: 1.4;
+    margin-top: 4px;           // 4px gap below box
+    margin-left: 16px;         // align with label/input text
+    margin-right: 16px;
+    color: #6F6F6F;
+  }
+
+  .input-helper.error {
+    color: var(--input-supporting-text-error, #D32F2F);
+  }
+
+  // Disabled state
+  .input-field:disabled + .input-label {
+    color: var(--input-label-color-disabled, #C6C6C6);
+  }
+  .input-field:disabled ~ .input-helper {
+    color: #C6C6C6;
+  }
+}
+// --8<-- [end:no-icon-supporting]
+
+/* -------------------------------------------------------------------------- */
+/* Leading Icon + Supporting Text Variant                                     */
+/* -------------------------------------------------------------------------- */
+
+// --8<-- [start:leading-icon-supporting]
+.input-wrapper.leading-icon-supporting {
+  // Adjust input padding for icon + gap
+  .input-field {
+    padding-left: 52px; // 12 (padding) + 24 (icon) + 16 (gap) = 52
+  }
+
+  // Leading icon placement
+  .input-icon.leading {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    width: 24px;
+    height: 24px;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #333333; // dark by default
+  }
+
+  // Label (unpopulated, aligned with text start)
+  .input-label {
+    left: 52px; // after the icon
+  }
+
+  // Populated: float label above, shift back to 16px like "no icon"
+  .input-field.has-value + .input-label {
+    top: 0;
+    transform: translateY(-50%);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-color);
+    background: #fff;
+    padding: 0 4px;
+    line-height: 1;
+    left: 16px; // matches no-icon float position
+  }
+
+  // Input text when populated
+  .input-field.has-value {
+    line-height: 1.5;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    font-weight: 600;
+  }
+
+  // Supporting text
+  .input-helper {
+    font-size: 0.75rem;
+    line-height: 1.4;
+    margin-top: 4px;   // 4px below field
+    margin-left: 16px; // inset matches label/input
+    margin-right: 16px;
+    color: #6F6F6F;
+  }
+
+  .input-helper.error {
+    color: var(--input-supporting-text-error, #D32F2F);
+  }
+
+  // Focused + populated label
+  .input-field.has-value.is-focused + .input-label {
+    color: var(--input-border-color-focus, #247984);
+  }
+
+  // Disabled state
+  .input-field:disabled + .input-label {
+    color: var(--input-label-color-disabled, #C6C6C6);
+  }
+  .input-field:disabled ~ .input-helper {
+    color: #C6C6C6;
+  }
+  .input-field:disabled ~ .input-icon.leading {
+    color: #C6C6C6;
+  }
+}
+// --8<-- [end:leading-icon-supporting]
+
+/* -------------------------------------------------------------------------- */
+/* Trailing Icon + Supporting Text Variant                                    */
+/* -------------------------------------------------------------------------- */
+
+// --8<-- [start:trailing-icon-supporting]
+.input-wrapper.trailing-icon-supporting {
+  // Input box
+  .input-field {
+    padding-right: 52px;  // 12 (padding) + 24 (icon) + 16 (gap)
+  }
+
+  // Trailing icon
+  .input-icon.trailing {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    width: 24px;
+    height: 24px;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #333333;
+  }
+
+  // Label (default: centered when unpopulated)
+  .input-label {
+    left: 16px; // same as No Icon
+  }
+
+  // Floating label when populated
+  .input-field.has-value + .input-label {
+    top: 0;
+    transform: translateY(-50%);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-color);
+    background: #fff;
+    padding: 0 4px;
+    line-height: 1;
+  }
+
+  // Input text when populated
+  .input-field.has-value {
+    line-height: 1.5;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    font-weight: 600;
+  }
+
+  // Focused label
+  .input-field.has-value.is-focused + .input-label {
+    color: var(--input-border-color-focus, #247984);
+  }
+
+  // Error label
+  .input-field.error + .input-label {
+    color: var(--input-label-color-error, #D32F2F);
+  }
+
+  // Disabled label + icon
+  .input-field:disabled + .input-label {
+    color: var(--input-label-color-disabled, #C6C6C6);
+  }
+  .input-field:disabled ~ .input-icon.trailing {
+    color: #9D9F9F; // disabled grey
+  }
+
+  // Supporting / helper text
+  .input-helper {
+    font-size: 0.75rem;
+    margin-top: 4px;   // 4px gap under input box
+    margin-left: 16px; // 16px inset left
+    margin-right: 16px;
+    color: #989898;
+
+    &.error { color: #D32F2F; }
+    &.disabled { color: #C6C6C6; }
+  }
+}
+// --8<-- [end:trailing-icon-supporting]
+
+
+/* -------------------------------------------------------------------------- */
+/* Leading + Trailing Icons Variant                                           */
+/* -------------------------------------------------------------------------- */
+
+// --8<-- [start:leading-trailing-icon]
+.input-wrapper.leading-trailing-icon {
+  // Adjust input padding for both icons
+  .input-field {
+    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
+    padding-right: 52px; // 12 + 24 + 16 = 52px after text
+  }
+
+  // Leading icon placement
+  .input-icon.leading {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    width: 24px;
+    height: 24px;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #333333;
+  }
+
+  // Trailing icon placement
+  .input-icon.trailing {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    width: 24px;
+    height: 24px;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #333333;
+  }
+
+  // Label (default)
+  .input-label {
+    left: 52px; // starts after leading icon
+  }
+
+  // Populated: float label above input
+  .input-field.has-value + .input-label {
+    top: 0;
+    transform: translateY(-50%);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-color);
+    background: #fff;
+    padding: 0 4px;
+    line-height: 1;
+    left: 16px; // ⬅️ align same as No Icon when floating
+  }
+
+  // Input text when populated
+  .input-field.has-value {
+    line-height: 1.5;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    font-weight: 600;
+  }
+
+  // Focused + populated label
+  .input-field.has-value.is-focused + .input-label {
+    color: var(--input-border-color-focus, #247984);
+  }
+
+  // Error label + icons
+  .input-field.error + .input-label {
+    color: var(--input-label-color-error, #D32F2F);
+  }
+  .input-field.error ~ .input-icon.leading,
+  .input-field.error ~ .input-icon.trailing {
+    color: #D32F2F;
+  }
+
+  // Disabled label + icons
+  .input-field:disabled + .input-label {
+    color: var(--input-label-color-disabled, #C6C6C6);
+  }
+  .input-field:disabled ~ .input-icon.leading,
+  .input-field:disabled ~ .input-icon.trailing {
+    color: #C6C6C6;
+    opacity: 0.6;
+  }
+}
+// --8<-- [end:leading-trailing-icon]
+
+/* -------------------------------------------------------------------------- */
+/* Leading + Trailing Icons + Supporting Text Variant                          */
+/* -------------------------------------------------------------------------- */
+
+// --8<-- [start:leading-trailing-icon-supporting]
+.input-wrapper.leading-trailing-icon-supporting {
+  // Adjust input padding for both icons
+  .input-field {
+    padding-left: 52px;  // 12 + 24 + 16 = 52px before text
+    padding-right: 52px; // 12 + 24 + 16 = 52px after text
+  }
+
+  // Leading icon placement
+  .input-icon.leading {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    width: 24px;
+    height: 24px;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #333333;
+  }
+
+  // Trailing icon placement
+  .input-icon.trailing {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    width: 24px;
+    height: 24px;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #333333;
+  }
+
+  // Label (default, when unpopulated)
+  .input-label {
+    left: 52px; // starts after leading icon
+  }
+
+  // Populated: float label above input
+  .input-field.has-value + .input-label {
+    top: 0;
+    transform: translateY(-50%);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-color);
+    background: #fff;
+    padding: 0 4px;
+    line-height: 1;
+    left: 16px; // ⬅️ align same as No Icon when floating
+  }
+
+  // Input text when populated
+  .input-field.has-value {
+    line-height: 1.5;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    font-weight: 600;
+  }
+
+  // Supporting text
+  .input-helper {
+    margin-top: 4px;
+    font-size: 0.75rem;
+    color: #989898;
+
+    &.error {
+      color: #D32F2F;
     }
+  }
+
+  // Focused + populated label
+  .input-field.has-value.is-focused + .input-label {
+    color: var(--input-border-color-focus, #247984);
+  }
+
+  // Error label + icons
+  .input-field.error + .input-label {
+    color: var(--input-label-color-error, #D32F2F);
+  }
+  .input-field.error ~ .input-icon.leading,
+  .input-field.error ~ .input-icon.trailing {
+    color: #D32F2F;
+  }
+
+  // Disabled label + icons
+  .input-field:disabled + .input-label {
+    color: var(--input-label-color-disabled, #C6C6C6);
+  }
+  .input-field:disabled ~ .input-icon.leading,
+  .input-field:disabled ~ .input-icon.trailing {
+    color: #C6C6C6;
+    opacity: 0.6;
+  }
+}
+// --8<-- [end:leading-trailing-icon-supporting]
+
+
+
+// -----------------------------------------------------------------------------
+// State container (for docs only)
+// -----------------------------------------------------------------------------
+.state-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  margin: 8px 0 16px;
+
+  background: var(--md-code-bg-color, #f6f8fa);
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* Bold headings in docs */
+.md-typeset h1,
+.md-typeset h2 {
+  font-weight: 700 !important;
+}
+
+/* Thicker tab underline */
+.md-typeset .tabbed-labels > label[for].md-tabs__item--active::after,
+.md-typeset .tabbed-labels > label[for].md-tabs__link--active::after {
+  height: 4px !important;
+  background-color: var(--md-accent-fg-color, #247984) !important;
 }
-// --8<-- [end:input-fields]
diff --git a/docs/dist/main.css b/docs/dist/main.css
index 17a187e..9a4b27b 100644
--- a/docs/dist/main.css
+++ b/docs/dist/main.css
@@ -45,6 +45,22 @@
   --input-field-box-width: 348px;
   --input-field-box-height: 48px;
   --input-field-border-radius: 4px;
+  --input-border-color-default: #989898;
+  --input-border-color-hover: #6F6F6F;
+  --input-border-color-focus: #247984;
+  --input-border-color-error: #B00020;
+  --input-border-color-disabled: #DDD;
+  --input-label-color-default: #989898;
+  --input-label-color-error: #B00020;
+  --input-label-color-disabled: #C6C6C6;
+  --input-supporting-text-color: #989898;
+  --input-supporting-text-error: #B00020;
+  --input-padding-x: 12px;
+  --input-padding-y: 8px;
+  --input-icon-gap: 8px;
+  --input-font-size: 16px;
+  --input-label-font-size: 14px;
+  --input-supporting-font-size: 12px;
   --text-area-height: 122px;
   --text-area-width: 348px;
   --text-area-border-radius: 4px;
@@ -396,57 +412,560 @@ input[type=radio]:checked :hover {
   opacity: 0.3;
 }
 
-.input-field-container {
-  display: grid;
-  padding: 5%;
-  text-align: left;
+.input-wrapper {
+  position: relative;
+  width: var(--input-field-box-width);
+  height: 56px;
+  font-family: var(--text-font-stack);
+}
+.input-wrapper .input-field {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--input-field-border-radius, 4px);
+  border: 1px solid var(--input-border-color-default, #C6C6C6);
+  padding: 0 16px;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 56px;
+  color: var(--text-color);
+  background: #fff;
+}
+.input-wrapper .input-field::placeholder {
+  color: var(--input-placeholder-color, #989898);
+}
+.input-wrapper .input-field:hover, .input-wrapper .input-field.is-hover {
+  border-color: var(--input-border-color-hover, #6F6F6F);
+}
+.input-wrapper .input-field:focus, .input-wrapper .input-field.is-focused {
+  border: 2px solid var(--input-border-color-focus, #247984);
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(36, 121, 132, 0.2);
+}
+.input-wrapper .input-field.error {
+  border-color: var(--input-border-color-error, #D32F2F);
+  color: var(--input-border-color-error, #D32F2F);
+}
+.input-wrapper .input-field.error::placeholder {
+  color: var(--input-border-color-error, #D32F2F);
+}
+.input-wrapper .input-field:disabled {
+  border-color: #C6C6C6;
+  background-color: var(--color-light-grey);
+  color: #9D9F9F;
+  cursor: not-allowed;
+}
+.input-wrapper .input-field:disabled ~ .input-icon,
+.input-wrapper .input-field:disabled + .input-label ~ .input-icon {
+  color: #C6C6C6;
+  opacity: 0.6;
+}
+.input-wrapper .input-label {
+  position: absolute;
+  top: 50%;
+  left: 16px;
+  transform: translateY(-50%);
+  font-size: 1rem;
+  font-weight: 510;
+  color: #333333;
+  pointer-events: none;
+  transition: all 0.2s ease;
+}
+.input-wrapper .input-field.error + .input-label {
+  color: var(--input-label-color-error, #D32F2F);
+}
+.input-wrapper .input-field:disabled + .input-label {
+  color: var(--input-label-color-disabled, #C6C6C6);
+}
+.input-wrapper .input-helper {
+  font-size: 0.75rem;
+  margin-top: 4px;
+  color: #989898;
+}
+.input-wrapper .input-helper.error {
+  color: #D32F2F;
+}
+.input-wrapper .input-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1.25rem;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+.input-wrapper .input-icon.leading {
+  left: 12px;
+}
+.input-wrapper .input-icon.trailing {
+  right: 12px;
+}
+.input-wrapper .input-field.leading-icon {
+  padding-left: 36px;
+}
+.input-wrapper .input-field.trailing-icon {
+  padding-right: 36px;
+}
+.input-wrapper .input-field.with-label::placeholder {
+  color: transparent;
 }
 
-.input-main {
+/* === SNIPPET START: no-icon === */
+.input-wrapper.no-icon .input-field.has-value + .input-label {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-color);
+  background: #fff;
+  padding: 0 4px;
+  line-height: 1;
+}
+.input-wrapper.no-icon .input-field.has-value {
+  line-height: 1.5;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-weight: 600;
+}
+.input-wrapper.no-icon .input-field.has-value.is-focused + .input-label {
+  color: var(--input-border-color-focus, #247984);
+}
+.input-wrapper.no-icon .input-field.error + .input-label {
+  color: var(--input-label-color-error, #D32F2F);
+}
+.input-wrapper.no-icon .input-field:disabled + .input-label {
+  color: var(--input-label-color-disabled, #C6C6C6);
+}
+
+/* === SNIPPET END: no-icon === */
+/* -------------------------------------------------------------------------- */
+/* Leading Icon Variant                                                       */
+/* -------------------------------------------------------------------------- */
+.input-wrapper.leading-icon .input-field {
+  padding-left: 52px;
+}
+.input-wrapper.leading-icon .input-icon.leading {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 24px;
+  height: 24px;
+  transform: translateY(-50%);
   display: flex;
+  align-items: center;
   justify-content: center;
+  color: var(--text-muted);
+}
+.input-wrapper.leading-icon .input-label {
+  left: 52px;
+}
+.input-wrapper.leading-icon .input-field.has-value + .input-label {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-color);
+  background: #fff;
+  padding: 0 4px;
+  line-height: 1;
+  left: 16px;
+}
+.input-wrapper.leading-icon .input-field.has-value {
+  line-height: 1.5;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-weight: 600;
+}
+.input-wrapper.leading-icon .input-field.has-value.is-focused + .input-label {
+  color: var(--input-border-color-focus, #247984);
+}
+.input-wrapper.leading-icon .input-field.error + .input-label {
+  color: var(--input-label-color-error, #D32F2F);
+}
+.input-wrapper.leading-icon .input-field:disabled + .input-label {
+  color: var(--input-label-color-disabled, #C6C6C6);
 }
 
-.input-vari {
-  display: grid;
+/* -------------------------------------------------------------------------- */
+/* Trailing Icon Variant                                                       */
+/* -------------------------------------------------------------------------- */
+.input-wrapper.trailing-icon .input-field {
+  padding-right: 52px;
+}
+.input-wrapper.trailing-icon .input-icon.trailing {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  width: 24px;
+  height: 24px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
   justify-content: center;
-  align-content: center;
+  color: #333333;
+}
+.input-wrapper.trailing-icon .input-label {
+  left: 16px;
+}
+.input-wrapper.trailing-icon .input-field.has-value + .input-label {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-color);
+  background: #fff;
+  padding: 0 4px;
+  line-height: 1;
+}
+.input-wrapper.trailing-icon .input-field.has-value {
+  line-height: 1.5;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-weight: 600;
+}
+.input-wrapper.trailing-icon .input-field.has-value.is-focused + .input-label {
+  color: var(--input-border-color-focus, #247984);
+}
+.input-wrapper.trailing-icon .input-field.error + .input-label {
+  color: var(--input-label-color-error, #D32F2F);
+}
+.input-wrapper.trailing-icon .input-field:disabled + .input-label {
+  color: var(--input-label-color-disabled, #C6C6C6);
+}
+
+/* -------------------------------------------------------------------------- */
+/* No Icon + Supporting Text Variant                                          */
+/* -------------------------------------------------------------------------- */
+.input-wrapper.no-icon-supporting .input-field.has-value + .input-label {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-color);
+  background: #fff;
+  padding: 0 4px;
+  line-height: 1;
+}
+.input-wrapper.no-icon-supporting .input-field.has-value {
+  line-height: 1.5;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-weight: 600;
+}
+.input-wrapper.no-icon-supporting .input-helper {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  margin-top: 4px;
+  margin-left: 16px;
+  margin-right: 16px;
+  color: #6F6F6F;
+}
+.input-wrapper.no-icon-supporting .input-helper.error {
+  color: var(--input-supporting-text-error, #D32F2F);
+}
+.input-wrapper.no-icon-supporting .input-field:disabled + .input-label {
+  color: var(--input-label-color-disabled, #C6C6C6);
+}
+.input-wrapper.no-icon-supporting .input-field:disabled ~ .input-helper {
+  color: #C6C6C6;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Leading Icon + Supporting Text Variant                                     */
+/* -------------------------------------------------------------------------- */
+.input-wrapper.leading-icon-supporting .input-field {
+  padding-left: 52px;
+}
+.input-wrapper.leading-icon-supporting .input-icon.leading {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 24px;
+  height: 24px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333333;
+}
+.input-wrapper.leading-icon-supporting .input-label {
+  left: 52px;
+}
+.input-wrapper.leading-icon-supporting .input-field.has-value + .input-label {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-color);
+  background: #fff;
+  padding: 0 4px;
+  line-height: 1;
+  left: 16px;
+}
+.input-wrapper.leading-icon-supporting .input-field.has-value {
+  line-height: 1.5;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-weight: 600;
+}
+.input-wrapper.leading-icon-supporting .input-helper {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  margin-top: 4px;
+  margin-left: 16px;
+  margin-right: 16px;
+  color: #6F6F6F;
+}
+.input-wrapper.leading-icon-supporting .input-helper.error {
+  color: var(--input-supporting-text-error, #D32F2F);
+}
+.input-wrapper.leading-icon-supporting .input-field.has-value.is-focused + .input-label {
+  color: var(--input-border-color-focus, #247984);
+}
+.input-wrapper.leading-icon-supporting .input-field:disabled + .input-label {
+  color: var(--input-label-color-disabled, #C6C6C6);
+}
+.input-wrapper.leading-icon-supporting .input-field:disabled ~ .input-helper {
+  color: #C6C6C6;
+}
+.input-wrapper.leading-icon-supporting .input-field:disabled ~ .input-icon.leading {
+  color: #C6C6C6;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Trailing Icon + Supporting Text Variant                                    */
+/* -------------------------------------------------------------------------- */
+.input-wrapper.trailing-icon-supporting .input-field {
+  padding-right: 52px;
+}
+.input-wrapper.trailing-icon-supporting .input-icon.trailing {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  width: 24px;
+  height: 24px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333333;
+}
+.input-wrapper.trailing-icon-supporting .input-label {
+  left: 16px;
+}
+.input-wrapper.trailing-icon-supporting .input-field.has-value + .input-label {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-color);
+  background: #fff;
+  padding: 0 4px;
+  line-height: 1;
+}
+.input-wrapper.trailing-icon-supporting .input-field.has-value {
+  line-height: 1.5;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-weight: 600;
+}
+.input-wrapper.trailing-icon-supporting .input-field.has-value.is-focused + .input-label {
+  color: var(--input-border-color-focus, #247984);
+}
+.input-wrapper.trailing-icon-supporting .input-field.error + .input-label {
+  color: var(--input-label-color-error, #D32F2F);
+}
+.input-wrapper.trailing-icon-supporting .input-field:disabled + .input-label {
+  color: var(--input-label-color-disabled, #C6C6C6);
+}
+.input-wrapper.trailing-icon-supporting .input-field:disabled ~ .input-icon.trailing {
+  color: #9D9F9F;
+}
+.input-wrapper.trailing-icon-supporting .input-helper {
+  font-size: 0.75rem;
+  margin-top: 4px;
+  margin-left: 16px;
+  margin-right: 16px;
   color: #989898;
-  font-size: 45px;
-  font-weight: bold;
+}
+.input-wrapper.trailing-icon-supporting .input-helper.error {
+  color: #D32F2F;
+}
+.input-wrapper.trailing-icon-supporting .input-helper.disabled {
+  color: #C6C6C6;
 }
 
-.input-box {
-  height: 48px;
-  width: 348px;
-  border-radius: 4px;
-  padding-left: 10px;
+/* -------------------------------------------------------------------------- */
+/* Leading + Trailing Icons Variant                                           */
+/* -------------------------------------------------------------------------- */
+.input-wrapper.leading-trailing-icon .input-field {
+  padding-left: 52px;
+  padding-right: 52px;
 }
-.input-box.default {
-  border: lightgrey 2px solid;
-  background-color: #FAFAFA;
+.input-wrapper.leading-trailing-icon .input-icon.leading {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 24px;
+  height: 24px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333333;
 }
-.input-box.hover,
-.input-box :hover {
-  border: black 2px solid;
-  background-color: #FAFAFA;
+.input-wrapper.leading-trailing-icon .input-icon.trailing {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  width: 24px;
+  height: 24px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333333;
 }
-.input-box.focused,
-.input-box :focus {
-  border: black 2px solid;
-  background-color: #E7F0F1;
+.input-wrapper.leading-trailing-icon .input-label {
+  left: 52px;
 }
-.input-box.alert {
-  border: red 2px solid;
-  background-color: #FAFAFA;
+.input-wrapper.leading-trailing-icon .input-field.has-value + .input-label {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-color);
+  background: #fff;
+  padding: 0 4px;
+  line-height: 1;
+  left: 16px;
+}
+.input-wrapper.leading-trailing-icon .input-field.has-value {
+  line-height: 1.5;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-weight: 600;
 }
-.input-box.success {
-  border: #73A03B 2px solid;
-  background-color: #FAFAFA;
+.input-wrapper.leading-trailing-icon .input-field.has-value.is-focused + .input-label {
+  color: var(--input-border-color-focus, #247984);
+}
+.input-wrapper.leading-trailing-icon .input-field.error + .input-label {
+  color: var(--input-label-color-error, #D32F2F);
+}
+.input-wrapper.leading-trailing-icon .input-field.error ~ .input-icon.leading,
+.input-wrapper.leading-trailing-icon .input-field.error ~ .input-icon.trailing {
+  color: #D32F2F;
+}
+.input-wrapper.leading-trailing-icon .input-field:disabled + .input-label {
+  color: var(--input-label-color-disabled, #C6C6C6);
+}
+.input-wrapper.leading-trailing-icon .input-field:disabled ~ .input-icon.leading,
+.input-wrapper.leading-trailing-icon .input-field:disabled ~ .input-icon.trailing {
+  color: #C6C6C6;
+  opacity: 0.6;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Leading + Trailing Icons + Supporting Text Variant                          */
+/* -------------------------------------------------------------------------- */
+.input-wrapper.leading-trailing-icon-supporting .input-field {
+  padding-left: 52px;
+  padding-right: 52px;
 }
-.input-box:placeholder {
+.input-wrapper.leading-trailing-icon-supporting .input-icon.leading {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 24px;
+  height: 24px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333333;
+}
+.input-wrapper.leading-trailing-icon-supporting .input-icon.trailing {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  width: 24px;
+  height: 24px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333333;
+}
+.input-wrapper.leading-trailing-icon-supporting .input-label {
+  left: 52px;
+}
+.input-wrapper.leading-trailing-icon-supporting .input-field.has-value + .input-label {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-color);
+  background: #fff;
+  padding: 0 4px;
+  line-height: 1;
+  left: 16px;
+}
+.input-wrapper.leading-trailing-icon-supporting .input-field.has-value {
+  line-height: 1.5;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-weight: 600;
+}
+.input-wrapper.leading-trailing-icon-supporting .input-helper {
+  margin-top: 4px;
+  font-size: 0.75rem;
   color: #989898;
 }
+.input-wrapper.leading-trailing-icon-supporting .input-helper.error {
+  color: #D32F2F;
+}
+.input-wrapper.leading-trailing-icon-supporting .input-field.has-value.is-focused + .input-label {
+  color: var(--input-border-color-focus, #247984);
+}
+.input-wrapper.leading-trailing-icon-supporting .input-field.error + .input-label {
+  color: var(--input-label-color-error, #D32F2F);
+}
+.input-wrapper.leading-trailing-icon-supporting .input-field.error ~ .input-icon.leading,
+.input-wrapper.leading-trailing-icon-supporting .input-field.error ~ .input-icon.trailing {
+  color: #D32F2F;
+}
+.input-wrapper.leading-trailing-icon-supporting .input-field:disabled + .input-label {
+  color: var(--input-label-color-disabled, #C6C6C6);
+}
+.input-wrapper.leading-trailing-icon-supporting .input-field:disabled ~ .input-icon.leading,
+.input-wrapper.leading-trailing-icon-supporting .input-field:disabled ~ .input-icon.trailing {
+  color: #C6C6C6;
+  opacity: 0.6;
+}
+
+.state-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  margin: 8px 0 16px;
+  background: var(--md-code-bg-color, #f6f8fa);
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* Bold headings in docs */
+.md-typeset h1,
+.md-typeset h2 {
+  font-weight: 700 !important;
+}
+
+/* Thicker tab underline */
+.md-typeset .tabbed-labels > label[for].md-tabs__item--active::after,
+.md-typeset .tabbed-labels > label[for].md-tabs__link--active::after {
+  height: 4px !important;
+  background-color: var(--md-accent-fg-color, #247984) !important;
+}
 
 .textarea-field-container {
   display: grid;
diff --git a/docs/dist/main.css.map b/docs/dist/main.css.map
index 33992b0..8ac2067 100644
--- a/docs/dist/main.css.map
+++ b/docs/dist/main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../components/sass/abstracts/_variables.scss","../components/sass/base/_typography.scss","../components/sass/base/_reset.scss","../components/sass/layout/_tabs.scss","../components/sass/components/_buttons.scss","../components/sass/components/_radio.scss","../components/sass/components/_input-fields.scss","../components/sass/components/_text-area.scss","../components/sass/components/_toggle.scss","../components/sass/components/_type-scale.scss","../components/sass/components/_dropdowns.scss","../components/sass/components/_accordion.scss","../components/sass/layout/_grid.scss"],"names":[],"mappings":"AA8EA;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;;;ACjJF;EACI;EACA;;;ACLJ;EACI;EACA;EACA;;;ACHJ;EACI;;;AAGJ;EACI;;;AAEJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;ACnCJ;EACE;EACA;EACA;EACA,aJcgB;EIbhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;;AAMF;EACE;EACA;;AAMF;EACE;EACA;;AAIJ;EAEE;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;AAAA;EAEE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAMF;EACE;;AAIJ;EAEE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;;AAMF;EACE;;AAMF;EACE;;AAIJ;EAEE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;;AAMF;EACE;;AAMF;EACE;;AAIJ;EAEE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;;;AAKF;EACE,kBJpOqB;EIqOrB,OJhQY;EIiQZ;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBJ9QU;EI+QV;EACA;;AAGF;EAEE,YJnPY;;AIqPZ;EACE,SJrPiB;;AI2PnB;EACE,SJ3PiB;;AIiQnB;EACE,SJjQkB;;AIqQtB;EAEE,kBJ5SU;EI6SV,OJ7Q6B;EI8Q7B;;AAEA;EACE,kBJhRoB;EIiRpB;;;AAKN;AAAA;EAEE,OJzTY;;;AKFd;EACI;EACA;EACA,OL0CiB;EKzCjB,QL0CkB;EKzClB;EACA;EACA;;AAEA;EACI;EACA;EACA,kBL+BS;;AK7Bb;AAAA;EAEI;;;AAQR;EACI;EACA;EACA,cLfU;EKgBV,kBLhBU;EKiBV;;AAGA;AAAA;EAEI;EACA,kBLQS;EKPT;;AAEJ;AAAA;EAEI;;;AAQR;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACA;;;AAKR;EACI;;;AAGJ;EACI;;;ACrEJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA,ONTc;EMUd;EACA;;;AAIJ;EACI,QN0CqB;EMzCrB,ONwCoB;EMvCpB,eNyCwB;EMxCxB;;AACA;EACI;EACA;;AAEJ;AAAA;EAEI;EACA;;AAEJ;AAAA;EAEI;EACA;;AAEJ;EAEI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI,ON5CU;;;AONlB;EACI;EACA;;;AAGJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI,QP+Ce;EO9Cf,OP+Cc;EO9Cd,SPgDgB;EO/ChB,eP8CsB;;AO7CtB;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;;AChCR;EACE;EACA;EACA;EACA;EACA;EACA,ORLY;EQOZ,kBRMiB;EQLjB;EACA;EAEA,oBR+C0B;EQ9C1B,YR8C0B;;AQ5C1B;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBRhBc;EQiBd,oBR8BwB;EQ7BxB,YR6BwB;EQ5BxB;EACA;EACA;EACA;;;AASF;AAAA;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;EACE;;;AAMF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE,kBRpDY;EQqDZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBRtEY;;;AQyEd;EACE,kBRhEY;EQiEZ;;;AAGF;EACE;EACA,kBRzEmB;EQ0EnB;EACA,OR7Ee;;;AQgFjB;EACE;EACA,cRlFe;EQmFf,kBRlFqB;;;AQqFvB;EACE,kBRrFmB;EQsFnB,cRtFmB;;;AQyFrB;EACE,kBR3FqB;EQ4FrB,OR3FmB;;;AQgGrB;EACE,OR7FgB;;;AQgGlB;EACE,ORtGqB;;;AQyGvB;EACE,ORzGmB;;;AQ4GrB;EACE;;;AAGA;EACE;;AAGF;EACE;;;AC7HF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OTEU;;ASEZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTTU;;ASaZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OTrBU;;ASyBZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OTjCU;;ASqCZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OT5CU;;ASgDZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTvDU;;AS2DZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTlEU;;ASsEZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OT7EU;;ASiFZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTxFU;;AS4FZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTnGU;;ASuGZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT/GU;;ASmHZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT3HU;;AS+HZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTtIU;;AS0IZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OTlJU;;ASsJZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT9JU;;;ASqKZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT7KU;;ASiLZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTxLU;;AS4LZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OTpMU;;ASwMZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OThNU;;ASoNZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OT3NU;;AS+NZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTtOU;;AS0OZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTjPU;;ASqPZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OT5PU;;ASgQZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTvQU;;AS2QZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTlRU;;ASsRZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT9RU;;ASkSZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT1SU;;AS8SZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTrTU;;ASyTZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OTjUU;;ASqUZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT7UU;;;ASmVd;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC3WF;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;;AAKR;EACI;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA,cV9Bc;;;AUgClB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OVxCc;EUyCd;EACA;EACA;EACA;EACA,cV7Cc;EU8Cd;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA,OV5Ec;EU6Ed;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA,kBVlGc;;;AUoGlB;EACI;EACA;EACA,kBVvGc;;;AUyGlB;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAMJ;EACI;EACA,kBVrFmB;;;AUwFvB;EACI,kBVzFmB;;;AU6FvB;EACI,kBV9FmB;;;AUmGvB;EACI,OV/Ic;EUgJd,kBVpGoB;;;AUuGxB;EACI,kBVxGoB;;;AWlDxB;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA,OXDY;EWEZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AX2IE;EWzJJ;IAiBI;IACA;IACA;IACA;;;;AAIJ;EACE;EACA;EACA;;AX8HE;EWjIJ;IAMI;IACA;;;;AAIJ;EACE;EACA;;;AAIA;EACE;;AAGF;EACE;;AX2GA;EW5GF;IAII;;;AAGJ;EACE,OXjDa;EWkDb;EACA;;AAEF;EACE;;AAEF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AC1FJ;EACI;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA","file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../components/sass/abstracts/_variables.scss","../components/sass/base/_typography.scss","../components/sass/base/_reset.scss","../components/sass/layout/_tabs.scss","../components/sass/components/_buttons.scss","../components/sass/components/_radio.scss","../components/sass/components/_input-fields.scss","../components/sass/components/_text-area.scss","../components/sass/components/_toggle.scss","../components/sass/components/_type-scale.scss","../components/sass/components/_dropdowns.scss","../components/sass/components/_accordion.scss","../components/sass/layout/_grid.scss"],"names":[],"mappings":"AAoGA;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACF;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAIE;EACA;EACA;EACA;EAGA;;;AC5LF;EACI;EACA;;;ACLJ;EACI;EACA;EACA;;;ACHJ;EACI;;;AAGJ;EACI;;;AAEJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;ACnCJ;EACE;EACA;EACA;EACA,aJcgB;EIbhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;;AAMF;EACE;EACA;;AAMF;EACE;EACA;;AAIJ;EAEE;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;AAAA;EAEE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAMF;EACE;;AAIJ;EAEE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;;AAMF;EACE;;AAMF;EACE;;AAIJ;EAEE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;;;AAKF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;;AAMF;EACE;;AAMF;EACE;;AAIJ;EAEE;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;;;AAKF;EACE,kBJpOqB;EIqOrB,OJhQY;EIiQZ;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBJ9QU;EI+QV;EACA;;AAGF;EAEE,YJnPY;;AIqPZ;EACE,SJrPiB;;AI2PnB;EACE,SJ3PiB;;AIiQnB;EACE,SJjQkB;;AIqQtB;EAEE,kBJ5SU;EI6SV,OJ7Q6B;EI8Q7B;;AAEA;EACE,kBJhRoB;EIiRpB;;;AAKN;AAAA;EAEE,OJzTY;;;AKFd;EACI;EACA;EACA,OL0CiB;EKzCjB,QL0CkB;EKzClB;EACA;EACA;;AAEA;EACI;EACA;EACA,kBL+BS;;AK7Bb;AAAA;EAEI;;;AAQR;EACI;EACA;EACA,cLfU;EKgBV,kBLhBU;EKiBV;;AAGA;AAAA;EAEI;EACA,kBLQS;EKPT;;AAEJ;AAAA;EAEI;;;AAQR;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACA;;;AAKR;EACI;;;AAGJ;EACI;;;ACpEJ;EACE;EACA;EACA;EACA;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAiB;;AAGjB;EACa;;AAGb;EAEE;EACA;EACA;;AAIF;EACE;EACA;;AAEF;EACE;;AAIF;EACE;EACA;EACA;EACA;;AAIJ;AAAA;EAEE;EACA;;AAOF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE;EACA;EACA;;AAEA;EAAU;;AAIZ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAY;;AACZ;EAAa;;AAGf;EAA4B;;AAC5B;EAA6B;;AAG7B;EAAuC;;;AAMzC;AAME;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE;;;AAKJ;AAGA;AACA;AACA;AAKE;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE;;;AAMJ;AACA;AACA;AAKE;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE;;;AAMJ;AACA;AACA;AAKE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAIF;EACE;;AAEF;EACE;;;AAKJ;AACA;AACA;AAKE;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAIF;EACE;;AAIF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAKJ;AACA;AACA;AAKE;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;;AAIF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAAU;;AACV;EAAa;;;AAMjB;AACA;AACA;AAKE;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;;AAEF;AAAA;EAEE;;AAIF;EACE;;AAEF;AAAA;EAEE;EACA;;;AAKJ;AACA;AACA;AAKE;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAIF;EACE;;AAEF;AAAA;EAEE;;AAIF;EACE;;AAEF;AAAA;EAEE;EACA;;;AAUJ;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAGF;AACA;AAAA;EAEE;;;AAGF;AACA;AAAA;EAEE;EACA;;;ACtuBF;EACI;EACA;;;AAGJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI,QPqEe;EOpEf,OPqEc;EOpEd,SPsEgB;EOrEhB,ePoEsB;;AOnEtB;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;;AChCR;EACE;EACA;EACA;EACA;EACA;EACA,ORLY;EQOZ,kBRMiB;EQLjB;EACA;EAEA,oBR+C0B;EQ9C1B,YR8C0B;;AQ5C1B;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBRhBc;EQiBd,oBR8BwB;EQ7BxB,YR6BwB;EQ5BxB;EACA;EACA;EACA;;;AASF;AAAA;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;EACE;;;AAMF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE,kBRpDY;EQqDZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBRtEY;;;AQyEd;EACE,kBRhEY;EQiEZ;;;AAGF;EACE;EACA,kBRzEmB;EQ0EnB;EACA,OR7Ee;;;AQgFjB;EACE;EACA,cRlFe;EQmFf,kBRlFqB;;;AQqFvB;EACE,kBRrFmB;EQsFnB,cRtFmB;;;AQyFrB;EACE,kBR3FqB;EQ4FrB,OR3FmB;;;AQgGrB;EACE,OR7FgB;;;AQgGlB;EACE,ORtGqB;;;AQyGvB;EACE,ORzGmB;;;AQ4GrB;EACE;;;AAGA;EACE;;AAGF;EACE;;;AC7HF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OTEU;;ASEZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTTU;;ASaZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OTrBU;;ASyBZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OTjCU;;ASqCZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OT5CU;;ASgDZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTvDU;;AS2DZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTlEU;;ASsEZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OT7EU;;ASiFZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTxFU;;AS4FZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTnGU;;ASuGZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT/GU;;ASmHZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT3HU;;AS+HZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTtIU;;AS0IZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OTlJU;;ASsJZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT9JU;;;ASqKZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT7KU;;ASiLZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTxLU;;AS4LZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OTpMU;;ASwMZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OThNU;;ASoNZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OT3NU;;AS+NZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTtOU;;AS0OZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTjPU;;ASqPZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OT5PU;;ASgQZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTvQU;;AS2QZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTlRU;;ASsRZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT9RU;;ASkSZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT1SU;;AS8SZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OTrTU;;ASyTZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OTjUU;;ASqUZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OT7UU;;;ASmVd;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC3WF;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;;AAKR;EACI;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA,cV9Bc;;;AUgClB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OVxCc;EUyCd;EACA;EACA;EACA;EACA,cV7Cc;EU8Cd;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA,OV5Ec;EU6Ed;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA,kBVlGc;;;AUoGlB;EACI;EACA;EACA,kBVvGc;;;AUyGlB;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAMJ;EACI;EACA,kBVrFmB;;;AUwFvB;EACI,kBVzFmB;;;AU6FvB;EACI,kBV9FmB;;;AUmGvB;EACI,OV/Ic;EUgJd,kBVpGoB;;;AUuGxB;EACI,kBVxGoB;;;AWlDxB;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA,OXDY;EWEZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AXsLE;EWpMJ;IAiBI;IACA;IACA;IACA;;;;AAIJ;EACE;EACA;EACA;;AXyKE;EW5KJ;IAMI;IACA;;;;AAIJ;EACE;EACA;;;AAIA;EACE;;AAGF;EACE;;AXsJA;EWvJF;IAII;;;AAGJ;EACE,OXjDa;EWkDb;EACA;;AAEF;EACE;;AAEF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AC1FJ;EACI;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA","file":"main.css"}
\ No newline at end of file
diff --git a/docs/input-fields.md b/docs/input-fields.md
index eeee755..f3a1167 100644
--- a/docs/input-fields.md
+++ b/docs/input-fields.md
@@ -2,196 +2,2911 @@
 hide:
   - toc
 ---
-# **STATES**
-=== "Default"
-    <div class="input-main">
-        <div class="grid-1-5">
-            <div>DEFAULT</div>
-            <div>
-                <div class = "input-field-container">
-                    <label for ="label">Label</label>
-                    <input class ="input-box default" type="text" placeholder="Placeholder"
-                    aria-label="example default input field"></input>
-                    <p>Hint text</p>
-                </div>
-            </div>
-            <div>HOVER</div>
-            <div>
-                <div class = "input-field-container">
-                    <label for ="label">Label</label>
-                    <input class ="input-box hover" type="text" placeholder="Placeholder"
-                    aria-label="example hovered input field"></input>
-                    <p>Hint text</p>
-                </div>
-            </div>
-            <div>FOCUSED</div>
-            <div>
-                <div class = "input-field-container">
-                    <label for ="label">Label</label>
-                    <input class ="input-box focused" type="text" placeholder="Placeholder"
-                    aria-label="example focused input field"></input>
-                    <p>Hint text</p>
-                </div>
-            </div>
-            <div>ALERT</div>
-            <div>
-                <div class = "input-field-container">
-                    <label for ="label">Label</label>
-                    <input class ="input-box alert" type="text" placeholder="Placeholder"
-                    aria-label="example alert input field"></input>
-                    <p>Hint text</p>
-                </div>
-            </div>
-            <div>SUCCESS</div>
-            <div>
-                <div class = "input-field-container">
-                    <label for ="label">Label</label>
-                    <input class ="input-box success" type="text" placeholder="Placeholder"
-                    aria-label="example success input field"></input>
-                    <p>Hint text</p>
-                </div>
+
+<div class="page-header">
+  <h1>Input Fields</h1>
+  <a href="https://www.figma.com/design/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=2-54&p=f&t=LYP42X6K0roEV7TT-0" target="_blank" class="figma-link"> Figma <span class="material-icons-outlined">open_in_new</span>
+  </a>
+</div>
+
+## Class
+
+=== "No Icon"
+    <div class="state-box">
+      <div class="input-wrapper no-icon">
+        <input id="noicon-preview" class="input-field with-label" type="text" aria-label="Preview input field" readonly>
+        <label class="input-label" for="noicon-preview">Label Text</label>
+      </div>
+    </div>
+
+    <h2 class="no-toc">States</h2>
+
+    === "Unpopulated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper">
+                <input id="noicon-ue" class="input-field with-label" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="noicon-ue">Label Text</label>
             </div>
         </div>
-    </div>
-    === "HTML"
 
-        ``` html
-        <a href="#" class="btn-sm ">Button</a>
+        <h2 class="no-toc">Code</h2>
 
-        <a href="#" class="btn-sm hover">Button</a>
+        === "HTML"
+            ```html
+            <div class="input-wrapper">
+                <input id="noicon-ue" class="input-field with-label" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="noicon-ue">Label Text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon"
+            ```
+
+    === "Populated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper no-icon">
+                <input id="noicon-pe" class="input-field has-value" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="noicon-pe">Label text</label>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon">
+                <input id="noicon-pe" class="input-field has-value" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="noicon-pe">Label text</label>
+            </div>
 
-        <a href="#" class="btn-sm focus">Button</a>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon"
+            ```
 
-        <a href="#" class="btn-sm disabled">Button</a>
+    === "Unpopulated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper">
+                <input id="noicon-uh" class="input-field with-label is-hover" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="noicon-uh">Label Text</label>
+            </div>
+        </div>
         
-        ```
 
-    === "CSS"
+        <h2 class="no-toc">Code</h2>
+
+        === "HTML"
+            ```html
+            <div class="input-wrapper">
+                <input id="noicon-uh" class="input-field with-label is-hover" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="noicon-uh">Label Text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon"
+            ```
 
-        ``` css
-            --8<-- "_input-fields.scss:input-fields"
-        ```        
-=== "Hover"
-    <div class="btn-grid-1">
-        <div class="grid-items">
-            <div>
-                <div class = "input-field-container">
-                    <label for ="label">Label</label>
-                    <input class ="input-box hover" type="text" placeholder="Placeholder"
-                    aria-label="example hovered input field"></input>
-                    <p>Hint text</p>
-                </div>
+    === "Populated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper no-icon">
+                <input id="noicon-ph" class="input-field has-value is-hover" type="text" value="Input Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="noicon-ph">Label text</label>
             </div>
         </div>
-    </div>
-    === "HTML"
 
-        ``` html
-        <a href="#" class="btn-sm ">Button</a>
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon">
+                <input id="noicon-ph" class="input-field has-value is-hover" type="text" value="Input Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="noicon-ph">Label text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon"
+            ```
 
-        <a href="#" class="btn-sm hover">Button</a>
+    === "Unpopulated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper">
+                <input id="noicon-uf" class="input-field with-label is-focused" 
+                    type="text" placeholder="Placeholder" readonly>
+                <label class="input-label" for="noicon-uf">Label Text</label>
+            </div>
+        </div>
 
-        <a href="#" class="btn-sm focus">Button</a>
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper">
+                <input id="noicon-uf" class="input-field with-label is-focused" 
+                    type="text" placeholder="Placeholder" readonly>
+                <label class="input-label" for="noicon-uf">Label Text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon"
+            ```
 
-        <a href="#" class="btn-sm disabled">Button</a>
-        
-        ```
+    === "Populated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper no-icon">
+                <input id="noicon-pf" class="input-field has-value is-focused" type="text" value="Input Text" aria-label="Populated focused input field">
+                <label class="input-label" for="noicon-pf">Label text</label>
+            </div>
+        </div>
 
-    === "CSS"
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon">
+                <input id="noicon-pf" class="input-field has-value is-focused" type="text" value="Input Text" aria-label="Populated focused input field">
+                <label class="input-label" for="noicon-pf">Label text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon"
+            ```
 
-        ``` css
-            --8<-- "_input-fields.scss:input-fields"
-        ```        
-=== "Focused"
-    <div class="btn-grid-1">
-        <div class="grid-items">
-            <div>
-                <div class = "input-field-container">
-                    <label for ="label">Label</label>
-                    <input class ="input-box focused" type="text" placeholder="Placeholder"
-                    aria-label="example focused input field"></input>
-                    <p>Hint text</p>
-                </div>
+    === "Unpopulated/Error"
+        <div class="state-box">
+            <div class="input-wrapper">
+                <input id="noicon-uee" class="input-field error with-label" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="noicon-uee">Label Text</label>
             </div>
         </div>
-    </div>
-    === "HTML"
 
-        ``` html
-        <a href="#" class="btn-sm ">Button</a>
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper">
+                <input id="noicon-uee" class="input-field error with-label" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="noicon-uee">Label Text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon"
+            ```
+
+    === "Populated/Error"
+        <div class="state-box">
+            <div class="input-wrapper no-icon">
+                <input id="noicon-pee" class="input-field error has-value" type="text" value="Input Text" aria-label="Populated error input field">
+                <label class="input-label" for="noicon-pee">Label text</label>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon">
+                <input id="noicon-pee" class="input-field error has-value" type="text" value="Input Text" aria-label="Populated error input field">
+                <label class="input-label" for="noicon-pee">Label text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon"
+            ```
+
+    === "Unpopulated/Disabled"
+
+        <div class="state-box">
+            <div class="input-wrapper">
+                <input id="noicon-ud" class="input-field with-label" type="text" disabled placeholder="Placeholder" readonly aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="noicon-ud">Label Text</label>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+
+        === "HTML"
+            ```html
+            <div class="input-wrapper">
+                <input id="noicon-ud" class="input-field with-label" type="text" disabled placeholder="Placeholder" readonly aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="noicon-ud">Label Text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon"
+            ```
 
-        <a href="#" class="btn-sm hover">Button</a>
+    === "Populated/Disabled"
 
-        <a href="#" class="btn-sm focus">Button</a>
+        <div class="state-box">
+            <div class="input-wrapper no-icon">
+                <input id="noicon-pd" class="input-field has-value" type="text" value="Input Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="noicon-pd">Label text</label>
+            </div>
+        </div>
 
-        <a href="#" class="btn-sm disabled">Button</a>
+        <h2 class="no-toc">Code</h2>
         
-        ```
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon">
+                <input id="noicon-pd" class="input-field has-value" type="text" value="Input Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="noicon-pd">Label text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon"
+            ```
 
-    === "CSS"
 
-        ``` css
-            --8<-- "_input-fields.scss:input-fields"
-        ```        
-=== "Alert"
-    <div class="btn-grid-1">
-        <div class="grid-items">
-            <div>
-                <div class = "input-field-container">
-                    <label for ="label">Label</label>
-                    <input class ="input-box alert" type="text" placeholder="Placeholder"
-                    aria-label="example alert input field"></input>
-                    <p>Hint text</p>
-                </div>
+=== "Leading Icon"
+    <div class="state-box">
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-ue" class="input-field with-label" type="text" placeholder="Placeholder" readonly aria-label="Leading icon unpopulated enabled input">
+                <label class="input-label" for="leading-ue">Label Text</label>
             </div>
         </div>
-    </div>
-    === "HTML"
 
-        ``` html
-        <a href="#" class="btn-sm ">Button</a>
+    <h2 class="no-toc">States</h2>
 
-        <a href="#" class="btn-sm hover">Button</a>
+    === "Unpopulated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-ue" class="input-field with-label" type="text" placeholder="Placeholder" readonly aria-label="Leading icon unpopulated enabled input">
+                <label class="input-label" for="leading-ue">Label Text</label>
+            </div>
+        </div>
 
-        <a href="#" class="btn-sm focus">Button</a>
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-ue" class="input-field with-label" type="text" placeholder="Placeholder" readonly aria-label="Leading icon unpopulated enabled input">
+                <label class="input-label" for="leading-ue">Label Text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon"
+            ```
 
-        <a href="#" class="btn-sm disabled">Button</a>
-        
-        ```
+    === "Populated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-pe" class="input-field has-value leading-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="leading-pe">Label text</label>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-pe" class="input-field has-value leading-icon" type="text" value="Label Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="leading-pe">Label</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon"
+            ```
+
+    === "Unpopulated/Hovered"
+
+        <div class="state-box">
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-uh" class="input-field with-label is-hover leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="leading-uh">Label Text</label>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-uh" class="input-field with-label is-hover leading-icon" type="text" aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="leading-uh">Label Text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon"
+            ```
+
+    === "Populated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-ph" class="input-field has-value is-hover leading-icon" type="text" value="Input Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="leading-ph">Label text</label>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-ph" class="input-field has-value is-hover leading-icon" type="text" value="Input Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="leading-ph">Label text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon"
+            ```
+
+    === "Unpopulated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-uf" class="input-field with-label is-focused leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="leading-uf">Label text</label>  
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-uf" class="input-field with-label is-focused leading-icon" type="text" aria-label="Unpopulated focused input field">
+                <label class="input-label" for="leading-uf">Label text</label>  
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon"
+            ```
+
+    === "Populated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-pf" class="input-field has-value is-focused leading-icon" type="text" value="Input Text" aria-label="Populated focused input field">
+                <label class="input-label" for="leading-pf">Label text</label>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-pf" class="input-field has-value is-focused leading-icon" type="text" value="Input Text" aria-label="Populated focused input field">
+                <label class="input-label" for="leading-pf">Label text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon"
+            ```
+
+    === "Unpopulated/Error"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-uee" class="input-field error with-label leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="leading-uee">Label Text</label>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-uee" class="input-field error with-label leading-icon" type="text" aria-label="Unpopulated error input field">
+                <label class="input-label" for="leading-uee">Label Text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon"
+            ```
+
+    === "Populated/Error"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-pee" class="input-field error has-value leading-icon" type="text" value="Input Text" aria-label="Populated error input field">
+                <label class="input-label" for="leading-pee">Label text</label>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-pee" class="input-field error has-value leading-icon" type="text" value="Input Text" aria-label="Populated error input field">
+                <label class="input-label" for="leading-pee">Label text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon"
+            ```
+
+    === "Unpopulated/Disabled"
+
+        <div class="state-box">
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-ud" class="input-field with-label leading-icon" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="leading-ud">Label</label>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-ud" class="input-field with-label leading-icon" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="leading-ud">Label</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon"
+            ```
+
+    === "Populated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-pd" class="input-field has-value leading-icon" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="leading-pd">Label Text</label>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-pd" class="input-field has-value leading-icon" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="leading-pd">Label Text</label>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon"
+            ```
+
+
+=== "Trailing Icon"
+    <div class="state-box">
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-ue" class="input-field with-label trailing-icon" type="text" aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="trailing-ue">Label</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+    <h2 class="no-toc">States</h2>
+
+    === "Unpopulated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-ue" class="input-field with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="trailing-ue">Label</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-ue" class="input-field with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="trailing-ue">Label</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon"
+            ```
+
+    === "Populated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-pe" class="input-field has-value trailing-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="trailing-pe">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-pe" class="input-field has-value trailing-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="trailing-pe">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon"
+            ```
+
+    === "Unpopulated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-uh" class="input-field with-label is-hover trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="trailing-uh">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
 
-    === "CSS"
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-uh" class="input-field with-label is-hover trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="trailing-uh">Label</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon"
+            ```
+
+    === "Populated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-ph" class="input-field has-value is-hover trailing-icon" type="text" value="Input Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="trailing-ph">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-ph" class="input-field has-value is-hover trailing-icon" type="text" value="Input Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="trailing-ph">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon"
+            ```
+
+    === "Unpopulated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-uf" class="input-field with-label is-focused trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="trailing-uf">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-uf" class="input-field with-label is-focused trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="trailing-uf">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon"
+            ```
+
+    === "Populated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-pf" class="input-field has-value is-focused trailing-icon" type="text" value="Input Text" aria-label="Populated focused input field">
+                <label class="input-label" for="trailing-pf">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-pf" class="input-field has-value is-focused trailing-icon" type="text" value="Input Text" aria-label="Populated focused input field">
+                <label class="input-label" for="trailing-pf">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon"
+            ```
 
-        ``` css
-            --8<-- "_input-fields.scss:input-fields"
-        ```        
-=== "Success"
-    <div class="btn-grid-1">
-        <div class="grid-items">
-            <div>
-                <div class = "input-field-container">
-                    <label for ="label">Label</label>
-                    <input class ="input-box success" type="text" placeholder="Placeholder"
-                    aria-label="example success input field"></input>
-                    <p>Hint text</p>
-                </div>
+    === "Unpopulated/Error"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-uee" class="input-field error with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="trailing-uee">Label Text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
             </div>
         </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-uee" class="input-field error with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="trailing-uee">Label Text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon"
+            ```
+
+    === "Populated/Error"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-pee" class="input-field error has-value trailing-icon" type="text" value="Input Text" aria-label="Populated error input field">
+                <label class="input-label" for="trailing-pee">Label text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-pee" class="input-field error has-value trailing-icon" type="text" value="Input Text" aria-label="Populated error input field">
+                <label class="input-label" for="trailing-pee">Label text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon"
+            ```
+
+    === "Unpopulated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-ud" class="input-field with-label trailing-icon" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="trailing-ud">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-ud" class="input-field with-label trailing-icon" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="trailing-ud">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon"
+            ```
+
+    === "Populated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-pd" class="input-field has-value trailing-icon" type="text" value="Input Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="trailing-pd">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon">
+                <input id="trailing-pd" class="input-field has-value trailing-icon" type="text" value="Example Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="trailing-pd">Label</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon"
+            ```
+
+
+=== "No Icon + Supp. Text"
+    <div class="state-box">
+        <div class="input-wrapper no-icon-supporting">
+            <input id="noicon-support-ue" class="input-field with-label" type="text" aria-label="Unpopulated enabled input field">
+            <label class="input-label" for="noicon-support-ue">Label Text</label>
+            <p class="input-helper">Supporting text</p>
+        </div>
     </div>
-    === "HTML"
 
-        ``` html
-        <a href="#" class="btn-sm ">Button</a>
+    <h2 class="no-toc">States</h2>
 
-        <a href="#" class="btn-sm hover">Button</a>
+    === "Unpopulated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-ue" class="input-field with-label" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="noicon-support-ue">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
 
-        <a href="#" class="btn-sm focus">Button</a>
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-ue" class="input-field with-label" type="text" aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="noicon-support-ue">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon-supporting"
+            ```
 
-        <a href="#" class="btn-sm disabled">Button</a>
-        
-        ```
+    === "Populated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-pe" class="input-field has-value" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="noicon-support-pe">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
 
-    === "CSS"
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-pe" class="input-field has-value" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="noicon-support-pe">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon-supporting"
+            ```
+
+    === "Unpopulated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-uh" class="input-field with-label is-hover" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="noicon-support-uh">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-uh" class="input-field with-label is-hover" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="noicon-support-uh">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon-supporting"
+            ```
+
+    === "Populated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-ph" class="input-field has-value is-hover" type="text" value="Input Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="noicon-support-ph">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-ph" class="input-field has-value is-hover" type="text" value="Input Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="noicon-support-ph">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon-supporting"
+            ```
+
+    === "Unpopulated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-uf" class="input-field with-label is-focused" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="noicon-support-uf">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-uf" class="input-field with-label is-focused" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="noicon-support-uf">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon-supporting"
+            ```
+
+    === "Populated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-pf" class="input-field has-value is-focused" type="text" value="Input Text" aria-label="Populated focused input field">
+                <label class="input-label" for="noicon-support-pf">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-pf" class="input-field has-value is-focused" type="text" value="Input Text" aria-label="Populated focused input field">
+                <label class="input-label" for="noicon-support-pf">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon-supporting"
+            ```
+
+    === "Unpopulated/Error"
+        <div class="state-box">
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-uee" class="input-field error with-label" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="noicon-support-uee">Label Text</label>
+                <p class="input-helper error">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-uee" class="input-field error with-label" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="noicon-support-uee">Label Text</label>
+                <p class="input-helper error">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon-supporting"
+            ```
+
+    === "Populated/Error"
+        <div class="state-box">
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-pee" class="input-field error has-value" type="text" value="Label Text" aria-label="Populated error input field">
+                <label class="input-label" for="noicon-support-pee">Label text</label>
+                <p class="input-helper error">Supporting Text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-pee" class="input-field error has-value" type="text" value="Label Text" aria-label="Populated error input field">
+                <label class="input-label" for="noicon-support-pee">Label text</label>
+                <p class="input-helper error">Supporting Text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon-supporting"
+            ```
+
+    === "Unpopulated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-ud" class="input-field with-label" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="noicon-support-ud">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-ud" class="input-field with-label" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="noicon-support-ud">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon-supporting"
+            ```
+
+    === "Populated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-pd" class="input-field has-value" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="noicon-support-pd">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper no-icon-supporting">
+                <input id="noicon-support-pd" class="input-field has-value" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="noicon-support-pd">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:no-icon-supporting"
+            ```
+
+
+=== "Leading Icon + Supp. Text"
+    <div class="state-box">
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-ue" class="input-field with-label leading-icon" type="text" aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="leading-support-ue">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+    
+    <h2 class="no-toc">States</h2>
+
+    === "Unpopulated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-ue" class="input-field with-label leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="leading-support-ue">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-ue" class="input-field with-label leading-icon" type="text" aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="leading-support-ue">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon-supporting"
+            ```
+
+    === "Populated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-pe" class="input-field has-value leading-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="leading-support-pe">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-pe" class="input-field has-value leading-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="leading-support-pe">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon-supporting"
+            ```
+
+    === "Unpopulated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-uh" class="input-field with-label is-hover leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="leading-support-uh">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-uh" class="input-field with-label is-hover leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="leading-support-uh">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon-supporting"
+            ```
+
+    === "Populated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-ph" class="input-field has-value is-hover leading-icon" type="text" value="Input Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="leading-support-ph">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-ph" class="input-field has-value is-hover leading-icon" type="text" value="Input Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="leading-support-ph">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon-supporting"
+            ```
+
+    === "Unpopulated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-uf" class="input-field with-label is-focused leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="leading-support-uf">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-uf" class="input-field with-label is-focused leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="leading-support-uf">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon-supporting"
+            ```
+
+    === "Populated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-pf" class="input-field has-value is-focused leading-icon" type="text" value="Label Text" aria-label="Populated focused input field">
+                <label class="input-label" for="leading-support-pf">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-pf" class="input-field has-value is-focused leading-icon" type="text" value="Label Text" aria-label="Populated focused input field">
+                <label class="input-label" for="leading-support-pf">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon-supporting"
+            ```
+
+    === "Unpopulated/Error"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-uee" class="input-field error with-label leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="leading-support-uee">Label Text</label>
+                <p class="input-helper error">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-uee" class="input-field error with-label leading-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="leading-support-uee">Label Text</label>
+                <p class="input-helper error">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon-supporting"
+            ```
+
+    === "Populated/Error"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-pee" class="input-field error has-value leading-icon" type="text" value="Label Text" aria-label="Populated error input field">
+                <label class="input-label" for="leading-support-pee">Label text</label>
+                <p class="input-helper error">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-pee" class="input-field error has-value leading-icon" type="text" value="Label Text" aria-label="Populated error input field">
+                <label class="input-label" for="leading-support-pee">Label text</label>
+                <p class="input-helper error">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon-supporting"
+            ```
+
+    === "Unpopulated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-ud" class="input-field with-label leading-icon" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="leading-support-ud">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="stroke="#9D9F9F"" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-ud" class="input-field with-label leading-icon" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="leading-support-ud">Label Text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon-supporting"
+            ```
+
+    === "Populated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-pd" class="input-field has-value leading-icon" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="leading-support-pd">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="stroke="#9D9F9F"" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="stroke="#9D9F9F"" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="leading-support-pd" class="input-field has-value leading-icon" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="leading-support-pd">Label text</label>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-icon-supporting"
+            ```
+
+=== "Trailing Icon + Supp. Text"
+    <div class="state-box">
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-ue" class="input-field with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="trailing-support-ue">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+    <h2 class="no-toc">States</h2>
+
+    === "Unpopulated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-ue" class="input-field with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="trailing-support-ue">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-ue" class="input-field with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="trailing-support-ue">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon-supporting"
+            ```
+
+    === "Populated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-pe" class="input-field has-value trailing-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="trailing-support-pe">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-pe" class="input-field has-value trailing-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="trailing-support-pe">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon-supporting"
+            ```
+
+    === "Unpopulated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-uh" class="input-field with-label is-hover trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="trailing-support-uh">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-uh" class="input-field with-label is-hover trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="trailing-support-uh">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon-supporting"
+            ```
+
+    === "Populated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-ph" class="input-field has-value is-hover trailing-icon" type="text" value="Input Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="trailing-support-ph">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-ph" class="input-field has-value is-hover trailing-icon" type="text" value="Input Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="trailing-support-ph">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon-supporting"
+            ```
+
+    === "Unpopulated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-uf" class="input-field with-label is-focused trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="trailing-support-uf">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-uf" class="input-field with-label is-focused trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="trailing-support-uf">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon-supporting"
+            ```
+
+    === "Populated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-pf" class="input-field has-value is-focused trailing-icon" type="text" value="Input Text" aria-label="Populated focused input field">
+                <label class="input-label" for="trailing-support-pf">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-pf" class="input-field has-value is-focused trailing-icon" type="text" value="Input Text" aria-label="Populated focused input field">
+                <label class="input-label" for="trailing-support-pf">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon-supporting"
+            ```
+
+    === "Unpopulated/Error"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-uee" class="input-field error with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="trailing-support-uee">Label Text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+                <p class="input-helper error">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-uee" class="input-field error with-label trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="trailing-support-uee">Label Text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+                <p class="input-helper error">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon-supporting"
+            ```
+
+    === "Populated/Error"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-pee" class="input-field error has-value trailing-icon" type="text" value="Input Text" aria-label="Populated error input field">
+                <label class="input-label" for="trailing-support-pee">Label text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+                <p class="input-helper error">Error message here</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-pee" class="input-field error has-value trailing-icon" type="text" value="Input Text" aria-label="Populated error input field">
+                <label class="input-label" for="trailing-support-pee">Label text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+                <p class="input-helper error">Error message here</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon-supporting"
+            ```
+
+    === "Unpopulated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-ud" class="input-field with-label trailing-icon" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="trailing-support-ud">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-ud" class="input-field with-label trailing-icon" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="trailing-support-ud">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon-supporting"
+            ```
+
+    === "Populated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-pd" class="input-field has-value trailing-icon" type="text" value="Input Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="trailing-support-pd">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper trailing-icon-supporting">
+                <input id="trailing-support-pd" class="input-field has-value trailing-icon" type="text" value="Input Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="trailing-support-pd">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:trailing-icon-supporting"
+            ```
+
+
+=== "Leading + Trailing Icon"
+    <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-ue" class="input-field with-label leading-icon trailing-icon" type="text" aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="lt-ue">Label</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+    <h2 class="no-toc">States</h2>
+
+    === "Unpopulated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-ue" class="input-field with-label leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="lt-ue">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-ue" class="input-field with-label leading-icon trailing-icon" type="text" aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="lt-ue">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon"
+            ```
+
+    === "Populated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-pe" class="input-field has-value leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="lt-pe">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-pe" class="input-field has-value leading-icon trailing-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="lt-pe">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon"
+            ```
+
+    === "Unpopulated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-uh" class="input-field with-label is-hover leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="lt-uh">Label</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-uh" class="input-field with-label is-hover leading-icon trailing-icon" type="text" aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="lt-uh">Label</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon"
+            ```
+
+    === "Populated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-ph" class="input-field has-value is-hover leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="lt-ph">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-ph" class="input-field has-value is-hover leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="lt-ph">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon"
+            ```
+
+    === "Unpopulated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-uf" class="input-field with-label is-focused leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="lt-uf">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-uf" class="input-field with-label is-focused leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="lt-uf">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon"
+            ```
+
+    === "Populated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-pf" class="input-field has-value is-focused leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated focused input field">
+                <label class="input-label" for="lt-pf">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-pf" class="input-field has-value is-focused leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated focused input field">
+                <label class="input-label" for="lt-pf">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon"
+            ```
+
+    === "Unpopulated/Error"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-uee" class="input-field error with-label leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="lt-uee">Label Text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-uee" class="input-field error with-label leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="lt-uee">Label Text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon"
+            ```
+
+    === "Populated/Error"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-pee" class="input-field error has-value leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated error input field">
+                <label class="input-label" for="lt-pee">Label text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-pee" class="input-field error has-value leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated error input field">
+                <label class="input-label" for="lt-pee">Label text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon"
+            ```
+
+    === "Unpopulated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-ud" class="input-field with-label leading-icon trailing-icon" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="lt-ud">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-ud" class="input-field with-label leading-icon trailing-icon" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="lt-ud">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon"
+            ```
+
+    === "Populated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-pd" class="input-field has-value leading-icon trailing-icon" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="lt-pd">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lt-pd" class="input-field has-value leading-icon trailing-icon" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="lt-pd">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon"
+            ```
+
+
+=== "Leading + Trailing Icon + Supporting Text"
+    <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-ue" class="input-field with-label leading-icon trailing-icon" type="text" aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="lts-ue">Label</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+    <h2 class="no-toc">States</h2>
+
+    === "Unpopulated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-ue" class="input-field with-label leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="lts-ue">Label</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-ue" class="input-field with-label leading-icon trailing-icon" type="text" aria-label="Unpopulated enabled input field">
+                <label class="input-label" for="lts-ue">Label</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon-supporting"
+            ```
+
+    === "Populated/Enabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-pe" class="input-field has-value leading-icon trailing-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="lts-pe">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-pe" class="input-field has-value leading-icon trailing-icon" type="text" value="Input Text" aria-label="Populated enabled input field">
+                <label class="input-label" for="lts-pe">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon-supporting"
+            ```
+
+    === "Unpopulated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-uh" class="input-field with-label is-hover leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="lts-uh">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-uh" class="input-field with-label is-hover leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated hovered input field">
+                <label class="input-label" for="lts-uh">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon-supporting"
+            ```
+
+    === "Populated/Hovered"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-ph" class="input-field has-value is-hover leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="lts-ph">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-ph" class="input-field has-value is-hover leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated hovered input field">
+                <label class="input-label" for="lts-ph">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon-supporting"
+            ```
+
+    === "Unpopulated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-uf" class="input-field with-label is-focused leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="lts-uf">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-uf" class="input-field with-label is-focused leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated focused input field">
+                <label class="input-label" for="lts-uf">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon-supporting"
+            ```
+
+    === "Populated/Focused"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-pf" class="input-field has-value is-focused leading-icon trailing-icon" type="text" value="Input Text" aria-label="Populated focused input field">
+                <label class="input-label" for="lts-pf">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-pf" class="input-field has-value is-focused leading-icon trailing-icon" type="text" value="Input Text" aria-label="Populated focused input field">
+                <label class="input-label" for="lts-pf">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon-supporting"
+            ```
+
+    === "Unpopulated/Error"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-uee" class="input-field error with-label leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="lts-uee">Label Text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+                <p class="input-helper error">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-uee" class="input-field error with-label leading-icon trailing-icon" type="text" placeholder="Placeholder" readonly aria-label="Unpopulated error input field">
+                <label class="input-label" for="lts-uee">Label Text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+                <p class="input-helper error">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon-supporting"
+            ```
+
+    === "Populated/Error"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-pee" class="input-field error has-value leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated error input field">
+                <label class="input-label" for="lts-pee">Label text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+                <p class="input-helper error">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#000000" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#000000" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-pee" class="input-field error has-value leading-icon trailing-icon" type="text" value="Label Text" aria-label="Populated error input field">
+                <label class="input-label" for="lts-pee">Label text</label>
+                <span class="input-icon trailing error" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" fill="#D32F2F"/>
+                        <path d="M12 7V13" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="12" cy="17" r="1.5" fill="white"/>
+                    </svg>
+                </span>
+                <p class="input-helper error">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon-supporting"
+            ```
+
+    === "Unpopulated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-ud" class="input-field with-label leading-icon trailing-icon" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="lts-ud">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-ud" class="input-field with-label leading-icon trailing-icon" type="text" disabled aria-label="Unpopulated disabled input field">
+                <label class="input-label" for="lts-ud">Label Text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon-supporting"
+            ```
+
+    === "Populated/Disabled"
+        <div class="state-box">
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-pd" class="input-field has-value leading-icon trailing-icon" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="lts-pd">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+        </div>
+
+        <h2 class="no-toc">Code</h2>
+        === "HTML"
+            ```html
+            <div class="input-wrapper leading-trailing-icon-supporting">
+                <span class="input-icon leading">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="11" cy="11" r="7" stroke="#9D9F9F" stroke-width="2"/>
+                        <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="#9D9F9F" stroke-width="2"/>
+                    </svg>
+                </span>
+                <input id="lts-pd" class="input-field has-value leading-icon trailing-icon" type="text" value="Label Text" disabled aria-label="Populated disabled input field">
+                <label class="input-label" for="lts-pd">Label text</label>
+                <span class="input-icon trailing" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                        <path d="M9 9L15 15M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <p class="input-helper">Supporting text</p>
+            </div>
+            ```
+        === "CSS"
+            ```css
+            --8<-- "components/sass/components/_input-fields.scss:leading-trailing-icon-supporting"
+            ```
+
+
+---
 
-        ``` css
-            --8<-- "_input-fields.scss:input-fields"
-        ```        
\ No newline at end of file
+## **Resources**
+- [SASS file on GitHub](https://github.com/hackforla/internship-website-design-system/blob/main/docs/components/sass/components/_input-fields.scss)
+- [Markdown file on GitHub](https://github.com/hackforla/internship-website-design-system/blob/main/docs/input-fields.md)
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index c257f33..82ae194 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1,10 +1,11 @@
-/* Nav Bar Formmatting */
+/* Nav Bar Formatting */
 
 .md-nav__item a {
   height: 2.1rem;
   line-height: 2rem;
   text-align: center;
 }
+
 .md-nav__link a {
   text-align: center;
   padding-left: 20%;
@@ -26,26 +27,102 @@
   width: 15vw;
 }
 
-/* .md-nav__link:not(.md-nav__container):focus,
-.md-nav__link:not(.md-nav__container):hover {
-  color: black !important;
-} */
-
+/* Tabs hover underline */
 li.md-tabs__item:hover {
   box-shadow: inset 0 -3px 0 0 rgb(123, 178, 162);
 }
 
+/* Hide most icons, except clipboard */
 .md-icon {
   visibility: hidden;
 }
 
+.md-clipboard.md-icon {
+  visibility: visible !important;
+}
+
+/* Active nav link color */
 .md-nav__item .md-nav__link--active {
   color: black;
 }
 
-/* md-typeset heading styles */
-.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 {
-    text-transform: none;
-    letter-spacing: 0;
-    color: black;
-}
\ No newline at end of file
+/* Headings in content */
+.md-typeset h1,
+.md-typeset h2,
+.md-typeset h3,
+.md-typeset h4,
+.md-typeset h5,
+.md-typeset h6 {
+  text-transform: none;
+  letter-spacing: 0;
+  color: black;
+}
+
+/* Header container */
+.page-header {
+  display: flex;
+  justify-content: space-between; /* push Figma link to the right */
+  align-items: center;
+}
+
+/* Style Figma link */
+.page-header .figma-link {
+  font-size: 0.9rem;      /* smaller than heading */
+  font-weight: 500;
+  color: #1565c0;         /* Material blue */
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;               /* space between text and icon */
+}
+
+.page-header .figma-link:hover {
+  text-decoration: underline;
+}
+
+/* --- Copy button (clipboard) styling --- */
+.md-clipboard {
+  background: none !important;     /* remove grey box */
+  border: none !important;
+  box-shadow: none !important;
+  padding: 4px !important;
+  margin: 4px !important;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 28px;   /* icon container size */
+  height: 28px;
+
+  color: #1a1a1a;                  /* icon color */
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+
+.md-clipboard:hover {
+  opacity: 1;
+  cursor: pointer;
+}
+
+/* Resize the clipboard SVG icon */
+.md-clipboard svg {
+  width: 20px;
+  height: 20px;
+  stroke-width: 2px;
+}
+
+/* Reduce spacing between tab headers and preview content */
+.md-typeset .tabbed-set {
+  margin-bottom: 0;   /* remove bottom margin of tab wrapper */
+}
+
+.md-typeset .tabbed-content {
+  margin-top: 0 !important;   /* remove top margin of tab content */
+}
+
+/* Optional: tighten state-box spacing */
+.state-box {
+  margin-top: 0 !important;
+  margin-bottom: 16px; /* keep just a little breathing room */
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index 1a484e9..cc3ba7c 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -1,27 +1,25 @@
 site_name: TWE Design System
 repo_url: https://github.com/hackforla/internship-website-design-system
 site_url: https://hackforla.github.io/internship-website-design-system/
+
 nav:
   - Getting Started: index.md
   - Styles:
       - Typography: type-scale.md
   - Components:
-    - Accordion: accordion.md
-    - Button: buttons.md
-    - Checkbox: checkbox.md
-    - Radio Button: radio.md
-    - Text Area: text-area.md
-    - Toggles: toggles.md
-   
+      - Accordion: accordion.md
+      - Button: buttons.md
+      - Radio Button: radio.md
+      - Text Area: text-area.md
+      - Toggles: toggles.md
+      - Input Fields: input-fields.md
 
 plugins:
   - search:
       lang: en
 
-
 theme:
   name: material
-  custom_dir: docs/overrides
   font:
     text: roboto
   logo: Logo Flatten White.png
@@ -29,16 +27,19 @@ theme:
     # - navigation.expand
     - navigation.instant
     - navigation.path
-    # - navigation.sections
     - content.code.copy
     - content.code.select
   palette:
     primary: white
     # accent: teal
+  custom_dir: docs/overrides
+
 extra_css:
+  - https://fonts.googleapis.com/icon?family=Material+Icons+Outlined
   - dist/main.css
   - stylesheets/extra.css
   # - /bootstrap/css/bootstrap.min.css
+
 extra_javascript:
   - javascript/extra.js
   # - javascript/bootstrap.min.js