diff --git a/src/components/button-group/button-group.stories.tsx b/src/components/button-group/button-group.stories.tsx
index f1c23bed..41b1fc1e 100644
--- a/src/components/button-group/button-group.stories.tsx
+++ b/src/components/button-group/button-group.stories.tsx
@@ -1,9 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { ButtonGroup } from './button-group'
 
-const meta: Meta<typeof ButtonGroup> = {
+type ButtonGroupStoryArgs = {
+  normalLabel: string
+  disabledLabel: string
+  activeLabel: string
+  activeDisabledLabel: string
+  extraLabel: string
+}
+
+const meta: Meta<ButtonGroupStoryArgs> = {
   title: 'ButtonGroup',
-  component: ButtonGroup,
   args: {
     normalLabel: 'Normal',
     disabledLabel: 'Disabled',
@@ -12,11 +19,11 @@ const meta: Meta<typeof ButtonGroup> = {
     extraLabel: 'Button 1',
   },
   argTypes: {
-    normalLabel: { control: 'text' },
-    disabledLabel: { control: 'text' },
-    activeLabel: { control: 'text' },
-    activeDisabledLabel: { control: 'text' },
-    extraLabel: { control: 'text' },
+    normalLabel: { control: { type: 'text' } },
+    disabledLabel: { control: { type: 'text' } },
+    activeLabel: { control: { type: 'text' } },
+    activeDisabledLabel: { control: { type: 'text' } },
+    extraLabel: { control: { type: 'text' } },
   },
   parameters: {
     options: {
@@ -26,7 +33,7 @@ const meta: Meta<typeof ButtonGroup> = {
 }
 
 export default meta
-type Story = StoryObj<typeof ButtonGroup>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   render: ({
diff --git a/src/components/disclosure/disclosure.stories.tsx b/src/components/disclosure/disclosure.stories.tsx
index 22b74b50..89ea4d2e 100644
--- a/src/components/disclosure/disclosure.stories.tsx
+++ b/src/components/disclosure/disclosure.stories.tsx
@@ -1,16 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Disclosure } from './disclosure'
 
-const meta: Meta<typeof Disclosure> = {
+type DisclosureStoryArgs = {
+  buttonLabel: string
+  panelContent: string
+}
+
+const meta: Meta<DisclosureStoryArgs> = {
   title: 'Disclosure',
-  component: Disclosure,
   args: {
     buttonLabel: 'Disclosure Button',
     panelContent: 'Disclosure Content',
   },
   argTypes: {
-    buttonLabel: { control: 'text' },
-    panelContent: { control: 'text' },
+    buttonLabel: { control: { type: 'text' } },
+    panelContent: { control: { type: 'text' } },
   },
   parameters: {
     options: {
@@ -20,7 +24,7 @@ const meta: Meta<typeof Disclosure> = {
 }
 
 export default meta
-type Story = StoryObj<typeof Disclosure>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   render: ({ buttonLabel, panelContent }) => (
diff --git a/src/components/divider-line/divider-line.stories.tsx b/src/components/divider-line/divider-line.stories.tsx
index d3754213..2e21d7e2 100644
--- a/src/components/divider-line/divider-line.stories.tsx
+++ b/src/components/divider-line/divider-line.stories.tsx
@@ -2,7 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import { DividerLine } from './divider-line'
 
-const meta: Meta<typeof DividerLine> = {
+type DividerLineStoryArgs = {
+  padding: number
+  showIcons: boolean
+}
+
+const meta: Meta<DividerLineStoryArgs> = {
   title: 'DividerLine',
   component: DividerLine,
   args: {
@@ -11,16 +16,16 @@ const meta: Meta<typeof DividerLine> = {
   },
   argTypes: {
     padding: { control: { type: 'range', min: 0, max: 32, step: 2 } },
-    showIcons: { control: 'boolean' },
+    showIcons: { control: { type: 'boolean' } },
   },
   parameters: { layout: 'fullscreen' },
-  render: ({ padding, showIcons }) => (
-    <div style={{ padding }}>
-      {showIcons ?
+  render: (args: DividerLineStoryArgs) => (
+    <div style={{ padding: args.padding }}>
+      {args.showIcons ?
         <span>🌞</span>
       : null}
       <DividerLine />
-      {showIcons ?
+      {args.showIcons ?
         <span>🌙</span>
       : null}
     </div>
@@ -28,6 +33,6 @@ const meta: Meta<typeof DividerLine> = {
 }
 
 export default meta
-type Story = StoryObj<typeof DividerLine>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
diff --git a/src/components/featured-tag/featured-tag.stories.tsx b/src/components/featured-tag/featured-tag.stories.tsx
index e77b0b0b..27e53bf1 100644
--- a/src/components/featured-tag/featured-tag.stories.tsx
+++ b/src/components/featured-tag/featured-tag.stories.tsx
@@ -4,22 +4,26 @@ import { FeaturedTag } from './featured-tag'
 import { Panel } from '../panel'
 import { FormField } from '../form-field'
 
-const meta: Meta<typeof FeaturedTag> = {
+type FeaturedTagStoryArgs = {
+  tagLabel: string
+  panelText: string
+}
+
+const meta: Meta<FeaturedTagStoryArgs> = {
   title: 'Input/FeaturedTag',
-  component: FeaturedTag,
   args: {
     tagLabel: 'Recommended!',
     panelText: 'This example uses a Panel component',
   },
   argTypes: {
-    tagLabel: { control: 'text' },
-    panelText: { control: 'text' },
+    tagLabel: { control: { type: 'text' } },
+    panelText: { control: { type: 'text' } },
   },
 }
 
 export default meta
 
-type Story = StoryObj<typeof FeaturedTag>
+type Story = StoryObj<typeof meta>
 
 const RadioBoxWithRecommendationTag = ({ tagLabel }: { tagLabel: string }) => {
   const [value, setValue] = useState('value_1')
diff --git a/src/components/form-field/multi-combobox/multi-combobox-badges.stories.tsx b/src/components/form-field/multi-combobox/multi-combobox-badges.stories.tsx
index 11240afc..3299bb23 100644
--- a/src/components/form-field/multi-combobox/multi-combobox-badges.stories.tsx
+++ b/src/components/form-field/multi-combobox/multi-combobox-badges.stories.tsx
@@ -1,21 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { FormField } from '../form-field'
-import { hiddenArgControl } from '../../../util/storybook-utils'
 import {
   MultiComboboxBadgeStory,
   multiComboboxArgTypes,
   multiComboboxArgs,
+  type MultiComboboxStoryArgs,
 } from './multi-combobox.story-helpers'
 
-const meta: Meta = {
+const meta: Meta<MultiComboboxStoryArgs> = {
   title: 'Input/MultiCombobox/Badges',
-  component: FormField.MultiCombobox,
   args: multiComboboxArgs,
   argTypes: {
     ...multiComboboxArgTypes,
-    value: hiddenArgControl,
-    onChange: hiddenArgControl,
-    className: hiddenArgControl,
   },
   parameters: {
     controls: {
@@ -26,15 +21,15 @@ const meta: Meta = {
 
 export default meta
 
-type Story = StoryObj<typeof FormField.MultiCombobox>
+type Story = StoryObj<typeof meta>
 
 export const Badges: Story = {
   render: ({ label, description, placeholder, width }) => (
-    <div style={{ width }}>
+    <div style={{ width: width ?? 288 }}>
       <MultiComboboxBadgeStory
-        label={label as string}
-        description={description as string}
-        placeholder={placeholder as string}
+        label={label}
+        description={description}
+        placeholder={placeholder}
       />
     </div>
   ),
diff --git a/src/components/form-field/multi-combobox/multi-combobox-custom-value.stories.tsx b/src/components/form-field/multi-combobox/multi-combobox-custom-value.stories.tsx
index 6698f6e8..fac36ecc 100644
--- a/src/components/form-field/multi-combobox/multi-combobox-custom-value.stories.tsx
+++ b/src/components/form-field/multi-combobox/multi-combobox-custom-value.stories.tsx
@@ -1,21 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { FormField } from '../form-field'
-import { hiddenArgControl } from '../../../util/storybook-utils'
 import {
   MultiComboboxCustomValueStory,
   multiComboboxArgTypes,
   multiComboboxArgs,
+  type MultiComboboxStoryArgs,
 } from './multi-combobox.story-helpers'
 
-const meta: Meta = {
+const meta: Meta<MultiComboboxStoryArgs> = {
   title: 'Input/MultiCombobox/CustomValue',
-  component: FormField.MultiCombobox,
   args: multiComboboxArgs,
   argTypes: {
     ...multiComboboxArgTypes,
-    value: hiddenArgControl,
-    onChange: hiddenArgControl,
-    className: hiddenArgControl,
   },
   parameters: {
     controls: {
@@ -26,15 +21,15 @@ const meta: Meta = {
 
 export default meta
 
-type Story = StoryObj<typeof FormField.MultiCombobox>
+type Story = StoryObj<typeof meta>
 
 export const CustomValue: Story = {
   render: ({ label, description, placeholder, width }) => (
-    <div style={{ width }}>
+    <div style={{ width: width ?? 288 }}>
       <MultiComboboxCustomValueStory
-        label={label as string}
-        description={description as string}
-        placeholder={placeholder as string}
+        label={label}
+        description={description}
+        placeholder={placeholder}
       />
     </div>
   ),
diff --git a/src/components/form-field/multi-combobox/multi-combobox-tags.stories.tsx b/src/components/form-field/multi-combobox/multi-combobox-tags.stories.tsx
index b0d617f4..1efc2522 100644
--- a/src/components/form-field/multi-combobox/multi-combobox-tags.stories.tsx
+++ b/src/components/form-field/multi-combobox/multi-combobox-tags.stories.tsx
@@ -1,21 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { FormField } from '../form-field'
-import { hiddenArgControl } from '../../../util/storybook-utils'
 import {
   MultiComboboxTagStory,
   multiComboboxArgTypes,
   multiComboboxArgs,
+  type MultiComboboxStoryArgs,
 } from './multi-combobox.story-helpers'
 
-const meta: Meta = {
+const meta: Meta<MultiComboboxStoryArgs> = {
   title: 'Input/MultiCombobox/Tags',
-  component: FormField.MultiCombobox,
   args: multiComboboxArgs,
   argTypes: {
     ...multiComboboxArgTypes,
-    value: hiddenArgControl,
-    onChange: hiddenArgControl,
-    className: hiddenArgControl,
   },
   parameters: {
     controls: {
@@ -26,15 +21,15 @@ const meta: Meta = {
 
 export default meta
 
-type Story = StoryObj<typeof FormField.MultiCombobox>
+type Story = StoryObj<typeof meta>
 
 export const Tags: Story = {
   render: ({ label, description, placeholder, width }) => (
-    <div style={{ width }}>
+    <div style={{ width: width ?? 288 }}>
       <MultiComboboxTagStory
-        label={label as string}
-        description={description as string}
-        placeholder={placeholder as string}
+        label={label}
+        description={description}
+        placeholder={placeholder}
       />
     </div>
   ),
diff --git a/src/components/form-field/multi-combobox/multi-combobox.stories.tsx b/src/components/form-field/multi-combobox/multi-combobox.stories.tsx
index 41470a15..e9d62c26 100644
--- a/src/components/form-field/multi-combobox/multi-combobox.stories.tsx
+++ b/src/components/form-field/multi-combobox/multi-combobox.stories.tsx
@@ -1,22 +1,17 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { FormField } from '../form-field'
-import { hiddenArgControl } from '../../../util/storybook-utils'
 import {
   MultiComboboxTextStory,
   multiComboboxArgTypes,
   multiComboboxArgs,
+  type MultiComboboxStoryArgs,
 } from './multi-combobox.story-helpers'
 
-const meta: Meta = {
+const meta: Meta<MultiComboboxStoryArgs> = {
   title: 'Input/MultiCombobox',
-  component: FormField.MultiCombobox,
   args: multiComboboxArgs,
   argTypes: {
     ...multiComboboxArgTypes,
-    value: hiddenArgControl,
-    onChange: hiddenArgControl,
-    className: hiddenArgControl,
   },
   parameters: {
     controls: {
@@ -27,15 +22,15 @@ const meta: Meta = {
 
 export default meta
 
-type Story = StoryObj<typeof FormField.MultiCombobox>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   render: ({ label, description, placeholder, width }) => (
-    <div style={{ width }}>
+    <div style={{ width: width ?? 288 }}>
       <MultiComboboxTextStory
-        label={label as string}
-        description={description as string}
-        placeholder={placeholder as string}
+        label={label}
+        description={description}
+        placeholder={placeholder}
       />
     </div>
   ),
diff --git a/src/components/form-field/multi-combobox/multi-combobox.story-helpers.tsx b/src/components/form-field/multi-combobox/multi-combobox.story-helpers.tsx
index 8ce47013..88e99f27 100644
--- a/src/components/form-field/multi-combobox/multi-combobox.story-helpers.tsx
+++ b/src/components/form-field/multi-combobox/multi-combobox.story-helpers.tsx
@@ -18,10 +18,10 @@ export const multiComboboxArgs: MultiComboboxStoryArgs = {
 }
 
 export const multiComboboxArgTypes = {
-  label: { control: 'text' },
-  description: { control: 'text' },
-  placeholder: { control: 'text' },
-  width: { control: { type: 'range', min: 200, max: 360, step: 16 } },
+  label: { control: { type: 'text' as const } },
+  description: { control: { type: 'text' as const } },
+  placeholder: { control: { type: 'text' as const } },
+  width: { control: { type: 'range' as const, min: 200, max: 360, step: 16 } },
 }
 
 const people = [
diff --git a/src/components/form-field/radio-box/radio-box.stories.tsx b/src/components/form-field/radio-box/radio-box.stories.tsx
index 165dca01..9355a238 100644
--- a/src/components/form-field/radio-box/radio-box.stories.tsx
+++ b/src/components/form-field/radio-box/radio-box.stories.tsx
@@ -4,9 +4,19 @@ import { FormField } from '../form-field'
 import { RadioBox } from './radio-box'
 import { FeaturedTag } from '../../featured-tag/featured-tag'
 
-const meta: Meta<typeof RadioBox> = {
+type RadioBoxStoryArgs = {
+  recommendedLabel: string
+  optionOneTitle: string
+  optionTwoTitle: string
+  optionThreeTitle: string
+  optionDescription: string
+  defaultValue: string
+  disableThirdOption: boolean
+  width: number
+}
+
+const meta: Meta<RadioBoxStoryArgs> = {
   title: 'Input/RadioBox',
-  component: RadioBox,
   args: {
     recommendedLabel: 'Recommended',
     optionOneTitle: 'Option 1',
@@ -19,23 +29,22 @@ const meta: Meta<typeof RadioBox> = {
     width: 384,
   },
   argTypes: {
-    recommendedLabel: { control: 'text' },
-    optionOneTitle: { control: 'text' },
-    optionTwoTitle: { control: 'text' },
-    optionThreeTitle: { control: 'text' },
-    optionDescription: { control: 'text' },
+    recommendedLabel: { control: { type: 'text' } },
+    optionOneTitle: { control: { type: 'text' } },
+    optionTwoTitle: { control: { type: 'text' } },
+    optionThreeTitle: { control: { type: 'text' } },
+    optionDescription: { control: { type: 'text' } },
     defaultValue: {
-      control: 'select',
-      options: ['value_1', 'value_2', 'value_3'],
+      control: { type: 'select', options: ['value_1', 'value_2', 'value_3'] },
     },
-    disableThirdOption: { control: 'boolean' },
+    disableThirdOption: { control: { type: 'boolean' } },
     width: { control: { type: 'range', min: 320, max: 520, step: 16 } },
   },
 }
 
 export default meta
 
-type Story = StoryObj<typeof RadioBox>
+type Story = StoryObj<typeof meta>
 
 const RadioBoxWithHooks = ({
   recommendedLabel,
@@ -109,7 +118,7 @@ const RadioBoxWithHooks = ({
 
 export const Default: Story = {
   render: ({ width, ...args }) => (
-    <div style={{ width }}>
+    <div style={{ width: width ?? 384 }}>
       <RadioBoxWithHooks {...args} />
     </div>
   ),
diff --git a/src/components/form-field/radio-input/radio-input.stories.tsx b/src/components/form-field/radio-input/radio-input.stories.tsx
index 8936bf60..64a0ad96 100644
--- a/src/components/form-field/radio-input/radio-input.stories.tsx
+++ b/src/components/form-field/radio-input/radio-input.stories.tsx
@@ -2,9 +2,18 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useEffect, useState } from 'react'
 import { FormField } from '../form-field'
 
-const meta: Meta<typeof FormField.RadioInput> = {
+type RadioInputStoryArgs = {
+  label: string
+  description: string
+  optionOneLabel: string
+  optionTwoLabel: string
+  optionThreeLabel: string
+  defaultValue: string
+  disableThirdOption: boolean
+}
+
+const meta: Meta<RadioInputStoryArgs> = {
   title: 'Input/RadioInput',
-  component: FormField.RadioInput,
   args: {
     label: 'Label',
     description: 'Description',
@@ -15,22 +24,21 @@ const meta: Meta<typeof FormField.RadioInput> = {
     disableThirdOption: true,
   },
   argTypes: {
-    label: { control: 'text' },
-    description: { control: 'text' },
-    optionOneLabel: { control: 'text' },
-    optionTwoLabel: { control: 'text' },
-    optionThreeLabel: { control: 'text' },
+    label: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
+    optionOneLabel: { control: { type: 'text' } },
+    optionTwoLabel: { control: { type: 'text' } },
+    optionThreeLabel: { control: { type: 'text' } },
     defaultValue: {
-      control: 'select',
-      options: ['value_1', 'value_2', 'value_3'],
+      control: { type: 'select', options: ['value_1', 'value_2', 'value_3'] },
     },
-    disableThirdOption: { control: 'boolean' },
+    disableThirdOption: { control: { type: 'boolean' } },
   },
 }
 
 export default meta
 
-type Story = StoryObj<typeof FormField.RadioInput>
+type Story = StoryObj<typeof meta>
 
 const RadioInputWithHooks = ({
   label,
diff --git a/src/components/form-field/search-input/search-input.stories.tsx b/src/components/form-field/search-input/search-input.stories.tsx
index dcefb954..6b8f2400 100644
--- a/src/components/form-field/search-input/search-input.stories.tsx
+++ b/src/components/form-field/search-input/search-input.stories.tsx
@@ -3,9 +3,17 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useEffect, useState } from 'react'
 import { FormField } from '../form-field'
 
-const meta: Meta<typeof FormField.SearchInput> = {
+type SearchInputStoryArgs = {
+  error: boolean
+  disabled: boolean
+  readOnly: boolean
+  value: string
+  label: string
+  description: string
+}
+
+const meta: Meta<SearchInputStoryArgs> = {
   title: 'Input/SearchInput',
-  component: FormField.SearchInput,
   args: {
     error: false,
     disabled: false,
@@ -15,18 +23,18 @@ const meta: Meta<typeof FormField.SearchInput> = {
     description: 'Description',
   },
   argTypes: {
-    error: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    readOnly: { control: 'boolean' },
-    value: { control: 'text' },
-    label: { control: 'text' },
-    description: { control: 'text' },
+    error: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } },
+    value: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
   },
 }
 
 export default meta
 
-type Story = StoryObj<typeof FormField.SearchInput>
+type Story = StoryObj<typeof meta>
 
 const SearchInputWithHooks = ({
   error = false,
@@ -77,7 +85,7 @@ const SearchInputWithHooks = ({
 }
 
 export const Default: Story = {
-  render: (args) => (
+  render: (args: SearchInputStoryArgs) => (
     <div className='w-72'>
       <SearchInputWithHooks {...args} />
     </div>
diff --git a/src/components/form-field/text-input/text-input.stories.tsx b/src/components/form-field/text-input/text-input.stories.tsx
index 1ab22abf..0f279def 100644
--- a/src/components/form-field/text-input/text-input.stories.tsx
+++ b/src/components/form-field/text-input/text-input.stories.tsx
@@ -4,7 +4,16 @@ import { useState } from 'react'
 import { FormField } from '../form-field'
 import { SearchIcon } from '../../../icons'
 
-const meta: Meta<typeof FormField.TextInput> = {
+type TextInputStoryArgs = {
+  error: boolean
+  disabled: boolean
+  hasLeftIcon: boolean
+  readOnly: boolean
+  value: string
+  optional: boolean
+}
+
+const meta: Meta<TextInputStoryArgs> = {
   title: 'Input/TextInput',
   component: FormField.TextInput,
   args: {
@@ -16,18 +25,18 @@ const meta: Meta<typeof FormField.TextInput> = {
     optional: false,
   },
   argTypes: {
-    error: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    hasLeftIcon: { control: 'boolean' },
-    readOnly: { control: 'boolean' },
-    value: { control: 'text' },
-    optional: { control: 'boolean' },
+    error: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    hasLeftIcon: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } },
+    value: { control: { type: 'text' } },
+    optional: { control: { type: 'boolean' } },
   },
 }
 
 export default meta
 
-type Story = StoryObj<typeof FormField.TextInput>
+type Story = StoryObj<typeof meta>
 
 const TextInputWithHooks = ({
   error = false,
@@ -77,7 +86,7 @@ const TextInputWithHooks = ({
 }
 
 export const Default: Story = {
-  render: (args) => (
+  render: (args: TextInputStoryArgs) => (
     <div className='w-72'>
       <TextInputWithHooks {...args} />
     </div>
diff --git a/src/components/form-field/textarea/textarea.stories.tsx b/src/components/form-field/textarea/textarea.stories.tsx
index 600deac3..41d942e5 100644
--- a/src/components/form-field/textarea/textarea.stories.tsx
+++ b/src/components/form-field/textarea/textarea.stories.tsx
@@ -3,9 +3,17 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useEffect, useState } from 'react'
 import { FormField } from '../form-field'
 
-const meta: Meta<typeof FormField.Textarea> = {
+type TextareaStoryArgs = {
+  error: boolean
+  disabled: boolean
+  label: string
+  description: string
+  placeholder: string
+  value: string
+}
+
+const meta: Meta<TextareaStoryArgs> = {
   title: 'Input/Textarea',
-  component: FormField.Textarea,
   args: {
     error: false,
     disabled: false,
@@ -15,18 +23,18 @@ const meta: Meta<typeof FormField.Textarea> = {
     value: '',
   },
   argTypes: {
-    error: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    label: { control: 'text' },
-    description: { control: 'text' },
-    placeholder: { control: 'text' },
-    value: { control: 'text' },
+    error: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    label: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    value: { control: { type: 'text' } },
   },
 }
 
 export default meta
 
-type Story = StoryObj<typeof FormField.Textarea>
+type Story = StoryObj<typeof meta>
 
 const TextareaWithHooks = ({
   error = false,
@@ -74,7 +82,7 @@ const TextareaWithHooks = ({
 }
 
 export const Default: Story = {
-  render: (args) => (
+  render: (args: TextareaStoryArgs) => (
     <div className='w-72'>
       <TextareaWithHooks {...args} />
     </div>
diff --git a/src/components/menu/menu-info-item/menu-info-item.stories.tsx b/src/components/menu/menu-info-item/menu-info-item.stories.tsx
index 819c2a78..a9d8023f 100644
--- a/src/components/menu/menu-info-item/menu-info-item.stories.tsx
+++ b/src/components/menu/menu-info-item/menu-info-item.stories.tsx
@@ -3,7 +3,13 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import { MenuInfoItem } from './menu-info-item'
 
-const meta: Meta<typeof MenuInfoItem> = {
+type MenuInfoItemStoryArgs = {
+  title: string
+  subtitle: string
+  containerWidth: number
+}
+
+const meta: Meta<MenuInfoItemStoryArgs> = {
   title: 'Menu/MenuInfoItem',
   component: MenuInfoItem,
   args: {
@@ -12,8 +18,8 @@ const meta: Meta<typeof MenuInfoItem> = {
     containerWidth: 208,
   },
   argTypes: {
-    title: { control: 'text' },
-    subtitle: { control: 'text' },
+    title: { control: { type: 'text' } },
+    subtitle: { control: { type: 'text' } },
     containerWidth: {
       control: { type: 'range', min: 120, max: 320, step: 8 },
     },
@@ -21,12 +27,12 @@ const meta: Meta<typeof MenuInfoItem> = {
 }
 
 export default meta
-type Story = StoryObj<typeof MenuInfoItem>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: ({ title, subtitle, containerWidth }) => (
-    <div style={{ width: containerWidth }}>
-      <MenuInfoItem title={title} subtitle={subtitle} />
+  render: (args: MenuInfoItemStoryArgs) => (
+    <div style={{ width: args.containerWidth }}>
+      <MenuInfoItem title={args.title} subtitle={args.subtitle} />
     </div>
   ),
 }
diff --git a/src/components/menu/menu-separator/menu-separator.stories.tsx b/src/components/menu/menu-separator/menu-separator.stories.tsx
index 89cc7f7d..068bbabe 100644
--- a/src/components/menu/menu-separator/menu-separator.stories.tsx
+++ b/src/components/menu/menu-separator/menu-separator.stories.tsx
@@ -3,7 +3,11 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import { MenuSeparator } from './menu-separator'
 
-const meta: Meta<typeof MenuSeparator> = {
+type MenuSeparatorStoryArgs = {
+  containerWidth: number
+}
+
+const meta: Meta<MenuSeparatorStoryArgs> = {
   title: 'Menu/MenuSeparator',
   component: MenuSeparator,
   args: {
@@ -17,11 +21,11 @@ const meta: Meta<typeof MenuSeparator> = {
 }
 
 export default meta
-type Story = StoryObj<typeof MenuSeparator>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: ({ containerWidth }) => (
-    <div style={{ width: containerWidth }}>
+  render: (args: MenuSeparatorStoryArgs) => (
+    <div style={{ width: args.containerWidth }}>
       <MenuSeparator />
     </div>
   ),
diff --git a/src/components/menu/menu-title/menu-title.stories.tsx b/src/components/menu/menu-title/menu-title.stories.tsx
index 95dfe54d..a34fbd55 100644
--- a/src/components/menu/menu-title/menu-title.stories.tsx
+++ b/src/components/menu/menu-title/menu-title.stories.tsx
@@ -2,15 +2,19 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { MenuTitle } from './menu-title'
 
-const meta: Meta<typeof MenuTitle> = {
+type MenuTitleStoryArgs = {
+  title: string
+  containerWidth: number
+}
+
+const meta: Meta<MenuTitleStoryArgs> = {
   title: 'Menu/MenuTitle',
-  component: MenuTitle,
   args: {
     title: 'Title',
     containerWidth: 208,
   },
   argTypes: {
-    title: { control: 'text' },
+    title: { control: { type: 'text' } },
     containerWidth: {
       control: { type: 'range', min: 120, max: 320, step: 8 },
     },
@@ -18,7 +22,7 @@ const meta: Meta<typeof MenuTitle> = {
 }
 
 export default meta
-type Story = StoryObj<typeof MenuTitle>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   render: ({ title, containerWidth }) => (
diff --git a/src/components/page/page.stories.tsx b/src/components/page/page.stories.tsx
index f5db7ca0..61326e0a 100644
--- a/src/components/page/page.stories.tsx
+++ b/src/components/page/page.stories.tsx
@@ -1,21 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Page } from './page'
 
-const meta: Meta<typeof Page> = {
+type PageStoryArgs = {
+  title: string
+  description: string
+}
+
+const meta: Meta<PageStoryArgs> = {
   title: 'Page',
-  component: Page,
   args: {
     title: 'Page Title',
     description: 'Description',
   },
   argTypes: {
-    title: { control: 'text' },
-    description: { control: 'text' },
+    title: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
   },
 }
 
 export default meta
-type Story = StoryObj<typeof Page>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   render: ({ title, description }) => (
diff --git a/src/components/section/section.stories.tsx b/src/components/section/section.stories.tsx
index 6cce268b..2ad973c3 100644
--- a/src/components/section/section.stories.tsx
+++ b/src/components/section/section.stories.tsx
@@ -2,9 +2,15 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from './section'
 import { Button } from '../button/button'
 
-const meta: Meta<typeof Section> = {
+type SectionStoryArgs = {
+  title: string
+  description: string
+  panelText: string
+  actionLabel: string
+}
+
+const meta: Meta<SectionStoryArgs> = {
   title: 'Section',
-  component: Section,
   args: {
     title: 'Section Title',
     description: 'Description',
@@ -12,15 +18,15 @@ const meta: Meta<typeof Section> = {
     actionLabel: 'Button',
   },
   argTypes: {
-    title: { control: 'text' },
-    description: { control: 'text' },
-    panelText: { control: 'text' },
-    actionLabel: { control: 'text' },
+    title: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
+    panelText: { control: { type: 'text' } },
+    actionLabel: { control: { type: 'text' } },
   },
 }
 
 export default meta
-type Story = StoryObj<typeof Section>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   render: ({ title, description, panelText }) => (
diff --git a/src/components/sidebar-container/sidebar-container.stories.tsx b/src/components/sidebar-container/sidebar-container.stories.tsx
index fe4e2fa4..cfc3b241 100644
--- a/src/components/sidebar-container/sidebar-container.stories.tsx
+++ b/src/components/sidebar-container/sidebar-container.stories.tsx
@@ -1,21 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { SidebarContainer } from './sidebar-container'
 
-const meta: Meta<typeof SidebarContainer> = {
+type SidebarContainerStoryArgs = {
+  sidebarLabel: string
+  pageLabel: string
+}
+
+const meta: Meta<SidebarContainerStoryArgs> = {
   title: 'SidebarContainer',
-  component: SidebarContainer,
   args: {
     sidebarLabel: 'Sidebar Content',
     pageLabel: 'Page Content',
   },
   argTypes: {
-    sidebarLabel: { control: 'text' },
-    pageLabel: { control: 'text' },
+    sidebarLabel: { control: { type: 'text' } },
+    pageLabel: { control: { type: 'text' } },
   },
 }
 
 export default meta
-type Story = StoryObj<typeof SidebarContainer>
+type Story = StoryObj<typeof meta>
 
 export const Header: Story = {
   render: ({ sidebarLabel, pageLabel }) => (
diff --git a/src/components/sidebar/sidebar.stories.tsx b/src/components/sidebar/sidebar.stories.tsx
index 4fe5ea3d..96746e41 100644
--- a/src/components/sidebar/sidebar.stories.tsx
+++ b/src/components/sidebar/sidebar.stories.tsx
@@ -1,19 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Sidebar } from './sidebar'
 
-const meta: Meta<typeof Sidebar> = {
+type SidebarStoryArgs = {
+  label: string
+}
+
+const meta: Meta<SidebarStoryArgs> = {
   title: 'Sidebar',
-  component: Sidebar,
   args: {
     label: 'Example',
   },
   argTypes: {
-    label: { control: 'text' },
+    label: { control: { type: 'text' } },
   },
 }
 
 export default meta
-type Story = StoryObj<typeof Sidebar>
+type Story = StoryObj<typeof meta>
 
 export const Header: Story = {
   render: ({ label }) => <Sidebar.Header> {label} </Sidebar.Header>,
diff --git a/src/components/slot/slot.stories.tsx b/src/components/slot/slot.stories.tsx
index de6c0648..a1a9fb8d 100644
--- a/src/components/slot/slot.stories.tsx
+++ b/src/components/slot/slot.stories.tsx
@@ -1,7 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Slot } from './slot'
 
-const meta: Meta<typeof Slot> = {
+type SlotStoryArgs = {
+  label: string
+  href: string
+  className: string
+}
+
+const meta: Meta<SlotStoryArgs> = {
   title: 'Slot',
   component: Slot,
   args: {
@@ -10,15 +16,15 @@ const meta: Meta<typeof Slot> = {
     className: 'text-primary-500 underline',
   },
   argTypes: {
-    label: { control: 'text' },
-    href: { control: 'text' },
-    className: { control: 'text' },
+    label: { control: { type: 'text' } },
+    href: { control: { type: 'text' } },
+    className: { control: { type: 'text' } },
   },
 }
 
 export default meta
 
-type Story = StoryObj<typeof Slot>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   render: ({ label, href, className }) => (
diff --git a/src/components/table-key-value-pair/table-key-value-pair.stories.tsx b/src/components/table-key-value-pair/table-key-value-pair.stories.tsx
index 69e2bb24..e00f8d40 100644
--- a/src/components/table-key-value-pair/table-key-value-pair.stories.tsx
+++ b/src/components/table-key-value-pair/table-key-value-pair.stories.tsx
@@ -3,9 +3,21 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { TableKeyValuePair } from './table-key-value-pair'
 import { FormField } from '../form-field'
 
-const meta: Meta<typeof TableKeyValuePair> = {
+type TableKeyValuePairStoryArgs = {
+  header: string
+  firstNameLabel: string
+  firstNameValue: string
+  ageLabel: string
+  ageValue: string
+  lastNameLabel: string
+  lastNameValue: string
+  birthLabel: string
+  birthValue: string
+  linkLabel: string
+}
+
+const meta: Meta<TableKeyValuePairStoryArgs> = {
   title: 'Table / Key-Value Pairs',
-  component: TableKeyValuePair,
   args: {
     header: 'Details',
     firstNameLabel: 'First Name',
@@ -19,21 +31,21 @@ const meta: Meta<typeof TableKeyValuePair> = {
     linkLabel: 'Open Comments',
   },
   argTypes: {
-    header: { control: 'text' },
-    firstNameLabel: { control: 'text' },
-    firstNameValue: { control: 'text' },
-    ageLabel: { control: 'text' },
-    ageValue: { control: 'text' },
-    lastNameLabel: { control: 'text' },
-    lastNameValue: { control: 'text' },
-    birthLabel: { control: 'text' },
-    birthValue: { control: 'text' },
-    linkLabel: { control: 'text' },
+    header: { control: { type: 'text' } },
+    firstNameLabel: { control: { type: 'text' } },
+    firstNameValue: { control: { type: 'text' } },
+    ageLabel: { control: { type: 'text' } },
+    ageValue: { control: { type: 'text' } },
+    lastNameLabel: { control: { type: 'text' } },
+    lastNameValue: { control: { type: 'text' } },
+    birthLabel: { control: { type: 'text' } },
+    birthValue: { control: { type: 'text' } },
+    linkLabel: { control: { type: 'text' } },
   },
 }
 
 export default meta
-type Story = StoryObj<typeof TableKeyValuePair>
+type Story = StoryObj<typeof meta>
 
 interface Person {
   id: number
diff --git a/src/components/table-virtualized/table-virtualized.test.tsx b/src/components/table-virtualized/table-virtualized.test.tsx
index 39581643..9f215672 100644
--- a/src/components/table-virtualized/table-virtualized.test.tsx
+++ b/src/components/table-virtualized/table-virtualized.test.tsx
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import { createColumnHelper } from '@tanstack/react-table'
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table'
 import { TableVirtualized } from './table-virtualized'
 
 interface RowData {
@@ -33,14 +33,14 @@ describe('TableVirtualized', () => {
       <div style={{ height: 300 }}>
         <TableVirtualized<RowData>
           data={data}
-          columnDefs={columnDefs}
+          columnDefs={columnDefs as ColumnDef<RowData>[]}
           virtualizerOptions={{
             observeElementRect: (_instance, callback) => {
               callback({ height: 300, width: 300 })
               return () => {}
             },
             observeElementOffset: (_instance, callback) => {
-              callback(0)
+              ;(callback as (offset: number, sync?: boolean) => void)(0, false)
               return () => {}
             },
           }}