Work required to support the JWT plugin

src-web/components/core/Input.tsx

@@ -42,7 +42,7 @@ export type InputProps = Pick<
   className?: string;
   placeholder?: string;
   validate?: boolean | ((v: string) => boolean);
-  require?: boolean;
+  required?: boolean;
   wrapLines?: boolean;
   stateKey: EditorProps['stateKey'];
 };
@@ -65,7 +65,7 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
     onPaste,
     onPasteOverwrite,
     placeholder,
-    require,
+    required,
     rightSlot,
     wrapLines,
     size = 'md',
@@ -102,11 +102,11 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
   );
 
   const isValid = useMemo(() => {
-    if (require && !validateRequire(currentValue)) return false;
+    if (required && !validateRequire(currentValue)) return false;
     if (typeof validate === 'boolean') return validate;
     if (typeof validate === 'function' && !validate(currentValue)) return false;
     return true;
-  }, [require, currentValue, validate]);
+  }, [required, currentValue, validate]);
 
   const handleChange = useCallback(
     (value: string) => {
@@ -141,7 +141,11 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
         labelPosition === 'top' && 'flex-row gap-0.5',
       )}
     >
-      <Label htmlFor={id.current} className={classNames(labelClassName, hideLabel && 'sr-only')}>
+      <Label
+        htmlFor={id.current}
+        optional={!required}
+        className={classNames(labelClassName, hideLabel && 'sr-only')}
+      >
         {label}
       </Label>
       <HStack