@cerebruminc/cerebellum 20.0.2 → 20.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # react-component-lib-boilerplate
 
+## [20.0.3](https://github.com/cerebruminc/cerebellum/compare/v20.0.2...v20.0.3) (2026-08-06)
+
+
+### Bug Fixes
+
+* **typescript:** fix wrapper type in mantineTheme after noImplicitAny update ([7388314](https://github.com/cerebruminc/cerebellum/commit/7388314753bc64ee76f5f6acc6c7238650e0b8f9))
+* **typescript:** turn on noImplicitAny ([ab8a818](https://github.com/cerebruminc/cerebellum/commit/ab8a8182b87f808e785218bd26c8eea2bfc4c55f))
+
 ## [20.0.2](https://github.com/cerebruminc/cerebellum/compare/v20.0.1...v20.0.2) (2026-08-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "20.0.2",
+  "version": "20.0.3",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",
@@ -100,7 +100,7 @@
     "remark-gfm": "^4.0.0",
     "storybook": "^9.1.17",
     "ts-jest": "29.3.4",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.3",
     "vite": "^6.3.5",
     "vite-plugin-babel-macros": "^1.0.6"
   },

package/src/SharedStorybook/types.ts

@@ -26,7 +26,7 @@ export interface RelativeContainerProps {
   $paddingString?: string;
 }
 export interface GridContainerProps {
-  $bgColor?: number;
+  $bgColor?: string;
   $breakpoint?: number;
 }
 export interface NoteProps {

package/src/codemods/formatMdxStorybook7Update.ts

@@ -5,14 +5,16 @@
  * Your .mdx file will still need updating, specifically moving comments into the <Description /> tag
  */
 
-export default (fileInfo, api) => {
+import type { FileInfo, API, ASTPath, ImportDeclaration } from "jscodeshift";
+
+export default (fileInfo: FileInfo, api: API) => {
   const j = api.jscodeshift;
   const root = j(fileInfo.source);
 
   // Replace import
   root
     .find(j.ImportDeclaration)
-    .filter((path) => !path.value.specifiers.some((s) => s.type === "ImportNamespaceSpecifier"))
+    .filter((path: ASTPath<ImportDeclaration>) => !path.value.specifiers?.some((s) => s.type === "ImportNamespaceSpecifier"))
     .remove()
     .toSource();
   // .find(j.ImportDeclaration)

package/src/components/Button/Button.stories.tsx

@@ -87,7 +87,7 @@ export default meta;
 
 type Story = StoryObj<ButtonStorybookType>;
 
-const Template = (args) => (
+const Template = (args: ButtonStorybookType) => (
   <GridContainer $bgColor={args.storyBgColor}>
     <Cell>
       <Label>PrimaryButton</Label>
@@ -117,7 +117,7 @@ const Template = (args) => (
   </GridContainer>
 );
 
-const SingleButtonTemplate = (args) => (
+const SingleButtonTemplate = (args: ButtonStorybookType) => (
   <GridContainer>
     <Button {...args} />
     <Note $topMargin={30}>{args.note}</Note>

package/src/components/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { addOrRemoveString } from "../../helpers/arrays";
 import {
@@ -19,7 +20,7 @@ export default meta;
 
 type Story = StoryObj<typeof CheckboxGroup>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof CheckboxGroup>) => {
   const [{ activeValues }, updateArgs] = useArgs();
   return (
     <CheckboxGroup

package/src/components/CheckboxItem/CheckboxItem.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { FlexContainer, IconContainer } from "../../SharedStorybook/Layout";
 import { Note } from "../../SharedStorybook/Notes";
@@ -16,13 +17,13 @@ export default meta;
 
 type Story = StoryObj<typeof CheckboxItem>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof CheckboxItem>) => {
   const [{ active }, updateArgs] = useArgs();
   return (
     <CheckboxItem
       {...args}
       onClick={(item) => {
-        args.onClick(item);
+        args.onClick?.(item);
         updateArgs({ active: !active });
       }}
       active={active}
@@ -30,14 +31,14 @@ const Template = (args) => {
   );
 };
 
-const LongLabelTemplate = (args) => {
+const LongLabelTemplate = (args: ComponentProps<typeof CheckboxItem>) => {
   const [{ active }, updateArgs] = useArgs();
   return (
     <FlexContainer $flexFlow="column nowrap" $gap={100}>
       <CheckboxItem
         {...args}
         onClick={(item) => {
-          args.onClick(item);
+          args.onClick?.(item);
           updateArgs({ active: !active });
         }}
         active={active}

package/src/components/ClickOutHandler/ClickOutHandler.stories.tsx

@@ -31,7 +31,7 @@ export default meta;
 
 type Story = StoryObj<FC<ClickOutHandlerStoryType>>;
 
-const Template = (args) => {
+const Template = (args: ClickOutHandlerStoryType) => {
   const [{ storyBookShow }, updateArgs] = useArgs();
 
   return (
@@ -47,9 +47,9 @@ const Template = (args) => {
         />
         <ClickOutHandler
           borderRadius={args.borderRadius}
-          handleClickAway={() => {
+          handleClickAway={(event) => {
             updateArgs({ storyBookShow: false });
-            args.handleClickAway();
+            args.handleClickAway(event);
           }}
         >
           {storyBookShow && (

package/src/components/ColorPickerInput/ColorPickerInput.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ComponentLabel } from "../../SharedStorybook/ComponentLabel";
 import { ColorPickerInput } from "./ColorPickerInput";
@@ -11,7 +12,7 @@ export default meta;
 
 type Story = StoryObj<typeof ColorPickerInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof ColorPickerInput>) => {
   const [{}, updateArgs] = useArgs();
   return <ColorPickerInput {...args} onValueChange={(newValue) => updateArgs({ value: newValue })} />;
 };

package/src/components/ColorPickerMenu/ColorPickerMenu.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { fewSwatches, manySwatches, swatches } from "../../sharedMocks/swatches";
 import { ColorPickerMenu } from "./ColorPickerMenu";
@@ -11,7 +12,7 @@ export default meta;
 
 type Story = StoryObj<typeof ColorPickerMenu>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof ColorPickerMenu>) => {
   const [{}, updateArgs] = useArgs();
   return <ColorPickerMenu {...args} onSwatchSelect={(swatch) => updateArgs({ selectedSwatch: swatch.color })} />;
 };

package/src/components/ConfigurableInput/ConfigurableInput.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ComponentLabel } from "../../SharedStorybook/ComponentLabel";
 import { colors } from "../../const/colors";
@@ -15,7 +16,7 @@ export default meta;
 
 type Story = StoryObj<typeof ConfigurableInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof ConfigurableInput>) => {
   const [{}, updateArgs] = useArgs();
   return <ConfigurableInput {...args} onValueChange={(value) => updateArgs({ value })} />;
 };

package/src/components/ConfigurableInput/ConfigurableInput.test.tsx

@@ -135,7 +135,7 @@ describe("ConfigurableInput", () => {
     const labelTwo = "Brazil";
     const radios = [
       { value: "none" },
-      { value: labelTwo, mask: (value) => applyMask({ numberValue: value, region: CountryMaskEnum.Brazil }) },
+      { value: labelTwo, mask: (value: string) => applyMask({ numberValue: value, region: CountryMaskEnum.Brazil }) },
     ];
     render(<ThemedConfigurableInput defaultId={labelTwo} maskedRadios={radios} value={rawString} />);
     const inputAfterMask = screen.getByRole("textbox");

package/src/components/ConfirmModal/ConfirmModal.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { Spacer } from "../../SharedStorybook/Layout";
 import { colors } from "../../const/colors";
@@ -16,7 +17,7 @@ export default meta;
 
 type Story = StoryObj<typeof ConfirmModal>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof ConfirmModal> & { children?: React.ReactNode }) => {
   const [, updateArgs] = useArgs();
   return (
     <Spacer $topMargin={30}>

package/src/components/CreditCardInput/CreditCardInput.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ComponentLabel } from "../../SharedStorybook/ComponentLabel";
 import { luhnCreditCardCheck } from "../InlineCreditCardInput/creditCardValidators";
@@ -12,7 +13,7 @@ export default meta;
 
 type Story = StoryObj<typeof CreditCardInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof CreditCardInput>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <CreditCardInput
@@ -24,7 +25,7 @@ const Template = (args) => {
   );
 };
 
-const ValidationTemplate = (args) => {
+const ValidationTemplate = (args: ComponentProps<typeof CreditCardInput>) => {
   const [{ value }, updateArgs] = useArgs();
   return (
     <CreditCardInput

package/src/components/CurrencyInput/CurrencyInput.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ComponentLabelFC } from "../../SharedStorybook/ComponentLabel";
 import { CurrencyInput } from "./CurrencyInput";
@@ -11,7 +12,7 @@ export default meta;
 
 type Story = StoryObj<typeof CurrencyInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof CurrencyInput>) => {
   const [{}, updateArgs] = useArgs();
   return (
     <CurrencyInput

package/src/components/DescriptiveSwitchMenu/DescriptiveSwitchMenu.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { toggleObjectById } from "../../helpers/arrays";
 import { DescriptiveSwitchMenu } from "./DescriptiveSwitchMenu";
@@ -17,12 +18,12 @@ export default meta;
 
 type Story = StoryObj<typeof DescriptiveSwitchMenu>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof DescriptiveSwitchMenu>) => {
   const [{}, updateArgs] = useArgs();
   return <DescriptiveSwitchMenu {...args} onSelect={(option) => updateArgs({ activeRadioId: option.value })} />;
 };
 
-const CheckboxTemplate = (args) => {
+const CheckboxTemplate = (args: ComponentProps<typeof DescriptiveSwitchMenu>) => {
   const [{ options }, updateArgs] = useArgs();
   return (
     <DescriptiveSwitchMenu

package/src/components/Drawer/Drawer.stories.tsx

@@ -23,7 +23,7 @@ export default meta;
 
 type Story = StoryObj<DrawerStoryType>;
 
-export const Template = (args) => {
+export const Template = (args: DrawerStoryType) => {
   const [{ activeToggle }, updateArgs] = useArgs();
   return (
     <BackgroundContainer>

package/src/components/EmailInput/EmailInput.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { ComponentLabel } from "../../SharedStorybook/ComponentLabel";
 import { EmailInput } from "./EmailInput";
@@ -11,7 +12,7 @@ export default meta;
 
 type Story = StoryObj<typeof EmailInput>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof EmailInput>) => {
   const [{}, updateArgs] = useArgs();
   return <EmailInput {...args} onValueChange={(newValue) => updateArgs({ value: newValue })} />;
 };

package/src/components/FiltersBar/FiltersBar.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
 import { useArgs } from "storybook/preview-api";
 import { removeById, removeByIdArray } from "../../helpers/arrays";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
@@ -12,7 +13,7 @@ export default meta;
 
 type Story = StoryObj<typeof FiltersBar>;
 
-const Template = (args) => {
+const Template = (args: ComponentProps<typeof FiltersBar>) => {
   const [{ filters }, updateArgs] = useArgs();
   return (
     <FiltersBar

package/src/components/Form/Form.stories.tsx

@@ -26,7 +26,7 @@ export default meta;
 
 type Story = StoryObj<FormStorybookType>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <RelativeContainer $bgColor={colors.COOL_GREY_4} $paddingString={"20px 0"}>
     <FormWrapper $maxWidth={args.maxWidth}>
       <FormikContainer {...args} />

package/src/components/Form/Form.test.tsx

@@ -697,7 +697,7 @@ describe("Form", () => {
     const labelTwo = "Brazil";
     const radios = [
       { value: defaultRadioLabel },
-      { value: labelTwo, mask: (value) => applyMask({ numberValue: value, region: CountryMaskEnum.Brazil }) },
+      { value: labelTwo, mask: (value: string) => applyMask({ numberValue: value, region: CountryMaskEnum.Brazil }) },
     ];
     const fields = [
       {

package/src/components/Form/fields/AddressField/AddressField.stories.tsx

@@ -1,9 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { FocusEvent } from "react";
 import { Location } from "../../../../index";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
 import { addressFields } from "../../mocks/fields";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `Address` is a text input that is hooked up to Google maps. You must pass a `googleMapsAPIKey` to `Form` to enable this field.
@@ -15,7 +16,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -50,9 +51,9 @@ export const AddressOptions: Story = {
           helperText: "You can configure the options, like 'helperText', in field[n].options",
           LeadingIcon: Location,
           onEnter: () => console.log("onEnter - text"),
-          onInputBlur: (event) => console.log("onInputBlur - text", event),
+          onInputBlur: (event: FocusEvent<HTMLInputElement>) => console.log("onInputBlur - text", event),
           onInputFocus: () => console.log("onInputFocus - text"),
-          onChange: (event) => console.log("onChange - text", event),
+          onChange: (event: { target: { value: string; name?: string } }) => console.log("onChange - text", event),
           placeholder: "Where do you live?",
         },
       },

package/src/components/Form/fields/CheckboxField/CheckboxField.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ChangeEvent } from "react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /** `Checkbox` is a single checkbox input and label. For multiple checkboxes, use `CheckboxGroup`. */
 const meta: Meta<typeof FormikContainer> = { component: FormikContainer, title: "organisms/Form/Fields/Checkbox" };
@@ -9,7 +10,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -41,7 +42,7 @@ export const CheckboxOptions: Story = {
         type: FormFieldTypeEnum.Checkbox,
         options: {
           center: true,
-          onCheckboxClick: (event) => console.log("onCheckboxClick", event),
+          onCheckboxClick: (event: ChangeEvent<HTMLInputElement>) => console.log("onCheckboxClick", event),
           leftLabel: "this is the 'leftLabel'",
         },
       },

package/src/components/Form/fields/CheckboxGroupField/CheckboxGroupField.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ChangeEvent } from "react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
 import { switches } from "../../mocks/switches";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `CheckboxGroup` is a group of checkboxes with labels. For a single checkbox, use `Checkbox`.
@@ -14,7 +15,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -71,7 +72,7 @@ export const CheckboxGroupOptions: Story = {
 
         options: {
           checkboxes: switches,
-          onCheckboxClick: (event) => console.log("onCheckboxClick", event),
+          onCheckboxClick: (event: ChangeEvent<HTMLInputElement>) => console.log("onCheckboxClick", event),
           helperText: "This is the 'helperText'",
           label: "CheckboxGroup with options",
         },

package/src/components/Form/fields/ColorPickerField/ColorPickerField.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /** `ColorPicker` is a native HTML color picker input that allows users to select colors. It supports optional contrast validation to ensure legibility. */
 const meta: Meta<typeof FormikContainer> = { component: FormikContainer, title: "organisms/Form/Fields/ColorPicker" };
@@ -9,7 +9,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>

package/src/components/Form/fields/ConfigurableInputField/ConfigurableInputField.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { FocusEvent } from "react";
 import { maskedRadios, maskedRadiosWithValidation } from "../../../ConfigurableInput/mocks";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `ConfigurableInput` uses a group of radio buttons to apply specific masks and/or placeholder text to an input.
@@ -12,7 +13,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -59,10 +60,10 @@ export const ConfigurableInputOptions: Story = {
           maskedRadios,
           maxRadioLabelWidth: 50,
           onEnter: () => console.log("onEnter - ConfigurableInput"),
-          onInputBlur: (event) => console.log("onInputBlur - ConfigurableInput", event),
+          onInputBlur: (event: FocusEvent<HTMLInputElement>) => console.log("onInputBlur - ConfigurableInput", event),
           onInputFocus: () => console.log("onInputFocus - ConfigurableInput"),
-          onChange: (event) => console.log("onChange - ConfigurableInput", event),
-          onRadioClick: (event) => console.log("onRadioClick - ConfigurableInput", event),
+          onChange: (event: { target: { value: string; name?: string } }) => console.log("onChange - ConfigurableInput", event),
+          onRadioClick: (id: string) => console.log("onRadioClick - ConfigurableInput", id),
           placeholder: "Type something",
           type: "text",
           vertical: true,

package/src/components/Form/fields/CountrySelectField/CountrySelectField.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType, SelectOptionType } from "../../types";
 import { DynamicLabelsExample } from "./DynamicLabelsExample";
 
 /**
@@ -12,13 +12,13 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
 );
 
-const DynamicLabelsTemplate = (args) => <DynamicLabelsExample />;
+const DynamicLabelsTemplate = (_args: FormStorybookType) => <DynamicLabelsExample />;
 
 /** This is `FormFieldTypeEnum.CountrySelect` with the default options */
 export const CountrySelect: Story = {
@@ -52,7 +52,7 @@ export const CountrySelectOptions: Story = {
         width: 400,
         initialValue: "us",
         options: {
-          onSelect: (event) => console.log("onSelect", event),
+          onSelect: (event: SelectOptionType | undefined) => console.log("onSelect", event),
           helperText: "This is the 'helperText', It's okay if this is a bit longer",
           innerSearch: true,
           label: "CountrySelect with options",

package/src/components/Form/fields/CountySelectField/CountySelectField.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { USStatesEnum } from "../../../../sharedTypes/enums";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType, SelectOptionType } from "../../types";
 
 /**
  * `CountySelect` is a select component preconfigured to support US Counties. It will be blank unless `state` is provided
@@ -12,7 +12,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>
@@ -51,7 +51,7 @@ export const CountySelectOptions: Story = {
         width: 400,
         initialValue: "Angelina",
         options: {
-          onSelect: (event) => console.log("onSelect", event),
+          onSelect: (event: SelectOptionType | undefined) => console.log("onSelect", event),
           helperText: "This is the 'helperText', It's okay if this is a bit longer",
           innerSearch: true,
           label: "CountySelect with options",
@@ -82,7 +82,7 @@ export const WithStatePicker: Story = {
         width: 400,
         options: {
           countyFieldName: "County",
-          onSelect: (event) => console.log("onSelect", event),
+          onSelect: (event: SelectOptionType | undefined) => console.log("onSelect", event),
           placeholder: "Select a state",
         },
       },
@@ -92,7 +92,7 @@ export const WithStatePicker: Story = {
         type: FormFieldTypeEnum.CountySelect,
         width: 400,
         options: {
-          onSelect: (event) => console.log("onSelect", event),
+          onSelect: (event: SelectOptionType | undefined) => console.log("onSelect", event),
           helperText: "This will be disabled until a State is selected",
           placeholder: "Select a county",
           stateFieldName: "State",

package/src/components/Form/fields/CreditCardField/CreditCardField.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `CreditCard` is a text input configured for credit cards, with an inbuilt `CreditCard` icon and string formatting support. It accepts a string as a value, but only accepts digits internally. The returned value is also a string. The credit card issuer will be shown as a TrailingText, but it can be removed through the `hideCardName` prop.
@@ -11,7 +11,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>

package/src/components/Form/fields/CurrencyField/CurrencyField.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { FormWrapper } from "../../FormStyles";
 import { FormikContainer } from "../../FormikContainer";
-import { FormFieldTypeEnum } from "../../types";
+import { FormFieldTypeEnum, FormStorybookType } from "../../types";
 
 /**
  * `Currency` is a text input configured for currency. It accepts numbers, but converts this into a formatted string for legibility.
@@ -13,7 +13,7 @@ export default meta;
 
 type Story = StoryObj<typeof FormikContainer>;
 
-const Template = (args) => (
+const Template = (args: FormStorybookType) => (
   <FormWrapper $maxWidth={args.maxWidth}>
     <FormikContainer {...args} />
   </FormWrapper>