[WIP] Encryption for secure values (#183)

src-web/components/core/Checkbox.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { type ReactNode } from 'react';
 import { Icon } from './Icon';
+import { IconTooltip } from './IconTooltip';
 import { HStack } from './Stacks';
 
 export interface CheckboxProps {
@@ -12,6 +13,7 @@ export interface CheckboxProps {
   inputWrapperClassName?: string;
   hideLabel?: boolean;
   fullWidth?: boolean;
+  help?: ReactNode;
 }
 
 export function Checkbox({
@@ -23,9 +25,15 @@ export function Checkbox({
   title,
   hideLabel,
   fullWidth,
+  help,
 }: CheckboxProps) {
   return (
-    <HStack as="label" space={2} className={classNames(className, 'text-text mr-auto')}>
+    <HStack
+      as="label"
+      alignItems="center"
+      space={2}
+      className={classNames(className, 'text-text mr-auto')}
+    >
       <div className={classNames(inputWrapperClassName, 'x-theme-input', 'relative flex')}>
         <input
           aria-hidden
@@ -51,6 +59,7 @@ export function Checkbox({
       <div className={classNames(fullWidth && 'w-full', disabled && 'opacity-disabled')}>
         {!hideLabel && title}
       </div>
+      {help && <IconTooltip content={help} />}
     </HStack>
   );
 }