From 79e97823dd6fbf088670eb97893f2e39f978ceac Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Tue, 5 Mar 2024 15:23:30 +0100
Subject: [PATCH 1/6] [TS migration] Migrate 'Picker.stories.js' story

---
 .../{Picker.stories.js => Picker.stories.tsx} | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)
 rename src/stories/{Picker.stories.js => Picker.stories.tsx} (77%)

diff --git a/src/stories/Picker.stories.js b/src/stories/Picker.stories.tsx
similarity index 77%
rename from src/stories/Picker.stories.js
rename to src/stories/Picker.stories.tsx
index b42cfed8f471..a277db387f79 100644
--- a/src/stories/Picker.stories.js
+++ b/src/stories/Picker.stories.tsx
@@ -1,25 +1,30 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React, {useState} from 'react';
 import Picker from '@components/Picker';
+import type {BasePickerProps} from '@components/Picker/types';
+
+type PickerStory = ComponentStory<typeof Picker<string>>;
+
+type TemplateProps = Omit<BasePickerProps<string>, 'onInputChange'>;
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story = {
+const story: ComponentMeta<typeof Picker> = {
     title: 'Components/Picker',
     component: Picker,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-function Template(args) {
+function Template(props: TemplateProps) {
     const [value, setValue] = useState('');
     return (
         <Picker
             value={value}
             onInputChange={(e) => setValue(e)}
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
+            {...props}
         />
     );
 }
@@ -27,10 +32,9 @@ function Template(args) {
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 
-const Default = Template.bind({});
+const Default: PickerStory = Template.bind({});
 Default.args = {
     label: 'Default picker',
-    name: 'Default',
     hintText: 'Default hint text',
     items: [
         {
@@ -44,10 +48,9 @@ Default.args = {
     ],
 };
 
-const PickerWithValue = Template.bind({});
+const PickerWithValue: PickerStory = Template.bind({});
 PickerWithValue.args = {
     label: 'Picker with defined value',
-    name: 'Picker with defined value',
     value: 'apple',
     hintText: 'Picker with hint text',
     items: [
@@ -62,10 +65,9 @@ PickerWithValue.args = {
     ],
 };
 
-const ErrorStory = Template.bind({});
+const ErrorStory: PickerStory = Template.bind({});
 ErrorStory.args = {
     label: 'Picker with error',
-    name: 'PickerWithError',
     hintText: 'Picker hint text',
     errorText: 'This field has an error.',
     items: [
@@ -80,10 +82,9 @@ ErrorStory.args = {
     ],
 };
 
-const Disabled = Template.bind({});
+const Disabled: PickerStory = Template.bind({});
 Disabled.args = {
     label: 'Picker disabled',
-    name: 'Disabled',
     value: 'orange',
     isDisabled: true,
     hintText: 'Picker hint text',

From aecff1ab5be09644177911ce0134154e2fe1d86f Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Tue, 5 Mar 2024 15:38:52 +0100
Subject: [PATCH 2/6] [TS migration] Migrate 'Tooltip.stories.js' story

---
 ...Tooltip.stories.js => Tooltip.stories.tsx} | 29 +++++++++----------
 1 file changed, 13 insertions(+), 16 deletions(-)
 rename src/stories/{Tooltip.stories.js => Tooltip.stories.tsx} (76%)

diff --git a/src/stories/Tooltip.stories.js b/src/stories/Tooltip.stories.tsx
similarity index 76%
rename from src/stories/Tooltip.stories.js
rename to src/stories/Tooltip.stories.tsx
index 900cd6dedd76..c9caf7bc6496 100644
--- a/src/stories/Tooltip.stories.js
+++ b/src/stories/Tooltip.stories.tsx
@@ -1,27 +1,29 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import Tooltip from '@components/Tooltip';
+import type {TooltipExtendedProps} from '@components/Tooltip/types';
+
+type TooltipStory = ComponentStory<typeof Tooltip>;
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story = {
+const story: ComponentMeta<typeof Tooltip> = {
     title: 'Components/Tooltip',
     component: Tooltip,
 };
 
-function Template(args) {
+function Template(props: TooltipExtendedProps) {
     return (
-        <div
-            style={{
-                width: 100,
-            }}
-        >
+        <div style={{width: 100}}>
             <Tooltip
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...args}
-                maxWidth={args.maxWidth || undefined}
+                {...props}
+                // Disable nullish coalescing to handle cases when maxWidth is 0
+                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                maxWidth={props.maxWidth || undefined}
             >
                 <div
                     style={{
@@ -42,7 +44,7 @@ function Template(args) {
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
+const Default: TooltipStory = Template.bind({});
 Default.args = {
     text: 'Tooltip',
     numberOfLines: 1,
@@ -63,12 +65,7 @@ function RenderContent() {
     );
 
     return (
-        <div
-            style={{
-                width: 100,
-            }}
-        >
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <div style={{width: 100}}>
             <Tooltip renderTooltipContent={renderTooltipContent}>
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                 <div

From 86f999299ecc28ecaeb71524edfb149beec972d0 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Tue, 5 Mar 2024 15:43:40 +0100
Subject: [PATCH 3/6] [TS migration] Migrate 'InlineSystemMessage.stories.js'
 story

---
 src/components/InlineSystemMessage.tsx               |  2 ++
 ...ge.stories.js => InlineSystemMessage.stories.tsx} | 12 ++++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)
 rename src/stories/{InlineSystemMessage.stories.js => InlineSystemMessage.stories.tsx} (59%)

diff --git a/src/components/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx
index bef4c21289d5..4cf7aeb4433e 100644
--- a/src/components/InlineSystemMessage.tsx
+++ b/src/components/InlineSystemMessage.tsx
@@ -33,3 +33,5 @@ function InlineSystemMessage({message = ''}: InlineSystemMessageProps) {
 InlineSystemMessage.displayName = 'InlineSystemMessage';
 
 export default InlineSystemMessage;
+
+export type {InlineSystemMessageProps};
diff --git a/src/stories/InlineSystemMessage.stories.js b/src/stories/InlineSystemMessage.stories.tsx
similarity index 59%
rename from src/stories/InlineSystemMessage.stories.js
rename to src/stories/InlineSystemMessage.stories.tsx
index b7fe21c8b10e..5c00a41ac479 100644
--- a/src/stories/InlineSystemMessage.stories.js
+++ b/src/stories/InlineSystemMessage.stories.tsx
@@ -1,24 +1,28 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import InlineSystemMessage from '@components/InlineSystemMessage';
+import type {InlineSystemMessageProps} from '@components/InlineSystemMessage';
+
+type InlineSystemMessageStory = ComponentStory<typeof InlineSystemMessage>;
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story = {
+const story: ComponentMeta<typeof InlineSystemMessage> = {
     title: 'Components/InlineSystemMessage',
     component: InlineSystemMessage,
 };
 
-function Template(args) {
+function Template(props: InlineSystemMessageProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <InlineSystemMessage {...args} />;
+    return <InlineSystemMessage {...props} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
+const Default: InlineSystemMessageStory = Template.bind({});
 Default.args = {
     message: 'This is an error message',
 };

From 1bca738c3a5913a08bcb51cdf3dc7c3079d924ef Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Tue, 5 Mar 2024 15:50:00 +0100
Subject: [PATCH 4/6] [TS migration] Migrate 'MagicCodeInput.stories.js' story

---
 src/components/MagicCodeInput.tsx                  |  2 +-
 src/stories/InlineSystemMessage.stories.tsx        |  4 ++--
 ...Input.stories.js => MagicCodeInput.stories.tsx} | 14 ++++++++------
 src/stories/Picker.stories.tsx                     |  4 ++--
 src/stories/Tooltip.stories.tsx                    |  6 +++---
 5 files changed, 16 insertions(+), 14 deletions(-)
 rename src/stories/{MagicCodeInput.stories.js => MagicCodeInput.stories.tsx} (71%)

diff --git a/src/components/MagicCodeInput.tsx b/src/components/MagicCodeInput.tsx
index 93febc4fd3c0..deff56a534ee 100644
--- a/src/components/MagicCodeInput.tsx
+++ b/src/components/MagicCodeInput.tsx
@@ -430,4 +430,4 @@ function MagicCodeInput(
 MagicCodeInput.displayName = 'MagicCodeInput';
 
 export default forwardRef(MagicCodeInput);
-export type {AutoCompleteVariant, MagicCodeInputHandle};
+export type {AutoCompleteVariant, MagicCodeInputHandle, MagicCodeInputProps};
diff --git a/src/stories/InlineSystemMessage.stories.tsx b/src/stories/InlineSystemMessage.stories.tsx
index 5c00a41ac479..32271a394ae8 100644
--- a/src/stories/InlineSystemMessage.stories.tsx
+++ b/src/stories/InlineSystemMessage.stories.tsx
@@ -15,9 +15,9 @@ const story: ComponentMeta<typeof InlineSystemMessage> = {
     component: InlineSystemMessage,
 };
 
-function Template(props: InlineSystemMessageProps) {
+function Template(args: InlineSystemMessageProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <InlineSystemMessage {...props} />;
+    return <InlineSystemMessage {...args} />;
 }
 
 // Arguments can be passed to the component by binding
diff --git a/src/stories/MagicCodeInput.stories.js b/src/stories/MagicCodeInput.stories.tsx
similarity index 71%
rename from src/stories/MagicCodeInput.stories.js
rename to src/stories/MagicCodeInput.stories.tsx
index 14b234996ce1..4ebab6e868ae 100644
--- a/src/stories/MagicCodeInput.stories.js
+++ b/src/stories/MagicCodeInput.stories.tsx
@@ -1,17 +1,21 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React, {useState} from 'react';
 import MagicCodeInput from '@components/MagicCodeInput';
+import type {MagicCodeInputProps} from '@components/MagicCodeInput';
+
+type MagicCodeInputStory = ComponentStory<typeof MagicCodeInput>;
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story = {
+const story: ComponentMeta<typeof MagicCodeInput> = {
     title: 'Components/MagicCodeInput',
     component: MagicCodeInput,
 };
 
-function Template(args) {
+function Template(args: MagicCodeInputProps) {
     const [value, setValue] = useState('');
     return (
         <MagicCodeInput
@@ -26,17 +30,15 @@ function Template(args) {
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 
-const AutoFocus = Template.bind({});
+const AutoFocus: MagicCodeInputStory = Template.bind({});
 AutoFocus.args = {
-    label: 'Auto-focused magic code input',
     name: 'AutoFocus',
     autoFocus: true,
     autoComplete: 'one-time-code',
 };
 
-const SubmitOnComplete = Template.bind({});
+const SubmitOnComplete: MagicCodeInputStory = Template.bind({});
 SubmitOnComplete.args = {
-    label: 'Submits when the magic code input is complete',
     name: 'SubmitOnComplete',
     autoComplete: 'one-time-code',
     shouldSubmitOnComplete: true,
diff --git a/src/stories/Picker.stories.tsx b/src/stories/Picker.stories.tsx
index a277db387f79..b13d28cf77ac 100644
--- a/src/stories/Picker.stories.tsx
+++ b/src/stories/Picker.stories.tsx
@@ -17,14 +17,14 @@ const story: ComponentMeta<typeof Picker> = {
     component: Picker,
 };
 
-function Template(props: TemplateProps) {
+function Template(args: TemplateProps) {
     const [value, setValue] = useState('');
     return (
         <Picker
             value={value}
             onInputChange={(e) => setValue(e)}
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
+            {...args}
         />
     );
 }
diff --git a/src/stories/Tooltip.stories.tsx b/src/stories/Tooltip.stories.tsx
index c9caf7bc6496..381c4f510616 100644
--- a/src/stories/Tooltip.stories.tsx
+++ b/src/stories/Tooltip.stories.tsx
@@ -15,15 +15,15 @@ const story: ComponentMeta<typeof Tooltip> = {
     component: Tooltip,
 };
 
-function Template(props: TooltipExtendedProps) {
+function Template(args: TooltipExtendedProps) {
     return (
         <div style={{width: 100}}>
             <Tooltip
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
+                {...args}
                 // Disable nullish coalescing to handle cases when maxWidth is 0
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                maxWidth={props.maxWidth || undefined}
+                maxWidth={args.maxWidth || undefined}
             >
                 <div
                     style={{

From 42ce8019eb40c34f6b59da99f6e6420053c35122 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Tue, 5 Mar 2024 16:17:51 +0100
Subject: [PATCH 5/6] [TS migration] Migrate 'TextInput.stories.js' story

---
 ...Input.stories.js => TextInput.stories.tsx} | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)
 rename src/stories/{TextInput.stories.js => TextInput.stories.tsx} (74%)

diff --git a/src/stories/TextInput.stories.js b/src/stories/TextInput.stories.tsx
similarity index 74%
rename from src/stories/TextInput.stories.js
rename to src/stories/TextInput.stories.tsx
index dd2fcced68b0..5250b69a4389 100644
--- a/src/stories/TextInput.stories.js
+++ b/src/stories/TextInput.stories.tsx
@@ -1,17 +1,21 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React, {useState} from 'react';
 import TextInput from '@components/TextInput';
+import type {BaseTextInputProps} from '@components/TextInput/BaseTextInput/types';
+
+type TextInputStory = ComponentStory<typeof TextInput>;
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story = {
+const story: ComponentMeta<typeof TextInput> = {
     title: 'Components/TextInput',
     component: TextInput,
 };
 
-function Template(args) {
+function Template(args: BaseTextInputProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     return <TextInput {...args} />;
 }
@@ -19,48 +23,48 @@ function Template(args) {
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 
-const AutoFocus = Template.bind({});
+const AutoFocus: TextInputStory = Template.bind({});
 AutoFocus.args = {
     label: 'Auto-focused text input',
     name: 'AutoFocus',
     autoFocus: true,
 };
 
-const DefaultInput = Template.bind({});
+const DefaultInput: TextInputStory = Template.bind({});
 DefaultInput.args = {
     label: 'Default text input',
     name: 'Default',
 };
 
-const DefaultValueInput = Template.bind({});
+const DefaultValueInput: TextInputStory = Template.bind({});
 DefaultValueInput.args = {
     label: 'Default value input',
     name: 'DefaultValue',
     defaultValue: 'My default value',
 };
 
-const ErrorInput = Template.bind({});
+const ErrorInput: TextInputStory = Template.bind({});
 ErrorInput.args = {
     label: 'Error input',
     name: 'InputWithError',
     errorText: "Oops! Looks like there's an error",
 };
 
-const ForceActiveLabel = Template.bind({});
+const ForceActiveLabel: TextInputStory = Template.bind({});
 ForceActiveLabel.args = {
     label: 'Force active label',
     placeholder: 'My placeholder text',
     forceActiveLabel: true,
 };
 
-const PlaceholderInput = Template.bind({});
+const PlaceholderInput: TextInputStory = Template.bind({});
 PlaceholderInput.args = {
     label: 'Placeholder input',
     name: 'Placeholder',
     placeholder: 'My placeholder text',
 };
 
-const PrefixedInput = Template.bind({});
+const PrefixedInput: TextInputStory = Template.bind({});
 PrefixedInput.args = {
     label: 'Prefixed input',
     name: 'Prefixed',
@@ -68,7 +72,7 @@ PrefixedInput.args = {
     prefixCharacter: '@',
 };
 
-const MaxLengthInput = Template.bind({});
+const MaxLengthInput: TextInputStory = Template.bind({});
 MaxLengthInput.args = {
     label: 'MaxLength input',
     name: 'MaxLength',
@@ -76,7 +80,7 @@ MaxLengthInput.args = {
     maxLength: 50,
 };
 
-function HintAndErrorInput(args) {
+function HintAndErrorInput(args: BaseTextInputProps) {
     const [error, setError] = useState('');
     return (
         <TextInput
@@ -101,10 +105,10 @@ HintAndErrorInput.args = {
 };
 
 // To use autoGrow we need to control the TextInput's value
-function AutoGrowSupportInput(args) {
-    const [value, setValue] = useState(args.value || '');
+function AutoGrowSupportInput(args: BaseTextInputProps) {
+    const [value, setValue] = useState(args.value ?? '');
     React.useEffect(() => {
-        setValue(args.value || '');
+        setValue(args.value ?? '');
     }, [args.value]);
 
     return (
@@ -117,7 +121,7 @@ function AutoGrowSupportInput(args) {
     );
 }
 
-const AutoGrowInput = AutoGrowSupportInput.bind({});
+const AutoGrowInput: TextInputStory = AutoGrowSupportInput.bind({});
 AutoGrowInput.args = {
     label: 'Autogrow input',
     name: 'AutoGrow',
@@ -132,7 +136,7 @@ AutoGrowInput.args = {
     value: '',
 };
 
-const AutoGrowHeightInput = AutoGrowSupportInput.bind({});
+const AutoGrowHeightInput: TextInputStory = AutoGrowSupportInput.bind({});
 AutoGrowHeightInput.args = {
     label: 'Autogrowheight input',
     name: 'AutoGrowHeight',

From 422db60a1d209900c217cad3f0735d7029ca7eaa Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Wed, 6 Mar 2024 10:06:17 +0100
Subject: [PATCH 6/6] Rename args to props

---
 src/stories/InlineSystemMessage.stories.tsx |  4 ++--
 src/stories/MagicCodeInput.stories.tsx      |  4 ++--
 src/stories/Picker.stories.tsx              |  4 ++--
 src/stories/TextInput.stories.tsx           | 18 +++++++++---------
 src/stories/Tooltip.stories.tsx             |  6 +++---
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/stories/InlineSystemMessage.stories.tsx b/src/stories/InlineSystemMessage.stories.tsx
index 32271a394ae8..5c00a41ac479 100644
--- a/src/stories/InlineSystemMessage.stories.tsx
+++ b/src/stories/InlineSystemMessage.stories.tsx
@@ -15,9 +15,9 @@ const story: ComponentMeta<typeof InlineSystemMessage> = {
     component: InlineSystemMessage,
 };
 
-function Template(args: InlineSystemMessageProps) {
+function Template(props: InlineSystemMessageProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <InlineSystemMessage {...args} />;
+    return <InlineSystemMessage {...props} />;
 }
 
 // Arguments can be passed to the component by binding
diff --git a/src/stories/MagicCodeInput.stories.tsx b/src/stories/MagicCodeInput.stories.tsx
index 4ebab6e868ae..bb86c1685593 100644
--- a/src/stories/MagicCodeInput.stories.tsx
+++ b/src/stories/MagicCodeInput.stories.tsx
@@ -15,14 +15,14 @@ const story: ComponentMeta<typeof MagicCodeInput> = {
     component: MagicCodeInput,
 };
 
-function Template(args: MagicCodeInputProps) {
+function Template(props: MagicCodeInputProps) {
     const [value, setValue] = useState('');
     return (
         <MagicCodeInput
             value={value}
             onChangeText={setValue}
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
+            {...props}
         />
     );
 }
diff --git a/src/stories/Picker.stories.tsx b/src/stories/Picker.stories.tsx
index b13d28cf77ac..a277db387f79 100644
--- a/src/stories/Picker.stories.tsx
+++ b/src/stories/Picker.stories.tsx
@@ -17,14 +17,14 @@ const story: ComponentMeta<typeof Picker> = {
     component: Picker,
 };
 
-function Template(args: TemplateProps) {
+function Template(props: TemplateProps) {
     const [value, setValue] = useState('');
     return (
         <Picker
             value={value}
             onInputChange={(e) => setValue(e)}
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
+            {...props}
         />
     );
 }
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
index 5250b69a4389..b8e647949c0f 100644
--- a/src/stories/TextInput.stories.tsx
+++ b/src/stories/TextInput.stories.tsx
@@ -15,9 +15,9 @@ const story: ComponentMeta<typeof TextInput> = {
     component: TextInput,
 };
 
-function Template(args: BaseTextInputProps) {
+function Template(props: BaseTextInputProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <TextInput {...args} />;
+    return <TextInput {...props} />;
 }
 
 // Arguments can be passed to the component by binding
@@ -80,12 +80,12 @@ MaxLengthInput.args = {
     maxLength: 50,
 };
 
-function HintAndErrorInput(args: BaseTextInputProps) {
+function HintAndErrorInput(props: BaseTextInputProps) {
     const [error, setError] = useState('');
     return (
         <TextInput
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
+            {...props}
             onChangeText={(value) => {
                 if (value && value.toLowerCase() === 'oops!') {
                     setError("Oops! Looks like there's an error");
@@ -105,16 +105,16 @@ HintAndErrorInput.args = {
 };
 
 // To use autoGrow we need to control the TextInput's value
-function AutoGrowSupportInput(args: BaseTextInputProps) {
-    const [value, setValue] = useState(args.value ?? '');
+function AutoGrowSupportInput(props: BaseTextInputProps) {
+    const [value, setValue] = useState(props.value ?? '');
     React.useEffect(() => {
-        setValue(args.value ?? '');
-    }, [args.value]);
+        setValue(props.value ?? '');
+    }, [props.value]);
 
     return (
         <TextInput
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
+            {...props}
             onChangeText={setValue}
             value={value}
         />
diff --git a/src/stories/Tooltip.stories.tsx b/src/stories/Tooltip.stories.tsx
index 381c4f510616..c9caf7bc6496 100644
--- a/src/stories/Tooltip.stories.tsx
+++ b/src/stories/Tooltip.stories.tsx
@@ -15,15 +15,15 @@ const story: ComponentMeta<typeof Tooltip> = {
     component: Tooltip,
 };
 
-function Template(args: TooltipExtendedProps) {
+function Template(props: TooltipExtendedProps) {
     return (
         <div style={{width: 100}}>
             <Tooltip
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...args}
+                {...props}
                 // Disable nullish coalescing to handle cases when maxWidth is 0
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                maxWidth={args.maxWidth || undefined}
+                maxWidth={props.maxWidth || undefined}
             >
                 <div
                     style={{