From 0f5f04c089f2de1d42cbd9d85f601cbfc1c109bd Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 12:36:13 +0200
Subject: [PATCH 01/13] enable alwaysStrict in the design system tsconfig

---
 assets/design-system/tsconfig.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/assets/design-system/tsconfig.json b/assets/design-system/tsconfig.json
index 93afff42a5..277428d585 100644
--- a/assets/design-system/tsconfig.json
+++ b/assets/design-system/tsconfig.json
@@ -11,8 +11,7 @@
     "strictFunctionTypes": false,
     "strictBindCallApply": false,
     "strictPropertyInitialization": false,
-    "noImplicitThis": false,
-    "alwaysStrict": false
+    "noImplicitThis": false
   },
   "include": ["src/**/*"]
 }

From ab77c6136b107d6f1240ac7d09513d51c889b580 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 12:42:39 +0200
Subject: [PATCH 02/13] enable strictBindCallApply in the design system using
 StoryFn

---
 .../design-system/src/stories/A.stories.tsx   |  3 +-
 .../src/stories/AWSIcons.stories.tsx          |  3 +-
 .../src/stories/Accordion.stories.tsx         |  3 +-
 .../src/stories/AppIcon.stories.tsx           |  3 +-
 .../src/stories/Avatar.stories.tsx            |  9 +--
 .../src/stories/Banner.stories.tsx            |  3 +-
 .../src/stories/Breadcrumbs.stories.tsx       |  5 +-
 .../src/stories/Button.stories.tsx            | 13 ++--
 .../src/stories/ButtonGroup.stories.tsx       |  3 +-
 .../src/stories/Callout.stories.tsx           | 19 ++---
 .../src/stories/Card.stories.tsx              |  7 +-
 .../src/stories/CatalogCard.stories.tsx       |  3 +-
 .../src/stories/CheckBox.stories.tsx          |  5 +-
 .../src/stories/Checklist.stories.tsx         |  3 +-
 .../src/stories/Chip.stories.tsx              |  3 +-
 .../src/stories/ChipList.stories.tsx          |  9 +--
 .../src/stories/Code.stories.tsx              |  9 +--
 .../src/stories/CodeEditor.stories.tsx        |  5 +-
 .../src/stories/Codeline.stories.tsx          |  5 +-
 assets/design-system/src/stories/Colors.tsx   |  3 +-
 .../src/stories/ComboBox.stories.tsx          |  9 +--
 .../src/stories/Date.stories.tsx              |  3 +-
 .../src/stories/DiffViewer.stories.tsx        |  5 +-
 .../src/stories/Divider.stories.tsx           |  5 +-
 .../src/stories/EmptyState.stories.tsx        |  3 +-
 .../src/stories/Flyover.stories.tsx           |  7 +-
 .../src/stories/FormField.stories.tsx         | 27 +++----
 .../src/stories/FormTitle.stories.tsx         |  3 +-
 .../src/stories/Highlight.stories.tsx         |  3 +-
 .../src/stories/IconFrame.stories.tsx         | 71 ++++++++++---------
 .../src/stories/Icons.stories.tsx             | 15 ++--
 .../src/stories/InlineCode.stories.tsx        |  3 +-
 .../src/stories/Input.stories.tsx             | 17 ++---
 .../src/stories/ListBox.stories.tsx           |  3 +-
 .../src/stories/LoadingSpinner.stories.tsx    |  3 +-
 .../src/stories/LoopingLogo.stories.tsx       |  3 +-
 .../src/stories/Markdown.stories.tsx          |  3 +-
 .../src/stories/Modal.stories.tsx             |  7 +-
 .../src/stories/PageCard.stories.tsx          |  3 +-
 .../src/stories/PageTitle.stories.tsx         |  5 +-
 .../src/stories/ProgressBar.stories.tsx       |  5 +-
 .../src/stories/Prop.stories.tsx              |  3 +-
 .../src/stories/PropWide.stories.tsx          |  3 +-
 .../src/stories/PropsContainer.stories.tsx    |  3 +-
 .../src/stories/Radio.stories.tsx             |  5 +-
 .../src/stories/RepositoryCard.stories.tsx    |  5 +-
 .../src/stories/RepositoryChip.stories.tsx    |  7 +-
 .../src/stories/SegmentedInput.stories.tsx    |  5 +-
 .../src/stories/Select.stories.tsx            |  3 +-
 .../src/stories/Sidecar.stories.tsx           |  3 +-
 .../src/stories/Slider.stories.tsx            |  3 +-
 .../src/stories/StackCard.stories.tsx         |  3 +-
 .../src/stories/Stepper.stories.tsx           | 13 ++--
 .../src/stories/Switch.stories.tsx            |  5 +-
 .../design-system/src/stories/Tab.stories.tsx |  7 +-
 .../src/stories/TabList.stories.tsx           |  9 +--
 .../src/stories/Table.stories.tsx             | 27 +++----
 .../src/stories/TextSwitch.stories.tsx        |  3 +-
 .../src/stories/TipCarousel.stories.tsx       |  3 +-
 .../src/stories/Toast.stories.tsx             |  5 +-
 .../src/stories/Tooltip.stories.tsx           |  3 +-
 .../src/stories/TreeNavigation.stories.tsx    |  3 +-
 .../design-system/src/stories/Typography.tsx  |  3 +-
 .../src/stories/UserDetails.stories.tsx       |  3 +-
 .../src/stories/ValidatedInput.stories.tsx    |  3 +-
 .../src/stories/Wizard.stories.tsx            |  5 +-
 .../src/stories/_SemanticSystem.stories.tsx   |  3 +-
 assets/design-system/tsconfig.json            |  1 -
 68 files changed, 264 insertions(+), 194 deletions(-)

diff --git a/assets/design-system/src/stories/A.stories.tsx b/assets/design-system/src/stories/A.stories.tsx
index ed9299e164..f684065749 100644
--- a/assets/design-system/src/stories/A.stories.tsx
+++ b/assets/design-system/src/stories/A.stories.tsx
@@ -1,4 +1,5 @@
 import { A, Flex } from 'honorable'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'A',
@@ -29,7 +30,7 @@ function Template(args: any) {
   )
 }
 
-export const Primary = Template.bind({})
+export const Primary: StoryFn = Template.bind({})
 
 Primary.args = {
   children: 'Click me',
diff --git a/assets/design-system/src/stories/AWSIcons.stories.tsx b/assets/design-system/src/stories/AWSIcons.stories.tsx
index d9838d7267..7178b0bf8d 100644
--- a/assets/design-system/src/stories/AWSIcons.stories.tsx
+++ b/assets/design-system/src/stories/AWSIcons.stories.tsx
@@ -1,5 +1,6 @@
 import { useTheme } from 'styled-components'
 import AWSIcon, { AWSIconName } from '../components/icons/AWSIcon'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'AWSIcon',
@@ -45,7 +46,7 @@ function Template({ size, ...args }: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   size: 32,
 }
diff --git a/assets/design-system/src/stories/Accordion.stories.tsx b/assets/design-system/src/stories/Accordion.stories.tsx
index 2c4877ca65..e932f786af 100644
--- a/assets/design-system/src/stories/Accordion.stories.tsx
+++ b/assets/design-system/src/stories/Accordion.stories.tsx
@@ -1,5 +1,6 @@
 import { Accordion } from '..'
 import { AccordionItem } from '../components/Accordion'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Accordion',
@@ -38,7 +39,7 @@ export default {
   },
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   type: 'single',
   padding: 'relaxed',
diff --git a/assets/design-system/src/stories/AppIcon.stories.tsx b/assets/design-system/src/stories/AppIcon.stories.tsx
index 37fcfb8291..bc890e3229 100644
--- a/assets/design-system/src/stories/AppIcon.stories.tsx
+++ b/assets/design-system/src/stories/AppIcon.stories.tsx
@@ -3,6 +3,7 @@ import { Flex, H3 } from 'honorable'
 import { Card, PluralLogoMark, WrapWithIf } from '..'
 
 import AppIcon from '../components/AppIcon'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'AppIcon',
@@ -104,7 +105,7 @@ function Template({ onFillLevel, icon, ...args }: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   name: 'Michael J Guarino',
   initials: '',
diff --git a/assets/design-system/src/stories/Avatar.stories.tsx b/assets/design-system/src/stories/Avatar.stories.tsx
index a586e2b08e..d2b35a757d 100644
--- a/assets/design-system/src/stories/Avatar.stories.tsx
+++ b/assets/design-system/src/stories/Avatar.stories.tsx
@@ -1,4 +1,5 @@
 import { Avatar } from 'honorable'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Avatar',
@@ -9,25 +10,25 @@ function Template(args: any) {
   return <Avatar {...args} />
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   name: 'Jane Smith',
 }
 
-export const ComplexName = Template.bind({})
+export const ComplexName: StoryFn = Template.bind({})
 
 ComplexName.args = {
   name: 'Edgard Alan Poe',
 }
 
-export const Image = Template.bind({})
+export const Image: StoryFn = Template.bind({})
 
 Image.args = {
   src: 'https://avatars.githubusercontent.com/u/4154003?v=4',
 }
 
-export const Small = Template.bind({})
+export const Small: StoryFn = Template.bind({})
 
 Small.args = {
   name: 'Jane Smith',
diff --git a/assets/design-system/src/stories/Banner.stories.tsx b/assets/design-system/src/stories/Banner.stories.tsx
index 7522170e3f..cb513d0a26 100644
--- a/assets/design-system/src/stories/Banner.stories.tsx
+++ b/assets/design-system/src/stories/Banner.stories.tsx
@@ -1,6 +1,7 @@
 import { A, Flex, H1 } from 'honorable'
 
 import Banner, { BANNER_SEVERITIES } from '../components/Banner'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Banner (AKA Toast Content)',
@@ -133,7 +134,7 @@ function Template({ closeButton, ...args }: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   closeButton: false,
diff --git a/assets/design-system/src/stories/Breadcrumbs.stories.tsx b/assets/design-system/src/stories/Breadcrumbs.stories.tsx
index 7f952351cf..b474c5f7c7 100644
--- a/assets/design-system/src/stories/Breadcrumbs.stories.tsx
+++ b/assets/design-system/src/stories/Breadcrumbs.stories.tsx
@@ -13,6 +13,7 @@ import { ListBoxItem } from '../components/ListBoxItem'
 import FormField from '../components/FormField'
 
 import { NavContextProviderStub } from './NavigationContextStub'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Breadcrumbs',
@@ -159,7 +160,7 @@ function ManualTemplate(args: any) {
   )
 }
 
-export const UsingContext = WithContextTemplate.bind({})
+export const UsingContext: StoryFn = WithContextTemplate.bind({})
 
 UsingContext.args = {
   minLength: undefined,
@@ -167,7 +168,7 @@ UsingContext.args = {
   collapsible: true,
 }
 
-export const Manual = ManualTemplate.bind({})
+export const Manual: StoryFn = ManualTemplate.bind({})
 
 Manual.args = {
   minLength: undefined,
diff --git a/assets/design-system/src/stories/Button.stories.tsx b/assets/design-system/src/stories/Button.stories.tsx
index eaa2e0f55e..e7207d5345 100644
--- a/assets/design-system/src/stories/Button.stories.tsx
+++ b/assets/design-system/src/stories/Button.stories.tsx
@@ -2,6 +2,7 @@ import { useTheme } from 'styled-components'
 import Button from '../components/Button'
 import Flex from '../components/Flex'
 import DownloadIcon from '../components/icons/DownloadIcon'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Button',
@@ -87,7 +88,7 @@ function Template(args: any) {
   )
 }
 
-export const Primary = Template.bind({})
+export const Primary: StoryFn = Template.bind({})
 
 Primary.args = {
   disabled: false,
@@ -95,7 +96,7 @@ Primary.args = {
   children: 'Primary Button',
 }
 
-export const SecondaryFloating = Template.bind({})
+export const SecondaryFloating: StoryFn = Template.bind({})
 
 SecondaryFloating.args = {
   disabled: false,
@@ -104,7 +105,7 @@ SecondaryFloating.args = {
   floating: true,
 }
 
-export const SecondaryOutline = Template.bind({})
+export const SecondaryOutline: StoryFn = Template.bind({})
 
 SecondaryOutline.args = {
   disabled: false,
@@ -113,7 +114,7 @@ SecondaryOutline.args = {
   secondary: true,
 }
 
-export const Tertiary = Template.bind({})
+export const Tertiary: StoryFn = Template.bind({})
 
 Tertiary.args = {
   disabled: false,
@@ -123,7 +124,7 @@ Tertiary.args = {
   padding: '',
 }
 
-export const TertiaryNoPadding = Template.bind({})
+export const TertiaryNoPadding: StoryFn = Template.bind({})
 
 TertiaryNoPadding.args = {
   disabled: false,
@@ -133,7 +134,7 @@ TertiaryNoPadding.args = {
   padding: 'none',
 }
 
-export const Destructive = Template.bind({})
+export const Destructive: StoryFn = Template.bind({})
 
 Destructive.args = {
   disabled: false,
diff --git a/assets/design-system/src/stories/ButtonGroup.stories.tsx b/assets/design-system/src/stories/ButtonGroup.stories.tsx
index 91539e1fe5..0232f5ada2 100644
--- a/assets/design-system/src/stories/ButtonGroup.stories.tsx
+++ b/assets/design-system/src/stories/ButtonGroup.stories.tsx
@@ -4,6 +4,7 @@ import { useRef, useState } from 'react'
 import { type Key } from '@react-types/shared'
 
 import { SubTab, TabList, type TabListStateProps, TabPanel } from '..'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'ButtonGroup',
@@ -101,7 +102,7 @@ function TemplateBasic(args: any) {
   )
 }
 
-export const Default = TemplateBasic.bind({})
+export const Default: StoryFn = TemplateBasic.bind({})
 Default.args = {
   size: 'small',
 }
diff --git a/assets/design-system/src/stories/Callout.stories.tsx b/assets/design-system/src/stories/Callout.stories.tsx
index b17f4b1739..fc24d60b61 100644
--- a/assets/design-system/src/stories/Callout.stories.tsx
+++ b/assets/design-system/src/stories/Callout.stories.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react'
 
 import { type FillLevel } from '../components/contexts/FillLevelContext'
 import { Button, Callout, type CalloutProps, Card } from '..'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Callout',
@@ -186,7 +187,7 @@ function CloseableTemplate({ title }: CalloutProps) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   title: '',
   size: 'full',
@@ -194,7 +195,7 @@ Default.args = {
   onFillLevel: 0,
 }
 
-export const WithTitle = Template.bind({})
+export const WithTitle: StoryFn = Template.bind({})
 WithTitle.args = {
   title: 'Title text - How to write a dummy title',
   size: 'full',
@@ -202,7 +203,7 @@ WithTitle.args = {
   onFillLevel: 0,
 }
 
-export const OnlyTitle = Template.bind({})
+export const OnlyTitle: StoryFn = Template.bind({})
 OnlyTitle.args = {
   title: 'Title text - How to write a dummy title',
   size: 'full',
@@ -211,7 +212,7 @@ OnlyTitle.args = {
   onFillLevel: 0,
 }
 
-export const Compact = Template.bind({})
+export const Compact: StoryFn = Template.bind({})
 Compact.args = {
   title: '',
   size: 'compact',
@@ -219,7 +220,7 @@ Compact.args = {
   onFillLevel: 0,
 }
 
-export const WithButton = Template.bind({})
+export const WithButton: StoryFn = Template.bind({})
 WithButton.args = {
   title: '',
   size: 'full',
@@ -227,18 +228,18 @@ WithButton.args = {
   onFillLevel: 0,
 }
 
-export const Expandable = ExpandableTemplate.bind({})
+export const Expandable: StoryFn = ExpandableTemplate.bind({})
 Expandable.args = {
   title: 'Why do I need to authenticate with GitHub/GitLab?',
   controlled: 'false',
 }
 
-export const Closeable = CloseableTemplate.bind({})
+export const Closeable: StoryFn = CloseableTemplate.bind({})
 Expandable.args = {
   title: 'Why do I need to authenticate with GitHub/GitLab?',
 }
 
-export const KitchenSink = Template.bind({})
+export const KitchenSink: StoryFn = Template.bind({})
 KitchenSink.args = {
   title: 'Title text - How to write a dummy title',
   size: 'full',
@@ -246,7 +247,7 @@ KitchenSink.args = {
   onFillLevel: 0,
 }
 
-export const OnCard = Template.bind({})
+export const OnCard: StoryFn = Template.bind({})
 OnCard.args = {
   title: 'Title text - How to write a dummy title',
   size: 'full',
diff --git a/assets/design-system/src/stories/Card.stories.tsx b/assets/design-system/src/stories/Card.stories.tsx
index 94a8c8ed2b..ab59fdb43f 100644
--- a/assets/design-system/src/stories/Card.stories.tsx
+++ b/assets/design-system/src/stories/Card.stories.tsx
@@ -6,6 +6,7 @@ import { type FillLevel } from '../components/contexts/FillLevelContext'
 
 import type { CardProps } from '../components/Card'
 import { Card, Flex, InfoOutlineIcon, Tooltip } from '../index'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Card',
@@ -137,7 +138,7 @@ function FillLevelTemplate({
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   selected: false,
   clickable: false,
@@ -159,7 +160,7 @@ Default.args = {
   ),
 }
 
-export const Clickable = Template.bind({})
+export const Clickable: StoryFn = Template.bind({})
 Clickable.args = {
   ...Default.args,
   ...{
@@ -167,7 +168,7 @@ Clickable.args = {
   },
 }
 
-export const WithFillLevelContext = FillLevelTemplate.bind({})
+export const WithFillLevelContext: StoryFn = FillLevelTemplate.bind({})
 WithFillLevelContext.args = {
   selected: false,
   clickable: false,
diff --git a/assets/design-system/src/stories/CatalogCard.stories.tsx b/assets/design-system/src/stories/CatalogCard.stories.tsx
index 158d1eae35..c4c570dd91 100644
--- a/assets/design-system/src/stories/CatalogCard.stories.tsx
+++ b/assets/design-system/src/stories/CatalogCard.stories.tsx
@@ -1,6 +1,7 @@
 import { Div } from 'honorable'
 
 import CatalogCard from '../components/CatalogCard'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'CatalogCard',
@@ -43,7 +44,7 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   name: 'Base catalog',
diff --git a/assets/design-system/src/stories/CheckBox.stories.tsx b/assets/design-system/src/stories/CheckBox.stories.tsx
index 2f39a668b3..ba927d9cab 100644
--- a/assets/design-system/src/stories/CheckBox.stories.tsx
+++ b/assets/design-system/src/stories/CheckBox.stories.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { type Key } from '@react-types/shared'
 
 import { Button, Checkbox } from '..'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Checkbox',
@@ -86,7 +87,7 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   small: false,
   disabled: false,
@@ -94,7 +95,7 @@ Default.args = {
   tabIndex: 0,
 }
 
-export const Small = Template.bind({})
+export const Small: StoryFn = Template.bind({})
 Small.args = {
   small: true,
   disabled: false,
diff --git a/assets/design-system/src/stories/Checklist.stories.tsx b/assets/design-system/src/stories/Checklist.stories.tsx
index 909e69806d..020320e0b7 100644
--- a/assets/design-system/src/stories/Checklist.stories.tsx
+++ b/assets/design-system/src/stories/Checklist.stories.tsx
@@ -7,6 +7,7 @@ import DownloadIcon from '../components/icons/DownloadIcon'
 import GitHubLogoIcon from '../components/icons/GitHubLogoIcon'
 import MarketIcon from '../components/icons/MarketIcon'
 import TerminalIcon from '../components/icons/TerminalIcon'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Checklist',
@@ -213,6 +214,6 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {}
diff --git a/assets/design-system/src/stories/Chip.stories.tsx b/assets/design-system/src/stories/Chip.stories.tsx
index 7573fc19ba..4b228bc50e 100644
--- a/assets/design-system/src/stories/Chip.stories.tsx
+++ b/assets/design-system/src/stories/Chip.stories.tsx
@@ -8,6 +8,7 @@ import Card from '../components/Card'
 import { SEVERITIES } from '../types'
 
 import { Link } from './NavigationContextStub'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Chip',
@@ -232,7 +233,7 @@ function Template({ onFillLevel, asLink, ...args }: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   closeButton: true,
   clickable: true,
diff --git a/assets/design-system/src/stories/ChipList.stories.tsx b/assets/design-system/src/stories/ChipList.stories.tsx
index a2c6506096..9bbad01034 100644
--- a/assets/design-system/src/stories/ChipList.stories.tsx
+++ b/assets/design-system/src/stories/ChipList.stories.tsx
@@ -5,6 +5,7 @@ import Card from '../components/Card'
 import ChipList from '../components/ChipList'
 import WrapWithIf from '../components/WrapWithIf'
 import { SEVERITIES } from '../types'
+import type { StoryFn } from '@storybook/react'
 
 const sizes: ComponentProps<typeof Chip>['size'][] = [
   'small',
@@ -151,28 +152,28 @@ function EmptyTemplate({ onFillLevel, ...args }: any) {
   )
 }
 
-export const Text = TextTemplate.bind({})
+export const Text: StoryFn = TextTemplate.bind({})
 Text.args = {
   severity: 'info',
   size: 'small',
   onFillLevel: 0,
 }
 
-export const Label = LabelTemplate.bind({})
+export const Label: StoryFn = LabelTemplate.bind({})
 Label.args = {
   severity: 'info',
   size: 'small',
   onFillLevel: 0,
 }
 
-export const Empty = EmptyTemplate.bind({})
+export const Empty: StoryFn = EmptyTemplate.bind({})
 Empty.args = {
   severity: 'info',
   size: 'small',
   onFillLevel: 0,
 }
 
-export const CustomClick = CustomClickTemplate.bind({})
+export const CustomClick: StoryFn = CustomClickTemplate.bind({})
 CustomClick.args = {
   severity: 'info',
   size: 'small',
diff --git a/assets/design-system/src/stories/Code.stories.tsx b/assets/design-system/src/stories/Code.stories.tsx
index 7a4515965b..23c9f689cf 100644
--- a/assets/design-system/src/stories/Code.stories.tsx
+++ b/assets/design-system/src/stories/Code.stories.tsx
@@ -2,6 +2,7 @@ import { Flex } from 'honorable'
 import { useTheme } from 'styled-components'
 
 import { Card, Code, WrapWithIf } from '..'
+import type { StoryFn } from '@storybook/react'
 
 import {
   cCode,
@@ -232,14 +233,14 @@ function WithTabsTemplate({ onFillLevel, title, ...args }: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   title: '',
   showLineNumbers: true,
   showHeader: undefined,
 }
 
-export const WithTabs = WithTabsTemplate.bind({})
+export const WithTabs: StoryFn = WithTabsTemplate.bind({})
 WithTabs.args = {
   title: 'This is an optional title',
   showLineNumbers: true,
@@ -350,7 +351,7 @@ function MermaidTemplate({ onFillLevel, ...args }: any) {
   )
 }
 
-export const Mermaid = MermaidTemplate.bind({})
+export const Mermaid: StoryFn = MermaidTemplate.bind({})
 Mermaid.args = {
   title: '',
   showLineNumbers: false,
@@ -414,7 +415,7 @@ function MermaidWithTabsTemplate({ onFillLevel, title, ...args }: any) {
   )
 }
 
-export const MermaidWithTabs = MermaidWithTabsTemplate.bind({})
+export const MermaidWithTabs: StoryFn = MermaidWithTabsTemplate.bind({})
 MermaidWithTabs.args = {
   title: 'Mermaid Diagrams',
   showLineNumbers: false,
diff --git a/assets/design-system/src/stories/CodeEditor.stories.tsx b/assets/design-system/src/stories/CodeEditor.stories.tsx
index 7371de4148..88cf74d174 100644
--- a/assets/design-system/src/stories/CodeEditor.stories.tsx
+++ b/assets/design-system/src/stories/CodeEditor.stories.tsx
@@ -3,6 +3,7 @@ import { Div, Flex } from 'honorable'
 import { Card, CodeEditor, WrapWithIf } from '..'
 
 import { goCode, jsCode, tfCode } from '../constants'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Code Editor',
@@ -111,10 +112,10 @@ function StretchedTemplate({ onFillLevel, ...args }: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   options: { lineNumbers: true },
 }
 
-export const Stretched = StretchedTemplate.bind({})
+export const Stretched: StoryFn = StretchedTemplate.bind({})
 Stretched.args = {}
diff --git a/assets/design-system/src/stories/Codeline.stories.tsx b/assets/design-system/src/stories/Codeline.stories.tsx
index bf5addbcfc..a16dfaa60b 100644
--- a/assets/design-system/src/stories/Codeline.stories.tsx
+++ b/assets/design-system/src/stories/Codeline.stories.tsx
@@ -1,6 +1,7 @@
 import { Flex } from 'honorable'
 
 import { Codeline } from '..'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Codeline',
@@ -46,13 +47,13 @@ function CustomCopyTemplate(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   children: 'npm i @pluralsh/design-system',
 }
 
-export const CustomCopy = CustomCopyTemplate.bind({})
+export const CustomCopy: StoryFn = CustomCopyTemplate.bind({})
 
 CustomCopy.args = {
   children: 'npm i @pluralsh/design-system',
diff --git a/assets/design-system/src/stories/Colors.tsx b/assets/design-system/src/stories/Colors.tsx
index e4f3644dd3..771aec9372 100644
--- a/assets/design-system/src/stories/Colors.tsx
+++ b/assets/design-system/src/stories/Colors.tsx
@@ -8,6 +8,7 @@ import Divider from '../components/Divider'
 import { FlexWrap } from './FlexWrap'
 import { FilledBox } from './FilledBox'
 import { ItemLabel } from './ItemLabel'
+import type { StoryFn } from '@storybook/react'
 
 const ColorBox = styled(FilledBox)<{ $colorKey: string | number }>(
   ({ theme, $colorKey }) => ({
@@ -116,7 +117,7 @@ function Template() {
   )
 }
 
-const Exp = Template.bind({})
+const Exp: StoryFn = Template.bind({})
 
 Exp.args = {}
 export default Exp
diff --git a/assets/design-system/src/stories/ComboBox.stories.tsx b/assets/design-system/src/stories/ComboBox.stories.tsx
index e70eb59717..812095ef28 100644
--- a/assets/design-system/src/stories/ComboBox.stories.tsx
+++ b/assets/design-system/src/stories/ComboBox.stories.tsx
@@ -21,6 +21,7 @@ import {
 
 import { ClusterTagsTemplate } from './ClusterTagsTemplate'
 import TagMultiSelectTemplate from './TagMultiselectTemplate'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Combo Box',
@@ -473,20 +474,20 @@ function TagsTemplate({
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   loading: false,
   withTitleContent: false,
 }
 
-export const Tags = TagsTemplate.bind({})
+export const Tags: StoryFn = TagsTemplate.bind({})
 Tags.args = {
   loading: false,
   withTitleContent: false,
 }
 
-export const ClusterTags = ClusterTagsTemplate.bind({})
+export const ClusterTags: StoryFn = ClusterTagsTemplate.bind({})
 ClusterTags.args = {
   loading: false,
   withTitleContent: false,
@@ -510,7 +511,7 @@ const TAGS = [
 ]
 const tags = uniqWith(TAGS, isEqual)
 
-export const TagMultiSelect = TagMultiSelectTemplate.bind({})
+export const TagMultiSelect: StoryFn = TagMultiSelectTemplate.bind({})
 TagMultiSelect.args = {
   loading: false,
   options: tags.map((tag) => `${tag.name}:${tag.value}`),
diff --git a/assets/design-system/src/stories/Date.stories.tsx b/assets/design-system/src/stories/Date.stories.tsx
index 665349e1ba..9499186a3f 100644
--- a/assets/design-system/src/stories/Date.stories.tsx
+++ b/assets/design-system/src/stories/Date.stories.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 
 import { Date } from '..'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Date',
@@ -39,7 +40,7 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   date: '2016-01-08T00:00:00-06:00',
diff --git a/assets/design-system/src/stories/DiffViewer.stories.tsx b/assets/design-system/src/stories/DiffViewer.stories.tsx
index 5e3b83f41f..be2aea1899 100644
--- a/assets/design-system/src/stories/DiffViewer.stories.tsx
+++ b/assets/design-system/src/stories/DiffViewer.stories.tsx
@@ -1,4 +1,5 @@
 import { DiffMethod, DiffViewer } from '..'
+import type { StoryFn } from '@storybook/react'
 
 const OLD_VALUE = `apiVersion: v1
 kind: ConfigMap
@@ -43,7 +44,7 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   oldValue: OLD_VALUE,
   newValue: NEW_VALUE,
@@ -52,7 +53,7 @@ Default.args = {
   asCard: true,
 }
 
-export const DeletedFile = Template.bind({})
+export const DeletedFile: StoryFn = Template.bind({})
 DeletedFile.args = {
   oldValue: OLD_VALUE,
   newValue: '',
diff --git a/assets/design-system/src/stories/Divider.stories.tsx b/assets/design-system/src/stories/Divider.stories.tsx
index 2556e54572..9b644bb363 100644
--- a/assets/design-system/src/stories/Divider.stories.tsx
+++ b/assets/design-system/src/stories/Divider.stories.tsx
@@ -1,4 +1,5 @@
 import Divider from '../components/Divider'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Divider',
@@ -9,13 +10,13 @@ function Template(args: any) {
   return <Divider {...args} />
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   text: '',
 }
 
-export const Text = Template.bind({})
+export const Text: StoryFn = Template.bind({})
 
 Text.args = {
   text: "That's division allright!",
diff --git a/assets/design-system/src/stories/EmptyState.stories.tsx b/assets/design-system/src/stories/EmptyState.stories.tsx
index b0c2fa1fb7..2ec813c8af 100644
--- a/assets/design-system/src/stories/EmptyState.stories.tsx
+++ b/assets/design-system/src/stories/EmptyState.stories.tsx
@@ -2,6 +2,7 @@ import { Button } from 'honorable'
 
 import BellIcon from '../components/icons/BellIcon'
 import EmptyState from '../components/EmptyState'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'EmptyState',
@@ -12,7 +13,7 @@ function Template(args: any) {
   return <EmptyState {...args} />
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   message: 'This is an empty state',
diff --git a/assets/design-system/src/stories/Flyover.stories.tsx b/assets/design-system/src/stories/Flyover.stories.tsx
index 9d1f65f0de..5f86c7dad2 100644
--- a/assets/design-system/src/stories/Flyover.stories.tsx
+++ b/assets/design-system/src/stories/Flyover.stories.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components'
 
 import { Button, Card, Code, Flyover, FormField, Input2, SearchIcon } from '..'
 import { jsCode } from '../constants'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Flyover',
@@ -142,7 +143,7 @@ function NonScrollTemplate(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   header: 'Default',
@@ -150,7 +151,7 @@ Default.args = {
   scrollable: true,
 }
 
-export const Form = Template.bind({})
+export const Form: StoryFn = Template.bind({})
 
 Form.args = {
   header: 'Form',
@@ -158,7 +159,7 @@ Form.args = {
   scrollable: true,
 }
 
-export const NonScrollable = NonScrollTemplate.bind({})
+export const NonScrollable: StoryFn = NonScrollTemplate.bind({})
 
 NonScrollable.args = {
   header: 'Non-scrollable',
diff --git a/assets/design-system/src/stories/FormField.stories.tsx b/assets/design-system/src/stories/FormField.stories.tsx
index c7a6d1a302..d7b015fedd 100644
--- a/assets/design-system/src/stories/FormField.stories.tsx
+++ b/assets/design-system/src/stories/FormField.stories.tsx
@@ -5,6 +5,7 @@ import Input from '../components/Input'
 import FormField from '../components/FormField'
 import MagnifyingGlassIcon from '../components/icons/MagnifyingGlassIcon'
 import CaretDownIcon from '../components/icons/CaretDownIcon'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'FormField',
@@ -84,7 +85,7 @@ function AllSizesTemplate(args: any) {
   )
 }
 
-export const Full = AllSizesTemplate.bind({})
+export const Full: StoryFn = AllSizesTemplate.bind({})
 
 Full.args = {
   label: 'Label',
@@ -101,7 +102,7 @@ Full.args = {
   ),
 }
 
-export const FullError = AllSizesTemplate.bind({})
+export const FullError: StoryFn = AllSizesTemplate.bind({})
 
 FullError.args = {
   ...Full.args,
@@ -112,7 +113,7 @@ FullError.args = {
   },
 }
 
-export const FullDisabled = AllSizesTemplate.bind({})
+export const FullDisabled: StoryFn = AllSizesTemplate.bind({})
 
 FullDisabled.args = {
   ...Full.args,
@@ -121,38 +122,38 @@ FullDisabled.args = {
   },
 }
 
-export const Horizontal = Template.bind({})
+export const Horizontal: StoryFn = Template.bind({})
 
 Horizontal.args = {
   ...Full.args,
   layout: 'horizontal',
 }
 
-export const Default = AllSizesTemplate.bind({})
+export const Default: StoryFn = AllSizesTemplate.bind({})
 
 Default.args = {}
 
-export const Label = AllSizesTemplate.bind({})
+export const Label: StoryFn = AllSizesTemplate.bind({})
 
 Label.args = {
   label: 'Email',
 }
 
-export const Required = AllSizesTemplate.bind({})
+export const Required: StoryFn = AllSizesTemplate.bind({})
 
 Required.args = {
   label: 'Email',
   required: true,
 }
 
-export const Caption = AllSizesTemplate.bind({})
+export const Caption: StoryFn = AllSizesTemplate.bind({})
 
 Caption.args = {
   label: 'Password',
   caption: 'A short caption',
 }
 
-export const LongCaption = AllSizesTemplate.bind({})
+export const LongCaption: StoryFn = AllSizesTemplate.bind({})
 
 LongCaption.args = {
   label: 'Label',
@@ -160,21 +161,21 @@ LongCaption.args = {
     'This will probably truncate, because it is ever so so longer than usual.',
 }
 
-export const HintText = AllSizesTemplate.bind({})
+export const HintText: StoryFn = AllSizesTemplate.bind({})
 
 HintText.args = {
   label: 'Label',
   hint: 'Some hint text',
 }
 
-export const MaxLength = AllSizesTemplate.bind({})
+export const MaxLength: StoryFn = AllSizesTemplate.bind({})
 
 MaxLength.args = {
   label: 'Label',
   maxLength: 30,
 }
 
-export const ArbitraryHintContent = AllSizesTemplate.bind({})
+export const ArbitraryHintContent: StoryFn = AllSizesTemplate.bind({})
 
 ArbitraryHintContent.args = {
   label: 'Label',
@@ -192,7 +193,7 @@ ArbitraryHintContent.args = {
   ),
 }
 
-export const Multiline = AllSizesTemplate.bind({})
+export const Multiline: StoryFn = AllSizesTemplate.bind({})
 
 Multiline.args = {
   label: 'Label',
diff --git a/assets/design-system/src/stories/FormTitle.stories.tsx b/assets/design-system/src/stories/FormTitle.stories.tsx
index c1c10e66c3..bd6ff3d756 100644
--- a/assets/design-system/src/stories/FormTitle.stories.tsx
+++ b/assets/design-system/src/stories/FormTitle.stories.tsx
@@ -1,4 +1,5 @@
 import FormTitle from '../components/FormTitle'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'FormTitle',
@@ -14,7 +15,7 @@ function Template(args: any) {
   )
 }
 
-export const Primary = Template.bind({})
+export const Primary: StoryFn = Template.bind({})
 
 Primary.args = {
   title: 'Automatic Upgrades',
diff --git a/assets/design-system/src/stories/Highlight.stories.tsx b/assets/design-system/src/stories/Highlight.stories.tsx
index 67f00a07e7..1d7802b497 100644
--- a/assets/design-system/src/stories/Highlight.stories.tsx
+++ b/assets/design-system/src/stories/Highlight.stories.tsx
@@ -3,6 +3,7 @@ import { Flex } from 'honorable'
 import { goCode, jsCode, tfCode } from '../constants'
 
 import { Divider, Highlight } from '..'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Highlight',
@@ -26,4 +27,4 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
diff --git a/assets/design-system/src/stories/IconFrame.stories.tsx b/assets/design-system/src/stories/IconFrame.stories.tsx
index 228b4b8596..1296dca110 100644
--- a/assets/design-system/src/stories/IconFrame.stories.tsx
+++ b/assets/design-system/src/stories/IconFrame.stories.tsx
@@ -1,6 +1,7 @@
 import { Div, Flex, H1, P } from 'honorable'
 
 import { IconFrame, type IconFrameProps, TrashCanIcon } from '../index'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Icon Frame',
@@ -27,41 +28,45 @@ function Template({
   tooltipProps,
   ...props
 }: Partial<IconFrameProps>) {
-  return types.map((type) => (
-    <Div key={type}>
-      <H1
-        caption
-        marginBottom="xxsmall"
-      >
-        type=&quot;{type}&quot;
-      </H1>
-      <Flex
-        gap="xsmall"
-        marginBottom="xlarge"
-        alignItems="center"
-        flexWrap="wrap"
-      >
-        {sizes.map((size) => (
-          <>
-            <P caption>size=&quot;{size}&quot;</P>
-            <IconFrame
-              size={size || 'medium'}
-              clickable={clickable === undefined ? true : clickable}
-              icon={icon || <TrashCanIcon />}
-              textValue={textValue || 'Delete'}
-              tooltip={tooltip}
-              tooltipProps={tooltipProps}
-              type={type}
-              {...props}
-            />
-          </>
-        ))}
-      </Flex>
-    </Div>
-  ))
+  return (
+    <>
+      {types.map((type) => (
+        <Div key={type}>
+          <H1
+            caption
+            marginBottom="xxsmall"
+          >
+            type=&quot;{type}&quot;
+          </H1>
+          <Flex
+            gap="xsmall"
+            marginBottom="xlarge"
+            alignItems="center"
+            flexWrap="wrap"
+          >
+            {sizes.map((size) => (
+              <>
+                <P caption>size=&quot;{size}&quot;</P>
+                <IconFrame
+                  size={size || 'medium'}
+                  clickable={clickable === undefined ? true : clickable}
+                  icon={icon || <TrashCanIcon />}
+                  textValue={textValue || 'Delete'}
+                  tooltip={tooltip}
+                  tooltipProps={tooltipProps}
+                  type={type}
+                  {...props}
+                />
+              </>
+            ))}
+          </Flex>
+        </Div>
+      ))}
+    </>
+  )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   clickable: true,
   tooltip: true,
diff --git a/assets/design-system/src/stories/Icons.stories.tsx b/assets/design-system/src/stories/Icons.stories.tsx
index ec03c759b4..3142015c68 100644
--- a/assets/design-system/src/stories/Icons.stories.tsx
+++ b/assets/design-system/src/stories/Icons.stories.tsx
@@ -3,6 +3,7 @@ import { createElement } from 'react'
 
 import * as icons from '../icons'
 import * as logos from '../plural-logos'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Icons',
@@ -167,7 +168,7 @@ function LogosTemplate({
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   color: 'icon-default',
   size: 16,
@@ -175,7 +176,7 @@ Default.args = {
   backgroundColor: 'transparent',
 }
 
-export const Xlarge = Template.bind({})
+export const Xlarge: StoryFn = Template.bind({})
 Xlarge.args = {
   color: 'icon-default',
   size: 32,
@@ -183,7 +184,7 @@ Xlarge.args = {
   backgroundColor: 'transparent',
 }
 
-export const Large = Template.bind({})
+export const Large: StoryFn = Template.bind({})
 Large.args = {
   color: 'icon-default',
   size: 24,
@@ -191,7 +192,7 @@ Large.args = {
   backgroundColor: 'transparent',
 }
 
-export const Small = Template.bind({})
+export const Small: StoryFn = Template.bind({})
 Small.args = {
   color: 'icon-default',
   size: 12,
@@ -199,7 +200,7 @@ Small.args = {
   backgroundColor: 'transparent',
 }
 
-export const Color = Template.bind({})
+export const Color: StoryFn = Template.bind({})
 Color.args = {
   color: 'icon-primary',
   fullColor: false,
@@ -207,7 +208,7 @@ Color.args = {
   backgroundColor: 'transparent',
 }
 
-export const FullColor = Template.bind({})
+export const FullColor: StoryFn = Template.bind({})
 FullColor.args = {
   color: 'icon-default',
   fullColor: true,
@@ -215,7 +216,7 @@ FullColor.args = {
   backgroundColor: 'transparent',
 }
 
-export const PluralLogos = LogosTemplate.bind({})
+export const PluralLogos: StoryFn = LogosTemplate.bind({})
 PluralLogos.args = {
   color: 'icon-default',
   fullColor: true,
diff --git a/assets/design-system/src/stories/InlineCode.stories.tsx b/assets/design-system/src/stories/InlineCode.stories.tsx
index b14389a1a1..5ce47749eb 100644
--- a/assets/design-system/src/stories/InlineCode.stories.tsx
+++ b/assets/design-system/src/stories/InlineCode.stories.tsx
@@ -2,6 +2,7 @@ import { A, P } from 'honorable'
 import styled, { useTheme } from 'styled-components'
 
 import { Banner, Callout, Card, InlineCode } from '..'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Inline Code',
@@ -111,5 +112,5 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {}
diff --git a/assets/design-system/src/stories/Input.stories.tsx b/assets/design-system/src/stories/Input.stories.tsx
index 5266295972..08df5df3b8 100644
--- a/assets/design-system/src/stories/Input.stories.tsx
+++ b/assets/design-system/src/stories/Input.stories.tsx
@@ -9,6 +9,7 @@ import SearchIcon from '../components/icons/SearchIcon'
 import Input from '../components/Input'
 import Input2 from '../components/Input2'
 import { Card } from '../index'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Input',
@@ -167,44 +168,44 @@ function CustomInputV2Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {}
 
-export const Error = Template.bind({})
+export const Error: StoryFn = Template.bind({})
 
 Error.args = {
   error: true,
 }
 
-export const Placeholder = Template.bind({})
+export const Placeholder: StoryFn = Template.bind({})
 
 Placeholder.args = {
   placeholder: 'A neat placeholder!',
 }
 
-export const Disabled = Template.bind({})
+export const Disabled: StoryFn = Template.bind({})
 
 Disabled.args = {
   placeholder: 'Disabled placeholder',
   disabled: true,
 }
 
-export const PrefixSuffix = CustomInputTemplate.bind({})
+export const PrefixSuffix: StoryFn = CustomInputTemplate.bind({})
 
 PrefixSuffix.args = {
   prefix: 'app.',
   suffix: '.plural.sh',
 }
 
-export const Multiline = CustomInputTemplate.bind({})
+export const Multiline: StoryFn = CustomInputTemplate.bind({})
 
 Multiline.args = {
   multiline: true,
   minRows: 3,
 }
 
-export const TitleContent = CustomInputTemplate.bind({})
+export const TitleContent: StoryFn = CustomInputTemplate.bind({})
 
 TitleContent.args = {
   startIcon: <SearchIcon />,
@@ -219,7 +220,7 @@ TitleContent.args = {
   suffix: '',
 }
 
-export const Version2 = CustomInputV2Template.bind({})
+export const Version2: StoryFn = CustomInputV2Template.bind({})
 
 Version2.args = {
   startIcon: <SearchIcon />,
diff --git a/assets/design-system/src/stories/ListBox.stories.tsx b/assets/design-system/src/stories/ListBox.stories.tsx
index 0bff42ddcc..6bcc73efb0 100644
--- a/assets/design-system/src/stories/ListBox.stories.tsx
+++ b/assets/design-system/src/stories/ListBox.stories.tsx
@@ -2,6 +2,7 @@ import { Div, Flex } from 'honorable'
 import { useState } from 'react'
 
 import { type Key } from '@react-types/shared'
+import type { StoryFn } from '@storybook/react'
 
 import {
   AppIcon,
@@ -316,6 +317,6 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {}
diff --git a/assets/design-system/src/stories/LoadingSpinner.stories.tsx b/assets/design-system/src/stories/LoadingSpinner.stories.tsx
index 10913fc956..cd01ce270c 100644
--- a/assets/design-system/src/stories/LoadingSpinner.stories.tsx
+++ b/assets/design-system/src/stories/LoadingSpinner.stories.tsx
@@ -1,4 +1,5 @@
 import { Div } from 'honorable'
+import type { StoryFn } from '@storybook/react'
 
 import LoadingSpinner, {
   type LoadingSpinnerProps,
@@ -31,7 +32,7 @@ function Template(args: LoadingSpinnerProps) {
   )
 }
 
-export const Primary = Template.bind({})
+export const Primary: StoryFn = Template.bind({})
 
 Primary.args = {
   show: true,
diff --git a/assets/design-system/src/stories/LoopingLogo.stories.tsx b/assets/design-system/src/stories/LoopingLogo.stories.tsx
index fc63bf6ebd..087826fb16 100644
--- a/assets/design-system/src/stories/LoopingLogo.stories.tsx
+++ b/assets/design-system/src/stories/LoopingLogo.stories.tsx
@@ -1,6 +1,7 @@
 import { Flex } from 'honorable'
 
 import LoopingLogo, { type LoopingLogoProps } from '../components/LoopingLogo'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'LoopingLogo',
@@ -18,7 +19,7 @@ function Template(args: LoopingLogoProps) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   isDark: false,
diff --git a/assets/design-system/src/stories/Markdown.stories.tsx b/assets/design-system/src/stories/Markdown.stories.tsx
index dcbd429189..5850330ecf 100644
--- a/assets/design-system/src/stories/Markdown.stories.tsx
+++ b/assets/design-system/src/stories/Markdown.stories.tsx
@@ -1,6 +1,7 @@
 import { Div } from 'honorable'
 
 import { Markdown } from '..'
+import type { StoryFn } from '@storybook/react'
 
 const markdown = `# Plural Console
 
@@ -250,4 +251,4 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
diff --git a/assets/design-system/src/stories/Modal.stories.tsx b/assets/design-system/src/stories/Modal.stories.tsx
index 0bb0dbcefe..58d90aa2e5 100644
--- a/assets/design-system/src/stories/Modal.stories.tsx
+++ b/assets/design-system/src/stories/Modal.stories.tsx
@@ -6,6 +6,7 @@ import styled from 'styled-components'
 import { Button, Card, Code, FormField, Input2, Modal, SearchIcon } from '..'
 import { SEVERITIES } from '../components/Modal'
 import { jsCode } from '../constants'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Modal',
@@ -188,7 +189,7 @@ function NonScrollTemplate(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   header: 'Default',
@@ -197,7 +198,7 @@ Default.args = {
   hasActions: true,
 }
 
-export const Form = Template.bind({})
+export const Form: StoryFn = Template.bind({})
 
 Form.args = {
   header: 'Form',
@@ -205,7 +206,7 @@ Form.args = {
   hasActions: true,
 }
 
-export const NonScrollable = NonScrollTemplate.bind({})
+export const NonScrollable: StoryFn = NonScrollTemplate.bind({})
 
 NonScrollable.args = {
   header: 'Non-scrollable',
diff --git a/assets/design-system/src/stories/PageCard.stories.tsx b/assets/design-system/src/stories/PageCard.stories.tsx
index bbd32b3b7b..b6b215f1c4 100644
--- a/assets/design-system/src/stories/PageCard.stories.tsx
+++ b/assets/design-system/src/stories/PageCard.stories.tsx
@@ -3,6 +3,7 @@ import { A, Flex } from 'honorable'
 import CheckedShieldIcon from '../components/icons/CheckedShieldIcon'
 
 import { PageCard } from '../index'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Page Card',
@@ -69,5 +70,5 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {}
diff --git a/assets/design-system/src/stories/PageTitle.stories.tsx b/assets/design-system/src/stories/PageTitle.stories.tsx
index 4b9f274239..46daf74afe 100644
--- a/assets/design-system/src/stories/PageTitle.stories.tsx
+++ b/assets/design-system/src/stories/PageTitle.stories.tsx
@@ -1,6 +1,7 @@
 import { Button, Div, Flex, P } from 'honorable'
 
 import PageTitle, { type PageTitleProps } from '../components/PageTitle'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Page Title',
@@ -24,13 +25,13 @@ function Template({ heading, ...props }: PageTitleProps) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   heading: 'Page Title',
 }
 
-export const WithContent = Template.bind({})
+export const WithContent: StoryFn = Template.bind({})
 WithContent.args = {
   heading: (
     <Div>
diff --git a/assets/design-system/src/stories/ProgressBar.stories.tsx b/assets/design-system/src/stories/ProgressBar.stories.tsx
index 7684f29bac..c6e44add66 100644
--- a/assets/design-system/src/stories/ProgressBar.stories.tsx
+++ b/assets/design-system/src/stories/ProgressBar.stories.tsx
@@ -1,4 +1,5 @@
 import ProgressBar from '../components/ProgressBar'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Progress Bar',
@@ -15,13 +16,13 @@ export default {
   },
 }
 
-export const Indeterminate = ProgressBar.bind({})
+export const Indeterminate: StoryFn = ProgressBar.bind({})
 Indeterminate.args = {
   paused: false,
   complete: false,
 }
 
-export const Determinate = ProgressBar.bind({})
+export const Determinate: StoryFn = ProgressBar.bind({})
 Determinate.args = {
   paused: false,
   complete: false,
diff --git a/assets/design-system/src/stories/Prop.stories.tsx b/assets/design-system/src/stories/Prop.stories.tsx
index 71a3a24124..f210da46fb 100644
--- a/assets/design-system/src/stories/Prop.stories.tsx
+++ b/assets/design-system/src/stories/Prop.stories.tsx
@@ -1,4 +1,5 @@
 import { Prop } from '../index'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Prop',
@@ -9,5 +10,5 @@ function Template() {
   return <Prop title="Name">Test</Prop>
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {}
diff --git a/assets/design-system/src/stories/PropWide.stories.tsx b/assets/design-system/src/stories/PropWide.stories.tsx
index 6b9e8fcdce..fb81211ee2 100644
--- a/assets/design-system/src/stories/PropWide.stories.tsx
+++ b/assets/design-system/src/stories/PropWide.stories.tsx
@@ -1,4 +1,5 @@
 import { PropWide } from '../index'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Prop Wide',
@@ -9,5 +10,5 @@ function Template() {
   return <PropWide title="Name">Test</PropWide>
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {}
diff --git a/assets/design-system/src/stories/PropsContainer.stories.tsx b/assets/design-system/src/stories/PropsContainer.stories.tsx
index 0e35ff3d61..ecf0bf11c1 100644
--- a/assets/design-system/src/stories/PropsContainer.stories.tsx
+++ b/assets/design-system/src/stories/PropsContainer.stories.tsx
@@ -1,4 +1,5 @@
 import { Prop, PropsContainer, UserDetails } from '../index'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Props Container',
@@ -23,5 +24,5 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {}
diff --git a/assets/design-system/src/stories/Radio.stories.tsx b/assets/design-system/src/stories/Radio.stories.tsx
index 37c069d3d0..529f2c7050 100644
--- a/assets/design-system/src/stories/Radio.stories.tsx
+++ b/assets/design-system/src/stories/Radio.stories.tsx
@@ -4,6 +4,7 @@ import styled, { useTheme } from 'styled-components'
 import Button from '../components/Button'
 import Radio from '../components/Radio'
 import RadioGroup from '../components/RadioGroup'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Radio',
@@ -65,12 +66,12 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   small: false,
 }
 
-export const Small = Template.bind({})
+export const Small: StoryFn = Template.bind({})
 Small.args = {
   small: true,
 }
diff --git a/assets/design-system/src/stories/RepositoryCard.stories.tsx b/assets/design-system/src/stories/RepositoryCard.stories.tsx
index d387bce7e2..6b8ce3d6e4 100644
--- a/assets/design-system/src/stories/RepositoryCard.stories.tsx
+++ b/assets/design-system/src/stories/RepositoryCard.stories.tsx
@@ -1,6 +1,7 @@
 import { Div, Flex, H4 } from 'honorable'
 
 import RepositoryCard from '../components/RepositoryCard'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'RepositoryCard',
@@ -108,7 +109,7 @@ function ListTemplate(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   installed: true,
@@ -133,5 +134,5 @@ Default.args = {
   ],
 }
 
-export const List = ListTemplate.bind({})
+export const List: StoryFn = ListTemplate.bind({})
 List.args = { width: '500px', ...Default.args }
diff --git a/assets/design-system/src/stories/RepositoryChip.stories.tsx b/assets/design-system/src/stories/RepositoryChip.stories.tsx
index 42b12b4601..a99acdca0a 100644
--- a/assets/design-system/src/stories/RepositoryChip.stories.tsx
+++ b/assets/design-system/src/stories/RepositoryChip.stories.tsx
@@ -1,5 +1,6 @@
 import RepositoryChip from '../components/RepositoryChip'
 import StackIcon from '../components/icons/StackIcon'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'RepositoryChip',
@@ -19,21 +20,21 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   imageUrl: '/logos/airbyte-logo.svg',
   label: 'Airbyte',
 }
 
-export const Icon = Template.bind({})
+export const Icon: StoryFn = Template.bind({})
 
 Icon.args = {
   icon: <StackIcon />,
   label: 'DevOps',
 }
 
-export const Small = Template.bind({})
+export const Small: StoryFn = Template.bind({})
 
 Small.args = {
   imageUrl: '/logos/airbyte-logo.svg',
diff --git a/assets/design-system/src/stories/SegmentedInput.stories.tsx b/assets/design-system/src/stories/SegmentedInput.stories.tsx
index 9c41f20476..5491ecca90 100644
--- a/assets/design-system/src/stories/SegmentedInput.stories.tsx
+++ b/assets/design-system/src/stories/SegmentedInput.stories.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import styled from 'styled-components'
 import { Segment, SegmentedInput } from '..'
+import type { StoryFn } from '@storybook/react'
 
 type StoryProps = {
   format: string
@@ -100,14 +101,14 @@ function Template({ format, separator, segments }: StoryProps) {
   }
 }
 
-export const DateInput = Template.bind({})
+export const DateInput: StoryFn = Template.bind({})
 DateInput.args = {
   format: 'date',
   separator: '/',
   segments: DATE_SEGMENTS,
 }
 
-export const CustomFormatInput = Template.bind({})
+export const CustomFormatInput: StoryFn = Template.bind({})
 CustomFormatInput.args = {
   format: 'custom',
   separator: '.',
diff --git a/assets/design-system/src/stories/Select.stories.tsx b/assets/design-system/src/stories/Select.stories.tsx
index dd8f2cd49a..565a3e739f 100644
--- a/assets/design-system/src/stories/Select.stories.tsx
+++ b/assets/design-system/src/stories/Select.stories.tsx
@@ -2,6 +2,7 @@ import { type ComponentProps, useEffect, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
 
 import { type Key } from '@react-types/shared'
+import type { StoryFn } from '@storybook/react'
 
 import {
   AppIcon,
@@ -662,6 +663,6 @@ function Template({ onFillLevel }: { onFillLevel: any }) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {}
diff --git a/assets/design-system/src/stories/Sidecar.stories.tsx b/assets/design-system/src/stories/Sidecar.stories.tsx
index 9044b41608..fbb5610573 100644
--- a/assets/design-system/src/stories/Sidecar.stories.tsx
+++ b/assets/design-system/src/stories/Sidecar.stories.tsx
@@ -1,6 +1,7 @@
 import { A, Div } from 'honorable'
 
 import { Sidecar, SidecarItem, type SidecarProps } from '../index'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Sidecar',
@@ -52,7 +53,7 @@ function Template({ heading, ...props }: SidecarProps) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   heading: 'Sidecar Title',
diff --git a/assets/design-system/src/stories/Slider.stories.tsx b/assets/design-system/src/stories/Slider.stories.tsx
index c8ce940d1b..76ed7b806e 100644
--- a/assets/design-system/src/stories/Slider.stories.tsx
+++ b/assets/design-system/src/stories/Slider.stories.tsx
@@ -1,4 +1,5 @@
 import Slider from '../components/Slider'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Slider',
@@ -9,7 +10,7 @@ function Template(args: any) {
   return <Slider {...args} />
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   label: 'Applications',
   defaultValue: 30,
diff --git a/assets/design-system/src/stories/StackCard.stories.tsx b/assets/design-system/src/stories/StackCard.stories.tsx
index 52c9ffc1f5..f547befcc3 100644
--- a/assets/design-system/src/stories/StackCard.stories.tsx
+++ b/assets/design-system/src/stories/StackCard.stories.tsx
@@ -1,6 +1,7 @@
 import { Flex } from 'honorable'
 
 import StackCard from '../components/StackCard'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'StackCard',
@@ -53,7 +54,7 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   apps: [
diff --git a/assets/design-system/src/stories/Stepper.stories.tsx b/assets/design-system/src/stories/Stepper.stories.tsx
index 4958b9f753..f7903277e7 100644
--- a/assets/design-system/src/stories/Stepper.stories.tsx
+++ b/assets/design-system/src/stories/Stepper.stories.tsx
@@ -4,6 +4,7 @@ import BrowserIcon from '../components/icons/BrowserIcon'
 import CloudIcon from '../components/icons/CloudIcon'
 import GearTrainIcon from '../components/icons/GearTrainIcon'
 import GitHubIcon from '../components/icons/GitHubIcon'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Stepper',
@@ -50,35 +51,35 @@ const steps: StepperSteps = [
   },
 ]
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   stepIndex: 1,
   steps,
   compact: false,
 }
 
-export const List03 = Template.bind({})
+export const List03: StoryFn = Template.bind({})
 List03.args = {
   stepIndex: 1,
   steps: steps.slice(0, 3),
   compact: false,
 }
 
-export const List02 = Template.bind({})
+export const List02: StoryFn = Template.bind({})
 List02.args = {
   stepIndex: 1,
   steps: steps.slice(0, 2),
   compact: false,
 }
 
-export const List01 = Template.bind({})
+export const List01: StoryFn = Template.bind({})
 List01.args = {
   stepIndex: 0,
   steps: steps.slice(0, 1),
   compact: false,
 }
 
-export const Vertical = Template.bind({})
+export const Vertical: StoryFn = Template.bind({})
 Vertical.args = {
   stepIndex: 1,
   containerWidth: 170,
@@ -90,7 +91,7 @@ Vertical.args = {
   steps,
 }
 
-export const Compact = Template.bind({})
+export const Compact: StoryFn = Template.bind({})
 Compact.args = {
   stepIndex: 1,
   steps,
diff --git a/assets/design-system/src/stories/Switch.stories.tsx b/assets/design-system/src/stories/Switch.stories.tsx
index 42cd9cf291..a4f84a2135 100644
--- a/assets/design-system/src/stories/Switch.stories.tsx
+++ b/assets/design-system/src/stories/Switch.stories.tsx
@@ -1,4 +1,5 @@
 import { LightDarkSwitch, Switch } from '..'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Switch',
@@ -16,7 +17,7 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   children: 'Email notifications',
@@ -35,7 +36,7 @@ function LightDarkTemplate(args: any) {
   )
 }
 
-export const LightDarkMode = LightDarkTemplate.bind({})
+export const LightDarkMode: StoryFn = LightDarkTemplate.bind({})
 
 LightDarkMode.args = {
   disabled: false,
diff --git a/assets/design-system/src/stories/Tab.stories.tsx b/assets/design-system/src/stories/Tab.stories.tsx
index d17f22a755..992879e7ee 100644
--- a/assets/design-system/src/stories/Tab.stories.tsx
+++ b/assets/design-system/src/stories/Tab.stories.tsx
@@ -6,6 +6,7 @@ import ErrorIcon from '../components/icons/ErrorIcon'
 import Tab from '../components/Tab'
 import SubTab from '../components/SubTab'
 import Card from '../components/Card'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Tab',
@@ -70,7 +71,7 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {}
 
@@ -139,7 +140,7 @@ function Template2(args: any) {
   )
 }
 
-export const Vertical = Template2.bind({})
+export const Vertical: StoryFn = Template2.bind({})
 
 Vertical.args = {
   vertical: true,
@@ -202,7 +203,7 @@ const contentCardStyle = {
   justifyContent: 'center',
 }
 
-export const Subtab = SubTabTemplate.bind({})
+export const Subtab: StoryFn = SubTabTemplate.bind({})
 
 Subtab.args = {
   disabled: false,
diff --git a/assets/design-system/src/stories/TabList.stories.tsx b/assets/design-system/src/stories/TabList.stories.tsx
index 45c43f723f..4b6fc5b0a0 100644
--- a/assets/design-system/src/stories/TabList.stories.tsx
+++ b/assets/design-system/src/stories/TabList.stories.tsx
@@ -3,6 +3,7 @@ import { useRef, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
 
 import { type Key } from '@react-types/shared'
+import type { StoryFn } from '@storybook/react'
 
 import {
   Tab,
@@ -319,19 +320,19 @@ function TemplateComplex() {
   )
 }
 
-export const Default = TemplateBasic.bind({})
+export const Default: StoryFn = TemplateBasic.bind({})
 Default.args = {}
 
-export const Vertical = TemplateBasic.bind({})
+export const Vertical: StoryFn = TemplateBasic.bind({})
 Vertical.args = {
   orientation: 'vertical',
 }
 
-export const Scrollable = TemplateBasic.bind({})
+export const Scrollable: StoryFn = TemplateBasic.bind({})
 Scrollable.args = {
   scrollable: true,
   tabs: moreTabs,
 }
 
-export const AdvancedContent = TemplateComplex.bind({})
+export const AdvancedContent: StoryFn = TemplateComplex.bind({})
 AdvancedContent.args = {}
diff --git a/assets/design-system/src/stories/Table.stories.tsx b/assets/design-system/src/stories/Table.stories.tsx
index 9eb3bc19fd..abce2bf932 100644
--- a/assets/design-system/src/stories/Table.stories.tsx
+++ b/assets/design-system/src/stories/Table.stories.tsx
@@ -11,6 +11,7 @@ import React, {
 import type { Row } from '@tanstack/react-table'
 
 import { useTheme } from 'styled-components'
+import type { StoryFn } from '@storybook/react'
 
 import {
   AppIcon,
@@ -357,7 +358,7 @@ const extremeLengthData = Array(200)
   .flat()
   .map((item, i) => ({ ...item, id: `id-${i}` }))
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   fillLevel: 0,
   rowBg: 'base',
@@ -367,7 +368,7 @@ Default.args = {
   columns,
 }
 
-export const Empty = Template.bind({})
+export const Empty: StoryFn = Template.bind({})
 Empty.args = {
   fillLevel: 0,
   rowBg: 'base',
@@ -377,7 +378,7 @@ Empty.args = {
   columns,
 }
 
-export const Loading = Template.bind({})
+export const Loading: StoryFn = Template.bind({})
 Loading.args = {
   fillLevel: 0,
   rowBg: 'base',
@@ -388,7 +389,7 @@ Loading.args = {
   loading: true,
 }
 
-export const Highlighted = Template.bind({})
+export const Highlighted: StoryFn = Template.bind({})
 Highlighted.args = {
   fillLevel: 0,
   rowBg: 'base',
@@ -419,7 +420,7 @@ Highlighted.args = {
   highlightedRowId: 1,
 }
 
-export const VirtualizedRows = Template.bind({})
+export const VirtualizedRows: StoryFn = Template.bind({})
 VirtualizedRows.args = {
   fillLevel: 0,
   rowBg: 'base',
@@ -430,7 +431,7 @@ VirtualizedRows.args = {
   columns,
 }
 
-export const PagedData = PagedTemplate.bind({})
+export const PagedData: StoryFn = PagedTemplate.bind({})
 PagedData.args = {
   fillLevel: 0,
   rowBg: 'base',
@@ -441,7 +442,7 @@ PagedData.args = {
   columns,
 }
 
-export const Loose = Template.bind({})
+export const Loose: StoryFn = Template.bind({})
 
 Loose.args = {
   fillLevel: 0,
@@ -453,7 +454,7 @@ Loose.args = {
   loose: true,
 }
 
-export const Clickable = Template.bind({})
+export const Clickable: StoryFn = Template.bind({})
 
 Clickable.args = {
   fillLevel: 0,
@@ -465,7 +466,7 @@ Clickable.args = {
   onRowClick: (_e: MouseEvent, row: Row<any>) => console.info(row?.original),
 }
 
-export const StickyColumn = Template.bind({})
+export const StickyColumn: StoryFn = Template.bind({})
 
 StickyColumn.args = {
   fillLevel: 0,
@@ -477,7 +478,7 @@ StickyColumn.args = {
   stickyColumn: true,
 }
 
-export const Expandable = Template.bind({})
+export const Expandable: StoryFn = Template.bind({})
 
 Expandable.args = {
   fillLevel: 0,
@@ -492,7 +493,7 @@ Expandable.args = {
   ),
 }
 
-export const FilterableAndSortable = FilterableTemplate.bind({})
+export const FilterableAndSortable: StoryFn = FilterableTemplate.bind({})
 FilterableAndSortable.args = {
   fillLevel: 0,
   rowBg: 'base',
@@ -506,7 +507,7 @@ FilterableAndSortable.args = {
   columns,
 }
 
-export const Selectable = SelectableTemplate.bind({})
+export const Selectable: StoryFn = SelectableTemplate.bind({})
 
 Selectable.args = {
   fillLevel: 0,
@@ -517,7 +518,7 @@ Selectable.args = {
   columns: expandingColumns,
 }
 
-export const LinkableRows = Template.bind({})
+export const LinkableRows: StoryFn = Template.bind({})
 
 LinkableRows.args = {
   fillLevel: 0,
diff --git a/assets/design-system/src/stories/TextSwitch.stories.tsx b/assets/design-system/src/stories/TextSwitch.stories.tsx
index 7786ce0052..0a98898567 100644
--- a/assets/design-system/src/stories/TextSwitch.stories.tsx
+++ b/assets/design-system/src/stories/TextSwitch.stories.tsx
@@ -7,6 +7,7 @@ import {
 import { Flex } from 'honorable'
 
 import TextSwitch, { type TextSwitchProps } from '../components/TextSwitch'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'TextSwitch',
@@ -91,7 +92,7 @@ function Template({ label, ...args }: ComponentProps<typeof TextSwitch>) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {
   size: 'small',
   label: '',
diff --git a/assets/design-system/src/stories/TipCarousel.stories.tsx b/assets/design-system/src/stories/TipCarousel.stories.tsx
index cd2475fdab..05cddec401 100644
--- a/assets/design-system/src/stories/TipCarousel.stories.tsx
+++ b/assets/design-system/src/stories/TipCarousel.stories.tsx
@@ -1,6 +1,7 @@
 import { A } from 'honorable'
 
 import TipCarousel from '../components/TipCarousel'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'TipCarousel',
@@ -48,7 +49,7 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   autoAdvanceTime: 10000,
diff --git a/assets/design-system/src/stories/Toast.stories.tsx b/assets/design-system/src/stories/Toast.stories.tsx
index 4f662ba2a1..f072cbfd87 100644
--- a/assets/design-system/src/stories/Toast.stories.tsx
+++ b/assets/design-system/src/stories/Toast.stories.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { type LayerPositionType } from '../components/Layer'
 import { GraphQLToast, Toast, type ToastSeverity } from '../components/Toast'
 import { ApolloError } from '@apollo/client'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Toast',
@@ -111,13 +112,13 @@ function GraphQLTemplate() {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {
   severity: 'success',
   closeTimeout: undefined,
 }
 
-export const GraphQL = GraphQLTemplate.bind({})
+export const GraphQL: StoryFn = GraphQLTemplate.bind({})
 
 GraphQL.args = {}
diff --git a/assets/design-system/src/stories/Tooltip.stories.tsx b/assets/design-system/src/stories/Tooltip.stories.tsx
index 4212ed0063..547582ec9c 100644
--- a/assets/design-system/src/stories/Tooltip.stories.tsx
+++ b/assets/design-system/src/stories/Tooltip.stories.tsx
@@ -4,6 +4,7 @@ import { type ComponentProps, useState } from 'react'
 import { IconFrame, InfoIcon, Modal } from '..'
 
 import Tooltip from '../components/Tooltip'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Tooltip',
@@ -163,6 +164,6 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 
 Default.args = {}
diff --git a/assets/design-system/src/stories/TreeNavigation.stories.tsx b/assets/design-system/src/stories/TreeNavigation.stories.tsx
index b45711146f..61fe1e36a6 100644
--- a/assets/design-system/src/stories/TreeNavigation.stories.tsx
+++ b/assets/design-system/src/stories/TreeNavigation.stories.tsx
@@ -6,6 +6,7 @@ import { useNavigationContext } from '../components/contexts/NavigationContext'
 import { TreeNav, TreeNavEntry } from '../components/TreeNavigation'
 
 import { NavContextProviderStub } from './NavigationContextStub'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Tree Navigation',
@@ -223,5 +224,5 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {}
diff --git a/assets/design-system/src/stories/Typography.tsx b/assets/design-system/src/stories/Typography.tsx
index 3e294a7f30..c7481a4473 100644
--- a/assets/design-system/src/stories/Typography.tsx
+++ b/assets/design-system/src/stories/Typography.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import Divider from '../components/Divider'
 
 import { type styledTheme } from '..'
+import type { StoryFn } from '@storybook/react'
 
 const SemanticText = styled.div<{
   $typeStyle?: keyof typeof styledTheme.partials.text
@@ -139,7 +140,7 @@ function Template({ exampleText }: { exampleText?: string }) {
   )
 }
 
-const Exp = Template.bind({})
+const Exp: StoryFn = Template.bind({})
 
 export default Exp
 Exp.args = {
diff --git a/assets/design-system/src/stories/UserDetails.stories.tsx b/assets/design-system/src/stories/UserDetails.stories.tsx
index b27a69d4c2..c23d702b63 100644
--- a/assets/design-system/src/stories/UserDetails.stories.tsx
+++ b/assets/design-system/src/stories/UserDetails.stories.tsx
@@ -1,4 +1,5 @@
 import { UserDetails } from '../index'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'User Details',
@@ -14,5 +15,5 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
 Default.args = {}
diff --git a/assets/design-system/src/stories/ValidatedInput.stories.tsx b/assets/design-system/src/stories/ValidatedInput.stories.tsx
index e4dad80f87..808baa7c95 100644
--- a/assets/design-system/src/stories/ValidatedInput.stories.tsx
+++ b/assets/design-system/src/stories/ValidatedInput.stories.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import type { StoryFn } from '@storybook/react'
 
 import ValidatedInput, {
   type ValidationResponse,
@@ -32,4 +33,4 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn = Template.bind({})
diff --git a/assets/design-system/src/stories/Wizard.stories.tsx b/assets/design-system/src/stories/Wizard.stories.tsx
index cf8d997e71..264a07447e 100644
--- a/assets/design-system/src/stories/Wizard.stories.tsx
+++ b/assets/design-system/src/stories/Wizard.stories.tsx
@@ -16,6 +16,7 @@ import { Picker, type StepConfig } from '../components/wizard/Picker'
 import { Step } from '../components/wizard/Step'
 import { Stepper } from '../components/wizard/Stepper'
 import { Wizard } from '../components/wizard/Wizard'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Wizard',
@@ -246,10 +247,10 @@ function StandaloneTemplate() {
   )
 }
 
-export const Default = ModalTemplate.bind({})
+export const Default: StoryFn = ModalTemplate.bind({})
 
 Default.args = {}
 
-export const Standalone = StandaloneTemplate.bind({})
+export const Standalone: StoryFn = StandaloneTemplate.bind({})
 
 Standalone.args = {}
diff --git a/assets/design-system/src/stories/_SemanticSystem.stories.tsx b/assets/design-system/src/stories/_SemanticSystem.stories.tsx
index 0c727cc30b..e83f36a2b0 100644
--- a/assets/design-system/src/stories/_SemanticSystem.stories.tsx
+++ b/assets/design-system/src/stories/_SemanticSystem.stories.tsx
@@ -7,6 +7,7 @@ import { baseSpacing } from '../theme/spacing'
 import { ItemLabel } from './ItemLabel'
 import { FilledBox } from './FilledBox'
 import { FlexWrap } from './FlexWrap'
+import type { StoryFn } from '@storybook/react'
 
 export default {
   title: 'Semantic System',
@@ -235,7 +236,7 @@ function Spacing() {
   )
 }
 
-export const Miscellaneous = Template.bind({})
+export const Miscellaneous: StoryFn = Template.bind({})
 Miscellaneous.args = {}
 
 export { default as Colors } from './Colors'
diff --git a/assets/design-system/tsconfig.json b/assets/design-system/tsconfig.json
index 277428d585..a6a156bf94 100644
--- a/assets/design-system/tsconfig.json
+++ b/assets/design-system/tsconfig.json
@@ -9,7 +9,6 @@
     // TODO: get rid of all these once errors are fixed
     "strictNullChecks": false,
     "strictFunctionTypes": false,
-    "strictBindCallApply": false,
     "strictPropertyInitialization": false,
     "noImplicitThis": false
   },

From 0653b3b11ca03c7cefdac785b0371fb46d53a9d6 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 12:45:16 +0200
Subject: [PATCH 03/13] enable noImplicitThis in the design system

---
 assets/design-system/src/components/ComboBox.tsx          | 5 +----
 assets/design-system/src/components/SelectComboShared.tsx | 8 +++++---
 assets/design-system/src/markdoc/tags/button.markdoc.ts   | 4 ++--
 assets/design-system/tsconfig.json                        | 3 +--
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/assets/design-system/src/components/ComboBox.tsx b/assets/design-system/src/components/ComboBox.tsx
index 0bb8df94b8..efbd19b471 100644
--- a/assets/design-system/src/components/ComboBox.tsx
+++ b/assets/design-system/src/components/ComboBox.tsx
@@ -266,10 +266,7 @@ function ComboBox({
   const wrappedOnSelectionChange: typeof onSelectionChange = useCallback(
     (newKey, ...args) => {
       if (onSelectionChange) {
-        onSelectionChange.apply(this, [
-          typeof newKey === 'string' ? newKey : '',
-          ...args,
-        ])
+        onSelectionChange(typeof newKey === 'string' ? newKey : '', ...args)
         setIsOpen(false)
       }
     },
diff --git a/assets/design-system/src/components/SelectComboShared.tsx b/assets/design-system/src/components/SelectComboShared.tsx
index afa145475d..934d46dd79 100644
--- a/assets/design-system/src/components/SelectComboShared.tsx
+++ b/assets/design-system/src/components/SelectComboShared.tsx
@@ -66,10 +66,10 @@ function useSelectComboStateProps<T extends TType>({
       }
       setIsOpen(open)
       if (onOpenChange) {
-        onOpenChange.apply(this, [open, ...args])
+        onOpenChange(open, ...args)
       }
     },
-    onSelectionChange: (newKeyOrKeys: Key | Selection, ...args: any) => {
+    onSelectionChange: (newKeyOrKeys: Key | Selection) => {
       let newKey: Key = ''
 
       if (
@@ -97,7 +97,9 @@ function useSelectComboStateProps<T extends TType>({
           }
           break
         default:
-          onSelectionChange?.apply(this, [newKeyOrKeys, ...args])
+          ;(onSelectionChange as ((key: Key | Selection) => void) | undefined)?.(
+            newKeyOrKeys
+          )
           break
       }
     },
diff --git a/assets/design-system/src/markdoc/tags/button.markdoc.ts b/assets/design-system/src/markdoc/tags/button.markdoc.ts
index ae9e2234fc..7176e88b56 100644
--- a/assets/design-system/src/markdoc/tags/button.markdoc.ts
+++ b/assets/design-system/src/markdoc/tags/button.markdoc.ts
@@ -27,7 +27,7 @@ export const button: BaseSchema = {
     const children = unwrapParagraphs(node.transformChildren(config))
     const attributes = node.transformAttributes(config)
 
-    return new Tag(this.render, attributes, children)
+    return new Tag(this.render as any, attributes, children)
   },
 }
 
@@ -42,6 +42,6 @@ export const buttonGroup: BaseSchema = {
     )
     const attributes = node.transformAttributes(config)
 
-    return new Tag(this.render, attributes, children)
+    return new Tag(this.render as any, attributes, children)
   },
 }
diff --git a/assets/design-system/tsconfig.json b/assets/design-system/tsconfig.json
index a6a156bf94..c0812eb7a7 100644
--- a/assets/design-system/tsconfig.json
+++ b/assets/design-system/tsconfig.json
@@ -9,8 +9,7 @@
     // TODO: get rid of all these once errors are fixed
     "strictNullChecks": false,
     "strictFunctionTypes": false,
-    "strictPropertyInitialization": false,
-    "noImplicitThis": false
+    "strictPropertyInitialization": false
   },
   "include": ["src/**/*"]
 }

From f80c11efedb9ac5a8a06f522e0cc5129d0f4ddb1 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 13:03:11 +0200
Subject: [PATCH 04/13] migrate design system stories to CSF3 Meta and StoryObj

---
 .../design-system/src/stories/A.stories.tsx   |  19 +-
 .../src/stories/AWSIcons.stories.tsx          |  18 +-
 .../src/stories/Accordion.stories.tsx         |  27 ++-
 .../src/stories/AppIcon.stories.tsx           |  26 ++-
 .../src/stories/Avatar.stories.tsx            |  48 ++--
 .../src/stories/Banner.stories.tsx            |  24 +-
 .../src/stories/Breadcrumbs.stories.tsx       |  38 ++--
 .../src/stories/Button.stories.tsx            | 101 +++++----
 .../src/stories/ButtonGroup.stories.tsx       |  18 +-
 .../src/stories/Callout.stories.tsx           | 128 ++++++-----
 .../src/stories/Card.stories.tsx              |  26 ++-
 .../src/stories/CatalogCard.stories.tsx       |  17 +-
 .../src/stories/CheckBox.stories.tsx          |  38 ++--
 .../src/stories/Checklist.stories.tsx         |  15 +-
 .../src/stories/Chip.stories.tsx              |  30 ++-
 .../src/stories/ChipList.stories.tsx          |  62 ++---
 .../src/stories/ClusterTagsTemplate.tsx       |   1 +
 .../src/stories/Code.stories.tsx              |  66 +++---
 .../src/stories/CodeEditor.stories.tsx        |  24 +-
 .../src/stories/Codeline.stories.tsx          |  28 ++-
 assets/design-system/src/stories/Colors.tsx   |   8 +-
 .../src/stories/ComboBox.stories.tsx          | 119 ++++++----
 .../src/stories/Date.stories.tsx              |  19 +-
 .../src/stories/DiffViewer.stories.tsx        |  42 ++--
 .../src/stories/Divider.stories.tsx           |  28 ++-
 .../src/stories/EmptyState.stories.tsx        |  25 ++-
 .../src/stories/Flyover.stories.tsx           |  47 ++--
 .../src/stories/FormField.stories.tsx         | 131 ++++++-----
 .../src/stories/FormTitle.stories.tsx         |  21 +-
 .../src/stories/Highlight.stories.tsx         |  13 +-
 .../src/stories/IconFrame.stories.tsx         |  16 +-
 .../src/stories/Icons.stories.tsx             | 108 +++++----
 .../src/stories/InlineCode.stories.tsx        |  16 +-
 .../src/stories/Input.stories.tsx             |  82 ++++---
 .../src/stories/ListBox.stories.tsx           |  15 +-
 .../src/stories/LoadingSpinner.stories.tsx    |  27 ++-
 .../src/stories/LoopingLogo.stories.tsx       |  23 +-
 .../src/stories/Markdown.stories.tsx          |  17 +-
 .../src/stories/Modal.stories.tsx             |  53 +++--
 .../src/stories/PageCard.stories.tsx          |  16 +-
 .../src/stories/PageTitle.stories.tsx         |  25 ++-
 .../src/stories/ProgressBar.stories.tsx       |  34 +--
 .../src/stories/Prop.stories.tsx              |  16 +-
 .../src/stories/PropWide.stories.tsx          |  16 +-
 .../src/stories/PropsContainer.stories.tsx    |  16 +-
 .../src/stories/Radio.stories.tsx             |  26 ++-
 .../src/stories/RepositoryCard.stories.tsx    |  23 +-
 .../src/stories/RepositoryChip.stories.tsx    |  45 ++--
 .../src/stories/SegmentedInput.stories.tsx    |  32 +--
 .../src/stories/Select.stories.tsx            |  15 +-
 .../src/stories/Sidecar.stories.tsx           |  19 +-
 .../src/stories/Slider.stories.tsx            |  16 +-
 .../src/stories/StackCard.stories.tsx         |  17 +-
 .../src/stories/Stepper.stories.tsx           |  92 ++++----
 .../src/stories/Switch.stories.tsx            |  34 +--
 .../design-system/src/stories/Tab.stories.tsx |  35 +--
 .../src/stories/TabList.stories.tsx           |  40 ++--
 .../src/stories/Table.stories.tsx             | 212 ++++++++++--------
 .../src/stories/TextSwitch.stories.tsx        |  39 ++--
 .../src/stories/TipCarousel.stories.tsx       |  19 +-
 .../src/stories/Toast.stories.tsx             |  23 +-
 .../src/stories/Tooltip.stories.tsx           |  15 +-
 .../src/stories/TreeNavigation.stories.tsx    |  16 +-
 .../design-system/src/stories/Typography.tsx  |  12 +-
 .../src/stories/UserDetails.stories.tsx       |  16 +-
 .../src/stories/ValidatedInput.stories.tsx    |  13 +-
 .../src/stories/Wizard.stories.tsx            |  22 +-
 .../src/stories/_SemanticSystem.stories.tsx   |  15 +-
 68 files changed, 1479 insertions(+), 1004 deletions(-)

diff --git a/assets/design-system/src/stories/A.stories.tsx b/assets/design-system/src/stories/A.stories.tsx
index f684065749..2cbe34b41d 100644
--- a/assets/design-system/src/stories/A.stories.tsx
+++ b/assets/design-system/src/stories/A.stories.tsx
@@ -1,10 +1,13 @@
 import { A, Flex } from 'honorable'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'A',
   component: A,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -30,8 +33,10 @@ function Template(args: any) {
   )
 }
 
-export const Primary: StoryFn = Template.bind({})
-
-Primary.args = {
-  children: 'Click me',
+export const Primary: Story = {
+  render: Template,
+  args: {
+    children: 'Click me',
+  },
 }
+
diff --git a/assets/design-system/src/stories/AWSIcons.stories.tsx b/assets/design-system/src/stories/AWSIcons.stories.tsx
index 7178b0bf8d..3a8decc784 100644
--- a/assets/design-system/src/stories/AWSIcons.stories.tsx
+++ b/assets/design-system/src/stories/AWSIcons.stories.tsx
@@ -1,11 +1,14 @@
 import { useTheme } from 'styled-components'
 import AWSIcon, { AWSIconName } from '../components/icons/AWSIcon'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'AWSIcon',
   component: AWSIcon,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template({ size, ...args }: any) {
   const theme = useTheme()
@@ -46,7 +49,10 @@ function Template({ size, ...args }: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  size: 32,
+export const Default: Story = {
+  render: Template,
+  args: {
+    size: 32,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Accordion.stories.tsx b/assets/design-system/src/stories/Accordion.stories.tsx
index e932f786af..c4b3084f74 100644
--- a/assets/design-system/src/stories/Accordion.stories.tsx
+++ b/assets/design-system/src/stories/Accordion.stories.tsx
@@ -1,8 +1,8 @@
 import { Accordion } from '..'
 import { AccordionItem } from '../components/Accordion'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Accordion',
   component: Accordion,
   argTypes: {
@@ -37,16 +37,21 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  type: 'single',
-  padding: 'relaxed',
-  paddingArea: 'all',
-  caret: 'right',
-  trigger: 'Title',
-  children: 'Children',
+export const Default: Story = {
+  render: Template,
+  args: {
+    type: 'single',
+    padding: 'relaxed',
+    paddingArea: 'all',
+    caret: 'right',
+    trigger: 'Title',
+    children: 'Children',
+  },
 }
 
 function Template({
diff --git a/assets/design-system/src/stories/AppIcon.stories.tsx b/assets/design-system/src/stories/AppIcon.stories.tsx
index bc890e3229..02074b4448 100644
--- a/assets/design-system/src/stories/AppIcon.stories.tsx
+++ b/assets/design-system/src/stories/AppIcon.stories.tsx
@@ -3,9 +3,9 @@ import { Flex, H3 } from 'honorable'
 import { Card, PluralLogoMark, WrapWithIf } from '..'
 
 import AppIcon from '../components/AppIcon'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'AppIcon',
   component: AppIcon,
   argTypes: {
@@ -34,7 +34,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const sizes = [
   { label: 'Extra Large', size: 'xlarge' },
@@ -105,11 +108,14 @@ function Template({ onFillLevel, icon, ...args }: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  name: 'Michael J Guarino',
-  initials: '',
-  onFillLevel: 0,
-  hue: undefined,
-  clickable: false,
+export const Default: Story = {
+  render: Template,
+  args: {
+    name: 'Michael J Guarino',
+    initials: '',
+    onFillLevel: 0,
+    hue: undefined,
+    clickable: false,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Avatar.stories.tsx b/assets/design-system/src/stories/Avatar.stories.tsx
index d2b35a757d..56bf3cbb84 100644
--- a/assets/design-system/src/stories/Avatar.stories.tsx
+++ b/assets/design-system/src/stories/Avatar.stories.tsx
@@ -1,36 +1,44 @@
 import { Avatar } from 'honorable'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Avatar',
   component: Avatar,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return <Avatar {...args} />
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  name: 'Jane Smith',
+export const Default: Story = {
+  render: Template,
+  args: {
+    name: 'Jane Smith',
+  },
 }
 
-export const ComplexName: StoryFn = Template.bind({})
-
-ComplexName.args = {
-  name: 'Edgard Alan Poe',
+export const ComplexName: Story = {
+  render: Template,
+  args: {
+    name: 'Edgard Alan Poe',
+  },
 }
 
-export const Image: StoryFn = Template.bind({})
-
-Image.args = {
-  src: 'https://avatars.githubusercontent.com/u/4154003?v=4',
+export const Image: Story = {
+  render: Template,
+  args: {
+    src: 'https://avatars.githubusercontent.com/u/4154003?v=4',
+  },
 }
 
-export const Small: StoryFn = Template.bind({})
-
-Small.args = {
-  name: 'Jane Smith',
-  size: 32,
+export const Small: Story = {
+  render: Template,
+  args: {
+    name: 'Jane Smith',
+    size: 32,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Banner.stories.tsx b/assets/design-system/src/stories/Banner.stories.tsx
index cb513d0a26..3cc2a02541 100644
--- a/assets/design-system/src/stories/Banner.stories.tsx
+++ b/assets/design-system/src/stories/Banner.stories.tsx
@@ -1,9 +1,9 @@
 import { A, Flex, H1 } from 'honorable'
 
 import Banner, { BANNER_SEVERITIES } from '../components/Banner'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Banner (AKA Toast Content)',
   component: Banner,
   argTypes: {
@@ -11,12 +11,14 @@ export default {
       type: 'boolean',
     },
     severity: {
-      type: 'select',
+      control: 'select',
       options: BANNER_SEVERITIES,
-      defaultValue: 'info',
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template({ closeButton, ...args }: any) {
   if (closeButton) {
@@ -134,9 +136,11 @@ function Template({ closeButton, ...args }: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  closeButton: false,
-  severity: 'info',
+export const Default: Story = {
+  render: Template,
+  args: {
+    closeButton: false,
+    severity: 'info',
+  },
 }
+
diff --git a/assets/design-system/src/stories/Breadcrumbs.stories.tsx b/assets/design-system/src/stories/Breadcrumbs.stories.tsx
index b474c5f7c7..0a5fc260a6 100644
--- a/assets/design-system/src/stories/Breadcrumbs.stories.tsx
+++ b/assets/design-system/src/stories/Breadcrumbs.stories.tsx
@@ -13,15 +13,18 @@ import { ListBoxItem } from '../components/ListBoxItem'
 import FormField from '../components/FormField'
 
 import { NavContextProviderStub } from './NavigationContextStub'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Breadcrumbs',
-  component: 'Breadcrumbs',
+  component: Breadcrumbs,
   argTypes: {
     maxLength: {},
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const crumbList: Breadcrumb[] = [
   {
@@ -160,18 +163,21 @@ function ManualTemplate(args: any) {
   )
 }
 
-export const UsingContext: StoryFn = WithContextTemplate.bind({})
-
-UsingContext.args = {
-  minLength: undefined,
-  maxLength: undefined,
-  collapsible: true,
+export const UsingContext: Story = {
+  render: WithContextTemplate,
+  args: {
+    minLength: undefined,
+    maxLength: undefined,
+    collapsible: true,
+  },
 }
 
-export const Manual: StoryFn = ManualTemplate.bind({})
-
-Manual.args = {
-  minLength: undefined,
-  maxLength: undefined,
-  collapsible: true,
+export const Manual: Story = {
+  render: ManualTemplate,
+  args: {
+    minLength: undefined,
+    maxLength: undefined,
+    collapsible: true,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Button.stories.tsx b/assets/design-system/src/stories/Button.stories.tsx
index e7207d5345..1b7df8e26a 100644
--- a/assets/design-system/src/stories/Button.stories.tsx
+++ b/assets/design-system/src/stories/Button.stories.tsx
@@ -2,9 +2,9 @@ import { useTheme } from 'styled-components'
 import Button from '../components/Button'
 import Flex from '../components/Flex'
 import DownloadIcon from '../components/icons/DownloadIcon'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Button',
   component: Button,
   argTypes: {
@@ -21,7 +21,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function TemplateBase(args: any) {
   return (
@@ -88,57 +91,63 @@ function Template(args: any) {
   )
 }
 
-export const Primary: StoryFn = Template.bind({})
-
-Primary.args = {
-  disabled: false,
-  loading: false,
-  children: 'Primary Button',
+export const Primary: Story = {
+  render: Template,
+  args: {
+    disabled: false,
+    loading: false,
+    children: 'Primary Button',
+  },
 }
 
-export const SecondaryFloating: StoryFn = Template.bind({})
-
-SecondaryFloating.args = {
-  disabled: false,
-  loading: false,
-  children: 'Floating Button',
-  floating: true,
+export const SecondaryFloating: Story = {
+  render: Template,
+  args: {
+    disabled: false,
+    loading: false,
+    children: 'Floating Button',
+    floating: true,
+  },
 }
 
-export const SecondaryOutline: StoryFn = Template.bind({})
-
-SecondaryOutline.args = {
-  disabled: false,
-  loading: false,
-  children: 'Secondary Button',
-  secondary: true,
+export const SecondaryOutline: Story = {
+  render: Template,
+  args: {
+    disabled: false,
+    loading: false,
+    children: 'Secondary Button',
+    secondary: true,
+  },
 }
 
-export const Tertiary: StoryFn = Template.bind({})
-
-Tertiary.args = {
-  disabled: false,
-  loading: false,
-  children: 'Tertiary Button',
-  tertiary: true,
-  padding: '',
+export const Tertiary: Story = {
+  render: Template,
+  args: {
+    disabled: false,
+    loading: false,
+    children: 'Tertiary Button',
+    tertiary: true,
+    padding: '',
+  },
 }
 
-export const TertiaryNoPadding: StoryFn = Template.bind({})
-
-TertiaryNoPadding.args = {
-  disabled: false,
-  loading: false,
-  children: 'Tertiary Button',
-  tertiary: true,
-  padding: 'none',
+export const TertiaryNoPadding: Story = {
+  render: Template,
+  args: {
+    disabled: false,
+    loading: false,
+    children: 'Tertiary Button',
+    tertiary: true,
+    padding: 'none',
+  },
 }
 
-export const Destructive: StoryFn = Template.bind({})
-
-Destructive.args = {
-  disabled: false,
-  loading: false,
-  children: 'Destructive Button',
-  destructive: true,
+export const Destructive: Story = {
+  render: Template,
+  args: {
+    disabled: false,
+    loading: false,
+    children: 'Destructive Button',
+    destructive: true,
+  },
 }
diff --git a/assets/design-system/src/stories/ButtonGroup.stories.tsx b/assets/design-system/src/stories/ButtonGroup.stories.tsx
index 0232f5ada2..136e7038d2 100644
--- a/assets/design-system/src/stories/ButtonGroup.stories.tsx
+++ b/assets/design-system/src/stories/ButtonGroup.stories.tsx
@@ -4,9 +4,9 @@ import { useRef, useState } from 'react'
 import { type Key } from '@react-types/shared'
 
 import { SubTab, TabList, type TabListStateProps, TabPanel } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'ButtonGroup',
   component: SubTab,
   argTypes: {
@@ -17,7 +17,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const tabs = {
   lions: {
@@ -102,7 +105,10 @@ function TemplateBasic(args: any) {
   )
 }
 
-export const Default: StoryFn = TemplateBasic.bind({})
-Default.args = {
-  size: 'small',
+export const Default: Story = {
+  render: TemplateBasic,
+  args: {
+    size: 'small',
+  },
 }
+
diff --git a/assets/design-system/src/stories/Callout.stories.tsx b/assets/design-system/src/stories/Callout.stories.tsx
index fc24d60b61..bccc443eeb 100644
--- a/assets/design-system/src/stories/Callout.stories.tsx
+++ b/assets/design-system/src/stories/Callout.stories.tsx
@@ -4,9 +4,9 @@ import { useState } from 'react'
 
 import { type FillLevel } from '../components/contexts/FillLevelContext'
 import { Button, Callout, type CalloutProps, Card } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Callout',
   component: Callout,
   argTypes: {
@@ -30,8 +30,9 @@ export default {
       control: { type: 'boolean' },
     },
   },
-}
+} satisfies Meta<any>
 
+export default meta
 const styles: CalloutProps['severity'][] = [
   'info',
   'neutral',
@@ -187,71 +188,90 @@ function CloseableTemplate({ title }: CalloutProps) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  title: '',
-  size: 'full',
-  withButton: false,
-  onFillLevel: 0,
+export const Default: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    title: '',
+    size: 'full',
+    withButton: false,
+    onFillLevel: 0,
+  },
 }
 
-export const WithTitle: StoryFn = Template.bind({})
-WithTitle.args = {
-  title: 'Title text - How to write a dummy title',
-  size: 'full',
-  withButton: false,
-  onFillLevel: 0,
+export const WithTitle: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    title: 'Title text - How to write a dummy title',
+    size: 'full',
+    withButton: false,
+    onFillLevel: 0,
+  },
 }
 
-export const OnlyTitle: StoryFn = Template.bind({})
-OnlyTitle.args = {
-  title: 'Title text - How to write a dummy title',
-  size: 'full',
-  noContent: true,
-  withButton: false,
-  onFillLevel: 0,
+export const OnlyTitle: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    title: 'Title text - How to write a dummy title',
+    size: 'full',
+    noContent: true,
+    withButton: false,
+    onFillLevel: 0,
+  },
 }
 
-export const Compact: StoryFn = Template.bind({})
-Compact.args = {
-  title: '',
-  size: 'compact',
-  withButton: false,
-  onFillLevel: 0,
+export const Compact: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    title: '',
+    size: 'compact',
+    withButton: false,
+    onFillLevel: 0,
+  },
 }
 
-export const WithButton: StoryFn = Template.bind({})
-WithButton.args = {
-  title: '',
-  size: 'full',
-  withButton: true,
-  onFillLevel: 0,
+export const WithButton: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    title: '',
+    size: 'full',
+    withButton: true,
+    onFillLevel: 0,
+  },
 }
 
-export const Expandable: StoryFn = ExpandableTemplate.bind({})
-Expandable.args = {
-  title: 'Why do I need to authenticate with GitHub/GitLab?',
-  controlled: 'false',
+export const Expandable: StoryObj<Parameters<typeof ExpandableTemplate>[0]> = {
+  render: ExpandableTemplate,
+  args: {
+    title: 'Why do I need to authenticate with GitHub/GitLab?',
+    controlled: false,
+  },
 }
 
-export const Closeable: StoryFn = CloseableTemplate.bind({})
-Expandable.args = {
-  title: 'Why do I need to authenticate with GitHub/GitLab?',
+export const Closeable: StoryObj<Parameters<typeof CloseableTemplate>[0]> = {
+  render: CloseableTemplate,
+  args: {
+    title: 'Why do I need to authenticate with GitHub/GitLab?',
+  },
 }
 
-export const KitchenSink: StoryFn = Template.bind({})
-KitchenSink.args = {
-  title: 'Title text - How to write a dummy title',
-  size: 'full',
-  withButton: true,
-  onFillLevel: 0,
+export const KitchenSink: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    title: 'Title text - How to write a dummy title',
+    size: 'full',
+    withButton: true,
+    onFillLevel: 0,
+  },
 }
 
-export const OnCard: StoryFn = Template.bind({})
-OnCard.args = {
-  title: 'Title text - How to write a dummy title',
-  size: 'full',
-  withButton: true,
-  onFillLevel: 1,
-  expandable: false,
+export const OnCard: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    title: 'Title text - How to write a dummy title',
+    size: 'full',
+    withButton: true,
+    onFillLevel: 1,
+    expandable: false,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Card.stories.tsx b/assets/design-system/src/stories/Card.stories.tsx
index ab59fdb43f..005b1104e3 100644
--- a/assets/design-system/src/stories/Card.stories.tsx
+++ b/assets/design-system/src/stories/Card.stories.tsx
@@ -6,9 +6,9 @@ import { type FillLevel } from '../components/contexts/FillLevelContext'
 
 import type { CardProps } from '../components/Card'
 import { Card, Flex, InfoOutlineIcon, Tooltip } from '../index'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Card',
   component: null,
   argTypes: {
@@ -20,8 +20,9 @@ export default {
       control: { type: 'text' },
     },
   },
-}
+} satisfies Meta<any>
 
+export default meta
 const fillLevels: (FillLevel | undefined)[] = [undefined, 1, 2, 3]
 const cornerSizes: ComponentProps<typeof Card>['cornerSize'][] = [
   'medium',
@@ -138,8 +139,9 @@ function FillLevelTemplate({
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
+export const Default: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
   selected: false,
   clickable: false,
   disabled: false,
@@ -158,18 +160,22 @@ Default.args = {
       </Tooltip>
     </Flex>
   ),
+},
 }
 
-export const Clickable: StoryFn = Template.bind({})
-Clickable.args = {
+export const Clickable: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
   ...Default.args,
   ...{
     clickable: true,
   },
+},
 }
 
-export const WithFillLevelContext: StoryFn = FillLevelTemplate.bind({})
-WithFillLevelContext.args = {
+export const WithFillLevelContext: StoryObj<Parameters<typeof FillLevelTemplate>[0]> = {
+  render: FillLevelTemplate,
+  args: {
   selected: false,
   clickable: false,
   disabled: false,
@@ -187,4 +193,6 @@ WithFillLevelContext.args = {
       </Tooltip>
     </Flex>
   ),
+},
 }
+
diff --git a/assets/design-system/src/stories/CatalogCard.stories.tsx b/assets/design-system/src/stories/CatalogCard.stories.tsx
index c4c570dd91..e26ae6f138 100644
--- a/assets/design-system/src/stories/CatalogCard.stories.tsx
+++ b/assets/design-system/src/stories/CatalogCard.stories.tsx
@@ -1,12 +1,15 @@
 import { Div } from 'honorable'
 
 import CatalogCard from '../components/CatalogCard'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'CatalogCard',
   component: CatalogCard,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -44,9 +47,9 @@ function Template(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
+export const Default: Story = {
+  render: Template,
+  args: {
   name: 'Base catalog',
   author: 'Plural',
   category: 'Messaging',
@@ -62,4 +65,6 @@ Default.args = {
     'Cricket',
     'Support',
   ],
+},
 }
+
diff --git a/assets/design-system/src/stories/CheckBox.stories.tsx b/assets/design-system/src/stories/CheckBox.stories.tsx
index ba927d9cab..7ba59e0a49 100644
--- a/assets/design-system/src/stories/CheckBox.stories.tsx
+++ b/assets/design-system/src/stories/CheckBox.stories.tsx
@@ -4,12 +4,15 @@ import { useState } from 'react'
 import { type Key } from '@react-types/shared'
 
 import { Button, Checkbox } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Checkbox',
   component: Checkbox,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 type CheckedVal = 'checked' | 'unchecked' | 'indeterminate'
 type CheckedVals = Record<string, CheckedVal>
@@ -87,18 +90,23 @@ function Template(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  small: false,
-  disabled: false,
-  defaultSelected: false,
-  tabIndex: 0,
+export const Default: Story = {
+  render: Template,
+  args: {
+    small: false,
+    disabled: false,
+    defaultSelected: false,
+    tabIndex: 0,
+  },
 }
 
-export const Small: StoryFn = Template.bind({})
-Small.args = {
-  small: true,
-  disabled: false,
-  defaultSelected: false,
-  tabIndex: 0,
+export const Small: Story = {
+  render: Template,
+  args: {
+    small: true,
+    disabled: false,
+    defaultSelected: false,
+    tabIndex: 0,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Checklist.stories.tsx b/assets/design-system/src/stories/Checklist.stories.tsx
index 020320e0b7..d6ba067246 100644
--- a/assets/design-system/src/stories/Checklist.stories.tsx
+++ b/assets/design-system/src/stories/Checklist.stories.tsx
@@ -7,12 +7,15 @@ import DownloadIcon from '../components/icons/DownloadIcon'
 import GitHubLogoIcon from '../components/icons/GitHubLogoIcon'
 import MarketIcon from '../components/icons/MarketIcon'
 import TerminalIcon from '../components/icons/TerminalIcon'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Checklist',
   component: Checklist,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template() {
   const [selected, setSelected] = useState<number>(0)
@@ -214,6 +217,8 @@ function Template() {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
+export const Default: Story = {
+  render: Template,
+  args: {},
+}
 
-Default.args = {}
diff --git a/assets/design-system/src/stories/Chip.stories.tsx b/assets/design-system/src/stories/Chip.stories.tsx
index 4b228bc50e..5f02a8dde4 100644
--- a/assets/design-system/src/stories/Chip.stories.tsx
+++ b/assets/design-system/src/stories/Chip.stories.tsx
@@ -8,9 +8,9 @@ import Card from '../components/Card'
 import { SEVERITIES } from '../types'
 
 import { Link } from './NavigationContextStub'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Chip',
   component: Chip,
   argTypes: {
@@ -27,7 +27,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const sizes: ComponentProps<typeof Chip>['size'][] = [
   'small',
@@ -233,13 +236,16 @@ function Template({ onFillLevel, asLink, ...args }: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  closeButton: true,
-  clickable: true,
-  disabled: false,
-  asLink: false,
-  onFillLevel: 0,
-  tooltip: false,
-  condensed: false,
+export const Default: Story = {
+  render: Template,
+  args: {
+    closeButton: true,
+    clickable: true,
+    disabled: false,
+    asLink: false,
+    onFillLevel: 0,
+    tooltip: false,
+    condensed: false,
+  },
 }
+
diff --git a/assets/design-system/src/stories/ChipList.stories.tsx b/assets/design-system/src/stories/ChipList.stories.tsx
index 9bbad01034..72d736ea14 100644
--- a/assets/design-system/src/stories/ChipList.stories.tsx
+++ b/assets/design-system/src/stories/ChipList.stories.tsx
@@ -5,7 +5,7 @@ import Card from '../components/Card'
 import ChipList from '../components/ChipList'
 import WrapWithIf from '../components/WrapWithIf'
 import { SEVERITIES } from '../types'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 const sizes: ComponentProps<typeof Chip>['size'][] = [
   'small',
@@ -15,7 +15,7 @@ const sizes: ComponentProps<typeof Chip>['size'][] = [
 
 const severities: ComponentProps<typeof Chip>['severity'][] = [...SEVERITIES]
 
-export default {
+const meta = {
   title: 'ChipList',
   component: ChipList,
   argTypes: {
@@ -38,7 +38,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function TextTemplate({ onFillLevel, ...args }: any) {
   const VALUES = [
@@ -152,32 +155,41 @@ function EmptyTemplate({ onFillLevel, ...args }: any) {
   )
 }
 
-export const Text: StoryFn = TextTemplate.bind({})
-Text.args = {
-  severity: 'info',
-  size: 'small',
-  onFillLevel: 0,
+export const Text: Story = {
+  render: TextTemplate,
+  args: {
+    severity: 'info',
+    size: 'small',
+    onFillLevel: 0,
+  },
 }
 
-export const Label: StoryFn = LabelTemplate.bind({})
-Label.args = {
-  severity: 'info',
-  size: 'small',
-  onFillLevel: 0,
+export const Label: Story = {
+  render: LabelTemplate,
+  args: {
+    severity: 'info',
+    size: 'small',
+    onFillLevel: 0,
+  },
 }
 
-export const Empty: StoryFn = EmptyTemplate.bind({})
-Empty.args = {
-  severity: 'info',
-  size: 'small',
-  onFillLevel: 0,
+export const Empty: Story = {
+  render: EmptyTemplate,
+  args: {
+    severity: 'info',
+    size: 'small',
+    onFillLevel: 0,
+  },
 }
 
-export const CustomClick: StoryFn = CustomClickTemplate.bind({})
-CustomClick.args = {
-  severity: 'info',
-  size: 'small',
-  onFillLevel: 0,
-  onClickCondition: (value: string) => value === 'avengers',
-  onClick: (value: string) => alert(value),
+export const CustomClick: Story = {
+  render: CustomClickTemplate,
+  args: {
+    severity: 'info',
+    size: 'small',
+    onFillLevel: 0,
+    onClickCondition: (value: string) => value === 'avengers',
+    onClick: (value: string) => alert(value),
+  },
 }
+
diff --git a/assets/design-system/src/stories/ClusterTagsTemplate.tsx b/assets/design-system/src/stories/ClusterTagsTemplate.tsx
index 1d9a85b095..f012359c01 100644
--- a/assets/design-system/src/stories/ClusterTagsTemplate.tsx
+++ b/assets/design-system/src/stories/ClusterTagsTemplate.tsx
@@ -51,6 +51,7 @@ export function ClusterTagsTemplate({
 }: {
   onFillLevel: any
   withTitleContent: boolean
+  loading?: boolean
 }) {
   const theme = useTheme()
   const [selectedTagKeys, setSelectedTagKeys] = useState(new Set<Key>())
diff --git a/assets/design-system/src/stories/Code.stories.tsx b/assets/design-system/src/stories/Code.stories.tsx
index 23c9f689cf..a0ff14931a 100644
--- a/assets/design-system/src/stories/Code.stories.tsx
+++ b/assets/design-system/src/stories/Code.stories.tsx
@@ -2,7 +2,7 @@ import { Flex } from 'honorable'
 import { useTheme } from 'styled-components'
 
 import { Card, Code, WrapWithIf } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import {
   cCode,
@@ -13,7 +13,7 @@ import {
   tfCode,
 } from '../constants'
 
-export default {
+const meta = {
   title: 'Code',
   component: Code,
   argTypes: {
@@ -49,7 +49,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template({ onFillLevel, ...args }: any) {
   return (
@@ -233,20 +236,24 @@ function WithTabsTemplate({ onFillLevel, title, ...args }: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  title: '',
-  showLineNumbers: true,
-  showHeader: undefined,
+export const Default: Story = {
+  render: Template,
+  args: {
+    title: '',
+    showLineNumbers: true,
+    showHeader: undefined,
+  },
 }
 
-export const WithTabs: StoryFn = WithTabsTemplate.bind({})
-WithTabs.args = {
-  title: 'This is an optional title',
-  showLineNumbers: true,
-  showHeader: undefined,
-  onFillLevel: 0,
-  height: 300,
+export const WithTabs: Story = {
+  render: WithTabsTemplate,
+  args: {
+    title: 'This is an optional title',
+    showLineNumbers: true,
+    showHeader: undefined,
+    onFillLevel: 0,
+    height: 300,
+  },
 }
 
 const flowchartMermaid = `graph TD
@@ -351,12 +358,14 @@ function MermaidTemplate({ onFillLevel, ...args }: any) {
   )
 }
 
-export const Mermaid: StoryFn = MermaidTemplate.bind({})
-Mermaid.args = {
-  title: '',
-  showLineNumbers: false,
-  showHeader: undefined,
-  onFillLevel: 0,
+export const Mermaid: Story = {
+  render: MermaidTemplate,
+  args: {
+    title: '',
+    showLineNumbers: false,
+    showHeader: undefined,
+    onFillLevel: 0,
+  },
 }
 
 const mermaidTabs = [
@@ -415,10 +424,13 @@ function MermaidWithTabsTemplate({ onFillLevel, title, ...args }: any) {
   )
 }
 
-export const MermaidWithTabs: StoryFn = MermaidWithTabsTemplate.bind({})
-MermaidWithTabs.args = {
-  title: 'Mermaid Diagrams',
-  showLineNumbers: false,
-  showHeader: undefined,
-  onFillLevel: 0,
+export const MermaidWithTabs: Story = {
+  render: MermaidWithTabsTemplate,
+  args: {
+    title: 'Mermaid Diagrams',
+    showLineNumbers: false,
+    showHeader: undefined,
+    onFillLevel: 0,
+  },
 }
+
diff --git a/assets/design-system/src/stories/CodeEditor.stories.tsx b/assets/design-system/src/stories/CodeEditor.stories.tsx
index 88cf74d174..ab306cb006 100644
--- a/assets/design-system/src/stories/CodeEditor.stories.tsx
+++ b/assets/design-system/src/stories/CodeEditor.stories.tsx
@@ -3,9 +3,9 @@ import { Div, Flex } from 'honorable'
 import { Card, CodeEditor, WrapWithIf } from '..'
 
 import { goCode, jsCode, tfCode } from '../constants'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Code Editor',
   component: CodeEditor,
   argTypes: {
@@ -27,7 +27,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template({ onFillLevel, ...args }: any) {
   return (
@@ -112,10 +115,15 @@ function StretchedTemplate({ onFillLevel, ...args }: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  options: { lineNumbers: true },
+export const Default: Story = {
+  render: Template,
+  args: {
+    options: { lineNumbers: true },
+  },
+}
+
+export const Stretched: Story = {
+  render: StretchedTemplate,
+  args: {},
 }
 
-export const Stretched: StoryFn = StretchedTemplate.bind({})
-Stretched.args = {}
diff --git a/assets/design-system/src/stories/Codeline.stories.tsx b/assets/design-system/src/stories/Codeline.stories.tsx
index a16dfaa60b..0bbf599e9a 100644
--- a/assets/design-system/src/stories/Codeline.stories.tsx
+++ b/assets/design-system/src/stories/Codeline.stories.tsx
@@ -1,12 +1,15 @@
 import { Flex } from 'honorable'
 
 import { Codeline } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Codeline',
   component: Codeline,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -47,14 +50,17 @@ function CustomCopyTemplate(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  children: 'npm i @pluralsh/design-system',
+export const Default: Story = {
+  render: Template,
+  args: {
+    children: 'npm i @pluralsh/design-system',
+  },
 }
 
-export const CustomCopy: StoryFn = CustomCopyTemplate.bind({})
-
-CustomCopy.args = {
-  children: 'npm i @pluralsh/design-system',
+export const CustomCopy: Story = {
+  render: CustomCopyTemplate,
+  args: {
+    children: 'npm i @pluralsh/design-system',
+  },
 }
+
diff --git a/assets/design-system/src/stories/Colors.tsx b/assets/design-system/src/stories/Colors.tsx
index 771aec9372..c7974849eb 100644
--- a/assets/design-system/src/stories/Colors.tsx
+++ b/assets/design-system/src/stories/Colors.tsx
@@ -8,7 +8,7 @@ import Divider from '../components/Divider'
 import { FlexWrap } from './FlexWrap'
 import { FilledBox } from './FilledBox'
 import { ItemLabel } from './ItemLabel'
-import type { StoryFn } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 
 const ColorBox = styled(FilledBox)<{ $colorKey: string | number }>(
   ({ theme, $colorKey }) => ({
@@ -117,7 +117,9 @@ function Template() {
   )
 }
 
-const Exp: StoryFn = Template.bind({})
+const Exp: StoryObj = {
+  render: Template,
+  args: {},
+}
 
-Exp.args = {}
 export default Exp
diff --git a/assets/design-system/src/stories/ComboBox.stories.tsx b/assets/design-system/src/stories/ComboBox.stories.tsx
index 812095ef28..146bd7b21a 100644
--- a/assets/design-system/src/stories/ComboBox.stories.tsx
+++ b/assets/design-system/src/stories/ComboBox.stories.tsx
@@ -21,11 +21,11 @@ import {
 
 import { ClusterTagsTemplate } from './ClusterTagsTemplate'
 import TagMultiSelectTemplate from './TagMultiselectTemplate'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Combo Box',
-  component: 'ComboBox',
+  component: ComboBox,
   argTypes: {
     onFillLevel: {
       options: [0, 1, 2, 3],
@@ -40,8 +40,9 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
 
+export default meta
 const portrait = (
   <AppIcon
     spacing="none"
@@ -197,6 +198,7 @@ function Template({
 }: {
   onFillLevel: any
   withTitleContent: boolean
+  loading?: boolean
 }) {
   const [selectedKeys, setSelectedKeys] = useState(new Set<Key>())
   const [inputValue, setInputValue] = useState('')
@@ -214,9 +216,17 @@ function Template({
     [filteredItems]
   )
 
-  const searchResults = useMemo(() => {
+  const searchResults = useMemo((): {
+    item: Item
+    score: number
+    refIndex: number
+  }[] => {
     if (inputValue) {
-      return fuse.search(inputValue)
+      return fuse.search(inputValue).map(({ item, score, refIndex }) => ({
+        item,
+        score: score ?? 1,
+        refIndex,
+      }))
     }
 
     return filteredItems.map((item, i) => ({ item, score: 1, refIndex: i }))
@@ -275,18 +285,16 @@ function Template({
               : {})}
             {...args}
           >
-            {searchResults.map(
-              ({ item, score: _score, refIndex: _refIndex }) => (
-                <ListBoxItem
-                  key={item.key}
-                  label={item.label}
-                  textValue={`${item.label} – ${item.description}`}
-                  description={item.description}
-                  leftContent={portrait}
-                  selected={selectedKeys.has(item.key)}
-                />
-              )
-            )}
+            {searchResults.map(({ item }) => (
+              <ListBoxItem
+                key={item.key}
+                label={item.label}
+                textValue={`${item.label} – ${item.description}`}
+                description={item.description}
+                leftContent={portrait}
+                selected={selectedKeys.has(item.key)}
+              />
+            ))}
           </ComboBox>
           {!(selectedKeys.size === 0) && (
             <ChipList
@@ -321,6 +329,7 @@ function TagsTemplate({
 }: {
   onFillLevel: any
   withTitleContent: boolean
+  loading?: boolean
 }) {
   const [selectedKeys, setSelectedKeys] = useState(new Set<Key>())
   const [inputValue, setInputValue] = useState('')
@@ -351,9 +360,17 @@ function TagsTemplate({
     [filteredItems]
   )
 
-  const searchResults = useMemo(() => {
+  const searchResults = useMemo((): {
+    item: Item
+    score: number
+    refIndex: number
+  }[] => {
     if (inputValue) {
-      return fuse.search(inputValue)
+      return fuse.search(inputValue).map(({ item, score, refIndex }) => ({
+        item,
+        score: score ?? 1,
+        refIndex,
+      }))
     }
 
     return filteredItems.map((item, i) => ({ item, score: 1, refIndex: i }))
@@ -437,16 +454,14 @@ function TagsTemplate({
               : {})}
             {...args}
           >
-            {searchResults.map(
-              ({ item, score: _score, refIndex: _refIndex }) => (
-                <ListBoxItem
-                  key={item.key}
-                  label={item.key}
-                  textValue={`${item.key}`}
-                  selected={selectedKeys.has(item.key)}
-                />
-              )
-            )}
+            {searchResults.map(({ item }) => (
+              <ListBoxItem
+                key={item.key}
+                label={item.key}
+                textValue={`${item.key}`}
+                selected={selectedKeys.has(item.key)}
+              />
+            ))}
           </ComboBox>
           {!(selectedKeys.size === 0) && (
             <ChipList
@@ -474,23 +489,28 @@ function TagsTemplate({
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  loading: false,
-  withTitleContent: false,
+export const Default: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    loading: false,
+    withTitleContent: false,
+  },
 }
 
-export const Tags: StoryFn = TagsTemplate.bind({})
-Tags.args = {
-  loading: false,
-  withTitleContent: false,
+export const Tags: StoryObj<Parameters<typeof TagsTemplate>[0]> = {
+  render: TagsTemplate,
+  args: {
+    loading: false,
+    withTitleContent: false,
+  },
 }
 
-export const ClusterTags: StoryFn = ClusterTagsTemplate.bind({})
-ClusterTags.args = {
-  loading: false,
-  withTitleContent: false,
+export const ClusterTags: StoryObj<Parameters<typeof ClusterTagsTemplate>[0]> = {
+  render: ClusterTagsTemplate,
+  args: {
+    loading: false,
+    withTitleContent: false,
+  },
 }
 
 const TAGS = [
@@ -511,18 +531,21 @@ const TAGS = [
 ]
 const tags = uniqWith(TAGS, isEqual)
 
-export const TagMultiSelect: StoryFn = TagMultiSelectTemplate.bind({})
-TagMultiSelect.args = {
+export const TagMultiSelect: StoryObj<Parameters<typeof TagMultiSelectTemplate>[0]> = {
+  render: TagMultiSelectTemplate,
+  args: {
   loading: false,
   options: tags.map((tag) => `${tag.name}:${tag.value}`),
   width: 100,
-  onSelectedTagsChange: (keys: Set<Key>) => {
+  onSelectedTagsChange: (keys) => {
     console.log('Selected keys:', keys)
   },
-  onFilterChange: (filter: string) => {
+  onFilterChange: (filter) => {
     console.log('Filter:', filter)
   },
-  onChangeMatchType: (matchType: 'AND' | 'OR') => {
+  onChangeMatchType: (matchType) => {
     console.log('Match type: ', matchType)
   },
+},
 }
+
diff --git a/assets/design-system/src/stories/Date.stories.tsx b/assets/design-system/src/stories/Date.stories.tsx
index 9499186a3f..6eaec150c3 100644
--- a/assets/design-system/src/stories/Date.stories.tsx
+++ b/assets/design-system/src/stories/Date.stories.tsx
@@ -1,12 +1,15 @@
 import styled from 'styled-components'
 
 import { Date } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Date',
   component: Date,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const RootWrap = styled.div(({ theme }) => ({
   display: 'flex',
@@ -40,8 +43,10 @@ function Template() {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  date: '2016-01-08T00:00:00-06:00',
+export const Default: Story = {
+  render: Template,
+  args: {
+    date: '2016-01-08T00:00:00-06:00',
+  },
 }
+
diff --git a/assets/design-system/src/stories/DiffViewer.stories.tsx b/assets/design-system/src/stories/DiffViewer.stories.tsx
index be2aea1899..b8d25f6e77 100644
--- a/assets/design-system/src/stories/DiffViewer.stories.tsx
+++ b/assets/design-system/src/stories/DiffViewer.stories.tsx
@@ -1,5 +1,5 @@
 import { DiffMethod, DiffViewer } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 const OLD_VALUE = `apiVersion: v1
 kind: ConfigMap
@@ -20,7 +20,7 @@ data:
   extra: true
 `
 
-export default {
+const meta = {
   title: 'DiffViewer',
   component: DiffViewer,
   argTypes: {
@@ -34,7 +34,10 @@ export default {
       control: 'boolean',
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -44,20 +47,25 @@ function Template(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  oldValue: OLD_VALUE,
-  newValue: NEW_VALUE,
-  splitView: false,
-  compareMethod: DiffMethod.LINES,
-  asCard: true,
+export const Default: Story = {
+  render: Template,
+  args: {
+    oldValue: OLD_VALUE,
+    newValue: NEW_VALUE,
+    splitView: false,
+    compareMethod: DiffMethod.LINES,
+    asCard: true,
+  },
 }
 
-export const DeletedFile: StoryFn = Template.bind({})
-DeletedFile.args = {
-  oldValue: OLD_VALUE,
-  newValue: '',
-  splitView: false,
-  compareMethod: DiffMethod.LINES,
-  asCard: true,
+export const DeletedFile: Story = {
+  render: Template,
+  args: {
+    oldValue: OLD_VALUE,
+    newValue: '',
+    splitView: false,
+    compareMethod: DiffMethod.LINES,
+    asCard: true,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Divider.stories.tsx b/assets/design-system/src/stories/Divider.stories.tsx
index 9b644bb363..48eaa09d8f 100644
--- a/assets/design-system/src/stories/Divider.stories.tsx
+++ b/assets/design-system/src/stories/Divider.stories.tsx
@@ -1,23 +1,29 @@
 import Divider from '../components/Divider'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Divider',
   component: Divider,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return <Divider {...args} />
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  text: '',
+export const Default: Story = {
+  render: Template,
+  args: {
+    text: '',
+  },
 }
 
-export const Text: StoryFn = Template.bind({})
-
-Text.args = {
-  text: "That's division allright!",
+export const Text: Story = {
+  render: Template,
+  args: {
+    text: "That's division allright!",
+  },
 }
+
diff --git a/assets/design-system/src/stories/EmptyState.stories.tsx b/assets/design-system/src/stories/EmptyState.stories.tsx
index 2ec813c8af..7eb651c37c 100644
--- a/assets/design-system/src/stories/EmptyState.stories.tsx
+++ b/assets/design-system/src/stories/EmptyState.stories.tsx
@@ -2,22 +2,27 @@ import { Button } from 'honorable'
 
 import BellIcon from '../components/icons/BellIcon'
 import EmptyState from '../components/EmptyState'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'EmptyState',
   component: EmptyState,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return <EmptyState {...args} />
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  message: 'This is an empty state',
-  description: 'Some description.',
-  icon: <BellIcon />,
-  children: <Button>Click me!</Button>,
+export const Default: Story = {
+  render: Template,
+  args: {
+    message: 'This is an empty state',
+    description: 'Some description.',
+    icon: <BellIcon />,
+    children: <Button>Click me!</Button>,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Flyover.stories.tsx b/assets/design-system/src/stories/Flyover.stories.tsx
index 5f86c7dad2..e579a9acc3 100644
--- a/assets/design-system/src/stories/Flyover.stories.tsx
+++ b/assets/design-system/src/stories/Flyover.stories.tsx
@@ -5,13 +5,16 @@ import styled from 'styled-components'
 
 import { Button, Card, Code, Flyover, FormField, Input2, SearchIcon } from '..'
 import { jsCode } from '../constants'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Flyover',
   component: Flyover,
   argTypes: {},
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function ExtraContent() {
   return (
@@ -143,25 +146,29 @@ function NonScrollTemplate(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  header: 'Default',
-  asForm: false,
-  scrollable: true,
+export const Default: Story = {
+  render: Template,
+  args: {
+    header: 'Default',
+    asForm: false,
+    scrollable: true,
+  },
 }
 
-export const Form: StoryFn = Template.bind({})
-
-Form.args = {
-  header: 'Form',
-  asForm: true,
-  scrollable: true,
+export const Form: Story = {
+  render: Template,
+  args: {
+    header: 'Form',
+    asForm: true,
+    scrollable: true,
+  },
 }
 
-export const NonScrollable: StoryFn = NonScrollTemplate.bind({})
-
-NonScrollable.args = {
-  header: 'Non-scrollable',
-  scrollable: false,
+export const NonScrollable: Story = {
+  render: NonScrollTemplate,
+  args: {
+    header: 'Non-scrollable',
+    scrollable: false,
+  },
 }
+
diff --git a/assets/design-system/src/stories/FormField.stories.tsx b/assets/design-system/src/stories/FormField.stories.tsx
index d7b015fedd..10469d9a0b 100644
--- a/assets/design-system/src/stories/FormField.stories.tsx
+++ b/assets/design-system/src/stories/FormField.stories.tsx
@@ -5,12 +5,15 @@ import Input from '../components/Input'
 import FormField from '../components/FormField'
 import MagnifyingGlassIcon from '../components/icons/MagnifyingGlassIcon'
 import CaretDownIcon from '../components/icons/CaretDownIcon'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'FormField',
   component: FormField,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   const [value, setValue] = useState('')
@@ -85,9 +88,9 @@ function AllSizesTemplate(args: any) {
   )
 }
 
-export const Full: StoryFn = AllSizesTemplate.bind({})
-
-Full.args = {
+export const Full: Story = {
+  render: AllSizesTemplate,
+  args: {
   label: 'Label',
   caption: 'Action',
   maxLength: 120,
@@ -100,84 +103,95 @@ Full.args = {
       mx="3px"
     />
   ),
+},
 }
 
-export const FullError: StoryFn = AllSizesTemplate.bind({})
-
-FullError.args = {
+export const FullError: Story = {
+  render: AllSizesTemplate,
+  args: {
   ...Full.args,
   ...{
     label: 'Password',
     hint: 'Something is wrong',
     error: true,
   },
+},
 }
 
-export const FullDisabled: StoryFn = AllSizesTemplate.bind({})
-
-FullDisabled.args = {
+export const FullDisabled: Story = {
+  render: AllSizesTemplate,
+  args: {
   ...Full.args,
   ...{
     disabled: true,
   },
+},
 }
 
-export const Horizontal: StoryFn = Template.bind({})
-
-Horizontal.args = {
-  ...Full.args,
-  layout: 'horizontal',
+export const Horizontal: Story = {
+  render: Template,
+  args: {
+    ...Full.args,
+    layout: 'horizontal',
+  },
 }
 
-export const Default: StoryFn = AllSizesTemplate.bind({})
-
-Default.args = {}
-
-export const Label: StoryFn = AllSizesTemplate.bind({})
-
-Label.args = {
-  label: 'Email',
+export const Default: Story = {
+  render: AllSizesTemplate,
+  args: {},
 }
 
-export const Required: StoryFn = AllSizesTemplate.bind({})
-
-Required.args = {
-  label: 'Email',
-  required: true,
+export const Label: Story = {
+  render: AllSizesTemplate,
+  args: {
+    label: 'Email',
+  },
 }
 
-export const Caption: StoryFn = AllSizesTemplate.bind({})
-
-Caption.args = {
-  label: 'Password',
-  caption: 'A short caption',
+export const Required: Story = {
+  render: AllSizesTemplate,
+  args: {
+    label: 'Email',
+    required: true,
+  },
 }
 
-export const LongCaption: StoryFn = AllSizesTemplate.bind({})
+export const Caption: Story = {
+  render: AllSizesTemplate,
+  args: {
+    label: 'Password',
+    caption: 'A short caption',
+  },
+}
 
-LongCaption.args = {
+export const LongCaption: Story = {
+  render: AllSizesTemplate,
+  args: {
   label: 'Label',
   caption:
     'This will probably truncate, because it is ever so so longer than usual.',
+},
 }
 
-export const HintText: StoryFn = AllSizesTemplate.bind({})
-
-HintText.args = {
-  label: 'Label',
-  hint: 'Some hint text',
+export const HintText: Story = {
+  render: AllSizesTemplate,
+  args: {
+    label: 'Label',
+    hint: 'Some hint text',
+  },
 }
 
-export const MaxLength: StoryFn = AllSizesTemplate.bind({})
-
-MaxLength.args = {
-  label: 'Label',
-  maxLength: 30,
+export const MaxLength: Story = {
+  render: AllSizesTemplate,
+  args: {
+    label: 'Label',
+    maxLength: 30,
+  },
 }
 
-export const ArbitraryHintContent: StoryFn = AllSizesTemplate.bind({})
-
-ArbitraryHintContent.args = {
+export const ArbitraryHintContent: Story = {
+  render: AllSizesTemplate,
+  args: {
   label: 'Label',
   hint: (
     <Div
@@ -191,13 +205,16 @@ ArbitraryHintContent.args = {
       Put whatever you want in the hint!
     </Div>
   ),
+},
 }
 
-export const Multiline: StoryFn = AllSizesTemplate.bind({})
-
-Multiline.args = {
-  label: 'Label',
-  multiline: true,
-  minRows: 3,
-  maxLength: 200,
+export const Multiline: Story = {
+  render: AllSizesTemplate,
+  args: {
+    label: 'Label',
+    multiline: true,
+    minRows: 3,
+    maxLength: 200,
+  },
 }
+
diff --git a/assets/design-system/src/stories/FormTitle.stories.tsx b/assets/design-system/src/stories/FormTitle.stories.tsx
index bd6ff3d756..28bf28909e 100644
--- a/assets/design-system/src/stories/FormTitle.stories.tsx
+++ b/assets/design-system/src/stories/FormTitle.stories.tsx
@@ -1,10 +1,13 @@
 import FormTitle from '../components/FormTitle'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'FormTitle',
   component: FormTitle,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -15,9 +18,11 @@ function Template(args: any) {
   )
 }
 
-export const Primary: StoryFn = Template.bind({})
-
-Primary.args = {
-  title: 'Automatic Upgrades',
-  message: 'Determine how this application is updated on a regular basis.',
+export const Primary: Story = {
+  render: Template,
+  args: {
+    title: 'Automatic Upgrades',
+    message: 'Determine how this application is updated on a regular basis.',
+  },
 }
+
diff --git a/assets/design-system/src/stories/Highlight.stories.tsx b/assets/design-system/src/stories/Highlight.stories.tsx
index 1d7802b497..7258ec1fad 100644
--- a/assets/design-system/src/stories/Highlight.stories.tsx
+++ b/assets/design-system/src/stories/Highlight.stories.tsx
@@ -3,12 +3,15 @@ import { Flex } from 'honorable'
 import { goCode, jsCode, tfCode } from '../constants'
 
 import { Divider, Highlight } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Highlight',
   component: Highlight,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template() {
   return (
@@ -27,4 +30,6 @@ function Template() {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
+export const Default: Story = {
+  render: Template,
+}
diff --git a/assets/design-system/src/stories/IconFrame.stories.tsx b/assets/design-system/src/stories/IconFrame.stories.tsx
index 1296dca110..df1914787e 100644
--- a/assets/design-system/src/stories/IconFrame.stories.tsx
+++ b/assets/design-system/src/stories/IconFrame.stories.tsx
@@ -1,12 +1,15 @@
 import { Div, Flex, H1, P } from 'honorable'
 
 import { IconFrame, type IconFrameProps, TrashCanIcon } from '../index'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Icon Frame',
   component: IconFrame,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 type Type = 'secondary' | 'tertiary' | 'floating'
 
@@ -66,8 +69,9 @@ function Template({
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
+export const Default: Story = {
+  render: Template,
+  args: {
   clickable: true,
   tooltip: true,
   tooltipProps: {
@@ -75,4 +79,6 @@ Default.args = {
     placement: 'top',
   },
   textValue: 'Delete',
+},
 }
+
diff --git a/assets/design-system/src/stories/Icons.stories.tsx b/assets/design-system/src/stories/Icons.stories.tsx
index 3142015c68..0819af7555 100644
--- a/assets/design-system/src/stories/Icons.stories.tsx
+++ b/assets/design-system/src/stories/Icons.stories.tsx
@@ -3,9 +3,9 @@ import { createElement } from 'react'
 
 import * as icons from '../icons'
 import * as logos from '../plural-logos'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Icons',
   component: icons.MarketPlusIcon,
   argTypes: {
@@ -43,7 +43,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const AppIcon = styled.div<{ $backgroundColor: string }>(
   ({ theme, $backgroundColor = 'transparent' }) => ({
@@ -168,58 +171,73 @@ function LogosTemplate({
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  color: 'icon-default',
-  size: 16,
-  fullColor: false,
-  backgroundColor: 'transparent',
+export const Default: Story = {
+  render: Template,
+  args: {
+    color: 'icon-default',
+    size: 16,
+    fullColor: false,
+    backgroundColor: 'transparent',
+  },
 }
 
-export const Xlarge: StoryFn = Template.bind({})
-Xlarge.args = {
-  color: 'icon-default',
-  size: 32,
-  fullColor: false,
-  backgroundColor: 'transparent',
+export const Xlarge: Story = {
+  render: Template,
+  args: {
+    color: 'icon-default',
+    size: 32,
+    fullColor: false,
+    backgroundColor: 'transparent',
+  },
 }
 
-export const Large: StoryFn = Template.bind({})
-Large.args = {
-  color: 'icon-default',
-  size: 24,
-  fullColor: false,
-  backgroundColor: 'transparent',
+export const Large: Story = {
+  render: Template,
+  args: {
+    color: 'icon-default',
+    size: 24,
+    fullColor: false,
+    backgroundColor: 'transparent',
+  },
 }
 
-export const Small: StoryFn = Template.bind({})
-Small.args = {
-  color: 'icon-default',
-  size: 12,
-  fullColor: false,
-  backgroundColor: 'transparent',
+export const Small: Story = {
+  render: Template,
+  args: {
+    color: 'icon-default',
+    size: 12,
+    fullColor: false,
+    backgroundColor: 'transparent',
+  },
 }
 
-export const Color: StoryFn = Template.bind({})
-Color.args = {
-  color: 'icon-primary',
-  fullColor: false,
-  size: 16,
-  backgroundColor: 'transparent',
+export const Color: Story = {
+  render: Template,
+  args: {
+    color: 'icon-primary',
+    fullColor: false,
+    size: 16,
+    backgroundColor: 'transparent',
+  },
 }
 
-export const FullColor: StoryFn = Template.bind({})
-FullColor.args = {
-  color: 'icon-default',
-  fullColor: true,
-  size: 32,
-  backgroundColor: 'transparent',
+export const FullColor: Story = {
+  render: Template,
+  args: {
+    color: 'icon-default',
+    fullColor: true,
+    size: 32,
+    backgroundColor: 'transparent',
+  },
 }
 
-export const PluralLogos: StoryFn = LogosTemplate.bind({})
-PluralLogos.args = {
-  color: 'icon-default',
-  fullColor: true,
-  size: 32,
-  backgroundColor: 'transparent',
+export const PluralLogos: Story = {
+  render: LogosTemplate,
+  args: {
+    color: 'icon-default',
+    fullColor: true,
+    size: 32,
+    backgroundColor: 'transparent',
+  },
 }
+
diff --git a/assets/design-system/src/stories/InlineCode.stories.tsx b/assets/design-system/src/stories/InlineCode.stories.tsx
index 5ce47749eb..41108ab348 100644
--- a/assets/design-system/src/stories/InlineCode.stories.tsx
+++ b/assets/design-system/src/stories/InlineCode.stories.tsx
@@ -2,12 +2,15 @@ import { A, P } from 'honorable'
 import styled, { useTheme } from 'styled-components'
 
 import { Banner, Callout, Card, InlineCode } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Inline Code',
   component: InlineCode,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const FlexWrap = styled.div(({ theme }) => ({
   display: 'flex',
@@ -112,5 +115,8 @@ function Template() {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {}
+export const Default: Story = {
+  render: Template,
+  args: {},
+}
+
diff --git a/assets/design-system/src/stories/Input.stories.tsx b/assets/design-system/src/stories/Input.stories.tsx
index 08df5df3b8..5baf0dead1 100644
--- a/assets/design-system/src/stories/Input.stories.tsx
+++ b/assets/design-system/src/stories/Input.stories.tsx
@@ -9,12 +9,15 @@ import SearchIcon from '../components/icons/SearchIcon'
 import Input from '../components/Input'
 import Input2 from '../components/Input2'
 import { Card } from '../index'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Input',
   component: Input,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function InputSet(props: any) {
   return (
@@ -168,46 +171,52 @@ function CustomInputV2Template(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {}
-
-export const Error: StoryFn = Template.bind({})
-
-Error.args = {
-  error: true,
+export const Default: Story = {
+  render: Template,
+  args: {},
 }
 
-export const Placeholder: StoryFn = Template.bind({})
-
-Placeholder.args = {
-  placeholder: 'A neat placeholder!',
+export const Error: Story = {
+  render: Template,
+  args: {
+    error: true,
+  },
 }
 
-export const Disabled: StoryFn = Template.bind({})
-
-Disabled.args = {
-  placeholder: 'Disabled placeholder',
-  disabled: true,
+export const Placeholder: Story = {
+  render: Template,
+  args: {
+    placeholder: 'A neat placeholder!',
+  },
 }
 
-export const PrefixSuffix: StoryFn = CustomInputTemplate.bind({})
-
-PrefixSuffix.args = {
-  prefix: 'app.',
-  suffix: '.plural.sh',
+export const Disabled: Story = {
+  render: Template,
+  args: {
+    placeholder: 'Disabled placeholder',
+    disabled: true,
+  },
 }
 
-export const Multiline: StoryFn = CustomInputTemplate.bind({})
-
-Multiline.args = {
-  multiline: true,
-  minRows: 3,
+export const PrefixSuffix: Story = {
+  render: CustomInputTemplate,
+  args: {
+    prefix: 'app.',
+    suffix: '.plural.sh',
+  },
 }
 
-export const TitleContent: StoryFn = CustomInputTemplate.bind({})
+export const Multiline: Story = {
+  render: CustomInputTemplate,
+  args: {
+    multiline: true,
+    minRows: 3,
+  },
+}
 
-TitleContent.args = {
+export const TitleContent: Story = {
+  render: CustomInputTemplate,
+  args: {
   startIcon: <SearchIcon />,
   titleContent: (
     <>
@@ -218,11 +227,12 @@ TitleContent.args = {
   placeholder: 'Search the marketplace',
   showClearButton: true,
   suffix: '',
+},
 }
 
-export const Version2: StoryFn = CustomInputV2Template.bind({})
-
-Version2.args = {
+export const Version2: Story = {
+  render: CustomInputV2Template,
+  args: {
   startIcon: <SearchIcon />,
   // endIcon: <TagIcon />,
   titleContent: (
@@ -237,4 +247,6 @@ Version2.args = {
   prefix: '',
   disabled: false,
   error: false,
+},
 }
+
diff --git a/assets/design-system/src/stories/ListBox.stories.tsx b/assets/design-system/src/stories/ListBox.stories.tsx
index 6bcc73efb0..f3fd1df3c2 100644
--- a/assets/design-system/src/stories/ListBox.stories.tsx
+++ b/assets/design-system/src/stories/ListBox.stories.tsx
@@ -2,7 +2,7 @@ import { Div, Flex } from 'honorable'
 import { useState } from 'react'
 
 import { type Key } from '@react-types/shared'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import {
   AppIcon,
@@ -15,10 +15,13 @@ import {
   PersonIcon,
 } from '../index'
 
-export default {
+const meta = {
   title: 'List Box',
   component: ListBox,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const portrait = (
   <AppIcon
@@ -317,6 +320,8 @@ function Template() {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
+export const Default: Story = {
+  render: Template,
+  args: {},
+}
 
-Default.args = {}
diff --git a/assets/design-system/src/stories/LoadingSpinner.stories.tsx b/assets/design-system/src/stories/LoadingSpinner.stories.tsx
index cd01ce270c..77b5cb42dd 100644
--- a/assets/design-system/src/stories/LoadingSpinner.stories.tsx
+++ b/assets/design-system/src/stories/LoadingSpinner.stories.tsx
@@ -1,14 +1,17 @@
 import { Div } from 'honorable'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import LoadingSpinner, {
   type LoadingSpinnerProps,
 } from '../components/LoadingSpinner'
 
-export default {
+const meta = {
   title: 'LoadingSpinner',
   component: LoadingSpinner,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: LoadingSpinnerProps) {
   return (
@@ -32,12 +35,14 @@ function Template(args: LoadingSpinnerProps) {
   )
 }
 
-export const Primary: StoryFn = Template.bind({})
-
-Primary.args = {
-  show: true,
-  spinnerDelay: 200,
-  spinnerWidth: 96,
-  centered: true,
-  animateTransitions: true,
+export const Primary: Story = {
+  render: Template,
+  args: {
+    show: true,
+    spinnerDelay: 200,
+    spinnerWidth: 96,
+    centered: true,
+    animateTransitions: true,
+  },
 }
+
diff --git a/assets/design-system/src/stories/LoopingLogo.stories.tsx b/assets/design-system/src/stories/LoopingLogo.stories.tsx
index 087826fb16..29ee8423d6 100644
--- a/assets/design-system/src/stories/LoopingLogo.stories.tsx
+++ b/assets/design-system/src/stories/LoopingLogo.stories.tsx
@@ -1,12 +1,15 @@
 import { Flex } from 'honorable'
 
 import LoopingLogo, { type LoopingLogoProps } from '../components/LoopingLogo'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'LoopingLogo',
   component: LoopingLogo,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: LoopingLogoProps) {
   return (
@@ -19,10 +22,12 @@ function Template(args: LoopingLogoProps) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  isDark: false,
-  scale: 1,
-  animated: true,
+export const Default: Story = {
+  render: Template,
+  args: {
+    isDark: false,
+    scale: 1,
+    animated: true,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Markdown.stories.tsx b/assets/design-system/src/stories/Markdown.stories.tsx
index 5850330ecf..d1885bc13e 100644
--- a/assets/design-system/src/stories/Markdown.stories.tsx
+++ b/assets/design-system/src/stories/Markdown.stories.tsx
@@ -1,7 +1,7 @@
 import { Div } from 'honorable'
 
 import { Markdown } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 const markdown = `# Plural Console
 
@@ -185,7 +185,6 @@ Deploying Chatwoot to Heroku is a breeze. It's as simple as clicking this button
 
 Follow this [link](https://www.chatwoot.com/docs/environment-variables) to understand setting the correct environment variables for the app to work with all the features. There might be breakages if you do not set the relevant environment variables.
 
-
 ### DigitalOcean 1-Click Kubernetes deployment
 
 Chatwoot now supports 1-Click deployment to DigitalOcean as a kubernetes app.
@@ -202,19 +201,16 @@ For other supported options, checkout our [deployment page](https://chatwoot.com
 
 Looking to report a vulnerability? Please refer our [SECURITY.md](./SECURITY.md) file.
 
-
 ## Community? Questions? Support ?
 
 If you need help or just want to hang out, come, say hi on our [Discord](https://discord.gg/cJXdrwS) server.
 
-
 ## Contributors ✨
 
 Thanks goes to all these [wonderful people](https://www.chatwoot.com/docs/contributors):
 
 <a href="https://github.com/chatwoot/chatwoot/graphs/contributors"><img src="https://opencollective.com/chatwoot/contributors.svg?width=890&button=false" /></a>
 
-
 *Chatwoot* &copy; 2017-2023, Chatwoot Inc - Released under the MIT License.
 
 ---
@@ -231,10 +227,13 @@ Thanks goes to all these [wonderful people](https://www.chatwoot.com/docs/contri
 | HTML         | Partial   | Some tags are supported      |
 `
 
-export default {
+const meta = {
   title: 'Markdown',
   component: Markdown,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template() {
   return (
@@ -251,4 +250,6 @@ function Template() {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
+export const Default: Story = {
+  render: Template,
+}
diff --git a/assets/design-system/src/stories/Modal.stories.tsx b/assets/design-system/src/stories/Modal.stories.tsx
index 58d90aa2e5..8b70382b9e 100644
--- a/assets/design-system/src/stories/Modal.stories.tsx
+++ b/assets/design-system/src/stories/Modal.stories.tsx
@@ -6,9 +6,9 @@ import styled from 'styled-components'
 import { Button, Card, Code, FormField, Input2, Modal, SearchIcon } from '..'
 import { SEVERITIES } from '../components/Modal'
 import { jsCode } from '../constants'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Modal',
   component: Modal,
   args: {
@@ -28,7 +28,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function ExtraContent() {
   return (
@@ -189,28 +192,32 @@ function NonScrollTemplate(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  header: 'Default',
-  form: false,
-  size: 'medium',
-  hasActions: true,
+export const Default: Story = {
+  render: Template,
+  args: {
+    header: 'Default',
+    form: false,
+    size: 'medium',
+    hasActions: true,
+  },
 }
 
-export const Form: StoryFn = Template.bind({})
-
-Form.args = {
-  header: 'Form',
-  form: true,
-  hasActions: true,
+export const Form: Story = {
+  render: Template,
+  args: {
+    header: 'Form',
+    form: true,
+    hasActions: true,
+  },
 }
 
-export const NonScrollable: StoryFn = NonScrollTemplate.bind({})
-
-NonScrollable.args = {
-  header: 'Non-scrollable',
-  size: 'large',
-  scrollable: false,
-  hasActions: true,
+export const NonScrollable: Story = {
+  render: NonScrollTemplate,
+  args: {
+    header: 'Non-scrollable',
+    size: 'large',
+    scrollable: false,
+    hasActions: true,
+  },
 }
+
diff --git a/assets/design-system/src/stories/PageCard.stories.tsx b/assets/design-system/src/stories/PageCard.stories.tsx
index b6b215f1c4..45a3fef632 100644
--- a/assets/design-system/src/stories/PageCard.stories.tsx
+++ b/assets/design-system/src/stories/PageCard.stories.tsx
@@ -3,12 +3,15 @@ import { A, Flex } from 'honorable'
 import CheckedShieldIcon from '../components/icons/CheckedShieldIcon'
 
 import { PageCard } from '../index'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Page Card',
   component: PageCard,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template() {
   return (
@@ -70,5 +73,8 @@ function Template() {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {}
+export const Default: Story = {
+  render: Template,
+  args: {},
+}
+
diff --git a/assets/design-system/src/stories/PageTitle.stories.tsx b/assets/design-system/src/stories/PageTitle.stories.tsx
index 46daf74afe..6c4057aee2 100644
--- a/assets/design-system/src/stories/PageTitle.stories.tsx
+++ b/assets/design-system/src/stories/PageTitle.stories.tsx
@@ -1,12 +1,15 @@
 import { Button, Div, Flex, P } from 'honorable'
 
 import PageTitle, { type PageTitleProps } from '../components/PageTitle'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Page Title',
   component: PageTitle,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template({ heading, ...props }: PageTitleProps) {
   return (
@@ -25,14 +28,16 @@ function Template({ heading, ...props }: PageTitleProps) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  heading: 'Page Title',
+export const Default: Story = {
+  render: Template,
+  args: {
+    heading: 'Page Title',
+  },
 }
 
-export const WithContent: StoryFn = Template.bind({})
-WithContent.args = {
+export const WithContent: Story = {
+  render: Template,
+  args: {
   heading: (
     <Div>
       <strong>Customized</strong> <em>page</em> title
@@ -52,4 +57,6 @@ WithContent.args = {
       <Button>Save</Button>
     </Flex>
   ),
+},
 }
+
diff --git a/assets/design-system/src/stories/ProgressBar.stories.tsx b/assets/design-system/src/stories/ProgressBar.stories.tsx
index c6e44add66..579a3eaaa9 100644
--- a/assets/design-system/src/stories/ProgressBar.stories.tsx
+++ b/assets/design-system/src/stories/ProgressBar.stories.tsx
@@ -1,7 +1,7 @@
 import ProgressBar from '../components/ProgressBar'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Progress Bar',
   component: ProgressBar,
   argTypes: {
@@ -14,18 +14,26 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
-export const Indeterminate: StoryFn = ProgressBar.bind({})
-Indeterminate.args = {
-  paused: false,
-  complete: false,
+export const Indeterminate: Story = {
+  render: ProgressBar,
+  args: {
+    paused: false,
+    complete: false,
+  },
 }
 
-export const Determinate: StoryFn = ProgressBar.bind({})
-Determinate.args = {
-  paused: false,
-  complete: false,
-  mode: 'determinate',
-  progress: 0.25,
+export const Determinate: Story = {
+  render: ProgressBar,
+  args: {
+    paused: false,
+    complete: false,
+    mode: 'determinate',
+    progress: 0.25,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Prop.stories.tsx b/assets/design-system/src/stories/Prop.stories.tsx
index f210da46fb..52edfba9d4 100644
--- a/assets/design-system/src/stories/Prop.stories.tsx
+++ b/assets/design-system/src/stories/Prop.stories.tsx
@@ -1,14 +1,20 @@
 import { Prop } from '../index'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Prop',
   component: Prop,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template() {
   return <Prop title="Name">Test</Prop>
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {}
+export const Default: Story = {
+  render: Template,
+  args: {},
+}
+
diff --git a/assets/design-system/src/stories/PropWide.stories.tsx b/assets/design-system/src/stories/PropWide.stories.tsx
index fb81211ee2..731954e0d1 100644
--- a/assets/design-system/src/stories/PropWide.stories.tsx
+++ b/assets/design-system/src/stories/PropWide.stories.tsx
@@ -1,14 +1,20 @@
 import { PropWide } from '../index'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Prop Wide',
   component: PropWide,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template() {
   return <PropWide title="Name">Test</PropWide>
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {}
+export const Default: Story = {
+  render: Template,
+  args: {},
+}
+
diff --git a/assets/design-system/src/stories/PropsContainer.stories.tsx b/assets/design-system/src/stories/PropsContainer.stories.tsx
index ecf0bf11c1..3e153c2aae 100644
--- a/assets/design-system/src/stories/PropsContainer.stories.tsx
+++ b/assets/design-system/src/stories/PropsContainer.stories.tsx
@@ -1,10 +1,13 @@
 import { Prop, PropsContainer, UserDetails } from '../index'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Props Container',
   component: PropsContainer,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template() {
   return (
@@ -24,5 +27,8 @@ function Template() {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {}
+export const Default: Story = {
+  render: Template,
+  args: {},
+}
+
diff --git a/assets/design-system/src/stories/Radio.stories.tsx b/assets/design-system/src/stories/Radio.stories.tsx
index 529f2c7050..e2e0aff936 100644
--- a/assets/design-system/src/stories/Radio.stories.tsx
+++ b/assets/design-system/src/stories/Radio.stories.tsx
@@ -4,12 +4,15 @@ import styled, { useTheme } from 'styled-components'
 import Button from '../components/Button'
 import Radio from '../components/Radio'
 import RadioGroup from '../components/RadioGroup'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Radio',
   component: Radio,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const radios = [
   {
@@ -66,12 +69,17 @@ function Template(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  small: false,
+export const Default: Story = {
+  render: Template,
+  args: {
+    small: false,
+  },
 }
 
-export const Small: StoryFn = Template.bind({})
-Small.args = {
-  small: true,
+export const Small: Story = {
+  render: Template,
+  args: {
+    small: true,
+  },
 }
+
diff --git a/assets/design-system/src/stories/RepositoryCard.stories.tsx b/assets/design-system/src/stories/RepositoryCard.stories.tsx
index 6b8ce3d6e4..761400857c 100644
--- a/assets/design-system/src/stories/RepositoryCard.stories.tsx
+++ b/assets/design-system/src/stories/RepositoryCard.stories.tsx
@@ -1,12 +1,15 @@
 import { Div, Flex, H4 } from 'honorable'
 
 import RepositoryCard from '../components/RepositoryCard'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'RepositoryCard',
   component: RepositoryCard,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -109,9 +112,9 @@ function ListTemplate(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
+export const Default: Story = {
+  render: Template,
+  args: {
   installed: true,
   title: 'Plural',
   priv: true,
@@ -132,7 +135,11 @@ Default.args = {
     'Cricket',
     'Support',
   ],
+},
+}
+
+export const List: Story = {
+  render: ListTemplate,
+  args: { width: '500px', ...Default.args },
 }
 
-export const List: StoryFn = ListTemplate.bind({})
-List.args = { width: '500px', ...Default.args }
diff --git a/assets/design-system/src/stories/RepositoryChip.stories.tsx b/assets/design-system/src/stories/RepositoryChip.stories.tsx
index a99acdca0a..2e68633047 100644
--- a/assets/design-system/src/stories/RepositoryChip.stories.tsx
+++ b/assets/design-system/src/stories/RepositoryChip.stories.tsx
@@ -1,11 +1,14 @@
 import RepositoryChip from '../components/RepositoryChip'
 import StackIcon from '../components/icons/StackIcon'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'RepositoryChip',
   component: RepositoryChip,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -20,24 +23,28 @@ function Template(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  imageUrl: '/logos/airbyte-logo.svg',
-  label: 'Airbyte',
+export const Default: Story = {
+  render: Template,
+  args: {
+    imageUrl: '/logos/airbyte-logo.svg',
+    label: 'Airbyte',
+  },
 }
 
-export const Icon: StoryFn = Template.bind({})
-
-Icon.args = {
-  icon: <StackIcon />,
-  label: 'DevOps',
+export const Icon: Story = {
+  render: Template,
+  args: {
+    icon: <StackIcon />,
+    label: 'DevOps',
+  },
 }
 
-export const Small: StoryFn = Template.bind({})
-
-Small.args = {
-  imageUrl: '/logos/airbyte-logo.svg',
-  label: 'Really long application name',
-  width: '200px',
+export const Small: Story = {
+  render: Template,
+  args: {
+    imageUrl: '/logos/airbyte-logo.svg',
+    label: 'Really long application name',
+    width: '200px',
+  },
 }
+
diff --git a/assets/design-system/src/stories/SegmentedInput.stories.tsx b/assets/design-system/src/stories/SegmentedInput.stories.tsx
index 5491ecca90..8c6ee9470b 100644
--- a/assets/design-system/src/stories/SegmentedInput.stories.tsx
+++ b/assets/design-system/src/stories/SegmentedInput.stories.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import styled from 'styled-components'
 import { Segment, SegmentedInput } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 type StoryProps = {
   format: string
@@ -27,7 +27,7 @@ const EMPTY_SEGMENTS = [
   { length: 4, max: 9999, name: 'YYYY' },
 ]
 
-export default {
+const meta = {
   title: 'SegmentedInput',
   component: SegmentedInput,
   argTypes: {
@@ -41,8 +41,9 @@ export default {
       defaultValue: '/',
     },
   },
-}
+} satisfies Meta<any>
 
+export default meta
 const WrapperSC = styled.div(({ theme }) => ({
   maxWidth: '300px',
   marginBottom: theme.spacing.large,
@@ -101,16 +102,21 @@ function Template({ format, separator, segments }: StoryProps) {
   }
 }
 
-export const DateInput: StoryFn = Template.bind({})
-DateInput.args = {
-  format: 'date',
-  separator: '/',
-  segments: DATE_SEGMENTS,
+export const DateInput: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    format: 'date',
+    separator: '/',
+    segments: DATE_SEGMENTS,
+  },
 }
 
-export const CustomFormatInput: StoryFn = Template.bind({})
-CustomFormatInput.args = {
-  format: 'custom',
-  separator: '.',
-  segments: CUSTOM_SEGMENTS,
+export const CustomFormatInput: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    format: 'custom',
+    separator: '.',
+    segments: CUSTOM_SEGMENTS,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Select.stories.tsx b/assets/design-system/src/stories/Select.stories.tsx
index 565a3e739f..488b94e1bf 100644
--- a/assets/design-system/src/stories/Select.stories.tsx
+++ b/assets/design-system/src/stories/Select.stories.tsx
@@ -2,7 +2,7 @@ import { type ComponentProps, useEffect, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
 
 import { type Key } from '@react-types/shared'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import {
   AppIcon,
@@ -26,9 +26,9 @@ import {
   WrapWithIf,
 } from '../index'
 
-export default {
+const meta = {
   title: 'Select',
-  component: 'Select',
+  component: Select,
   argTypes: {
     onFillLevel: {
       options: [0, 1, 2, 3],
@@ -43,8 +43,9 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
 
+export default meta
 const H4 = styled.h4(({ theme }) => ({
   ...theme.partials.text.subtitle1,
   margin: 0,
@@ -663,6 +664,8 @@ function Template({ onFillLevel }: { onFillLevel: any }) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
+export const Default: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {},
+}
 
-Default.args = {}
diff --git a/assets/design-system/src/stories/Sidecar.stories.tsx b/assets/design-system/src/stories/Sidecar.stories.tsx
index fbb5610573..86606c8c27 100644
--- a/assets/design-system/src/stories/Sidecar.stories.tsx
+++ b/assets/design-system/src/stories/Sidecar.stories.tsx
@@ -1,12 +1,15 @@
 import { A, Div } from 'honorable'
 
 import { Sidecar, SidecarItem, type SidecarProps } from '../index'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Sidecar',
   component: Sidecar,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const wordWrapOnSlashes = (url: string) =>
   url
@@ -53,8 +56,10 @@ function Template({ heading, ...props }: SidecarProps) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  heading: 'Sidecar Title',
+export const Default: Story = {
+  render: Template,
+  args: {
+    heading: 'Sidecar Title',
+  },
 }
+
diff --git a/assets/design-system/src/stories/Slider.stories.tsx b/assets/design-system/src/stories/Slider.stories.tsx
index 76ed7b806e..9e7ec89443 100644
--- a/assets/design-system/src/stories/Slider.stories.tsx
+++ b/assets/design-system/src/stories/Slider.stories.tsx
@@ -1,17 +1,21 @@
 import Slider from '../components/Slider'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Slider',
   component: Slider,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return <Slider {...args} />
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
+export const Default: Story = {
+  render: Template,
+  args: {
   label: 'Applications',
   defaultValue: 30,
   minValue: 0,
@@ -29,4 +33,6 @@ Default.args = {
   tooltip: true,
   size: 600,
   colorized: true,
+},
 }
+
diff --git a/assets/design-system/src/stories/StackCard.stories.tsx b/assets/design-system/src/stories/StackCard.stories.tsx
index f547befcc3..3131bf1840 100644
--- a/assets/design-system/src/stories/StackCard.stories.tsx
+++ b/assets/design-system/src/stories/StackCard.stories.tsx
@@ -1,12 +1,15 @@
 import { Flex } from 'honorable'
 
 import StackCard from '../components/StackCard'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'StackCard',
   component: StackCard,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -54,9 +57,9 @@ function Template(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
+export const Default: Story = {
+  render: Template,
+  args: {
   apps: [
     { name: 'Airflow', imageUrl: '/logos/airflow-logo.svg' },
     { name: 'Airbyte', imageUrl: '/logos/airbyte-logo.svg' },
@@ -64,4 +67,6 @@ Default.args = {
     { name: 'Crossplane', imageUrl: '/logos/crossplane-logo.png' },
   ],
   width: '420px',
+},
 }
+
diff --git a/assets/design-system/src/stories/Stepper.stories.tsx b/assets/design-system/src/stories/Stepper.stories.tsx
index f7903277e7..a50c2d2445 100644
--- a/assets/design-system/src/stories/Stepper.stories.tsx
+++ b/assets/design-system/src/stories/Stepper.stories.tsx
@@ -4,12 +4,15 @@ import BrowserIcon from '../components/icons/BrowserIcon'
 import CloudIcon from '../components/icons/CloudIcon'
 import GearTrainIcon from '../components/icons/GearTrainIcon'
 import GitHubIcon from '../components/icons/GitHubIcon'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Stepper',
   component: Stepper,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -51,49 +54,62 @@ const steps: StepperSteps = [
   },
 ]
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  stepIndex: 1,
-  steps,
-  compact: false,
+export const Default: Story = {
+  render: Template,
+  args: {
+    stepIndex: 1,
+    steps,
+    compact: false,
+  },
 }
 
-export const List03: StoryFn = Template.bind({})
-List03.args = {
-  stepIndex: 1,
-  steps: steps.slice(0, 3),
-  compact: false,
+export const List03: Story = {
+  render: Template,
+  args: {
+    stepIndex: 1,
+    steps: steps.slice(0, 3),
+    compact: false,
+  },
 }
 
-export const List02: StoryFn = Template.bind({})
-List02.args = {
-  stepIndex: 1,
-  steps: steps.slice(0, 2),
-  compact: false,
+export const List02: Story = {
+  render: Template,
+  args: {
+    stepIndex: 1,
+    steps: steps.slice(0, 2),
+    compact: false,
+  },
 }
 
-export const List01: StoryFn = Template.bind({})
-List01.args = {
-  stepIndex: 0,
-  steps: steps.slice(0, 1),
-  compact: false,
+export const List01: Story = {
+  render: Template,
+  args: {
+    stepIndex: 0,
+    steps: steps.slice(0, 1),
+    compact: false,
+  },
 }
 
-export const Vertical: StoryFn = Template.bind({})
-Vertical.args = {
-  stepIndex: 1,
-  containerWidth: 170,
-  collapseAtWidth: 160,
-  forceCollapse: false,
-  showContainer: false,
-  vertical: true,
-  compact: false,
-  steps,
+export const Vertical: Story = {
+  render: Template,
+  args: {
+    stepIndex: 1,
+    containerWidth: 170,
+    collapseAtWidth: 160,
+    forceCollapse: false,
+    showContainer: false,
+    vertical: true,
+    compact: false,
+    steps,
+  },
 }
 
-export const Compact: StoryFn = Template.bind({})
-Compact.args = {
-  stepIndex: 1,
-  steps,
-  compact: true,
+export const Compact: Story = {
+  render: Template,
+  args: {
+    stepIndex: 1,
+    steps,
+    compact: true,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Switch.stories.tsx b/assets/design-system/src/stories/Switch.stories.tsx
index a4f84a2135..3a128bea9d 100644
--- a/assets/design-system/src/stories/Switch.stories.tsx
+++ b/assets/design-system/src/stories/Switch.stories.tsx
@@ -1,10 +1,13 @@
 import { LightDarkSwitch, Switch } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Switch',
   component: Switch,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -17,12 +20,13 @@ function Template(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  children: 'Email notifications',
-  disabled: false,
-  readOnly: false,
+export const Default: Story = {
+  render: Template,
+  args: {
+    children: 'Email notifications',
+    disabled: false,
+    readOnly: false,
+  },
 }
 
 function LightDarkTemplate(args: any) {
@@ -36,9 +40,11 @@ function LightDarkTemplate(args: any) {
   )
 }
 
-export const LightDarkMode: StoryFn = LightDarkTemplate.bind({})
-
-LightDarkMode.args = {
-  disabled: false,
-  readOnly: false,
+export const LightDarkMode: Story = {
+  render: LightDarkTemplate,
+  args: {
+    disabled: false,
+    readOnly: false,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Tab.stories.tsx b/assets/design-system/src/stories/Tab.stories.tsx
index 992879e7ee..d838393a00 100644
--- a/assets/design-system/src/stories/Tab.stories.tsx
+++ b/assets/design-system/src/stories/Tab.stories.tsx
@@ -6,12 +6,15 @@ import ErrorIcon from '../components/icons/ErrorIcon'
 import Tab from '../components/Tab'
 import SubTab from '../components/SubTab'
 import Card from '../components/Card'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Tab',
   component: Tab,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   const [active, setActive] = useState(0)
@@ -71,9 +74,10 @@ function Template(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {}
+export const Default: Story = {
+  render: Template,
+  args: {},
+}
 
 function Template2(args: any) {
   const [active, setActive] = useState(0)
@@ -140,10 +144,11 @@ function Template2(args: any) {
   )
 }
 
-export const Vertical: StoryFn = Template2.bind({})
-
-Vertical.args = {
-  vertical: true,
+export const Vertical: Story = {
+  render: Template2,
+  args: {
+    vertical: true,
+  },
 }
 
 function SubTabs(args: any) {
@@ -203,8 +208,10 @@ const contentCardStyle = {
   justifyContent: 'center',
 }
 
-export const Subtab: StoryFn = SubTabTemplate.bind({})
-
-Subtab.args = {
-  disabled: false,
+export const Subtab: Story = {
+  render: SubTabTemplate,
+  args: {
+    disabled: false,
+  },
 }
+
diff --git a/assets/design-system/src/stories/TabList.stories.tsx b/assets/design-system/src/stories/TabList.stories.tsx
index 4b6fc5b0a0..cc5654ef96 100644
--- a/assets/design-system/src/stories/TabList.stories.tsx
+++ b/assets/design-system/src/stories/TabList.stories.tsx
@@ -3,7 +3,7 @@ import { useRef, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
 
 import { type Key } from '@react-types/shared'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import {
   Tab,
@@ -13,10 +13,13 @@ import {
   TabPanel,
 } from '../index'
 
-export default {
+const meta = {
   title: 'Tab List',
   component: TabList,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const tabs = {
   lions: {
@@ -320,19 +323,28 @@ function TemplateComplex() {
   )
 }
 
-export const Default: StoryFn = TemplateBasic.bind({})
-Default.args = {}
+export const Default: Story = {
+  render: TemplateBasic,
+  args: {},
+}
 
-export const Vertical: StoryFn = TemplateBasic.bind({})
-Vertical.args = {
-  orientation: 'vertical',
+export const Vertical: Story = {
+  render: TemplateBasic,
+  args: {
+    orientation: 'vertical',
+  },
+}
+
+export const Scrollable: Story = {
+  render: TemplateBasic,
+  args: {
+    scrollable: true,
+    tabs: moreTabs,
+  },
 }
 
-export const Scrollable: StoryFn = TemplateBasic.bind({})
-Scrollable.args = {
-  scrollable: true,
-  tabs: moreTabs,
+export const AdvancedContent: Story = {
+  render: TemplateComplex,
+  args: {},
 }
 
-export const AdvancedContent: StoryFn = TemplateComplex.bind({})
-AdvancedContent.args = {}
diff --git a/assets/design-system/src/stories/Table.stories.tsx b/assets/design-system/src/stories/Table.stories.tsx
index abce2bf932..346ac571f1 100644
--- a/assets/design-system/src/stories/Table.stories.tsx
+++ b/assets/design-system/src/stories/Table.stories.tsx
@@ -11,7 +11,7 @@ import React, {
 import type { Row } from '@tanstack/react-table'
 
 import { useTheme } from 'styled-components'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import {
   AppIcon,
@@ -206,11 +206,12 @@ const expandingColumns = [
   }),
 ]
 
-export default {
+const meta = {
   title: 'Table',
   component: Table,
-}
+} satisfies Meta<any>
 
+export default meta
 function Template(args: any) {
   return <Table {...args} />
 }
@@ -358,39 +359,46 @@ const extremeLengthData = Array(200)
   .flat()
   .map((item, i) => ({ ...item, id: `id-${i}` }))
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  fillLevel: 0,
-  rowBg: 'base',
-  width: '900px',
-  height: '400px',
-  data: repeatedData,
-  columns,
+export const Default: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    fillLevel: 0,
+    rowBg: 'base',
+    width: '900px',
+    height: '400px',
+    data: repeatedData,
+    columns,
+  },
 }
 
-export const Empty: StoryFn = Template.bind({})
-Empty.args = {
-  fillLevel: 0,
-  rowBg: 'base',
-  width: '900px',
-  height: '400px',
-  data: [],
-  columns,
+export const Empty: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    fillLevel: 0,
+    rowBg: 'base',
+    width: '900px',
+    height: '400px',
+    data: [],
+    columns,
+  },
 }
 
-export const Loading: StoryFn = Template.bind({})
-Loading.args = {
-  fillLevel: 0,
-  rowBg: 'base',
-  width: '900px',
-  height: '400px',
-  data: [],
-  columns,
-  loading: true,
+export const Loading: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    fillLevel: 0,
+    rowBg: 'base',
+    width: '900px',
+    height: '400px',
+    data: [],
+    columns,
+    loading: true,
+  },
 }
 
-export const Highlighted: StoryFn = Template.bind({})
-Highlighted.args = {
+export const Highlighted: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
   fillLevel: 0,
   rowBg: 'base',
   width: '900px',
@@ -418,69 +426,77 @@ Highlighted.args = {
   })(),
   reactTableOptions: { getRowId: (_: any, index: any) => index },
   highlightedRowId: 1,
+},
 }
 
-export const VirtualizedRows: StoryFn = Template.bind({})
-VirtualizedRows.args = {
-  fillLevel: 0,
-  rowBg: 'base',
-  virtualizeRows: true,
-  width: '900px',
-  height: '400px',
-  data: extremeLengthData,
-  columns,
+export const VirtualizedRows: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    fillLevel: 0,
+    rowBg: 'base',
+    virtualizeRows: true,
+    width: '900px',
+    height: '400px',
+    data: extremeLengthData,
+    columns,
+  },
 }
 
-export const PagedData: StoryFn = PagedTemplate.bind({})
-PagedData.args = {
-  fillLevel: 0,
-  rowBg: 'base',
-  pageSize: 30,
-  width: '900px',
-  height: '400px',
-  data: extremeLengthData,
-  columns,
+export const PagedData: StoryObj<Parameters<typeof PagedTemplate>[0]> = {
+  render: PagedTemplate,
+  args: {
+    fillLevel: 0,
+    rowBg: 'base',
+    pageSize: 30,
+    width: '900px',
+    height: '400px',
+    data: extremeLengthData,
+    columns,
+  },
 }
 
-export const Loose: StoryFn = Template.bind({})
-
-Loose.args = {
-  fillLevel: 0,
-  rowBg: 'base',
-  width: '900px',
-  height: '400px',
-  data: repeatedData,
-  columns,
-  loose: true,
+export const Loose: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    fillLevel: 0,
+    rowBg: 'base',
+    width: '900px',
+    height: '400px',
+    data: repeatedData,
+    columns,
+    loose: true,
+  },
 }
 
-export const Clickable: StoryFn = Template.bind({})
-
-Clickable.args = {
-  fillLevel: 0,
-  rowBg: 'base',
-  width: '900px',
-  height: '400px',
-  data: repeatedData,
-  columns: expandingColumns,
-  onRowClick: (_e: MouseEvent, row: Row<any>) => console.info(row?.original),
+export const Clickable: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    fillLevel: 0,
+    rowBg: 'base',
+    width: '900px',
+    height: '400px',
+    data: repeatedData,
+    columns: expandingColumns,
+    onRowClick: (_e: MouseEvent, row: Row<any>) => console.info(row?.original),
+  },
 }
 
-export const StickyColumn: StoryFn = Template.bind({})
-
-StickyColumn.args = {
-  fillLevel: 0,
-  rowBg: 'base',
-  width: '400px',
-  height: '400px',
-  data: repeatedData,
-  columns,
-  stickyColumn: true,
+export const StickyColumn: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    fillLevel: 0,
+    rowBg: 'base',
+    width: '400px',
+    height: '400px',
+    data: repeatedData,
+    columns,
+    stickyColumn: true,
+  },
 }
 
-export const Expandable: StoryFn = Template.bind({})
-
-Expandable.args = {
+export const Expandable: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
   fillLevel: 0,
   rowBg: 'base',
   width: '900px',
@@ -491,10 +507,12 @@ Expandable.args = {
   renderExpanded: ({ row }: { row: Row<Method> }) => (
     <P>{row.original.description}</P>
   ),
+},
 }
 
-export const FilterableAndSortable: StoryFn = FilterableTemplate.bind({})
-FilterableAndSortable.args = {
+export const FilterableAndSortable: StoryObj<Parameters<typeof FilterableTemplate>[0]> = {
+  render: FilterableTemplate,
+  args: {
   fillLevel: 0,
   rowBg: 'base',
   virtualizeRows: true,
@@ -505,22 +523,24 @@ FilterableAndSortable.args = {
   height: '400px',
   data: extremeLengthData,
   columns,
+},
 }
 
-export const Selectable: StoryFn = SelectableTemplate.bind({})
-
-Selectable.args = {
-  fillLevel: 0,
-  rowBg: 'base',
-  width: '900px',
-  height: '400px',
-  data: repeatedData,
-  columns: expandingColumns,
+export const Selectable: StoryObj<Parameters<typeof SelectableTemplate>[0]> = {
+  render: SelectableTemplate,
+  args: {
+    fillLevel: 0,
+    rowBg: 'base',
+    width: '900px',
+    height: '400px',
+    data: repeatedData,
+    columns: expandingColumns,
+  },
 }
 
-export const LinkableRows: StoryFn = Template.bind({})
-
-LinkableRows.args = {
+export const LinkableRows: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
   fillLevel: 0,
   rowBg: 'base',
   width: '900px',
@@ -555,4 +575,6 @@ LinkableRows.args = {
   onRowClick: (_e: MouseEvent, row: Row<any>) => console.log(row?.original),
   getRowLink: (row: Row<Method>) =>
     `https://example.com/function/${row.original.function}`,
+},
 }
+
diff --git a/assets/design-system/src/stories/TextSwitch.stories.tsx b/assets/design-system/src/stories/TextSwitch.stories.tsx
index 0a98898567..3493da463a 100644
--- a/assets/design-system/src/stories/TextSwitch.stories.tsx
+++ b/assets/design-system/src/stories/TextSwitch.stories.tsx
@@ -1,15 +1,10 @@
-import {
-  type ComponentProps,
-  type ComponentType,
-  type RefAttributes,
-  useState,
-} from 'react'
+import { type ComponentProps, useState } from 'react'
 import { Flex } from 'honorable'
 
-import TextSwitch, { type TextSwitchProps } from '../components/TextSwitch'
-import type { StoryFn } from '@storybook/react'
+import TextSwitch from '../components/TextSwitch'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'TextSwitch',
   component: TextSwitch,
   argTypes: {
@@ -18,17 +13,9 @@ export default {
       control: { type: 'select' },
     },
   },
-} as {
-  title: string
-  component: ComponentType<TextSwitchProps & RefAttributes<any>>
-  argTypes: {
-    size: {
-      options: string[]
-      control: { type: string }
-    }
-  }
-}
+} satisfies Meta<any>
 
+export default meta
 const options1 = [
   {
     value: 'AND',
@@ -92,9 +79,11 @@ function Template({ label, ...args }: ComponentProps<typeof TextSwitch>) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {
-  size: 'small',
-  label: '',
-  isDisabled: false,
-} as const satisfies Partial<ComponentProps<typeof TextSwitch>>
+export const Default: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    size: 'small',
+    label: '',
+    isDisabled: false,
+  } as const satisfies Partial<ComponentProps<typeof TextSwitch>>,
+}
diff --git a/assets/design-system/src/stories/TipCarousel.stories.tsx b/assets/design-system/src/stories/TipCarousel.stories.tsx
index 05cddec401..3149519aeb 100644
--- a/assets/design-system/src/stories/TipCarousel.stories.tsx
+++ b/assets/design-system/src/stories/TipCarousel.stories.tsx
@@ -1,9 +1,9 @@
 import { A } from 'honorable'
 
 import TipCarousel from '../components/TipCarousel'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'TipCarousel',
   component: TipCarousel,
   argTypes: {
@@ -16,7 +16,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -49,8 +52,10 @@ function Template(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  autoAdvanceTime: 10000,
+export const Default: Story = {
+  render: Template,
+  args: {
+    autoAdvanceTime: 10000,
+  },
 }
+
diff --git a/assets/design-system/src/stories/Toast.stories.tsx b/assets/design-system/src/stories/Toast.stories.tsx
index f072cbfd87..544ed71f49 100644
--- a/assets/design-system/src/stories/Toast.stories.tsx
+++ b/assets/design-system/src/stories/Toast.stories.tsx
@@ -4,9 +4,9 @@ import { useState } from 'react'
 import { type LayerPositionType } from '../components/Layer'
 import { GraphQLToast, Toast, type ToastSeverity } from '../components/Toast'
 import { ApolloError } from '@apollo/client'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Toast',
   component: Toast,
   argTypes: {
@@ -20,8 +20,9 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
 
+export default meta
 type Args = {
   severity: ToastSeverity
   closeTimeout?: number
@@ -112,13 +113,15 @@ function GraphQLTemplate() {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-
-Default.args = {
-  severity: 'success',
-  closeTimeout: undefined,
+export const Default: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    severity: 'success',
+    closeTimeout: undefined,
+  },
 }
 
-export const GraphQL: StoryFn = GraphQLTemplate.bind({})
+export const GraphQL: StoryObj = {
+  render: GraphQLTemplate,
+}
 
-GraphQL.args = {}
diff --git a/assets/design-system/src/stories/Tooltip.stories.tsx b/assets/design-system/src/stories/Tooltip.stories.tsx
index 547582ec9c..104b20fcb8 100644
--- a/assets/design-system/src/stories/Tooltip.stories.tsx
+++ b/assets/design-system/src/stories/Tooltip.stories.tsx
@@ -4,12 +4,15 @@ import { type ComponentProps, useState } from 'react'
 import { IconFrame, InfoIcon, Modal } from '..'
 
 import Tooltip from '../components/Tooltip'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Tooltip',
   component: Tooltip,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function CornerBox({ ref, ...props }: FlexProps) {
   return (
@@ -164,6 +167,8 @@ function Template(args: any) {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
+export const Default: Story = {
+  render: Template,
+  args: {},
+}
 
-Default.args = {}
diff --git a/assets/design-system/src/stories/TreeNavigation.stories.tsx b/assets/design-system/src/stories/TreeNavigation.stories.tsx
index 61fe1e36a6..8434607861 100644
--- a/assets/design-system/src/stories/TreeNavigation.stories.tsx
+++ b/assets/design-system/src/stories/TreeNavigation.stories.tsx
@@ -6,13 +6,16 @@ import { useNavigationContext } from '../components/contexts/NavigationContext'
 import { TreeNav, TreeNavEntry } from '../components/TreeNavigation'
 
 import { NavContextProviderStub } from './NavigationContextStub'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Tree Navigation',
   component: TreeNav,
   argTypes: {},
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const getDirectory = () => [
   { path: 'dashboards', label: 'Dashboards', enabled: true },
@@ -224,5 +227,8 @@ function Template() {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {}
+export const Default: Story = {
+  render: Template,
+  args: {},
+}
+
diff --git a/assets/design-system/src/stories/Typography.tsx b/assets/design-system/src/stories/Typography.tsx
index c7481a4473..dfcbc8db66 100644
--- a/assets/design-system/src/stories/Typography.tsx
+++ b/assets/design-system/src/stories/Typography.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import Divider from '../components/Divider'
 
 import { type styledTheme } from '..'
-import type { StoryFn } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 
 const SemanticText = styled.div<{
   $typeStyle?: keyof typeof styledTheme.partials.text
@@ -140,9 +140,11 @@ function Template({ exampleText }: { exampleText?: string }) {
   )
 }
 
-const Exp: StoryFn = Template.bind({})
+const Exp: StoryObj = {
+  render: Template,
+  args: {
+    exampleText: 'Lorem ipsum dolor sit amet',
+  },
+}
 
 export default Exp
-Exp.args = {
-  exampleText: 'Lorem ipsum dolor sit amet',
-}
diff --git a/assets/design-system/src/stories/UserDetails.stories.tsx b/assets/design-system/src/stories/UserDetails.stories.tsx
index c23d702b63..61e21f8a8c 100644
--- a/assets/design-system/src/stories/UserDetails.stories.tsx
+++ b/assets/design-system/src/stories/UserDetails.stories.tsx
@@ -1,10 +1,13 @@
 import { UserDetails } from '../index'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'User Details',
   component: UserDetails,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template() {
   return (
@@ -15,5 +18,8 @@ function Template() {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
-Default.args = {}
+export const Default: Story = {
+  render: Template,
+  args: {},
+}
+
diff --git a/assets/design-system/src/stories/ValidatedInput.stories.tsx b/assets/design-system/src/stories/ValidatedInput.stories.tsx
index 808baa7c95..4b96738d4d 100644
--- a/assets/design-system/src/stories/ValidatedInput.stories.tsx
+++ b/assets/design-system/src/stories/ValidatedInput.stories.tsx
@@ -1,14 +1,17 @@
 import { useState } from 'react'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import ValidatedInput, {
   type ValidationResponse,
 } from '../components/ValidatedInput'
 
-export default {
+const meta = {
   title: 'ValidatedInput',
   component: ValidatedInput,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template() {
   const [value, setValue] = useState('')
@@ -33,4 +36,6 @@ function Template() {
   )
 }
 
-export const Default: StoryFn = Template.bind({})
+export const Default: Story = {
+  render: Template,
+}
diff --git a/assets/design-system/src/stories/Wizard.stories.tsx b/assets/design-system/src/stories/Wizard.stories.tsx
index 264a07447e..7bae7fa6c0 100644
--- a/assets/design-system/src/stories/Wizard.stories.tsx
+++ b/assets/design-system/src/stories/Wizard.stories.tsx
@@ -16,12 +16,15 @@ import { Picker, type StepConfig } from '../components/wizard/Picker'
 import { Step } from '../components/wizard/Step'
 import { Stepper } from '../components/wizard/Stepper'
 import { Wizard } from '../components/wizard/Wizard'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Wizard',
   component: Wizard,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 interface FormData {
   domain: string
@@ -247,10 +250,13 @@ function StandaloneTemplate() {
   )
 }
 
-export const Default: StoryFn = ModalTemplate.bind({})
-
-Default.args = {}
+export const Default: Story = {
+  render: ModalTemplate,
+  args: {},
+}
 
-export const Standalone: StoryFn = StandaloneTemplate.bind({})
+export const Standalone: Story = {
+  render: StandaloneTemplate,
+  args: {},
+}
 
-Standalone.args = {}
diff --git a/assets/design-system/src/stories/_SemanticSystem.stories.tsx b/assets/design-system/src/stories/_SemanticSystem.stories.tsx
index e83f36a2b0..68d2961ad2 100644
--- a/assets/design-system/src/stories/_SemanticSystem.stories.tsx
+++ b/assets/design-system/src/stories/_SemanticSystem.stories.tsx
@@ -7,12 +7,15 @@ import { baseSpacing } from '../theme/spacing'
 import { ItemLabel } from './ItemLabel'
 import { FilledBox } from './FilledBox'
 import { FlexWrap } from './FlexWrap'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Semantic System',
   component: null,
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const fillLevelToBGColor: Record<FillLevel, string> = {
   0: 'fill-zero',
@@ -236,8 +239,10 @@ function Spacing() {
   )
 }
 
-export const Miscellaneous: StoryFn = Template.bind({})
-Miscellaneous.args = {}
+export const Miscellaneous: Story = {
+  render: Template,
+  args: {},
+}
 
 export { default as Colors } from './Colors'
 export { default as Typography } from './Typography'

From 18cc2f87ef5d32a47b538096c07e40ef957bf336 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 13:03:43 +0200
Subject: [PATCH 05/13] enable strictFunctionTypes in the design system

---
 assets/design-system/src/components/Select.tsx        |  5 ++++-
 .../src/components/SelectComboShared.tsx              | 10 ++--------
 .../design-system/src/components/TagMultiSelect.tsx   |  8 +++++---
 assets/design-system/src/components/table/Table.tsx   |  2 +-
 .../design-system/src/components/table/tableUtils.ts  | 11 ++++++++---
 assets/design-system/src/markdoc/types.ts             |  2 +-
 .../design-system/src/utils/useBimodalSelectState.ts  |  5 +++--
 assets/design-system/tsconfig.json                    |  1 -
 8 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/assets/design-system/src/components/Select.tsx b/assets/design-system/src/components/Select.tsx
index 011fa9b27d..c9c0274c11 100644
--- a/assets/design-system/src/components/Select.tsx
+++ b/assets/design-system/src/components/Select.tsx
@@ -83,7 +83,10 @@ type TriggerProps = {
 
 function Trigger({ buttonElt, isOpen, ...props }: TriggerProps) {
   const ref = props.buttonRef
-  const { buttonProps } = useButton(props, ref)
+  const { buttonProps } = useButton(
+    props as unknown as Parameters<typeof useButton>[0],
+    ref
+  )
   const theme = useTheme()
 
   return cloneElement(buttonElt, {
diff --git a/assets/design-system/src/components/SelectComboShared.tsx b/assets/design-system/src/components/SelectComboShared.tsx
index 934d46dd79..43c068182b 100644
--- a/assets/design-system/src/components/SelectComboShared.tsx
+++ b/assets/design-system/src/components/SelectComboShared.tsx
@@ -1,12 +1,6 @@
 import { type Key, type Selection } from '@react-types/shared'
 import { isNil } from 'lodash-es'
-import {
-  type Dispatch,
-  type RefObject,
-  type SetStateAction,
-  useCallback,
-  useRef,
-} from 'react'
+import { type RefObject, useCallback, useRef } from 'react'
 import { type ListState } from 'react-stately'
 
 import { type ComboBoxProps } from './ComboBox'
@@ -25,7 +19,7 @@ type UseSelectComboStatePropsArgs<T extends TType> = Pick<
   | 'onHeaderClick'
   | 'children'
 > & {
-  setIsOpen: Dispatch<SetStateAction<boolean>>
+  setIsOpen: (open: boolean) => void
   stateRef: RefObject<ListState<object> | null>
   nextFocusedKeyRef: RefObject<Key>
 }
diff --git a/assets/design-system/src/components/TagMultiSelect.tsx b/assets/design-system/src/components/TagMultiSelect.tsx
index 0ca996f30e..4d329e2304 100644
--- a/assets/design-system/src/components/TagMultiSelect.tsx
+++ b/assets/design-system/src/components/TagMultiSelect.tsx
@@ -85,9 +85,11 @@ function TagMultiSelectUnstyled({
         <Select
           label="Pick search logic"
           selectedKey={searchLogic}
-          onSelectionChange={(value: 'AND' | 'OR') => {
-            setSearchLogic(value)
-            onChangeMatchType?.(value)
+          onSelectionChange={(value) => {
+            const matchType = value as 'AND' | 'OR'
+
+            setSearchLogic(matchType)
+            onChangeMatchType?.(matchType)
           }}
           defaultOpen={false}
           triggerButton={
diff --git a/assets/design-system/src/components/table/Table.tsx b/assets/design-system/src/components/table/Table.tsx
index 1115873ab5..35a7aece8c 100644
--- a/assets/design-system/src/components/table/Table.tsx
+++ b/assets/design-system/src/components/table/Table.tsx
@@ -135,7 +135,7 @@ function Table({
   const getItemKey = useCallback<
     Parameters<typeof useVirtualizer>[0]['getItemKey']
   >((i) => tableRows[i]?.id || i, [tableRows])
-  const rowVirtualizer = useVirtualizer({
+  const rowVirtualizer = useVirtualizer<HTMLDivElement, Element>({
     count: hasNextPage ? tableRows.length + 1 : tableRows.length,
     overscan: 10,
     getItemKey,
diff --git a/assets/design-system/src/components/table/tableUtils.ts b/assets/design-system/src/components/table/tableUtils.ts
index daa54c5e1e..356c389261 100644
--- a/assets/design-system/src/components/table/tableUtils.ts
+++ b/assets/design-system/src/components/table/tableUtils.ts
@@ -5,8 +5,10 @@ import type {
   Row,
   TableOptions,
 } from '@tanstack/react-table'
-import type { VirtualItem } from '@tanstack/react-virtual'
-import { useVirtualizer } from '@tanstack/react-virtual'
+import type {
+  ReactVirtualizerOptions,
+  VirtualItem,
+} from '@tanstack/react-virtual'
 import {
   ReactElement,
   type CSSProperties,
@@ -45,7 +47,10 @@ export type TableBaseProps = {
   virtualizeRows?: boolean
   lockColumnsOnScroll?: boolean
   reactVirtualOptions?: Partial<
-    Omit<Parameters<typeof useVirtualizer>[0], 'count' | 'getScrollElement'>
+    Omit<
+      ReactVirtualizerOptions<HTMLDivElement, Element>,
+      'count' | 'getScrollElement'
+    >
   >
   reactTableOptions?: Partial<Omit<TableOptions<any>, 'data' | 'columns'>>
   onRowClick?: (e: MouseEvent<HTMLTableRowElement>, row: Row<any>) => void
diff --git a/assets/design-system/src/markdoc/types.ts b/assets/design-system/src/markdoc/types.ts
index 912a20b586..dc8a118939 100644
--- a/assets/design-system/src/markdoc/types.ts
+++ b/assets/design-system/src/markdoc/types.ts
@@ -8,7 +8,7 @@ import {
 import { type ComponentType } from 'react'
 
 export type BaseSchema<C extends Config = Config> = Omit<
-  Schema<C, ComponentType>,
+  Schema<C, ComponentType<any>>,
   'attributes'
 > & {
   description?: string
diff --git a/assets/design-system/src/utils/useBimodalSelectState.ts b/assets/design-system/src/utils/useBimodalSelectState.ts
index 6dc1d103e3..32c5c2c88c 100644
--- a/assets/design-system/src/utils/useBimodalSelectState.ts
+++ b/assets/design-system/src/utils/useBimodalSelectState.ts
@@ -58,7 +58,7 @@ function useBimodalSelectState<T extends object>({
   onSelectionChange: onSelectChangeProp,
   ...props
 }: BimodalSelectProps<T> & {
-  onSelectionChange: (arg: any) => any
+  onSelectionChange?: (arg: any) => any
 }): BimodalSelectState<T> {
   const [selectedKey, setSelectedKey] = useControlledState<Key>(
     selectionMode === 'single' ? props.selectedKey : undefined,
@@ -115,7 +115,8 @@ function useBimodalSelectState<T extends object>({
 
   const validationState = useFormValidationState({
     ...props,
-    value: selectionMode === 'single' ? selectedKey : selectedKeys,
+    value:
+      selectionMode === 'single' ? selectedKey : Array.from(selectedKeys ?? []),
   })
 
   const selectedItem =
diff --git a/assets/design-system/tsconfig.json b/assets/design-system/tsconfig.json
index c0812eb7a7..b4c843683b 100644
--- a/assets/design-system/tsconfig.json
+++ b/assets/design-system/tsconfig.json
@@ -8,7 +8,6 @@
 
     // TODO: get rid of all these once errors are fixed
     "strictNullChecks": false,
-    "strictFunctionTypes": false,
     "strictPropertyInitialization": false
   },
   "include": ["src/**/*"]

From ed94429c423471df6f2a06b1bf457e66c6d46ff4 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 13:17:40 +0200
Subject: [PATCH 06/13] enable strictNullChecks in the design system

---
 assets/design-system/src/GlobalStyle.tsx      |  4 ++
 .../design-system/src/components/AppIcon.tsx  | 14 ++--
 .../src/components/ArrowScroll.tsx            |  2 +-
 .../src/components/Breadcrumbs.tsx            |  8 +--
 .../design-system/src/components/Button.tsx   |  2 +-
 assets/design-system/src/components/Card.tsx  |  2 +-
 .../design-system/src/components/Checkbox.tsx | 12 ++--
 .../src/components/Checklist.tsx              | 18 ++++--
 .../src/components/ChecklistItem.tsx          |  6 +-
 .../design-system/src/components/ChipList.tsx |  2 +-
 assets/design-system/src/components/Code.tsx  | 25 +++++---
 .../src/components/CodeEditor.tsx             |  6 +-
 .../design-system/src/components/ComboBox.tsx | 64 ++++++++++---------
 .../src/components/EmptyState.tsx             |  2 +-
 assets/design-system/src/components/Flex.tsx  |  6 +-
 .../src/components/Highlight.tsx              |  2 +-
 .../src/components/IconFrame.tsx              |  8 +--
 .../design-system/src/components/Input2.tsx   |  8 ++-
 .../design-system/src/components/ListBox.tsx  | 18 +++---
 .../src/components/ListBoxItem.tsx            |  2 +-
 .../src/components/LoadingSpinner.tsx         |  6 +-
 .../src/components/LoopingLogo.tsx            |  6 +-
 .../src/components/LoopingLogoAlternative.tsx |  6 +-
 .../design-system/src/components/Markdown.tsx |  6 +-
 assets/design-system/src/components/Modal.tsx |  4 +-
 .../src/components/PanZoomWrapper.tsx         |  2 +-
 .../src/components/PopoverCornerScale.tsx     |  2 +-
 .../src/components/ProgressBar.tsx            |  4 +-
 assets/design-system/src/components/Radio.tsx | 16 +++--
 .../src/components/RadioGroup.tsx             |  4 +-
 .../src/components/ReactAriaPopover.tsx       |  4 +-
 .../src/components/SegmentedInput.tsx         |  2 +-
 .../design-system/src/components/Select.tsx   |  7 +-
 .../src/components/SelectComboShared.tsx      |  8 +--
 .../src/components/SelectItem.tsx             |  6 +-
 .../design-system/src/components/Slider.tsx   |  2 +-
 .../design-system/src/components/Spinner.tsx  |  4 +-
 .../design-system/src/components/Stepper.tsx  |  5 +-
 .../design-system/src/components/SubTab.tsx   |  4 +-
 .../design-system/src/components/Switch.tsx   |  2 +-
 assets/design-system/src/components/Tab.tsx   | 10 +--
 .../design-system/src/components/TabList.tsx  | 31 +++++----
 .../design-system/src/components/TabPanel.tsx | 14 ++--
 .../src/components/TagMultiSelect.tsx         |  2 +-
 .../src/components/TextSwitch.tsx             | 27 ++++----
 assets/design-system/src/components/Toast.tsx |  8 ++-
 .../design-system/src/components/Tooltip.tsx  | 39 +++++------
 .../src/components/TreeNavigation.tsx         |  8 +--
 .../src/components/ValidatedInput.tsx         |  4 +-
 .../contexts/BreadcrumbsContext.tsx           |  2 +-
 .../src/components/table/Table.tsx            | 25 ++++----
 .../design-system/src/components/table/Th.tsx |  2 +-
 .../src/components/table/hooks.ts             |  4 +-
 .../src/components/wizard/Navigation.tsx      |  5 +-
 .../src/components/wizard/Picker.tsx          | 10 +--
 .../src/components/wizard/Stepper.tsx         |  2 +-
 .../src/components/wizard/Wizard.tsx          |  9 ++-
 .../src/components/wizard/context.ts          |  3 +-
 .../src/components/wizard/hooks.ts            | 26 ++++----
 .../src/hooks/useRefResizeObserver.tsx        |  2 +-
 .../src/hooks/useResizeObserver.ts            |  4 +-
 .../src/markdoc/components/Fence.tsx          |  4 +-
 .../src/markdoc/runtimeSchema.ts              | 14 ++--
 .../src/stories/ButtonGroup.stories.tsx       |  6 +-
 .../src/stories/Card.stories.tsx              |  1 -
 .../src/stories/Chip.stories.tsx              |  8 +--
 .../src/stories/ClusterTagsTemplate.tsx       |  3 +-
 .../src/stories/ComboBox.stories.tsx          |  8 ++-
 .../src/stories/Icons.stories.tsx             |  2 +-
 .../src/stories/ListBox.stories.tsx           |  6 +-
 .../src/stories/NavigationContextStub.tsx     |  4 +-
 .../src/stories/Radio.stories.tsx             |  6 +-
 .../src/stories/Select.stories.tsx            | 40 ++++++------
 .../src/stories/TabList.stories.tsx           | 10 ++-
 .../src/stories/Table.stories.tsx             | 11 ++--
 .../src/stories/TagMultiselectTemplate.tsx    |  4 +-
 .../src/stories/TextSwitch.stories.tsx        |  4 +-
 .../src/stories/Tooltip.stories.tsx           |  4 +-
 .../src/stories/TreeNavigation.stories.tsx    |  2 +-
 .../design-system/src/stories/Typography.tsx  | 10 ++-
 .../src/stories/Wizard.stories.tsx            |  2 +-
 .../src/stories/_SemanticSystem.stories.tsx   |  9 +--
 assets/design-system/src/theme/focus.ts       |  1 -
 assets/design-system/src/types.ts             |  6 +-
 .../src/utils/scrollIntoContainerView.ts      |  6 +-
 assets/design-system/src/utils/urls.ts        |  2 +-
 .../src/utils/useBimodalSelectState.ts        | 37 +++++++----
 assets/design-system/tsconfig.json            |  6 +-
 88 files changed, 427 insertions(+), 337 deletions(-)

diff --git a/assets/design-system/src/GlobalStyle.tsx b/assets/design-system/src/GlobalStyle.tsx
index f13de40957..6d5231f3db 100644
--- a/assets/design-system/src/GlobalStyle.tsx
+++ b/assets/design-system/src/GlobalStyle.tsx
@@ -22,6 +22,10 @@ const {
 
 export const colorsToCSSVars: (colors: unknown) => any = (colors) => {
   function inner(colors: unknown, prefix = '') {
+    if (!colors || typeof colors !== 'object') {
+      return
+    }
+
     Object.entries(colors).forEach(([key, value]) => {
       if (typeof value === 'string') {
         ;(cssVars as any)[`--color-${prefix}${key}`] = value
diff --git a/assets/design-system/src/components/AppIcon.tsx b/assets/design-system/src/components/AppIcon.tsx
index a5e9ab6d47..64a70a11c1 100644
--- a/assets/design-system/src/components/AppIcon.tsx
+++ b/assets/design-system/src/components/AppIcon.tsx
@@ -85,7 +85,7 @@ export function toInitials(name: string) {
     .map((n) => n.charAt(0).toUpperCase())
 
   if (initials.length > 2) {
-    initials = [initials[0], last(initials)]
+    initials = [initials[0], last(initials) ?? '']
   }
 
   return initials.join('')
@@ -101,17 +101,17 @@ const AppIconSC = styled.div<{
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: theme.colors[$color],
+  backgroundColor: $color ? theme.colors[$color] : undefined,
   borderRadius: theme.borderRadiuses.medium,
   border: $hasBorder ? theme.borders.default : 'none',
-  borderColor: theme.colors[$borderColor],
+  borderColor: $borderColor ? theme.colors[$borderColor] : undefined,
   width: $boxSize,
   height: $boxSize,
   minWidth: $boxSize,
   minHeight: $boxSize,
   cursor: $clickable ? 'pointer' : 'auto',
   overflow: 'hidden',
-  _hover: $clickable ? { backgroundColor: $borderColor } : null,
+  _hover: $clickable ? { backgroundColor: $borderColor } : undefined,
 }))
 
 const InitialsSC = styled.div<{
@@ -141,7 +141,7 @@ function AppIcon({
   hue,
   clickable = false,
   url,
-  icon = null,
+  icon,
   alt,
   name,
   initials,
@@ -175,13 +175,13 @@ function AppIcon({
       $hasBorder={hasBorder}
       $boxSize={boxSize}
       $clickable={clickable}
-      onClick={clickable ? onClose : null}
+      onClick={clickable ? onClose : undefined}
       {...props}
     >
       {url ? (
         <ImgSC
           src={url}
-          alt={alt}
+          alt={alt ?? undefined}
           $iconWidth={iconWidth}
         />
       ) : (
diff --git a/assets/design-system/src/components/ArrowScroll.tsx b/assets/design-system/src/components/ArrowScroll.tsx
index c062d16928..8268c8633e 100644
--- a/assets/design-system/src/components/ArrowScroll.tsx
+++ b/assets/design-system/src/components/ArrowScroll.tsx
@@ -17,7 +17,7 @@ function ArrowScroll({
   color?: SemanticColorKey
   opacity?: number
 } & ComponentPropsWithRef<'div'>) {
-  const containerRef = useRef<HTMLDivElement>(undefined)
+  const containerRef = useRef<HTMLDivElement>(null)
   const [showLeftGradient, setShowLeftGradient] = useState(false)
   const [showRightGradient, setShowRightGradient] = useState(false)
 
diff --git a/assets/design-system/src/components/Breadcrumbs.tsx b/assets/design-system/src/components/Breadcrumbs.tsx
index bf16d3ff58..721d402b0d 100644
--- a/assets/design-system/src/components/Breadcrumbs.tsx
+++ b/assets/design-system/src/components/Breadcrumbs.tsx
@@ -304,14 +304,14 @@ export function DynamicBreadcrumbs({
   minLength = 0,
   maxLength = Infinity,
   collapsible = true,
-  breadcrumbs,
+  breadcrumbs = [],
   wrapperRef: transitionRef,
   ...props
 }: BreadcrumbPropsBase & {
-  wrapperRef?: RefObject<HTMLDivElement>
+  wrapperRef?: RefObject<HTMLDivElement | null>
   style: any
 }) {
-  const wrapperRef = useRef<HTMLDivElement | undefined>(undefined)
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
   const [visibleListId, setVisibleListId] = useState<string>('')
   const children: ReactNode[] = []
 
@@ -403,7 +403,7 @@ export function Breadcrumbs({
 }: BreadcrumbsProps & Omit<NavProps, 'ref'>) {
   const contextCrumbs = useContext(BreadcrumbsContext)?.breadcrumbs
   const breadcrumbs = propsCrumbs || contextCrumbs
-  const nodeRef = useRef<HTMLDivElement>(undefined)
+  const nodeRef = useRef<HTMLDivElement>(null)
 
   if (!breadcrumbs) {
     throw Error(
diff --git a/assets/design-system/src/components/Button.tsx b/assets/design-system/src/components/Button.tsx
index 441486813c..b420ac5aa9 100644
--- a/assets/design-system/src/components/Button.tsx
+++ b/assets/design-system/src/components/Button.tsx
@@ -123,7 +123,7 @@ const Button = memo(
         $size={buttonSize}
         $type={buttonType}
         $noPadding={props.padding === 'none'}
-        disabled={disabled}
+        disabled={disabled ?? undefined}
         css={{
           width,
           minWidth,
diff --git a/assets/design-system/src/components/Card.tsx b/assets/design-system/src/components/Card.tsx
index 25bc850b2b..c8c7a94ea9 100644
--- a/assets/design-system/src/components/Card.tsx
+++ b/assets/design-system/src/components/Card.tsx
@@ -209,7 +209,7 @@ function Card({
           <HeaderSC
             $fillLevel={headerFillLevel}
             $selected={selected}
-            $size={size}
+            $size={size ?? 'medium'}
             $cornerSize={cornerSize}
             {...headerProps}
           >
diff --git a/assets/design-system/src/components/Checkbox.tsx b/assets/design-system/src/components/Checkbox.tsx
index 0d2443e2c0..e77ce834d7 100644
--- a/assets/design-system/src/components/Checkbox.tsx
+++ b/assets/design-system/src/components/Checkbox.tsx
@@ -175,7 +175,7 @@ function Checkbox({
   }
   const labelId = useId()
   const toggleState = useToggleState(toggleStateProps)
-  const inputRef = useRef<any>(undefined)
+  const inputRef = useRef<any>(null)
   const { isFocusVisible, focusProps } = useFocusRing()
   const { inputProps } = useCheckbox(
     {
@@ -195,9 +195,9 @@ function Checkbox({
   )
 
   const icon = indeterminate ? (
-    <IndeterminateIcon small={small} />
+    <IndeterminateIcon small={!!small} />
   ) : toggleState.isSelected ? (
-    <CheckedIcon small={small} />
+    <CheckedIcon small={!!small} />
   ) : null
 
   return (
@@ -209,8 +209,8 @@ function Checkbox({
         indeterminate,
       })}
       $isFocusVisible={isFocusVisible}
-      $small={small}
-      $disabled={disabled}
+      $small={!!small}
+      $disabled={!!disabled}
       display="flex"
       marginBottom="0"
       {...props}
@@ -224,7 +224,7 @@ function Checkbox({
             if (typeof onChange === 'function') {
               onChange(e)
             }
-            inputProps.onChange(e)
+            inputProps.onChange?.(e)
           }}
           ref={inputRef}
         />
diff --git a/assets/design-system/src/components/Checklist.tsx b/assets/design-system/src/components/Checklist.tsx
index 5aee7696bb..3d4c661177 100644
--- a/assets/design-system/src/components/Checklist.tsx
+++ b/assets/design-system/src/components/Checklist.tsx
@@ -123,13 +123,17 @@ function ChecklistUnstyled({
     useState<number>(-1)
 
   const onSelectionChangeWrapper = useCallback(
-    (idx: number) =>
-      idx < children.length && idx > -1 ? onSelectionChange(idx) : undefined,
+    (idx: number | null) => {
+      if (idx === null || idx >= children.length || idx < 0) return
+      onSelectionChange?.(idx)
+    },
     [children, onSelectionChange]
   )
   const onFocusChangeWrapper = useCallback(
-    (idx: number) =>
-      idx < children.length && idx > -1 ? onFocusChange(idx) : undefined,
+    (idx: number) => {
+      if (idx >= children.length || idx < -1) return
+      onFocusChange?.(idx)
+    },
     [children, onFocusChange]
   )
 
@@ -142,7 +146,7 @@ function ChecklistUnstyled({
           index={index}
           selected={selectedKey === index}
           focused={focusedKey === index}
-          completed={completedKey >= index}
+          completed={(completedKey ?? -1) >= index}
           onSelectionChange={onSelectionChangeWrapper}
           onFocusChange={onFocusChangeWrapper}
         >
@@ -170,6 +174,8 @@ function ChecklistUnstyled({
   })
 
   useEffect(() => {
+    if (!itemsContainerRef.current || !finishedContainerRef.current) return
+
     const maxItemContainerHeight = Math.max(
       itemContainerHeight,
       itemsContainerRef.current.getBoundingClientRect().height
@@ -202,7 +208,7 @@ function ChecklistUnstyled({
       >
         <div
           className="header"
-          onClick={() => onOpenChange(!isOpen)}
+          onClick={() => onOpenChange?.(!isOpen)}
         >
           <div>{label}</div>
           <DropdownArrowIcon className={isOpen ? 'arrowUp' : 'arrowDown'} />
diff --git a/assets/design-system/src/components/ChecklistItem.tsx b/assets/design-system/src/components/ChecklistItem.tsx
index 9c5263a2d9..2879257871 100644
--- a/assets/design-system/src/components/ChecklistItem.tsx
+++ b/assets/design-system/src/components/ChecklistItem.tsx
@@ -170,7 +170,7 @@ type ChecklistItemInnerProps = Omit<ChecklistItemProps, 'children'> & {
   selected?: boolean
   focused?: boolean
   completed?: boolean
-  onSelectionChange: Dispatch<number>
+  onSelectionChange: Dispatch<number | null>
   onFocusChange: Dispatch<number>
 }
 
@@ -184,7 +184,7 @@ function ChecklistItemInnerUnstyled({
   onFocusChange,
   ...props
 }: ChecklistItemInnerProps): JSX.Element {
-  const headerRef = useRef<HTMLDivElement>(undefined)
+  const headerRef = useRef<HTMLDivElement>(null)
   const { keyboardProps } = useKeyboard({
     onKeyDown: (e) => {
       switch (e.key) {
@@ -209,7 +209,7 @@ function ChecklistItemInnerUnstyled({
 
   useEffect(() => {
     if (headerRef.current && focused) {
-      setTimeout(() => headerRef.current.focus())
+      setTimeout(() => headerRef.current?.focus())
     }
   }, [headerRef, focused])
 
diff --git a/assets/design-system/src/components/ChipList.tsx b/assets/design-system/src/components/ChipList.tsx
index 02faa4915a..dfe7134d23 100644
--- a/assets/design-system/src/components/ChipList.tsx
+++ b/assets/design-system/src/components/ChipList.tsx
@@ -40,7 +40,7 @@ function ChipList<TValue = string>({
         <Chip
           key={(v as any).key || i}
           clickable={clickable}
-          onClick={() => clickable && onClick(v)}
+          onClick={() => clickable && onClick?.(v)}
           {...props}
         >
           {transformValue ? transformValue(v) : `${v}`}
diff --git a/assets/design-system/src/components/Code.tsx b/assets/design-system/src/components/Code.tsx
index ce8e25d872..1a54cee1fa 100644
--- a/assets/design-system/src/components/Code.tsx
+++ b/assets/design-system/src/components/Code.tsx
@@ -58,7 +58,7 @@ type CodeProps = Omit<CardProps, 'children'> & {
 type TabInterfaceT = 'tabs' | 'dropdown'
 
 type TabsContext = {
-  tabInterface: TabInterfaceT
+  tabInterface?: TabInterfaceT
   setTabInterface: (arg: TabInterfaceT) => void
   tabStateRef?: RefObject<any>
   selectedKey?: string
@@ -206,12 +206,13 @@ function CodeTabs() {
     setTabInterface,
 
     tabStateRef,
-    tabs,
+    tabs: tabsProp,
     selectedKey,
     onSelectionChange,
   } = useContext(TabsContext)
-  const tabsRef = useRef<HTMLDivElement>(undefined)
-  const tabsWrapRef = useRef<HTMLDivElement>(undefined)
+  const tabs = tabsProp ?? []
+  const tabsRef = useRef<HTMLDivElement>(null)
+  const tabsWrapRef = useRef<HTMLDivElement>(null)
   const tabListStateProps: TabListStateProps = {
     keyboardActivation: 'manual',
     orientation: 'horizontal',
@@ -236,10 +237,12 @@ function CodeTabs() {
     }, [setTabInterface])
   )
 
+  if (!tabStateRef) return null
+
   return (
     <TabsWrap
       ref={tabsWrapRef}
-      $isDisabled={tabListStateProps.isDisabled}
+      $isDisabled={!!tabListStateProps.isDisabled}
     >
       <TabList
         className="my-tab-list"
@@ -271,7 +274,9 @@ function CodeTabs() {
 }
 
 function CodeSelectUnstyled({ className }: ComponentProps<'div'>) {
-  const { tabs, selectedKey, onSelectionChange } = useContext(TabsContext)
+  const { tabs: tabsProp, selectedKey, onSelectionChange } =
+    useContext(TabsContext)
+  const tabs = tabsProp ?? []
 
   const selectedTab = tabs.find((tab) => tab.key === selectedKey) || tabs[0]
 
@@ -283,7 +288,7 @@ function CodeSelectUnstyled({ className }: ComponentProps<'div'>) {
         width="max-content"
         placement="right"
         triggerButton={
-          <TabsDropdownButton>{selectedTab.label} </TabsDropdownButton>
+          <TabsDropdownButton>{selectedTab?.label} </TabsDropdownButton>
         }
       >
         {tabs.map((tab) => (
@@ -409,12 +414,12 @@ function CodeUnstyled({
 }: CodeProps) {
   const parentFillLevel = useFillLevel()
   const inferredFillLevel = fillLevelProp ?? parentFillLevel
-  const tabStateRef = useRef(undefined)
+  const tabStateRef = useRef<any>(null)
   const [selectedTabKey, setSelectedTabKey] = useState<string>(
     tabs?.[0]?.key || ''
   )
   const theme = useTheme()
-  const [tabInterface, setTabInterface] = useState<TabInterfaceT>()
+  const [tabInterface, setTabInterface] = useState<TabInterfaceT | undefined>()
 
   props.height = props.height || undefined
   const hasSetHeight = !!props.height || !!props.minHeight
@@ -508,7 +513,7 @@ function CodeUnstyled({
             isStreaming={isStreaming}
             setMermaidError={setMermaidError}
           >
-            {children}
+            {children ?? ''}
           </CodeContent>
         )}
       </Flex>
diff --git a/assets/design-system/src/components/CodeEditor.tsx b/assets/design-system/src/components/CodeEditor.tsx
index e761476cb4..736ed80622 100644
--- a/assets/design-system/src/components/CodeEditor.tsx
+++ b/assets/design-system/src/components/CodeEditor.tsx
@@ -49,7 +49,7 @@ export default function CodeEditor({
   const parentFillLevel = useFillLevel()
   const theme = useTheme()
   const monaco = useMonaco()
-  const [current, setCurrent] = useState<string>(value)
+  const [current, setCurrent] = useState<string>(value ?? '')
   const [copied, setCopied] = useState<boolean>(false)
   const changed = current !== value
 
@@ -115,8 +115,8 @@ export default function CodeEditor({
           language={language}
           value={value}
           onChange={(v) => {
-            setCurrent(v)
-            if (onChange) onChange(v)
+            setCurrent(v ?? '')
+            if (onChange) onChange(v ?? '')
           }}
           options={mergedOptions}
           theme={theme.mode === 'light' ? 'plural-light' : 'plural-dark'}
diff --git a/assets/design-system/src/components/ComboBox.tsx b/assets/design-system/src/components/ComboBox.tsx
index efbd19b471..388c2044a6 100644
--- a/assets/design-system/src/components/ComboBox.tsx
+++ b/assets/design-system/src/components/ComboBox.tsx
@@ -105,20 +105,22 @@ const OpenButtonSC = styled.div(({ theme }) => ({
 
 function OpenButton({
   buttonRef,
-  buttonProps,
+  buttonProps = {},
   ...props
 }: HTMLAttributes<HTMLDivElement> & {
-  buttonRef: RefObject<any>
-  buttonProps: AriaButtonProps
+  buttonRef?: RefObject<HTMLDivElement | null>
+  buttonProps?: AriaButtonProps
 }) {
+  const fallbackRef = useRef<HTMLDivElement | null>(null)
+  const resolvedButtonRef = buttonRef ?? fallbackRef
   const { buttonProps: useButtonProps } = useButton(
     { ...buttonProps, elementType: 'div' },
-    buttonRef
+    resolvedButtonRef
   )
 
   return (
     <OpenButtonSC
-      ref={buttonRef}
+      ref={resolvedButtonRef}
       {...props}
       {...useButtonProps}
     >
@@ -237,7 +239,7 @@ function ComboBox({
   containerProps,
   ...props
 }: ComboBoxProps) {
-  const nextFocusedKeyRef = useRef<Key>(null)
+  const nextFocusedKeyRef = useRef<Key | null>(null)
   const stateRef = useRef<ComboBoxState<object> | null>(null)
   const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(false)
   const previousInputValue = useRef(inputValue)
@@ -264,9 +266,9 @@ function ComboBox({
   )
 
   const wrappedOnSelectionChange: typeof onSelectionChange = useCallback(
-    (newKey, ...args) => {
+    (newKey) => {
       if (onSelectionChange) {
-        onSelectionChange(typeof newKey === 'string' ? newKey : '', ...args)
+        onSelectionChange(typeof newKey === 'string' ? newKey : '')
         setIsOpen(false)
       }
     },
@@ -274,26 +276,26 @@ function ComboBox({
   )
 
   const wrappedOnFocusChange: typeof onFocusChange = useCallback(
-    (isFocused, ...args) => {
+    (isFocused) => {
       // Enforce open on focus
       if (isFocused && !isOpen) {
         setIsOpen(true)
       }
       if (onFocusChange) {
-        onFocusChange(isFocused, ...args)
+        onFocusChange(isFocused)
       }
     },
     [isOpen, onFocusChange, setIsOpen]
   )
 
   const wrappedOnInputChange: typeof onInputChange = useCallback(
-    (input, ...args) => {
+    (input) => {
       if (input !== previousInputValue.current) {
         previousInputValue.current = input
         setIsOpen(true)
       }
       if (onInputChange) {
-        onInputChange(input, ...args)
+        onInputChange(input)
       }
     },
     [onInputChange, setIsOpen]
@@ -338,16 +340,16 @@ function ComboBox({
     }
   }, [state, isOpen])
 
-  const buttonRef = useRef(null)
-  const inputRef = useRef(null)
-  const inputInnerRef = useRef(null)
-  const listBoxRef = useRef(null)
-  const popoverRef = useRef(null)
+  const buttonRef = useRef<HTMLDivElement | null>(null)
+  const triggerElRef = useRef<HTMLDivElement | null>(null)
+  const inputInnerRef = useRef<HTMLInputElement | null>(null)
+  const listBoxRef = useRef<HTMLDivElement | null>(null)
+  const popoverRef = useRef<HTMLDivElement | null>(null)
 
   const { buttonProps, inputProps, listBoxProps } = useComboBox(
     {
       ...comboStateProps,
-      inputRef,
+      inputRef: inputInnerRef,
       buttonRef,
       listBoxRef,
       popoverRef,
@@ -360,7 +362,7 @@ function ComboBox({
   }
 
   const { floating, triggerRef } = useFloatingDropdown({
-    triggerRef: inputRef,
+    triggerRef: triggerElRef,
     width,
     maxHeight,
     placement,
@@ -387,7 +389,7 @@ function ComboBox({
         if (nextChipClose instanceof HTMLElement) {
           nextChipClose.focus?.()
         } else {
-          inputRef.current?.querySelector('input')?.focus?.()
+          inputInnerRef.current?.focus?.()
         }
       }
 
@@ -421,20 +423,24 @@ function ComboBox({
     ) {
       const chip = document.activeElement?.closest(`[${CHIP_ATTR_KEY}]`)
 
+      if (!chip) return
+
       if (dir === 1) {
         if (!chip.nextElementSibling) {
           inputInnerRef.current?.focus()
         } else {
-          chip?.nextElementSibling
-            ?.querySelector(`[${CHIP_CLOSE_ATTR_KEY}]`)
-            // @ts-ignore
-            ?.focus?.()
+          ;(
+            chip.nextElementSibling.querySelector(
+              `[${CHIP_CLOSE_ATTR_KEY}]`
+            ) as HTMLElement | null
+          )?.focus?.()
         }
       } else if (dir === -1) {
-        chip.previousElementSibling
-          ?.querySelector(`[${CHIP_CLOSE_ATTR_KEY}]`)
-          // @ts-ignore
-          ?.focus?.()
+        ;(
+          chip.previousElementSibling?.querySelector(
+            `[${CHIP_CLOSE_ATTR_KEY}]`
+          ) as HTMLElement | null
+        )?.focus?.()
       }
     }
   }, [])
@@ -449,7 +455,7 @@ function ComboBox({
               ref={chipListRef}
               onKeyDown={handleKeyDown}
             >
-              {chips.map((chipProps) => (
+              {chips?.map((chipProps) => (
                 <Chip
                   fillLevel={2}
                   size="small"
diff --git a/assets/design-system/src/components/EmptyState.tsx b/assets/design-system/src/components/EmptyState.tsx
index ba69b23105..3a7468f6c2 100644
--- a/assets/design-system/src/components/EmptyState.tsx
+++ b/assets/design-system/src/components/EmptyState.tsx
@@ -32,7 +32,7 @@ const IconSC = styled.div(({ theme }) => ({
 function EmptyState({
   message,
   description,
-  icon = null,
+  icon,
   children,
   ...props
 }: EmptyStateProps) {
diff --git a/assets/design-system/src/components/Flex.tsx b/assets/design-system/src/components/Flex.tsx
index 448412519c..4bfc9afa9f 100644
--- a/assets/design-system/src/components/Flex.tsx
+++ b/assets/design-system/src/components/Flex.tsx
@@ -72,7 +72,7 @@ function BaseFlex({
   return (
     <WrapWithIf
       condition={!!tooltip}
-      wrapper={<Tooltip {...tooltip} />}
+      wrapper={<Tooltip {...tooltip!} />}
     >
       <FlexSC
         ref={ref}
@@ -127,8 +127,8 @@ const FlexSC = styled.div<{
     flexShrink: $shrink,
     alignItems: $align,
     justifyContent: $justify,
-    gap: theme.spacing[$gap] || 0,
-    padding: theme.spacing[$padding] || 0,
+    gap: ($gap != null ? theme.spacing[$gap] : 0) || 0,
+    padding: ($padding != null ? theme.spacing[$padding] : 0) || 0,
   })
 )
 
diff --git a/assets/design-system/src/components/Highlight.tsx b/assets/design-system/src/components/Highlight.tsx
index f96bc6bda9..10d4b0eb0f 100644
--- a/assets/design-system/src/components/Highlight.tsx
+++ b/assets/design-system/src/components/Highlight.tsx
@@ -54,7 +54,7 @@ function Highlight({
   const lines = useMemo(() => children.split(/\r?\n/), [children])
 
   useLayoutEffect(() => {
-    if (hljs.getLanguage(language) && codeRef.current) {
+    if (language && hljs.getLanguage(language) && codeRef.current) {
       delete codeRef.current.dataset.highlighted
       hljs.highlightElement(codeRef.current)
     }
diff --git a/assets/design-system/src/components/IconFrame.tsx b/assets/design-system/src/components/IconFrame.tsx
index e7af163958..73db834958 100644
--- a/assets/design-system/src/components/IconFrame.tsx
+++ b/assets/design-system/src/components/IconFrame.tsx
@@ -15,7 +15,7 @@ import Tooltip, { type TooltipProps } from './Tooltip'
 type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
 type Type = 'secondary' | 'tertiary' | 'floating'
 
-function typeToBG(theme: DefaultTheme): Record<Type, string> {
+function typeToBG(theme: DefaultTheme): Record<Type, string | undefined> {
   return {
     secondary: 'transparent',
     tertiary: 'transparent',
@@ -26,7 +26,7 @@ function typeToBG(theme: DefaultTheme): Record<Type, string> {
   }
 }
 
-function typeToHoverBG(theme: DefaultTheme): Record<Type, string> {
+function typeToHoverBG(theme: DefaultTheme): Record<Type, string | undefined> {
   return {
     secondary: theme.colors['action-input-hover'],
     tertiary: theme.colors['action-input-hover'],
@@ -37,7 +37,7 @@ function typeToHoverBG(theme: DefaultTheme): Record<Type, string> {
   }
 }
 
-function typeToSelectedBG(theme: DefaultTheme): Record<Type, string> {
+function typeToSelectedBG(theme: DefaultTheme): Record<Type, string | undefined> {
   return {
     secondary: undefined,
     tertiary: undefined,
@@ -48,7 +48,7 @@ function typeToSelectedBG(theme: DefaultTheme): Record<Type, string> {
   }
 }
 
-function typeToFocusBG(theme: DefaultTheme): Record<Type, string> {
+function typeToFocusBG(theme: DefaultTheme): Record<Type, string | undefined> {
   return {
     secondary: undefined,
     tertiary: undefined,
diff --git a/assets/design-system/src/components/Input2.tsx b/assets/design-system/src/components/Input2.tsx
index e9aae3822d..84061496ea 100644
--- a/assets/design-system/src/components/Input2.tsx
+++ b/assets/design-system/src/components/Input2.tsx
@@ -211,11 +211,13 @@ const InputAreaSC = styled.div((_) => ({
   flex: '1 1',
   overflowX: 'auto',
 }))
-const InputContentSC = styled.div<{ $padStart: keyof DefaultTheme['spacing'] }>(
+const InputContentSC = styled.div<{
+  $padStart?: keyof DefaultTheme['spacing'] | null
+}>(
   ({ theme, $padStart }) => ({
     display: 'flex',
     alignSelf: 'stretch',
-    paddingLeft: theme.spacing[$padStart],
+    ...($padStart ? { paddingLeft: theme.spacing[$padStart] } : {}),
   })
 )
 
@@ -266,7 +268,7 @@ function Input2({
       (inputAreaRef.current?.getBoundingClientRect().width ?? 0)
 
     if (scrollDiff > 0) {
-      inputAreaRef.current.scrollTo({
+      inputAreaRef.current?.scrollTo({
         left: scrollDiff + 1,
         behavior: 'smooth',
       })
diff --git a/assets/design-system/src/components/ListBox.tsx b/assets/design-system/src/components/ListBox.tsx
index d5f6ad918c..eb5b0e53f3 100644
--- a/assets/design-system/src/components/ListBox.tsx
+++ b/assets/design-system/src/components/ListBox.tsx
@@ -44,7 +44,7 @@ type ListBoxProps = Omit<
   ListBoxUnmanagedProps,
   'state' | 'nextFocusedKeyRef' | 'onSelectionChange'
 > & {
-  selectedKey: Key
+  selectedKey?: Key | null
   onSelectionChange: (key: Key) => unknown
   onHeaderClick?: () => unknown
   onFooterClick?: () => unknown
@@ -109,7 +109,10 @@ function propsToTextValue(props: Record<string, unknown> | null | undefined) {
 }
 
 function useItemWrappedChildren(
-  children: ReactElement<any> | (ReactElement<any> | false)[],
+  children?:
+    | ReactElement<any>
+    | (ReactElement<any> | false | null | undefined)[]
+    | null,
   header?: ReactElement<any>,
   footer?: ReactElement<any>
 ) {
@@ -238,11 +241,8 @@ function ListBoxUnmanaged({
   const theme = useTheme()
 
   // Get props for the listbox element
-  let ref = useRef(undefined)
-
-  if (listBoxRef) {
-    ref = listBoxRef
-  }
+  const fallbackRef = useRef<HTMLElement | null>(null)
+  const ref = listBoxRef ?? fallbackRef
   const { listBoxProps } = useListBox(props, state, ref)
 
   return (
@@ -253,7 +253,7 @@ function ListBoxUnmanaged({
     >
       {headerFixed && <div className="headerFixed">{headerFixed}</div>}
       <ScrollContainer
-        ref={ref}
+        ref={ref as RefObject<HTMLDivElement | null>}
         extendStyle={{
           paddingTop: headerFixed ? 0 : theme.spacing.xxxsmall,
           paddingBottom: footerFixed ? 0 : theme.spacing.xxxsmall,
@@ -275,7 +275,7 @@ function ListBoxUnmanaged({
 
 function Option({ item, state }: { item: any; state: ListState<object> }) {
   // Get props for the option element
-  const ref = useRef(undefined)
+  const ref = useRef(null)
   const {
     optionProps,
     isSelected,
diff --git a/assets/design-system/src/components/ListBoxItem.tsx b/assets/design-system/src/components/ListBoxItem.tsx
index b60405acf4..fa7ca2f581 100644
--- a/assets/design-system/src/components/ListBoxItem.tsx
+++ b/assets/design-system/src/components/ListBoxItem.tsx
@@ -216,7 +216,7 @@ function ListBoxFooterPlus({
         leftContent || (
           <PlusIcon
             size={16}
-            color={theme.colors['text-primary-accent'] as string}
+            color={(theme.colors?.['text-primary-accent'] ?? undefined) as string}
           >
             {children || 'Add'}
           </PlusIcon>
diff --git a/assets/design-system/src/components/LoadingSpinner.tsx b/assets/design-system/src/components/LoadingSpinner.tsx
index 965a68d474..6ea394d003 100644
--- a/assets/design-system/src/components/LoadingSpinner.tsx
+++ b/assets/design-system/src/components/LoadingSpinner.tsx
@@ -142,10 +142,12 @@ function CenteringWrapper({ children }: { children: ReactNode }) {
   const [windowHeight, setWindowHeight] = useState<number | null>(
     window.innerHeight
   )
-  const ref = useRef<HTMLDivElement>(undefined)
+  const ref = useRef<HTMLDivElement>(null)
 
   const onSizeChange = useCallback(() => {
-    const nextTop = ref.current.getBoundingClientRect().top
+    const nextTop = ref.current?.getBoundingClientRect().top
+
+    if (nextTop == null) return
 
     if (nextTop !== top) {
       setTop(nextTop)
diff --git a/assets/design-system/src/components/LoopingLogo.tsx b/assets/design-system/src/components/LoopingLogo.tsx
index 8eaae2e2c2..232bf5e74c 100644
--- a/assets/design-system/src/components/LoopingLogo.tsx
+++ b/assets/design-system/src/components/LoopingLogo.tsx
@@ -14,8 +14,10 @@ export type LoopingLogoProps = ComponentPropsWithRef<'div'> & {
   scale?: number
 }
 
-export const scaling = (scale: number): { transform: string } =>
-  scale ? { transform: `scale(${scale})` } : null
+export const scaling = (
+  scale?: number
+): { transform: string } | undefined =>
+  scale ? { transform: `scale(${scale})` } : undefined
 
 function LoopingLogo({
   ref,
diff --git a/assets/design-system/src/components/LoopingLogoAlternative.tsx b/assets/design-system/src/components/LoopingLogoAlternative.tsx
index 9a20e019a0..2d54d464bc 100644
--- a/assets/design-system/src/components/LoopingLogoAlternative.tsx
+++ b/assets/design-system/src/components/LoopingLogoAlternative.tsx
@@ -14,8 +14,10 @@ export type LoopingLogoAlternativeProps = ComponentPropsWithRef<'div'> & {
   scale?: number
 }
 
-export const scaling = (scale: number): { transform: string } =>
-  scale ? { transform: `scale(${scale})` } : null
+export const scaling = (
+  scale?: number
+): { transform: string } | undefined =>
+  scale ? { transform: `scale(${scale})` } : undefined
 
 const GradientBackground = styled.div<{ $scale?: number }>`
   @keyframes rotateGradient {
diff --git a/assets/design-system/src/components/Markdown.tsx b/assets/design-system/src/components/Markdown.tsx
index 2fc962e0e0..6d589b6bbf 100644
--- a/assets/design-system/src/components/Markdown.tsx
+++ b/assets/design-system/src/components/Markdown.tsx
@@ -25,7 +25,7 @@ type MarkdownProps = {
 export const markdownSanitizeSchema: SanitizeOptions = { ...defaultSchema }
 
 export function getLastStringChild(children: any, depth = 0): any {
-  let lastChild = null
+  let lastChild: string | null = null
 
   Children.forEach(children, (child) => {
     if (typeof child === 'string') {
@@ -300,8 +300,8 @@ function MarkdownLink({
   ...props
 }: {
   href?: string
-  gitUrl: string
-  mainBranch: string
+  gitUrl?: string
+  mainBranch?: string
 }) {
   // Convert local readme hrefs to full path on github
   if (gitUrl && href && !isExternalUrl(href)) {
diff --git a/assets/design-system/src/components/Modal.tsx b/assets/design-system/src/components/Modal.tsx
index 6bf9b1c1e2..de1d6d7799 100644
--- a/assets/design-system/src/components/Modal.tsx
+++ b/assets/design-system/src/components/Modal.tsx
@@ -165,8 +165,8 @@ function Modal({
       <ModalSC
         fillLevel={1}
         forwardedAs={asForm ? 'form' : undefined}
-        $width={sizeToWidth[size]}
-        $maxWidth={maxWidth}
+        $width={sizeToWidth[size] ?? 'auto'}
+        $maxWidth={maxWidth ?? 'auto'}
         {...(asForm ? formProps : {})}
       >
         <ModalContentSC
diff --git a/assets/design-system/src/components/PanZoomWrapper.tsx b/assets/design-system/src/components/PanZoomWrapper.tsx
index 88e208a802..0c750b21d0 100644
--- a/assets/design-system/src/components/PanZoomWrapper.tsx
+++ b/assets/design-system/src/components/PanZoomWrapper.tsx
@@ -45,7 +45,7 @@ export function PanZoomWrapper({
         Math.max(scale - e.deltaY * zoomSpeed, minZoom),
         maxZoom
       )
-      const { left, top } = containerRef.current.getBoundingClientRect()
+      const { left, top } = container.getBoundingClientRect()
       const mouseX = e.clientX - left
       const mouseY = e.clientY - top
       const scaleChange = newScale / scale
diff --git a/assets/design-system/src/components/PopoverCornerScale.tsx b/assets/design-system/src/components/PopoverCornerScale.tsx
index 9a3dc00335..724749dbbe 100644
--- a/assets/design-system/src/components/PopoverCornerScale.tsx
+++ b/assets/design-system/src/components/PopoverCornerScale.tsx
@@ -98,7 +98,7 @@ function PopoverCornerScale({
       {...portalProps}
     >
       <PopoverWrapper
-        $isOpen={isOpen}
+        $isOpen={!!isOpen}
         $placement={floating.placement}
         className="popoverWrapper"
         ref={floating.refs.setFloating}
diff --git a/assets/design-system/src/components/ProgressBar.tsx b/assets/design-system/src/components/ProgressBar.tsx
index 87cad026f3..5c59f2fdcc 100644
--- a/assets/design-system/src/components/ProgressBar.tsx
+++ b/assets/design-system/src/components/ProgressBar.tsx
@@ -121,9 +121,9 @@ export default function ProgressBar({
         top={0}
         bottom={0}
         backgroundColor={
-          progress >= 1 || complete ? completeColor : progressColor
+          (progress ?? 0) >= 1 || complete ? completeColor : progressColor
         }
-        right={`${(1 - progress) * 100}%`}
+        right={`${(1 - (progress ?? 0)) * 100}%`}
       />
     )
   }
diff --git a/assets/design-system/src/components/Radio.tsx b/assets/design-system/src/components/Radio.tsx
index 09527239e7..1bc682d5d0 100644
--- a/assets/design-system/src/components/Radio.tsx
+++ b/assets/design-system/src/components/Radio.tsx
@@ -9,6 +9,8 @@ import {
 } from 'react-aria'
 import styled from 'styled-components'
 
+import { type RadioGroupState } from 'react-stately'
+
 import { RadioContext } from './RadioGroup'
 
 const CheckedIcon = memo(({ small }: { small: boolean }) => {
@@ -140,17 +142,17 @@ function Radio({
   ...props
 }: RadioProps) {
   const [checked, setChecked] = useState(defaultChecked || checkedProp)
-  const state = useContext(RadioContext) || {
+  const state = (useContext(RadioContext) || {
     setSelectedValue: () => {},
     selectedValue: checkedProp || checked ? value : undefined,
-  }
+  }) as RadioGroupState
 
   useEffect(() => {
     setChecked(checkedProp)
   }, [checkedProp])
 
   const labelId = useId()
-  const inputRef = useRef<any>(undefined)
+  const inputRef = useRef<any>(null)
   const { isFocusVisible, focusProps } = useFocusRing()
   const { inputProps, isSelected, isDisabled } = useRadio(
     {
@@ -167,7 +169,7 @@ function Radio({
     inputRef
   )
 
-  const icon = isSelected ? <CheckedIcon small={small} /> : null
+  const icon = isSelected ? <CheckedIcon small={!!small} /> : null
 
   return (
     <HonorableLabelStyled
@@ -176,8 +178,8 @@ function Radio({
       ref={ref}
       className={classNames({ checked: isSelected })}
       $isFocusVisible={isFocusVisible}
-      $small={small}
-      $disabled={isDisabled}
+      $small={!!small}
+      $disabled={!!isDisabled}
       display="flex"
       marginBottom="0"
       {...props}
@@ -192,7 +194,7 @@ function Radio({
               onChange(e)
             }
             setChecked(!checked)
-            inputProps.onChange(e)
+            inputProps.onChange?.(e)
           }}
           ref={inputRef}
         />
diff --git a/assets/design-system/src/components/RadioGroup.tsx b/assets/design-system/src/components/RadioGroup.tsx
index dda5ac3aa1..de59354951 100644
--- a/assets/design-system/src/components/RadioGroup.tsx
+++ b/assets/design-system/src/components/RadioGroup.tsx
@@ -1,9 +1,9 @@
 import { type PropsWithChildren, createContext } from 'react'
 import { Div, type DivProps } from 'honorable'
 import { type AriaRadioGroupProps, useRadioGroup } from 'react-aria'
-import { useRadioGroupState } from 'react-stately'
+import { type RadioGroupState, useRadioGroupState } from 'react-stately'
 
-export const RadioContext = createContext(null)
+export const RadioContext = createContext<RadioGroupState | null>(null)
 
 type RadioGroupProps = AriaRadioGroupProps & PropsWithChildren<DivProps>
 
diff --git a/assets/design-system/src/components/ReactAriaPopover.tsx b/assets/design-system/src/components/ReactAriaPopover.tsx
index 3633594eb7..ea1e8114c9 100644
--- a/assets/design-system/src/components/ReactAriaPopover.tsx
+++ b/assets/design-system/src/components/ReactAriaPopover.tsx
@@ -10,7 +10,7 @@ type PopoverProps = {
 }
 
 function Popover({ ...props }: PopoverProps) {
-  const ref = useRef(undefined)
+  const ref = useRef(null)
   const { popoverRef = ref, isOpen, onClose, children } = props
 
   // Handle events that should cause the popup to close,
@@ -31,7 +31,7 @@ function Popover({ ...props }: PopoverProps) {
     <PopoverStyled
       key={isOpen ? 'open' : 'closed'}
       className="popover"
-      $isOpen={isOpen}
+      $isOpen={!!isOpen}
       {...overlayProps}
       {...(isOpen && {
         ref: popoverRef,
diff --git a/assets/design-system/src/components/SegmentedInput.tsx b/assets/design-system/src/components/SegmentedInput.tsx
index 7753c14453..12b7f22106 100644
--- a/assets/design-system/src/components/SegmentedInput.tsx
+++ b/assets/design-system/src/components/SegmentedInput.tsx
@@ -25,7 +25,7 @@ export type Segment = {
 
 export type SegmentedInputHandle = {
   clear: () => void
-  inputRef: React.RefObject<HTMLInputElement>
+  inputRef: React.RefObject<HTMLInputElement | null>
   setValue: (val: string) => void
 }
 
diff --git a/assets/design-system/src/components/Select.tsx b/assets/design-system/src/components/Select.tsx
index c9c0274c11..9c4e2c9247 100644
--- a/assets/design-system/src/components/Select.tsx
+++ b/assets/design-system/src/components/Select.tsx
@@ -181,7 +181,6 @@ const SelectButtonInner = styled.div<{
         marginLeft: theme.spacing.medium,
       },
       '.arrow': {
-        transition: 'transform 0.1s ease',
         display: 'flex',
         marginLeft: theme.spacing.medium,
         alignItems: 'center',
@@ -226,7 +225,7 @@ function SelectButton({
   return (
     <SelectButtonInner
       ref={ref}
-      $isOpen={isOpen}
+      $isOpen={!!isOpen}
       $size={size}
       $parentFillLevel={parentFillLevel}
       $transparent={transparent}
@@ -302,7 +301,7 @@ function Select({
 }: SelectProps) {
   const stateRef = useRef<BimodalSelectState<object> | null>(null)
   const [isOpenUncontrolled, setIsOpen] = useState(false)
-  const nextFocusedKeyRef = useRef<Key>(null)
+  const nextFocusedKeyRef = useRef<Key | null>(null)
 
   if (typeof isOpen !== 'boolean') {
     isOpen = isOpenUncontrolled
@@ -340,7 +339,7 @@ function Select({
   setNextFocusedKey({ nextFocusedKeyRef, state, stateRef })
 
   // Get props for the listbox element
-  const ref = useRef(undefined)
+  const ref = useRef<HTMLElement | null>(null)
   const { triggerProps, menuProps } = useSelect(selectStateProps, state, ref)
 
   label = label || ' '
diff --git a/assets/design-system/src/components/SelectComboShared.tsx b/assets/design-system/src/components/SelectComboShared.tsx
index 43c068182b..a1bc276668 100644
--- a/assets/design-system/src/components/SelectComboShared.tsx
+++ b/assets/design-system/src/components/SelectComboShared.tsx
@@ -21,7 +21,7 @@ type UseSelectComboStatePropsArgs<T extends TType> = Pick<
 > & {
   setIsOpen: (open: boolean) => void
   stateRef: RefObject<ListState<object> | null>
-  nextFocusedKeyRef: RefObject<Key>
+  nextFocusedKeyRef: RefObject<Key | null>
 }
 
 type UseSelectComboStatePropsReturn<T extends TType> = Pick<
@@ -87,7 +87,7 @@ function useSelectComboStateProps<T extends TType>({
           onFooterClick?.()
           if (stateRef.current) {
             nextFocusedKeyRef.current =
-              stateRef?.current?.collection?.getKeyBefore(FOOTER_KEY)
+              stateRef.current.collection.getKeyBefore(FOOTER_KEY) ?? null
           }
           break
         default:
@@ -106,9 +106,9 @@ const setNextFocusedKey = ({
   state,
   stateRef,
 }: {
-  nextFocusedKeyRef: RefObject<Key>
+  nextFocusedKeyRef: RefObject<Key | null>
   state: ListState<object>
-  stateRef: RefObject<ListState<object>>
+  stateRef: RefObject<ListState<object> | null>
 }) => {
   stateRef.current = state
 
diff --git a/assets/design-system/src/components/SelectItem.tsx b/assets/design-system/src/components/SelectItem.tsx
index 94aaa0d4c0..9c550d8c06 100644
--- a/assets/design-system/src/components/SelectItem.tsx
+++ b/assets/design-system/src/components/SelectItem.tsx
@@ -9,6 +9,8 @@ import {
 } from 'react'
 import styled from 'styled-components'
 
+import { type RadioGroupState } from 'react-stately'
+
 import { RadioContext } from './RadioGroup'
 
 type SelectItemWrapProps = {
@@ -59,8 +61,8 @@ function SelectItem({
   className,
   ...props
 }: SelectItemProps) {
-  const state = useContext(RadioContext)
-  const inputRef = useRef<any>(undefined)
+  const state = useContext(RadioContext) as RadioGroupState
+  const inputRef = useRef<any>(null)
   const { isFocusVisible, focusProps } = useFocusRing()
   const { inputProps, isSelected } = useRadio(
     {
diff --git a/assets/design-system/src/components/Slider.tsx b/assets/design-system/src/components/Slider.tsx
index 744416a90f..821785adcd 100644
--- a/assets/design-system/src/components/Slider.tsx
+++ b/assets/design-system/src/components/Slider.tsx
@@ -202,7 +202,7 @@ function Slider({
   return (
     <SliderWrap
       $percent={(state.getThumbPercent(0) || 0) * 100}
-      $size={size}
+      $size={size ?? '100%'}
       $thumbRadius={thumbRadius}
       $colorized={colorized}
     >
diff --git a/assets/design-system/src/components/Spinner.tsx b/assets/design-system/src/components/Spinner.tsx
index 1fff817e10..195468b853 100644
--- a/assets/design-system/src/components/Spinner.tsx
+++ b/assets/design-system/src/components/Spinner.tsx
@@ -40,7 +40,7 @@ const SpinnerSC = styled(
 `
 
 export function Spinner({
-  color,
+  color = '',
   size = 16,
   ...props
 }: { color?: string; size?: number } & ComponentPropsWithRef<'div'>) {
@@ -88,7 +88,7 @@ export function SpinnerAlt({
         cx={size / 2}
         cy={size / 2}
         r={radius}
-        stroke={colors[color] ?? colors['icon-info']}
+        stroke={(color ? colors[color] : undefined) ?? colors['icon-info']}
         strokeWidth={strokeWidth}
         fill="none"
         strokeDasharray={`${circumference * 0.33} ${circumference * 0.8}`}
diff --git a/assets/design-system/src/components/Stepper.tsx b/assets/design-system/src/components/Stepper.tsx
index cfaf6b8f12..f17372bc6a 100644
--- a/assets/design-system/src/components/Stepper.tsx
+++ b/assets/design-system/src/components/Stepper.tsx
@@ -79,7 +79,7 @@ function Stepper({
   forceCollapse = false,
   compact = false,
 }: StepperProps) {
-  const eltRef = useRef<HTMLDivElement>(undefined)
+  const eltRef = useRef<HTMLDivElement>(null)
   const mergedRef = mergeRefs(ref, eltRef)
   const [collapseTitles, setCollapseTitles] = useState(true)
 
@@ -90,7 +90,8 @@ function Stepper({
       return
     }
     setCollapseTitles(
-      forceCollapse || eltRef?.current?.clientWidth < collapseAtWidth
+      !!forceCollapse ||
+        (eltRef.current?.clientWidth ?? 0) < collapseAtWidth
     )
   }, [forceCollapse, eltRef, collapseAtWidth, vertical])
 
diff --git a/assets/design-system/src/components/SubTab.tsx b/assets/design-system/src/components/SubTab.tsx
index 921caf14aa..586beae7e1 100644
--- a/assets/design-system/src/components/SubTab.tsx
+++ b/assets/design-system/src/components/SubTab.tsx
@@ -91,8 +91,8 @@ function SubTab({
     <SubTabBase
       ref={ref}
       $parentFillLevel={parentFillLevel}
-      $active={active}
-      $disabled={disabled}
+      $active={!!active}
+      $disabled={!!disabled}
       $size={size}
       {...props}
     >
diff --git a/assets/design-system/src/components/Switch.tsx b/assets/design-system/src/components/Switch.tsx
index 8f33db8840..f2f10bfda0 100644
--- a/assets/design-system/src/components/Switch.tsx
+++ b/assets/design-system/src/components/Switch.tsx
@@ -152,7 +152,7 @@ export const useSwitch = ({
         $disabled: isDisabled,
         $checked: isSelected,
         $readOnly: isReadOnly,
-        $variant: variant,
+        $variant: variant ?? 'default',
       },
       state,
     }),
diff --git a/assets/design-system/src/components/Tab.tsx b/assets/design-system/src/components/Tab.tsx
index 23b1e85121..4f8dd72f9b 100644
--- a/assets/design-system/src/components/Tab.tsx
+++ b/assets/design-system/src/components/Tab.tsx
@@ -42,7 +42,9 @@ function Tab({
       userSelect="none"
       cursor="pointer"
       borderBottom={
-        vertical ? null : `1px solid ${active ? 'border-primary' : 'border'}`
+        vertical
+          ? undefined
+          : `1px solid ${active ? 'border-primary' : 'border'}`
       }
       borderRight={
         vertical
@@ -53,7 +55,7 @@ function Tab({
                   ? 'border-fill-two'
                   : 'border'
             }`
-          : null
+          : undefined
       }
       {...borderRadiuses}
       _focusVisible={{
@@ -70,7 +72,7 @@ function Tab({
         align="center"
         borderBottom={
           vertical
-            ? null
+            ? undefined
             : `${TAB_INDICATOR_THICKNESS - 1}px solid ${
                 active ? theme.colors['border-primary'] : 'transparent'
               }`
@@ -84,7 +86,7 @@ function Tab({
                     ? theme.colors['border-fill-two']
                     : 'transparent'
               }`
-            : null
+            : undefined
         }
         {...borderRadiuses}
         color={
diff --git a/assets/design-system/src/components/TabList.tsx b/assets/design-system/src/components/TabList.tsx
index c9ab38740f..f10861c047 100644
--- a/assets/design-system/src/components/TabList.tsx
+++ b/assets/design-system/src/components/TabList.tsx
@@ -91,13 +91,15 @@ function TabList({
   const state = useTabListState(finalStateProps)
 
   stateRef.current = {
-    updateTabPanel: () => {
-      console.warn("TabPanel didn't set stateRef.current.updateTabPanel")
-    },
     ...(stateRef.current || {}),
     state,
     stateProps: finalStateProps,
     tabProps: stateRef?.current?.tabProps || {},
+    updateTabPanel:
+      stateRef.current?.updateTabPanel ??
+      (() => {
+        console.warn("TabPanel didn't set stateRef.current.updateTabPanel")
+      }),
   }
   useEffect(() => {
     stateRef?.current?.updateTabPanel()
@@ -135,15 +137,17 @@ function TabList({
 
   return (
     <WrapWithIf
-      condition={scrollable}
+      condition={!!scrollable}
       wrapper={<ArrowScroll />}
     >
       <Flex
         {...tabListProps}
         {...props}
-        flexDirection={stateProps.orientation === 'vertical' ? 'column' : 'row'}
+        flexDirection={
+          stateProps?.orientation === 'vertical' ? 'column' : 'row'
+        }
         alignItems={
-          stateProps.orientation === 'vertical' ? 'flex-start' : 'flex-end'
+          stateProps?.orientation === 'vertical' ? 'flex-start' : 'flex-end'
         }
         css={{ ...(scrollable && { whiteSpace: 'nowrap' }) }}
         ref={mergedRef as any}
@@ -197,13 +201,16 @@ function TabRenderer({ item, state, stateProps, stateRef }: TabRendererProps) {
   const { tabProps: props } = useTab({ key: item.key }, state, ref)
 
   props['aria-controls'] =
-    props['aria-controls'] || props.id.replace('-tab-', '-tabpanel-')
+    props['aria-controls'] ||
+    (props.id ? props.id.replace('-tab-', '-tabpanel-') : undefined)
 
-  stateRef.current.tabProps = {
-    ...stateRef.current.tabProps,
-    ...{
-      [item.key]: { ...props },
-    },
+  if (stateRef.current) {
+    stateRef.current.tabProps = {
+      ...stateRef.current.tabProps,
+      ...{
+        [item.key]: { ...props },
+      },
+    }
   }
   const theme = useTheme()
 
diff --git a/assets/design-system/src/components/TabPanel.tsx b/assets/design-system/src/components/TabPanel.tsx
index 6879444d83..59a5c94535 100644
--- a/assets/design-system/src/components/TabPanel.tsx
+++ b/assets/design-system/src/components/TabPanel.tsx
@@ -79,12 +79,12 @@ function WrappedTabPanel({
   mode,
   ...props
 }: WrappedTabPanelProps) {
-  const ref = useRef(undefined)
+  const ref = useRef(null)
   let { tabPanelProps } = useTabPanel(stateProps, state, ref)
   const { visuallyHiddenProps } = useVisuallyHidden()
 
   if (mode === 'multipanel') {
-    const thisTabProps = tabProps[tabKey]
+    const thisTabProps = tabKey != null ? tabProps[tabKey] : undefined
 
     if (!thisTabProps) {
       console.warn(
@@ -92,8 +92,8 @@ function WrappedTabPanel({
       )
     }
     tabPanelProps = {
-      'aria-labelledby': thisTabProps.id,
-      id: thisTabProps['aria-controls'],
+      'aria-labelledby': thisTabProps?.id,
+      id: thisTabProps?.['aria-controls'],
       ...(state.selectedKey !== tabKey
         ? { ...visuallyHiddenProps, 'aria-hidden': true }
         : {}),
@@ -164,7 +164,7 @@ function TabPanel({
     return (
       <WrappedTabPanel
         mode={mode}
-        as={as}
+        as={as!}
         renderer={renderer}
         stateRef={stateRef}
         tabKey={tabKey}
@@ -179,8 +179,8 @@ function TabPanel({
 
   return (
     <TabPanelClone
-      tabRef={as.props?.ref}
-      cloneAs={as}
+      tabRef={as?.props?.ref}
+      cloneAs={as!}
     >
       {props.children}
     </TabPanelClone>
diff --git a/assets/design-system/src/components/TagMultiSelect.tsx b/assets/design-system/src/components/TagMultiSelect.tsx
index 4d329e2304..0a271c7f17 100644
--- a/assets/design-system/src/components/TagMultiSelect.tsx
+++ b/assets/design-system/src/components/TagMultiSelect.tsx
@@ -94,7 +94,7 @@ function TagMultiSelectUnstyled({
           defaultOpen={false}
           triggerButton={
             <MultiSelectMatchButtonContainer>
-              {matchOptions.find((el) => el.value === searchLogic).label}
+              {matchOptions.find((el) => el.value === searchLogic)?.label}
             </MultiSelectMatchButtonContainer>
           }
           {...selectProps}
diff --git a/assets/design-system/src/components/TextSwitch.tsx b/assets/design-system/src/components/TextSwitch.tsx
index a975e68c4f..41950ca392 100644
--- a/assets/design-system/src/components/TextSwitch.tsx
+++ b/assets/design-system/src/components/TextSwitch.tsx
@@ -17,7 +17,7 @@ import {
   useRadio,
   useRadioGroup,
 } from 'react-aria'
-import { useRadioGroupState } from 'react-stately'
+import { type RadioGroupState, useRadioGroupState } from 'react-stately'
 
 import { useSpring } from '@react-spring/web'
 import classNames from 'classnames'
@@ -79,7 +79,7 @@ const SwitchSC = styled.div<{ $size: TextSwitchSize }>(({ theme, $size }) => ({
   },
 }))
 
-export const TextSwitchContext = createContext(null)
+export const TextSwitchContext = createContext<RadioGroupState | null>(null)
 
 const SwitchHandleSC = styled(AnimatedDiv)<{
   $size: TextSwitchSize
@@ -128,17 +128,18 @@ function TextSwitch({
   )
 
   useLayoutEffect(() => {
-    selectedElt.current = switchRef?.current?.querySelector(
-      `[data-value="${value}"]`
-    )
+    selectedElt.current =
+      switchRef.current?.querySelector(`[data-value="${value}"]`) ?? null
 
     const parentLeft = switchRef.current?.getBoundingClientRect()?.left
     const selectedR = selectedElt.current?.getBoundingClientRect()
 
     setSelectedLeft(
-      !selectedR.left ? undefined : selectedR.left - parentLeft - 1
+      !selectedR?.left || parentLeft == null
+        ? undefined
+        : selectedR.left - parentLeft - 1
     )
-    setSelectedWidth(!selectedR?.width ? undefined : selectedR?.width)
+    setSelectedWidth(!selectedR?.width ? undefined : selectedR.width)
   }, [value])
   const stateProps: AriaRadioGroupProps = {
     name,
@@ -298,17 +299,17 @@ function TextSwitchOption({
   ...props
 }: TextSwitchOptionProps) {
   const [selected, setSelected] = useState(defaultSelected || selectedProp)
-  const state = useContext(TextSwitchContext) || {
+  const state = (useContext(TextSwitchContext) || {
     setSelectedValue: () => {},
     selectedValue: selectedProp || selected ? value : undefined,
-  }
+  }) as RadioGroupState
 
   useEffect(() => {
     setSelected(selectedProp)
   }, [selectedProp])
 
   const labelId = useId()
-  const inputRef = useRef<any>(undefined)
+  const inputRef = useRef<any>(null)
   const { focusProps } = useFocusRing()
   const { inputProps, isSelected, isDisabled } = useRadio(
     {
@@ -330,8 +331,8 @@ function TextSwitchOption({
       htmlFor={inputProps.id}
       id={labelId}
       className={classNames({ selected: isSelected })}
-      $size={size}
-      $disabled={isDisabled}
+      $size={size ?? 'small'}
+      $disabled={!!isDisabled}
       data-value={value}
       {...props}
     >
@@ -345,7 +346,7 @@ function TextSwitchOption({
               onChange(e)
             }
             setSelected(!selected)
-            inputProps.onChange(e)
+            inputProps.onChange?.(e)
           }}
           ref={inputRef}
         />
diff --git a/assets/design-system/src/components/Toast.tsx b/assets/design-system/src/components/Toast.tsx
index 6b03b62077..fe22f2b671 100644
--- a/assets/design-system/src/components/Toast.tsx
+++ b/assets/design-system/src/components/Toast.tsx
@@ -65,9 +65,11 @@ function Toast({
     if (closeTimeout === 'none') {
       return
     }
-    const timer = open ? setTimeout(() => close(), closeTimeout) : null
+    const timer = open ? setTimeout(() => close(), closeTimeout) : undefined
 
-    return () => clearTimeout(timer)
+    return () => {
+      if (timer != null) clearTimeout(timer)
+    }
   }, [close, closeTimeout, open])
 
   return (
@@ -111,7 +113,7 @@ function GraphQLToast({
       severity="danger"
       {...props}
     >
-      {error?.graphQLErrors[0]?.message}
+      {error?.graphQLErrors?.[0]?.message}
     </Toast>
   )
 }
diff --git a/assets/design-system/src/components/Tooltip.tsx b/assets/design-system/src/components/Tooltip.tsx
index 784fe0b829..f7c97a3da9 100644
--- a/assets/design-system/src/components/Tooltip.tsx
+++ b/assets/design-system/src/components/Tooltip.tsx
@@ -76,7 +76,7 @@ function Tooltip({
   label,
   placement = 'right',
   displayOn = 'hover',
-  manualOpen = null,
+  manualOpen,
   arrowProps = {},
   strategy = 'fixed',
   arrow: showArrow = true,
@@ -141,7 +141,7 @@ function Tooltip({
 
   // Preserve the consumer's ref
   const childrenRef = useMemo(
-    () => mergeRefs([refs.setReference, children.props?.ref]),
+    () => mergeRefs([refs.setReference, children?.props?.ref]),
     [refs.setReference, children]
   )
 
@@ -160,23 +160,26 @@ function Tooltip({
     left: 'right',
   }[finalPlacementSide]
 
-  const transformOrigin = {
-    top: 'top center',
-    right: 'center right',
-    bottom: 'bottom center',
-    left: 'center left',
-  }[staticSide]
+  const transformOrigin = staticSide
+    ? {
+        top: 'top center',
+        right: 'center right',
+        bottom: 'bottom center',
+        left: 'center left',
+      }[staticSide]
+    : undefined
   return (
     <>
-      {cloneElement(
-        children,
-        getReferenceProps(
-          mergeProps(passThroughProps, children.props, {
-            [TOOLTIP_TRIGGER_ATTRIBUTE]: 'true',
-            ref: childrenRef,
-          })
-        )
-      )}
+      {children &&
+        cloneElement(
+          children,
+          getReferenceProps(
+            mergeProps(passThroughProps, children.props, {
+              [TOOLTIP_TRIGGER_ATTRIBUTE]: 'true',
+              ref: childrenRef,
+            })
+          )
+        )}
       <WrapWithIf
         condition={portal}
         wrapper={
@@ -208,7 +211,7 @@ function Tooltip({
             {...getFloatingProps()}
           >
             {label}
-            {showArrow && (
+            {showArrow && staticSide && (
               <div
                 ref={arrowRef}
                 style={{
diff --git a/assets/design-system/src/components/TreeNavigation.tsx b/assets/design-system/src/components/TreeNavigation.tsx
index 7037a74c9a..f1b7a3c9b8 100644
--- a/assets/design-system/src/components/TreeNavigation.tsx
+++ b/assets/design-system/src/components/TreeNavigation.tsx
@@ -195,7 +195,7 @@ function NavLink({
             onClick={(e) => {
               e.stopPropagation()
               e.preventDefault()
-              onClickCaret()
+              onClickCaret?.()
             }}
           />
         )}
@@ -347,12 +347,12 @@ export function TreeNavEntry({
   return (
     <NavEntryContext.Provider value={navEntryContextVal}>
       <NavLink
-        isSubSection={hasSections}
+        isSubSection={!!hasSections}
         href={href}
         icon={icon}
         desktop={desktop}
-        isOpen={isOpen && hasSections}
-        active={active && !hasActiveDescendents}
+        isOpen={!!(isOpen && hasSections)}
+        active={!!(active && !hasActiveDescendents)}
         activeSecondary={hasActiveDescendents}
         onClick={(e: MouseEventHandler<HTMLAnchorElement>) => {
           onClick?.(e)
diff --git a/assets/design-system/src/components/ValidatedInput.tsx b/assets/design-system/src/components/ValidatedInput.tsx
index a83e10fd1b..180064d37c 100644
--- a/assets/design-system/src/components/ValidatedInput.tsx
+++ b/assets/design-system/src/components/ValidatedInput.tsx
@@ -27,12 +27,12 @@ function ValidatedInput({
   width,
   ...input
 }: ValidatedInputProps) {
-  const [error, setError] = useState(null)
+  const [error, setError] = useState<ValidationResponse>(null)
   const wrappedOnChange = useCallback(
     (e: any) => {
       if (onChange) onChange(e)
       setError(
-        validation && e.target?.value ? validation(e.target.value) : undefined
+        validation && e.target?.value ? validation(e.target.value) : null
       )
     },
     [onChange, validation]
diff --git a/assets/design-system/src/components/contexts/BreadcrumbsContext.tsx b/assets/design-system/src/components/contexts/BreadcrumbsContext.tsx
index d20f6c10b5..298b44002d 100644
--- a/assets/design-system/src/components/contexts/BreadcrumbsContext.tsx
+++ b/assets/design-system/src/components/contexts/BreadcrumbsContext.tsx
@@ -72,7 +72,7 @@ export function useBreadcrumbs() {
 
 export function useSetBreadcrumbs(breadcrumbs?: Breadcrumb[]) {
   const ctx = useContext(BreadcrumbsContext)
-  const { setBreadcrumbs } = ctx
+  const setBreadcrumbs = ctx?.setBreadcrumbs
 
   useEffect(() => {
     if (setBreadcrumbs && Array.isArray(breadcrumbs)) {
diff --git a/assets/design-system/src/components/table/Table.tsx b/assets/design-system/src/components/table/Table.tsx
index 35a7aece8c..28e4cf54e3 100644
--- a/assets/design-system/src/components/table/Table.tsx
+++ b/assets/design-system/src/components/table/Table.tsx
@@ -86,7 +86,7 @@ function Table({
   ...props
 }: TableProps) {
   const theme = useTheme()
-  const tableContainerRef = useRef<HTMLDivElement>(undefined)
+  const tableContainerRef = useRef<HTMLDivElement>(null)
 
   const [expanded, setExpanded] = useState({})
 
@@ -132,9 +132,10 @@ function Table({
   useEffect(() => setFixedGridTemplateColumns(null), [columns.length])
 
   const { rows: tableRows } = table.getRowModel()
-  const getItemKey = useCallback<
-    Parameters<typeof useVirtualizer>[0]['getItemKey']
-  >((i) => tableRows[i]?.id || i, [tableRows])
+  const getItemKey = useCallback(
+    (i: number) => tableRows[i]?.id || i,
+    [tableRows]
+  )
   const rowVirtualizer = useVirtualizer<HTMLDivElement, Element>({
     count: hasNextPage ? tableRows.length + 1 : tableRows.length,
     overscan: 10,
@@ -161,7 +162,7 @@ function Table({
   useEffect(() => {
     if ((lockColumnsOnScroll ?? virtualizeRows) && rowVirtualizer.isScrolling) {
       const thCells = tableContainerRef.current?.querySelectorAll('th')
-      const columns = Array.from(thCells)
+      const columns = Array.from(thCells ?? [])
         .map((th) => {
           const { width } = th.getBoundingClientRect()
           return `${width}px`
@@ -217,7 +218,7 @@ function Table({
       hasNextPage &&
       !isFetchingNextPage
     ) {
-      fetchNextPage()
+      fetchNextPage?.()
     }
   }, [
     hasNextPage,
@@ -241,7 +242,7 @@ function Table({
           onScrollCapture={onScrollCapture}
           $fillLevel={fillLevel}
           $flush={flush}
-          css={props}
+          css={props as any}
         >
           <T $gridTemplateColumns={gridTemplateColumns}>
             <Thead>
@@ -373,6 +374,7 @@ function Table({
                               : undefined
                           }
                           onClick={(e) => {
+                            if (!tableRow) return
                             if (
                               !getRowIsClickable ||
                               !!getRowIsClickable(tableRow)
@@ -385,9 +387,10 @@ function Table({
                           $selectable={tableRow?.getCanSelect() ?? false}
                           $selected={tableRow?.getIsSelected() ?? false}
                           $clickable={
-                            !!getRowIsClickable
+                            !!tableRow &&
+                            (!!getRowIsClickable
                               ? getRowIsClickable(tableRow)
-                              : !!onRowClick || !!getRowLink
+                              : !!onRowClick || !!getRowLink)
                           }
                         >
                           {isNil(tableRow) && isLoaderRow ? (
@@ -424,7 +427,7 @@ function Table({
                                     cell.column?.columnDef?.meta?.highlight
                                   }
                                   $truncateColumn={
-                                    cell.column?.columnDef?.meta?.truncate
+                                    !!cell.column?.columnDef?.meta?.truncate
                                   }
                                   $center={cell.column?.columnDef?.meta?.center}
                                   $right={cell.column?.columnDef?.meta?.right}
@@ -515,7 +518,7 @@ const TableWrapSC = styled.div<{
 const TableSC = styled.div<{
   $flush?: TableProps['flush']
   $fillLevel?: TableProps['fillLevel']
-}>(({ theme, $flush, $fillLevel }) => ({
+}>(({ theme, $flush, $fillLevel = 0 }) => ({
   backgroundColor: theme.colors[tableFillLevelToBg[$fillLevel]],
   border: $flush ? 'none' : theme.borders[tableFillLevelToBorder[$fillLevel]],
   borderRadius: $flush
diff --git a/assets/design-system/src/components/table/Th.tsx b/assets/design-system/src/components/table/Th.tsx
index 6880ce91cb..246a04cd5d 100644
--- a/assets/design-system/src/components/table/Th.tsx
+++ b/assets/design-system/src/components/table/Th.tsx
@@ -27,7 +27,7 @@ export const Th = styled.th<{
       alignItems: 'center',
       display: hideHeader ? 'none' : 'flex',
       position: 'relative',
-      backgroundColor: theme.colors[tableHeaderColor(fillLevel, highlight)],
+      backgroundColor: theme.colors[tableHeaderColor(fillLevel, !!highlight)],
       zIndex: 4,
       borderBottom: highlight
         ? undefined
diff --git a/assets/design-system/src/components/table/hooks.ts b/assets/design-system/src/components/table/hooks.ts
index 1ed7bb5798..64f76a2d3e 100644
--- a/assets/design-system/src/components/table/hooks.ts
+++ b/assets/design-system/src/components/table/hooks.ts
@@ -25,7 +25,7 @@ export function useIsScrolling(
 
       const scrollHandler = () => {
         setIsScrolling(true)
-        window.clearTimeout(timeout.current)
+        window.clearTimeout(timeout.current ?? undefined)
         timeout.current = window.setTimeout(() => {
           setIsScrolling(false)
         }, restDelay)
@@ -47,7 +47,7 @@ export function useOnVirtualSliceChange({
 }: {
   virtualRows: VirtualItem[]
   virtualizeRows: boolean
-  onVirtualSliceChange: (slice: VirtualSlice) => void
+  onVirtualSliceChange?: (slice: VirtualSlice) => void
 }) {
   const sliceStartRow = virtualRows[0]
   const sliceEndRow: VirtualItem = virtualRows[virtualRows.length - 1]
diff --git a/assets/design-system/src/components/wizard/Navigation.tsx b/assets/design-system/src/components/wizard/Navigation.tsx
index 4ac0d4fbc7..e20d5cfffc 100644
--- a/assets/design-system/src/components/wizard/Navigation.tsx
+++ b/assets/design-system/src/components/wizard/Navigation.tsx
@@ -42,8 +42,9 @@ function NavigationUnstyled<T = unknown>({
   tooltip,
   ...props
 }: NavigationProps<T>): ReactElement<NavigationProps<T>> {
-  const { completed, setCompleted, limit } =
-    useContext<ContextProps<T>>(WizardContext)
+  const { completed, setCompleted, limit } = useContext(
+    WizardContext
+  ) as ContextProps<T>
   const {
     setCompleted: setStepCompleted,
     valid,
diff --git a/assets/design-system/src/components/wizard/Picker.tsx b/assets/design-system/src/components/wizard/Picker.tsx
index cad0393ba0..12249c3688 100644
--- a/assets/design-system/src/components/wizard/Picker.tsx
+++ b/assets/design-system/src/components/wizard/Picker.tsx
@@ -57,10 +57,10 @@ type PickerProps = {
 }
 
 function PickerUnstyled({ items, ...props }: PickerProps): JSX.Element {
-  const { limit } = useContext(WizardContext)
+  const { limit } = useContext(WizardContext)!
   const size = useWindowSize()
   const { onSelect, selected, selectedCount } = usePicker()
-  const [search, setSearch] = useState<string>(undefined)
+  const [search, setSearch] = useState<string | undefined>(undefined)
   const [scrollable, setScrollable] = useState(false)
   const scrollRef = createRef<HTMLDivElement>()
   const isScrollbarVisible = (el: HTMLDivElement) =>
@@ -68,7 +68,7 @@ function PickerUnstyled({ items, ...props }: PickerProps): JSX.Element {
   const filtered = useMemo(
     () =>
       items.filter((item) =>
-        search ? item.label.toLowerCase().includes(search) : true
+        search ? item.label?.toLowerCase().includes(search) : true
       ),
     [items, search]
   )
@@ -130,7 +130,7 @@ function PickerUnstyled({ items, ...props }: PickerProps): JSX.Element {
           {filtered.map((item) => (
             <RepositoryChip
               key={item.key}
-              label={item.label}
+              label={item.label ?? ''}
               imageUrl={item.imageUrl}
               icon={item.Icon && <item.Icon />}
               onClick={() => select(item)}
@@ -145,7 +145,7 @@ function PickerUnstyled({ items, ...props }: PickerProps): JSX.Element {
           ))}
         </div>
       )}
-      {filtered.length === 0 && search?.length > 0 && (
+      {filtered.length === 0 && (search?.length ?? 0) > 0 && (
         <div className="empty">
           <span className="empty-message">
             No applications found for &quot;{search}&quot;.
diff --git a/assets/design-system/src/components/wizard/Stepper.tsx b/assets/design-system/src/components/wizard/Stepper.tsx
index cdd0d7ed38..a005a70a7f 100644
--- a/assets/design-system/src/components/wizard/Stepper.tsx
+++ b/assets/design-system/src/components/wizard/Stepper.tsx
@@ -30,7 +30,7 @@ const toStepperSteps = (items: Array<StepConfig>): StepperSteps =>
   })
 
 function ContextAwareStepper(): JSX.Element {
-  const { steps: wizardSteps, limit } = useContext(WizardContext)
+  const { steps: wizardSteps, limit } = useContext(WizardContext)!
   const { isFirst } = useNavigation()
   const { active } = useActive()
   const { selectedCount } = usePicker()
diff --git a/assets/design-system/src/components/wizard/Wizard.tsx b/assets/design-system/src/components/wizard/Wizard.tsx
index b6c998dd6a..10cf14538b 100644
--- a/assets/design-system/src/components/wizard/Wizard.tsx
+++ b/assets/design-system/src/components/wizard/Wizard.tsx
@@ -5,7 +5,6 @@ import {
   type ReactElement,
   type Ref,
   type RefObject,
-  useCallback,
   useContext,
   useEffect,
   useImperativeHandle,
@@ -100,12 +99,12 @@ function WizardUnstyled({
   children,
   ...props
 }: WizardProps): ReactElement<WizardProps> {
-  const { steps, setSteps, completed } = useContext(WizardContext)
+  const { steps, setSteps, completed } = useContext(WizardContext)!
   const { active } = useActive()
   const { isFirst, onReset } = useNavigation()
   const { selected } = usePicker()
-  const { stepper, navigation } = children
-  const hasHeader = useCallback(() => stepper || onClose, [stepper, onClose])
+  const { stepper, navigation } = children ?? {}
+  const hasHeader = !!(stepper || onClose)
 
   useImperativeHandle(onResetRef, () => ({ onReset: () => onReset() }), [
     onReset,
@@ -133,7 +132,7 @@ function WizardUnstyled({
 
       const arr = steps.filter((step) => !step.isDependency)
 
-      arr.splice(1, 0, ...dependencySteps)
+      arr.splice(1, 0, ...(dependencySteps ?? []))
 
       return arr
     })
diff --git a/assets/design-system/src/components/wizard/context.ts b/assets/design-system/src/components/wizard/context.ts
index 9102dd8715..e5f97f3fb2 100644
--- a/assets/design-system/src/components/wizard/context.ts
+++ b/assets/design-system/src/components/wizard/context.ts
@@ -38,7 +38,8 @@ type StepConfig<T = unknown> = {
   dependencyOf?: Set<string>
 }
 
-const createWizardContext = <T = any>() => createContext<ContextProps<T>>(null)
+const createWizardContext = <T = any>() =>
+  createContext<ContextProps<T> | null>(null)
 const WizardContext = createWizardContext()
 
 export type { ContextProps, StepConfig }
diff --git a/assets/design-system/src/components/wizard/hooks.ts b/assets/design-system/src/components/wizard/hooks.ts
index 2115aedeae..95049a398c 100644
--- a/assets/design-system/src/components/wizard/hooks.ts
+++ b/assets/design-system/src/components/wizard/hooks.ts
@@ -4,13 +4,14 @@ import { isEmpty, isEqual } from 'lodash-es'
 import { type ContextProps, type StepConfig, WizardContext } from './context'
 
 const useActive = <T = unknown>() => {
+  const ctx = useContext(WizardContext) as ContextProps<T>
   const {
     steps,
     setSteps,
     active: activeIdx,
-  } = useContext<ContextProps<T>>(WizardContext)
+  } = ctx
   const active: StepConfig<T> = useMemo<StepConfig<T>>(
-    () => steps.at(activeIdx),
+    () => steps.at(activeIdx)!,
     [activeIdx, steps]
   )
   const valid = useMemo(() => active.isDefault || active.isValid, [active])
@@ -24,7 +25,7 @@ const useActive = <T = unknown>() => {
       setSteps((steps) => {
         const active = steps.at(activeIdx)
 
-        if (valid === active.isValid) {
+        if (!active || valid === active.isValid) {
           return steps
         }
 
@@ -44,7 +45,7 @@ const useActive = <T = unknown>() => {
       setSteps((steps) => {
         const active = steps.at(activeIdx)
 
-        if (completed === active.isCompleted) {
+        if (!active || completed === active.isCompleted) {
           return steps
         }
 
@@ -64,7 +65,7 @@ const useActive = <T = unknown>() => {
       setSteps((steps) => {
         const active = steps.at(activeIdx)
 
-        if (isEmpty(data) || isEqual(data, active.data)) {
+        if (!active || isEmpty(data) || isEqual(data, active.data)) {
           return steps
         }
 
@@ -90,31 +91,34 @@ const useActive = <T = unknown>() => {
 }
 
 const useNavigation = () => {
-  const { steps, setSteps, active, setActive, setCompleted } =
-    useContext(WizardContext)
+  const { steps, setSteps, active, setActive, setCompleted } = useContext(
+    WizardContext
+  ) as ContextProps
 
   const onNext = useCallback(() => {
     const currentStep = steps.at(active)
+    if (!currentStep) return -1
     const idx = steps.findIndex((s) => s.key === currentStep.key)
     let nextIdx = idx + 1
 
     if (idx < 0) return -1
     if (idx === steps.length - 1) return idx
 
-    while (steps.at(nextIdx).isPlaceholder) nextIdx++
+    while (steps.at(nextIdx)?.isPlaceholder) nextIdx++
 
     setActive(nextIdx)
   }, [steps, active, setActive])
 
   const onBack = useCallback(() => {
     const currentStep = steps.at(active)
+    if (!currentStep) return -1
     const idx = steps.findIndex((s) => s.key === currentStep.key)
     let prevIdx = idx - 1
 
     if (idx < 0) return -1
     if (idx === 0) return idx
 
-    while (steps.at(prevIdx).isPlaceholder) prevIdx--
+    while (steps.at(prevIdx)?.isPlaceholder) prevIdx--
 
     setActive(prevIdx)
   }, [steps, active, setActive])
@@ -159,7 +163,7 @@ const useNavigation = () => {
 }
 
 const usePicker = () => {
-  const { steps, setSteps } = useContext(WizardContext)
+  const { steps, setSteps } = useContext(WizardContext) as ContextProps
 
   const onSelect = useCallback(
     (elem: StepConfig) => {
@@ -203,7 +207,7 @@ const usePicker = () => {
 }
 
 const useStepper = <T = unknown>() => {
-  const { steps } = useContext<ContextProps<T>>(WizardContext)
+  const { steps } = useContext(WizardContext) as ContextProps<T>
   const selected = useMemo(
     () => steps.filter((step) => !step.isDefault && !step.isPlaceholder),
     [steps]
diff --git a/assets/design-system/src/hooks/useRefResizeObserver.tsx b/assets/design-system/src/hooks/useRefResizeObserver.tsx
index 8cdd3b56c6..101d275743 100644
--- a/assets/design-system/src/hooks/useRefResizeObserver.tsx
+++ b/assets/design-system/src/hooks/useRefResizeObserver.tsx
@@ -1,7 +1,7 @@
 import { type RefCallback, type RefObject, useCallback, useRef } from 'react'
 
 export function useRefResizeObserver<T extends HTMLElement>(
-  ref: RefObject<T>,
+  ref: RefObject<T | null>,
   callback: (entry: ResizeObserverEntry, observer: ResizeObserver) => void,
   options: ResizeObserverOptions = {}
 ) {
diff --git a/assets/design-system/src/hooks/useResizeObserver.ts b/assets/design-system/src/hooks/useResizeObserver.ts
index 65685bcfb5..59eaefe4b8 100644
--- a/assets/design-system/src/hooks/useResizeObserver.ts
+++ b/assets/design-system/src/hooks/useResizeObserver.ts
@@ -26,8 +26,8 @@ const useResizeObserver = (
       return
     }
 
-    let RO = new ResizeObserver((entries: ResizeObserverEntry[]) =>
-      handleResize(entries)
+    let RO: ResizeObserver | null = new ResizeObserver(
+      (entries: ResizeObserverEntry[]) => handleResize(entries)
     )
 
     RO.observe(ref.current)
diff --git a/assets/design-system/src/markdoc/components/Fence.tsx b/assets/design-system/src/markdoc/components/Fence.tsx
index acefabb405..c7dfbc6882 100644
--- a/assets/design-system/src/markdoc/components/Fence.tsx
+++ b/assets/design-system/src/markdoc/components/Fence.tsx
@@ -11,8 +11,8 @@ export function toCodeString({
   children,
 }: {
   process: boolean
-  content: string
-  children: RenderableTreeNode[] | RenderableTreeNode
+  content?: string
+  children?: RenderableTreeNode[] | RenderableTreeNode
 }): string {
   return process
     ? typeof children === 'string'
diff --git a/assets/design-system/src/markdoc/runtimeSchema.ts b/assets/design-system/src/markdoc/runtimeSchema.ts
index 096fe809a1..0ef26cad9d 100644
--- a/assets/design-system/src/markdoc/runtimeSchema.ts
+++ b/assets/design-system/src/markdoc/runtimeSchema.ts
@@ -7,13 +7,17 @@ import { type Config } from '@markdoc/markdoc'
 
 function displayName(name: string) {
   // Pascal case
-  return name
-    .match(/[a-z]+/gi)
-    .map((word) => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase())
-    .join('')
+  return (
+    name
+      .match(/[a-z]+/gi)
+      ?.map(
+        (word) => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
+      )
+      .join('') ?? name
+  )
 }
 
-function transformRecord(config: Record<string, any>) {
+function transformRecord(config?: Record<string, any>) {
   const output: Record<string, any> = {}
   const components: Record<string, any> = {}
 
diff --git a/assets/design-system/src/stories/ButtonGroup.stories.tsx b/assets/design-system/src/stories/ButtonGroup.stories.tsx
index 136e7038d2..344c3d1399 100644
--- a/assets/design-system/src/stories/ButtonGroup.stories.tsx
+++ b/assets/design-system/src/stories/ButtonGroup.stories.tsx
@@ -1,5 +1,5 @@
 import { Div, Flex, H1 } from 'honorable'
-import { useRef, useState } from 'react'
+import { type ComponentProps, useRef, useState } from 'react'
 
 import { type Key } from '@react-types/shared'
 
@@ -46,7 +46,9 @@ const tabs = {
 }
 
 function TemplateBasic(args: any) {
-  const tabStateRef = useRef(undefined)
+  const tabStateRef = useRef(null) as unknown as ComponentProps<
+    typeof TabList
+  >['stateRef']
   const [selectedKey, setSelectedKey] = useState<Key>('1')
   const orientation = 'horizontal'
   const tabListStateProps: TabListStateProps = {
diff --git a/assets/design-system/src/stories/Card.stories.tsx b/assets/design-system/src/stories/Card.stories.tsx
index 005b1104e3..ead31c16ec 100644
--- a/assets/design-system/src/stories/Card.stories.tsx
+++ b/assets/design-system/src/stories/Card.stories.tsx
@@ -10,7 +10,6 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
   title: 'Card',
-  component: null,
   argTypes: {
     headerSize: {
       options: ['medium', 'large'],
diff --git a/assets/design-system/src/stories/Chip.stories.tsx b/assets/design-system/src/stories/Chip.stories.tsx
index 5f02a8dde4..6c5ab10ec0 100644
--- a/assets/design-system/src/stories/Chip.stories.tsx
+++ b/assets/design-system/src/stories/Chip.stories.tsx
@@ -32,11 +32,9 @@ const meta = {
 export default meta
 type Story = StoryObj<any>
 
-const sizes: ComponentProps<typeof Chip>['size'][] = [
-  'small',
-  'medium',
-  'large',
-]
+const sizes = ['small', 'medium', 'large'] as const satisfies readonly NonNullable<
+  ComponentProps<typeof Chip>['size']
+>[]
 
 const severities = SEVERITIES
 
diff --git a/assets/design-system/src/stories/ClusterTagsTemplate.tsx b/assets/design-system/src/stories/ClusterTagsTemplate.tsx
index f012359c01..933a459858 100644
--- a/assets/design-system/src/stories/ClusterTagsTemplate.tsx
+++ b/assets/design-system/src/stories/ClusterTagsTemplate.tsx
@@ -156,10 +156,9 @@ export function ClusterTagsTemplate({
             }}
             maxHeight={232}
             allowsEmptyCollection
-            startIcon={<TagIcon />}
+            startIcon={withTitleContent ? null : <TagIcon />}
             {...(withTitleContent
               ? {
-                  startIcon: null,
                   titleContent: (
                     <>
                       <TagIcon marginRight="small" />
diff --git a/assets/design-system/src/stories/ComboBox.stories.tsx b/assets/design-system/src/stories/ComboBox.stories.tsx
index 146bd7b21a..bd78a79c08 100644
--- a/assets/design-system/src/stories/ComboBox.stories.tsx
+++ b/assets/design-system/src/stories/ComboBox.stories.tsx
@@ -121,7 +121,7 @@ const items: Item[] = [
     key: 'sushi',
     label: 'Sushi',
     description: 'With ham and cheese',
-    chips: null,
+    chips: undefined,
     version: '0.2.26',
   },
   {
@@ -391,7 +391,7 @@ function TagsTemplate({
     setInputValue(value)
   }
 
-  let newKey = inputValue
+  let newKey: string | null = inputValue
     .toLowerCase()
     .replaceAll(/\s+/g, '-')
     .replaceAll(/[^a-z-]/g, '')
@@ -424,7 +424,9 @@ function TagsTemplate({
             inputValue={inputValue}
             onSelectionChange={onSelectionChange}
             onFooterClick={() => {
-              setSelectedKeys(new Set([...selectedKeys, newKey]))
+              if (newKey) {
+                setSelectedKeys(new Set([...selectedKeys, newKey]))
+              }
               setInputValue('')
               setIsOpen(false)
             }}
diff --git a/assets/design-system/src/stories/Icons.stories.tsx b/assets/design-system/src/stories/Icons.stories.tsx
index 0819af7555..e846c72002 100644
--- a/assets/design-system/src/stories/Icons.stories.tsx
+++ b/assets/design-system/src/stories/Icons.stories.tsx
@@ -65,10 +65,10 @@ const AppIcon = styled.div<{ $backgroundColor: string }>(
     width: theme.spacing.xxxlarge,
     hyphens: 'none',
     wordBreak: 'break-all',
-    fontSize: '0.75rem',
     minWidth: '8em',
     textAlign: 'center',
     ...theme.partials.text.caption,
+    fontSize: '0.75rem',
     backgroundColor: $backgroundColor,
   })
 )
diff --git a/assets/design-system/src/stories/ListBox.stories.tsx b/assets/design-system/src/stories/ListBox.stories.tsx
index f3fd1df3c2..55b4c54770 100644
--- a/assets/design-system/src/stories/ListBox.stories.tsx
+++ b/assets/design-system/src/stories/ListBox.stories.tsx
@@ -102,7 +102,7 @@ const items = [
     key: 'sushi',
     label: 'Sushi',
     description: 'With ham and cheese',
-    chips: null,
+    chips: [],
     version: '0.2.26',
   },
   {
@@ -261,9 +261,9 @@ function Template() {
             setSelectedKey(key)
           }}
           footer={
-            shownLimit < items.length && (
+            shownLimit < items.length ? (
               <ListBoxFooterPlus>View more</ListBoxFooterPlus>
-            )
+            ) : undefined
           }
           onFooterClick={() => {
             setShownLimit(shownLimit + shownStep)
diff --git a/assets/design-system/src/stories/NavigationContextStub.tsx b/assets/design-system/src/stories/NavigationContextStub.tsx
index 78a4a1a302..9c9dd6b197 100644
--- a/assets/design-system/src/stories/NavigationContextStub.tsx
+++ b/assets/design-system/src/stories/NavigationContextStub.tsx
@@ -31,7 +31,9 @@ export function NavContextProviderStub({ children }: { children: ReactNode }) {
 
   const value = useMemo(
     () => ({
-      useNavigate: () => setCurrentPath,
+      useNavigate: () => (location?: string) => {
+        setCurrentPath(location ?? null)
+      },
       usePathname: () => currentPath,
       Link,
     }),
diff --git a/assets/design-system/src/stories/Radio.stories.tsx b/assets/design-system/src/stories/Radio.stories.tsx
index e2e0aff936..2ae82dce3c 100644
--- a/assets/design-system/src/stories/Radio.stories.tsx
+++ b/assets/design-system/src/stories/Radio.stories.tsx
@@ -37,7 +37,9 @@ const H1 = styled.h1(({ theme }) => ({
 }))
 
 function Template(args: any) {
-  const [selectedValueRG, setSelectedValueRG] = useState(undefined)
+  const [selectedValueRG, setSelectedValueRG] = useState<string | undefined>(
+    undefined
+  )
   const theme = useTheme()
 
   return (
@@ -60,7 +62,7 @@ function Template(args: any) {
       <Button
         marginTop={theme.spacing.medium}
         onClick={() => {
-          setSelectedValueRG(null)
+          setSelectedValueRG(undefined)
         }}
       >
         Reset
diff --git a/assets/design-system/src/stories/Select.stories.tsx b/assets/design-system/src/stories/Select.stories.tsx
index 488b94e1bf..9f34e484d8 100644
--- a/assets/design-system/src/stories/Select.stories.tsx
+++ b/assets/design-system/src/stories/Select.stories.tsx
@@ -123,7 +123,7 @@ const items = [
     key: 'sushi',
     label: 'Sushi',
     description: 'With ham and cheese',
-    chips: null,
+    chips: [],
     version: '0.2.26',
   },
   {
@@ -226,7 +226,7 @@ function Template({ onFillLevel }: { onFillLevel: any }) {
 
   useTestKeyCapture()
 
-  const [selectedKey, setSelectedKey] = useState<Key>()
+  const [selectedKey, setSelectedKey] = useState<Key | null>(null)
   const shownStep = 4
   const [shownLimit, setShownLimit] = useState<number>(shownStep)
 
@@ -331,7 +331,9 @@ function Template({ onFillLevel }: { onFillLevel: any }) {
           }}
           defaultOpen={false}
           leftContent={<SearchIcon />}
-          rightContent={<ListBoxItemChipList chips={curItem?.chips} />}
+          rightContent={
+            <ListBoxItemChipList chips={curItem?.chips ?? []} />
+          }
           dropdownFooterFixed={
             <ListBoxFooterPlus onClick={createNewHandler}>
               Create new
@@ -397,18 +399,18 @@ function Template({ onFillLevel }: { onFillLevel: any }) {
               if (!open) setShownLimit(shownStep)
             }}
             rightContent={
-              curItem && (
+              curItem ? (
                 <ListBoxItemChipList
                   maxVisible={0}
                   showExtra
                   chips={curItem.chips}
                 />
-              )
+              ) : undefined
             }
             dropdownFooter={
-              shownLimit < items.length && (
+              shownLimit < items.length ? (
                 <ListBoxFooterPlus>View more</ListBoxFooterPlus>
-              )
+              ) : undefined
             }
           >
             {items.slice(0, shownLimit).map(({ key, chips, version }) => (
@@ -444,18 +446,18 @@ function Template({ onFillLevel }: { onFillLevel: any }) {
               if (!open) setShownLimit(shownStep)
             }}
             rightContent={
-              curItem && (
+              curItem ? (
                 <ListBoxItemChipList
                   maxVisible={0}
                   showExtra
                   chips={curItem.chips}
                 />
-              )
+              ) : undefined
             }
             dropdownFooter={
-              shownLimit < items.length && (
+              shownLimit < items.length ? (
                 <ListBoxFooterPlus>View more</ListBoxFooterPlus>
-              )
+              ) : undefined
             }
           >
             {items.slice(0, shownLimit).map(({ key, chips, version }) => (
@@ -523,7 +525,9 @@ function Template({ onFillLevel }: { onFillLevel: any }) {
           }}
           defaultOpen={false}
           leftContent={<SearchIcon />}
-          rightContent={<ListBoxItemChipList chips={curItem?.chips} />}
+          rightContent={
+            <ListBoxItemChipList chips={curItem?.chips ?? []} />
+          }
           dropdownFooterFixed={
             <ListBoxFooterPlus onClick={createNewHandler}>
               Create new
@@ -590,9 +594,9 @@ function Template({ onFillLevel }: { onFillLevel: any }) {
               if (!open) setShownLimit(shownStep)
             }}
             dropdownFooter={
-              shownLimit < items.length && (
+              shownLimit < items.length ? (
                 <ListBoxFooterPlus>View more</ListBoxFooterPlus>
-              )
+              ) : undefined
             }
           >
             {items.slice(0, shownLimit).map(({ key, chips, version }) => (
@@ -629,18 +633,18 @@ function Template({ onFillLevel }: { onFillLevel: any }) {
               if (!open) setShownLimit(shownStep)
             }}
             rightContent={
-              curItem && (
+              curItem ? (
                 <ListBoxItemChipList
                   maxVisible={0}
                   showExtra
                   chips={curItem.chips}
                 />
-              )
+              ) : undefined
             }
             dropdownFooter={
-              shownLimit < items.length && (
+              shownLimit < items.length ? (
                 <ListBoxFooterPlus>View more</ListBoxFooterPlus>
-              )
+              ) : undefined
             }
           >
             {items.slice(0, shownLimit).map(({ key, chips, version }) => (
diff --git a/assets/design-system/src/stories/TabList.stories.tsx b/assets/design-system/src/stories/TabList.stories.tsx
index cc5654ef96..424fa091a8 100644
--- a/assets/design-system/src/stories/TabList.stories.tsx
+++ b/assets/design-system/src/stories/TabList.stories.tsx
@@ -1,5 +1,5 @@
 import { Button, Div, Flex, H1 } from 'honorable'
-import { useRef, useState } from 'react'
+import { type ComponentProps, useRef, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
 
 import { type Key } from '@react-types/shared'
@@ -108,7 +108,9 @@ const moreTabs = {
 }
 
 function TemplateBasic(args: any) {
-  const tabStateRef = useRef(undefined)
+  const tabStateRef = useRef(null) as unknown as ComponentProps<
+    typeof TabList
+  >['stateRef']
   const [selectedKey, setSelectedKey] = useState<Key>('lions')
   const orientation = args.orientation || 'horizontal'
   const tabListStateProps: TabListStateProps = {
@@ -229,7 +231,9 @@ function MyCustomTab2({ selectedKey, ...props }: any) {
 }
 
 function TemplateComplex() {
-  const tabStateRef = useRef(undefined)
+  const tabStateRef = useRef(null) as unknown as ComponentProps<
+    typeof TabList
+  >['stateRef']
   const [selectedKey, setSelectedKey] = useState<Key>('lions')
   const orientation = 'vertical'
   const tabListStateProps: TabListStateProps = {
diff --git a/assets/design-system/src/stories/Table.stories.tsx b/assets/design-system/src/stories/Table.stories.tsx
index 346ac571f1..7c4e2b0a6a 100644
--- a/assets/design-system/src/stories/Table.stories.tsx
+++ b/assets/design-system/src/stories/Table.stories.tsx
@@ -225,10 +225,13 @@ function PagedTemplate({ data, pageSize, ...args }: any) {
     [data, endIndex]
   )
   const hasNextPage = pagedData.length < data.length
-  const [virtualSlice, setVirtualSlice] = useState(null)
+  const [virtualSlice, setVirtualSlice] = useState<{
+    start: { index: number } | undefined
+    end: { index: number } | undefined
+  } | null>(null)
 
   const onVirtualSliceChange = useCallback<
-    ComponentProps<typeof Table>['onVirtualSliceChange']
+    NonNullable<ComponentProps<typeof Table>['onVirtualSliceChange']>
   >((vSlice) => {
     setVirtualSlice(vSlice)
   }, [])
@@ -271,9 +274,9 @@ function PagedTemplate({ data, pageSize, ...args }: any) {
       />
       {virtualSlice && (
         <p style={{ ...theme.partials.text.body2 }}>
-          Virtual slice start index: {virtualSlice.start.index}
+          Virtual slice start index: {virtualSlice.start?.index}
           <br />
-          Virtual slice end index: {virtualSlice.end.index}
+          Virtual slice end index: {virtualSlice.end?.index}
         </p>
       )}
     </>
diff --git a/assets/design-system/src/stories/TagMultiselectTemplate.tsx b/assets/design-system/src/stories/TagMultiselectTemplate.tsx
index f7da9961d5..b15ff5538c 100644
--- a/assets/design-system/src/stories/TagMultiselectTemplate.tsx
+++ b/assets/design-system/src/stories/TagMultiselectTemplate.tsx
@@ -17,8 +17,8 @@ export default function TagMultiSelectTemplate({
   onFilterChange?: (value: string) => void
   onChangeMatchType?: (value: 'AND' | 'OR') => void
 }) {
-  const [selected, setSelected] = useState<Set<Key>>()
-  const [input, setInput] = useState<string>()
+  const [selected, setSelected] = useState<Set<Key>>(new Set())
+  const [input, setInput] = useState<string>('')
 
   return (
     <div style={{ width: `${width}%` }}>
diff --git a/assets/design-system/src/stories/TextSwitch.stories.tsx b/assets/design-system/src/stories/TextSwitch.stories.tsx
index 3493da463a..0e000a9c3a 100644
--- a/assets/design-system/src/stories/TextSwitch.stories.tsx
+++ b/assets/design-system/src/stories/TextSwitch.stories.tsx
@@ -59,21 +59,21 @@ function Template({ label, ...args }: ComponentProps<typeof TextSwitch>) {
       flexDirection="column"
     >
       <TextSwitch
+        {...args}
         name="radio-group-controlled1"
         label={label || 'Match'}
         value={selectedValue1}
         onChange={(value) => setSelectedValue1(value as string)}
         options={options1}
-        {...args}
       />
       <TextSwitch
+        {...args}
         name="radio-group-controlled2"
         label={label || 'Options'}
         labelPosition="end"
         value={selectedValue2}
         onChange={(value) => setSelectedValue2(value as string)}
         options={options2}
-        {...args}
       />
     </Flex>
   )
diff --git a/assets/design-system/src/stories/Tooltip.stories.tsx b/assets/design-system/src/stories/Tooltip.stories.tsx
index 104b20fcb8..10cb68be25 100644
--- a/assets/design-system/src/stories/Tooltip.stories.tsx
+++ b/assets/design-system/src/stories/Tooltip.stories.tsx
@@ -55,7 +55,7 @@ function ModalExample({
           >
             <Button
               secondary
-              onClick={() => onClose()}
+              onClick={() => onClose?.()}
             >
               Cancel
             </Button>
@@ -67,7 +67,7 @@ function ModalExample({
             <Button
               primary
               marginLeft="medium"
-              onClick={() => onClose()}
+              onClick={() => onClose?.()}
             >
               Done
             </Button>
diff --git a/assets/design-system/src/stories/TreeNavigation.stories.tsx b/assets/design-system/src/stories/TreeNavigation.stories.tsx
index 8434607861..679aa77f6e 100644
--- a/assets/design-system/src/stories/TreeNavigation.stories.tsx
+++ b/assets/design-system/src/stories/TreeNavigation.stories.tsx
@@ -154,7 +154,7 @@ function NavEntryDoc({
   useEffect(() => {
     if (!subPaths) {
       if (currentHash) {
-        setCurrentHash(null)
+        setCurrentHash(undefined)
       }
     } else if (subPaths.length > 0 && !currentHash) {
       setCurrentHash(subPaths[0].id)
diff --git a/assets/design-system/src/stories/Typography.tsx b/assets/design-system/src/stories/Typography.tsx
index dfcbc8db66..6e8a1b880e 100644
--- a/assets/design-system/src/stories/Typography.tsx
+++ b/assets/design-system/src/stories/Typography.tsx
@@ -6,7 +6,7 @@ import { type styledTheme } from '..'
 import type { StoryObj } from '@storybook/react'
 
 const SemanticText = styled.div<{
-  $typeStyle?: keyof typeof styledTheme.partials.text
+  $typeStyle: keyof typeof styledTheme.partials.text
 }>(({ theme, $typeStyle: typeStyle }) => ({
   ...theme.partials.text[typeStyle],
   marginBottom: theme.spacing.large,
@@ -44,7 +44,7 @@ export function Typography({
   )
 }
 const MktgText = styled.div<{
-  $typeStyle?: keyof typeof styledTheme.partials.marketingText
+  $typeStyle: keyof typeof styledTheme.partials.marketingText
 }>(({ theme, $typeStyle: typeStyle }) => ({
   ...theme.partials.marketingText[typeStyle],
   display: 'block',
@@ -123,7 +123,11 @@ export function MarketingTypography({
   )
 }
 
-function Template({ exampleText }: { exampleText?: string }) {
+function Template({
+  exampleText = 'Lorem ipsum dolor sit amet',
+}: {
+  exampleText?: string
+}) {
   return (
     <>
       <Divider
diff --git a/assets/design-system/src/stories/Wizard.stories.tsx b/assets/design-system/src/stories/Wizard.stories.tsx
index 7bae7fa6c0..37f10139a3 100644
--- a/assets/design-system/src/stories/Wizard.stories.tsx
+++ b/assets/design-system/src/stories/Wizard.stories.tsx
@@ -32,7 +32,7 @@ interface FormData {
 
 function Application({ ...props }: any): ReactElement<any> {
   const { active, setData } = useActive<FormData>()
-  const [domain, setDomain] = useState<string>(active?.data?.domain)
+  const [domain, setDomain] = useState<string>(active?.data?.domain ?? '')
 
   // Build our form data
   const data = useMemo<FormData>(() => ({ domain }), [domain])
diff --git a/assets/design-system/src/stories/_SemanticSystem.stories.tsx b/assets/design-system/src/stories/_SemanticSystem.stories.tsx
index 68d2961ad2..f1fdd9d424 100644
--- a/assets/design-system/src/stories/_SemanticSystem.stories.tsx
+++ b/assets/design-system/src/stories/_SemanticSystem.stories.tsx
@@ -11,7 +11,6 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
   title: 'Semantic System',
-  component: null,
 } satisfies Meta<any>
 
 export default meta
@@ -95,7 +94,7 @@ function Shadows() {
 }
 
 const RadiusedBox = styled(FilledBox)<{ $radius?: 'medium' | 'large' }>(
-  ({ theme, $radius: radius }) => ({
+  ({ theme, $radius: radius = 'medium' }) => ({
     borderRadius: theme.borderRadiuses[radius],
   })
 )
@@ -123,7 +122,9 @@ const BorderedBox = styled(RadiusedBox).attrs(
   () => ({ radius: 'medium' }) as any
 )<{
   border?: string
-}>(({ theme, border }) => ({ border: (theme.borders as any)[border] }))
+}>(({ theme, border }) => ({
+  border: border ? (theme.borders as any)[border] : undefined,
+}))
 
 function BoxBorders() {
   const { borders } = useTheme()
@@ -142,7 +143,7 @@ function BoxBorders() {
 
 const ScrollbarBox = styled(FilledBox)<{
   $fillLevel?: FillLevel
-}>(({ theme, $fillLevel: fillLevel }) => ({
+}>(({ theme, $fillLevel: fillLevel = 0 }) => ({
   ...theme.partials.scrollBar({ fillLevel }),
   ...theme.partials.text.caption,
   backgroundColor: (theme.colors as any)[fillLevelToBGColor[fillLevel]],
diff --git a/assets/design-system/src/theme/focus.ts b/assets/design-system/src/theme/focus.ts
index a584520c3a..cfd735418a 100644
--- a/assets/design-system/src/theme/focus.ts
+++ b/assets/design-system/src/theme/focus.ts
@@ -15,7 +15,6 @@ export const getFocusPartials = () => {
     outline,
     button: outline,
     insetAbsolute: {
-      outline: 'none',
       position: 'absolute',
       content: "''",
       pointerEvents: 'none',
diff --git a/assets/design-system/src/types.ts b/assets/design-system/src/types.ts
index 5b39dfa4fd..ef9aaf57ef 100644
--- a/assets/design-system/src/types.ts
+++ b/assets/design-system/src/types.ts
@@ -41,14 +41,16 @@ export function sanitizeSeverity<T extends SeverityExt>(
 
     severity = 'danger'
   }
-  if (opts.allowList.includes(severity as any)) {
+  const allowList = opts.allowList ?? []
+
+  if (allowList.includes(severity as any)) {
     return severity as T
   }
   console.warn(
     `Warning: Severity of "${severity}" is not allowed. Using default of "${opts.default}"`
   )
 
-  return opts.allowList.includes('neutral' as T)
+  return allowList.includes('neutral' as T)
     ? ('neutral' as T)
     : opts.default
 }
diff --git a/assets/design-system/src/utils/scrollIntoContainerView.ts b/assets/design-system/src/utils/scrollIntoContainerView.ts
index cdbebfb880..05a78f8b10 100644
--- a/assets/design-system/src/utils/scrollIntoContainerView.ts
+++ b/assets/design-system/src/utils/scrollIntoContainerView.ts
@@ -38,9 +38,9 @@ function getNewScrollPos({
   scrollToPos,
   offset = 0,
 }: {
-  overshootStart?: number
-  overshootEnd?: number
-  curScrollPos?: number
+  overshootStart: number
+  overshootEnd: number
+  curScrollPos: number
   scrollToPos?: ScrollToPosition
   offset?: number
 }) {
diff --git a/assets/design-system/src/utils/urls.ts b/assets/design-system/src/utils/urls.ts
index 6e0c546ce7..d2be7918a6 100644
--- a/assets/design-system/src/utils/urls.ts
+++ b/assets/design-system/src/utils/urls.ts
@@ -15,7 +15,7 @@ export function isRelativeUrl(str: string) {
 }
 
 export function isExternalUrl(str?: string | null) {
-  return !!str.match(/^(\/\/|[a-z\d+-.]+?:)/i)
+  return !!str?.match(/^(\/\/|[a-z\d+-.]+?:)/i)
 }
 
 export function getBarePathFromPath(url: string) {
diff --git a/assets/design-system/src/utils/useBimodalSelectState.ts b/assets/design-system/src/utils/useBimodalSelectState.ts
index 32c5c2c88c..531e1670e6 100644
--- a/assets/design-system/src/utils/useBimodalSelectState.ts
+++ b/assets/design-system/src/utils/useBimodalSelectState.ts
@@ -21,7 +21,7 @@ import { type AriaSelectProps } from '@react-types/select'
 import { type ListProps, type SelectState, useListState } from 'react-stately'
 import { useCallback, useRef, useState } from 'react'
 import { useControlledState } from '@react-stately/utils'
-import { type Key, type Node } from '@react-types/shared'
+import { type Key, type Node, type Selection } from '@react-types/shared'
 
 // TODO: we should probably revisit the conflicting typings/state management
 // we might be able to simplify a lot of this now that react-aria natively supports multi-select
@@ -60,7 +60,7 @@ function useBimodalSelectState<T extends object>({
 }: BimodalSelectProps<T> & {
   onSelectionChange?: (arg: any) => any
 }): BimodalSelectState<T> {
-  const [selectedKey, setSelectedKey] = useControlledState<Key>(
+  const [selectedKey, setSelectedKey] = useControlledState<Key | null>(
     selectionMode === 'single' ? props.selectedKey : undefined,
     props.defaultSelectedKey ?? null,
     selectionMode === 'single' ? onSelectChangeProp : undefined
@@ -71,13 +71,17 @@ function useBimodalSelectState<T extends object>({
     []
   )
   const selectedKeys =
-    selectionMode === 'multiple' ? props.selectedKeys : new Set([selectedKey])
+    selectionMode === 'multiple'
+      ? props.selectedKeys
+      : selectedKey != null
+        ? new Set<Key>([selectedKey])
+        : new Set<Key>()
   const triggerState = useMenuTriggerState(props)
 
-  const onSelectionChange = useCallback<ListProps<object>['onSelectionChange']>(
-    (keys) => {
+  const onSelectionChange = useCallback(
+    (keys: Selection) => {
       if (selectionMode === 'single' && keys !== 'all') {
-        const key = keys.values().next().value
+        const key = keys.values().next().value ?? null
 
         // Always fire onSelectionChange, even if the key is the same
         // as the current key (useControlledState does not).
@@ -89,7 +93,7 @@ function useBimodalSelectState<T extends object>({
         triggerState.close()
       }
       if (selectionMode === 'multiple') {
-        onSelectChangeProp(keys === 'all' ? getAllKeys() : keys)
+        onSelectChangeProp?.(keys === 'all' ? getAllKeys() : keys)
       }
     },
     [
@@ -113,18 +117,23 @@ function useBimodalSelectState<T extends object>({
 
   listStateRef.current = listState
 
+  const selectedKeysIterable =
+    selectedKeys === 'all' ? getAllKeys() : (selectedKeys ?? [])
+
   const validationState = useFormValidationState({
     ...props,
     value:
-      selectionMode === 'single' ? selectedKey : Array.from(selectedKeys ?? []),
+      selectionMode === 'single'
+        ? selectedKey
+        : Array.from(selectedKeysIterable),
   })
 
   const selectedItem =
     selectedKey != null ? listState.collection.getItem(selectedKey) : null
 
-  const selectedItems = Array.from(selectedKeys).map((key) =>
-    listState.collection.getItem(key)
-  )
+  const selectedItems = Array.from(selectedKeysIterable)
+    .map((key) => (key != null ? listState.collection.getItem(key) : null))
+    .filter((item): item is Node<T> => item != null)
 
   const [isFocused, setFocused] = useState(false)
 
@@ -161,7 +170,11 @@ function useBimodalSelectState<T extends object>({
       selectionMode === 'single'
         ? (props.defaultSelectedKey ?? null)
         : props.selectedKeys
-          ? Array.from(props.selectedKeys)
+          ? Array.from(
+              props.selectedKeys === 'all'
+                ? getAllKeys()
+                : props.selectedKeys
+            )
           : [],
     setValue: (newValue) => {
       if (selectionMode === 'single') setSelectedKey(newValue as Key)
diff --git a/assets/design-system/tsconfig.json b/assets/design-system/tsconfig.json
index b4c843683b..3a428c71be 100644
--- a/assets/design-system/tsconfig.json
+++ b/assets/design-system/tsconfig.json
@@ -4,11 +4,7 @@
     "composite": true,
     "baseUrl": ".",
     "rootDir": "./src",
-    "outDir": "dist",
-
-    // TODO: get rid of all these once errors are fixed
-    "strictNullChecks": false,
-    "strictPropertyInitialization": false
+    "outDir": "dist"
   },
   "include": ["src/**/*"]
 }

From 0a7d7ac42a36c20e5d743bbd498187ee4407e7a1 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 13:19:26 +0200
Subject: [PATCH 07/13] enable noImplicitAny in the design system

---
 .../design-system/src/components/ComboBox.tsx | 25 ++++++------
 .../design-system/src/components/Input2.tsx   | 38 ++++++++++---------
 assets/design-system/tsconfig.json            |  4 +-
 3 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/assets/design-system/src/components/ComboBox.tsx b/assets/design-system/src/components/ComboBox.tsx
index 388c2044a6..ec09941389 100644
--- a/assets/design-system/src/components/ComboBox.tsx
+++ b/assets/design-system/src/components/ComboBox.tsx
@@ -248,7 +248,7 @@ function ComboBox({
     isOpen = isOpenUncontrolled
   }
 
-  const wrappedOnOpenChange: typeof onOpenChange = useCallback(
+  const wrappedOnOpenChange: NonNullable<typeof onOpenChange> = useCallback(
     (nextIsOpen, menuTrigger) => {
       setIsOpenUncontrolled(nextIsOpen)
       if (nextIsOpen !== isOpen) {
@@ -265,17 +265,18 @@ function ComboBox({
     [wrappedOnOpenChange]
   )
 
-  const wrappedOnSelectionChange: typeof onSelectionChange = useCallback(
-    (newKey) => {
-      if (onSelectionChange) {
-        onSelectionChange(typeof newKey === 'string' ? newKey : '')
-        setIsOpen(false)
-      }
-    },
-    [onSelectionChange, setIsOpen]
-  )
+  const wrappedOnSelectionChange: NonNullable<typeof onSelectionChange> =
+    useCallback(
+      (newKey) => {
+        if (onSelectionChange) {
+          onSelectionChange(typeof newKey === 'string' ? newKey : '')
+          setIsOpen(false)
+        }
+      },
+      [onSelectionChange, setIsOpen]
+    )
 
-  const wrappedOnFocusChange: typeof onFocusChange = useCallback(
+  const wrappedOnFocusChange: NonNullable<typeof onFocusChange> = useCallback(
     (isFocused) => {
       // Enforce open on focus
       if (isFocused && !isOpen) {
@@ -288,7 +289,7 @@ function ComboBox({
     [isOpen, onFocusChange, setIsOpen]
   )
 
-  const wrappedOnInputChange: typeof onInputChange = useCallback(
+  const wrappedOnInputChange: NonNullable<typeof onInputChange> = useCallback(
     (input) => {
       if (input !== previousInputValue.current) {
         previousInputValue.current = input
diff --git a/assets/design-system/src/components/Input2.tsx b/assets/design-system/src/components/Input2.tsx
index 84061496ea..0d5c381193 100644
--- a/assets/design-system/src/components/Input2.tsx
+++ b/assets/design-system/src/components/Input2.tsx
@@ -295,33 +295,37 @@ function Input2({
   const inputPadStart = startIcon ? null : hasStartContent ? 'small' : 'medium'
   const inputPadEnd = endIcon ? null : hasEndContent ? 'small' : 'medium'
 
-  const wrappedOnChange: InputPropsFull['onChange'] = useCallback(
+  const wrappedOnChange: NonNullable<InputPropsFull['onChange']> = useCallback(
     (e) => {
       onChange?.(e)
     },
     [onChange]
   )
 
-  const wrappedOnKeyDown: InputPropsFull['onKeyDown'] = useCallback(
+  const wrappedOnKeyDown: NonNullable<InputPropsFull['onKeyDown']> =
+    useCallback(
+      (e) => {
+        if (e.key === 'Enter' && typeof onEnter === 'function') {
+          onEnter?.(e)
+        }
+        if (e.key === 'Backspace' && inputRef?.current?.selectionStart === 0) {
+          onDeleteInputContent?.(e)
+        }
+        if (typeof onKeyDown === 'function') {
+          onKeyDown?.(e)
+        }
+      },
+      [onDeleteInputContent, onEnter, onKeyDown]
+    )
+
+  const outerOnClick: NonNullable<InputPropsFull['onClick']> = useCallback(
     (e) => {
-      if (e.key === 'Enter' && typeof onEnter === 'function') {
-        onEnter?.(e)
-      }
-      if (e.key === 'Backspace' && inputRef?.current?.selectionStart === 0) {
-        onDeleteInputContent?.(e)
-      }
-      if (typeof onKeyDown === 'function') {
-        onKeyDown?.(e)
-      }
+      e.preventDefault()
+      inputRef?.current?.focus()
     },
-    [onDeleteInputContent, onEnter, onKeyDown]
+    []
   )
 
-  const outerOnClick: InputPropsFull['onClick'] = useCallback((e) => {
-    e.preventDefault()
-    inputRef?.current?.focus()
-  }, [])
-
   return (
     <InputRootSC
       ref={ref}
diff --git a/assets/design-system/tsconfig.json b/assets/design-system/tsconfig.json
index 3a428c71be..d8ccd71249 100644
--- a/assets/design-system/tsconfig.json
+++ b/assets/design-system/tsconfig.json
@@ -4,7 +4,9 @@
     "composite": true,
     "baseUrl": ".",
     "rootDir": "./src",
-    "outDir": "dist"
+    "outDir": "dist",
+    // Override parent tsconfig.app.json (keeps noImplicitAny off for console)
+    "noImplicitAny": true
   },
   "include": ["src/**/*"]
 }

From 11cdf24d61c80dda09732cb9eca42190e95e0a48 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 13:20:44 +0200
Subject: [PATCH 08/13] format code

---
 assets/design-system/src/components/Code.tsx  |   7 +-
 .../src/components/IconFrame.tsx              |   4 +-
 .../design-system/src/components/Input2.tsx   |  12 +-
 .../design-system/src/components/ListBox.tsx  |   4 +-
 .../src/components/ListBoxItem.tsx            |   4 +-
 .../src/components/LoopingLogo.tsx            |   4 +-
 .../src/components/LoopingLogoAlternative.tsx |   4 +-
 .../src/components/SelectComboShared.tsx      |   6 +-
 .../design-system/src/components/Stepper.tsx  |   3 +-
 .../src/components/wizard/hooks.ts            |   6 +-
 .../design-system/src/stories/A.stories.tsx   |   1 -
 .../src/stories/AWSIcons.stories.tsx          |   1 -
 .../src/stories/AppIcon.stories.tsx           |   1 -
 .../src/stories/Avatar.stories.tsx            |   1 -
 .../src/stories/Banner.stories.tsx            |   1 -
 .../src/stories/Breadcrumbs.stories.tsx       |   1 -
 .../src/stories/ButtonGroup.stories.tsx       |   1 -
 .../src/stories/Callout.stories.tsx           |   1 -
 .../src/stories/Card.stories.tsx              |  87 ++++-----
 .../src/stories/CatalogCard.stories.tsx       |  33 ++--
 .../src/stories/CheckBox.stories.tsx          |   1 -
 .../src/stories/Checklist.stories.tsx         |   1 -
 .../src/stories/Chip.stories.tsx              |   9 +-
 .../src/stories/ChipList.stories.tsx          |   1 -
 .../src/stories/Code.stories.tsx              |   1 -
 .../src/stories/CodeEditor.stories.tsx        |   1 -
 .../src/stories/Codeline.stories.tsx          |   1 -
 .../src/stories/ComboBox.stories.tsx          |  44 ++---
 .../src/stories/Date.stories.tsx              |   1 -
 .../src/stories/DiffViewer.stories.tsx        |   1 -
 .../src/stories/Divider.stories.tsx           |   1 -
 .../src/stories/EmptyState.stories.tsx        |   1 -
 .../src/stories/Flyover.stories.tsx           |   1 -
 .../src/stories/FormField.stories.tsx         |  83 +++++----
 .../src/stories/FormTitle.stories.tsx         |   1 -
 .../src/stories/IconFrame.stories.tsx         |  15 +-
 .../src/stories/Icons.stories.tsx             |   1 -
 .../src/stories/InlineCode.stories.tsx        |   1 -
 .../src/stories/Input.stories.tsx             |  53 +++---
 .../src/stories/ListBox.stories.tsx           |   1 -
 .../src/stories/LoadingSpinner.stories.tsx    |   1 -
 .../src/stories/LoopingLogo.stories.tsx       |   1 -
 .../src/stories/Modal.stories.tsx             |   1 -
 .../src/stories/PageCard.stories.tsx          |   1 -
 .../src/stories/PageTitle.stories.tsx         |  39 ++--
 .../src/stories/ProgressBar.stories.tsx       |   1 -
 .../src/stories/Prop.stories.tsx              |   1 -
 .../src/stories/PropWide.stories.tsx          |   1 -
 .../src/stories/PropsContainer.stories.tsx    |   1 -
 .../src/stories/Radio.stories.tsx             |   1 -
 .../src/stories/RepositoryCard.stories.tsx    |  43 +++--
 .../src/stories/RepositoryChip.stories.tsx    |   1 -
 .../src/stories/SegmentedInput.stories.tsx    |   1 -
 .../src/stories/Select.stories.tsx            |   9 +-
 .../src/stories/Sidecar.stories.tsx           |   1 -
 .../src/stories/Slider.stories.tsx            |  37 ++--
 .../src/stories/StackCard.stories.tsx         |  17 +-
 .../src/stories/Stepper.stories.tsx           |   1 -
 .../src/stories/Switch.stories.tsx            |   1 -
 .../design-system/src/stories/Tab.stories.tsx |   1 -
 .../src/stories/TabList.stories.tsx           |   1 -
 .../src/stories/Table.stories.tsx             | 173 +++++++++---------
 .../src/stories/TipCarousel.stories.tsx       |   1 -
 .../src/stories/Toast.stories.tsx             |   1 -
 .../src/stories/Tooltip.stories.tsx           |   1 -
 .../src/stories/TreeNavigation.stories.tsx    |   1 -
 .../src/stories/UserDetails.stories.tsx       |   1 -
 .../src/stories/Wizard.stories.tsx            |   1 -
 assets/design-system/src/types.ts             |   4 +-
 .../src/utils/useBimodalSelectState.ts        |   4 +-
 70 files changed, 343 insertions(+), 406 deletions(-)

diff --git a/assets/design-system/src/components/Code.tsx b/assets/design-system/src/components/Code.tsx
index 1a54cee1fa..b383731bb8 100644
--- a/assets/design-system/src/components/Code.tsx
+++ b/assets/design-system/src/components/Code.tsx
@@ -274,8 +274,11 @@ function CodeTabs() {
 }
 
 function CodeSelectUnstyled({ className }: ComponentProps<'div'>) {
-  const { tabs: tabsProp, selectedKey, onSelectionChange } =
-    useContext(TabsContext)
+  const {
+    tabs: tabsProp,
+    selectedKey,
+    onSelectionChange,
+  } = useContext(TabsContext)
   const tabs = tabsProp ?? []
 
   const selectedTab = tabs.find((tab) => tab.key === selectedKey) || tabs[0]
diff --git a/assets/design-system/src/components/IconFrame.tsx b/assets/design-system/src/components/IconFrame.tsx
index 73db834958..c68bab9824 100644
--- a/assets/design-system/src/components/IconFrame.tsx
+++ b/assets/design-system/src/components/IconFrame.tsx
@@ -37,7 +37,9 @@ function typeToHoverBG(theme: DefaultTheme): Record<Type, string | undefined> {
   }
 }
 
-function typeToSelectedBG(theme: DefaultTheme): Record<Type, string | undefined> {
+function typeToSelectedBG(
+  theme: DefaultTheme
+): Record<Type, string | undefined> {
   return {
     secondary: undefined,
     tertiary: undefined,
diff --git a/assets/design-system/src/components/Input2.tsx b/assets/design-system/src/components/Input2.tsx
index 0d5c381193..d06895c7e3 100644
--- a/assets/design-system/src/components/Input2.tsx
+++ b/assets/design-system/src/components/Input2.tsx
@@ -213,13 +213,11 @@ const InputAreaSC = styled.div((_) => ({
 }))
 const InputContentSC = styled.div<{
   $padStart?: keyof DefaultTheme['spacing'] | null
-}>(
-  ({ theme, $padStart }) => ({
-    display: 'flex',
-    alignSelf: 'stretch',
-    ...($padStart ? { paddingLeft: theme.spacing[$padStart] } : {}),
-  })
-)
+}>(({ theme, $padStart }) => ({
+  display: 'flex',
+  alignSelf: 'stretch',
+  ...($padStart ? { paddingLeft: theme.spacing[$padStart] } : {}),
+}))
 
 function Input2({
   ref,
diff --git a/assets/design-system/src/components/ListBox.tsx b/assets/design-system/src/components/ListBox.tsx
index eb5b0e53f3..d543369cc0 100644
--- a/assets/design-system/src/components/ListBox.tsx
+++ b/assets/design-system/src/components/ListBox.tsx
@@ -110,9 +110,7 @@ function propsToTextValue(props: Record<string, unknown> | null | undefined) {
 
 function useItemWrappedChildren(
   children?:
-    | ReactElement<any>
-    | (ReactElement<any> | false | null | undefined)[]
-    | null,
+    ReactElement<any> | (ReactElement<any> | false | null | undefined)[] | null,
   header?: ReactElement<any>,
   footer?: ReactElement<any>
 ) {
diff --git a/assets/design-system/src/components/ListBoxItem.tsx b/assets/design-system/src/components/ListBoxItem.tsx
index fa7ca2f581..31e2de32a0 100644
--- a/assets/design-system/src/components/ListBoxItem.tsx
+++ b/assets/design-system/src/components/ListBoxItem.tsx
@@ -216,7 +216,9 @@ function ListBoxFooterPlus({
         leftContent || (
           <PlusIcon
             size={16}
-            color={(theme.colors?.['text-primary-accent'] ?? undefined) as string}
+            color={
+              (theme.colors?.['text-primary-accent'] ?? undefined) as string
+            }
           >
             {children || 'Add'}
           </PlusIcon>
diff --git a/assets/design-system/src/components/LoopingLogo.tsx b/assets/design-system/src/components/LoopingLogo.tsx
index 232bf5e74c..88cb7da3b2 100644
--- a/assets/design-system/src/components/LoopingLogo.tsx
+++ b/assets/design-system/src/components/LoopingLogo.tsx
@@ -14,9 +14,7 @@ export type LoopingLogoProps = ComponentPropsWithRef<'div'> & {
   scale?: number
 }
 
-export const scaling = (
-  scale?: number
-): { transform: string } | undefined =>
+export const scaling = (scale?: number): { transform: string } | undefined =>
   scale ? { transform: `scale(${scale})` } : undefined
 
 function LoopingLogo({
diff --git a/assets/design-system/src/components/LoopingLogoAlternative.tsx b/assets/design-system/src/components/LoopingLogoAlternative.tsx
index 2d54d464bc..00438ab663 100644
--- a/assets/design-system/src/components/LoopingLogoAlternative.tsx
+++ b/assets/design-system/src/components/LoopingLogoAlternative.tsx
@@ -14,9 +14,7 @@ export type LoopingLogoAlternativeProps = ComponentPropsWithRef<'div'> & {
   scale?: number
 }
 
-export const scaling = (
-  scale?: number
-): { transform: string } | undefined =>
+export const scaling = (scale?: number): { transform: string } | undefined =>
   scale ? { transform: `scale(${scale})` } : undefined
 
 const GradientBackground = styled.div<{ $scale?: number }>`
diff --git a/assets/design-system/src/components/SelectComboShared.tsx b/assets/design-system/src/components/SelectComboShared.tsx
index a1bc276668..6dc58b0499 100644
--- a/assets/design-system/src/components/SelectComboShared.tsx
+++ b/assets/design-system/src/components/SelectComboShared.tsx
@@ -91,9 +91,9 @@ function useSelectComboStateProps<T extends TType>({
           }
           break
         default:
-          ;(onSelectionChange as ((key: Key | Selection) => void) | undefined)?.(
-            newKeyOrKeys
-          )
+          ;(
+            onSelectionChange as ((key: Key | Selection) => void) | undefined
+          )?.(newKeyOrKeys)
           break
       }
     },
diff --git a/assets/design-system/src/components/Stepper.tsx b/assets/design-system/src/components/Stepper.tsx
index f17372bc6a..65efb748b6 100644
--- a/assets/design-system/src/components/Stepper.tsx
+++ b/assets/design-system/src/components/Stepper.tsx
@@ -90,8 +90,7 @@ function Stepper({
       return
     }
     setCollapseTitles(
-      !!forceCollapse ||
-        (eltRef.current?.clientWidth ?? 0) < collapseAtWidth
+      !!forceCollapse || (eltRef.current?.clientWidth ?? 0) < collapseAtWidth
     )
   }, [forceCollapse, eltRef, collapseAtWidth, vertical])
 
diff --git a/assets/design-system/src/components/wizard/hooks.ts b/assets/design-system/src/components/wizard/hooks.ts
index 95049a398c..108ae5c04c 100644
--- a/assets/design-system/src/components/wizard/hooks.ts
+++ b/assets/design-system/src/components/wizard/hooks.ts
@@ -5,11 +5,7 @@ import { type ContextProps, type StepConfig, WizardContext } from './context'
 
 const useActive = <T = unknown>() => {
   const ctx = useContext(WizardContext) as ContextProps<T>
-  const {
-    steps,
-    setSteps,
-    active: activeIdx,
-  } = ctx
+  const { steps, setSteps, active: activeIdx } = ctx
   const active: StepConfig<T> = useMemo<StepConfig<T>>(
     () => steps.at(activeIdx)!,
     [activeIdx, steps]
diff --git a/assets/design-system/src/stories/A.stories.tsx b/assets/design-system/src/stories/A.stories.tsx
index 2cbe34b41d..a9a05a56e0 100644
--- a/assets/design-system/src/stories/A.stories.tsx
+++ b/assets/design-system/src/stories/A.stories.tsx
@@ -39,4 +39,3 @@ export const Primary: Story = {
     children: 'Click me',
   },
 }
-
diff --git a/assets/design-system/src/stories/AWSIcons.stories.tsx b/assets/design-system/src/stories/AWSIcons.stories.tsx
index 3a8decc784..797d3a9872 100644
--- a/assets/design-system/src/stories/AWSIcons.stories.tsx
+++ b/assets/design-system/src/stories/AWSIcons.stories.tsx
@@ -55,4 +55,3 @@ export const Default: Story = {
     size: 32,
   },
 }
-
diff --git a/assets/design-system/src/stories/AppIcon.stories.tsx b/assets/design-system/src/stories/AppIcon.stories.tsx
index 02074b4448..e5e608a1b3 100644
--- a/assets/design-system/src/stories/AppIcon.stories.tsx
+++ b/assets/design-system/src/stories/AppIcon.stories.tsx
@@ -118,4 +118,3 @@ export const Default: Story = {
     clickable: false,
   },
 }
-
diff --git a/assets/design-system/src/stories/Avatar.stories.tsx b/assets/design-system/src/stories/Avatar.stories.tsx
index 56bf3cbb84..f7e5a841c8 100644
--- a/assets/design-system/src/stories/Avatar.stories.tsx
+++ b/assets/design-system/src/stories/Avatar.stories.tsx
@@ -41,4 +41,3 @@ export const Small: Story = {
     size: 32,
   },
 }
-
diff --git a/assets/design-system/src/stories/Banner.stories.tsx b/assets/design-system/src/stories/Banner.stories.tsx
index 3cc2a02541..77a4a091a8 100644
--- a/assets/design-system/src/stories/Banner.stories.tsx
+++ b/assets/design-system/src/stories/Banner.stories.tsx
@@ -143,4 +143,3 @@ export const Default: Story = {
     severity: 'info',
   },
 }
-
diff --git a/assets/design-system/src/stories/Breadcrumbs.stories.tsx b/assets/design-system/src/stories/Breadcrumbs.stories.tsx
index 0a5fc260a6..47505ecce8 100644
--- a/assets/design-system/src/stories/Breadcrumbs.stories.tsx
+++ b/assets/design-system/src/stories/Breadcrumbs.stories.tsx
@@ -180,4 +180,3 @@ export const Manual: Story = {
     collapsible: true,
   },
 }
-
diff --git a/assets/design-system/src/stories/ButtonGroup.stories.tsx b/assets/design-system/src/stories/ButtonGroup.stories.tsx
index 344c3d1399..9916c85b30 100644
--- a/assets/design-system/src/stories/ButtonGroup.stories.tsx
+++ b/assets/design-system/src/stories/ButtonGroup.stories.tsx
@@ -113,4 +113,3 @@ export const Default: Story = {
     size: 'small',
   },
 }
-
diff --git a/assets/design-system/src/stories/Callout.stories.tsx b/assets/design-system/src/stories/Callout.stories.tsx
index bccc443eeb..42e32f0d2a 100644
--- a/assets/design-system/src/stories/Callout.stories.tsx
+++ b/assets/design-system/src/stories/Callout.stories.tsx
@@ -274,4 +274,3 @@ export const OnCard: StoryObj<Parameters<typeof Template>[0]> = {
     expandable: false,
   },
 }
-
diff --git a/assets/design-system/src/stories/Card.stories.tsx b/assets/design-system/src/stories/Card.stories.tsx
index ead31c16ec..6ee016464b 100644
--- a/assets/design-system/src/stories/Card.stories.tsx
+++ b/assets/design-system/src/stories/Card.stories.tsx
@@ -141,57 +141,58 @@ function FillLevelTemplate({
 export const Default: StoryObj<Parameters<typeof Template>[0]> = {
   render: Template,
   args: {
-  selected: false,
-  clickable: false,
-  disabled: false,
-  width: 150,
-  height: 150,
-  headerSize: 'medium',
-  headerContent: (
-    <Flex
-      justifyContent="space-between"
-      align="center"
-      width="100%"
-    >
-      <p>Header</p>
-      <Tooltip label="Tooltip">
-        <InfoOutlineIcon />
-      </Tooltip>
-    </Flex>
-  ),
-},
+    selected: false,
+    clickable: false,
+    disabled: false,
+    width: 150,
+    height: 150,
+    headerSize: 'medium',
+    headerContent: (
+      <Flex
+        justifyContent="space-between"
+        align="center"
+        width="100%"
+      >
+        <p>Header</p>
+        <Tooltip label="Tooltip">
+          <InfoOutlineIcon />
+        </Tooltip>
+      </Flex>
+    ),
+  },
 }
 
 export const Clickable: StoryObj<Parameters<typeof Template>[0]> = {
   render: Template,
   args: {
-  ...Default.args,
-  ...{
-    clickable: true,
+    ...Default.args,
+    ...{
+      clickable: true,
+    },
   },
-},
 }
 
-export const WithFillLevelContext: StoryObj<Parameters<typeof FillLevelTemplate>[0]> = {
+export const WithFillLevelContext: StoryObj<
+  Parameters<typeof FillLevelTemplate>[0]
+> = {
   render: FillLevelTemplate,
   args: {
-  selected: false,
-  clickable: false,
-  disabled: false,
-  width: 400,
-  headerSize: 'medium',
-  headerContent: (
-    <Flex
-      justifyContent="space-between"
-      align="center"
-      width="100%"
-    >
-      <p>Header</p>
-      <Tooltip label="Tooltip">
-        <InfoOutlineIcon />
-      </Tooltip>
-    </Flex>
-  ),
-},
+    selected: false,
+    clickable: false,
+    disabled: false,
+    width: 400,
+    headerSize: 'medium',
+    headerContent: (
+      <Flex
+        justifyContent="space-between"
+        align="center"
+        width="100%"
+      >
+        <p>Header</p>
+        <Tooltip label="Tooltip">
+          <InfoOutlineIcon />
+        </Tooltip>
+      </Flex>
+    ),
+  },
 }
-
diff --git a/assets/design-system/src/stories/CatalogCard.stories.tsx b/assets/design-system/src/stories/CatalogCard.stories.tsx
index e26ae6f138..1025f6792d 100644
--- a/assets/design-system/src/stories/CatalogCard.stories.tsx
+++ b/assets/design-system/src/stories/CatalogCard.stories.tsx
@@ -50,21 +50,20 @@ function Template(args: any) {
 export const Default: Story = {
   render: Template,
   args: {
-  name: 'Base catalog',
-  author: 'Plural',
-  category: 'Messaging',
-  description:
-    'The new open-source standard to sync data from applications, APIs & databases. One click deploys for data scientists and developers.',
-  tags: [
-    'Devops',
-    'Deployment',
-    'Fun',
-    'Turkey',
-    'Chickens',
-    'Handball',
-    'Cricket',
-    'Support',
-  ],
-},
+    name: 'Base catalog',
+    author: 'Plural',
+    category: 'Messaging',
+    description:
+      'The new open-source standard to sync data from applications, APIs & databases. One click deploys for data scientists and developers.',
+    tags: [
+      'Devops',
+      'Deployment',
+      'Fun',
+      'Turkey',
+      'Chickens',
+      'Handball',
+      'Cricket',
+      'Support',
+    ],
+  },
 }
-
diff --git a/assets/design-system/src/stories/CheckBox.stories.tsx b/assets/design-system/src/stories/CheckBox.stories.tsx
index 7ba59e0a49..45febd7a47 100644
--- a/assets/design-system/src/stories/CheckBox.stories.tsx
+++ b/assets/design-system/src/stories/CheckBox.stories.tsx
@@ -109,4 +109,3 @@ export const Small: Story = {
     tabIndex: 0,
   },
 }
-
diff --git a/assets/design-system/src/stories/Checklist.stories.tsx b/assets/design-system/src/stories/Checklist.stories.tsx
index d6ba067246..83b53afde4 100644
--- a/assets/design-system/src/stories/Checklist.stories.tsx
+++ b/assets/design-system/src/stories/Checklist.stories.tsx
@@ -221,4 +221,3 @@ export const Default: Story = {
   render: Template,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/Chip.stories.tsx b/assets/design-system/src/stories/Chip.stories.tsx
index 6c5ab10ec0..9886c17292 100644
--- a/assets/design-system/src/stories/Chip.stories.tsx
+++ b/assets/design-system/src/stories/Chip.stories.tsx
@@ -32,9 +32,11 @@ const meta = {
 export default meta
 type Story = StoryObj<any>
 
-const sizes = ['small', 'medium', 'large'] as const satisfies readonly NonNullable<
-  ComponentProps<typeof Chip>['size']
->[]
+const sizes = [
+  'small',
+  'medium',
+  'large',
+] as const satisfies readonly NonNullable<ComponentProps<typeof Chip>['size']>[]
 
 const severities = SEVERITIES
 
@@ -246,4 +248,3 @@ export const Default: Story = {
     condensed: false,
   },
 }
-
diff --git a/assets/design-system/src/stories/ChipList.stories.tsx b/assets/design-system/src/stories/ChipList.stories.tsx
index 72d736ea14..5280f94056 100644
--- a/assets/design-system/src/stories/ChipList.stories.tsx
+++ b/assets/design-system/src/stories/ChipList.stories.tsx
@@ -192,4 +192,3 @@ export const CustomClick: Story = {
     onClick: (value: string) => alert(value),
   },
 }
-
diff --git a/assets/design-system/src/stories/Code.stories.tsx b/assets/design-system/src/stories/Code.stories.tsx
index a0ff14931a..6e4458faaf 100644
--- a/assets/design-system/src/stories/Code.stories.tsx
+++ b/assets/design-system/src/stories/Code.stories.tsx
@@ -433,4 +433,3 @@ export const MermaidWithTabs: Story = {
     onFillLevel: 0,
   },
 }
-
diff --git a/assets/design-system/src/stories/CodeEditor.stories.tsx b/assets/design-system/src/stories/CodeEditor.stories.tsx
index ab306cb006..3fec73f6a3 100644
--- a/assets/design-system/src/stories/CodeEditor.stories.tsx
+++ b/assets/design-system/src/stories/CodeEditor.stories.tsx
@@ -126,4 +126,3 @@ export const Stretched: Story = {
   render: StretchedTemplate,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/Codeline.stories.tsx b/assets/design-system/src/stories/Codeline.stories.tsx
index 0bbf599e9a..8503b502aa 100644
--- a/assets/design-system/src/stories/Codeline.stories.tsx
+++ b/assets/design-system/src/stories/Codeline.stories.tsx
@@ -63,4 +63,3 @@ export const CustomCopy: Story = {
     children: 'npm i @pluralsh/design-system',
   },
 }
-
diff --git a/assets/design-system/src/stories/ComboBox.stories.tsx b/assets/design-system/src/stories/ComboBox.stories.tsx
index bd78a79c08..16cbfbceb2 100644
--- a/assets/design-system/src/stories/ComboBox.stories.tsx
+++ b/assets/design-system/src/stories/ComboBox.stories.tsx
@@ -507,13 +507,14 @@ export const Tags: StoryObj<Parameters<typeof TagsTemplate>[0]> = {
   },
 }
 
-export const ClusterTags: StoryObj<Parameters<typeof ClusterTagsTemplate>[0]> = {
-  render: ClusterTagsTemplate,
-  args: {
-    loading: false,
-    withTitleContent: false,
-  },
-}
+export const ClusterTags: StoryObj<Parameters<typeof ClusterTagsTemplate>[0]> =
+  {
+    render: ClusterTagsTemplate,
+    args: {
+      loading: false,
+      withTitleContent: false,
+    },
+  }
 
 const TAGS = [
   { name: 'local', value: 'true' },
@@ -533,21 +534,22 @@ const TAGS = [
 ]
 const tags = uniqWith(TAGS, isEqual)
 
-export const TagMultiSelect: StoryObj<Parameters<typeof TagMultiSelectTemplate>[0]> = {
+export const TagMultiSelect: StoryObj<
+  Parameters<typeof TagMultiSelectTemplate>[0]
+> = {
   render: TagMultiSelectTemplate,
   args: {
-  loading: false,
-  options: tags.map((tag) => `${tag.name}:${tag.value}`),
-  width: 100,
-  onSelectedTagsChange: (keys) => {
-    console.log('Selected keys:', keys)
-  },
-  onFilterChange: (filter) => {
-    console.log('Filter:', filter)
-  },
-  onChangeMatchType: (matchType) => {
-    console.log('Match type: ', matchType)
+    loading: false,
+    options: tags.map((tag) => `${tag.name}:${tag.value}`),
+    width: 100,
+    onSelectedTagsChange: (keys) => {
+      console.log('Selected keys:', keys)
+    },
+    onFilterChange: (filter) => {
+      console.log('Filter:', filter)
+    },
+    onChangeMatchType: (matchType) => {
+      console.log('Match type: ', matchType)
+    },
   },
-},
 }
-
diff --git a/assets/design-system/src/stories/Date.stories.tsx b/assets/design-system/src/stories/Date.stories.tsx
index 6eaec150c3..edb33ffea9 100644
--- a/assets/design-system/src/stories/Date.stories.tsx
+++ b/assets/design-system/src/stories/Date.stories.tsx
@@ -49,4 +49,3 @@ export const Default: Story = {
     date: '2016-01-08T00:00:00-06:00',
   },
 }
-
diff --git a/assets/design-system/src/stories/DiffViewer.stories.tsx b/assets/design-system/src/stories/DiffViewer.stories.tsx
index b8d25f6e77..a1a9fbbe25 100644
--- a/assets/design-system/src/stories/DiffViewer.stories.tsx
+++ b/assets/design-system/src/stories/DiffViewer.stories.tsx
@@ -68,4 +68,3 @@ export const DeletedFile: Story = {
     asCard: true,
   },
 }
-
diff --git a/assets/design-system/src/stories/Divider.stories.tsx b/assets/design-system/src/stories/Divider.stories.tsx
index 48eaa09d8f..04262960f5 100644
--- a/assets/design-system/src/stories/Divider.stories.tsx
+++ b/assets/design-system/src/stories/Divider.stories.tsx
@@ -26,4 +26,3 @@ export const Text: Story = {
     text: "That's division allright!",
   },
 }
-
diff --git a/assets/design-system/src/stories/EmptyState.stories.tsx b/assets/design-system/src/stories/EmptyState.stories.tsx
index 7eb651c37c..a0141597a5 100644
--- a/assets/design-system/src/stories/EmptyState.stories.tsx
+++ b/assets/design-system/src/stories/EmptyState.stories.tsx
@@ -25,4 +25,3 @@ export const Default: Story = {
     children: <Button>Click me!</Button>,
   },
 }
-
diff --git a/assets/design-system/src/stories/Flyover.stories.tsx b/assets/design-system/src/stories/Flyover.stories.tsx
index e579a9acc3..0d5a8f8a6b 100644
--- a/assets/design-system/src/stories/Flyover.stories.tsx
+++ b/assets/design-system/src/stories/Flyover.stories.tsx
@@ -171,4 +171,3 @@ export const NonScrollable: Story = {
     scrollable: false,
   },
 }
-
diff --git a/assets/design-system/src/stories/FormField.stories.tsx b/assets/design-system/src/stories/FormField.stories.tsx
index 10469d9a0b..7463f8db7b 100644
--- a/assets/design-system/src/stories/FormField.stories.tsx
+++ b/assets/design-system/src/stories/FormField.stories.tsx
@@ -91,41 +91,41 @@ function AllSizesTemplate(args: any) {
 export const Full: Story = {
   render: AllSizesTemplate,
   args: {
-  label: 'Label',
-  caption: 'Action',
-  maxLength: 120,
-  hint: 'Hint text',
-  startIcon: <MagnifyingGlassIcon />,
-  endIcon: (
-    <CaretDownIcon
-      size={10}
-      mt={0.333}
-      mx="3px"
-    />
-  ),
-},
+    label: 'Label',
+    caption: 'Action',
+    maxLength: 120,
+    hint: 'Hint text',
+    startIcon: <MagnifyingGlassIcon />,
+    endIcon: (
+      <CaretDownIcon
+        size={10}
+        mt={0.333}
+        mx="3px"
+      />
+    ),
+  },
 }
 
 export const FullError: Story = {
   render: AllSizesTemplate,
   args: {
-  ...Full.args,
-  ...{
-    label: 'Password',
-    hint: 'Something is wrong',
-    error: true,
+    ...Full.args,
+    ...{
+      label: 'Password',
+      hint: 'Something is wrong',
+      error: true,
+    },
   },
-},
 }
 
 export const FullDisabled: Story = {
   render: AllSizesTemplate,
   args: {
-  ...Full.args,
-  ...{
-    disabled: true,
+    ...Full.args,
+    ...{
+      disabled: true,
+    },
   },
-},
 }
 
 export const Horizontal: Story = {
@@ -167,10 +167,10 @@ export const Caption: Story = {
 export const LongCaption: Story = {
   render: AllSizesTemplate,
   args: {
-  label: 'Label',
-  caption:
-    'This will probably truncate, because it is ever so so longer than usual.',
-},
+    label: 'Label',
+    caption:
+      'This will probably truncate, because it is ever so so longer than usual.',
+  },
 }
 
 export const HintText: Story = {
@@ -192,20 +192,20 @@ export const MaxLength: Story = {
 export const ArbitraryHintContent: Story = {
   render: AllSizesTemplate,
   args: {
-  label: 'Label',
-  hint: (
-    <Div
-      backgroundColor="fill-one"
-      padding="medium"
-      width="100%"
-      textAlign="center"
-      border="1px solid border"
-      borderRadius="medium"
-    >
-      Put whatever you want in the hint!
-    </Div>
-  ),
-},
+    label: 'Label',
+    hint: (
+      <Div
+        backgroundColor="fill-one"
+        padding="medium"
+        width="100%"
+        textAlign="center"
+        border="1px solid border"
+        borderRadius="medium"
+      >
+        Put whatever you want in the hint!
+      </Div>
+    ),
+  },
 }
 
 export const Multiline: Story = {
@@ -217,4 +217,3 @@ export const Multiline: Story = {
     maxLength: 200,
   },
 }
-
diff --git a/assets/design-system/src/stories/FormTitle.stories.tsx b/assets/design-system/src/stories/FormTitle.stories.tsx
index 28bf28909e..65d210e3f9 100644
--- a/assets/design-system/src/stories/FormTitle.stories.tsx
+++ b/assets/design-system/src/stories/FormTitle.stories.tsx
@@ -25,4 +25,3 @@ export const Primary: Story = {
     message: 'Determine how this application is updated on a regular basis.',
   },
 }
-
diff --git a/assets/design-system/src/stories/IconFrame.stories.tsx b/assets/design-system/src/stories/IconFrame.stories.tsx
index df1914787e..534989dd15 100644
--- a/assets/design-system/src/stories/IconFrame.stories.tsx
+++ b/assets/design-system/src/stories/IconFrame.stories.tsx
@@ -72,13 +72,12 @@ function Template({
 export const Default: Story = {
   render: Template,
   args: {
-  clickable: true,
-  tooltip: true,
-  tooltipProps: {
-    displayOn: 'hover',
-    placement: 'top',
+    clickable: true,
+    tooltip: true,
+    tooltipProps: {
+      displayOn: 'hover',
+      placement: 'top',
+    },
+    textValue: 'Delete',
   },
-  textValue: 'Delete',
-},
 }
-
diff --git a/assets/design-system/src/stories/Icons.stories.tsx b/assets/design-system/src/stories/Icons.stories.tsx
index e846c72002..0947e8f2f4 100644
--- a/assets/design-system/src/stories/Icons.stories.tsx
+++ b/assets/design-system/src/stories/Icons.stories.tsx
@@ -240,4 +240,3 @@ export const PluralLogos: Story = {
     backgroundColor: 'transparent',
   },
 }
-
diff --git a/assets/design-system/src/stories/InlineCode.stories.tsx b/assets/design-system/src/stories/InlineCode.stories.tsx
index 41108ab348..e503f830ac 100644
--- a/assets/design-system/src/stories/InlineCode.stories.tsx
+++ b/assets/design-system/src/stories/InlineCode.stories.tsx
@@ -119,4 +119,3 @@ export const Default: Story = {
   render: Template,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/Input.stories.tsx b/assets/design-system/src/stories/Input.stories.tsx
index 5baf0dead1..5ebcfd050e 100644
--- a/assets/design-system/src/stories/Input.stories.tsx
+++ b/assets/design-system/src/stories/Input.stories.tsx
@@ -217,36 +217,35 @@ export const Multiline: Story = {
 export const TitleContent: Story = {
   render: CustomInputTemplate,
   args: {
-  startIcon: <SearchIcon />,
-  titleContent: (
-    <>
-      <BrowseAppsIcon marginRight="small" />
-      Marketplace
-    </>
-  ),
-  placeholder: 'Search the marketplace',
-  showClearButton: true,
-  suffix: '',
-},
+    startIcon: <SearchIcon />,
+    titleContent: (
+      <>
+        <BrowseAppsIcon marginRight="small" />
+        Marketplace
+      </>
+    ),
+    placeholder: 'Search the marketplace',
+    showClearButton: true,
+    suffix: '',
+  },
 }
 
 export const Version2: Story = {
   render: CustomInputV2Template,
   args: {
-  startIcon: <SearchIcon />,
-  // endIcon: <TagIcon />,
-  titleContent: (
-    <>
-      <BrowseAppsIcon marginRight="small" />
-      Marketplace
-    </>
-  ),
-  placeholder: 'Search the marketplace',
-  showClearButton: true,
-  suffix: '',
-  prefix: '',
-  disabled: false,
-  error: false,
-},
+    startIcon: <SearchIcon />,
+    // endIcon: <TagIcon />,
+    titleContent: (
+      <>
+        <BrowseAppsIcon marginRight="small" />
+        Marketplace
+      </>
+    ),
+    placeholder: 'Search the marketplace',
+    showClearButton: true,
+    suffix: '',
+    prefix: '',
+    disabled: false,
+    error: false,
+  },
 }
-
diff --git a/assets/design-system/src/stories/ListBox.stories.tsx b/assets/design-system/src/stories/ListBox.stories.tsx
index 55b4c54770..8baace63cd 100644
--- a/assets/design-system/src/stories/ListBox.stories.tsx
+++ b/assets/design-system/src/stories/ListBox.stories.tsx
@@ -324,4 +324,3 @@ export const Default: Story = {
   render: Template,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/LoadingSpinner.stories.tsx b/assets/design-system/src/stories/LoadingSpinner.stories.tsx
index 77b5cb42dd..deb4d95e41 100644
--- a/assets/design-system/src/stories/LoadingSpinner.stories.tsx
+++ b/assets/design-system/src/stories/LoadingSpinner.stories.tsx
@@ -45,4 +45,3 @@ export const Primary: Story = {
     animateTransitions: true,
   },
 }
-
diff --git a/assets/design-system/src/stories/LoopingLogo.stories.tsx b/assets/design-system/src/stories/LoopingLogo.stories.tsx
index 29ee8423d6..f729b9a913 100644
--- a/assets/design-system/src/stories/LoopingLogo.stories.tsx
+++ b/assets/design-system/src/stories/LoopingLogo.stories.tsx
@@ -30,4 +30,3 @@ export const Default: Story = {
     animated: true,
   },
 }
-
diff --git a/assets/design-system/src/stories/Modal.stories.tsx b/assets/design-system/src/stories/Modal.stories.tsx
index 8b70382b9e..540159812d 100644
--- a/assets/design-system/src/stories/Modal.stories.tsx
+++ b/assets/design-system/src/stories/Modal.stories.tsx
@@ -220,4 +220,3 @@ export const NonScrollable: Story = {
     hasActions: true,
   },
 }
-
diff --git a/assets/design-system/src/stories/PageCard.stories.tsx b/assets/design-system/src/stories/PageCard.stories.tsx
index 45a3fef632..4335a06671 100644
--- a/assets/design-system/src/stories/PageCard.stories.tsx
+++ b/assets/design-system/src/stories/PageCard.stories.tsx
@@ -77,4 +77,3 @@ export const Default: Story = {
   render: Template,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/PageTitle.stories.tsx b/assets/design-system/src/stories/PageTitle.stories.tsx
index 6c4057aee2..2722397936 100644
--- a/assets/design-system/src/stories/PageTitle.stories.tsx
+++ b/assets/design-system/src/stories/PageTitle.stories.tsx
@@ -38,25 +38,24 @@ export const Default: Story = {
 export const WithContent: Story = {
   render: Template,
   args: {
-  heading: (
-    <Div>
-      <strong>Customized</strong> <em>page</em> title
-    </Div>
-  ),
-  children: (
-    <Flex justifyContent="flex-end">
-      <Flex
-        marginRight="medium"
-        alignItems="center"
-        textAlign="right"
-        body2
-        color="text-xlight"
-      >
-        Unsaved changes
+    heading: (
+      <Div>
+        <strong>Customized</strong> <em>page</em> title
+      </Div>
+    ),
+    children: (
+      <Flex justifyContent="flex-end">
+        <Flex
+          marginRight="medium"
+          alignItems="center"
+          textAlign="right"
+          body2
+          color="text-xlight"
+        >
+          Unsaved changes
+        </Flex>
+        <Button>Save</Button>
       </Flex>
-      <Button>Save</Button>
-    </Flex>
-  ),
-},
+    ),
+  },
 }
-
diff --git a/assets/design-system/src/stories/ProgressBar.stories.tsx b/assets/design-system/src/stories/ProgressBar.stories.tsx
index 579a3eaaa9..6ad055a33a 100644
--- a/assets/design-system/src/stories/ProgressBar.stories.tsx
+++ b/assets/design-system/src/stories/ProgressBar.stories.tsx
@@ -36,4 +36,3 @@ export const Determinate: Story = {
     progress: 0.25,
   },
 }
-
diff --git a/assets/design-system/src/stories/Prop.stories.tsx b/assets/design-system/src/stories/Prop.stories.tsx
index 52edfba9d4..1fed4278d1 100644
--- a/assets/design-system/src/stories/Prop.stories.tsx
+++ b/assets/design-system/src/stories/Prop.stories.tsx
@@ -17,4 +17,3 @@ export const Default: Story = {
   render: Template,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/PropWide.stories.tsx b/assets/design-system/src/stories/PropWide.stories.tsx
index 731954e0d1..c0c5cb95c5 100644
--- a/assets/design-system/src/stories/PropWide.stories.tsx
+++ b/assets/design-system/src/stories/PropWide.stories.tsx
@@ -17,4 +17,3 @@ export const Default: Story = {
   render: Template,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/PropsContainer.stories.tsx b/assets/design-system/src/stories/PropsContainer.stories.tsx
index 3e153c2aae..b53a0def72 100644
--- a/assets/design-system/src/stories/PropsContainer.stories.tsx
+++ b/assets/design-system/src/stories/PropsContainer.stories.tsx
@@ -31,4 +31,3 @@ export const Default: Story = {
   render: Template,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/Radio.stories.tsx b/assets/design-system/src/stories/Radio.stories.tsx
index 2ae82dce3c..4be80c1c52 100644
--- a/assets/design-system/src/stories/Radio.stories.tsx
+++ b/assets/design-system/src/stories/Radio.stories.tsx
@@ -84,4 +84,3 @@ export const Small: Story = {
     small: true,
   },
 }
-
diff --git a/assets/design-system/src/stories/RepositoryCard.stories.tsx b/assets/design-system/src/stories/RepositoryCard.stories.tsx
index 761400857c..c8fdd43d1b 100644
--- a/assets/design-system/src/stories/RepositoryCard.stories.tsx
+++ b/assets/design-system/src/stories/RepositoryCard.stories.tsx
@@ -115,31 +115,30 @@ function ListTemplate(args: any) {
 export const Default: Story = {
   render: Template,
   args: {
-  installed: true,
-  title: 'Plural',
-  priv: true,
-  verified: true,
-  trending: true,
-  publisher: 'Plural',
-  featuredLabel: '',
-  description:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-  imageUrl: '/logos/plural-logomark-only-black.svg',
-  tags: [
-    'Devops',
-    'Deployment',
-    'Fun',
-    'Turkey',
-    'Chickens',
-    'Handball',
-    'Cricket',
-    'Support',
-  ],
-},
+    installed: true,
+    title: 'Plural',
+    priv: true,
+    verified: true,
+    trending: true,
+    publisher: 'Plural',
+    featuredLabel: '',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    imageUrl: '/logos/plural-logomark-only-black.svg',
+    tags: [
+      'Devops',
+      'Deployment',
+      'Fun',
+      'Turkey',
+      'Chickens',
+      'Handball',
+      'Cricket',
+      'Support',
+    ],
+  },
 }
 
 export const List: Story = {
   render: ListTemplate,
   args: { width: '500px', ...Default.args },
 }
-
diff --git a/assets/design-system/src/stories/RepositoryChip.stories.tsx b/assets/design-system/src/stories/RepositoryChip.stories.tsx
index 2e68633047..06928c92bc 100644
--- a/assets/design-system/src/stories/RepositoryChip.stories.tsx
+++ b/assets/design-system/src/stories/RepositoryChip.stories.tsx
@@ -47,4 +47,3 @@ export const Small: Story = {
     width: '200px',
   },
 }
-
diff --git a/assets/design-system/src/stories/SegmentedInput.stories.tsx b/assets/design-system/src/stories/SegmentedInput.stories.tsx
index 8c6ee9470b..7291204411 100644
--- a/assets/design-system/src/stories/SegmentedInput.stories.tsx
+++ b/assets/design-system/src/stories/SegmentedInput.stories.tsx
@@ -119,4 +119,3 @@ export const CustomFormatInput: StoryObj<Parameters<typeof Template>[0]> = {
     segments: CUSTOM_SEGMENTS,
   },
 }
-
diff --git a/assets/design-system/src/stories/Select.stories.tsx b/assets/design-system/src/stories/Select.stories.tsx
index 9f34e484d8..5fb9ddb72f 100644
--- a/assets/design-system/src/stories/Select.stories.tsx
+++ b/assets/design-system/src/stories/Select.stories.tsx
@@ -331,9 +331,7 @@ function Template({ onFillLevel }: { onFillLevel: any }) {
           }}
           defaultOpen={false}
           leftContent={<SearchIcon />}
-          rightContent={
-            <ListBoxItemChipList chips={curItem?.chips ?? []} />
-          }
+          rightContent={<ListBoxItemChipList chips={curItem?.chips ?? []} />}
           dropdownFooterFixed={
             <ListBoxFooterPlus onClick={createNewHandler}>
               Create new
@@ -525,9 +523,7 @@ function Template({ onFillLevel }: { onFillLevel: any }) {
           }}
           defaultOpen={false}
           leftContent={<SearchIcon />}
-          rightContent={
-            <ListBoxItemChipList chips={curItem?.chips ?? []} />
-          }
+          rightContent={<ListBoxItemChipList chips={curItem?.chips ?? []} />}
           dropdownFooterFixed={
             <ListBoxFooterPlus onClick={createNewHandler}>
               Create new
@@ -672,4 +668,3 @@ export const Default: StoryObj<Parameters<typeof Template>[0]> = {
   render: Template,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/Sidecar.stories.tsx b/assets/design-system/src/stories/Sidecar.stories.tsx
index 86606c8c27..6e4436dc1c 100644
--- a/assets/design-system/src/stories/Sidecar.stories.tsx
+++ b/assets/design-system/src/stories/Sidecar.stories.tsx
@@ -62,4 +62,3 @@ export const Default: Story = {
     heading: 'Sidecar Title',
   },
 }
-
diff --git a/assets/design-system/src/stories/Slider.stories.tsx b/assets/design-system/src/stories/Slider.stories.tsx
index 9e7ec89443..3f7537aeba 100644
--- a/assets/design-system/src/stories/Slider.stories.tsx
+++ b/assets/design-system/src/stories/Slider.stories.tsx
@@ -16,23 +16,22 @@ function Template(args: any) {
 export const Default: Story = {
   render: Template,
   args: {
-  label: 'Applications',
-  defaultValue: 30,
-  minValue: 0,
-  maxValue: 100,
-  tickMarks: [
-    { value: 0 },
-    { value: 5 },
-    { value: 10 },
-    { value: 20 },
-    { value: 30 },
-    { value: 50, label: 'Fifty' },
-    { value: 100, label: '💯' },
-  ],
-  thumbRadius: 12,
-  tooltip: true,
-  size: 600,
-  colorized: true,
-},
+    label: 'Applications',
+    defaultValue: 30,
+    minValue: 0,
+    maxValue: 100,
+    tickMarks: [
+      { value: 0 },
+      { value: 5 },
+      { value: 10 },
+      { value: 20 },
+      { value: 30 },
+      { value: 50, label: 'Fifty' },
+      { value: 100, label: '💯' },
+    ],
+    thumbRadius: 12,
+    tooltip: true,
+    size: 600,
+    colorized: true,
+  },
 }
-
diff --git a/assets/design-system/src/stories/StackCard.stories.tsx b/assets/design-system/src/stories/StackCard.stories.tsx
index 3131bf1840..d8d69bf3da 100644
--- a/assets/design-system/src/stories/StackCard.stories.tsx
+++ b/assets/design-system/src/stories/StackCard.stories.tsx
@@ -60,13 +60,12 @@ function Template(args: any) {
 export const Default: Story = {
   render: Template,
   args: {
-  apps: [
-    { name: 'Airflow', imageUrl: '/logos/airflow-logo.svg' },
-    { name: 'Airbyte', imageUrl: '/logos/airbyte-logo.svg' },
-    { name: 'Console', imageUrl: '/logos/console-logo.png' },
-    { name: 'Crossplane', imageUrl: '/logos/crossplane-logo.png' },
-  ],
-  width: '420px',
-},
+    apps: [
+      { name: 'Airflow', imageUrl: '/logos/airflow-logo.svg' },
+      { name: 'Airbyte', imageUrl: '/logos/airbyte-logo.svg' },
+      { name: 'Console', imageUrl: '/logos/console-logo.png' },
+      { name: 'Crossplane', imageUrl: '/logos/crossplane-logo.png' },
+    ],
+    width: '420px',
+  },
 }
-
diff --git a/assets/design-system/src/stories/Stepper.stories.tsx b/assets/design-system/src/stories/Stepper.stories.tsx
index a50c2d2445..1023e72f17 100644
--- a/assets/design-system/src/stories/Stepper.stories.tsx
+++ b/assets/design-system/src/stories/Stepper.stories.tsx
@@ -112,4 +112,3 @@ export const Compact: Story = {
     compact: true,
   },
 }
-
diff --git a/assets/design-system/src/stories/Switch.stories.tsx b/assets/design-system/src/stories/Switch.stories.tsx
index 3a128bea9d..d6176aa53e 100644
--- a/assets/design-system/src/stories/Switch.stories.tsx
+++ b/assets/design-system/src/stories/Switch.stories.tsx
@@ -47,4 +47,3 @@ export const LightDarkMode: Story = {
     readOnly: false,
   },
 }
-
diff --git a/assets/design-system/src/stories/Tab.stories.tsx b/assets/design-system/src/stories/Tab.stories.tsx
index d838393a00..d51f925e6e 100644
--- a/assets/design-system/src/stories/Tab.stories.tsx
+++ b/assets/design-system/src/stories/Tab.stories.tsx
@@ -214,4 +214,3 @@ export const Subtab: Story = {
     disabled: false,
   },
 }
-
diff --git a/assets/design-system/src/stories/TabList.stories.tsx b/assets/design-system/src/stories/TabList.stories.tsx
index 424fa091a8..8086825184 100644
--- a/assets/design-system/src/stories/TabList.stories.tsx
+++ b/assets/design-system/src/stories/TabList.stories.tsx
@@ -351,4 +351,3 @@ export const AdvancedContent: Story = {
   render: TemplateComplex,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/Table.stories.tsx b/assets/design-system/src/stories/Table.stories.tsx
index 7c4e2b0a6a..e354f580ae 100644
--- a/assets/design-system/src/stories/Table.stories.tsx
+++ b/assets/design-system/src/stories/Table.stories.tsx
@@ -402,34 +402,34 @@ export const Loading: StoryObj<Parameters<typeof Template>[0]> = {
 export const Highlighted: StoryObj<Parameters<typeof Template>[0]> = {
   render: Template,
   args: {
-  fillLevel: 0,
-  rowBg: 'base',
-  width: '900px',
-  height: '400px',
-  data: repeatedData,
-  columns: (() => {
-    const c = [...columns]
-
-    c.splice(
-      2,
-      0,
-      columnHelper.accessor((row) => row.id, {
-        id: 'h',
-        cell: ({ getValue }) => getValue(),
-        header: 'Highlight',
-        meta: {
-          highlight: true,
-          truncate: true,
-          gridTemplate: 'minmax(150px, 1fr)',
-        },
-      })
-    )
-
-    return c
-  })(),
-  reactTableOptions: { getRowId: (_: any, index: any) => index },
-  highlightedRowId: 1,
-},
+    fillLevel: 0,
+    rowBg: 'base',
+    width: '900px',
+    height: '400px',
+    data: repeatedData,
+    columns: (() => {
+      const c = [...columns]
+
+      c.splice(
+        2,
+        0,
+        columnHelper.accessor((row) => row.id, {
+          id: 'h',
+          cell: ({ getValue }) => getValue(),
+          header: 'Highlight',
+          meta: {
+            highlight: true,
+            truncate: true,
+            gridTemplate: 'minmax(150px, 1fr)',
+          },
+        })
+      )
+
+      return c
+    })(),
+    reactTableOptions: { getRowId: (_: any, index: any) => index },
+    highlightedRowId: 1,
+  },
 }
 
 export const VirtualizedRows: StoryObj<Parameters<typeof Template>[0]> = {
@@ -500,33 +500,35 @@ export const StickyColumn: StoryObj<Parameters<typeof Template>[0]> = {
 export const Expandable: StoryObj<Parameters<typeof Template>[0]> = {
   render: Template,
   args: {
-  fillLevel: 0,
-  rowBg: 'base',
-  width: '900px',
-  height: '400px',
-  data: repeatedData,
-  columns: expandingColumns,
-  getRowCanExpand: (row: Row<Method>) => row.original.expandable,
-  renderExpanded: ({ row }: { row: Row<Method> }) => (
-    <P>{row.original.description}</P>
-  ),
-},
+    fillLevel: 0,
+    rowBg: 'base',
+    width: '900px',
+    height: '400px',
+    data: repeatedData,
+    columns: expandingColumns,
+    getRowCanExpand: (row: Row<Method>) => row.original.expandable,
+    renderExpanded: ({ row }: { row: Row<Method> }) => (
+      <P>{row.original.description}</P>
+    ),
+  },
 }
 
-export const FilterableAndSortable: StoryObj<Parameters<typeof FilterableTemplate>[0]> = {
+export const FilterableAndSortable: StoryObj<
+  Parameters<typeof FilterableTemplate>[0]
+> = {
   render: FilterableTemplate,
   args: {
-  fillLevel: 0,
-  rowBg: 'base',
-  virtualizeRows: true,
-  emptyStateProps: {
-    message: 'No results match your query',
+    fillLevel: 0,
+    rowBg: 'base',
+    virtualizeRows: true,
+    emptyStateProps: {
+      message: 'No results match your query',
+    },
+    width: 'auto',
+    height: '400px',
+    data: extremeLengthData,
+    columns,
   },
-  width: 'auto',
-  height: '400px',
-  data: extremeLengthData,
-  columns,
-},
 }
 
 export const Selectable: StoryObj<Parameters<typeof SelectableTemplate>[0]> = {
@@ -544,40 +546,39 @@ export const Selectable: StoryObj<Parameters<typeof SelectableTemplate>[0]> = {
 export const LinkableRows: StoryObj<Parameters<typeof Template>[0]> = {
   render: Template,
   args: {
-  fillLevel: 0,
-  rowBg: 'base',
-  width: '900px',
-  height: '400px',
-  data: repeatedData,
-  columns: [
-    ...columns.slice(0, 2),
-    columnHelper.display({
-      id: 'actions',
-      header: () => <span>Actions</span>,
-      cell: ({ row }) => (
-        <button
-          onClick={(e) => {
-            e.stopPropagation()
-            alert(`Action clicked for: ${row.original.function}`)
-          }}
-          style={{
-            padding: '4px 12px',
-            cursor: 'pointer',
-            background: '#1a1d24',
-            border: '1px solid #3d4149',
-            borderRadius: '4px',
-            color: '#babbbd',
-          }}
-        >
-          Action
-        </button>
-      ),
-    }),
-    ...columns.slice(2),
-  ],
-  onRowClick: (_e: MouseEvent, row: Row<any>) => console.log(row?.original),
-  getRowLink: (row: Row<Method>) =>
-    `https://example.com/function/${row.original.function}`,
-},
+    fillLevel: 0,
+    rowBg: 'base',
+    width: '900px',
+    height: '400px',
+    data: repeatedData,
+    columns: [
+      ...columns.slice(0, 2),
+      columnHelper.display({
+        id: 'actions',
+        header: () => <span>Actions</span>,
+        cell: ({ row }) => (
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              alert(`Action clicked for: ${row.original.function}`)
+            }}
+            style={{
+              padding: '4px 12px',
+              cursor: 'pointer',
+              background: '#1a1d24',
+              border: '1px solid #3d4149',
+              borderRadius: '4px',
+              color: '#babbbd',
+            }}
+          >
+            Action
+          </button>
+        ),
+      }),
+      ...columns.slice(2),
+    ],
+    onRowClick: (_e: MouseEvent, row: Row<any>) => console.log(row?.original),
+    getRowLink: (row: Row<Method>) =>
+      `https://example.com/function/${row.original.function}`,
+  },
 }
-
diff --git a/assets/design-system/src/stories/TipCarousel.stories.tsx b/assets/design-system/src/stories/TipCarousel.stories.tsx
index 3149519aeb..542a6e7f6a 100644
--- a/assets/design-system/src/stories/TipCarousel.stories.tsx
+++ b/assets/design-system/src/stories/TipCarousel.stories.tsx
@@ -58,4 +58,3 @@ export const Default: Story = {
     autoAdvanceTime: 10000,
   },
 }
-
diff --git a/assets/design-system/src/stories/Toast.stories.tsx b/assets/design-system/src/stories/Toast.stories.tsx
index 544ed71f49..5c20537ed7 100644
--- a/assets/design-system/src/stories/Toast.stories.tsx
+++ b/assets/design-system/src/stories/Toast.stories.tsx
@@ -124,4 +124,3 @@ export const Default: StoryObj<Parameters<typeof Template>[0]> = {
 export const GraphQL: StoryObj = {
   render: GraphQLTemplate,
 }
-
diff --git a/assets/design-system/src/stories/Tooltip.stories.tsx b/assets/design-system/src/stories/Tooltip.stories.tsx
index 10cb68be25..92522b55f8 100644
--- a/assets/design-system/src/stories/Tooltip.stories.tsx
+++ b/assets/design-system/src/stories/Tooltip.stories.tsx
@@ -171,4 +171,3 @@ export const Default: Story = {
   render: Template,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/TreeNavigation.stories.tsx b/assets/design-system/src/stories/TreeNavigation.stories.tsx
index 679aa77f6e..14207415d2 100644
--- a/assets/design-system/src/stories/TreeNavigation.stories.tsx
+++ b/assets/design-system/src/stories/TreeNavigation.stories.tsx
@@ -231,4 +231,3 @@ export const Default: Story = {
   render: Template,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/UserDetails.stories.tsx b/assets/design-system/src/stories/UserDetails.stories.tsx
index 61e21f8a8c..6bf8e5ff51 100644
--- a/assets/design-system/src/stories/UserDetails.stories.tsx
+++ b/assets/design-system/src/stories/UserDetails.stories.tsx
@@ -22,4 +22,3 @@ export const Default: Story = {
   render: Template,
   args: {},
 }
-
diff --git a/assets/design-system/src/stories/Wizard.stories.tsx b/assets/design-system/src/stories/Wizard.stories.tsx
index 37f10139a3..f28dc90ee8 100644
--- a/assets/design-system/src/stories/Wizard.stories.tsx
+++ b/assets/design-system/src/stories/Wizard.stories.tsx
@@ -259,4 +259,3 @@ export const Standalone: Story = {
   render: StandaloneTemplate,
   args: {},
 }
-
diff --git a/assets/design-system/src/types.ts b/assets/design-system/src/types.ts
index ef9aaf57ef..0cac0c4258 100644
--- a/assets/design-system/src/types.ts
+++ b/assets/design-system/src/types.ts
@@ -50,9 +50,7 @@ export function sanitizeSeverity<T extends SeverityExt>(
     `Warning: Severity of "${severity}" is not allowed. Using default of "${opts.default}"`
   )
 
-  return allowList.includes('neutral' as T)
-    ? ('neutral' as T)
-    : opts.default
+  return allowList.includes('neutral' as T) ? ('neutral' as T) : opts.default
 }
 
 export type Severity = (typeof SEVERITIES)[number]
diff --git a/assets/design-system/src/utils/useBimodalSelectState.ts b/assets/design-system/src/utils/useBimodalSelectState.ts
index 531e1670e6..bbeb3a7d98 100644
--- a/assets/design-system/src/utils/useBimodalSelectState.ts
+++ b/assets/design-system/src/utils/useBimodalSelectState.ts
@@ -171,9 +171,7 @@ function useBimodalSelectState<T extends object>({
         ? (props.defaultSelectedKey ?? null)
         : props.selectedKeys
           ? Array.from(
-              props.selectedKeys === 'all'
-                ? getAllKeys()
-                : props.selectedKeys
+              props.selectedKeys === 'all' ? getAllKeys() : props.selectedKeys
             )
           : [],
     setValue: (newValue) => {

From 246eef8428608aa0b5fce6b7674489972a698368 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 13:42:35 +0200
Subject: [PATCH 09/13] restore storybook preview

---
 .github/workflows/design-system-preview.yaml | 37 ++++++++++++++++++++
 assets/design-system/.firebaserc             |  5 +++
 assets/design-system/firebase.json           | 20 +++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 .github/workflows/design-system-preview.yaml
 create mode 100644 assets/design-system/.firebaserc
 create mode 100644 assets/design-system/firebase.json

diff --git a/.github/workflows/design-system-preview.yaml b/.github/workflows/design-system-preview.yaml
new file mode 100644
index 0000000000..a5de0b4154
--- /dev/null
+++ b/.github/workflows/design-system-preview.yaml
@@ -0,0 +1,37 @@
+name: Design system / Storybook preview
+
+on:
+  pull_request:
+    branches:
+      - "**"
+    paths:
+      - "assets/design-system/**"
+      - ".github/workflows/design-system-preview.yaml"
+
+permissions:
+  checks: write
+  contents: read
+  pull-requests: write
+
+jobs:
+  preview:
+    name: Create preview
+    if: ${{ github.actor != 'renovate[bot]' }}
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        shell: bash
+        working-directory: assets
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24.11.1
+      - run: yarn --immutable
+      - run: yarn workspace @pluralsh/design-system build:storybook
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_PLURALSH_DESIGN }}
+          projectId: pluralsh-design
+          entryPoint: assets/design-system
diff --git a/assets/design-system/.firebaserc b/assets/design-system/.firebaserc
new file mode 100644
index 0000000000..f10f72dc6d
--- /dev/null
+++ b/assets/design-system/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "pluralsh-design"
+  }
+}
diff --git a/assets/design-system/firebase.json b/assets/design-system/firebase.json
new file mode 100644
index 0000000000..e253544eb7
--- /dev/null
+++ b/assets/design-system/firebase.json
@@ -0,0 +1,20 @@
+{
+  "emulators": {
+    "hosting": {
+      "port": 5000,
+      "host": "0.0.0.0"
+    }
+  },
+  "hosting": {
+    "public": "storybook-static",
+    "ignore": [
+      "firebase.json"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

From 8adf668d9f2a49ed9b96917efd91caa83c8f1ac7 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 15:28:38 +0200
Subject: [PATCH 10/13] fix code editor

---
 assets/design-system/src/components/CodeEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/design-system/src/components/CodeEditor.tsx b/assets/design-system/src/components/CodeEditor.tsx
index 736ed80622..fe0411b026 100644
--- a/assets/design-system/src/components/CodeEditor.tsx
+++ b/assets/design-system/src/components/CodeEditor.tsx
@@ -51,7 +51,7 @@ export default function CodeEditor({
   const monaco = useMonaco()
   const [current, setCurrent] = useState<string>(value ?? '')
   const [copied, setCopied] = useState<boolean>(false)
-  const changed = current !== value
+  const changed = current !== (value ?? '')
 
   const onEditorMount = useCallback(
     (editor: any) => {

From 11c3570f51e5f1b38344f8c332f58c90647680b1 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 15:29:56 +0200
Subject: [PATCH 11/13] pin preview actions

---
 .github/workflows/design-system-preview.yaml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/design-system-preview.yaml b/.github/workflows/design-system-preview.yaml
index a5de0b4154..58d46981eb 100644
--- a/.github/workflows/design-system-preview.yaml
+++ b/.github/workflows/design-system-preview.yaml
@@ -23,13 +23,13 @@ jobs:
         shell: bash
         working-directory: assets
     steps:
-      - uses: actions/checkout@v6
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@d23441a48e516b6c34aea4fa41551a30e30af803 # v6.1.0
+      - uses: actions/setup-node@249970729cb0ef3589644e2896645e5dc5ba9c38 # v6.5.0
         with:
           node-version: 24.11.1
       - run: yarn --immutable
       - run: yarn workspace @pluralsh/design-system build:storybook
-      - uses: FirebaseExtended/action-hosting-deploy@v0
+      - uses: FirebaseExtended/action-hosting-deploy@500ac625ca2dd40cbd15f7659af953801858032a # v0.11.0
         with:
           repoToken: ${{ secrets.GITHUB_TOKEN }}
           firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_PLURALSH_DESIGN }}

From bbfc5ec0db65669e3b06f8e0a5b59e94db19e08d Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 15:31:18 +0200
Subject: [PATCH 12/13] fix checklist

---
 assets/design-system/src/components/Checklist.tsx      | 6 +++---
 assets/design-system/src/stories/Checklist.stories.tsx | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/assets/design-system/src/components/Checklist.tsx b/assets/design-system/src/components/Checklist.tsx
index 3d4c661177..5b8f27c547 100644
--- a/assets/design-system/src/components/Checklist.tsx
+++ b/assets/design-system/src/components/Checklist.tsx
@@ -84,10 +84,10 @@ type ChecklistProps = ComponentPropsWithRef<'div'> & {
 }
 
 type ChecklistStateProps = {
-  onSelectionChange?: Dispatch<number>
+  onSelectionChange?: Dispatch<number | null>
   onFocusChange?: Dispatch<number>
   onOpenChange?: Dispatch<boolean>
-  selectedKey?: number
+  selectedKey?: number | null
   focusedKey?: number
   completedKey?: number
   isOpen?: boolean
@@ -124,7 +124,7 @@ function ChecklistUnstyled({
 
   const onSelectionChangeWrapper = useCallback(
     (idx: number | null) => {
-      if (idx === null || idx >= children.length || idx < 0) return
+      if (idx !== null && (idx >= children.length || idx < 0)) return
       onSelectionChange?.(idx)
     },
     [children, onSelectionChange]
diff --git a/assets/design-system/src/stories/Checklist.stories.tsx b/assets/design-system/src/stories/Checklist.stories.tsx
index 83b53afde4..3cb46827bd 100644
--- a/assets/design-system/src/stories/Checklist.stories.tsx
+++ b/assets/design-system/src/stories/Checklist.stories.tsx
@@ -18,7 +18,7 @@ export default meta
 type Story = StoryObj<any>
 
 function Template() {
-  const [selected, setSelected] = useState<number>(0)
+  const [selected, setSelected] = useState<number | null>(0)
   const [focused, setFocused] = useState<number>(-1)
   const [completed, setCompleted] = useState<number>(-1)
   const [open, setOpen] = useState<boolean>(true)
@@ -35,11 +35,11 @@ function Template() {
   }
 
   const isCompleted = useCallback(
-    () => completed >= selected,
+    () => selected !== null && completed >= selected,
     [completed, selected]
   )
   const canComplete = useCallback(
-    () => Math.abs(selected - completed) === 1,
+    () => selected !== null && Math.abs(selected - completed) === 1,
     [selected, completed]
   )
 
@@ -47,6 +47,7 @@ function Template() {
     <Button
       small
       onClick={() => {
+        if (selected === null) return
         setCompleted(selected)
         setSelected(selected + 1)
         setFocused(selected + 1)

From 084d0fcf3772d8f39ec0ee009f26d4908f6f34fb Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Fri, 7 Aug 2026 15:32:01 +0200
Subject: [PATCH 13/13] improve tests

---
 assets/design-system/src/utils/urls.test.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/assets/design-system/src/utils/urls.test.ts b/assets/design-system/src/utils/urls.test.ts
index 1864600635..3657c1927d 100644
--- a/assets/design-system/src/utils/urls.test.ts
+++ b/assets/design-system/src/utils/urls.test.ts
@@ -82,6 +82,8 @@ describe('URL utils', () => {
     externalUrls.forEach((url) => {
       expect(isExternalUrl(url)).toBeTruthy()
     })
+    expect(isExternalUrl(null)).toBeFalsy()
+    expect(isExternalUrl(undefined)).toBeFalsy()
   })
 
   it('should remove trailing slashes', () => {