fix(form-field): aligned hints' margin,gap (#DS-4358) (#1124)

Author: NikGurev

packages/components/form-field/fieldset-tokens.scss

@@ -1,5 +1,6 @@
 .kbq-fieldset {
     --kbq-fieldset-legend-margin: var(--kbq-size-s);
-    --kbq-form-field-hint-size-margin-top: var(--kbq-size-m);
+    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);
     --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
+    --kbq-form-field-hint-size-gap: var(--kbq-size-xxs);
 }

packages/components/form-field/form-field-tokens.scss

@@ -10,8 +10,8 @@
     --kbq-form-field-size-icon-button-size: var(--kbq-size-xxl);
     --kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs);
 
-    --kbq-form-field-hint-size-margin-top: var(--kbq-size-m);
-    --kbq-form-field-hint-size-gap: var(--kbq-size-s);
+    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);
+    --kbq-form-field-hint-size-gap: var(--kbq-size-xxs);
 
     --kbq-form-field-size-container-vertical-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));
     --kbq-form-field-size-container-left-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));

packages/components/form-field/form-field.scss

@@ -4,8 +4,16 @@
 @mixin kbq-form-field-hint-geometry {
     display: flex;
     flex-direction: column;
-    gap: var(--kbq-size-s);
+    gap: var(--kbq-form-field-hint-size-gap);
     margin-top: var(--kbq-form-field-hint-size-margin-top);
+
+    &:has(.kbq-reactive-password-hint, .kbq-password-hint) {
+        --kbq-form-field-hint-size-gap: var(--kbq-size-s);
+    }
+
+    &:has(:is(.kbq-reactive-password-hint, .kbq-password-hint):first-child) {
+        --kbq-form-field-hint-size-margin-top: var(--kbq-size-m);
+    }
 }
 
 .kbq-form-field {