Select: allow setting a z-index of the content popover

src/components/Select/common/InternalSelect.tsx

@@ -127,6 +127,7 @@ export const InternalSelect = ({
   container,
   useFullWidthItems = false,
   itemCharacterLimit = "64ch",
+  zIndex = "auto",
   ...props
 }: SelectContainerProps) => {
   const defaultId = useId();
@@ -391,6 +392,7 @@ export const InternalSelect = ({
               align="start"
               $useFullWidthItems={useFullWidthItems}
               $itemCharacterLimit={itemCharacterLimit}
+              $zIndex={zIndex}
             >
               <SelectList>
                 <SearchBarContainer $showSearch={showSearch}>

src/components/Select/common/SelectStyled.tsx

@@ -84,6 +84,7 @@ export const StyledSelectTrigger = styled(Trigger)<{ $error: boolean }>`
 export const SelectPopoverContent = styled(Content)<{
   $useFullWidthItems: boolean;
   $itemCharacterLimit?: string;
+  $zIndex?: string;
 }>`
   width: var(--radix-popover-trigger-width);
   max-height: var(--radix-popover-content-available-height);
@@ -114,6 +115,8 @@ export const SelectPopoverContent = styled(Content)<{
   padding: 0.5rem 0rem;
   align-items: flex-start;
   gap: 0.625rem;
+
+  z-index: ${({ $zIndex = "auto" }) => $zIndex};
 `;
 
 export const SearchBarContainer = styled.div<{ $showSearch: boolean }>`

src/components/Select/common/types.ts

@@ -84,6 +84,7 @@ interface InternalSelectProps
   container?: HTMLElement;
   useFullWidthItems?: boolean;
   itemCharacterLimit?: string;
+  zIndex?: string;
 }
 
 export type SelectOptionProp = SelectOptionType | SelectChildrenType;