fixes

Author: lukasoppermann

packages/react/src/ProgressBar/ProgressBar.features.stories.tsx

@@ -20,7 +20,7 @@ export const Color = () => <ProgressBar progress="66" bg="done.emphasis" aria-la
 
 export const MultipleItems = () => (
   <ProgressBar aria-valuenow={70} aria-label="Upload test.png">
-    <ProgressBar.Item progress={33} bg={'accent.emphasis'} />
+    <ProgressBar.Item progress={33} sx={{bg: 'accent.emphasis'}} />
     <ProgressBar.Item progress={23} bg={'danger.emphasis'} />
     <ProgressBar.Item progress={14} bg={'severe.emphasis'} />
   </ProgressBar>

packages/react/src/ProgressBar/ProgressBar.tsx

@@ -9,14 +9,15 @@ import {warning} from '../utils/warning'
 
 type ProgressProp = {
   progress?: string | number
+  bg?: string
 }
 
 const shimmer = keyframes`
   from { mask-position: 200%; }
   to { mask-position: 0%; }
 `
 
-export const Item = styled.span<ProgressProp & {bg: string} & SxProp>`
+export const Item = styled.span<ProgressProp & SxProp>`
   width: ${props => (props.progress ? `${props.progress}%` : 0)};
   background-color: ${props => get(`colors.${props.bg || 'success.emphasis'}`)};