@sats-group/ui-lib 75.9.0 → 75.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "75.9.0",
+  "version": "75.10.1",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",

package/react/text-input/text-input.scss

@@ -162,13 +162,28 @@
     }
   }
 
-  &__help {
+  &__help,
+  &__error {
+    display: flex;
+    gap: spacing.$xs;
     margin-top: spacing.$xxs;
-    color: light.$on-background-primary-disabled;
+
+    > * {
+      align-self: flex-start;
+    }
+  }
+
+  &__help {
+    color: light.$on-surface-primary-disabled;
   }
 
   &__error {
-    margin-top: spacing.$xxs;
+    color: light.$on-surface-error;
+  }
+
+  &__help-icon,
+  &__error-icon {
+    flex-shrink: 0;
   }
 
   &__asterisk {

package/react/text-input/text-input.tsx

@@ -6,6 +6,8 @@ import useInputValidation from '../use-input-validation';
 
 import { themes, variants, TextInput as Props } from './text-input.types';
 import { useEffect } from 'react';
+import SvgError from '@sats-group/icons/16/error';
+import SvgInfo from '@sats-group/icons/16/info';
 
 const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
   (
@@ -97,12 +99,18 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
 
         {helpText ? (
           <div className="text-input__help">
+            <div className="text-input__help-icon">
+              <SvgInfo />
+            </div>
             <Text size={Text.sizes.interface}>{helpText}</Text>
           </div>
         ) : null}
         {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
         {error ? (
           <div aria-hidden="true" className="text-input__error">
+            <div className="text-input__error-icon">
+              <SvgError />
+            </div>
             <Text size={Text.sizes.interface}>{error}</Text>
           </div>
         ) : null}