keybase · chrisnojima · Jun 1, 2026 · Jun 1, 2026
diff --git a/shared/app/global-errors.tsx b/shared/app/global-errors.tsx
@@ -213,7 +213,7 @@ const GlobalError = () => {
   }
 
   return (
-    <Kb.ClickableBox3 style={stylesContainer} onClick={onExpandClick} direction="vertical">
+    <Kb.ClickableBox style={stylesContainer} onClick={onExpandClick} direction="vertical">
       <Kb.Box2 direction="horizontal" flex={1} style={styles.innerContainer}>
         <Kb.Text center={true} type="BodyBig" style={styles.summary}>
           {summary}
@@ -239,7 +239,7 @@ const GlobalError = () => {
           {details}
         </Kb.Text>
       </Kb.ScrollView>
-    </Kb.ClickableBox3>
+    </Kb.ClickableBox>
   )
 }
 

diff --git a/shared/app/runtime-stats.tsx b/shared/app/runtime-stats.tsx
@@ -226,7 +226,7 @@ const RuntimeStatsDesktop = ({stats}: Props) => {
   return (
     <>
       <Kb.BoxGrow style={styles.boxGrow}>
-        <Kb.ClickableBox3 onClick={() => setMoreLogs(m => !m)} direction="vertical" style={styles.container} gap="xxtiny" fullWidth={true}>
+        <Kb.ClickableBox onClick={() => setMoreLogs(m => !m)} direction="vertical" style={styles.container} gap="xxtiny" fullWidth={true}>
             {!moreLogs &&
               stats.processStats?.map((stat, i) => {
                 return (
@@ -302,7 +302,7 @@ const RuntimeStatsDesktop = ({stats}: Props) => {
               <Kb.Box style={styles.radarContainer} forwardedRef={refContainer} onClick={toggleRadar} />
             )*/}
             <LogStats num={moreLogs ? 25 : 5} />
-        </Kb.ClickableBox3>
+        </Kb.ClickableBox>
       </Kb.BoxGrow>
     </>
   )
@@ -331,9 +331,9 @@ const RuntimeStatsMobile = ({stats}: Props) => {
         style={showLogs ? styles.modalLogStats : styles.modalLogStatsHidden}
         gap="xtiny"
       >
-        <Kb.ClickableBox3 onClick={() => setShowLogs(s => !s)} direction="vertical">
+        <Kb.ClickableBox onClick={() => setShowLogs(s => !s)} direction="vertical">
           <LogStats />
-        </Kb.ClickableBox3>
+        </Kb.ClickableBox>
       </Kb.Box2>
       <Kb.Box2 direction="horizontal" style={styles.container} gap="xtiny" pointerEvents="none">
         {processStat && (

diff --git a/shared/chat/audio/audio-player.tsx b/shared/chat/audio/audio-player.tsx
@@ -98,13 +98,13 @@ const AudioPlayer = (props: Props) => {
       style={Kb.Styles.collapseStyles([styles.container, {height: big ? 56 : 40}])}
       gap="tiny"
     >
-      <Kb.ClickableBox3 direction="vertical" justifyContent="center" onClick={url ? onClick : undefined}>
+      <Kb.ClickableBox direction="vertical" justifyContent="center" onClick={url ? onClick : undefined}>
         <Kb.Icon
           type={!paused ? 'iconfont-pause' : 'iconfont-play'}
           fontSize={32}
           color={url ? Kb.Styles.globalColors.blue : Kb.Styles.globalColors.grey}
         />
-      </Kb.ClickableBox3>
+      </Kb.ClickableBox>
       <Kb.Box2 direction="vertical" alignItems="flex-start" style={styles.visContainer} gap="xxtiny" fullHeight={true} justifyContent="flex-end">
         <AudioVis height={big ? 32 : 18} amps={visAmps} maxWidth={maxWidth} playedRatio={playedRatio} />
         <Kb.Text type="BodyTiny">{formatAudioRecordDuration(timeLeft)}</Kb.Text>

diff --git a/shared/chat/conversation/attachment-fullscreen/index.tsx b/shared/chat/conversation/attachment-fullscreen/index.tsx
@@ -31,7 +31,7 @@ type ArrowProps = {
 const Arrow = (props: ArrowProps) => {
   const {left, onClick} = props
   return (
-    <Kb.ClickableBox3
+    <Kb.ClickableBox
       direction="vertical"
       centerChildren={true}
       className="hover_background_color_black background_color_black_50 fade-background-color"
@@ -50,7 +50,7 @@ const Arrow = (props: ArrowProps) => {
         color={Kb.Styles.globalColors.white}
         style={Kb.Styles.collapseStyles([styles.arrow, left && styles.arrowLeft, !left && styles.arrowRight])}
       />
-    </Kb.ClickableBox3>
+    </Kb.ClickableBox>
   )
 }
 

diff --git a/shared/chat/conversation/attachment-get-titles.tsx b/shared/chat/conversation/attachment-get-titles.tsx
@@ -198,7 +198,7 @@ const ContainerInner = (ownProps: OwnProps) => {
   return (
     <>
       <Kb.Box2 alignItems="center" direction="vertical" fullWidth={true} style={styles.container}>
-        <Kb.ClickableBox3 direction="vertical" fullWidth={true} alignItems="center" style={styles.container2} onClick={() => inputRef.current?.blur()}>
+        <Kb.ClickableBox direction="vertical" fullWidth={true} alignItems="center" style={styles.container2} onClick={() => inputRef.current?.blur()}>
           <Kb.BoxGrow style={styles.boxGrow}>{preview}</Kb.BoxGrow>
           {pathAndInfos.length > 0 && !isMobile && (
             <Kb.Box2 direction="vertical" style={styles.filename}>
@@ -227,7 +227,7 @@ const ContainerInner = (ownProps: OwnProps) => {
               inputStyle={styles.input}
             />
           </Kb.Box2>
-        </Kb.ClickableBox3>
+        </Kb.ClickableBox>
         <Kb.ButtonBar fullWidth={true} small={true} style={styles.buttonContainer}>
           {!isMobile && <Kb.Button fullWidth={true} type="Dim" onClick={onCancel} label="Cancel" />}
           {isLast ? (

diff --git a/shared/chat/conversation/bot/team-picker.tsx b/shared/chat/conversation/bot/team-picker.tsx
@@ -44,7 +44,7 @@ const BotTeamPicker = (props: Props) => {
   }
   const renderResult = (index: number, item: T.RPCChat.ConvSearchHit) => {
     return (
-      <Kb.ClickableBox3 key={index} onClick={() => onSelect(item.convID)} direction="horizontal" fullWidth={true} gap="tiny" style={styles.results}>
+      <Kb.ClickableBox key={index} onClick={() => onSelect(item.convID)} direction="horizontal" fullWidth={true} gap="tiny" style={styles.results}>
         {item.isTeam ? (
           <TeamAvatar isHovered={false} isMuted={false} isSelected={false} teamname={item.name} />
         ) : (
@@ -53,7 +53,7 @@ const BotTeamPicker = (props: Props) => {
         <Kb.Text type="Body" style={{alignSelf: 'center'}}>
           {item.name}
         </Kb.Text>
-      </Kb.ClickableBox3>
+      </Kb.ClickableBox>
     )
   }
   return (

diff --git a/shared/chat/conversation/fwd-msg.tsx b/shared/chat/conversation/fwd-msg.tsx
@@ -159,7 +159,7 @@ const TeamPickerInner = (props: Props) => {
 
   const renderResult = (index: number, item: T.RPCChat.ConvSearchHit) => {
     return (
-      <Kb.ClickableBox3 key={index} onClick={() => onSelect(item.convID)} direction="horizontal" fullWidth={true} gap="tiny" style={styles.results}>
+      <Kb.ClickableBox key={index} onClick={() => onSelect(item.convID)} direction="horizontal" fullWidth={true} gap="tiny" style={styles.results}>
         {item.isTeam ? (
           <TeamAvatar
             isHovered={false}
@@ -173,7 +173,7 @@ const TeamPickerInner = (props: Props) => {
         <Kb.Text type="Body" style={{alignSelf: 'center'}}>
           {item.name}
         </Kb.Text>
-      </Kb.ClickableBox3>
+      </Kb.ClickableBox>
     )
   }
 

diff --git a/shared/chat/conversation/info-panel/attachments.tsx b/shared/chat/conversation/info-panel/attachments.tsx
@@ -188,7 +188,7 @@ const MediaThumb = (props: MediaThumbProps) => {
   const {sizing, thumb} = props
   return (
     <Kb.Box2 direction="vertical" relative={true} overflow="hidden">
-      <Kb.ClickableBox3 direction="vertical" onClick={thumb.onClick} style={{...sizing.margins}}>
+      <Kb.ClickableBox direction="vertical" onClick={thumb.onClick} style={{...sizing.margins}}>
         {thumb.typ === ThumbTyp.AUDIO ? (
           <Kb.Box2 direction="vertical" style={{...sizing.dims}} centerChildren={true} gap="xtiny">
             <Kb.Box2 direction="vertical" centerChildren={true} style={styles.audioBackground}>
@@ -206,7 +206,7 @@ const MediaThumb = (props: MediaThumbProps) => {
         ) : (
           <Kb.Image src={thumb.previewURL} style={{...sizing.dims}} />
         )}
-      </Kb.ClickableBox3>
+      </Kb.ClickableBox>
       {thumb.typ === ThumbTyp.VIDEO && (
         <Kb.Box2 direction="vertical" style={styles.durationContainer}>
           <Kb.ImageIcon type="icon-film-64" style={styles.filmIcon} />
@@ -231,7 +231,7 @@ const DocViewRow = (props: DocViewRowProps) => {
   })
   return (
     <Kb.Box2 direction="vertical" fullWidth={true}>
-      <Kb.ClickableBox3 direction="horizontal" fullWidth={true} style={styles.docRowContainer} gap="xtiny" onClick={item.onClick} onLongPress={hasMessageID ? showPopup : undefined}>
+      <Kb.ClickableBox direction="horizontal" fullWidth={true} style={styles.docRowContainer} gap="xtiny" onClick={item.onClick} onLongPress={hasMessageID ? showPopup : undefined}>
         <Kb.ImageIcon type="icon-file-32" style={styles.docIcon} />
         <Kb.Box2 direction="vertical" fullWidth={true} style={styles.docRowTitle}>
           <Kb.Text type="BodySemibold">{item.name}</Kb.Text>
@@ -240,7 +240,7 @@ const DocViewRow = (props: DocViewRowProps) => {
             Sent by {item.author} • {formatTimeForMessages(item.ctime)}
           </Kb.Text>
         </Kb.Box2>
-      </Kb.ClickableBox3>
+      </Kb.ClickableBox>
       {item.downloading && (
         <Kb.Box2 direction="horizontal" style={styles.docBottom} fullWidth={true} gap="tiny">
           <Kb.Text type="BodySmall">Downloading...</Kb.Text>
@@ -271,7 +271,7 @@ const getColor = (selected: boolean) =>
 
 const AttachmentTypeSelector = (props: SelectorProps) => (
   <Kb.Box2 alignSelf="center" direction="horizontal" style={styles.selectorContainer} fullWidth={true}>
-    <Kb.ClickableBox3
+    <Kb.ClickableBox
       direction="vertical"
       centerChildren={true}
       flex={1}
@@ -285,8 +285,8 @@ const AttachmentTypeSelector = (props: SelectorProps) => (
       <Kb.Text type="BodySemibold" style={getColor(props.selectedView === T.RPCChat.GalleryItemTyp.media)}>
         Media
       </Kb.Text>
-    </Kb.ClickableBox3>
-    <Kb.ClickableBox3
+    </Kb.ClickableBox>
+    <Kb.ClickableBox
       direction="vertical"
       centerChildren={true}
       flex={1}
@@ -300,8 +300,8 @@ const AttachmentTypeSelector = (props: SelectorProps) => (
       <Kb.Text type="BodySemibold" style={getColor(props.selectedView === T.RPCChat.GalleryItemTyp.doc)}>
         Docs
       </Kb.Text>
-    </Kb.ClickableBox3>
-    <Kb.ClickableBox3
+    </Kb.ClickableBox>
+    <Kb.ClickableBox
       direction="vertical"
       centerChildren={true}
       flex={1}
@@ -315,7 +315,7 @@ const AttachmentTypeSelector = (props: SelectorProps) => (
       <Kb.Text type="BodySemibold" style={getColor(props.selectedView === T.RPCChat.GalleryItemTyp.link)}>
         Links
       </Kb.Text>
-    </Kb.ClickableBox3>
+    </Kb.ClickableBox>
   </Kb.Box2>
 )
 
@@ -916,7 +916,7 @@ export const useAttachmentSections = (
             key: month.key,
             renderItem: ({item}: {item: Item}) => {
               return item.type === 'link' ? (
-                <Kb.ClickableBox3
+                <Kb.ClickableBox
                   direction="vertical"
                   fullWidth={true}
                   style={styles.linkContainer}
@@ -950,7 +950,7 @@ export const useAttachmentSections = (
                   </Kb.Box2>
                   {!!item.title && <LinkTitle title={item.title} url={item.url} />}
                   <Kb.Divider />
-                </Kb.ClickableBox3>
+                </Kb.ClickableBox>
               ) : null
             },
             renderSectionHeader: () => <Kb.SectionDivider label={`${month.month} ${month.year}`} />,

diff --git a/shared/chat/conversation/info-panel/settings/min-writer-role.tsx b/shared/chat/conversation/info-panel/settings/min-writer-role.tsx
@@ -140,7 +140,7 @@ const Dropdown = (p: DropdownProps) => {
   ])
   return (
     <>
-      <Kb.ClickableBox3
+      <Kb.ClickableBox
         direction="horizontal"
         alignItems="center"
         style={styles.dropdown}
@@ -151,7 +151,7 @@ const Dropdown = (p: DropdownProps) => {
           <Kb.Text type="BodySemibold">{upperFirst(minWriterRole)}</Kb.Text>
         </Kb.Box2>
         <Kb.Icon type="iconfont-caret-down" color="inherit" fontSize={7} sizeType="Tiny" />
-      </Kb.ClickableBox3>
+      </Kb.ClickableBox>
       {popup}
       <Kb.SaveIndicator saving={saving} style={saveIndicatorStyle} />
     </>

diff --git a/shared/chat/conversation/input-area/normal/input.tsx b/shared/chat/conversation/input-area/normal/input.tsx
@@ -463,7 +463,7 @@ const ExplodingButton = function ExplodingButton(p: ExplodingButtonProps) {
   const {popup, popupAnchor, showingPopup, showPopup} = Kb.usePopup2(makePopup)
 
   return (
-    <Kb.ClickableBox3
+    <Kb.ClickableBox
       direction="vertical"
       alignItems="center"
       justifyContent="flex-end"
@@ -497,7 +497,7 @@ const ExplodingButton = function ExplodingButton(p: ExplodingButtonProps) {
           />
         )}
       </Kb.Box2>
-    </Kb.ClickableBox3>
+    </Kb.ClickableBox>
   )
 }
 
@@ -986,7 +986,7 @@ const NativeButtons = function NativeButtons(p: NativeButtonsProps) {
   }
 
   const explodingIcon = !isEditing && !cannotWrite && (
-    <Kb.ClickableBox3 direction="vertical" centerChildren={true} style={nativeStyles.explodingWrapper} onClick={toggleShowingMenu}>
+    <Kb.ClickableBox direction="vertical" centerChildren={true} style={nativeStyles.explodingWrapper} onClick={toggleShowingMenu}>
       {isExploding ? (
         <Kb.Box2 direction="horizontal" style={nativeStyles.exploding} centerChildren={true}>
           <Kb.Text type="BodyTinyBold" negative={true} style={nativeStyles.explodingText}>
@@ -996,7 +996,7 @@ const NativeButtons = function NativeButtons(p: NativeButtonsProps) {
       ) : (
         <Kb.Icon color={undefined} type="iconfont-timer" />
       )}
-    </Kb.ClickableBox3>
+    </Kb.ClickableBox>
   )
 
   return (
@@ -1065,14 +1065,14 @@ const NativeAnimatedExpand = (() => {
       }, [expanded, offset])
 
       return (
-        <Kb.ClickableBox3 direction="vertical" relative={true} onClick={expandInput} style={nativeStyles.iconContainer}>
+        <Kb.ClickableBox direction="vertical" relative={true} onClick={expandInput} style={nativeStyles.iconContainer}>
           <Animated.View style={[nativeStyles.iconTop, topStyle]} pointerEvents="none">
             <Kb.Icon type="iconfont-arrow-full-up" fontSize={18} color={Kb.Styles.globalColors.black_35} />
           </Animated.View>
           <Animated.View style={[nativeStyles.iconBottom, bottomStyle]} pointerEvents="none">
             <Kb.Icon type="iconfont-arrow-full-up" fontSize={18} color={Kb.Styles.globalColors.black_35} />
           </Animated.View>
-        </Kb.ClickableBox3>
+        </Kb.ClickableBox>
       )
     }
   }

diff --git a/shared/chat/conversation/input-area/suggestors/common.tsx b/shared/chat/conversation/input-area/suggestors/common.tsx
@@ -61,9 +61,9 @@ export function List<T>(p: ListProps<T>) {
   const [selectedIndex, setSelectedIndex] = React.useState(0)
 
   const renderItem = (idx: number, item: T) => (
-    <Kb.ClickableBox3 direction="vertical" fullWidth={true} key={keyExtractor(item, idx)} onClick={() => onSelected(item, true)}>
+    <Kb.ClickableBox direction="vertical" fullWidth={true} key={keyExtractor(item, idx)} onClick={() => onSelected(item, true)}>
       <ItemRenderer selected={idx === selectedIndex} item={item} />
-    </Kb.ClickableBox3>
+    </Kb.ClickableBox>
   )
 
   const lastSelectedIndex = React.useRef(selectedIndex)

diff --git a/shared/chat/conversation/messages/attachment/file.tsx b/shared/chat/conversation/messages/attachment/file.tsx
@@ -109,7 +109,7 @@ function FileContainer(p: OwnProps) {
     : undefined
 
   return (
-    <Kb.ClickableBox3 direction="vertical" fullWidth={true} onLongPress={showMessageMenu} onClick={hasMessageID ? onDownload : undefined}>
+    <Kb.ClickableBox direction="vertical" fullWidth={true} onLongPress={showMessageMenu} onClick={hasMessageID ? onDownload : undefined}>
       <ShowToastAfterSaving transferState={transferState} />
       <Kb.Box2
         direction="vertical"
@@ -197,7 +197,7 @@ function FileContainer(p: OwnProps) {
           </Kb.Text>
         )}
       </Kb.Box2>
-    </Kb.ClickableBox3>
+    </Kb.ClickableBox>
   )
 }
 

diff --git a/shared/chat/conversation/messages/attachment/image/index.tsx b/shared/chat/conversation/messages/attachment/image/index.tsx
@@ -64,15 +64,15 @@ function Image(p: Props) {
           gap="xxtiny"
         >
           <ShowToastAfterSaving transferState={transferState} toastTargetRef={toastTargetRef} />
-          <Kb.ClickableBox3
+          <Kb.ClickableBox
             direction="vertical"
             onClick={openFullscreen}
             onLongPress={hasMessageID ? showPopup : undefined}
             style={styles.imageContainer}
             ref={toastTargetRef}
           >
             <ImageImpl message={message} />
-          </Kb.ClickableBox3>
+          </Kb.ClickableBox>
           {showTitle ? <Title message={message} /> : null}
           <Transferring transferState={transferState} ratio={transferProgress} />
         </Kb.Box2>

diff --git a/shared/chat/conversation/messages/attachment/shared.tsx b/shared/chat/conversation/messages/attachment/shared.tsx
@@ -279,9 +279,9 @@ const useCollapseAction = (ordinal: T.Chat.Ordinal) => {
 const useCollapseIconDesktop = (ordinal: T.Chat.Ordinal, isCollapsed: boolean, isWhite: boolean) => {
   const onCollapse = useCollapseAction(ordinal)
   return (
-    <Kb.ClickableBox3 direction="horizontal" alignSelf="flex-start" gap="xtiny" onClick={onCollapse}>
+    <Kb.ClickableBox direction="horizontal" alignSelf="flex-start" gap="xtiny" onClick={onCollapse}>
       <CollapseIcon isCollapsed={isCollapsed} isWhite={isWhite} />
-    </Kb.ClickableBox3>
+    </Kb.ClickableBox>
   )
 }
 const useCollapseIconMobile = (_ordinal: T.Chat.Ordinal, _isCollapsed: boolean, _isWhite: boolean) => null

diff --git a/shared/chat/conversation/messages/cards/make-team.tsx b/shared/chat/conversation/messages/cards/make-team.tsx
@@ -12,7 +12,7 @@ const MakeTeam = () => {
         <Kb.Text type="BodySmallSemibold" style={styles.header} negative={true}>
           {"Make it a team? You'll be able to add and delete members as you wish."}
         </Kb.Text>
-        <Kb.ClickableBox3 onClick={onShowNewTeamDialog} direction="horizontal" alignItems="center" fullWidth={true} className="hover_container" gap="xtiny">
+        <Kb.ClickableBox onClick={onShowNewTeamDialog} direction="horizontal" alignItems="center" fullWidth={true} className="hover_container" gap="xtiny">
           <Kb.Text
             type="BodySmallSemiboldPrimaryLink"
             style={styles.link}
@@ -27,7 +27,7 @@ const MakeTeam = () => {
             className="hover_contained_color_white"
             style={styles.icon}
           />
-        </Kb.ClickableBox3>
+        </Kb.ClickableBox>
       </Kb.Box2>
       <Kb.ImageIcon type="icon-illustration-teams-80" style={styles.image} />
     </Kb.Box2>

diff --git a/shared/chat/conversation/messages/cards/new-chat.tsx b/shared/chat/conversation/messages/cards/new-chat.tsx
@@ -43,7 +43,7 @@ function NewCard(outerProps: Props) {
         <Kb.Text type="BodySmallSemibold" style={styles.header} negative={true}>
           {props.text}
         </Kb.Text>
-        <Kb.ClickableBox3 onClick={props.action} direction="horizontal" alignItems="center" fullWidth={true} className="hover_container" gap="xtiny">
+        <Kb.ClickableBox onClick={props.action} direction="horizontal" alignItems="center" fullWidth={true} className="hover_container" gap="xtiny">
           <Kb.Text
             type="BodySmallSemiboldPrimaryLink"
             style={styles.link}
@@ -58,7 +58,7 @@ function NewCard(outerProps: Props) {
             className="hover_contained_color_white"
             style={styles.icon}
           />
-        </Kb.ClickableBox3>
+        </Kb.ClickableBox>
       </Kb.Box2>
       <Kb.ImageIcon
         type={props.icon}