@striae-org/striae 4.1.0 → 4.2.1

package/app/components/navbar/navbar.tsx

@@ -0,0 +1,402 @@
+import { useEffect, useRef, useState, useContext } from 'react';
+import styles from './navbar.module.css';
+import { SignOut } from '../actions/signout';
+import { ManageProfile } from '../user/manage-profile';
+import { CaseImport } from '../sidebar/case-import/case-import';
+import { PublicSigningKeyModal } from '~/components/public-signing-key-modal/public-signing-key-modal';
+import { getCurrentPublicSigningKeyDetails } from '~/utils/forensics';
+import { AuthContext } from '~/contexts/auth.context';
+import { getUserData } from '~/utils/data';
+import { type ImportResult, type ConfirmationImportResult } from '~/types';
+
+interface NavbarProps {
+  isUploading?: boolean;
+  company?: string;
+  isReadOnly?: boolean;
+  currentCase?: string;
+  currentFileName?: string;
+  isCurrentImageConfirmed?: boolean;
+  hasLoadedCase?: boolean;
+  hasLoadedImage?: boolean;
+  onImportComplete?: (result: ImportResult | ConfirmationImportResult) => void;
+  onOpenCase?: () => void;
+  onOpenListAllCases?: () => void;
+  onOpenCaseExport?: () => void;
+  onOpenAuditTrail?: () => void;
+  onOpenRenameCase?: () => void;
+  onDeleteCase?: () => void;
+  onArchiveCase?: () => void;
+  onOpenViewAllFiles?: () => void;
+  onDeleteCurrentFile?: () => void;
+  onOpenImageNotes?: () => void;
+  archiveDetails?: {
+    archived: boolean;
+    archivedAt?: string;
+    archivedBy?: string;
+    archivedByDisplay?: string;
+    archiveReason?: string;
+  };
+}
+
+export const Navbar = ({
+  isUploading = false,
+  company,
+  isReadOnly = false,
+  currentCase,
+  currentFileName,
+  isCurrentImageConfirmed = false,
+  hasLoadedCase = false,
+  hasLoadedImage = false,
+  onImportComplete,
+  onOpenCase,
+  onOpenListAllCases,
+  onOpenCaseExport,
+  onOpenAuditTrail,
+  onOpenRenameCase,
+  onDeleteCase,
+  onArchiveCase,
+  onOpenViewAllFiles,
+  onDeleteCurrentFile,
+  onOpenImageNotes,
+  archiveDetails,
+}: NavbarProps) => {
+  const { user } = useContext(AuthContext);
+  const [userBadgeId, setUserBadgeId] = useState<string>('');
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
+  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
+  const [isPublicKeyModalOpen, setIsPublicKeyModalOpen] = useState(false);
+  const [isCaseMenuOpen, setIsCaseMenuOpen] = useState(false);
+  const [isFileMenuOpen, setIsFileMenuOpen] = useState(false);
+  const { keyId: publicSigningKeyId, publicKeyPem } = getCurrentPublicSigningKeyDetails();
+  const caseMenuRef = useRef<HTMLDivElement>(null);
+  const fileMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const loadUserBadgeId = async () => {
+      if (user) {
+        try {
+          const userData = await getUserData(user);
+          if (userData?.badgeId) {
+            setUserBadgeId(userData.badgeId);
+          }
+        } catch (err) {
+          console.error('Failed to load user badge ID:', err);
+        }
+      }
+    };
+
+    loadUserBadgeId();
+  }, [user]);
+
+  useEffect(() => {
+    if (!isCaseMenuOpen && !isFileMenuOpen) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      const targetNode = event.target as Node;
+      const clickedOutsideCaseMenu = !caseMenuRef.current?.contains(targetNode);
+      const clickedOutsideFileMenu = !fileMenuRef.current?.contains(targetNode);
+
+      if (clickedOutsideCaseMenu) {
+        setIsCaseMenuOpen(false);
+      }
+
+      if (clickedOutsideFileMenu) {
+        setIsFileMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handlePointerDown);
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+    };
+  }, [isCaseMenuOpen, isFileMenuOpen]);
+
+  const caseActionsDisabled = false;
+  const disableLongRunningCaseActions = isUploading;
+  const isCaseManagementActive = true;
+  const isFileManagementActive = isFileMenuOpen || hasLoadedImage;
+  const canOpenImageNotes = hasLoadedImage && !isCurrentImageConfirmed;
+  const isImageNotesActive = canOpenImageNotes;
+  const canDeleteCurrentFile = hasLoadedImage && !isReadOnly;
+
+  return (
+    <>
+      <header className={styles.navbar} aria-label="Canvas top navigation">
+        <div className={styles.companyLabelContainer}>
+          <div className={styles.companyLabel}>
+            {isReadOnly ? 'CASE REVIEW ONLY' : `${company}${user?.displayName ? ` | ${user.displayName}` : ''}${userBadgeId ? `, ${userBadgeId}` : ''}`}
+          </div>
+        </div>
+        <div className={styles.navCenterTrack}>
+          <div className={styles.navCentral}>
+          <div className={styles.caseMenuContainer} ref={caseMenuRef}>
+            <button
+              type="button"
+              className={`${styles.navSectionButton} ${isCaseManagementActive ? styles.navSectionButtonActive : ''}`}
+              aria-pressed={isCaseManagementActive}
+              aria-expanded={isCaseMenuOpen}
+              aria-haspopup="menu"
+              disabled={caseActionsDisabled}
+              onClick={() => setIsCaseMenuOpen((prev) => !prev)}
+              title={isUploading ? 'Some case actions are unavailable while files are uploading' : undefined}
+            >
+              Case Management
+            </button>
+            {isCaseMenuOpen && (
+              <div className={styles.caseMenu} role="menu" aria-label="Case Management actions">
+                <div className={styles.caseMenuSectionLabel}>Case Access</div>
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.caseMenuItem} ${styles.caseMenuItemOpen}`}
+                  onClick={() => {
+                    onOpenCase?.();
+                    setIsCaseMenuOpen(false);
+                  }}
+                >
+                  Open Case
+                </button>
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.caseMenuItem} ${styles.caseMenuItemList}`}
+                  onClick={() => {
+                    onOpenListAllCases?.();
+                    setIsCaseMenuOpen(false);
+                  }}
+                >
+                  List All Cases
+                </button>
+                <div className={styles.caseMenuSectionLabel}>Case Operations</div>
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.caseMenuItem} ${styles.caseMenuItemExport}`}
+                  disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                  title={
+                    !hasLoadedCase
+                      ? 'Load a case to export case data'
+                      : disableLongRunningCaseActions
+                        ? 'Export is unavailable while files are uploading'
+                        : undefined
+                  }
+                  onClick={() => {
+                    onOpenCaseExport?.();
+                    setIsCaseMenuOpen(false);
+                  }}
+                >
+                  Export Case Data
+                </button>
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.caseMenuItem} ${styles.caseMenuItemAudit}`}
+                  disabled={!hasLoadedCase}
+                  title={!hasLoadedCase ? 'Load a case to view audit trail' : undefined}
+                  onClick={() => {
+                    onOpenAuditTrail?.();
+                    setIsCaseMenuOpen(false);
+                  }}
+                >
+                  Case Audit Trail
+                </button>
+                {(!isReadOnly || archiveDetails?.archived) && (
+                  <div className={styles.caseMenuSectionLabel}>Maintenance</div>
+                )}
+                {!isReadOnly && (
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className={`${styles.caseMenuItem} ${styles.caseMenuItemRename}`}
+                    disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                    title={
+                      !hasLoadedCase
+                        ? 'Load a case to rename it'
+                        : disableLongRunningCaseActions
+                          ? 'Rename is unavailable while files are uploading'
+                          : undefined
+                    }
+                    onClick={() => {
+                      onOpenRenameCase?.();
+                      setIsCaseMenuOpen(false);
+                    }}
+                  >
+                    Rename Case
+                  </button>
+                )}
+                {(!isReadOnly || archiveDetails?.archived) && (
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className={`${styles.caseMenuItem} ${styles.caseMenuItemDelete}`}
+                    disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                    title={
+                      !hasLoadedCase
+                        ? 'Load a case to delete it'
+                        : disableLongRunningCaseActions
+                          ? 'Delete is unavailable while files are uploading'
+                          : undefined
+                    }
+                    onClick={() => {
+                      onDeleteCase?.();
+                      setIsCaseMenuOpen(false);
+                    }}
+                  >
+                    Delete Case
+                  </button>
+                )}
+                {!isReadOnly && (
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className={`${styles.caseMenuItem} ${styles.caseMenuItemArchive}`}
+                    disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                    title={
+                      !hasLoadedCase
+                        ? 'Load a case to archive it'
+                        : disableLongRunningCaseActions
+                          ? 'Archive is unavailable while files are uploading'
+                          : undefined
+                    }
+                    onClick={() => {
+                      onArchiveCase?.();
+                      setIsCaseMenuOpen(false);
+                    }}
+                  >
+                    Archive Case
+                  </button>
+                )}
+                <div className={styles.caseMenuSectionLabel}>Verification</div>
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.caseMenuItem} ${styles.caseMenuItemKey}`}
+                  onClick={() => {
+                    setIsPublicKeyModalOpen(true);
+                    setIsCaseMenuOpen(false);
+                  }}
+                >
+                  Verify Exports
+                </button>
+                {currentCase && (
+                  <div className={styles.caseMenuCaption}>Case: {currentCase}</div>
+                )}
+                {archiveDetails?.archived && (
+                  <div className={styles.caseArchiveDetails}>
+                    <strong>Archived Case</strong>
+                    <span>Archived At: {archiveDetails.archivedAt ? new Date(archiveDetails.archivedAt).toLocaleString() : 'Unknown'}</span>
+                    <span>
+                      Archived By (Name, ID): {archiveDetails.archivedByDisplay || archiveDetails.archivedBy || 'Unknown'}
+                      {archiveDetails.archivedByDisplay && archiveDetails.archivedBy ? ` (${archiveDetails.archivedBy})` : ''}
+                    </span>
+                    <span>Reason: {archiveDetails.archiveReason || 'Not provided'}</span>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+          <div className={styles.fileMenuContainer} ref={fileMenuRef}>
+            <button
+              type="button"
+              className={`${styles.navSectionButton} ${isFileManagementActive ? styles.navSectionButtonActive : ''}`}
+              disabled={!hasLoadedCase}
+              aria-pressed={isFileManagementActive}
+              aria-expanded={isFileMenuOpen}
+              aria-haspopup="menu"
+              onClick={() => setIsFileMenuOpen((prev) => !prev)}
+              title={!hasLoadedCase ? 'Load a case to enable file management' : undefined}
+            >
+              File Management
+            </button>
+            {isFileMenuOpen && (
+              <div className={styles.fileMenu} role="menu" aria-label="File Management actions">
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.fileMenuItem} ${styles.fileMenuItemViewAll}`}
+                  onClick={() => {
+                    onOpenViewAllFiles?.();
+                    setIsFileMenuOpen(false);
+                  }}
+                >
+                  View All Files
+                </button>
+                <div className={styles.fileMenuSectionLabel}>Selected File</div>
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.fileMenuItem} ${styles.fileMenuItemDelete}`}
+                  disabled={!canDeleteCurrentFile}
+                  title={!hasLoadedImage ? 'Load an image to delete the selected file' : isReadOnly ? 'Cannot delete files for read-only cases' : undefined}
+                  onClick={() => {
+                    onDeleteCurrentFile?.();
+                    setIsFileMenuOpen(false);
+                  }}
+                >
+                  Delete File
+                </button>
+                <div
+                  className={styles.fileMenuCaption}
+                  title={hasLoadedImage && currentFileName ? currentFileName : 'No file loaded'}
+                >
+                  File: {hasLoadedImage && currentFileName ? currentFileName : 'No file loaded'}
+                </div>
+              </div>
+            )}
+          </div>
+          <button
+            type="button"
+            className={`${styles.navSectionButton} ${isImageNotesActive ? styles.navSectionButtonActive : ''}`}
+            disabled={!canOpenImageNotes}
+            aria-pressed={isImageNotesActive}
+            title={!hasLoadedImage ? 'Load an image to enable image notes' : isCurrentImageConfirmed ? 'Confirmed images are read-only and viewable via toolbar only' : undefined}
+            onClick={() => {
+              onOpenImageNotes?.();
+            }}
+          >
+            Image Notes
+          </button>
+          <button
+            type="button"
+            onClick={() => setIsImportModalOpen(true)}
+            className={`${styles.navSectionButton} ${styles.navPrimaryButton}`}
+            disabled={isUploading}
+            title={isUploading ? 'Cannot import while uploading files' : undefined}
+          >
+            Import Case/Confirmations
+          </button>
+          </div>
+        </div>
+        <div className={styles.navActions}>
+          <button
+            type="button"
+            onClick={() => setIsProfileModalOpen(true)}
+            className={styles.navTextButton}
+            disabled={isUploading}
+            title={isUploading ? 'Cannot manage profile while uploading files' : undefined}
+          >
+            Manage Profile
+          </button>
+          <SignOut disabled={isUploading} />
+        </div>
+      </header>
+      <CaseImport
+        isOpen={isImportModalOpen}
+        onClose={() => setIsImportModalOpen(false)}
+        onImportComplete={onImportComplete}
+      />
+      <ManageProfile
+        isOpen={isProfileModalOpen}
+        onClose={() => setIsProfileModalOpen(false)}
+      />
+      <PublicSigningKeyModal
+        isOpen={isPublicKeyModalOpen}
+        onClose={() => setIsPublicKeyModalOpen(false)}
+        publicSigningKeyId={publicSigningKeyId}
+        publicKeyPem={publicKeyPem}
+      />
+    </>
+  );
+};

package/app/components/public-signing-key-modal/public-signing-key-modal.module.css

@@ -11,6 +11,7 @@
 }
 
 .modal {
+  position: relative;
   width: 100%;
   max-width: 640px;
   max-height: 90vh;

package/app/components/public-signing-key-modal/public-signing-key-modal.tsx

@@ -230,8 +230,8 @@ export const PublicSigningKeyModal = ({
   const publicKeyInputId = useId();
   const exportFileInputId = useId();
   const {
-    handleOverlayMouseDown,
-    handleOverlayKeyDown
+    overlayProps,
+    getCloseButtonProps
   } = useOverlayDismiss({
     isOpen,
     onClose
@@ -303,7 +303,7 @@ export const PublicSigningKeyModal = ({
     const lowerName = file.name.toLowerCase();
 
     if (!lowerName.endsWith('.zip') && !lowerName.endsWith('.json')) {
-      setExportFileError('Select a confirmation JSON/ZIP file or a case export ZIP file.');
+      setExportFileError('Select a confirmation JSON/ZIP file, standalone audit JSON export, or a case export ZIP file.');
       return;
     }
 
@@ -317,7 +317,7 @@ export const PublicSigningKeyModal = ({
     const hasExportFile = !!selectedExportFile;
 
     setKeyError(hasPublicKey ? '' : 'Select or download a public key PEM file first.');
-    setExportFileError(hasExportFile ? '' : 'Select a confirmation JSON/ZIP file or a case export ZIP file.');
+    setExportFileError(hasExportFile ? '' : 'Select a confirmation JSON/ZIP file, standalone audit JSON export, or a case export ZIP file.');
 
     if (!hasPublicKey || !hasExportFile || !selectedPublicKey || !selectedExportFile) {
       return;
@@ -350,18 +350,19 @@ export const PublicSigningKeyModal = ({
           return lowerName.includes('confirmation-data-') ? 'Confirmation ZIP' : 'Case export ZIP';
         }
 
-        return 'Confirmation JSON';
+        if (lowerName.includes('audit')) {
+          return 'Audit JSON';
+        }
+
+        return 'JSON export';
       })()} • ${formatFileSize(selectedExportFile.size)}`
     : undefined;
 
   return (
     <div
       className={styles.overlay}
-      onMouseDown={handleOverlayMouseDown}
-      onKeyDown={handleOverlayKeyDown}
-      role="button"
-      tabIndex={0}
       aria-label="Close public signing key dialog"
+      {...overlayProps}
     >
       <div
         className={styles.modal}
@@ -371,13 +372,11 @@ export const PublicSigningKeyModal = ({
       >
         <div className={styles.header}>
           <h3 id={publicSigningKeyTitleId} className={styles.title}>
-            Striae Public Signing Key
+            Striae Verification Utility
           </h3>
           <button
-            type="button"
             className={styles.closeButton}
-            onClick={onClose}
-            aria-label="Close public signing key dialog"
+            {...getCloseButtonProps({ ariaLabel: 'Close public signing key dialog' })}
           >
             &times;
           </button>
@@ -385,7 +384,7 @@ export const PublicSigningKeyModal = ({
 
         <div className={styles.content}>
           <p className={styles.description}>
-            Drop a public key PEM file and a Striae confirmation JSON/ZIP or case export ZIP, then run
+            Drop a public key PEM file and a Striae confirmation JSON/ZIP, standalone audit JSON export, or case export ZIP, then run
             verification directly in the browser.
           </p>
 
@@ -422,8 +421,8 @@ export const PublicSigningKeyModal = ({
               inputId={exportFileInputId}
               label="2. Confirmation File or Export ZIP"
               accept=".json,.zip"
-              emptyText="Drop a confirmation JSON/ZIP or case export ZIP here"
-              helperText="Case exports use .zip. Confirmation exports can be .json or .zip."
+              emptyText="Drop a confirmation JSON/ZIP, audit JSON, or case export ZIP here"
+              helperText="Case exports use .zip. Confirmation exports can be .json or .zip. Audit exports are supported as standalone .json files."
               selectedFileName={selectedExportFile?.name}
               selectedDescription={selectedExportDescription}
               errorMessage={exportFileError}

package/app/components/sidebar/case-export/case-export.module.css

@@ -11,6 +11,7 @@
 }
 
 .modal {
+  position: relative;
   background: var(--backgroundLight);
   border-radius: var(--spaceXS);
   width: 90%;

package/app/components/sidebar/case-export/case-export.tsx

@@ -2,8 +2,6 @@ import { useState, useEffect, useContext } from 'react';
 import styles from './case-export.module.css';
 import { AuthContext } from '~/contexts/auth.context';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
-import { PublicSigningKeyModal } from '~/components/public-signing-key-modal/public-signing-key-modal';
-import { getCurrentPublicSigningKeyDetails } from '~/utils/forensics';
 import { getCaseConfirmations, exportConfirmationData } from '../../actions/confirm-export';
 
 export type ExportFormat = 'json' | 'csv';
@@ -35,15 +33,13 @@ export const CaseExport = ({
   const [selectedFormat, setSelectedFormat] = useState<ExportFormat>('json');
   const [includeImages, setIncludeImages] = useState(false);
   const [hasConfirmationData, setHasConfirmationData] = useState(false);
-  const [isPublicKeyModalOpen, setIsPublicKeyModalOpen] = useState(false);
-  const { keyId: publicSigningKeyId, publicKeyPem } = getCurrentPublicSigningKeyDetails();
   const {
-    handleOverlayMouseDown,
-    handleOverlayKeyDown
+    requestClose,
+    overlayProps,
+    getCloseButtonProps
   } = useOverlayDismiss({
     isOpen,
     onClose,
-    canDismiss: !isPublicKeyModalOpen
   });
 
   // Update caseNumber when currentCaseNumber prop changes
@@ -103,12 +99,6 @@ export const CaseExport = ({
     }
   }, [isReadOnly]);
 
-  useEffect(() => {
-    if (!isOpen) {
-      setIsPublicKeyModalOpen(false);
-    }
-  }, [isOpen]);
-
   if (!isOpen) return null;
 
   const handleExport = async () => {
@@ -125,7 +115,7 @@ export const CaseExport = ({
       await onExport(caseNumber.trim(), selectedFormat, includeImages, (progress, label) => {
         setExportProgress({ current: progress, total: 100, caseName: label, mode: 'single' });
       });
-      onClose();
+      requestClose();
     } catch (error) {
       console.error('Export failed:', error);
       setError(error instanceof Error ? error.message : 'Export failed. Please try again.');
@@ -144,7 +134,7 @@ export const CaseExport = ({
       await onExportAll((current: number, total: number, caseName: string) => {
         setExportProgress({ current, total, caseName });
       }, selectedFormat);
-      onClose();
+      requestClose();
     } catch (error) {
       console.error('Export all failed:', error);
       setError(error instanceof Error ? error.message : 'Export all cases failed. Please try again.');
@@ -165,7 +155,7 @@ export const CaseExport = ({
     
     try {
       await exportConfirmationData(user, caseNumber.trim());
-      onClose();
+      requestClose();
     } catch (error) {
       console.error('Confirmation export failed:', error);
       setError(error instanceof Error ? error.message : 'Confirmation export failed. Please try again.');
@@ -177,20 +167,13 @@ export const CaseExport = ({
   return (
     <div
       className={styles.overlay}
-      onMouseDown={handleOverlayMouseDown}
-      onKeyDown={handleOverlayKeyDown}
-      role="button"
-      tabIndex={0}
       aria-label="Close case export dialog"
+      {...overlayProps}
     >
       <div className={styles.modal}>
         <div className={styles.header}>
           <h2 className={styles.title}>Export Case Data</h2>
-          <button 
-            className={styles.closeButton}
-            onClick={onClose}
-            aria-label="Close modal"
-          >
+          <button className={styles.closeButton} {...getCloseButtonProps({ ariaLabel: 'Close case export dialog' })}>
             ×
           </button>
         </div>
@@ -313,20 +296,6 @@ export const CaseExport = ({
                 </div>
               </div>
             )}
-
-            <div className={styles.divider}>
-              <span>Verification</span>
-            </div>
-
-            <div className={styles.publicKeySection}>
-              <button
-                type="button"
-                className={styles.publicKeyButton}
-                onClick={() => setIsPublicKeyModalOpen(true)}
-              >
-                View Public Signing Key
-              </button>
-            </div>
             
             {error && (
               <div className={styles.error}>
@@ -336,13 +305,6 @@ export const CaseExport = ({
           </div>
         </div>
       </div>
-
-      <PublicSigningKeyModal
-        isOpen={isPublicKeyModalOpen}
-        onClose={() => setIsPublicKeyModalOpen(false)}
-        publicSigningKeyId={publicSigningKeyId}
-        publicKeyPem={publicKeyPem}
-      />
     </div>
   );
 };

package/app/components/sidebar/case-import/case-import.module.css

@@ -11,6 +11,7 @@
 }
 
 .modal {
+  position: relative;
   background: var(--backgroundLight);
   border-radius: var(--spaceXS);
   width: 90%;
@@ -424,6 +425,28 @@
   color: var(--textTitle);
 }
 
+.archivedImportNote {
+  margin-bottom: var(--spaceM);
+  padding: var(--spaceS) var(--spaceM);
+  border-radius: var(--spaceXS);
+  background: color-mix(in lab, var(--success) 10%, transparent);
+  border: 1px solid color-mix(in lab, var(--success) 25%, transparent);
+  color: color-mix(in lab, var(--success) 80%, var(--black));
+  font-size: var(--fontSizeBodyXS);
+  font-weight: var(--fontWeightMedium);
+}
+
+.archivedRegularCaseRiskNote {
+  margin-bottom: var(--spaceM);
+  padding: var(--spaceS) var(--spaceM);
+  border-radius: var(--spaceXS);
+  background: color-mix(in lab, var(--warning) 12%, transparent);
+  border: 1px solid color-mix(in lab, var(--warning) 30%, transparent);
+  color: color-mix(in lab, var(--warning) 85%, var(--black));
+  font-size: var(--fontSizeBodyXS);
+  font-weight: var(--fontWeightMedium);
+}
+
 /* Validation Section - Green/Red Based on Status */
 .validationSection {
   border-radius: var(--spaceXS);