fix(lsd-react): omit common props before passing down props to html elements; closes #39

packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx

@@ -7,7 +7,12 @@ import { DropdownMenu } from '../DropdownMenu'
 import { Portal } from '../PortalProvider/Portal'
 import { Typography } from '../Typography'
 import { autocompleteClasses } from './Autocomplete.classes'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  pickCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 
 export type AutocompleteProps = CommonProps &
   Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> &
@@ -87,7 +92,7 @@ export const Autocomplete: React.FC<AutocompleteProps> & {
   return (
     <div
       ref={containerRef}
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         props.className,
         commonProps.className,
@@ -142,7 +147,7 @@ export const Autocomplete: React.FC<AutocompleteProps> & {
           open={isOpen}
           onClose={() => setOpen(false)}
           size={size}
-          genericFontFamily={props.genericFontFamily}
+          {...pickCommonProps(props)}
         >
           {suggestions.map((opt, idx: number) => (
             <DropdownItem

packages/lsd-react/src/components/Badge/Badge.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { Typography } from '../Typography'
 import { badgeClasses } from './Badge.classes'
 
@@ -29,7 +33,7 @@ export const Badge: React.FC<BadgeProps> & {
   return (
     <div
       aria-label={children as string}
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         props.className,
         commonProps.className,

packages/lsd-react/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,11 @@
 import clsx from 'clsx'
 import React, { useEffect, useRef, useState } from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  pickCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { BreadcrumbItem } from '../BreadcrumbItem'
 import { breadcrumbItemClasses } from '../BreadcrumbItem/BreadcrumbItem.classes'
 import { DropdownMenu } from '../DropdownMenu'
@@ -79,7 +84,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
 
   return (
     <div
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         props.className,
         commonProps.className,
@@ -96,6 +101,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
             label={'...'}
             onClick={onTrigger}
             size={size}
+            {...pickCommonProps(props)}
           />
         )}
         {renderItems(visible)}
@@ -109,6 +115,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
             className={clsx(breadcrumbClasses.listBox)}
             size={size}
             genericFontFamily={props.genericFontFamily}
+            {...pickCommonProps(props)}
           >
             {collapsed.map((opt, idx) => (
               <BreadcrumbItem

packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { Typography } from '../Typography'
 import { breadcrumbItemClasses } from './BreadcrumbItem.classes'
 
@@ -37,7 +41,7 @@ export const BreadcrumbItem: React.FC<BreadcrumbItemProps> & {
 
   return (
     <li
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         breadcrumbItemClasses.root,

packages/lsd-react/src/components/Button/Button.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { buttonClasses } from './Button.classes'
 
 export type ButtonProps = CommonProps &
@@ -18,7 +22,7 @@ export const Button: React.FC<ButtonProps> & {
   return (
     <>
       <button
-        {...props}
+        {...omitCommonProps(props)}
         className={clsx(
           commonProps.className,
           props.className,

packages/lsd-react/src/components/Card/Card.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { cardClasses } from './Card.classes'
 import { CardContext } from './Card.context'
 
@@ -17,7 +21,7 @@ export const Card: React.FC<CardProps> & {
   return (
     <CardContext.Provider value={{ size }}>
       <div
-        {...props}
+        {...omitCommonProps(props)}
         className={clsx(
           commonProps.className,
           cardClasses.root,

packages/lsd-react/src/components/CardBody/CardBody.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { cardBodyClasses } from './CardBody.classes'
 
 export type CardBodyProps = CommonProps &
@@ -13,7 +17,7 @@ export const CardBody: React.FC<CardBodyProps> & {
 
   return (
     <div
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/CardHeader/CardHeader.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { useCardContext } from '../Card/Card.context'
 import { Typography } from '../Typography'
 import { cardHeaderClasses } from './CardHeader.classes'
@@ -19,7 +23,7 @@ export const CardHeader: React.FC<CardHeaderProps> & {
 
   return (
     <div
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/Checkbox/Checkbox.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React, { useEffect, useRef, useState } from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { useInput } from '../../utils/useInput'
 import { useCheckboxGroupContext } from '../CheckboxGroup/CheckboxGroup.context'
 import { CheckboxFilledIcon, CheckboxIcon } from '../Icons'
@@ -71,7 +75,7 @@ export const Checkbox: React.FC<CheckboxProps> & {
       variant={size === 'large' ? 'label1' : 'label2'}
       component="label"
       aria-disabled={disabled ? 'true' : 'false'}
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -3,7 +3,12 @@ import React from 'react'
 import { CheckboxGroupContext } from './CheckboxGroup.context'
 import { checkboxGroupClasses } from './CheckboxGroup.classes'
 import { Typography } from '../Typography'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  pickCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 
 export type ActiveCheckboxType = string | number | readonly string[]
 
@@ -21,7 +26,7 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> & {
   return (
     <CheckboxGroupContext.Provider value={{ size }}>
       <div
-        {...props}
+        {...omitCommonProps(props)}
         className={clsx(
           commonProps.className,
           props.className,
@@ -32,6 +37,7 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> & {
           component="span"
           variant={size === 'small' ? 'label2' : 'label1'}
           className={checkboxGroupClasses.label}
+          {...pickCommonProps(props)}
         >
           {label}
         </Typography>

packages/lsd-react/src/components/Collapse/Collapse.tsx

@@ -1,6 +1,11 @@
 import clsx from 'clsx'
 import React, { useEffect, useRef, useState } from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  pickCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { CollapseHeader } from '../CollapseHeader'
 import { collapseClasses } from './Collapse.classes'
 
@@ -44,7 +49,7 @@ export const Collapse: React.FC<CollapseProps> & {
 
   return (
     <div
-      {...props}
+      {...omitCommonProps(props)}
       ref={ref}
       className={clsx(
         globalProps.className,
@@ -61,6 +66,7 @@ export const Collapse: React.FC<CollapseProps> & {
         size={size}
         onTrigger={onTrigger}
         disabled={disabled}
+        {...pickCommonProps(props)}
       />
       {open && <div className={collapseClasses.content}>{children}</div>}
     </div>

packages/lsd-react/src/components/CollapseHeader/CollapseHeader.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { ArrowDownIcon, ArrowUpIcon } from '../Icons'
 import { Typography } from '../Typography'
 import { collapseHeaderClasses } from './CollapseHeader.classes'
@@ -30,7 +34,7 @@ export const CollapseHeader: React.FC<CollapseHeaderProps> & {
 
   return (
     <div
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/Dropdown/Dropdown.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React, { useEffect, useRef, useState } from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { SelectOption, useSelect } from '../../utils/useSelect'
 import { DropdownItem } from '../DropdownItem'
 import { DropdownMenu } from '../DropdownMenu'
@@ -72,7 +76,7 @@ export const Dropdown: React.FC<DropdownProps> & {
   return (
     <div
       ref={containerRef}
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/DropdownItem/DropdownItem.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { CheckboxFilledIcon, CheckboxIcon, LsdIconProps } from '../Icons'
 import { Typography } from '../Typography'
 import { dropdownItemClasses } from './DropdownItem.classes'
@@ -36,7 +40,7 @@ export const DropdownItem: React.FC<DropdownItemProps> & {
     <div
       role="option"
       aria-selected={selected ? 'true' : 'false'}
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         className,

packages/lsd-react/src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,7 +1,11 @@
 import clsx from 'clsx'
 import React, { useEffect, useRef, useState } from 'react'
 import { useClickAway } from 'react-use'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { dropdownMenuClasses } from './DropdownMenu.classes'
 
 export type DropdownMenuProps = CommonProps &
@@ -51,7 +55,7 @@ export const DropdownMenu: React.FC<DropdownMenuProps> & {
 
   return (
     <ul
-      {...props}
+      {...omitCommonProps(props)}
       ref={ref}
       role="listbox"
       aria-label={label}

packages/lsd-react/src/components/IconButton/IconButton.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { useIconButtonGroupContext } from '../IconButtonGroup/IconButtonGroup.context'
 import { iconButtonClasses } from './IconButton.classes'
 
@@ -28,7 +32,7 @@ export const IconButton: React.FC<IconButtonProps> & {
 
   return (
     <button
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/IconButtonGroup/IconButtonGroup.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { iconButtonGroupClasses } from './IconButtonGroup.classes'
 import { IconButtonGroupContext } from './IconButtonGroup.context'
 
@@ -24,7 +28,7 @@ export const IconButtonGroup: React.FC<IconButtonGroupProps> & {
 
   return (
     <div
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/Icons/LsdIcon/LsdIcon.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../../utils/useCommonProps'
 import { lsdIconClasses } from './LsdIcon.classes'
 
 export type LsdIconProps = CommonProps &
@@ -39,7 +43,7 @@ export const LsdIcon = (
           metadata?.filled && lsdIconClasses.filled,
           metadata?.stroked && lsdIconClasses.stroked,
         )}
-        {...props}
+        {...omitCommonProps(props)}
       />
     )
   }

packages/lsd-react/src/components/Quote/Quote.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { Typography } from '../Typography'
 import { quoteClasses } from './Quote.classes'
 
@@ -17,7 +21,7 @@ export const Quote: React.FC<QuoteProps> & {
   return (
     <>
       <div
-        {...props}
+        {...omitCommonProps(props)}
         className={clsx(
           commonProps.className,
           props.className,

packages/lsd-react/src/components/RadioButton/RadioButton.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React, { useRef } from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { useInput } from '../../utils/useInput'
 import { RadioButtonFilledIcon, RadioButtonIcon } from '../Icons'
 import { useRadioButtonGroupContext } from '../RadioButtonGroup/RadioButtonGroup.context'
@@ -66,7 +70,7 @@ export const RadioButton: React.FC<RadioButtonProps> & {
       variant={size === 'large' ? 'label1' : 'label2'}
       component="label"
       aria-disabled={disabled ? 'true' : 'false'}
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React, { useEffect, useRef, useState } from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { Typography } from '../Typography'
 import { radioButtonGroupClasses } from './RadioButtonGroup.classes'
 import { RadioButtonGroupContext } from './RadioButtonGroup.context'
@@ -36,7 +40,7 @@ export const RadioButtonGroup: React.FC<RadioButtonGroupProps> & {
     >
       <div
         ref={ref}
-        {...props}
+        {...omitCommonProps(props)}
         className={clsx(
           commonProps.className,
           props.className,

packages/lsd-react/src/components/ResizeObserver/ResizeObserverProvider.tsx

@@ -1,4 +1,4 @@
-import { omit } from 'lodash'
+import omit from 'lodash/omit'
 import React, { MutableRefObject, useEffect, useRef, useState } from 'react'
 import { settleSync } from '../../utils/promise.utils'
 import { ResizeObserverContext } from './ResizeObserverContext'

packages/lsd-react/src/components/TabItem/TabItem.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { useTabsContext } from '../Tabs/Tab.context'
 import { Typography } from '../Typography'
 import { tabItemClasses } from './TabItem.classes'
@@ -39,7 +43,7 @@ export const TabItem: React.FC<TabItemProps> & {
 
   return (
     <button
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/Table/Table.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { DropdownOption } from '../Dropdown'
 import { TableBody } from '../TableBody'
 import { TableHeader } from '../TableHeader'
@@ -32,7 +36,7 @@ export const Table: React.FC<TableProps> & {
   return (
     <TableContext.Provider value={{ size, type, headerOptions }}>
       <div
-        {...props}
+        {...omitCommonProps(props)}
         className={clsx(
           commonProps.className,
           tableClasses.root,

packages/lsd-react/src/components/TableBody/TableBody.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { DropdownOption } from '../Dropdown'
 import { tableBodyClasses } from './TableBody.classes'
 
@@ -26,7 +30,7 @@ export const TableBody: React.FC<TableBodyProps> & {
 
   return (
     <div
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/TableHeader/TableHeader.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { tableHeaderClasses } from './TableHeader.classes'
 
 export type TableHeaderProps = CommonProps &
@@ -15,7 +19,7 @@ export const TableHeader: React.FC<TableHeaderProps> & {
 
   return (
     <div
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/TableItem/TableItem.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { useTableContext } from '../Table/Table.context'
 import { tableItemClasses } from './TableItem.classes'
 
@@ -18,7 +22,7 @@ export const TableItem: React.FC<TableItemProps> & {
 
   return (
     <td
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/TableRow/TableRow.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { Checkbox } from '../Checkbox'
 import { RadioButton } from '../RadioButton'
 import { useTableContext } from '../Table/Table.context'
@@ -27,7 +31,7 @@ export const TableRow: React.FC<TableRowProps> & {
 
   return (
     <tr
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/Tabs/Tabs.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React, { useEffect, useRef, useState } from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { useHorizontalScroll } from '../../utils/useHorizontalScroll'
 import { NavigateBeforeIcon, NavigateNextIcon } from '../Icons'
 import { TabItem } from '../TabItem'
@@ -48,7 +52,7 @@ export const Tabs: React.FC<TabsProps> & {
     <TabsContext.Provider value={{ activeTab: value, setActiveTab, size }}>
       <div
         ref={ref}
-        {...props}
+        {...omitCommonProps(props)}
         className={clsx(
           commonProps.className,
           props.className,

packages/lsd-react/src/components/Tag/Tag.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { Typography } from '../Typography'
 import { tagClasses } from './Tag.classes'
 
@@ -29,7 +33,7 @@ export const Tag: React.FC<TagProps> & {
   return (
     <div
       aria-label={children as string}
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/TextField/TextField.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React, { useRef } from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { useInput } from '../../utils/useInput'
 import { IconButton } from '../IconButton'
 import { CloseIcon, ErrorIcon } from '../Icons'
@@ -52,7 +56,7 @@ export const TextField: React.FC<TextFieldProps> & {
   return (
     <div
       aria-disabled={disabled ? 'true' : 'false'}
-      {...props}
+      {...omitCommonProps(props)}
       className={clsx(
         commonProps.className,
         props.className,

packages/lsd-react/src/components/Typography/Typography.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import React from 'react'
-import { CommonProps, useCommonProps } from '../../utils/useCommonProps'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
 import { TypographyVariants } from '../Theme'
 import { typographyClasses } from './Typography.classes'
 
@@ -66,7 +70,7 @@ export const Typography: React.FC<TypographyProps> & {
         color && typographyClasses[color],
         className,
       )}
-      {...props}
+      {...omitCommonProps(props)}
     >
       {children}
     </Component>

packages/lsd-react/src/utils/useCommonProps.ts

@@ -1,4 +1,6 @@
 import clsx from 'clsx'
+import omit from 'lodash/omit'
+import pick from 'lodash/pick'
 import { GlobalTypographyStyles } from '../components/Theme'
 import { typographyClasses } from '../components/Typography/Typography.classes'
 
@@ -6,6 +8,8 @@ export type CommonProps = {
   genericFontFamily?: 'inherit' | GlobalTypographyStyles['genericFontFamily']
 }
 
+export const commonPropKeys: [keyof CommonProps] = ['genericFontFamily']
+
 export const useCommonProps = ({ genericFontFamily }: CommonProps) => {
   return {
     className: clsx(
@@ -15,3 +19,9 @@ export const useCommonProps = ({ genericFontFamily }: CommonProps) => {
     ),
   }
 }
+
+export const pickCommonProps = <T extends CommonProps>(props: T) =>
+  pick(props, commonPropKeys)
+
+export const omitCommonProps = <T extends CommonProps>(props: T) =>
+  omit(props, commonPropKeys)