diff --git a/examples/next-advanced/next.config.js b/examples/next-advanced/next.config.js
index a1cd5604ee..a121e60b70 100644
--- a/examples/next-advanced/next.config.js
+++ b/examples/next-advanced/next.config.js
@@ -9,22 +9,13 @@ const nextConfig = () => {
     },
     poweredByHeader: false,
     reactStrictMode: true,
-    swcMinify: true,
     compiler: {
       emotion: true,
     },
     eslint: {
       ignoreDuringBuilds: true,
     },
-    experimental: {
-      esmExternals: 'loose', // See https://github.com/Hacker0x01/react-datepicker/issues/3834
-    },
-    transpilePackages: [
-      '@ultraviolet/ui',
-      '@ultraviolet/form',
-      '@ultraviolet/icons',
-      'react-syntax-highlighter',
-    ],
+    transpilePackages: ['react-syntax-highlighter'],
   }
 
   return config
diff --git a/examples/next-login/next.config.js b/examples/next-login/next.config.js
index b9ae5fd679..e626c83012 100644
--- a/examples/next-login/next.config.js
+++ b/examples/next-login/next.config.js
@@ -9,21 +9,12 @@ const nextConfig = () => {
     },
     poweredByHeader: false,
     reactStrictMode: true,
-    swcMinify: true,
     compiler: {
       emotion: true,
     },
     eslint: {
       ignoreDuringBuilds: true,
     },
-    experimental: {
-      esmExternals: 'loose', // See https://github.com/Hacker0x01/react-datepicker/issues/3834
-    },
-    transpilePackages: [
-      '@ultraviolet/ui',
-      '@ultraviolet/form',
-      '@ultraviolet/icons',
-    ],
   }
   return config
 }
diff --git a/examples/next-login/package.json b/examples/next-login/package.json
index 808b8b793b..982018c958 100644
--- a/examples/next-login/package.json
+++ b/examples/next-login/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
+    "@ultraviolet/fonts": "workspace:*",
     "@ultraviolet/form": "workspace:*",
     "@ultraviolet/icons": "workspace:*",
     "@ultraviolet/ui": "workspace:*",
@@ -31,7 +32,7 @@
   "devDependencies": {
     "@babel/core": "7.26.0",
     "@types/node": "22.10.2",
-    "@types/react":"19.0.0",
+    "@types/react": "19.0.0",
     "@types/react-syntax-highlighter": "15.5.13",
     "next-transpile-modules": "10.0.1"
   }
diff --git a/examples/next-simple/next.config.js b/examples/next-simple/next.config.js
index bdefa8a3c9..24cfebb68e 100644
--- a/examples/next-simple/next.config.js
+++ b/examples/next-simple/next.config.js
@@ -9,21 +9,12 @@ const nextConfig = () => {
     },
     poweredByHeader: false,
     reactStrictMode: true,
-    swcMinify: true,
     compiler: {
       emotion: true,
     },
     eslint: {
       ignoreDuringBuilds: true,
     },
-    experimental: {
-      esmExternals: 'loose', // See https://github.com/Hacker0x01/react-datepicker/issues/3834
-    },
-    transpilePackages: [
-      '@ultraviolet/ui',
-      '@ultraviolet/form',
-      '@ultraviolet/icons',
-    ],
   }
 
   return config
diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/Direction.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/Direction.stories.tsx
index 2f7db85abb..3cd30db827 100644
--- a/packages/form/src/components/CheckboxGroupField/__stories__/Direction.stories.tsx
+++ b/packages/form/src/components/CheckboxGroupField/__stories__/Direction.stories.tsx
@@ -1,9 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { CheckboxGroupField } from '..'
 import { useFormContext } from '../../..'
 
