remove sx support from LabelGroup.tsx

Author: llastflowers

packages/react/src/LabelGroup/LabelGroup.tsx

@@ -5,11 +5,8 @@ import {getFocusableChild} from '@primer/behaviors/utils'
 import {get} from '../constants'
 import VisuallyHidden from '../_VisuallyHidden'
 import {AnchoredOverlay} from '../AnchoredOverlay'
-import Box from '../Box'
 import {Button, IconButton} from '../Button'
 import {useTheme} from '../ThemeProvider'
-import type {SxProp} from '../sx'
-import sx from '../sx'
 
 export type LabelGroupProps = {
   /** Customize the element type of the rendered container */
@@ -19,9 +16,9 @@ export type LabelGroupProps = {
   /** How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated. */
   visibleChildCount?: 'auto' | number
   className?: string
-} & SxProp
+}
 
-const StyledLabelGroupContainer = styled.div<SxProp>`
+const StyledLabelGroupContainer = styled.div`
   display: flex;
   flex-wrap: nowrap;
   gap: ${get('space.1')};
@@ -39,8 +36,6 @@ const StyledLabelGroupContainer = styled.div<SxProp>`
     margin-block-end: 0;
     list-style-type: none;
   }
-
-  ${sx};
 `
 
 const ItemWrapper = styled.div`
@@ -137,18 +132,16 @@ const OverlayToggle: React.FC<
       )}
       focusZoneSettings={{disabled: true}}
     >
-      <Box alignItems="flex-start" display="flex" width={overlayWidth} padding={`${overlayPaddingPx}px`}>
-        <Box display="flex" flexWrap="wrap" sx={{gap: 1}}>
-          {children}
-        </Box>
+      <div style={{alignItems: 'flex-start', display: 'flex', width: overlayWidth, padding: `${overlayPaddingPx}px`}}>
+        <div style={{display: 'flex', flexWrap: 'wrap', gap: '4px'}}>{children}</div>
         <IconButton
           onClick={closeOverflowOverlay}
           icon={XIcon}
           aria-label="Close"
           variant="invisible"
-          sx={{flexShrink: 0}}
+          style={{flexShrink: 0}}
         />
-      </Box>
+      </div>
     </AnchoredOverlay>
   ) : null
 
@@ -157,7 +150,6 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
   children,
   visibleChildCount,
   overflowStyle = 'overlay',
-  sx: sxProp,
   as = 'ul',
   className,
 }) => {
@@ -338,7 +330,6 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
       ref={containerRef}
       data-overflow={overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined}
       data-list={isList || undefined}
-      sx={sxProp}
       className={className}
       as={as}
     >
@@ -381,13 +372,7 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
       </ToggleWrapper>
     </StyledLabelGroupContainer>
   ) : (
-    <StyledLabelGroupContainer
-      data-overflow="inline"
-      data-list={isList || undefined}
-      sx={sxProp}
-      as={as}
-      className={className}
-    >
+    <StyledLabelGroupContainer data-overflow="inline" data-list={isList || undefined} as={as} className={className}>
       {isList
         ? React.Children.map(children, (child, index) => {
             return <li key={index}>{child}</li>