keystone-design-bootstrap 1.0.73 → 1.0.75

package/dist/themes/index.d.ts

@@ -7,6 +7,7 @@ declare const THEME_CONFIG: {
     readonly aman: ".aman";
     readonly barelux: ".barelux";
     readonly balance: ".balance";
+    readonly custom: "";
 };
 type Theme = keyof typeof THEME_CONFIG;
 declare function getAvailableThemes(): Theme[];

package/dist/themes/index.js

@@ -6,8 +6,10 @@ var THEME_CONFIG = {
   // Aman Hotels variant files (hero-home.aman.tsx)
   barelux: ".barelux",
   // Bare Lux Studio variant files (hero-home.barelux.tsx)
-  balance: ".balance"
+  balance: ".balance",
   // Balance Aesthetics variant files (hero-home.balance.tsx)
+  custom: ""
+  // Fully custom sites — no design-system CSS loaded, all styling built in the site itself
 };
 function getAvailableThemes() {
   return Object.keys(THEME_CONFIG);

package/dist/themes/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/themes/index.ts"],"sourcesContent":["/**\n * Theme Configuration\n * Single source of truth for all themes\n */\n\nexport const THEME_CONFIG = {\n  classic: '',           // Base files with no suffix (hero-home.tsx)\n  aman: '.aman',         // Aman Hotels variant files (hero-home.aman.tsx)\n  barelux: '.barelux',   // Bare Lux Studio variant files (hero-home.barelux.tsx)\n  balance: '.balance',   // Balance Aesthetics variant files (hero-home.balance.tsx)\n} as const;\n\nexport type Theme = keyof typeof THEME_CONFIG;\n\nexport function getAvailableThemes(): Theme[] {\n  return Object.keys(THEME_CONFIG) as Theme[];\n}\n\nexport function getThemeSuffix(theme: Theme): string {\n  return THEME_CONFIG[theme] || '';\n}\n\nexport function isValidTheme(theme: string): theme is Theme {\n  return theme in THEME_CONFIG;\n}\n"],"mappings":";AAKO,IAAM,eAAe;AAAA,EAC1B,SAAS;AAAA;AAAA,EACT,MAAM;AAAA;AAAA,EACN,SAAS;AAAA;AAAA,EACT,SAAS;AAAA;AACX;AAIO,SAAS,qBAA8B;AAC5C,SAAO,OAAO,KAAK,YAAY;AACjC;AAEO,SAAS,eAAe,OAAsB;AACnD,SAAO,aAAa,KAAK,KAAK;AAChC;AAEO,SAAS,aAAa,OAA+B;AAC1D,SAAO,SAAS;AAClB;","names":[]}
+{"version":3,"sources":["../../src/themes/index.ts"],"sourcesContent":["/**\n * Theme Configuration\n * Single source of truth for all themes\n */\n\nexport const THEME_CONFIG = {\n  classic: '',           // Base files with no suffix (hero-home.tsx)\n  aman: '.aman',         // Aman Hotels variant files (hero-home.aman.tsx)\n  barelux: '.barelux',   // Bare Lux Studio variant files (hero-home.barelux.tsx)\n  balance: '.balance',   // Balance Aesthetics variant files (hero-home.balance.tsx)\n  custom: '',            // Fully custom sites — no design-system CSS loaded, all styling built in the site itself\n} as const;\n\nexport type Theme = keyof typeof THEME_CONFIG;\n\nexport function getAvailableThemes(): Theme[] {\n  return Object.keys(THEME_CONFIG) as Theme[];\n}\n\nexport function getThemeSuffix(theme: Theme): string {\n  return THEME_CONFIG[theme] || '';\n}\n\nexport function isValidTheme(theme: string): theme is Theme {\n  return theme in THEME_CONFIG;\n}\n"],"mappings":";AAKO,IAAM,eAAe;AAAA,EAC1B,SAAS;AAAA;AAAA,EACT,MAAM;AAAA;AAAA,EACN,SAAS;AAAA;AAAA,EACT,SAAS;AAAA;AAAA,EACT,QAAQ;AAAA;AACV;AAIO,SAAS,qBAA8B;AAC5C,SAAO,OAAO,KAAK,YAAY;AACjC;AAEO,SAAS,eAAe,OAAsB;AACnD,SAAO,aAAa,KAAK,KAAK;AAChC;AAEO,SAAS,aAAa,OAA+B;AAC1D,SAAO,SAAS;AAClB;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.73",
+  "version": "1.0.75",
   "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

@@ -44,6 +44,13 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
+  // Additional contact method collected on the new-user step.
+  // Kept separate so typing here doesn't affect the identifier-step conditions.
+  const [additionalPhone, setAdditionalPhone] = useState('');
+  const [additionalEmail, setAdditionalEmail] = useState('');
+  // Snapshot of which method the user identified with, set when moving to step 'new'.
+  const [identifiedWith, setIdentifiedWith] = useState<'email' | 'phone' | null>(null);
+
   // Phone helpers
   const country = useMemo(() => countries.find((c) => c.code === selectedCountry), [selectedCountry]);
   const phoneCode = country ? (country.phoneCode.startsWith('+') ? country.phoneCode : `+${country.phoneCode}`) : '+1';
@@ -59,17 +66,11 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   const fullPhone = phoneDigits.length > 0 ? `${phoneCode}${phoneDigits}` : null;
   const emailVal = email.trim() || null;
 
-  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const digits = e.target.value.replace(/\D/g, '');
-    const formatted = nationalMask ? formatDigitsToMask(digits, nationalMask) : digits;
-    setPhoneValue(formatted);
-  };
-
-  const emailInput = (required = false) => (
+  const emailInput = (value: string, onChange: (v: string) => void, required = false) => (
     <input
       type="email"
-      value={email}
-      onChange={(e) => setEmail(e.target.value)}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
       placeholder="you@example.com"
       className={inputClass}
       autoComplete="email"
@@ -77,11 +78,11 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     />
   );
 
-  const phoneInput = (required = false) => (
+  const phoneInput = (value: string, onChange: (v: string) => void, 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}
-        onChange={(e) => { setSelectedCountry(e.target.value); setPhoneValue(''); }}
+        onChange={(e) => { setSelectedCountry(e.target.value); onChange(''); }}
         className="border-r border-secondary bg-secondary px-2 py-2.5 text-base text-secondary focus:outline-none"
         aria-label="Country code"
       >
@@ -91,8 +92,11 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
       </select>
       <input
         type="tel"
-        value={phoneValue}
-        onChange={handlePhoneChange}
+        value={value}
+        onChange={(e) => {
+          const digits = e.target.value.replace(/\D/g, '');
+          onChange(nationalMask ? formatDigitsToMask(digits, nationalMask) : digits);
+        }}
         placeholder={nationalPlaceholder}
         className="flex-1 px-3 py-2.5 text-base text-primary placeholder-quaternary bg-transparent focus:outline-none"
         autoComplete="tel"
@@ -120,11 +124,17 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         firePixelEvent('Lead');
         captureEvent('portal_login_identified', { method, user_exists: true });
         setWelcomeName(result.firstName ?? null);
-        setStep(result.hasPassword === false ? 'new' : 'returning');
+        if (result.hasPassword === false) {
+          setIdentifiedWith(emailVal ? 'email' : 'phone');
+          setStep('new');
+        } else {
+          setStep('returning');
+        }
       } else if (result.exists === false) {
         await setPixelUserData({ email: emailVal, phone: fullPhone });
         firePixelEvent('Lead');
         captureEvent('portal_login_identified', { method, user_exists: false });
+        setIdentifiedWith(emailVal ? 'email' : 'phone');
         setStep('new');
       } else {
         captureEvent('portal_login_failed', { step: 'identifier', reason: 'unknown_error' });
@@ -177,12 +187,16 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     setError(null);
     setLoading(true);
     try {
+      const additionalPhoneDigits = additionalPhone.replace(/\D/g, '');
+      const additionalFullPhone = additionalPhoneDigits.length > 0 ? `${phoneCode}${additionalPhoneDigits}` : null;
+      const additionalEmailVal = additionalEmail.trim() || null;
+
       const res = await fetch('/api/consumer/signup', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          email: emailVal,
-          phone: fullPhone,
+          email: emailVal ?? additionalEmailVal,
+          phone: fullPhone ?? additionalFullPhone,
           password,
           password_confirmation: passwordConfirm,
           first_name: firstName.trim() || undefined,
@@ -209,6 +223,9 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     setStep('identifier');
     setPassword('');
     setPasswordConfirm('');
+    setAdditionalPhone('');
+    setAdditionalEmail('');
+    setIdentifiedWith(null);
     setError(null);
   };
 
@@ -257,7 +274,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         <form onSubmit={handleContinue} className="space-y-3">
           <div>
             <label className={labelClass}>Email address</label>
-            {emailInput()}
+            {emailInput(email, setEmail)}
           </div>
           <div className="flex items-center gap-3">
             <hr className="flex-1 border-secondary" />
@@ -266,7 +283,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
           </div>
           <div>
             <label className={labelClass}>Phone number</label>
-            {phoneInput()}
+            {phoneInput(phoneValue, setPhoneValue)}
           </div>
           <div className="pt-1">
             <button
@@ -347,16 +364,16 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             </div>
           )}
           {/* Collect the missing contact method so the business can reach out */}
-          {emailVal && !fullPhone && (
+          {identifiedWith === 'email' && (
             <div>
               <label className={labelClass}>Phone number</label>
-              {phoneInput(true)}
+              {phoneInput(additionalPhone, setAdditionalPhone, true)}
             </div>
           )}
-          {fullPhone && !emailVal && (
+          {identifiedWith === 'phone' && (
             <div>
               <label className={labelClass}>Email address</label>
-              {emailInput(true)}
+              {emailInput(additionalEmail, setAdditionalEmail, true)}
             </div>
           )}
           <div>

package/src/next/layouts/root-layout.tsx

@@ -194,19 +194,23 @@ export async function KeystoneRootLayout(props: {
             jobApplicationFormDefinition={jobApplicationFormDefinition ?? null}
             marketingListSignupFormDefinition={marketingListSignupFormDefinition ?? null}
           >
-            <HeaderNavigation
-              config={dynamicConfig}
-              companyInformation={companyInformation}
-              websitePhotos={websitePhotos}
-              props={headerProps}
-              logoText={headerOverrides?.logoText}
-            />
+            {theme !== 'custom' && (
+              <HeaderNavigation
+                config={dynamicConfig}
+                companyInformation={companyInformation}
+                websitePhotos={websitePhotos}
+                props={headerProps}
+                logoText={headerOverrides?.logoText}
+              />
+            )}
             {children}
-            <FooterHome
-              config={dynamicConfig}
-              companyInformation={companyInformation}
-              websitePhotos={websitePhotos}
-            />
+            {theme !== 'custom' && (
+              <FooterHome
+                config={dynamicConfig}
+                companyInformation={companyInformation}
+                websitePhotos={websitePhotos}
+              />
+            )}
             {chatEnabled ? (
               <ChatWidget
                 position={options?.chatPosition || 'bottom-right'}

package/src/themes/index.ts

@@ -8,6 +8,7 @@ export const THEME_CONFIG = {
   aman: '.aman',         // Aman Hotels variant files (hero-home.aman.tsx)
   barelux: '.barelux',   // Bare Lux Studio variant files (hero-home.barelux.tsx)
   balance: '.balance',   // Balance Aesthetics variant files (hero-home.balance.tsx)
+  custom: '',            // Fully custom sites — no design-system CSS loaded, all styling built in the site itself
 } as const;
 
 export type Theme = keyof typeof THEME_CONFIG;