-export const DirectionStory: StoryFn<typeof CheckboxGroupField> = args => {
+const DirectionTemplate = (args: ComponentProps<typeof CheckboxGroupField>) => {
   const { watch } = useFormContext()
 
   return (
@@ -27,7 +28,7 @@ export const DirectionStory: StoryFn<typeof CheckboxGroupField> = args => {
 }
 
 export const Direction: StoryFn<typeof CheckboxGroupField> = args => (
-  <DirectionStory {...args} />
+  <DirectionTemplate {...args} />
 )
 
 Direction.parameters = {
diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/NotRequired.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/NotRequired.stories.tsx
index 419f143d55..9c3bf709e1 100644
--- a/packages/form/src/components/CheckboxGroupField/__stories__/NotRequired.stories.tsx
+++ b/packages/form/src/components/CheckboxGroupField/__stories__/NotRequired.stories.tsx
@@ -1,9 +1,12 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { CheckboxGroupField } from '..'
 import { Submit } from '../..'
 
-export const NotRequiredStory: StoryFn<typeof CheckboxGroupField> = args => (
+export const NotRequiredTemplate = (
+  args: ComponentProps<typeof CheckboxGroupField>,
+) => (
   <Stack gap={1}>
     <CheckboxGroupField {...args}>
       <CheckboxGroupField.Checkbox
@@ -24,7 +27,7 @@ export const NotRequiredStory: StoryFn<typeof CheckboxGroupField> = args => (
 )
 
 export const NotRequired: StoryFn<typeof CheckboxGroupField> = args => (
-  <NotRequiredStory {...args} />
+  <NotRequiredTemplate {...args} />
 )
 
 NotRequired.parameters = {
diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/PartiallyRequired.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/PartiallyRequired.stories.tsx
index a63db090e5..908e561f20 100644
--- a/packages/form/src/components/CheckboxGroupField/__stories__/PartiallyRequired.stories.tsx
+++ b/packages/form/src/components/CheckboxGroupField/__stories__/PartiallyRequired.stories.tsx
@@ -1,11 +1,12 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { CheckboxGroupField } from '..'
 import { Submit } from '../..'
 
-export const PartiallyRequiredStory: StoryFn<
-  typeof CheckboxGroupField
-> = args => (
+const PartiallyRequiredStory = (
+  args: ComponentProps<typeof CheckboxGroupField>,
+) => (
   <Stack gap={1}>
     <CheckboxGroupField {...args}>
       <CheckboxGroupField.Checkbox
diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/Required.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/Required.stories.tsx
index f1f30b05e5..06212549e6 100644
--- a/packages/form/src/components/CheckboxGroupField/__stories__/Required.stories.tsx
+++ b/packages/form/src/components/CheckboxGroupField/__stories__/Required.stories.tsx
@@ -1,9 +1,12 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { CheckboxGroupField } from '..'
 import { Submit } from '../..'
 
-export const RequiredStory: StoryFn<typeof CheckboxGroupField> = args => (
+export const RequiredTemplate = (
+  args: ComponentProps<typeof CheckboxGroupField>,
+) => (
   <Stack gap={1}>
     <CheckboxGroupField {...args}>
       <CheckboxGroupField.Checkbox
@@ -21,7 +24,7 @@ export const RequiredStory: StoryFn<typeof CheckboxGroupField> = args => (
 )
 
 export const Required: StoryFn<typeof CheckboxGroupField> = args => (
-  <RequiredStory {...args} />
+  <RequiredTemplate {...args} />
 )
 
 Required.parameters = {
diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx
index 6e8d89b8ae..dae36490fe 100644
--- a/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx
+++ b/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx
@@ -1,8 +1,11 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { CheckboxGroupField } from '..'
 
-const CheckboxGroupFieldStory: StoryFn<typeof CheckboxGroupField> = args => (
+const CheckboxGroupTemplate = (
+  args: ComponentProps<typeof CheckboxGroupField>,
+) => (
   <Stack gap={2}>
     <CheckboxGroupField {...args}>
       <CheckboxGroupField.Checkbox
@@ -19,7 +22,7 @@ const CheckboxGroupFieldStory: StoryFn<typeof CheckboxGroupField> = args => (
 )
 
 export const Template: StoryFn<typeof CheckboxGroupField> = args => (
-  <CheckboxGroupFieldStory {...args} />
+  <CheckboxGroupTemplate {...args} />
 )
 
 Template.args = {
diff --git a/packages/form/src/components/RadioGroupField/__stories__/Required.stories.tsx b/packages/form/src/components/RadioGroupField/__stories__/Required.stories.tsx
index 8f1c0adc17..7044afb1ca 100644
--- a/packages/form/src/components/RadioGroupField/__stories__/Required.stories.tsx
+++ b/packages/form/src/components/RadioGroupField/__stories__/Required.stories.tsx
@@ -1,9 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { RadioGroupField } from '..'
 import { Submit } from '../..'
 
-export const RequiredStory: StoryFn<typeof RadioGroupField> = args => (
+const RequiredTemplate = (args: ComponentProps<typeof RadioGroupField>) => (
   <Stack gap={1}>
     <RadioGroupField {...args}>
       <RadioGroupField.Radio value="radio-1" label="Radio 1" />
@@ -14,7 +15,7 @@ export const RequiredStory: StoryFn<typeof RadioGroupField> = args => (
 )
 
 export const Required: StoryFn<typeof RadioGroupField> = args => (
-  <RequiredStory {...args} />
+  <RequiredTemplate {...args} />
 )
 
 Required.args = {
diff --git a/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx b/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx
index 553a8e9542..693af75611 100644
--- a/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx
+++ b/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx
@@ -5,7 +5,7 @@ import { SelectInputField } from '..'
 export const Template: StoryFn<
   StoryFn<ComponentProps<typeof SelectInputField>>
 > = args => (
-  <SelectInputField {...args}>
+  <SelectInputField name="replace-me" {...args}>
     <SelectInputField.Option value="a">Option A</SelectInputField.Option>
     <SelectInputField.Option value="b">Option B</SelectInputField.Option>
   </SelectInputField>
diff --git a/packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx b/packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx
index 126a0b5536..a4bdea3c8e 100644
--- a/packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx
+++ b/packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx
@@ -1,10 +1,13 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { ToggleGroupField } from '..'
 import { Submit } from '../..'
 import { useWatch } from '../../..'
 
-export const RequiredStory: StoryFn<typeof ToggleGroupField> = args => {
+export const RequiredStory = (
+  args: ComponentProps<typeof ToggleGroupField>,
+) => {
   const values = useWatch()
 
   return (
diff --git a/packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx b/packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx
index 19e79e8876..7c7881ed95 100644
--- a/packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx
+++ b/packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx
@@ -1,9 +1,12 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { ToggleGroupField } from '..'
 import { useWatch } from '../../..'
 
-const ToggleGroupFieldStory: StoryFn<typeof ToggleGroupField> = args => {
+const ToggleGroupFieldStory = (
+  args: ComponentProps<typeof ToggleGroupField>,
+) => {
   const values = useWatch()
 
   return (
diff --git a/packages/icons/src/components/Icon/Icon.tsx b/packages/icons/src/components/Icon/Icon.tsx
index f8f17be1b9..da92332b76 100644
--- a/packages/icons/src/components/Icon/Icon.tsx
+++ b/packages/icons/src/components/Icon/Icon.tsx
@@ -124,6 +124,7 @@ export type IconProps = {
 /**
  * IconV2 component is our set of system icons in the design system. All of them are SVGs.
  */
+
 export const Icon = forwardRef<SVGSVGElement, IconProps>(
   (
     {
diff --git a/packages/plus/package.json b/packages/plus/package.json
index cd1e4d5afd..9a9ee7ac7a 100644
--- a/packages/plus/package.json
+++ b/packages/plus/package.json
@@ -74,7 +74,7 @@
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
     "@types/react": "19.0.0",
-    "@types/react-dom": "18.3.5",
+    "@types/react-dom": "19.0.0",
     "@ultraviolet/illustrations": "workspace:*",
     "@utils/test": "workspace:*",
     "react": "19.0.0",
diff --git a/packages/plus/src/components/EstimateCost/OverlayComponent.tsx b/packages/plus/src/components/EstimateCost/OverlayComponent.tsx
index c01da64854..3816dc6fb5 100644
--- a/packages/plus/src/components/EstimateCost/OverlayComponent.tsx
+++ b/packages/plus/src/components/EstimateCost/OverlayComponent.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import { Icon, Stack } from '@ultraviolet/ui'
-import type { ReactNode } from 'react'
+import type { JSX, ReactNode } from 'react'
 import { Children, cloneElement, isValidElement, useMemo } from 'react'
 import { LineThrough } from './Components/LineThrough'
 import { Strong } from './Components/Strong'
diff --git a/packages/plus/src/components/EstimateCost/types.ts b/packages/plus/src/components/EstimateCost/types.ts
index 26b49d4af6..bc18a583c1 100644
--- a/packages/plus/src/components/EstimateCost/types.ts
+++ b/packages/plus/src/components/EstimateCost/types.ts
@@ -1,5 +1,5 @@
 import type { Alert } from '@ultraviolet/ui'
-import type { ComponentProps, ReactNode } from 'react'
+import type { ComponentProps, JSX, ReactNode } from 'react'
 import type EstimateCostLocales from './locales/en'
 
 export type EstimateCostProps = {
diff --git a/packages/plus/src/components/Navigation/Footer.tsx b/packages/plus/src/components/Navigation/Footer.tsx
index 1cebeb7462..83d662631c 100644
--- a/packages/plus/src/components/Navigation/Footer.tsx
+++ b/packages/plus/src/components/Navigation/Footer.tsx
@@ -25,7 +25,7 @@ const StickyFooter = styled.div`
 
 type FooterProps = {
   onToggleExpand: NavigationProps['onToggleExpand']
-  contentRef: RefObject<HTMLDivElement>
+  contentRef: RefObject<HTMLDivElement | null>
 }
 
 export const Footer = ({ onToggleExpand, contentRef }: FooterProps) => {
diff --git a/packages/plus/src/components/Navigation/NavigationContent.tsx b/packages/plus/src/components/Navigation/NavigationContent.tsx
index fb6b42764c..91eb7aa193 100644
--- a/packages/plus/src/components/Navigation/NavigationContent.tsx
+++ b/packages/plus/src/components/Navigation/NavigationContent.tsx
@@ -116,8 +116,8 @@ export const NavigationContent = ({
     shouldAnimate,
   } = context
 
-  const sliderRef = useRef<HTMLDivElement>(null)
-  const contentRef = useRef<HTMLDivElement>(null)
+  const sliderRef = useRef<HTMLDivElement | null>(null)
+  const contentRef = useRef<HTMLDivElement | null>(null)
 
   // It will handle the resize of the navigation when the user drag the vertical bar
   useEffect(() => {
diff --git a/packages/plus/src/components/Navigation/NavigationProvider.tsx b/packages/plus/src/components/Navigation/NavigationProvider.tsx
index 442dc76c5b..6a47b51734 100644
--- a/packages/plus/src/components/Navigation/NavigationProvider.tsx
+++ b/packages/plus/src/components/Navigation/NavigationProvider.tsx
@@ -1,4 +1,4 @@
-import type { Dispatch, ReactNode, Reducer, RefObject } from 'react'
+import type { Dispatch, ReactNode, RefObject } from 'react'
 import {
   createContext,
   useCallback,
@@ -33,7 +33,7 @@ type ContextProps = {
   unpinItem: (item: string) => string[]
   pinnedItems: string[]
   pinLimit: number
-  navigationRef: RefObject<HTMLDivElement>
+  navigationRef: RefObject<HTMLDivElement | null>
   locales: Record<keyof typeof NavigationLocales, string>
   width: number
   setWidth: (width: number) => void
@@ -156,14 +156,14 @@ export const NavigationProvider = ({
 
   // This is used to store the items that are registered in the navigation
   // This way we can retrieve items with their active state in pinned feature
-  const [items, registerItem] = useReducer<Reducer<Items, Items>>(
+  const [items, registerItem] = useReducer(
     (oldState: Items, newState: Items) => ({
       ...oldState,
       ...newState,
     }),
     {},
   )
-  const navigationRef = useRef<HTMLDivElement>(null)
+  const navigationRef = useRef<HTMLDivElement | null>(null)
 
   // This function will be triggered when expand/collapse button is clicked
   const toggleExpand = useCallback(
diff --git a/packages/ui/src/components/Modal/__stories__/AutoFocus.stories.tsx b/packages/ui/src/components/Modal/__stories__/AutoFocus.stories.tsx
index c2c2519c27..d853dc9e67 100644
--- a/packages/ui/src/components/Modal/__stories__/AutoFocus.stories.tsx
+++ b/packages/ui/src/components/Modal/__stories__/AutoFocus.stories.tsx
@@ -12,7 +12,11 @@ export const AutoFocus: StoryFn = props => (
       <TextInputV2 placeholder="placeholder" />
       <TextInputV2
         placeholder="placeholder"
-        ref={ref => setTimeout(() => ref?.focus(), 1)}
+        ref={ref => {
+          if (ref) {
+            setTimeout(() => ref?.focus(), 1)
+          }
+        }}
       />
     </div>
   </Modal>
diff --git a/packages/ui/src/components/NumberInputV2/__stories__/MinMax.stories.tsx b/packages/ui/src/components/NumberInputV2/__stories__/MinMax.stories.tsx
index 4d0961726e..596791f444 100644
--- a/packages/ui/src/components/NumberInputV2/__stories__/MinMax.stories.tsx
+++ b/packages/ui/src/components/NumberInputV2/__stories__/MinMax.stories.tsx
@@ -1,14 +1,15 @@
 import type { StoryFn } from '@storybook/react'
 import { useState } from 'react'
-import type { NumberInputV2 } from '../index'
-import { Template } from './Template.stories'
+import { NumberInputV2 } from '..'
 
-export const MinMax: StoryFn<typeof NumberInputV2> = args => {
+export const Template: StoryFn<typeof NumberInputV2> = props => {
   const [value, setValue] = useState<number | null>(10)
 
-  return <Template {...args} value={value} onChange={setValue} />
+  return <NumberInputV2 {...props} value={value} onChange={setValue} />
 }
 
+export const MinMax = Template.bind({})
+
 MinMax.args = {
   id: 'number-input',
   label: 'Number Input',
diff --git a/packages/ui/src/components/Tabs/index.tsx b/packages/ui/src/components/Tabs/index.tsx
index 11dea82816..89ce316fa6 100644
--- a/packages/ui/src/components/Tabs/index.tsx
+++ b/packages/ui/src/components/Tabs/index.tsx
@@ -8,7 +8,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import type { HTMLAttributes, ReactElement, ReactNode } from 'react'
+import type { ComponentProps, HTMLAttributes, ReactNode } from 'react'
 import { StyledTabButton, Tab } from './Tab'
 import { TabMenu } from './TabMenu'
 import { TabMenuItem } from './TabMenuItem'
@@ -143,10 +143,10 @@ export const Tabs = ({
 
   // mapping of tab children to avoid using subtitle props
   const menuItemChildren = Children.map(children, child => {
-    if (isValidElement<typeof Tab>(child)) {
-      return cloneElement(child as ReactElement, {
+    if (isValidElement<ComponentProps<typeof Tab>>(child)) {
+      return cloneElement(child, {
         ...child.props,
-        // subtitle: null,
+        subtitle: null,
       })
     }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e4856bda27..8c397c587c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -612,8 +612,8 @@ importers:
         specifier: 19.0.0
         version: 19.0.0
       '@types/react-dom':
-        specifier: 18.3.5
-        version: 18.3.5(@types/react@19.0.0)
+        specifier: 19.0.0
+        version: 19.0.0
       '@ultraviolet/illustrations':
         specifier: workspace:*
         version: link:../illustrations
@@ -3188,11 +3188,6 @@ packages:
   '@types/react-datepicker@6.2.0':
     resolution: {integrity: sha512-+JtO4Fm97WLkJTH8j8/v3Ldh7JCNRwjMYjRaKh4KHH0M3jJoXtwiD3JBCsdlg3tsFIw9eQSqyAPeVDN2H2oM9Q==}
 
-  '@types/react-dom@18.3.5':
-    resolution: {integrity: sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==}
-    peerDependencies:
-      '@types/react': ^18.0.0
-
   '@types/react-dom@19.0.0':
     resolution: {integrity: sha512-1KfiQKsH1o00p9m5ag12axHQSb3FOU9H20UTrujVSkNhuCrRHiQWFqgEnTNK5ZNfnzZv8UWrnXVqCmCF9fgY3w==}
 
@@ -10948,10 +10943,6 @@ snapshots:
       - react
       - react-dom
 
-  '@types/react-dom@18.3.5(@types/react@19.0.0)':
-    dependencies:
-      '@types/react': 19.0.0
-
   '@types/react-dom@19.0.0':
     dependencies:
       '@types/react': 19.0.0