diff --git a/.github/workflows/design-system-preview.yaml b/.github/workflows/design-system-preview.yaml
new file mode 100644
index 0000000000..58d46981eb
--- /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@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@500ac625ca2dd40cbd15f7659af953801858032a # v0.11.0
+        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"
+      }
+    ]
+  }
+}
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..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
@@ -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..b383731bb8 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,12 @@ 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 +291,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 +417,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 +516,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..fe0411b026 100644
--- a/assets/design-system/src/components/CodeEditor.tsx
+++ b/assets/design-system/src/components/CodeEditor.tsx
@@ -49,9 +49,9 @@ 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
+  const changed = current !== (value ?? '')
 
   const onEditorMount = useCallback(
     (editor: any) => {
@@ -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 0bb8df94b8..ec09941389 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)
@@ -246,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) {
@@ -263,40 +265,38 @@ function ComboBox({
     [wrappedOnOpenChange]
   )
 
-  const wrappedOnSelectionChange: typeof onSelectionChange = useCallback(
-    (newKey, ...args) => {
-      if (onSelectionChange) {
-        onSelectionChange.apply(this, [
-          typeof newKey === 'string' ? newKey : '',
-          ...args,
-        ])
-        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(
-    (isFocused, ...args) => {
+  const wrappedOnFocusChange: NonNullable<typeof onFocusChange> = useCallback(
+    (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) => {
+  const wrappedOnInputChange: NonNullable<typeof onInputChange> = useCallback(
+    (input) => {
       if (input !== previousInputValue.current) {
         previousInputValue.current = input
         setIsOpen(true)
       }
       if (onInputChange) {
-        onInputChange(input, ...args)
+        onInputChange(input)
       }
     },
     [onInputChange, setIsOpen]
@@ -341,16 +341,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,
@@ -363,7 +363,7 @@ function ComboBox({
   }
 
   const { floating, triggerRef } = useFloatingDropdown({
-    triggerRef: inputRef,
+    triggerRef: triggerElRef,
     width,
     maxHeight,
     placement,
@@ -390,7 +390,7 @@ function ComboBox({
         if (nextChipClose instanceof HTMLElement) {
           nextChipClose.focus?.()
         } else {
-          inputRef.current?.querySelector('input')?.focus?.()
+          inputInnerRef.current?.focus?.()
         }
       }
 
@@ -424,20 +424,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?.()
       }
     }
   }, [])
@@ -452,7 +456,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..c68bab9824 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,9 @@ 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 +50,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..d06895c7e3 100644
--- a/assets/design-system/src/components/Input2.tsx
+++ b/assets/design-system/src/components/Input2.tsx
@@ -211,13 +211,13 @@ const InputAreaSC = styled.div((_) => ({
   flex: '1 1',
   overflowX: 'auto',
 }))
-const InputContentSC = styled.div<{ $padStart: keyof DefaultTheme['spacing'] }>(
-  ({ theme, $padStart }) => ({
-    display: 'flex',
-    alignSelf: 'stretch',
-    paddingLeft: theme.spacing[$padStart],
-  })
-)
+const InputContentSC = styled.div<{
+  $padStart?: keyof DefaultTheme['spacing'] | null
+}>(({ theme, $padStart }) => ({
+  display: 'flex',
+  alignSelf: 'stretch',
+  ...($padStart ? { paddingLeft: theme.spacing[$padStart] } : {}),
+}))
 
 function Input2({
   ref,
@@ -266,7 +266,7 @@ function Input2({
       (inputAreaRef.current?.getBoundingClientRect().width ?? 0)
 
     if (scrollDiff > 0) {
-      inputAreaRef.current.scrollTo({
+      inputAreaRef.current?.scrollTo({
         left: scrollDiff + 1,
         behavior: 'smooth',
       })
@@ -293,33 +293,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/src/components/ListBox.tsx b/assets/design-system/src/components/ListBox.tsx
index d5f6ad918c..d543369cc0 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,8 @@ 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 +239,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 +251,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 +273,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..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'] 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..88cb7da3b2 100644
--- a/assets/design-system/src/components/LoopingLogo.tsx
+++ b/assets/design-system/src/components/LoopingLogo.tsx
@@ -14,8 +14,8 @@ 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..00438ab663 100644
--- a/assets/design-system/src/components/LoopingLogoAlternative.tsx
+++ b/assets/design-system/src/components/LoopingLogoAlternative.tsx
@@ -14,8 +14,8 @@ 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 011fa9b27d..9c4e2c9247 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, {
@@ -178,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',
@@ -223,7 +225,7 @@ function SelectButton({
   return (
     <SelectButtonInner
       ref={ref}
-      $isOpen={isOpen}
+      $isOpen={!!isOpen}
       $size={size}
       $parentFillLevel={parentFillLevel}
       $transparent={transparent}
@@ -299,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
@@ -337,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 afa145475d..6dc58b0499 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,9 +19,9 @@ type UseSelectComboStatePropsArgs<T extends TType> = Pick<
   | 'onHeaderClick'
   | 'children'
 > & {
-  setIsOpen: Dispatch<SetStateAction<boolean>>
+  setIsOpen: (open: boolean) => void
   stateRef: RefObject<ListState<object> | null>
-  nextFocusedKeyRef: RefObject<Key>
+  nextFocusedKeyRef: RefObject<Key | null>
 }
 
 type UseSelectComboStatePropsReturn<T extends TType> = Pick<
@@ -66,10 +60,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 (
@@ -93,11 +87,13 @@ 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:
-          onSelectionChange?.apply(this, [newKeyOrKeys, ...args])
+          ;(
+            onSelectionChange as ((key: Key | Selection) => void) | undefined
+          )?.(newKeyOrKeys)
           break
       }
     },
@@ -110,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..65efb748b6 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,7 @@ 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 0ca996f30e..0a271c7f17 100644
--- a/assets/design-system/src/components/TagMultiSelect.tsx
+++ b/assets/design-system/src/components/TagMultiSelect.tsx
@@ -85,14 +85,16 @@ 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={
             <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 1115873ab5..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,10 +132,11 @@ 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 rowVirtualizer = useVirtualizer({
+  const getItemKey = useCallback(
+    (i: number) => tableRows[i]?.id || i,
+    [tableRows]
+  )
+  const rowVirtualizer = useVirtualizer<HTMLDivElement, Element>({
     count: hasNextPage ? tableRows.length + 1 : tableRows.length,
     overscan: 10,
     getItemKey,
@@ -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/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/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..108ae5c04c 100644
--- a/assets/design-system/src/components/wizard/hooks.ts
+++ b/assets/design-system/src/components/wizard/hooks.ts
@@ -4,13 +4,10 @@ import { isEmpty, isEqual } from 'lodash-es'
 import { type ContextProps, type StepConfig, WizardContext } from './context'
 
 const useActive = <T = unknown>() => {
-  const {
-    steps,
-    setSteps,
-    active: activeIdx,
-  } = useContext<ContextProps<T>>(WizardContext)
+  const ctx = useContext(WizardContext) as ContextProps<T>
+  const { steps, setSteps, active: activeIdx } = 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 +21,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 +41,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 +61,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 +87,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 +159,7 @@ const useNavigation = () => {
 }
 
 const usePicker = () => {
-  const { steps, setSteps } = useContext(WizardContext)
+  const { steps, setSteps } = useContext(WizardContext) as ContextProps
 
   const onSelect = useCallback(
     (elem: StepConfig) => {
@@ -203,7 +203,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/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/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/stories/A.stories.tsx b/assets/design-system/src/stories/A.stories.tsx
index ed9299e164..a9a05a56e0 100644
--- a/assets/design-system/src/stories/A.stories.tsx
+++ b/assets/design-system/src/stories/A.stories.tsx
@@ -1,9 +1,13 @@
 import { A, Flex } from 'honorable'
+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 (
@@ -29,8 +33,9 @@ function Template(args: any) {
   )
 }
 
-export const Primary = 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 d9838d7267..797d3a9872 100644
--- a/assets/design-system/src/stories/AWSIcons.stories.tsx
+++ b/assets/design-system/src/stories/AWSIcons.stories.tsx
@@ -1,10 +1,14 @@
 import { useTheme } from 'styled-components'
 import AWSIcon, { AWSIconName } from '../components/icons/AWSIcon'
+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()
@@ -45,7 +49,9 @@ function Template({ size, ...args }: any) {
   )
 }
 
-export const Default = 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 2c4877ca65..c4b3084f74 100644
--- a/assets/design-system/src/stories/Accordion.stories.tsx
+++ b/assets/design-system/src/stories/Accordion.stories.tsx
@@ -1,7 +1,8 @@
 import { Accordion } from '..'
 import { AccordionItem } from '../components/Accordion'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Accordion',
   component: Accordion,
   argTypes: {
@@ -36,16 +37,21 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
-export const Default = 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 37fcfb8291..e5e608a1b3 100644
--- a/assets/design-system/src/stories/AppIcon.stories.tsx
+++ b/assets/design-system/src/stories/AppIcon.stories.tsx
@@ -3,8 +3,9 @@ import { Flex, H3 } from 'honorable'
 import { Card, PluralLogoMark, WrapWithIf } from '..'
 
 import AppIcon from '../components/AppIcon'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'AppIcon',
   component: AppIcon,
   argTypes: {
@@ -33,7 +34,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const sizes = [
   { label: 'Extra Large', size: 'xlarge' },
@@ -104,11 +108,13 @@ function Template({ onFillLevel, icon, ...args }: any) {
   )
 }
 
-export const Default = 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 a586e2b08e..f7e5a841c8 100644
--- a/assets/design-system/src/stories/Avatar.stories.tsx
+++ b/assets/design-system/src/stories/Avatar.stories.tsx
@@ -1,35 +1,43 @@
 import { Avatar } from 'honorable'
+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 = Template.bind({})
-
-Default.args = {
-  name: 'Jane Smith',
+export const Default: Story = {
+  render: Template,
+  args: {
+    name: 'Jane Smith',
+  },
 }
 
-export const ComplexName = Template.bind({})
-
-ComplexName.args = {
-  name: 'Edgard Alan Poe',
+export const ComplexName: Story = {
+  render: Template,
+  args: {
+    name: 'Edgard Alan Poe',
+  },
 }
 
-export const Image = 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 = 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 7522170e3f..77a4a091a8 100644
--- a/assets/design-system/src/stories/Banner.stories.tsx
+++ b/assets/design-system/src/stories/Banner.stories.tsx
@@ -1,8 +1,9 @@
 import { A, Flex, H1 } from 'honorable'
 
 import Banner, { BANNER_SEVERITIES } from '../components/Banner'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Banner (AKA Toast Content)',
   component: Banner,
   argTypes: {
@@ -10,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) {
@@ -133,9 +136,10 @@ function Template({ closeButton, ...args }: any) {
   )
 }
 
-export const Default = 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 7f952351cf..47505ecce8 100644
--- a/assets/design-system/src/stories/Breadcrumbs.stories.tsx
+++ b/assets/design-system/src/stories/Breadcrumbs.stories.tsx
@@ -13,14 +13,18 @@ import { ListBoxItem } from '../components/ListBoxItem'
 import FormField from '../components/FormField'
 
 import { NavContextProviderStub } from './NavigationContextStub'
+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[] = [
   {
@@ -159,18 +163,20 @@ function ManualTemplate(args: any) {
   )
 }
 
-export const UsingContext = 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 = 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 eaa2e0f55e..1b7df8e26a 100644
--- a/assets/design-system/src/stories/Button.stories.tsx
+++ b/assets/design-system/src/stories/Button.stories.tsx
@@ -2,8 +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 { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Button',
   component: Button,
   argTypes: {
@@ -20,7 +21,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function TemplateBase(args: any) {
   return (
@@ -87,57 +91,63 @@ function Template(args: any) {
   )
 }
 
-export const Primary = 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 = 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 = 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 = 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 = 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 = 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 91539e1fe5..9916c85b30 100644
--- a/assets/design-system/src/stories/ButtonGroup.stories.tsx
+++ b/assets/design-system/src/stories/ButtonGroup.stories.tsx
@@ -1,11 +1,12 @@
 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'
 
 import { SubTab, TabList, type TabListStateProps, TabPanel } from '..'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'ButtonGroup',
   component: SubTab,
   argTypes: {
@@ -16,7 +17,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const tabs = {
   lions: {
@@ -42,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 = {
@@ -101,7 +107,9 @@ function TemplateBasic(args: any) {
   )
 }
 
-export const Default = 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 b17f4b1739..42e32f0d2a 100644
--- a/assets/design-system/src/stories/Callout.stories.tsx
+++ b/assets/design-system/src/stories/Callout.stories.tsx
@@ -4,8 +4,9 @@ import { useState } from 'react'
 
 import { type FillLevel } from '../components/contexts/FillLevelContext'
 import { Button, Callout, type CalloutProps, Card } from '..'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Callout',
   component: Callout,
   argTypes: {
@@ -29,8 +30,9 @@ export default {
       control: { type: 'boolean' },
     },
   },
-}
+} satisfies Meta<any>
 
+export default meta
 const styles: CalloutProps['severity'][] = [
   'info',
   'neutral',
@@ -186,71 +188,89 @@ function CloseableTemplate({ title }: CalloutProps) {
   )
 }
 
-export const Default = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 94a8c8ed2b..6ee016464b 100644
--- a/assets/design-system/src/stories/Card.stories.tsx
+++ b/assets/design-system/src/stories/Card.stories.tsx
@@ -6,10 +6,10 @@ import { type FillLevel } from '../components/contexts/FillLevelContext'
 
 import type { CardProps } from '../components/Card'
 import { Card, Flex, InfoOutlineIcon, Tooltip } from '../index'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Card',
-  component: null,
   argTypes: {
     headerSize: {
       options: ['medium', 'large'],
@@ -19,8 +19,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',
@@ -137,53 +138,61 @@ function FillLevelTemplate({
   )
 }
 
-export const Default = Template.bind({})
-Default.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>
-  ),
+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>
+    ),
+  },
 }
 
-export const Clickable = Template.bind({})
-Clickable.args = {
-  ...Default.args,
-  ...{
-    clickable: true,
+export const Clickable: StoryObj<Parameters<typeof Template>[0]> = {
+  render: Template,
+  args: {
+    ...Default.args,
+    ...{
+      clickable: true,
+    },
   },
 }
 
-export const WithFillLevelContext = FillLevelTemplate.bind({})
-WithFillLevelContext.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>
-  ),
+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>
+    ),
+  },
 }
diff --git a/assets/design-system/src/stories/CatalogCard.stories.tsx b/assets/design-system/src/stories/CatalogCard.stories.tsx
index 158d1eae35..1025f6792d 100644
--- a/assets/design-system/src/stories/CatalogCard.stories.tsx
+++ b/assets/design-system/src/stories/CatalogCard.stories.tsx
@@ -1,11 +1,15 @@
 import { Div } from 'honorable'
 
 import CatalogCard from '../components/CatalogCard'
+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 (
@@ -43,22 +47,23 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
-
-Default.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',
-  ],
+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',
+    ],
+  },
 }
diff --git a/assets/design-system/src/stories/CheckBox.stories.tsx b/assets/design-system/src/stories/CheckBox.stories.tsx
index 2f39a668b3..45febd7a47 100644
--- a/assets/design-system/src/stories/CheckBox.stories.tsx
+++ b/assets/design-system/src/stories/CheckBox.stories.tsx
@@ -4,11 +4,15 @@ import { useState } from 'react'
 import { type Key } from '@react-types/shared'
 
 import { Button, Checkbox } from '..'
+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>
@@ -86,18 +90,22 @@ function Template(args: any) {
   )
 }
 
-export const Default = 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 = 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 909e69806d..3cb46827bd 100644
--- a/assets/design-system/src/stories/Checklist.stories.tsx
+++ b/assets/design-system/src/stories/Checklist.stories.tsx
@@ -7,14 +7,18 @@ 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 { 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)
+  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)
@@ -31,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]
   )
 
@@ -43,6 +47,7 @@ function Template() {
     <Button
       small
       onClick={() => {
+        if (selected === null) return
         setCompleted(selected)
         setSelected(selected + 1)
         setFocused(selected + 1)
@@ -213,6 +218,7 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
-
-Default.args = {}
+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 7573fc19ba..9886c17292 100644
--- a/assets/design-system/src/stories/Chip.stories.tsx
+++ b/assets/design-system/src/stories/Chip.stories.tsx
@@ -8,8 +8,9 @@ import Card from '../components/Card'
 import { SEVERITIES } from '../types'
 
 import { Link } from './NavigationContextStub'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Chip',
   component: Chip,
   argTypes: {
@@ -26,13 +27,16 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
-const sizes: ComponentProps<typeof Chip>['size'][] = [
+const sizes = [
   'small',
   'medium',
   'large',
-]
+] as const satisfies readonly NonNullable<ComponentProps<typeof Chip>['size']>[]
 
 const severities = SEVERITIES
 
@@ -232,13 +236,15 @@ function Template({ onFillLevel, asLink, ...args }: any) {
   )
 }
 
-export const Default = 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 a2c6506096..5280f94056 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 { Meta, StoryObj } from '@storybook/react'
 
 const sizes: ComponentProps<typeof Chip>['size'][] = [
   'small',
@@ -14,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: {
@@ -37,7 +38,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function TextTemplate({ onFillLevel, ...args }: any) {
   const VALUES = [
@@ -151,32 +155,40 @@ function EmptyTemplate({ onFillLevel, ...args }: any) {
   )
 }
 
-export const Text = 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 = 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 = 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 = 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..933a459858 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>())
@@ -155,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/Code.stories.tsx b/assets/design-system/src/stories/Code.stories.tsx
index 7a4515965b..6e4458faaf 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 { Meta, StoryObj } from '@storybook/react'
 
 import {
   cCode,
@@ -12,7 +13,7 @@ import {
   tfCode,
 } from '../constants'
 
-export default {
+const meta = {
   title: 'Code',
   component: Code,
   argTypes: {
@@ -48,7 +49,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template({ onFillLevel, ...args }: any) {
   return (
@@ -232,20 +236,24 @@ function WithTabsTemplate({ onFillLevel, title, ...args }: any) {
   )
 }
 
-export const Default = Template.bind({})
-Default.args = {
-  title: '',
-  showLineNumbers: true,
-  showHeader: undefined,
+export const Default: Story = {
+  render: Template,
+  args: {
+    title: '',
+    showLineNumbers: true,
+    showHeader: undefined,
+  },
 }
 
-export const WithTabs = 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
@@ -350,12 +358,14 @@ function MermaidTemplate({ onFillLevel, ...args }: any) {
   )
 }
 
-export const Mermaid = 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 = [
@@ -414,10 +424,12 @@ function MermaidWithTabsTemplate({ onFillLevel, title, ...args }: any) {
   )
 }
 
-export const MermaidWithTabs = 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 7371de4148..3fec73f6a3 100644
--- a/assets/design-system/src/stories/CodeEditor.stories.tsx
+++ b/assets/design-system/src/stories/CodeEditor.stories.tsx
@@ -3,8 +3,9 @@ import { Div, Flex } from 'honorable'
 import { Card, CodeEditor, WrapWithIf } from '..'
 
 import { goCode, jsCode, tfCode } from '../constants'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Code Editor',
   component: CodeEditor,
   argTypes: {
@@ -26,7 +27,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template({ onFillLevel, ...args }: any) {
   return (
@@ -111,10 +115,14 @@ function StretchedTemplate({ onFillLevel, ...args }: any) {
   )
 }
 
-export const Default = Template.bind({})
-Default.args = {
-  options: { lineNumbers: true },
+export const Default: Story = {
+  render: Template,
+  args: {
+    options: { lineNumbers: true },
+  },
 }
 
-export const Stretched = StretchedTemplate.bind({})
-Stretched.args = {}
+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 bf5addbcfc..8503b502aa 100644
--- a/assets/design-system/src/stories/Codeline.stories.tsx
+++ b/assets/design-system/src/stories/Codeline.stories.tsx
@@ -1,11 +1,15 @@
 import { Flex } from 'honorable'
 
 import { Codeline } from '..'
+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 (
@@ -46,14 +50,16 @@ function CustomCopyTemplate(args: any) {
   )
 }
 
-export const Default = 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 = 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 e4f3644dd3..c7974849eb 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 { StoryObj } from '@storybook/react'
 
 const ColorBox = styled(FilledBox)<{ $colorKey: string | number }>(
   ({ theme, $colorKey }) => ({
@@ -116,7 +117,9 @@ function Template() {
   )
 }
 
-const Exp = 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 e70eb59717..16cbfbceb2 100644
--- a/assets/design-system/src/stories/ComboBox.stories.tsx
+++ b/assets/design-system/src/stories/ComboBox.stories.tsx
@@ -21,10 +21,11 @@ import {
 
 import { ClusterTagsTemplate } from './ClusterTagsTemplate'
 import TagMultiSelectTemplate from './TagMultiselectTemplate'
+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],
@@ -39,8 +40,9 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
 
+export default meta
 const portrait = (
   <AppIcon
     spacing="none"
@@ -119,7 +121,7 @@ const items: Item[] = [
     key: 'sushi',
     label: 'Sushi',
     description: 'With ham and cheese',
-    chips: null,
+    chips: undefined,
     version: '0.2.26',
   },
   {
@@ -196,6 +198,7 @@ function Template({
 }: {
   onFillLevel: any
   withTitleContent: boolean
+  loading?: boolean
 }) {
   const [selectedKeys, setSelectedKeys] = useState(new Set<Key>())
   const [inputValue, setInputValue] = useState('')
@@ -213,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 }))
@@ -274,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
@@ -320,6 +329,7 @@ function TagsTemplate({
 }: {
   onFillLevel: any
   withTitleContent: boolean
+  loading?: boolean
 }) {
   const [selectedKeys, setSelectedKeys] = useState(new Set<Key>())
   const [inputValue, setInputValue] = useState('')
@@ -350,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 }))
@@ -373,7 +391,7 @@ function TagsTemplate({
     setInputValue(value)
   }
 
-  let newKey = inputValue
+  let newKey: string | null = inputValue
     .toLowerCase()
     .replaceAll(/\s+/g, '-')
     .replaceAll(/[^a-z-]/g, '')
@@ -406,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)
             }}
@@ -436,16 +456,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
@@ -473,24 +491,30 @@ function TagsTemplate({
   )
 }
 
-export const Default = 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 = 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 = 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 = [
   { name: 'local', value: 'true' },
@@ -510,18 +534,22 @@ const TAGS = [
 ]
 const tags = uniqWith(TAGS, isEqual)
 
-export const TagMultiSelect = TagMultiSelectTemplate.bind({})
-TagMultiSelect.args = {
-  loading: false,
-  options: tags.map((tag) => `${tag.name}:${tag.value}`),
-  width: 100,
-  onSelectedTagsChange: (keys: Set<Key>) => {
-    console.log('Selected keys:', keys)
-  },
-  onFilterChange: (filter: string) => {
-    console.log('Filter:', filter)
-  },
-  onChangeMatchType: (matchType: 'AND' | 'OR') => {
-    console.log('Match type: ', matchType)
+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)
+    },
   },
 }
diff --git a/assets/design-system/src/stories/Date.stories.tsx b/assets/design-system/src/stories/Date.stories.tsx
index 665349e1ba..edb33ffea9 100644
--- a/assets/design-system/src/stories/Date.stories.tsx
+++ b/assets/design-system/src/stories/Date.stories.tsx
@@ -1,11 +1,15 @@
 import styled from 'styled-components'
 
 import { Date } from '..'
+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',
@@ -39,8 +43,9 @@ function Template() {
   )
 }
 
-export const Default = 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 5e3b83f41f..a1a9fbbe25 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 { Meta, StoryObj } from '@storybook/react'
 
 const OLD_VALUE = `apiVersion: v1
 kind: ConfigMap
@@ -19,7 +20,7 @@ data:
   extra: true
 `
 
-export default {
+const meta = {
   title: 'DiffViewer',
   component: DiffViewer,
   argTypes: {
@@ -33,7 +34,10 @@ export default {
       control: 'boolean',
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -43,20 +47,24 @@ function Template(args: any) {
   )
 }
 
-export const Default = 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 = 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 2556e54572..04262960f5 100644
--- a/assets/design-system/src/stories/Divider.stories.tsx
+++ b/assets/design-system/src/stories/Divider.stories.tsx
@@ -1,22 +1,28 @@
 import Divider from '../components/Divider'
+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 = Template.bind({})
-
-Default.args = {
-  text: '',
+export const Default: Story = {
+  render: Template,
+  args: {
+    text: '',
+  },
 }
 
-export const Text = 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 b0c2fa1fb7..a0141597a5 100644
--- a/assets/design-system/src/stories/EmptyState.stories.tsx
+++ b/assets/design-system/src/stories/EmptyState.stories.tsx
@@ -2,21 +2,26 @@ import { Button } from 'honorable'
 
 import BellIcon from '../components/icons/BellIcon'
 import EmptyState from '../components/EmptyState'
+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 = 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 9d1f65f0de..0d5a8f8a6b 100644
--- a/assets/design-system/src/stories/Flyover.stories.tsx
+++ b/assets/design-system/src/stories/Flyover.stories.tsx
@@ -5,12 +5,16 @@ import styled from 'styled-components'
 
 import { Button, Card, Code, Flyover, FormField, Input2, SearchIcon } from '..'
 import { jsCode } from '../constants'
+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 (
@@ -142,25 +146,28 @@ function NonScrollTemplate(args: any) {
   )
 }
 
-export const Default = 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 = 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 = 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 c7a6d1a302..7463f8db7b 100644
--- a/assets/design-system/src/stories/FormField.stories.tsx
+++ b/assets/design-system/src/stories/FormField.stories.tsx
@@ -5,11 +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 { 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('')
@@ -84,119 +88,132 @@ function AllSizesTemplate(args: any) {
   )
 }
 
-export const Full = AllSizesTemplate.bind({})
-
-Full.args = {
-  label: 'Label',
-  caption: 'Action',
-  maxLength: 120,
-  hint: 'Hint text',
-  startIcon: <MagnifyingGlassIcon />,
-  endIcon: (
-    <CaretDownIcon
-      size={10}
-      mt={0.333}
-      mx="3px"
-    />
-  ),
+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"
+      />
+    ),
+  },
 }
 
-export const FullError = AllSizesTemplate.bind({})
-
-FullError.args = {
-  ...Full.args,
-  ...{
-    label: 'Password',
-    hint: 'Something is wrong',
-    error: true,
+export const FullError: Story = {
+  render: AllSizesTemplate,
+  args: {
+    ...Full.args,
+    ...{
+      label: 'Password',
+      hint: 'Something is wrong',
+      error: true,
+    },
   },
 }
 
-export const FullDisabled = AllSizesTemplate.bind({})
-
-FullDisabled.args = {
-  ...Full.args,
-  ...{
-    disabled: true,
+export const FullDisabled: Story = {
+  render: AllSizesTemplate,
+  args: {
+    ...Full.args,
+    ...{
+      disabled: true,
+    },
   },
 }
 
-export const Horizontal = Template.bind({})
-
-Horizontal.args = {
-  ...Full.args,
-  layout: 'horizontal',
+export const Horizontal: Story = {
+  render: Template,
+  args: {
+    ...Full.args,
+    layout: 'horizontal',
+  },
 }
 
-export const Default = AllSizesTemplate.bind({})
-
-Default.args = {}
-
-export const Label = AllSizesTemplate.bind({})
-
-Label.args = {
-  label: 'Email',
+export const Default: Story = {
+  render: AllSizesTemplate,
+  args: {},
 }
 
-export const Required = AllSizesTemplate.bind({})
-
-Required.args = {
-  label: 'Email',
-  required: true,
+export const Label: Story = {
+  render: AllSizesTemplate,
+  args: {
+    label: 'Email',
+  },
 }
 
-export const Caption = AllSizesTemplate.bind({})
-
-Caption.args = {
-  label: 'Password',
-  caption: 'A short caption',
+export const Required: Story = {
+  render: AllSizesTemplate,
+  args: {
+    label: 'Email',
+    required: true,
+  },
 }
 
-export const LongCaption = AllSizesTemplate.bind({})
-
-LongCaption.args = {
-  label: 'Label',
-  caption:
-    'This will probably truncate, because it is ever so so longer than usual.',
+export const Caption: Story = {
+  render: AllSizesTemplate,
+  args: {
+    label: 'Password',
+    caption: 'A short caption',
+  },
 }
 
-export const HintText = AllSizesTemplate.bind({})
-
-HintText.args = {
-  label: 'Label',
-  hint: 'Some hint text',
+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 MaxLength = AllSizesTemplate.bind({})
-
-MaxLength.args = {
-  label: 'Label',
-  maxLength: 30,
+export const HintText: Story = {
+  render: AllSizesTemplate,
+  args: {
+    label: 'Label',
+    hint: 'Some hint text',
+  },
 }
 
-export const ArbitraryHintContent = AllSizesTemplate.bind({})
-
-ArbitraryHintContent.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>
-  ),
+export const MaxLength: Story = {
+  render: AllSizesTemplate,
+  args: {
+    label: 'Label',
+    maxLength: 30,
+  },
 }
 
-export const Multiline = AllSizesTemplate.bind({})
+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>
+    ),
+  },
+}
 
-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 c1c10e66c3..65d210e3f9 100644
--- a/assets/design-system/src/stories/FormTitle.stories.tsx
+++ b/assets/design-system/src/stories/FormTitle.stories.tsx
@@ -1,9 +1,13 @@
 import FormTitle from '../components/FormTitle'
+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 (
@@ -14,9 +18,10 @@ function Template(args: any) {
   )
 }
 
-export const Primary = 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 67f00a07e7..7258ec1fad 100644
--- a/assets/design-system/src/stories/Highlight.stories.tsx
+++ b/assets/design-system/src/stories/Highlight.stories.tsx
@@ -3,11 +3,15 @@ import { Flex } from 'honorable'
 import { goCode, jsCode, tfCode } from '../constants'
 
 import { Divider, Highlight } from '..'
+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 (
@@ -26,4 +30,6 @@ function Template() {
   )
 }
 
-export const Default = 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 228b4b8596..534989dd15 100644
--- a/assets/design-system/src/stories/IconFrame.stories.tsx
+++ b/assets/design-system/src/stories/IconFrame.stories.tsx
@@ -1,11 +1,15 @@
 import { Div, Flex, H1, P } from 'honorable'
 
 import { IconFrame, type IconFrameProps, TrashCanIcon } from '../index'
+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'
 
@@ -27,47 +31,53 @@ 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({})
-Default.args = {
-  clickable: true,
-  tooltip: true,
-  tooltipProps: {
-    displayOn: 'hover',
-    placement: 'top',
+export const Default: Story = {
+  render: Template,
+  args: {
+    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 ec03c759b4..0947e8f2f4 100644
--- a/assets/design-system/src/stories/Icons.stories.tsx
+++ b/assets/design-system/src/stories/Icons.stories.tsx
@@ -3,8 +3,9 @@ import { createElement } from 'react'
 
 import * as icons from '../icons'
 import * as logos from '../plural-logos'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Icons',
   component: icons.MarketPlusIcon,
   argTypes: {
@@ -42,7 +43,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 const AppIcon = styled.div<{ $backgroundColor: string }>(
   ({ theme, $backgroundColor = 'transparent' }) => ({
@@ -61,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,
   })
 )
@@ -167,58 +171,72 @@ function LogosTemplate({
   )
 }
 
-export const Default = 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 = 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 = 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 = 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 = 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 = 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 = 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 b14389a1a1..e503f830ac 100644
--- a/assets/design-system/src/stories/InlineCode.stories.tsx
+++ b/assets/design-system/src/stories/InlineCode.stories.tsx
@@ -2,11 +2,15 @@ import { A, P } from 'honorable'
 import styled, { useTheme } from 'styled-components'
 
 import { Banner, Callout, Card, InlineCode } from '..'
+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',
@@ -111,5 +115,7 @@ function Template() {
   )
 }
 
-export const Default = 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 5266295972..5ebcfd050e 100644
--- a/assets/design-system/src/stories/Input.stories.tsx
+++ b/assets/design-system/src/stories/Input.stories.tsx
@@ -9,11 +9,15 @@ import SearchIcon from '../components/icons/SearchIcon'
 import Input from '../components/Input'
 import Input2 from '../components/Input2'
 import { Card } from '../index'
+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 (
@@ -167,73 +171,81 @@ function CustomInputV2Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
-
-Default.args = {}
-
-export const Error = Template.bind({})
-
-Error.args = {
-  error: true,
+export const Default: Story = {
+  render: Template,
+  args: {},
 }
 
-export const Placeholder = Template.bind({})
-
-Placeholder.args = {
-  placeholder: 'A neat placeholder!',
+export const Error: Story = {
+  render: Template,
+  args: {
+    error: true,
+  },
 }
 
-export const Disabled = Template.bind({})
-
-Disabled.args = {
-  placeholder: 'Disabled placeholder',
-  disabled: true,
+export const Placeholder: Story = {
+  render: Template,
+  args: {
+    placeholder: 'A neat placeholder!',
+  },
 }
 
-export const PrefixSuffix = CustomInputTemplate.bind({})
-
-PrefixSuffix.args = {
-  prefix: 'app.',
-  suffix: '.plural.sh',
+export const Disabled: Story = {
+  render: Template,
+  args: {
+    placeholder: 'Disabled placeholder',
+    disabled: true,
+  },
 }
 
-export const Multiline = CustomInputTemplate.bind({})
+export const PrefixSuffix: Story = {
+  render: CustomInputTemplate,
+  args: {
+    prefix: 'app.',
+    suffix: '.plural.sh',
+  },
+}
 
-Multiline.args = {
-  multiline: true,
-  minRows: 3,
+export const Multiline: Story = {
+  render: CustomInputTemplate,
+  args: {
+    multiline: true,
+    minRows: 3,
+  },
 }
 
-export const TitleContent = CustomInputTemplate.bind({})
-
-TitleContent.args = {
-  startIcon: <SearchIcon />,
-  titleContent: (
-    <>
-      <BrowseAppsIcon marginRight="small" />
-      Marketplace
-    </>
-  ),
-  placeholder: 'Search the marketplace',
-  showClearButton: true,
-  suffix: '',
+export const TitleContent: Story = {
+  render: CustomInputTemplate,
+  args: {
+    startIcon: <SearchIcon />,
+    titleContent: (
+      <>
+        <BrowseAppsIcon marginRight="small" />
+        Marketplace
+      </>
+    ),
+    placeholder: 'Search the marketplace',
+    showClearButton: true,
+    suffix: '',
+  },
 }
 
-export const Version2 = CustomInputV2Template.bind({})
-
-Version2.args = {
-  startIcon: <SearchIcon />,
-  // endIcon: <TagIcon />,
-  titleContent: (
-    <>
-      <BrowseAppsIcon marginRight="small" />
-      Marketplace
-    </>
-  ),
-  placeholder: 'Search the marketplace',
-  showClearButton: true,
-  suffix: '',
-  prefix: '',
-  disabled: false,
-  error: false,
+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,
+  },
 }
diff --git a/assets/design-system/src/stories/ListBox.stories.tsx b/assets/design-system/src/stories/ListBox.stories.tsx
index 0bff42ddcc..8baace63cd 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 { Meta, StoryObj } from '@storybook/react'
 
 import {
   AppIcon,
@@ -14,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
@@ -98,7 +102,7 @@ const items = [
     key: 'sushi',
     label: 'Sushi',
     description: 'With ham and cheese',
-    chips: null,
+    chips: [],
     version: '0.2.26',
   },
   {
@@ -257,9 +261,9 @@ function Template() {
             setSelectedKey(key)
           }}
           footer={
-            shownLimit < items.length && (
+            shownLimit < items.length ? (
               <ListBoxFooterPlus>View more</ListBoxFooterPlus>
-            )
+            ) : undefined
           }
           onFooterClick={() => {
             setShownLimit(shownLimit + shownStep)
@@ -316,6 +320,7 @@ function Template() {
   )
 }
 
-export const Default = Template.bind({})
-
-Default.args = {}
+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 10913fc956..deb4d95e41 100644
--- a/assets/design-system/src/stories/LoadingSpinner.stories.tsx
+++ b/assets/design-system/src/stories/LoadingSpinner.stories.tsx
@@ -1,13 +1,17 @@
 import { Div } from 'honorable'
+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 (
@@ -31,12 +35,13 @@ function Template(args: LoadingSpinnerProps) {
   )
 }
 
-export const Primary = 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 fc63bf6ebd..f729b9a913 100644
--- a/assets/design-system/src/stories/LoopingLogo.stories.tsx
+++ b/assets/design-system/src/stories/LoopingLogo.stories.tsx
@@ -1,11 +1,15 @@
 import { Flex } from 'honorable'
 
 import LoopingLogo, { type LoopingLogoProps } from '../components/LoopingLogo'
+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 (
@@ -18,10 +22,11 @@ function Template(args: LoopingLogoProps) {
   )
 }
 
-export const Default = 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 dcbd429189..d1885bc13e 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 { Meta, StoryObj } from '@storybook/react'
 
 const markdown = `# Plural Console
 
@@ -184,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.
@@ -201,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.
 
 ---
@@ -230,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 (
@@ -250,4 +250,6 @@ function Template() {
   )
 }
 
-export const Default = 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 0bb0dbcefe..540159812d 100644
--- a/assets/design-system/src/stories/Modal.stories.tsx
+++ b/assets/design-system/src/stories/Modal.stories.tsx
@@ -6,8 +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 { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Modal',
   component: Modal,
   args: {
@@ -27,7 +28,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function ExtraContent() {
   return (
@@ -188,28 +192,31 @@ function NonScrollTemplate(args: any) {
   )
 }
 
-export const Default = 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 = 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 = 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/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/PageCard.stories.tsx b/assets/design-system/src/stories/PageCard.stories.tsx
index bbd32b3b7b..4335a06671 100644
--- a/assets/design-system/src/stories/PageCard.stories.tsx
+++ b/assets/design-system/src/stories/PageCard.stories.tsx
@@ -3,11 +3,15 @@ import { A, Flex } from 'honorable'
 import CheckedShieldIcon from '../components/icons/CheckedShieldIcon'
 
 import { PageCard } from '../index'
+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 (
@@ -69,5 +73,7 @@ function Template() {
   )
 }
 
-export const Default = 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 4b9f274239..2722397936 100644
--- a/assets/design-system/src/stories/PageTitle.stories.tsx
+++ b/assets/design-system/src/stories/PageTitle.stories.tsx
@@ -1,11 +1,15 @@
 import { Button, Div, Flex, P } from 'honorable'
 
 import PageTitle, { type PageTitleProps } from '../components/PageTitle'
+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 (
@@ -24,31 +28,34 @@ function Template({ heading, ...props }: PageTitleProps) {
   )
 }
 
-export const Default = Template.bind({})
-
-Default.args = {
-  heading: 'Page Title',
+export const Default: Story = {
+  render: Template,
+  args: {
+    heading: 'Page Title',
+  },
 }
 
-export const WithContent = Template.bind({})
-WithContent.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
+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
+        </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 7684f29bac..6ad055a33a 100644
--- a/assets/design-system/src/stories/ProgressBar.stories.tsx
+++ b/assets/design-system/src/stories/ProgressBar.stories.tsx
@@ -1,6 +1,7 @@
 import ProgressBar from '../components/ProgressBar'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Progress Bar',
   component: ProgressBar,
   argTypes: {
@@ -13,18 +14,25 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
-export const Indeterminate = ProgressBar.bind({})
-Indeterminate.args = {
-  paused: false,
-  complete: false,
+export const Indeterminate: Story = {
+  render: ProgressBar,
+  args: {
+    paused: false,
+    complete: false,
+  },
 }
 
-export const Determinate = 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 71a3a24124..1fed4278d1 100644
--- a/assets/design-system/src/stories/Prop.stories.tsx
+++ b/assets/design-system/src/stories/Prop.stories.tsx
@@ -1,13 +1,19 @@
 import { Prop } from '../index'
+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 = 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 6b9e8fcdce..c0c5cb95c5 100644
--- a/assets/design-system/src/stories/PropWide.stories.tsx
+++ b/assets/design-system/src/stories/PropWide.stories.tsx
@@ -1,13 +1,19 @@
 import { PropWide } from '../index'
+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 = 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 0e35ff3d61..b53a0def72 100644
--- a/assets/design-system/src/stories/PropsContainer.stories.tsx
+++ b/assets/design-system/src/stories/PropsContainer.stories.tsx
@@ -1,9 +1,13 @@
 import { Prop, PropsContainer, UserDetails } from '../index'
+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 (
@@ -23,5 +27,7 @@ function Template() {
   )
 }
 
-export const Default = 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 37c069d3d0..4be80c1c52 100644
--- a/assets/design-system/src/stories/Radio.stories.tsx
+++ b/assets/design-system/src/stories/Radio.stories.tsx
@@ -4,11 +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 { 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 = [
   {
@@ -33,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 (
@@ -56,7 +62,7 @@ function Template(args: any) {
       <Button
         marginTop={theme.spacing.medium}
         onClick={() => {
-          setSelectedValueRG(null)
+          setSelectedValueRG(undefined)
         }}
       >
         Reset
@@ -65,12 +71,16 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
-Default.args = {
-  small: false,
+export const Default: Story = {
+  render: Template,
+  args: {
+    small: false,
+  },
 }
 
-export const Small = 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 d387bce7e2..c8fdd43d1b 100644
--- a/assets/design-system/src/stories/RepositoryCard.stories.tsx
+++ b/assets/design-system/src/stories/RepositoryCard.stories.tsx
@@ -1,11 +1,15 @@
 import { Div, Flex, H4 } from 'honorable'
 
 import RepositoryCard from '../components/RepositoryCard'
+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 (
@@ -108,30 +112,33 @@ function ListTemplate(args: any) {
   )
 }
 
-export const Default = Template.bind({})
-
-Default.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',
-  ],
+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',
+    ],
+  },
 }
 
-export const List = ListTemplate.bind({})
-List.args = { width: '500px', ...Default.args }
+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 42b12b4601..06928c92bc 100644
--- a/assets/design-system/src/stories/RepositoryChip.stories.tsx
+++ b/assets/design-system/src/stories/RepositoryChip.stories.tsx
@@ -1,10 +1,14 @@
 import RepositoryChip from '../components/RepositoryChip'
 import StackIcon from '../components/icons/StackIcon'
+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 (
@@ -19,24 +23,27 @@ function Template(args: any) {
   )
 }
 
-export const Default = 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 = Template.bind({})
-
-Icon.args = {
-  icon: <StackIcon />,
-  label: 'DevOps',
+export const Icon: Story = {
+  render: Template,
+  args: {
+    icon: <StackIcon />,
+    label: 'DevOps',
+  },
 }
 
-export const Small = 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 9c41f20476..7291204411 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 { Meta, StoryObj } from '@storybook/react'
 
 type StoryProps = {
   format: string
@@ -26,7 +27,7 @@ const EMPTY_SEGMENTS = [
   { length: 4, max: 9999, name: 'YYYY' },
 ]
 
-export default {
+const meta = {
   title: 'SegmentedInput',
   component: SegmentedInput,
   argTypes: {
@@ -40,8 +41,9 @@ export default {
       defaultValue: '/',
     },
   },
-}
+} satisfies Meta<any>
 
+export default meta
 const WrapperSC = styled.div(({ theme }) => ({
   maxWidth: '300px',
   marginBottom: theme.spacing.large,
@@ -100,16 +102,20 @@ function Template({ format, separator, segments }: StoryProps) {
   }
 }
 
-export const DateInput = 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 = 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 dd8f2cd49a..5fb9ddb72f 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 { Meta, StoryObj } from '@storybook/react'
 
 import {
   AppIcon,
@@ -25,9 +26,9 @@ import {
   WrapWithIf,
 } from '../index'
 
-export default {
+const meta = {
   title: 'Select',
-  component: 'Select',
+  component: Select,
   argTypes: {
     onFillLevel: {
       options: [0, 1, 2, 3],
@@ -42,8 +43,9 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
 
+export default meta
 const H4 = styled.h4(({ theme }) => ({
   ...theme.partials.text.subtitle1,
   margin: 0,
@@ -121,7 +123,7 @@ const items = [
     key: 'sushi',
     label: 'Sushi',
     description: 'With ham and cheese',
-    chips: null,
+    chips: [],
     version: '0.2.26',
   },
   {
@@ -224,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)
 
@@ -329,7 +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
@@ -395,18 +397,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 }) => (
@@ -442,18 +444,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 }) => (
@@ -521,7 +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
@@ -588,9 +590,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 }) => (
@@ -627,18 +629,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 }) => (
@@ -662,6 +664,7 @@ function Template({ onFillLevel }: { onFillLevel: any }) {
   )
 }
 
-export const Default = Template.bind({})
-
-Default.args = {}
+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 9044b41608..6e4436dc1c 100644
--- a/assets/design-system/src/stories/Sidecar.stories.tsx
+++ b/assets/design-system/src/stories/Sidecar.stories.tsx
@@ -1,11 +1,15 @@
 import { A, Div } from 'honorable'
 
 import { Sidecar, SidecarItem, type SidecarProps } from '../index'
+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
@@ -52,8 +56,9 @@ function Template({ heading, ...props }: SidecarProps) {
   )
 }
 
-export const Default = 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 c8ce940d1b..3f7537aeba 100644
--- a/assets/design-system/src/stories/Slider.stories.tsx
+++ b/assets/design-system/src/stories/Slider.stories.tsx
@@ -1,31 +1,37 @@
 import Slider from '../components/Slider'
+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 = Template.bind({})
-Default.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,
+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,
+  },
 }
diff --git a/assets/design-system/src/stories/StackCard.stories.tsx b/assets/design-system/src/stories/StackCard.stories.tsx
index 52c9ffc1f5..d8d69bf3da 100644
--- a/assets/design-system/src/stories/StackCard.stories.tsx
+++ b/assets/design-system/src/stories/StackCard.stories.tsx
@@ -1,11 +1,15 @@
 import { Flex } from 'honorable'
 
 import StackCard from '../components/StackCard'
+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 (
@@ -53,14 +57,15 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
-
-Default.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',
+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',
+  },
 }
diff --git a/assets/design-system/src/stories/Stepper.stories.tsx b/assets/design-system/src/stories/Stepper.stories.tsx
index 4958b9f753..1023e72f17 100644
--- a/assets/design-system/src/stories/Stepper.stories.tsx
+++ b/assets/design-system/src/stories/Stepper.stories.tsx
@@ -4,11 +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 { 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 (
@@ -50,49 +54,61 @@ const steps: StepperSteps = [
   },
 ]
 
-export const Default = Template.bind({})
-Default.args = {
-  stepIndex: 1,
-  steps,
-  compact: false,
+export const Default: Story = {
+  render: Template,
+  args: {
+    stepIndex: 1,
+    steps,
+    compact: false,
+  },
 }
 
-export const List03 = 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 = 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 = 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 = 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 = 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 42cd9cf291..d6176aa53e 100644
--- a/assets/design-system/src/stories/Switch.stories.tsx
+++ b/assets/design-system/src/stories/Switch.stories.tsx
@@ -1,9 +1,13 @@
 import { LightDarkSwitch, Switch } from '..'
+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 (
@@ -16,12 +20,13 @@ function Template(args: any) {
   )
 }
 
-export const Default = 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) {
@@ -35,9 +40,10 @@ function LightDarkTemplate(args: any) {
   )
 }
 
-export const LightDarkMode = 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 d17f22a755..d51f925e6e 100644
--- a/assets/design-system/src/stories/Tab.stories.tsx
+++ b/assets/design-system/src/stories/Tab.stories.tsx
@@ -6,11 +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 { 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)
@@ -70,9 +74,10 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
-
-Default.args = {}
+export const Default: Story = {
+  render: Template,
+  args: {},
+}
 
 function Template2(args: any) {
   const [active, setActive] = useState(0)
@@ -139,10 +144,11 @@ function Template2(args: any) {
   )
 }
 
-export const Vertical = Template2.bind({})
-
-Vertical.args = {
-  vertical: true,
+export const Vertical: Story = {
+  render: Template2,
+  args: {
+    vertical: true,
+  },
 }
 
 function SubTabs(args: any) {
@@ -202,8 +208,9 @@ const contentCardStyle = {
   justifyContent: 'center',
 }
 
-export const Subtab = 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 45c43f723f..8086825184 100644
--- a/assets/design-system/src/stories/TabList.stories.tsx
+++ b/assets/design-system/src/stories/TabList.stories.tsx
@@ -1,8 +1,9 @@
 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'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import {
   Tab,
@@ -12,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: {
@@ -104,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 = {
@@ -225,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 = {
@@ -319,19 +327,27 @@ function TemplateComplex() {
   )
 }
 
-export const Default = TemplateBasic.bind({})
-Default.args = {}
+export const Default: Story = {
+  render: TemplateBasic,
+  args: {},
+}
 
-export const Vertical = TemplateBasic.bind({})
-Vertical.args = {
-  orientation: 'vertical',
+export const Vertical: Story = {
+  render: TemplateBasic,
+  args: {
+    orientation: 'vertical',
+  },
 }
 
-export const Scrollable = TemplateBasic.bind({})
-Scrollable.args = {
-  scrollable: true,
-  tabs: moreTabs,
+export const Scrollable: Story = {
+  render: TemplateBasic,
+  args: {
+    scrollable: true,
+    tabs: moreTabs,
+  },
 }
 
-export const AdvancedContent = TemplateComplex.bind({})
-AdvancedContent.args = {}
+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 9eb3bc19fd..e354f580ae 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 { Meta, StoryObj } from '@storybook/react'
 
 import {
   AppIcon,
@@ -205,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} />
 }
@@ -223,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)
   }, [])
@@ -269,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>
       )}
     </>
@@ -357,201 +362,223 @@ const extremeLengthData = Array(200)
   .flat()
   .map((item, i) => ({ ...item, id: `id-${i}` }))
 
-export const Default = 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 = 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 = 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 = Template.bind({})
-Highlighted.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,
+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,
+  },
 }
 
-export const VirtualizedRows = 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 = 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 = 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 = 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 = 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 = Template.bind({})
-
-Expandable.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>
-  ),
+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>
+    ),
+  },
 }
 
-export const FilterableAndSortable = FilterableTemplate.bind({})
-FilterableAndSortable.args = {
-  fillLevel: 0,
-  rowBg: 'base',
-  virtualizeRows: true,
-  emptyStateProps: {
-    message: 'No results match your query',
+export const FilterableAndSortable: StoryObj<
+  Parameters<typeof FilterableTemplate>[0]
+> = {
+  render: FilterableTemplate,
+  args: {
+    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 = 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 = Template.bind({})
-
-LinkableRows.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}`,
+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}`,
+  },
 }
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 7786ce0052..0e000a9c3a 100644
--- a/assets/design-system/src/stories/TextSwitch.stories.tsx
+++ b/assets/design-system/src/stories/TextSwitch.stories.tsx
@@ -1,14 +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 TextSwitch from '../components/TextSwitch'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'TextSwitch',
   component: TextSwitch,
   argTypes: {
@@ -17,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',
@@ -71,29 +59,31 @@ 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>
   )
 }
 
-export const Default = 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 cd2475fdab..542a6e7f6a 100644
--- a/assets/design-system/src/stories/TipCarousel.stories.tsx
+++ b/assets/design-system/src/stories/TipCarousel.stories.tsx
@@ -1,8 +1,9 @@
 import { A } from 'honorable'
 
 import TipCarousel from '../components/TipCarousel'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'TipCarousel',
   component: TipCarousel,
   argTypes: {
@@ -15,7 +16,10 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
+
+export default meta
+type Story = StoryObj<any>
 
 function Template(args: any) {
   return (
@@ -48,8 +52,9 @@ function Template(args: any) {
   )
 }
 
-export const Default = 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 4f662ba2a1..5c20537ed7 100644
--- a/assets/design-system/src/stories/Toast.stories.tsx
+++ b/assets/design-system/src/stories/Toast.stories.tsx
@@ -4,8 +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 { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta = {
   title: 'Toast',
   component: Toast,
   argTypes: {
@@ -19,8 +20,9 @@ export default {
       },
     },
   },
-}
+} satisfies Meta<any>
 
+export default meta
 type Args = {
   severity: ToastSeverity
   closeTimeout?: number
@@ -111,13 +113,14 @@ function GraphQLTemplate() {
   )
 }
 
-export const Default = 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 = GraphQLTemplate.bind({})
-
-GraphQL.args = {}
+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 4212ed0063..92522b55f8 100644
--- a/assets/design-system/src/stories/Tooltip.stories.tsx
+++ b/assets/design-system/src/stories/Tooltip.stories.tsx
@@ -4,11 +4,15 @@ import { type ComponentProps, useState } from 'react'
 import { IconFrame, InfoIcon, Modal } from '..'
 
 import Tooltip from '../components/Tooltip'
+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 (
@@ -51,7 +55,7 @@ function ModalExample({
           >
             <Button
               secondary
-              onClick={() => onClose()}
+              onClick={() => onClose?.()}
             >
               Cancel
             </Button>
@@ -63,7 +67,7 @@ function ModalExample({
             <Button
               primary
               marginLeft="medium"
-              onClick={() => onClose()}
+              onClick={() => onClose?.()}
             >
               Done
             </Button>
@@ -163,6 +167,7 @@ function Template(args: any) {
   )
 }
 
-export const Default = Template.bind({})
-
-Default.args = {}
+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 b45711146f..14207415d2 100644
--- a/assets/design-system/src/stories/TreeNavigation.stories.tsx
+++ b/assets/design-system/src/stories/TreeNavigation.stories.tsx
@@ -6,12 +6,16 @@ import { useNavigationContext } from '../components/contexts/NavigationContext'
 import { TreeNav, TreeNavEntry } from '../components/TreeNavigation'
 
 import { NavContextProviderStub } from './NavigationContextStub'
+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 },
@@ -150,7 +154,7 @@ function NavEntryDoc({
   useEffect(() => {
     if (!subPaths) {
       if (currentHash) {
-        setCurrentHash(null)
+        setCurrentHash(undefined)
       }
     } else if (subPaths.length > 0 && !currentHash) {
       setCurrentHash(subPaths[0].id)
@@ -223,5 +227,7 @@ function Template() {
   )
 }
 
-export const Default = 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 3e294a7f30..6e8a1b880e 100644
--- a/assets/design-system/src/stories/Typography.tsx
+++ b/assets/design-system/src/stories/Typography.tsx
@@ -3,9 +3,10 @@ import styled from 'styled-components'
 import Divider from '../components/Divider'
 
 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,
@@ -43,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',
@@ -122,7 +123,11 @@ export function MarketingTypography({
   )
 }
 
-function Template({ exampleText }: { exampleText?: string }) {
+function Template({
+  exampleText = 'Lorem ipsum dolor sit amet',
+}: {
+  exampleText?: string
+}) {
   return (
     <>
       <Divider
@@ -139,9 +144,11 @@ function Template({ exampleText }: { exampleText?: string }) {
   )
 }
 
-const Exp = 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 b27a69d4c2..6bf8e5ff51 100644
--- a/assets/design-system/src/stories/UserDetails.stories.tsx
+++ b/assets/design-system/src/stories/UserDetails.stories.tsx
@@ -1,9 +1,13 @@
 import { UserDetails } from '../index'
+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 (
@@ -14,5 +18,7 @@ function Template() {
   )
 }
 
-export const Default = 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 e4dad80f87..4b96738d4d 100644
--- a/assets/design-system/src/stories/ValidatedInput.stories.tsx
+++ b/assets/design-system/src/stories/ValidatedInput.stories.tsx
@@ -1,13 +1,17 @@
 import { useState } from '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('')
@@ -32,4 +36,6 @@ function Template() {
   )
 }
 
-export const Default = 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 cf8d997e71..f28dc90ee8 100644
--- a/assets/design-system/src/stories/Wizard.stories.tsx
+++ b/assets/design-system/src/stories/Wizard.stories.tsx
@@ -16,11 +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 { 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
@@ -28,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])
@@ -246,10 +250,12 @@ function StandaloneTemplate() {
   )
 }
 
-export const Default = ModalTemplate.bind({})
-
-Default.args = {}
-
-export const Standalone = StandaloneTemplate.bind({})
+export const Default: Story = {
+  render: ModalTemplate,
+  args: {},
+}
 
-Standalone.args = {}
+export const Standalone: Story = {
+  render: StandaloneTemplate,
+  args: {},
+}
diff --git a/assets/design-system/src/stories/_SemanticSystem.stories.tsx b/assets/design-system/src/stories/_SemanticSystem.stories.tsx
index 0c727cc30b..f1fdd9d424 100644
--- a/assets/design-system/src/stories/_SemanticSystem.stories.tsx
+++ b/assets/design-system/src/stories/_SemanticSystem.stories.tsx
@@ -7,11 +7,14 @@ import { baseSpacing } from '../theme/spacing'
 import { ItemLabel } from './ItemLabel'
 import { FilledBox } from './FilledBox'
 import { FlexWrap } from './FlexWrap'
+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',
@@ -91,7 +94,7 @@ function Shadows() {
 }
 
 const RadiusedBox = styled(FilledBox)<{ $radius?: 'medium' | 'large' }>(
-  ({ theme, $radius: radius }) => ({
+  ({ theme, $radius: radius = 'medium' }) => ({
     borderRadius: theme.borderRadiuses[radius],
   })
 )
@@ -119,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()
@@ -138,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]],
@@ -235,8 +240,10 @@ function Spacing() {
   )
 }
 
-export const Miscellaneous = Template.bind({})
-Miscellaneous.args = {}
+export const Miscellaneous: Story = {
+  render: Template,
+  args: {},
+}
 
 export { default as Colors } from './Colors'
 export { default as Typography } from './Typography'
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..0cac0c4258 100644
--- a/assets/design-system/src/types.ts
+++ b/assets/design-system/src/types.ts
@@ -41,16 +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)
-    ? ('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/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.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', () => {
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 6dc1d103e3..bbeb3a7d98 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
@@ -58,9 +58,9 @@ 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>(
+  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,17 +117,23 @@ function useBimodalSelectState<T extends object>({
 
   listStateRef.current = listState
 
+  const selectedKeysIterable =
+    selectedKeys === 'all' ? getAllKeys() : (selectedKeys ?? [])
+
   const validationState = useFormValidationState({
     ...props,
-    value: selectionMode === 'single' ? selectedKey : selectedKeys,
+    value:
+      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)
 
@@ -160,7 +170,9 @@ 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 93afff42a5..d8ccd71249 100644
--- a/assets/design-system/tsconfig.json
+++ b/assets/design-system/tsconfig.json
@@ -5,14 +5,8 @@
     "baseUrl": ".",
     "rootDir": "./src",
     "outDir": "dist",
-
-    // TODO: get rid of all these once errors are fixed
-    "strictNullChecks": false,
-    "strictFunctionTypes": false,
-    "strictBindCallApply": false,
-    "strictPropertyInitialization": false,
-    "noImplicitThis": false,
-    "alwaysStrict": false
+    // Override parent tsconfig.app.json (keeps noImplicitAny off for console)
+    "noImplicitAny": true
   },
   "include": ["src/**/*"]
 }