diff --git a/packages/Accordion/src/styles.ts b/packages/Accordion/src/styles.ts index b04309bfcc..6f47c2a808 100644 --- a/packages/Accordion/src/styles.ts +++ b/packages/Accordion/src/styles.ts @@ -14,7 +14,9 @@ export const Accordion = styled.div` } ` -export const Icon = styled(Box)<{ isOpen: Ariakit.DisclosureStoreState['open'] }>( +export const Icon = styled(Box).withConfig({ + shouldForwardProp: prop => !['isOpen'].includes(prop), +})<{ isOpen: Ariakit.DisclosureStoreState['open'] }>( ({ isOpen }) => css` flex-shrink: 0; ${th('accordions.icon')}; @@ -59,7 +61,9 @@ export const Disclosure = styled(Ariakit.Disclosure)` } ` -export const Content = styled(Ariakit.DisclosureContent)( +export const Content = styled(Ariakit.DisclosureContent).withConfig({ + shouldForwardProp: prop => !['isOpen'].includes(prop), +})( ({ isOpen }: { isOpen: UseAccordionState['open'] }) => css` ${th('accordions.content')}; padding-inline: ${th('accordions.padding')}; diff --git a/packages/Tag/src/styles.ts b/packages/Tag/src/styles.ts index a9a4b11c72..ce475e5fb8 100644 --- a/packages/Tag/src/styles.ts +++ b/packages/Tag/src/styles.ts @@ -24,7 +24,9 @@ export interface StyledTagProps { variant: Variant } -export const Tag = styled.div( +export const Tag = styled.div.withConfig({ + shouldForwardProp: prop => !['hasClickAction', 'hasLink', 'hasRemoveAction'].includes(prop), +})( ({ h, hasClickAction, hasLink, hasRemoveAction, length, size, variant, w }) => css` ${th('tags.default')}; ${th(`tags.variants.${variant}`)};