fix: type error

packages/icons/package.json

@@ -120,8 +120,8 @@
     "@babel/core": "7.26.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
-    "@types/react": "18.3.17",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@utils/test": "workspace:*",
     "react": "19.0.0",
     "react-dom": "19.0.0"

packages/icons/src/components/Icon/legacy/index.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import type { consoleLightTheme as theme } from '@ultraviolet/themes'
-import type { FunctionComponent, SVGProps } from 'react'
+import type { FunctionComponent, PropsWithChildren, SVGProps } from 'react'
 import { forwardRef, useMemo } from 'react'
 import capitalize from '../../../utils/capitalize'
 import { ICONS } from './Icons'
@@ -62,7 +62,7 @@ const PROMINENCES = {
 type ProminenceProps = keyof typeof PROMINENCES
 
 const StyledIcon = (
-  component: FunctionComponent<SVGProps<SVGSVGElement>>,
+  component: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>,
 ) => styled(component, {
   shouldForwardProp: prop =>
     !['size', 'sentiment', 'prominence', 'disabled'].includes(prop),
@@ -160,13 +160,14 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(
   ) => {
     const computedSentiment = sentiment ?? color
     const SystemIcon = useMemo(() => {
+      const smallIcon = SMALL_ICONS[variant][name]
+      const defaultIcon = SMALL_ICONS.filled.alert
+
       if (size === 'small' || size === 16) {
-        return StyledIcon(
-          SMALL_ICONS[variant][name] || SMALL_ICONS.filled.alert,
-        )
+        return StyledIcon(smallIcon || defaultIcon)
       }
 
-      return StyledIcon(ICONS[variant][name] || ICONS.filled.alert)
+      return StyledIcon(smallIcon || defaultIcon)
     }, [name, size, variant])
 
     /**

packages/plus/package.json

@@ -73,7 +73,7 @@
     "@babel/core": "7.26.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
-    "@types/react": "18.3.17",
+    "@types/react": "19.0.0",
     "@types/react-dom": "18.3.5",
     "@ultraviolet/illustrations": "workspace:*",
     "@utils/test": "workspace:*",

packages/ui/package.json

@@ -76,9 +76,9 @@
     "@babel/core": "7.26.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
-    "@types/react": "18.3.17",
+    "@types/react": "19.0.0",
     "@types/react-datepicker": "6.2.0",
-    "@types/react-dom": "18.3.5",
+    "@types/react-dom": "19.0.0",
     "@utils/test": "workspace:*",
     "react": "19.0.0",
     "react-dom": "19.0.0"

packages/ui/src/components/SelectInputV2/Dropdown.tsx

@@ -27,7 +27,7 @@ export type DropdownProps = {
   searchable: boolean
   placeholder: string
   footer?: ((closeDropdown: () => void) => ReactNode) | ReactNode
-  refSelect: RefObject<HTMLDivElement>
+  refSelect: RefObject<HTMLDivElement | null>
   loadMore?: ReactNode
   optionalInfoPlacement: 'left' | 'right'
   isLoading?: boolean
@@ -218,7 +218,7 @@ const handleClickOutside = (
   event: MouseEvent,
   ref: RefObject<HTMLDivElement | null>,
   setIsDropdownVisibile: Dispatch<SetStateAction<boolean>>,
-  refSelect: RefObject<HTMLDivElement>,
+  refSelect: RefObject<HTMLDivElement | null>,
   onSearch: Dispatch<SetStateAction<DataType>>,
   options: DataType,
 ) => {
@@ -234,7 +234,7 @@ const handleClickOutside = (
 
 const handleKeyDown = (
   event: globalThis.KeyboardEvent,
-  ref: RefObject<HTMLDivElement>,
+  ref: RefObject<HTMLDivElement | null>,
   options: DataType,
   searchBarActive: boolean,
   setSearch: Dispatch<SetStateAction<string>>,

packages/ui/src/components/SelectInputV2/SelectBar.tsx

@@ -26,15 +26,15 @@ type SelectBarProps = {
   success?: string
   error?: string
   autoFocus?: boolean
-  innerRef: RefObject<HTMLDivElement>
+  innerRef: RefObject<HTMLDivElement | null>
   id?: string
   'data-testid': string
   label?: string
   tooltip?: string
 }
 
 type DisplayValuesProps = {
-  refTag: RefObject<HTMLDivElement>
+  refTag: RefObject<HTMLDivElement | null>
   nonOverflowedValues: OptionType[]
   disabled: boolean
   readOnly: boolean

packages/ui/src/components/SelectInputV2/SelectInputProvider.tsx

@@ -61,7 +61,7 @@ type SelectInputProviderProps<IsMulti extends boolean> = {
   selectAllGroup: boolean
   numberOfOptions: number
   multiselect: IsMulti
-  refSelect?: RefObject<HTMLDivElement>
+  refSelect?: RefObject<HTMLDivElement | null>
   onChange?: IsMulti extends true
     ? (value: string[]) => void
     : (value: string) => void

packages/ui/src/components/SelectInputV2/index.tsx

@@ -172,7 +172,7 @@ export const SelectInputV2 = <IsMulti extends undefined | boolean>({
 }: SelectInputV2Props<IsMulti>) => {
   const localId = useId()
   const finalId = id ?? localId
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useRef<HTMLDivElement | null>(null)
   const numberOfOptions = Array.isArray(options)
     ? options.length
     : Object.values(options).reduce(

packages/ui/src/components/Tabs/index.tsx

@@ -146,7 +146,7 @@ export const Tabs = ({
     if (isValidElement<typeof Tab>(child)) {
       return cloneElement(child as ReactElement, {
         ...child.props,
-        subtitle: null,
+        // subtitle: null,
       })
     }