diff --git a/packages/ui/src/components/APIKeys/CreateAPIKeyForm.tsx b/packages/ui/src/components/APIKeys/CreateAPIKeyForm.tsx
index 4b2caa80c1c..f4bd28ea57d 100644
--- a/packages/ui/src/components/APIKeys/CreateAPIKeyForm.tsx
+++ b/packages/ui/src/components/APIKeys/CreateAPIKeyForm.tsx
@@ -8,7 +8,6 @@ import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
-import { ChevronUpDown } from '@/ui/icons';
 import { mqu } from '@/ui/styledSystem';
 import { useFormControl } from '@/ui/utils/useFormControl';
 
@@ -99,7 +98,6 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
     >
       <SelectButton
         ref={buttonRef}
-        icon={ChevronUpDown}
         sx={t => ({
           justifyContent: 'space-between',
           backgroundColor: t.colors.$colorBackground,
@@ -107,12 +105,7 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
         aria-labelledby='expiration-field'
         id='expiration-field'
       />
-      <SelectOptionList
-        sx={t => ({
-          paddingBlock: t.space.$1,
-          color: t.colors.$colorForeground,
-        })}
-      />
+      <SelectOptionList />
     </Select>
   );
 };
diff --git a/packages/ui/src/components/Checkout/CheckoutForm.tsx b/packages/ui/src/components/Checkout/CheckoutForm.tsx
index 2a6dc9c4122..2c794a8bf4a 100644
--- a/packages/ui/src/components/Checkout/CheckoutForm.tsx
+++ b/packages/ui/src/components/Checkout/CheckoutForm.tsx
@@ -15,7 +15,7 @@ import { handleError } from '@/ui/utils/errorHandler';
 import { DevOnly } from '../../common/DevOnly';
 import { useCheckoutContext, usePaymentMethods } from '../../contexts';
 import { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables';
-import { ChevronUpDown, InformationCircle } from '../../icons';
+import { InformationCircle } from '../../icons';
 import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
 import * as AddPaymentMethod from '../PaymentMethods/AddPaymentMethod';
 import { PaymentMethodRow } from '../PaymentMethods/PaymentMethodRow';
@@ -496,7 +496,6 @@ const ExistingPaymentMethodForm = withCardStateProvider(
               value={selectedPaymentMethod?.id}
             />
             <SelectButton
-              icon={ChevronUpDown}
               sx={t => ({
                 justifyContent: 'space-between',
                 backgroundColor: t.colors.$colorBackground,
@@ -504,12 +503,7 @@ const ExistingPaymentMethodForm = withCardStateProvider(
             >
               {selectedPaymentMethod && <PaymentMethodRow paymentMethod={selectedPaymentMethod} />}
             </SelectButton>
-            <SelectOptionList
-              sx={t => ({
-                paddingBlock: t.space.$1,
-                color: t.colors.$colorForeground,
-              })}
-            />
+            <SelectOptionList />
           </Select>
         ) : (
           <input
diff --git a/packages/ui/src/components/OAuthConsent/OrgSelect.tsx b/packages/ui/src/components/OAuthConsent/OrgSelect.tsx
index 5579f3c3de0..5a32e055cbf 100644
--- a/packages/ui/src/components/OAuthConsent/OrgSelect.tsx
+++ b/packages/ui/src/components/OAuthConsent/OrgSelect.tsx
@@ -1,11 +1,9 @@
 import { useRef } from 'react';
 
 import { InfiniteListSpinner } from '@/ui/common/InfiniteListSpinner';
-import { Box, Icon, Image, Text } from '@/ui/customizables';
-import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
+import { Image, Text } from '@/ui/customizables';
+import { Select, SelectButton, SelectOption, SelectOptionList } from '@/ui/elements/Select';
 import { useInView } from '@/ui/hooks/useInView';
-import { Check } from '@/ui/icons';
-import { common } from '@/ui/styledSystem';
 
 export type OrgOption = {
   value: string;
@@ -40,50 +38,13 @@ export function OrgSelect({ options, value, onChange, hasMore, onLoadMore }: Org
       onChange={option => onChange(option.value)}
       referenceElement={buttonRef}
       renderOption={(option, _index, isSelected) => (
-        <Box
-          as='span'
-          sx={theme => ({
-            width: '100%',
-            display: 'grid',
-            gridTemplateColumns: `${theme.sizes.$5} 1fr ${theme.sizes.$3}`,
-            columnGap: theme.space.$2,
-            paddingInlineStart: theme.space.$1,
-            paddingInlineEnd: theme.space.$1x5,
-            paddingBlock: theme.space.$1,
-            alignItems: 'center',
-            borderRadius: theme.radii.$md,
-            '&:hover, &[data-focused="true"]': {
-              background: common.mutedBackground(theme),
-            },
-          })}
-        >
-          <Image
+        <SelectOption isSelected={isSelected}>
+          <SelectOption.Image
             src={option.logoUrl}
             alt={option.label}
-            sx={theme => ({
-              width: theme.sizes.$5,
-              height: theme.sizes.$5,
-              objectFit: 'contain',
-              flexShrink: 0,
-              borderRadius: theme.radii.$md,
-            })}
           />
-          <Text
-            sx={{ flex: 1, textAlign: 'start', minWidth: 0, maxInlineSize: '200px' }}
-            truncate
-            as='span'
-            variant='subtitle'
-          >
-            {option.label}
-          </Text>
-          {isSelected && (
-            <Icon
-              icon={Check}
-              size='sm'
-              sx={theme => ({ color: theme.colors.$primary500 })}
-            />
-          )}
-        </Box>
+          <SelectOption.Label>{option.label}</SelectOption.Label>
+        </SelectOption>
       )}
     >
       <SelectButton
diff --git a/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx b/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx
index 3a2587192c5..0590a4cea4e 100644
--- a/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx
+++ b/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx
@@ -1,7 +1,7 @@
-import React, { memo, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { Pagination } from '@/ui/elements/Pagination';
-import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
+import { Select, SelectButton, SelectOption, SelectOptionList } from '@/ui/elements/Select';
 
 import type { LocalizationKey } from '../../customizables';
 import {
@@ -175,10 +175,9 @@ export const RoleSelect = (props: {
       placeholder={t(localizationKeys('organizationProfile.invitePage.selectDropdown__role'))}
       onChange={role => onChange(role.value)}
       renderOption={(option, _index, isSelected) => (
-        <RolesListItem
-          isSelected={isSelected}
-          option={option}
-        />
+        <SelectOption isSelected={isSelected}>
+          <SelectOption.Label>{option.label}</SelectOption.Label>
+        </SelectOption>
       )}
     >
       {/*Store value inside an input in order to be accessible as form data*/}
@@ -230,36 +229,3 @@ export const RoleSelect = (props: {
     </Select>
   );
 };
-
-type RolesListItemProps = PropsOfComponent<typeof Flex> & {
-  isSelected?: boolean;
-  option?: {
-    label: string;
-    value: string;
-  };
-};
-
-const RolesListItem = memo((props: RolesListItemProps) => {
-  const { option, isSelected, sx, ...rest } = props;
-  return (
-    <Flex
-      sx={[
-        theme => ({
-          width: '100%',
-          padding: `${theme.space.$2} ${theme.space.$4}`,
-          borderRadius: theme.radii.$md,
-          '&:hover': {
-            backgroundColor: theme.colors.$neutralAlpha100,
-          },
-          '&[data-focused="true"]': {
-            backgroundColor: theme.colors.$neutralAlpha150,
-          },
-        }),
-        sx,
-      ]}
-      {...rest}
-    >
-      <Text variant='subtitle'>{option?.label}</Text>
-    </Flex>
-  );
-});
diff --git a/packages/ui/src/components/SignIn/SignInStart.tsx b/packages/ui/src/components/SignIn/SignInStart.tsx
index 73cb247af7e..364defdd20e 100644
--- a/packages/ui/src/components/SignIn/SignInStart.tsx
+++ b/packages/ui/src/components/SignIn/SignInStart.tsx
@@ -14,6 +14,7 @@ import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { Card } from '@/ui/elements/Card';
+import { Select, SelectButton, SelectOption, SelectOptionList } from '@/ui/elements/Select';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { Header } from '@/ui/elements/Header';
@@ -33,7 +34,7 @@ import {
   withRedirectToSignInTask,
 } from '../../common';
 import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
-import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
+import { Col, descriptors, Flow, localizationKeys, Text } from '../../customizables';
 import { CaptchaElement } from '../../elements/CaptchaElement';
 import { useLoadingStatus } from '../../hooks';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
@@ -78,6 +79,139 @@ const useAutoFillPasskey = () => {
   };
 };
 
+// PROTOTYPE: Remove before merging
+const SelectOptionDemo = () => {
+  const [orgValue, setOrgValue] = useState<string | null>('org_1');
+  const [phoneValue, setPhoneValue] = useState<string | null>('us');
+  const [roleValue, setRoleValue] = useState<string | null>('admin');
+  const [defaultValue, setDefaultValue] = useState<string | null>('30d');
+
+  const orgOptions = [
+    { value: 'org_1', label: 'Acme Corp', logoUrl: 'https://img.clerk.com/placeholder' },
+    {
+      value: 'org_2',
+      label: 'Globex Industries Globex Industries Globex Industries',
+      logoUrl: 'https://img.clerk.com/placeholder',
+    },
+    { value: 'org_3', label: 'Initech', logoUrl: 'https://img.clerk.com/placeholder' },
+  ];
+
+  const phoneOptions = [
+    { value: 'us', label: 'United States', code: '1' },
+    { value: 'gb', label: 'United Kingdom', code: '44' },
+    { value: 'de', label: 'Germany', code: '49' },
+    { value: 'fr', label: 'France', code: '33' },
+  ];
+
+  const roleOptions = [
+    { value: 'admin', label: 'Admin' },
+    { value: 'member', label: 'Member' },
+    { value: 'guest', label: 'Guest' },
+  ];
+
+  const expirationOptions = [
+    { value: '7d', label: '7 days' },
+    { value: '30d', label: '30 days' },
+    { value: '90d', label: '90 days' },
+    { value: 'never', label: 'Never' },
+  ];
+
+  return (
+    <Col
+      gap={4}
+      sx={{ padding: '16px 0' }}
+    >
+      <Text variant='subtitle'>SelectOption Variants (prototype)</Text>
+
+      <Text
+        colorScheme='secondary'
+        sx={{ fontSize: '12px' }}
+      >
+        Image + Label (OrgSelect pattern)
+      </Text>
+      <Select
+        options={orgOptions}
+        value={orgValue}
+        onChange={option => setOrgValue(option.value)}
+        matchTriggerWidth
+        renderOption={(option, _index, isSelected) => (
+          <SelectOption isSelected={isSelected}>
+            <SelectOption.Image
+              src={option.logoUrl}
+              alt={option.label}
+            />
+            <SelectOption.Label>{option.label}</SelectOption.Label>
+          </SelectOption>
+        )}
+      >
+        <SelectButton>{orgOptions.find(o => o.value === orgValue)?.label || 'Select org'}</SelectButton>
+        <SelectOptionList />
+      </Select>
+
+      <Text
+        colorScheme='secondary'
+        sx={{ fontSize: '12px' }}
+      >
+        Label + Detail (PhoneInput pattern)
+      </Text>
+      <Select
+        options={phoneOptions}
+        value={phoneValue}
+        onChange={option => setPhoneValue(option.value)}
+        matchTriggerWidth
+        renderOption={(option, _index, isSelected) => (
+          <SelectOption isSelected={isSelected}>
+            <SelectOption.Label>{option.label}</SelectOption.Label>
+            <SelectOption.Detail>+{option.code}</SelectOption.Detail>
+          </SelectOption>
+        )}
+      >
+        <SelectButton>{phoneOptions.find(o => o.value === phoneValue)?.label || 'Select country'}</SelectButton>
+        <SelectOptionList />
+      </Select>
+
+      <Text
+        colorScheme='secondary'
+        sx={{ fontSize: '12px' }}
+      >
+        Label only (RoleSelect pattern)
+      </Text>
+      <Select
+        options={roleOptions}
+        value={roleValue}
+        onChange={option => setRoleValue(option.value)}
+        matchTriggerWidth
+        renderOption={(option, _index, isSelected) => (
+          <SelectOption isSelected={isSelected}>
+            <SelectOption.Label>{option.label}</SelectOption.Label>
+          </SelectOption>
+        )}
+      >
+        <SelectButton>{roleOptions.find(o => o.value === roleValue)?.label || 'Select role'}</SelectButton>
+        <SelectOptionList />
+      </Select>
+
+      <Text
+        colorScheme='secondary'
+        sx={{ fontSize: '12px' }}
+      >
+        Default renderer (Checkout/APIKeys pattern)
+      </Text>
+      <Select
+        options={expirationOptions}
+        value={defaultValue}
+        onChange={option => setDefaultValue(option.value)}
+        matchTriggerWidth
+      >
+        <SelectButton>
+          {expirationOptions.find(o => o.value === defaultValue)?.label || 'Select expiration'}
+        </SelectButton>
+        <SelectOptionList />
+      </Select>
+    </Col>
+  );
+};
+
 function SignInStartInternal(): JSX.Element {
   const card = useCardState();
   const clerk = useClerk();
@@ -571,6 +705,8 @@ function SignInStartInternal(): JSX.Element {
               />
             </Header.Root>
             <Card.Alert>{card.error}</Card.Alert>
+            {/* PROTOTYPE: SelectOption variants demo — remove before merging */}
+            <SelectOptionDemo />
             {/*TODO: extract main in its own component */}
             <Col
               elementDescriptor={descriptors.main}
diff --git a/packages/ui/src/elements/PhoneInput/index.tsx b/packages/ui/src/elements/PhoneInput/index.tsx
index 7882e0623be..82fb0207cf1 100644
--- a/packages/ui/src/elements/PhoneInput/index.tsx
+++ b/packages/ui/src/elements/PhoneInput/index.tsx
@@ -1,13 +1,13 @@
 import { useClerk } from '@clerk/shared/react';
-import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 
 import { mergeRefs } from '@/ui/utils/mergeRefs';
 import type { FeedbackType } from '@/ui/utils/useFormControl';
 
-import { descriptors, Flex, Icon, Input, Text } from '../../customizables';
-import { Check, ChevronUpDown } from '../../icons';
+import { descriptors, Flex, Input, Text } from '../../customizables';
+import { ChevronUpDown } from '../../icons';
 import { common, type PropsOfComponent } from '../../styledSystem';
-import { Select, SelectButton, SelectOptionList } from '../Select';
+import { Select, SelectButton, SelectOption, SelectOptionList } from '../Select';
 import type { CountryEntry, CountryIso } from './countryCodeData';
 import { IsoToCountryMap } from './countryCodeData';
 import { useFormattedPhoneNumber } from './useFormattedPhoneNumber';
@@ -90,18 +90,10 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
         portal
         referenceElement={phoneInputBox}
         renderOption={(option, _index, isSelected) => (
-          <CountryCodeListItem
-            sx={theme => ({
-              '&:hover': {
-                backgroundColor: theme.colors.$neutralAlpha100,
-              },
-              '&[data-focused="true"]': {
-                backgroundColor: theme.colors.$neutralAlpha150,
-              },
-            })}
-            isSelected={isSelected}
-            country={option.country}
-          />
+          <SelectOption isSelected={isSelected}>
+            <SelectOption.Label>{option.country.name}</SelectOption.Label>
+            <SelectOption.Detail>+{option.country.code}</SelectOption.Detail>
+          </SelectOption>
         )}
         onChange={option => {
           setIso(option.country.iso);
@@ -144,13 +136,7 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
             {iso}
           </Text>
         </SelectButton>
-        <SelectOptionList
-          sx={{ padding: '0 0' }}
-          containerSx={theme => ({
-            gap: 0,
-            padding: `${theme.space.$0x5} 0`,
-          })}
-        />
+        <SelectOptionList />
       </Select>
 
       <Flex
@@ -209,42 +195,6 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
   );
 });
 
-type CountryCodeListItemProps = PropsOfComponent<typeof Flex> & {
-  isSelected?: boolean;
-  country: CountryEntry;
-};
-const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
-  const { country, isSelected, sx, ...rest } = props;
-  return (
-    <Flex
-      center
-      sx={[
-        theme => ({
-          width: '100%',
-          gap: theme.space.$2,
-          padding: `${theme.space.$1x5} ${theme.space.$4}`,
-          color: theme.colors.$colorForeground,
-        }),
-        sx,
-      ]}
-      {...rest}
-    >
-      <Icon
-        icon={Check}
-        size='sm'
-        sx={{ visibility: isSelected ? 'visible' : 'hidden' }}
-      />
-      <Text
-        as='div'
-        sx={{ width: '100%', textAlign: 'start' }}
-      >
-        {country.name}
-      </Text>
-      <Text colorScheme='secondary'>+{country.code}</Text>
-    </Flex>
-  );
-});
-
 export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps & { feedbackType?: FeedbackType }>(
   (props, ref) => {
     const { __internal_country } = useClerk();
diff --git a/packages/ui/src/elements/Select.tsx b/packages/ui/src/elements/Select.tsx
index 1dfb229f32c..2f84ddb2d09 100644
--- a/packages/ui/src/elements/Select.tsx
+++ b/packages/ui/src/elements/Select.tsx
@@ -3,9 +3,9 @@ import type { SelectId } from '@clerk/shared/types';
 import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
 import React, { useState } from 'react';
 
-import { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';
+import { Box, Button, descriptors, Flex, Icon, Image, Input, Text } from '../customizables';
 import { usePopover, useSearchInput } from '../hooks';
-import { ChevronDown } from '../icons';
+import { Check, ChevronDown } from '../icons';
 import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
 import { animations, common } from '../styledSystem';
 import { colors } from '../utils/colors';
@@ -32,6 +32,7 @@ type SelectProps<O extends Option> = {
   elementId?: SelectId;
   portal?: boolean;
   referenceElement?: React.RefObject<HTMLElement>;
+  matchTriggerWidth?: boolean;
 };
 
 type SelectState<O extends Option> = Pick<
@@ -51,27 +52,11 @@ type SelectState<O extends Option> = Pick<
 
 const [SelectStateCtx, useSelectState] = createContextAndHook<SelectState<any>>('SelectState');
 
-const defaultRenderOption = <O extends Option>(option: O, _index?: number) => {
+const defaultRenderOption = <O extends Option>(option: O, _index?: number, isSelected?: boolean) => {
   return (
-    <Flex
-      sx={theme => ({
-        position: 'relative',
-        width: '100%',
-        padding: `${theme.space.$2} ${theme.space.$4}`,
-        margin: `0 ${theme.space.$1}`,
-        borderRadius: theme.radii.$md,
-        '&:hover, &[data-focused="true"]': {
-          background: common.mutedBackground(theme),
-        },
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          inset: `calc(${theme.space.$0x5} * -1) calc(${theme.space.$1} * -1)`,
-        },
-      })}
-    >
-      <Text truncate>{option.label || option.value}</Text>
-    </Flex>
+    <SelectOption isSelected={isSelected}>
+      <SelectOption.Label>{option.label || option.value}</SelectOption.Label>
+    </SelectOption>
   );
 };
 
@@ -93,11 +78,12 @@ export const Select = withFloatingTree(<O extends Option>(props: PropsWithChildr
     children,
     portal = false,
     referenceElement = null,
+    matchTriggerWidth = false,
     ...rest
   } = props;
   const popoverCtx = usePopover({
     autoUpdate: true,
-    adjustToReferenceWidth: !!referenceElement,
+    adjustToReferenceWidth: matchTriggerWidth || !!referenceElement,
     referenceElement: referenceElement,
   });
   const togglePopover = popoverCtx.toggle;
@@ -358,6 +344,8 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
               overflowY: 'auto',
               maxHeight: '18vh',
               padding: `${theme.space.$0x5} ${theme.space.$0x5}`,
+              ...common.unstyledScrollbar(theme),
+              overflowX: 'hidden',
             }),
             containerSx,
           ]}
@@ -404,6 +392,20 @@ export const SelectButton = (
     show = selectedOption ? buttonRenderOption(selectedOption) : <Text as='span'>{placeholder}</Text>;
   }
 
+  // Wrap plain string/number children in a truncating Text
+  if (typeof show === 'string' || typeof show === 'number') {
+    show = (
+      <Text
+        as='span'
+        truncate
+        colorScheme='body'
+        sx={{ flex: 1, minWidth: 0, textAlign: 'start' as const }}
+      >
+        {show}
+      </Text>
+    );
+  }
+
   return (
     <Button
       elementDescriptor={descriptors.selectButton}
@@ -418,6 +420,7 @@ export const SelectButton = (
           paddingInlineStart: theme.space.$3x5,
           paddingInlineEnd: theme.space.$3x5,
           alignItems: 'center',
+          overflow: 'hidden',
           '> *': { pointerEvents: 'none' },
         }),
         sx,
@@ -435,3 +438,130 @@ export const SelectButton = (
     </Button>
   );
 };
+
+// --- SelectOption compound component ---
+
+const SelectOptionImage = (props: { src: string; alt?: string; sx?: ThemableCssProp }) => {
+  const { src, alt = '', sx } = props;
+  return (
+    <Image
+      data-slot='image'
+      src={src}
+      alt={alt}
+      sx={[
+        theme => ({
+          width: theme.sizes.$5,
+          height: theme.sizes.$5,
+          objectFit: 'contain',
+          flexShrink: 0,
+          borderRadius: theme.radii.$md,
+        }),
+        sx,
+      ]}
+    />
+  );
+};
+
+const SelectOptionLabel = (props: PropsOfComponent<typeof Text>) => {
+  const { children, sx, ...rest } = props;
+  return (
+    <Text
+      data-slot='label'
+      truncate
+      as='span'
+      variant='subtitle'
+      sx={[{ textAlign: 'start', minWidth: 0 }, sx]}
+      {...rest}
+    >
+      {children}
+    </Text>
+  );
+};
+
+const SelectOptionDetail = (props: PropsOfComponent<typeof Text>) => {
+  const { children, sx, ...rest } = props;
+  return (
+    <Text
+      data-slot='detail'
+      as='span'
+      colorScheme='secondary'
+      sx={sx}
+      {...rest}
+    >
+      {children}
+    </Text>
+  );
+};
+
+type SelectOptionRootProps = {
+  isSelected?: boolean;
+  children: ReactNode;
+  sx?: ThemableCssProp;
+  [key: string]: unknown;
+};
+
+const SelectOptionRoot = ({ isSelected = false, children, sx, ...rest }: SelectOptionRootProps) => {
+  return (
+    <Box
+      as='span'
+      sx={[
+        theme => ({
+          position: 'relative',
+          width: '100%',
+          display: 'grid',
+          gridTemplateColumns: `1fr ${theme.sizes.$3}`,
+          columnGap: theme.space.$2,
+          paddingInlineStart: theme.space.$1,
+          paddingInlineEnd: theme.space.$1x5,
+          paddingBlock: theme.space.$1,
+          alignItems: 'center',
+          borderRadius: theme.radii.$md,
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            inset: `calc(${theme.space.$0x5} * -1) calc(${theme.space.$1} * -1)`,
+          },
+          '&:hover, &[data-focused="true"]': {
+            background: common.mutedBackground(theme),
+          },
+          '&[data-selected="true"]': {
+            background: common.mutedBackground(theme),
+          },
+          '&:has([data-slot="image"])': {
+            gridTemplateColumns: `${theme.sizes.$5} 1fr ${theme.sizes.$3}`,
+          },
+          '&:has([data-slot="detail"])': {
+            gridTemplateColumns: `${theme.sizes.$3} 1fr auto`,
+            '& [data-slot="check"]': {
+              order: -1,
+            },
+          },
+        }),
+        sx,
+      ]}
+      {...rest}
+    >
+      {children}
+      <Flex
+        data-slot='check'
+        as='span'
+        center
+        sx={theme => ({
+          color: theme.colors.$primary500,
+          visibility: isSelected ? 'visible' : 'hidden',
+        })}
+      >
+        <Icon
+          icon={Check}
+          size='sm'
+        />
+      </Flex>
+    </Box>
+  );
+};
+
+export const SelectOption = Object.assign(SelectOptionRoot, {
+  Image: SelectOptionImage,
+  Label: SelectOptionLabel,
+  Detail: SelectOptionDetail,
+});