keystone-design-bootstrap 1.0.72 → 1.0.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.72",
+  "version": "1.0.73",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/design_system/portal/LoginForm.tsx

@@ -65,7 +65,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     setPhoneValue(formatted);
   };
 
-  const emailInput = (
+  const emailInput = (required = false) => (
     <input
       type="email"
       value={email}
@@ -73,10 +73,11 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
       placeholder="you@example.com"
       className={inputClass}
       autoComplete="email"
+      required={required}
     />
   );
 
-  const phoneInput = (
+  const phoneInput = (required = false) => (
     <div className="flex rounded-input border border-primary overflow-hidden focus-within:border-brand focus-within:ring-1 focus-within:ring-brand transition-colors">
       <select
         value={selectedCountry}
@@ -95,6 +96,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         placeholder={nationalPlaceholder}
         className="flex-1 px-3 py-2.5 text-base text-primary placeholder-quaternary bg-transparent focus:outline-none"
         autoComplete="tel"
+        required={required}
       />
     </div>
   );
@@ -255,7 +257,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         <form onSubmit={handleContinue} className="space-y-3">
           <div>
             <label className={labelClass}>Email address</label>
-            {emailInput}
+            {emailInput()}
           </div>
           <div className="flex items-center gap-3">
             <hr className="flex-1 border-secondary" />
@@ -264,7 +266,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
           </div>
           <div>
             <label className={labelClass}>Phone number</label>
-            {phoneInput}
+            {phoneInput()}
           </div>
           <div className="pt-1">
             <button
@@ -347,14 +349,14 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
           {/* Collect the missing contact method so the business can reach out */}
           {emailVal && !fullPhone && (
             <div>
-              <label className={labelClass}>Phone number <span className="text-quaternary">(optional)</span></label>
-              {phoneInput}
+              <label className={labelClass}>Phone number</label>
+              {phoneInput(true)}
             </div>
           )}
           {fullPhone && !emailVal && (
             <div>
-              <label className={labelClass}>Email address <span className="text-quaternary">(optional)</span></label>
-              {emailInput}
+              <label className={labelClass}>Email address</label>
+              {emailInput(true)}
             </div>
           )}
           <div>