fix(clerk-js): Removing hoverable state from no-interactive sections in UP

.changeset/two-bugs-relate.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Removed hoverable state from no-interactive sections in `<UserProfile/>`

packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx

@@ -56,7 +56,6 @@ const DeviceItem = ({ session }: { session: SessionWithActivitiesResource }) =>
       id='activeDevices'
       elementDescriptor={descriptors.activeDeviceListItem}
       elementId={isCurrent ? descriptors.activeDeviceListItem.setId('current') : undefined}
-      hoverable
       sx={{
         alignItems: 'flex-start',
       }}

packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx

@@ -61,10 +61,7 @@ export const ConnectedAccountsSection = withCardStateProvider(() => {
 
             return (
               <Action.Root key={account.id}>
-                <ProfileSection.Item
-                  id='connectedAccounts'
-                  hoverable
-                >
+                <ProfileSection.Item id='connectedAccounts'>
                   <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$2 })}>
                     <Image
                       elementDescriptor={[descriptors.providerIcon]}

packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx

@@ -48,10 +48,7 @@ export const EmailsSection = () => {
         <ProfileSection.ItemList id='emailAddresses'>
           {sortIdentificationBasedOnVerification(user?.emailAddresses, user?.primaryEmailAddressId).map(email => (
             <Action.Root key={email.emailAddress}>
-              <ProfileSection.Item
-                id='emailAddresses'
-                hoverable
-              >
+              <ProfileSection.Item id='emailAddresses'>
                 <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$1 })}>
                   <Text
                     sx={t => ({ color: t.colors.$colorText })}

packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx

@@ -28,7 +28,6 @@ export const EnterpriseAccountsSection = () => {
                 gap: t.space.$2,
                 justifyContent: 'start',
               })}
-              hoverable
               key={account.id}
             >
               <Image

packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx

@@ -49,10 +49,7 @@ export const PhoneSection = () => {
           {sortIdentificationBasedOnVerification(user?.phoneNumbers, user?.primaryPhoneNumberId).map(phone => (
             <Action.Root key={phone.id}>
               <Action.Closed value=''>
-                <ProfileSection.Item
-                  id='phoneNumbers'
-                  hoverable
-                >
+                <ProfileSection.Item id='phoneNumbers'>
                   <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                     <Flex
                       gap={2}

packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx

@@ -45,7 +45,6 @@ export const Web3Section = withCardStateProvider(() => {
                       key={wallet.id}
                       id='web3Wallets'
                       align='start'
-                      hoverable
                     >
                       <Flex sx={t => ({ alignItems: 'center', gap: t.space.$2, width: '100%' })}>
                         {strategyToDisplayData[strategy].iconUrl && (