From 595efa6e43a7b0a3650ca70cc283594c815cb821 Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Mon, 27 Mar 2023 10:29:56 -0700
Subject: [PATCH 01/24] chore: example of broken Autocomplete behavior

---
 packages/odyssey-react-mui/src/index.ts       |   4 +
 .../odyssey-mui/Autocomplete/Autocomplete.mdx |  13 ++
 .../Autocomplete/Autocomplete.stories.tsx     | 186 ++++++++++++++++++
 3 files changed, 203 insertions(+)
 create mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
 create mode 100644 packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx

diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts
index f32b40a56e..2ab13bcbc2 100644
--- a/packages/odyssey-react-mui/src/index.ts
+++ b/packages/odyssey-react-mui/src/index.ts
@@ -13,6 +13,7 @@
 export {
   Alert,
   AlertTitle,
+  Autocomplete,
   Box,
   Button,
   Chip,
@@ -58,6 +59,7 @@ export {
   TableHead,
   TableRow,
   TableSortLabel,
+  TextField as TextFieldMui,
   ThemeProvider as MuiThemeProvider,
   Tooltip,
   Typography,
@@ -66,6 +68,7 @@ export {
 export type {
   AlertProps,
   AlertTitleProps,
+  AutocompleteProps,
   BoxProps,
   ButtonProps,
   ChipProps,
@@ -111,6 +114,7 @@ export type {
   TableProps,
   TableRowProps,
   TableSortLabelProps,
+  TextFieldProps as TextFieldMuiProps,
   ThemeOptions,
   TooltipProps,
   TypographyProps,
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
new file mode 100644
index 0000000000..544be04d72
--- /dev/null
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
@@ -0,0 +1,13 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+
+<Meta anchor />
+
+# Autocomplete
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--default" />
+</Canvas>
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--mui" />
+</Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
new file mode 100644
index 0000000000..55817ddcfc
--- /dev/null
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -0,0 +1,186 @@
+/*!
+ * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Autocomplete, TextField, TextFieldMui } from "@okta/odyssey-react-mui";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { MuiThemeDecorator } from "../../../../.storybook/components";
+import AutocompleteMdx from "./Autocomplete.mdx";
+
+const storybookMeta: ComponentMeta<typeof Autocomplete> = {
+  title: `MUI Components/Forms/Autocomplete`,
+  component: Autocomplete,
+  parameters: {
+    docs: {
+      page: AutocompleteMdx,
+    },
+  },
+  argTypes: {},
+  decorators: [MuiThemeDecorator],
+};
+
+export default storybookMeta;
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { label: "The Shawshank Redemption", year: 1994 },
+  { label: "The Godfather", year: 1972 },
+  { label: "The Godfather: Part II", year: 1974 },
+  { label: "The Dark Knight", year: 2008 },
+  { label: "12 Angry Men", year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: "Pulp Fiction", year: 1994 },
+  {
+    label: "The Lord of the Rings: The Return of the King",
+    year: 2003,
+  },
+  { label: "The Good, the Bad and the Ugly", year: 1966 },
+  { label: "Fight Club", year: 1999 },
+  {
+    label: "The Lord of the Rings: The Fellowship of the Ring",
+    year: 2001,
+  },
+  {
+    label: "Star Wars: Episode V - The Empire Strikes Back",
+    year: 1980,
+  },
+  { label: "Forrest Gump", year: 1994 },
+  { label: "Inception", year: 2010 },
+  {
+    label: "The Lord of the Rings: The Two Towers",
+    year: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { label: "Goodfellas", year: 1990 },
+  { label: "The Matrix", year: 1999 },
+  { label: "Seven Samurai", year: 1954 },
+  {
+    label: "Star Wars: Episode IV - A New Hope",
+    year: 1977,
+  },
+  { label: "City of God", year: 2002 },
+  { label: "Se7en", year: 1995 },
+  { label: "The Silence of the Lambs", year: 1991 },
+  { label: "It's a Wonderful Life", year: 1946 },
+  { label: "Life Is Beautiful", year: 1997 },
+  { label: "The Usual Suspects", year: 1995 },
+  { label: "Léon: The Professional", year: 1994 },
+  { label: "Spirited Away", year: 2001 },
+  { label: "Saving Private Ryan", year: 1998 },
+  { label: "Once Upon a Time in the West", year: 1968 },
+  { label: "American History X", year: 1998 },
+  { label: "Interstellar", year: 2014 },
+  { label: "Casablanca", year: 1942 },
+  { label: "City Lights", year: 1931 },
+  { label: "Psycho", year: 1960 },
+  { label: "The Green Mile", year: 1999 },
+  { label: "The Intouchables", year: 2011 },
+  { label: "Modern Times", year: 1936 },
+  { label: "Raiders of the Lost Ark", year: 1981 },
+  { label: "Rear Window", year: 1954 },
+  { label: "The Pianist", year: 2002 },
+  { label: "The Departed", year: 2006 },
+  { label: "Terminator 2: Judgment Day", year: 1991 },
+  { label: "Back to the Future", year: 1985 },
+  { label: "Whiplash", year: 2014 },
+  { label: "Gladiator", year: 2000 },
+  { label: "Memento", year: 2000 },
+  { label: "The Prestige", year: 2006 },
+  { label: "The Lion King", year: 1994 },
+  { label: "Apocalypse Now", year: 1979 },
+  { label: "Alien", year: 1979 },
+  { label: "Sunset Boulevard", year: 1950 },
+  {
+    label:
+      "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
+    year: 1964,
+  },
+  { label: "The Great Dictator", year: 1940 },
+  { label: "Cinema Paradiso", year: 1988 },
+  { label: "The Lives of Others", year: 2006 },
+  { label: "Grave of the Fireflies", year: 1988 },
+  { label: "Paths of Glory", year: 1957 },
+  { label: "Django Unchained", year: 2012 },
+  { label: "The Shining", year: 1980 },
+  { label: "WALL·E", year: 2008 },
+  { label: "American Beauty", year: 1999 },
+  { label: "The Dark Knight Rises", year: 2012 },
+  { label: "Princess Mononoke", year: 1997 },
+  { label: "Aliens", year: 1986 },
+  { label: "Oldboy", year: 2003 },
+  { label: "Once Upon a Time in America", year: 1984 },
+  { label: "Witness for the Prosecution", year: 1957 },
+  { label: "Das Boot", year: 1981 },
+  { label: "Citizen Kane", year: 1941 },
+  { label: "North by Northwest", year: 1959 },
+  { label: "Vertigo", year: 1958 },
+  {
+    label: "Star Wars: Episode VI - Return of the Jedi",
+    year: 1983,
+  },
+  { label: "Reservoir Dogs", year: 1992 },
+  { label: "Braveheart", year: 1995 },
+  { label: "M", year: 1931 },
+  { label: "Requiem for a Dream", year: 2000 },
+  { label: "Amélie", year: 2001 },
+  { label: "A Clockwork Orange", year: 1971 },
+  { label: "Like Stars on Earth", year: 2007 },
+  { label: "Taxi Driver", year: 1976 },
+  { label: "Lawrence of Arabia", year: 1962 },
+  { label: "Double Indemnity", year: 1944 },
+  {
+    label: "Eternal Sunshine of the Spotless Mind",
+    year: 2004,
+  },
+  { label: "Amadeus", year: 1984 },
+  { label: "To Kill a Mockingbird", year: 1962 },
+  { label: "Toy Story 3", year: 2010 },
+  { label: "Logan", year: 2017 },
+  { label: "Full Metal Jacket", year: 1987 },
+  { label: "Dangal", year: 2016 },
+  { label: "The Sting", year: 1973 },
+  { label: "2001: A Space Odyssey", year: 1968 },
+  { label: "Singin' in the Rain", year: 1952 },
+  { label: "Toy Story", year: 1995 },
+  { label: "Bicycle Thieves", year: 1948 },
+  { label: "The Kid", year: 1921 },
+  { label: "Inglourious Basterds", year: 2009 },
+  { label: "Snatch", year: 2000 },
+  { label: "3 Idiots", year: 2009 },
+  { label: "Monty Python and the Holy Grail", year: 1975 },
+];
+
+const Template: ComponentStory<typeof Autocomplete> = () => {
+  return (
+    <Autocomplete
+      disablePortal
+      options={top100Films}
+      renderInput={(params) => <TextField {...params} label="Movie" />}
+    />
+  );
+};
+
+const MuiTemplate: ComponentStory<typeof Autocomplete> = () => {
+  return (
+    <Autocomplete
+      disablePortal
+      options={top100Films}
+      renderInput={(params) => <TextFieldMui {...params} label="Movie" />}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Mui = MuiTemplate.bind({});
+Mui.args = {};

From 5e632db2d12daed711a7c32dcdf6aa872a840172 Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Mon, 27 Mar 2023 10:36:46 -0700
Subject: [PATCH 02/24] chore: label examples in doc

---
 .../src/components/odyssey-mui/Autocomplete/Autocomplete.mdx  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
index 544be04d72..48ee49c7aa 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
@@ -4,10 +4,14 @@ import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
 
 # Autocomplete
 
+## Using Odyssey's TextField
+
 <Canvas>
   <Story id="mui-components-forms-autocomplete--default" />
 </Canvas>
 
+## Using MUI's TextField
+
 <Canvas>
   <Story id="mui-components-forms-autocomplete--mui" />
 </Canvas>

From 5b345e3ddf25defdf4e31f05bef4af177cf7fefc Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Mon, 27 Mar 2023 11:42:04 -0700
Subject: [PATCH 03/24] chore: set up working examples for all states

---
 .../src/theme/components.tsx                  |   3 -
 .../odyssey-mui/Autocomplete/Autocomplete.mdx | 207 +++++++++++++++-
 .../Autocomplete/Autocomplete.stories.tsx     | 221 +++++++++++++++++-
 3 files changed, 416 insertions(+), 15 deletions(-)

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 1f2a4af83e..490e1cbfe0 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -1046,9 +1046,6 @@ export const components: ThemeOptions["components"] = {
     },
   },
   MuiInputAdornment: {
-    defaultProps: {
-      variant: "outlined",
-    },
     styleOverrides: {
       root: ({ theme, ownerState }) => ({
         display: "flex",
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
index 48ee49c7aa..09c0fc4da7 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
@@ -4,14 +4,213 @@ import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
 
 # Autocomplete
 
-## Using Odyssey's TextField
-
 <Canvas>
   <Story id="mui-components-forms-autocomplete--default" />
 </Canvas>
 
-## Using MUI's TextField
+## Variant Behaviors
+
+Examples of MUI's variant behaviors to help us decide and style our own offerings.
+
+Note, some of these behaviors may currently be broken or have unsuitable UI.
+
+### autoHighlight
+
+If `true`, the first option is automatically highlighted.
+
+Default: `true`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--auto-highlight" />
+</Canvas>
+
+### autoSelect
+
+If `true`, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.
+
+Default: `false`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--auto-select" />
+</Canvas>
+
+### blurOnSelect
+
+Control if the input should be blurred when an option is selected:
+
+- `false` the input is not blurred.
+- `true` the input is always blurred.
+- `touch` the input is blurred after a touch event.
+- `mouse` the input is blurred after a mouse event.
+
+Default: `false`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--blur-on-select" />
+</Canvas>
+
+### clearOnBlur
+
+If `true`, the input's text is cleared on blur if no value is selected. Set to `true` if you want to help the user enter a new value. Set to `false` if you want to help the user resume their search.
+
+Default: `!props.freeSolo`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--clear-on-blur" />
+</Canvas>
+
+### clearOnEscape
+
+If `true`, clear all values when the user presses escape _and_ the popup is closed.
+
+Default: `true`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--clear-on-escape" />
+</Canvas>
+
+### disableCloseOnSelect
+
+If `true`, the popup won't close when a value is selected.
+
+Default: `props.multiple`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--disable-close-on-select" />
+</Canvas>
+
+### disabled
+
+If `true`, the component is disabled.
+
+Default: `false`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--disabled" />
+</Canvas>
+
+### fitlerSelectedOptions
+
+If `true`, hide the selected options from the list box.
+
+Default: `false`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--filter-selected-options" />
+</Canvas>
+
+### freeSolo
+
+If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
+
+Default: `false`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--free-solo" />
+</Canvas>
+
+### fullWidth
+
+If `true`, the input will take up the full width of its container.
+
+Default: `false`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--full-width" />
+</Canvas>
+
+### handleHomeEndKeys
+
+If `true`, the component handles the <kbd>Home</kbd> and <kbd>End</kbd> keys when the popup is open. It should move focus to the first option and last option, respectively.
+
+Default: `true`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--handle-home-end-keys" />
+</Canvas>
+
+### includeInputInList
+
+If `true`, the highlight can move to the input.
+
+Default: `false`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--include-input-in-list" />
+</Canvas>
+
+### limitTags
+
+The maximum number of tags that will be visible when not focused. Set `-1` to disable the limit.
+
+Default: `-1`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--limit-tags" />
+</Canvas>
+
+### loading
+
+If `true`, the component is in a loading state. This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. options are empty).
+
+Default: `false`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--loading" />
+</Canvas>
+
+### multiple
+
+If `true`, `value` must be an array and the menu will support multiple selections.
+
+Default: `false`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--multiple" />
+</Canvas>
+
+### openOnFocus
+
+If `true`, the popup will open on input focus.
+
+Default: `false`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--open-on-focus" />
+</Canvas>
+
+### readOnly
+
+If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
+
+Default: `false`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--read-only" />
+</Canvas>
+
+### selectOnFocus
+
+If `true`, the input's text is selected on focus. It helps the user clear the selected value.
+
+Default: `true`
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--select-on-focus" />
+</Canvas>
+
+## MUI TextField
+
+For testing props/behaviors in their default MUI environment.
+
+### MUI single
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--material-single" />
+</Canvas>
+
+### MUI multiple
 
 <Canvas>
-  <Story id="mui-components-forms-autocomplete--mui" />
+  <Story id="mui-components-forms-autocomplete--material-multiple" />
 </Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index 55817ddcfc..049cdeb031 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -24,7 +24,86 @@ const storybookMeta: ComponentMeta<typeof Autocomplete> = {
       page: AutocompleteMdx,
     },
   },
-  argTypes: {},
+  argTypes: {
+    // autoComplete appears to be broken in both examples
+    autoComplete: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    autoHighlight: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    autoSelect: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    blurOnSelect: {
+      control: "radio",
+      options: [true, false, "mouse", "touch"],
+      defaultValue: false,
+    },
+    clearOnBlur: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    clearOnEscape: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    disableCloseOnSelect: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    filterSelectedOptions: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    freeSolo: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    fullWidth: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    handleHomeEndKeys: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    includeInputInList: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    limitTags: {
+      control: "text",
+      defaultValue: "-1",
+    },
+    loading: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    multiple: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    openOnFocus: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    readOnly: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    selectOnFocus: {
+      control: "boolean",
+      defaultValue: true,
+    },
+  },
   decorators: [MuiThemeDecorator],
 };
 
@@ -159,20 +238,48 @@ const top100Films = [
   { label: "Monty Python and the Holy Grail", year: 1975 },
 ];
 
-const Template: ComponentStory<typeof Autocomplete> = () => {
+const Template: ComponentStory<typeof Autocomplete> = (args) => {
   return (
     <Autocomplete
-      disablePortal
+      {...args}
       options={top100Films}
-      renderInput={(params) => <TextField {...params} label="Movie" />}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          endAdornment={params.InputProps.endAdornment}
+          hint="Select your favorite movie"
+          label="Movie"
+          ref={params.InputProps.ref}
+          startAdornment={params.InputProps.startAdornment}
+        />
+      )}
+    />
+  );
+};
+
+const EmptyTemplate: ComponentStory<typeof Autocomplete> = (args) => {
+  return (
+    <Autocomplete
+      {...args}
+      options={[]}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          endAdornment={params.InputProps.endAdornment}
+          hint="Select your favorite movie"
+          label="Movie"
+          ref={params.InputProps.ref}
+          startAdornment={params.InputProps.startAdornment}
+        />
+      )}
     />
   );
 };
 
-const MuiTemplate: ComponentStory<typeof Autocomplete> = () => {
+const MuiTemplate: ComponentStory<typeof Autocomplete> = (args) => {
   return (
     <Autocomplete
-      disablePortal
+      {...args}
       options={top100Films}
       renderInput={(params) => <TextFieldMui {...params} label="Movie" />}
     />
@@ -182,5 +289,103 @@ const MuiTemplate: ComponentStory<typeof Autocomplete> = () => {
 export const Default = Template.bind({});
 Default.args = {};
 
-export const Mui = MuiTemplate.bind({});
-Mui.args = {};
+export const autoHighlight = Template.bind({});
+autoHighlight.args = {
+  autoHighlight: true,
+};
+
+export const autoSelect = Template.bind({});
+autoSelect.args = {
+  autoSelect: true,
+};
+
+export const blurOnSelect = Template.bind({});
+blurOnSelect.args = {
+  blurOnSelect: true,
+};
+
+export const clearOnBlur = Template.bind({});
+clearOnBlur.args = {
+  clearOnBlur: true,
+};
+
+export const clearOnEscape = Template.bind({});
+clearOnEscape.args = {
+  clearOnEscape: true,
+};
+
+export const disableCloseOnSelect = Template.bind({});
+disableCloseOnSelect.args = {
+  disableCloseOnSelect: true,
+};
+
+export const disabled = Template.bind({});
+disabled.args = {
+  disabled: true,
+  value: "The Godfather",
+};
+
+export const filterSelectedOptions = Template.bind({});
+filterSelectedOptions.args = {
+  filterSelectedOptions: true,
+};
+
+export const freeSolo = Template.bind({});
+freeSolo.args = {
+  freeSolo: true,
+};
+
+export const fullWidth = Template.bind({});
+fullWidth.args = {
+  fullWidth: true,
+};
+
+export const handleHomeEndKeys = Template.bind({});
+handleHomeEndKeys.args = {
+  handleHomeEndKeys: true,
+};
+
+export const includeInputInList = Template.bind({});
+includeInputInList.args = {
+  includeInputInList: true,
+};
+
+export const limitTags = Template.bind({});
+limitTags.args = {
+  limitTags: 3,
+  multiple: true,
+};
+
+export const loading = EmptyTemplate.bind({});
+loading.args = {
+  loading: true,
+};
+
+export const multiple = Template.bind({});
+multiple.args = {
+  multiple: true,
+};
+
+export const openOnFocus = Template.bind({});
+openOnFocus.args = {
+  openOnFocus: true,
+};
+
+export const readOnly = Template.bind({});
+readOnly.args = {
+  readOnly: true,
+  value: "The Godfather",
+};
+
+export const selectOnFocus = Template.bind({});
+selectOnFocus.args = {
+  selectOnFocus: true,
+};
+
+export const MaterialSingle = MuiTemplate.bind({});
+MaterialSingle.args = {};
+
+export const MaterialMultiple = MuiTemplate.bind({});
+MaterialMultiple.args = {
+  multiple: true,
+};

From c9947372f96acea6b57ab66551da5c9bf3b62d1b Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Tue, 28 Mar 2023 11:29:59 -0700
Subject: [PATCH 04/24] chore: set default props for Autocomplete

---
 .../src/theme/components.tsx                  | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 490e1cbfe0..8f2a0552f2 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -35,6 +35,7 @@ import {
   CheckCircleFilledIcon,
   ChevronDownIcon,
   CloseCircleFilledIcon,
+  CloseIcon,
   InformationCircleFilledIcon,
 } from "../iconDictionary";
 
@@ -142,6 +143,26 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiAutocomplete: {
+    defaultProps: {
+      autoHighlight: true,
+      autoSelect: false,
+      blurOnSelect: false,
+      clearIcon: <CloseIcon />,
+      clearOnEscape: true,
+      disableClearable: false,
+      disabledItemsFocusable: false,
+      disableListWrap: false,
+      disablePortal: false,
+      filterSelectedOptions: false,
+      fullWidth: false,
+      handleHomeEndKeys: true,
+      limitTags: -1,
+      openOnFocus: false,
+      popupIcon: <ChevronDownIcon />,
+      selectOnFocus: true,
+    },
+  },
   MuiBackdrop: {
     styleOverrides: {
       root: ({ ownerState }) => ({

From cd297cb6656bde452fb6f97642821b5980711972 Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Wed, 29 Mar 2023 12:49:43 -0700
Subject: [PATCH 05/24] chore: remove defaults from stories

---
 .../odyssey-mui/Autocomplete/Autocomplete.mdx | 125 ------------------
 .../Autocomplete/Autocomplete.stories.tsx     | 115 ----------------
 2 files changed, 240 deletions(-)

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
index 09c0fc4da7..0972e6a6c2 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
@@ -14,71 +14,6 @@ Examples of MUI's variant behaviors to help us decide and style our own offering
 
 Note, some of these behaviors may currently be broken or have unsuitable UI.
 
-### autoHighlight
-
-If `true`, the first option is automatically highlighted.
-
-Default: `true`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--auto-highlight" />
-</Canvas>
-
-### autoSelect
-
-If `true`, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.
-
-Default: `false`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--auto-select" />
-</Canvas>
-
-### blurOnSelect
-
-Control if the input should be blurred when an option is selected:
-
-- `false` the input is not blurred.
-- `true` the input is always blurred.
-- `touch` the input is blurred after a touch event.
-- `mouse` the input is blurred after a mouse event.
-
-Default: `false`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--blur-on-select" />
-</Canvas>
-
-### clearOnBlur
-
-If `true`, the input's text is cleared on blur if no value is selected. Set to `true` if you want to help the user enter a new value. Set to `false` if you want to help the user resume their search.
-
-Default: `!props.freeSolo`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--clear-on-blur" />
-</Canvas>
-
-### clearOnEscape
-
-If `true`, clear all values when the user presses escape _and_ the popup is closed.
-
-Default: `true`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--clear-on-escape" />
-</Canvas>
-
-### disableCloseOnSelect
-
-If `true`, the popup won't close when a value is selected.
-
-Default: `props.multiple`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--disable-close-on-select" />
-</Canvas>
-
 ### disabled
 
 If `true`, the component is disabled.
@@ -89,16 +24,6 @@ Default: `false`
   <Story id="mui-components-forms-autocomplete--disabled" />
 </Canvas>
 
-### fitlerSelectedOptions
-
-If `true`, hide the selected options from the list box.
-
-Default: `false`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--filter-selected-options" />
-</Canvas>
-
 ### freeSolo
 
 If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
@@ -109,26 +34,6 @@ Default: `false`
   <Story id="mui-components-forms-autocomplete--free-solo" />
 </Canvas>
 
-### fullWidth
-
-If `true`, the input will take up the full width of its container.
-
-Default: `false`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--full-width" />
-</Canvas>
-
-### handleHomeEndKeys
-
-If `true`, the component handles the <kbd>Home</kbd> and <kbd>End</kbd> keys when the popup is open. It should move focus to the first option and last option, respectively.
-
-Default: `true`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--handle-home-end-keys" />
-</Canvas>
-
 ### includeInputInList
 
 If `true`, the highlight can move to the input.
@@ -139,16 +44,6 @@ Default: `false`
   <Story id="mui-components-forms-autocomplete--include-input-in-list" />
 </Canvas>
 
-### limitTags
-
-The maximum number of tags that will be visible when not focused. Set `-1` to disable the limit.
-
-Default: `-1`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--limit-tags" />
-</Canvas>
-
 ### loading
 
 If `true`, the component is in a loading state. This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. options are empty).
@@ -169,16 +64,6 @@ Default: `false`
   <Story id="mui-components-forms-autocomplete--multiple" />
 </Canvas>
 
-### openOnFocus
-
-If `true`, the popup will open on input focus.
-
-Default: `false`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--open-on-focus" />
-</Canvas>
-
 ### readOnly
 
 If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
@@ -189,16 +74,6 @@ Default: `false`
   <Story id="mui-components-forms-autocomplete--read-only" />
 </Canvas>
 
-### selectOnFocus
-
-If `true`, the input's text is selected on focus. It helps the user clear the selected value.
-
-Default: `true`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--select-on-focus" />
-</Canvas>
-
 ## MUI TextField
 
 For testing props/behaviors in their default MUI environment.
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index 049cdeb031..7a9b369a91 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -25,64 +25,18 @@ const storybookMeta: ComponentMeta<typeof Autocomplete> = {
     },
   },
   argTypes: {
-    // autoComplete appears to be broken in both examples
-    autoComplete: {
-      control: "boolean",
-      defaultValue: false,
-    },
-    autoHighlight: {
-      control: "boolean",
-      defaultValue: true,
-    },
-    autoSelect: {
-      control: "boolean",
-      defaultValue: false,
-    },
-    blurOnSelect: {
-      control: "radio",
-      options: [true, false, "mouse", "touch"],
-      defaultValue: false,
-    },
-    clearOnBlur: {
-      control: "boolean",
-      defaultValue: false,
-    },
-    clearOnEscape: {
-      control: "boolean",
-      defaultValue: true,
-    },
-    disableCloseOnSelect: {
-      control: "boolean",
-      defaultValue: false,
-    },
     disabled: {
       control: "boolean",
       defaultValue: false,
     },
-    filterSelectedOptions: {
-      control: "boolean",
-      defaultValue: false,
-    },
     freeSolo: {
       control: "boolean",
       defaultValue: false,
     },
-    fullWidth: {
-      control: "boolean",
-      defaultValue: false,
-    },
-    handleHomeEndKeys: {
-      control: "boolean",
-      defaultValue: true,
-    },
     includeInputInList: {
       control: "boolean",
       defaultValue: false,
     },
-    limitTags: {
-      control: "text",
-      defaultValue: "-1",
-    },
     loading: {
       control: "boolean",
       defaultValue: false,
@@ -91,18 +45,10 @@ const storybookMeta: ComponentMeta<typeof Autocomplete> = {
       control: "boolean",
       defaultValue: false,
     },
-    openOnFocus: {
-      control: "boolean",
-      defaultValue: false,
-    },
     readOnly: {
       control: "boolean",
       defaultValue: false,
     },
-    selectOnFocus: {
-      control: "boolean",
-      defaultValue: true,
-    },
   },
   decorators: [MuiThemeDecorator],
 };
@@ -289,73 +235,22 @@ const MuiTemplate: ComponentStory<typeof Autocomplete> = (args) => {
 export const Default = Template.bind({});
 Default.args = {};
 
-export const autoHighlight = Template.bind({});
-autoHighlight.args = {
-  autoHighlight: true,
-};
-
-export const autoSelect = Template.bind({});
-autoSelect.args = {
-  autoSelect: true,
-};
-
-export const blurOnSelect = Template.bind({});
-blurOnSelect.args = {
-  blurOnSelect: true,
-};
-
-export const clearOnBlur = Template.bind({});
-clearOnBlur.args = {
-  clearOnBlur: true,
-};
-
-export const clearOnEscape = Template.bind({});
-clearOnEscape.args = {
-  clearOnEscape: true,
-};
-
-export const disableCloseOnSelect = Template.bind({});
-disableCloseOnSelect.args = {
-  disableCloseOnSelect: true,
-};
-
 export const disabled = Template.bind({});
 disabled.args = {
   disabled: true,
   value: "The Godfather",
 };
 
-export const filterSelectedOptions = Template.bind({});
-filterSelectedOptions.args = {
-  filterSelectedOptions: true,
-};
-
 export const freeSolo = Template.bind({});
 freeSolo.args = {
   freeSolo: true,
 };
 
-export const fullWidth = Template.bind({});
-fullWidth.args = {
-  fullWidth: true,
-};
-
-export const handleHomeEndKeys = Template.bind({});
-handleHomeEndKeys.args = {
-  handleHomeEndKeys: true,
-};
-
 export const includeInputInList = Template.bind({});
 includeInputInList.args = {
   includeInputInList: true,
 };
 
-export const limitTags = Template.bind({});
-limitTags.args = {
-  limitTags: 3,
-  multiple: true,
-};
-
 export const loading = EmptyTemplate.bind({});
 loading.args = {
   loading: true,
@@ -366,22 +261,12 @@ multiple.args = {
   multiple: true,
 };
 
-export const openOnFocus = Template.bind({});
-openOnFocus.args = {
-  openOnFocus: true,
-};
-
 export const readOnly = Template.bind({});
 readOnly.args = {
   readOnly: true,
   value: "The Godfather",
 };
 
-export const selectOnFocus = Template.bind({});
-selectOnFocus.args = {
-  selectOnFocus: true,
-};
-
 export const MaterialSingle = MuiTemplate.bind({});
 MaterialSingle.args = {};
 

From dbb12100e656e9db3deb2a0d76bdcf5fb715e93d Mon Sep 17 00:00:00 2001
From: Kevin Ghadyani <kevin.ghadyani@okta.com>
Date: Mon, 17 Apr 2023 12:13:18 -0500
Subject: [PATCH 06/24] fix: created Autocomplete wrapper component

---
 .../odyssey-react-mui/src/Autocomplete.tsx    | 83 +++++++++++++++++
 packages/odyssey-react-mui/src/index.ts       |  3 +-
 .../Autocomplete/Autocomplete.stories.tsx     | 92 +++++++++----------
 3 files changed, 126 insertions(+), 52 deletions(-)
 create mode 100644 packages/odyssey-react-mui/src/Autocomplete.tsx

diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx
new file mode 100644
index 0000000000..fc1acf0849
--- /dev/null
+++ b/packages/odyssey-react-mui/src/Autocomplete.tsx
@@ -0,0 +1,83 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {
+  Autocomplete as MuiAutocomplete,
+  AutocompleteProps as MuiAutocompleteProps,
+  InputBase,
+} from "@mui/material";
+import { memo, useCallback } from "react";
+
+import { Field } from "./Field";
+
+export type AutocompleteProps<OptionType> = {
+  isDisabled?: boolean;
+  hint?: string;
+  label: string;
+  onChange?: MuiAutocompleteProps<OptionType, undefined, undefined, undefined>;
+  options: OptionType[];
+  value?: OptionType | null;
+};
+
+// <TextField
+//   {...params}
+//   endAdornment={params.InputProps.endAdornment}
+//   hint={hint}
+//   label={label}
+//   ref={params.InputProps.ref}
+//   startAdornment={params.InputProps.startAdornment}
+// />
+
+const Autocomplete = <OptionType,>({
+  isDisabled,
+  hint,
+  label,
+  onChange,
+  options,
+  value,
+}: AutocompleteProps<OptionType>) => {
+  const renderInput = useCallback(
+    (params) => (
+      <Field
+        hasVisibleLabel
+        hint={hint}
+        // id={params.InputLabelProps.id} // Pretty sure this is unnecessary -Kevin
+        label={label}
+        renderFieldComponent={({ ariaDescribedBy, id }) => (
+          <InputBase
+            {...params}
+            {...params.InputProps}
+            aria-describedby={ariaDescribedBy}
+            id={id}
+          />
+        )}
+      />
+    ),
+    [hint, label]
+  );
+
+  return (
+    <MuiAutocomplete
+      disabled={isDisabled}
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      /* @ts-ignore TEMP */ // PLEASE REMOVE once we figure out the correct type.
+      onChange={onChange}
+      options={options}
+      renderInput={renderInput}
+      value={value}
+    />
+  );
+};
+
+const MemoizedAutocomplete = memo(Autocomplete);
+
+export { MemoizedAutocomplete as Autocomplete };
diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts
index 8bb68318bb..e26b418a44 100644
--- a/packages/odyssey-react-mui/src/index.ts
+++ b/packages/odyssey-react-mui/src/index.ts
@@ -13,7 +13,6 @@
 export {
   Alert,
   AlertTitle,
-  Autocomplete,
   Box,
   Button,
   Chip,
@@ -67,7 +66,6 @@ export {
 export type {
   AlertProps,
   AlertTitleProps,
-  AutocompleteProps,
   BoxProps,
   ButtonProps,
   ChipProps,
@@ -126,6 +124,7 @@ export { default as FavoriteIcon } from "@mui/icons-material/Favorite";
 
 export { deepmerge, visuallyHidden } from "@mui/utils";
 
+export * from "./Autocomplete";
 export * from "./Banner";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index 7a9b369a91..f77dcceeb4 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Autocomplete, TextField, TextFieldMui } from "@okta/odyssey-react-mui";
+import { Autocomplete } from "@okta/odyssey-react-mui";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -25,30 +25,30 @@ const storybookMeta: ComponentMeta<typeof Autocomplete> = {
     },
   },
   argTypes: {
-    disabled: {
-      control: "boolean",
-      defaultValue: false,
-    },
-    freeSolo: {
-      control: "boolean",
-      defaultValue: false,
-    },
-    includeInputInList: {
-      control: "boolean",
-      defaultValue: false,
-    },
-    loading: {
-      control: "boolean",
-      defaultValue: false,
-    },
-    multiple: {
-      control: "boolean",
-      defaultValue: false,
-    },
-    readOnly: {
+    isDisabled: {
       control: "boolean",
       defaultValue: false,
     },
+    // freeSolo: {
+    //   control: "boolean",
+    //   defaultValue: false,
+    // },
+    // includeInputInList: {
+    //   control: "boolean",
+    //   defaultValue: false,
+    // },
+    // loading: {
+    //   control: "boolean",
+    //   defaultValue: false,
+    // },
+    // multiple: {
+    //   control: "boolean",
+    //   defaultValue: false,
+    // },
+    // readOnly: {
+    //   control: "boolean",
+    //   defaultValue: false,
+    // },
   },
   decorators: [MuiThemeDecorator],
 };
@@ -188,17 +188,9 @@ const Template: ComponentStory<typeof Autocomplete> = (args) => {
   return (
     <Autocomplete
       {...args}
+      hint="Select your favorite movie"
+      label="Movie"
       options={top100Films}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          endAdornment={params.InputProps.endAdornment}
-          hint="Select your favorite movie"
-          label="Movie"
-          ref={params.InputProps.ref}
-          startAdornment={params.InputProps.startAdornment}
-        />
-      )}
     />
   );
 };
@@ -208,16 +200,16 @@ const EmptyTemplate: ComponentStory<typeof Autocomplete> = (args) => {
     <Autocomplete
       {...args}
       options={[]}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          endAdornment={params.InputProps.endAdornment}
-          hint="Select your favorite movie"
-          label="Movie"
-          ref={params.InputProps.ref}
-          startAdornment={params.InputProps.startAdornment}
-        />
-      )}
+      // renderInput={(params) => (
+      //   <TextField
+      //     {...params}
+      //     endAdornment={params.InputProps.endAdornment}
+      //     hint="Select your favorite movie"
+      //     label="Movie"
+      //     ref={params.InputProps.ref}
+      //     startAdornment={params.InputProps.startAdornment}
+      //   />
+      // )}
     />
   );
 };
@@ -227,7 +219,7 @@ const MuiTemplate: ComponentStory<typeof Autocomplete> = (args) => {
     <Autocomplete
       {...args}
       options={top100Films}
-      renderInput={(params) => <TextFieldMui {...params} label="Movie" />}
+      // renderInput={(params) => <MuiTextField {...params} label="Movie" />}
     />
   );
 };
@@ -237,33 +229,33 @@ Default.args = {};
 
 export const disabled = Template.bind({});
 disabled.args = {
-  disabled: true,
+  // disabled: true,
   value: "The Godfather",
 };
 
 export const freeSolo = Template.bind({});
 freeSolo.args = {
-  freeSolo: true,
+  // freeSolo: true,
 };
 
 export const includeInputInList = Template.bind({});
 includeInputInList.args = {
-  includeInputInList: true,
+  // includeInputInList: true,
 };
 
 export const loading = EmptyTemplate.bind({});
 loading.args = {
-  loading: true,
+  // loading: true,
 };
 
 export const multiple = Template.bind({});
 multiple.args = {
-  multiple: true,
+  // multiple: true,
 };
 
 export const readOnly = Template.bind({});
 readOnly.args = {
-  readOnly: true,
+  // readOnly: true,
   value: "The Godfather",
 };
 
@@ -272,5 +264,5 @@ MaterialSingle.args = {};
 
 export const MaterialMultiple = MuiTemplate.bind({});
 MaterialMultiple.args = {
-  multiple: true,
+  // multiple: true,
 };

From 28be391f49bbce4882b68334a1d5805e50d47a4e Mon Sep 17 00:00:00 2001
From: Kevin Ghadyani <kevin.ghadyani@okta.com>
Date: Mon, 17 Apr 2023 13:41:11 -0500
Subject: [PATCH 07/24] fix: export types for Autocomplete

---
 .../odyssey-react-mui/src/Autocomplete.tsx    | 20 ++++---------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx
index fc1acf0849..f2c1274ebf 100644
--- a/packages/odyssey-react-mui/src/Autocomplete.tsx
+++ b/packages/odyssey-react-mui/src/Autocomplete.tsx
@@ -23,20 +23,11 @@ export type AutocompleteProps<OptionType> = {
   isDisabled?: boolean;
   hint?: string;
   label: string;
-  onChange?: MuiAutocompleteProps<OptionType, undefined, undefined, undefined>;
-  options: OptionType[];
-  value?: OptionType | null;
+  onChange?: MuiAutocompleteProps<OptionType, false, false, false>["onChange"];
+  options: MuiAutocompleteProps<OptionType, false, false, false>["options"];
+  value?: MuiAutocompleteProps<OptionType, false, false, false>["value"];
 };
 
-// <TextField
-//   {...params}
-//   endAdornment={params.InputProps.endAdornment}
-//   hint={hint}
-//   label={label}
-//   ref={params.InputProps.ref}
-//   startAdornment={params.InputProps.startAdornment}
-// />
-
 const Autocomplete = <OptionType,>({
   isDisabled,
   hint,
@@ -50,7 +41,6 @@ const Autocomplete = <OptionType,>({
       <Field
         hasVisibleLabel
         hint={hint}
-        // id={params.InputLabelProps.id} // Pretty sure this is unnecessary -Kevin
         label={label}
         renderFieldComponent={({ ariaDescribedBy, id }) => (
           <InputBase
@@ -68,8 +58,6 @@ const Autocomplete = <OptionType,>({
   return (
     <MuiAutocomplete
       disabled={isDisabled}
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      /* @ts-ignore TEMP */ // PLEASE REMOVE once we figure out the correct type.
       onChange={onChange}
       options={options}
       renderInput={renderInput}
@@ -78,6 +66,6 @@ const Autocomplete = <OptionType,>({
   );
 };
 
-const MemoizedAutocomplete = memo(Autocomplete);
+const MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;
 
 export { MemoizedAutocomplete as Autocomplete };

From a93542c6238ab56a0a06075aceb5cf0997ceb7f1 Mon Sep 17 00:00:00 2001
From: Kevin Ghadyani <kevin.ghadyani@okta.com>
Date: Mon, 17 Apr 2023 14:42:54 -0500
Subject: [PATCH 08/24] fix: separated InputProps and params in Autocomplete

---
 packages/odyssey-react-mui/src/Autocomplete.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx
index f2c1274ebf..16138187c3 100644
--- a/packages/odyssey-react-mui/src/Autocomplete.tsx
+++ b/packages/odyssey-react-mui/src/Autocomplete.tsx
@@ -37,15 +37,16 @@ const Autocomplete = <OptionType,>({
   value,
 }: AutocompleteProps<OptionType>) => {
   const renderInput = useCallback(
-    (params) => (
+    ({ InputLabelProps, InputProps, ...params }) => (
       <Field
+        {...InputLabelProps}
         hasVisibleLabel
         hint={hint}
         label={label}
         renderFieldComponent={({ ariaDescribedBy, id }) => (
           <InputBase
             {...params}
-            {...params.InputProps}
+            {...InputProps}
             aria-describedby={ariaDescribedBy}
             id={id}
           />

From d7aff4ab510cbb512bee043b4056e1085ce0d059 Mon Sep 17 00:00:00 2001
From: Kevin Ghadyani <kevin.ghadyani@okta.com>
Date: Mon, 17 Apr 2023 16:39:36 -0500
Subject: [PATCH 09/24] fix: added extra props to Autocomplete to fix MUI types

This doesn't actually fix MUI types, but it passes enough to push it.
---
 .../odyssey-react-mui/src/Autocomplete.tsx    | 58 ++++++++++++++++---
 .../Autocomplete/Autocomplete.stories.tsx     |  2 +
 2 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx
index 16138187c3..be41317fa5 100644
--- a/packages/odyssey-react-mui/src/Autocomplete.tsx
+++ b/packages/odyssey-react-mui/src/Autocomplete.tsx
@@ -19,23 +19,65 @@ import { memo, useCallback } from "react";
 
 import { Field } from "./Field";
 
-export type AutocompleteProps<OptionType> = {
-  isDisabled?: boolean;
+export type AutocompleteProps<
+  OptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+> = {
+  hasMultipleChoices?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["multiple"];
   hint?: string;
+  isCustomValueAllowed?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["freeSolo"];
+  isDisabled?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["disabled"];
   label: string;
-  onChange?: MuiAutocompleteProps<OptionType, false, false, false>["onChange"];
-  options: MuiAutocompleteProps<OptionType, false, false, false>["options"];
-  value?: MuiAutocompleteProps<OptionType, false, false, false>["value"];
+  onChange?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onChange"];
+  options: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["options"];
+  value?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["value"];
 };
 
-const Autocomplete = <OptionType,>({
+const Autocomplete = <
+  OptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+>({
+  isCustomValueAllowed,
+  hasMultipleChoices,
   isDisabled,
   hint,
   label,
   onChange,
   options,
   value,
-}: AutocompleteProps<OptionType>) => {
+}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
   const renderInput = useCallback(
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
@@ -59,6 +101,8 @@ const Autocomplete = <OptionType,>({
   return (
     <MuiAutocomplete
       disabled={isDisabled}
+      freeSolo={isCustomValueAllowed}
+      multiple={hasMultipleChoices}
       onChange={onChange}
       options={options}
       renderInput={renderInput}
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index f77dcceeb4..44d0c925b8 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -191,6 +191,7 @@ const Template: ComponentStory<typeof Autocomplete> = (args) => {
       hint="Select your favorite movie"
       label="Movie"
       options={top100Films}
+      value={{ label: "", year: 2000 }}
     />
   );
 };
@@ -220,6 +221,7 @@ const MuiTemplate: ComponentStory<typeof Autocomplete> = (args) => {
       {...args}
       options={top100Films}
       // renderInput={(params) => <MuiTextField {...params} label="Movie" />}
+      value={{ label: "", year: 2000 }}
     />
   );
 };

From ab84734a4f8dc11aba42f56818bce59dbd469ddf Mon Sep 17 00:00:00 2001
From: Kevin Ghadyani <kevin.ghadyani@okta.com>
Date: Tue, 18 Apr 2023 12:27:07 -0500
Subject: [PATCH 10/24] fix: removed explicit displayName from MenuItem

---
 packages/odyssey-react-mui/src/MenuItem.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/odyssey-react-mui/src/MenuItem.tsx b/packages/odyssey-react-mui/src/MenuItem.tsx
index 7d09a2847e..2943bc2226 100644
--- a/packages/odyssey-react-mui/src/MenuItem.tsx
+++ b/packages/odyssey-react-mui/src/MenuItem.tsx
@@ -45,6 +45,5 @@ const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
 );
 
 const MemoizedMenuItem = memo(MenuItem);
-MemoizedMenuItem.displayName = "MenuItem";
 
 export { MemoizedMenuItem as MenuItem };

From 8d28a8c640dfccac92fdcad5af9bdc33759c9de3 Mon Sep 17 00:00:00 2001
From: Kevin Ghadyani <kevin.ghadyani@okta.com>
Date: Tue, 18 Apr 2023 12:48:02 -0500
Subject: [PATCH 11/24] fix: types for Autocomplete in stories

---
 .../Autocomplete/Autocomplete.stories.tsx     | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index 44d0c925b8..e2a2a19f1f 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -10,8 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Autocomplete } from "@okta/odyssey-react-mui";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Autocomplete, AutocompleteProps } from "@okta/odyssey-react-mui";
+import { ComponentMeta, ComponentStory, Story } from "@storybook/react";
 
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 import AutocompleteMdx from "./Autocomplete.mdx";
@@ -55,8 +55,10 @@ const storybookMeta: ComponentMeta<typeof Autocomplete> = {
 
 export default storybookMeta;
 
+type MovieType = { label: string; year: number };
+
 // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films = [
+const top100Films: ReadonlyArray<MovieType> = [
   { label: "The Shawshank Redemption", year: 1994 },
   { label: "The Godfather", year: 1972 },
   { label: "The Godfather: Part II", year: 1974 },
@@ -184,19 +186,30 @@ const top100Films = [
   { label: "Monty Python and the Holy Grail", year: 1975 },
 ];
 
-const Template: ComponentStory<typeof Autocomplete> = (args) => {
+const Template: Story<
+  AutocompleteProps<
+    MovieType | undefined,
+    boolean | undefined,
+    boolean | undefined
+  >
+> = (args) => {
   return (
     <Autocomplete
       {...args}
       hint="Select your favorite movie"
       label="Movie"
       options={top100Films}
-      value={{ label: "", year: 2000 }}
     />
   );
 };
 
-const EmptyTemplate: ComponentStory<typeof Autocomplete> = (args) => {
+const EmptyTemplate: Story<
+  AutocompleteProps<
+    MovieType | undefined,
+    boolean | undefined,
+    boolean | undefined
+  >
+> = (args) => {
   return (
     <Autocomplete
       {...args}
@@ -215,13 +228,18 @@ const EmptyTemplate: ComponentStory<typeof Autocomplete> = (args) => {
   );
 };
 
-const MuiTemplate: ComponentStory<typeof Autocomplete> = (args) => {
+const MuiTemplate: Story<
+  AutocompleteProps<
+    MovieType | undefined,
+    boolean | undefined,
+    boolean | undefined
+  >
+> = (args) => {
   return (
     <Autocomplete
       {...args}
       options={top100Films}
       // renderInput={(params) => <MuiTextField {...params} label="Movie" />}
-      value={{ label: "", year: 2000 }}
     />
   );
 };
@@ -232,7 +250,8 @@ Default.args = {};
 export const disabled = Template.bind({});
 disabled.args = {
   // disabled: true,
-  value: "The Godfather",
+  // value: "The Godfather",
+  value: { label: "The Godfather", year: 1972 },
 };
 
 export const freeSolo = Template.bind({});
@@ -258,7 +277,8 @@ multiple.args = {
 export const readOnly = Template.bind({});
 readOnly.args = {
   // readOnly: true,
-  value: "The Godfather",
+  // value: "The Godfather",
+  value: { label: "The Godfather", year: 1972 },
 };
 
 export const MaterialSingle = MuiTemplate.bind({});

From 66e771075fe2e90e8f4a80db2090f38dc6b4403f Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Tue, 18 Apr 2023 10:54:12 -0700
Subject: [PATCH 12/24] chore: remove unnec ComponentStory

---
 .../odyssey-mui/Autocomplete/Autocomplete.stories.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index e2a2a19f1f..b06e8bf21c 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import { Autocomplete, AutocompleteProps } from "@okta/odyssey-react-mui";
-import { ComponentMeta, ComponentStory, Story } from "@storybook/react";
+import { ComponentMeta, Story } from "@storybook/react";
 
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 import AutocompleteMdx from "./Autocomplete.mdx";

From 79d42e16ac304a3856697b8711a1b38fe8cfe28f Mon Sep 17 00:00:00 2001
From: Kevin Ghadyani <kevin.ghadyani@okta.com>
Date: Tue, 18 Apr 2023 12:57:09 -0500
Subject: [PATCH 13/24] fix: minor type improvement in Autocomplete stories

---
 .../Autocomplete/Autocomplete.stories.tsx     | 32 ++++++-------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index e2a2a19f1f..6d6a6c3dbe 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import { Autocomplete, AutocompleteProps } from "@okta/odyssey-react-mui";
-import { ComponentMeta, ComponentStory, Story } from "@storybook/react";
+import { ComponentMeta, Story } from "@storybook/react";
 
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 import AutocompleteMdx from "./Autocomplete.mdx";
@@ -186,13 +186,13 @@ const top100Films: ReadonlyArray<MovieType> = [
   { label: "Monty Python and the Holy Grail", year: 1975 },
 ];
 
-const Template: Story<
-  AutocompleteProps<
-    MovieType | undefined,
-    boolean | undefined,
-    boolean | undefined
-  >
-> = (args) => {
+type AutocompleteType = AutocompleteProps<
+  MovieType | undefined,
+  boolean | undefined,
+  boolean | undefined
+>;
+
+const Template: Story<AutocompleteType> = (args) => {
   return (
     <Autocomplete
       {...args}
@@ -203,13 +203,7 @@ const Template: Story<
   );
 };
 
-const EmptyTemplate: Story<
-  AutocompleteProps<
-    MovieType | undefined,
-    boolean | undefined,
-    boolean | undefined
-  >
-> = (args) => {
+const EmptyTemplate: Story<AutocompleteType> = (args) => {
   return (
     <Autocomplete
       {...args}
@@ -228,13 +222,7 @@ const EmptyTemplate: Story<
   );
 };
 
-const MuiTemplate: Story<
-  AutocompleteProps<
-    MovieType | undefined,
-    boolean | undefined,
-    boolean | undefined
-  >
-> = (args) => {
+const MuiTemplate: Story<AutocompleteType> = (args) => {
   return (
     <Autocomplete
       {...args}

From 0f3244237c1c37803be6732e0536a92759163285 Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Tue, 18 Apr 2023 11:03:35 -0700
Subject: [PATCH 14/24] chore: update stories to match new props

---
 .../src/theme/components.tsx                  |  1 +
 .../odyssey-mui/Autocomplete/Autocomplete.mdx | 10 -------
 .../Autocomplete/Autocomplete.stories.tsx     | 30 ++++---------------
 3 files changed, 6 insertions(+), 35 deletions(-)

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index e904a15c22..b0bdc4d38d 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -159,6 +159,7 @@ export const components: ThemeOptions["components"] = {
       filterSelectedOptions: false,
       fullWidth: false,
       handleHomeEndKeys: true,
+      includeInputInList: true,
       limitTags: -1,
       openOnFocus: false,
       popupIcon: <ChevronDownIcon />,
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
index 0972e6a6c2..1800033798 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
@@ -34,16 +34,6 @@ Default: `false`
   <Story id="mui-components-forms-autocomplete--free-solo" />
 </Canvas>
 
-### includeInputInList
-
-If `true`, the highlight can move to the input.
-
-Default: `false`
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--include-input-in-list" />
-</Canvas>
-
 ### loading
 
 If `true`, the component is in a loading state. This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. options are empty).
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index 6d6a6c3dbe..671e66e2c9 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -204,22 +204,7 @@ const Template: Story<AutocompleteType> = (args) => {
 };
 
 const EmptyTemplate: Story<AutocompleteType> = (args) => {
-  return (
-    <Autocomplete
-      {...args}
-      options={[]}
-      // renderInput={(params) => (
-      //   <TextField
-      //     {...params}
-      //     endAdornment={params.InputProps.endAdornment}
-      //     hint="Select your favorite movie"
-      //     label="Movie"
-      //     ref={params.InputProps.ref}
-      //     startAdornment={params.InputProps.startAdornment}
-      //   />
-      // )}
-    />
-  );
+  return <Autocomplete {...args} options={[]} />;
 };
 
 const MuiTemplate: Story<AutocompleteType> = (args) => {
@@ -237,19 +222,14 @@ Default.args = {};
 
 export const disabled = Template.bind({});
 disabled.args = {
-  // disabled: true,
+  isDisabled: true,
   // value: "The Godfather",
   value: { label: "The Godfather", year: 1972 },
 };
 
 export const freeSolo = Template.bind({});
 freeSolo.args = {
-  // freeSolo: true,
-};
-
-export const includeInputInList = Template.bind({});
-includeInputInList.args = {
-  // includeInputInList: true,
+  isCustomValueAllowed: true,
 };
 
 export const loading = EmptyTemplate.bind({});
@@ -259,7 +239,7 @@ loading.args = {
 
 export const multiple = Template.bind({});
 multiple.args = {
-  // multiple: true,
+  hasMultipleChoices: true,
 };
 
 export const readOnly = Template.bind({});
@@ -274,5 +254,5 @@ MaterialSingle.args = {};
 
 export const MaterialMultiple = MuiTemplate.bind({});
 MaterialMultiple.args = {
-  // multiple: true,
+  hasMultipleChoices: true,
 };

From f2da4da55204dcac3304f0d47a26ca193b9ba531 Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Tue, 18 Apr 2023 11:20:22 -0700
Subject: [PATCH 15/24] chore: remove MUI-only stories

---
 .../odyssey-mui/Autocomplete/Autocomplete.mdx | 24 +++------------
 .../Autocomplete/Autocomplete.stories.tsx     | 30 ++++---------------
 2 files changed, 10 insertions(+), 44 deletions(-)

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
index 1800033798..5ab0eca602 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
@@ -24,14 +24,14 @@ Default: `false`
   <Story id="mui-components-forms-autocomplete--disabled" />
 </Canvas>
 
-### freeSolo
+### isCustomValueAllowed
 
 If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
 
 Default: `false`
 
 <Canvas>
-  <Story id="mui-components-forms-autocomplete--free-solo" />
+  <Story id="mui-components-forms-autocomplete--is-custom-value-allowed" />
 </Canvas>
 
 ### loading
@@ -44,14 +44,14 @@ Default: `false`
   <Story id="mui-components-forms-autocomplete--loading" />
 </Canvas>
 
-### multiple
+### hasMultipleChoices
 
 If `true`, `value` must be an array and the menu will support multiple selections.
 
 Default: `false`
 
 <Canvas>
-  <Story id="mui-components-forms-autocomplete--multiple" />
+  <Story id="mui-components-forms-autocomplete--has-multiple-choices" />
 </Canvas>
 
 ### readOnly
@@ -63,19 +63,3 @@ Default: `false`
 <Canvas>
   <Story id="mui-components-forms-autocomplete--read-only" />
 </Canvas>
-
-## MUI TextField
-
-For testing props/behaviors in their default MUI environment.
-
-### MUI single
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--material-single" />
-</Canvas>
-
-### MUI multiple
-
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--material-multiple" />
-</Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index 671e66e2c9..305033507d 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -29,7 +29,7 @@ const storybookMeta: ComponentMeta<typeof Autocomplete> = {
       control: "boolean",
       defaultValue: false,
     },
-    // freeSolo: {
+    // isCustomValueAllowed: {
     //   control: "boolean",
     //   defaultValue: false,
     // },
@@ -41,7 +41,7 @@ const storybookMeta: ComponentMeta<typeof Autocomplete> = {
     //   control: "boolean",
     //   defaultValue: false,
     // },
-    // multiple: {
+    // hasMultipleChoices: {
     //   control: "boolean",
     //   defaultValue: false,
     // },
@@ -207,16 +207,6 @@ const EmptyTemplate: Story<AutocompleteType> = (args) => {
   return <Autocomplete {...args} options={[]} />;
 };
 
-const MuiTemplate: Story<AutocompleteType> = (args) => {
-  return (
-    <Autocomplete
-      {...args}
-      options={top100Films}
-      // renderInput={(params) => <MuiTextField {...params} label="Movie" />}
-    />
-  );
-};
-
 export const Default = Template.bind({});
 Default.args = {};
 
@@ -227,8 +217,8 @@ disabled.args = {
   value: { label: "The Godfather", year: 1972 },
 };
 
-export const freeSolo = Template.bind({});
-freeSolo.args = {
+export const isCustomValueAllowed = Template.bind({});
+isCustomValueAllowed.args = {
   isCustomValueAllowed: true,
 };
 
@@ -237,8 +227,8 @@ loading.args = {
   // loading: true,
 };
 
-export const multiple = Template.bind({});
-multiple.args = {
+export const hasMultipleChoices = Template.bind({});
+hasMultipleChoices.args = {
   hasMultipleChoices: true,
 };
 
@@ -248,11 +238,3 @@ readOnly.args = {
   // value: "The Godfather",
   value: { label: "The Godfather", year: 1972 },
 };
-
-export const MaterialSingle = MuiTemplate.bind({});
-MaterialSingle.args = {};
-
-export const MaterialMultiple = MuiTemplate.bind({});
-MaterialMultiple.args = {
-  hasMultipleChoices: true,
-};

From eaef418dbe519bb7b7287763d0390879c34cb78d Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Tue, 18 Apr 2023 11:21:11 -0700
Subject: [PATCH 16/24] chore: remove mui-only exports

---
 packages/odyssey-react-mui/src/index.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts
index e26b418a44..f705c36bd3 100644
--- a/packages/odyssey-react-mui/src/index.ts
+++ b/packages/odyssey-react-mui/src/index.ts
@@ -57,7 +57,6 @@ export {
   TableHead,
   TableRow,
   TableSortLabel,
-  TextField as TextFieldMui,
   ThemeProvider as MuiThemeProvider,
   Tooltip,
   Typography,
@@ -110,7 +109,6 @@ export type {
   TableProps,
   TableRowProps,
   TableSortLabelProps,
-  TextFieldProps as TextFieldMuiProps,
   ThemeOptions,
   TooltipProps,
   TypographyProps,

From b03516ba469ef1045c17326590a97e39f0235aa8 Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Tue, 18 Apr 2023 11:50:35 -0700
Subject: [PATCH 17/24] feat(odyssey-react-mui): add styling for Autocomplete

---
 .../src/theme/components.tsx                  | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index b0bdc4d38d..742ed432b7 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -165,6 +165,34 @@ export const components: ThemeOptions["components"] = {
       popupIcon: <ChevronDownIcon />,
       selectOnFocus: true,
     },
+    styleOverrides: {
+      clearIndicator: ({ theme }) => ({
+        marginRight: "unset",
+        padding: theme.spacing(1),
+      }),
+      endAdornment: ({ theme, ownerState }) => ({
+        display: "flex",
+        gap: theme.spacing(1),
+        top: `calc(${theme.spacing(2)} - ${theme.mixins.borderWidth})`,
+        right: theme.spacing(2),
+        maxHeight: "unset",
+        alignItems: "center",
+        whiteSpace: "nowrap",
+        color: theme.palette.action.active,
+
+        ...(ownerState.disabled === true && {
+          display: "none",
+        }),
+
+        ...(ownerState.readOnly === true && {
+          display: "none",
+        }),
+      }),
+      popupIndicator: ({ theme }) => ({
+        padding: theme.spacing(1),
+        marginRight: "unset",
+      }),
+    },
   },
   MuiBackdrop: {
     styleOverrides: {

From 42f6c03b3790120b0f06d5940e615de9670ff43b Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Tue, 18 Apr 2023 12:07:40 -0700
Subject: [PATCH 18/24] chore: enable and styling loading state

---
 packages/odyssey-react-mui/src/Autocomplete.tsx           | 8 ++++++++
 packages/odyssey-react-mui/src/theme/components.tsx       | 4 ++++
 .../odyssey-mui/Autocomplete/Autocomplete.stories.tsx     | 2 +-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx
index be41317fa5..fafbdd0a1b 100644
--- a/packages/odyssey-react-mui/src/Autocomplete.tsx
+++ b/packages/odyssey-react-mui/src/Autocomplete.tsx
@@ -43,6 +43,12 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["disabled"];
+  isLoading?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["loading"];
   label: string;
   onChange?: MuiAutocompleteProps<
     OptionType,
@@ -72,6 +78,7 @@ const Autocomplete = <
   isCustomValueAllowed,
   hasMultipleChoices,
   isDisabled,
+  isLoading,
   hint,
   label,
   onChange,
@@ -102,6 +109,7 @@ const Autocomplete = <
     <MuiAutocomplete
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
+      loading={isLoading}
       multiple={hasMultipleChoices}
       onChange={onChange}
       options={options}
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 742ed432b7..1b078d28b9 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -188,6 +188,10 @@ export const components: ThemeOptions["components"] = {
           display: "none",
         }),
       }),
+      loading: ({ theme }) => ({
+        paddingBlock: theme.spacing(3),
+        paddingInline: theme.spacing(4),
+      }),
       popupIndicator: ({ theme }) => ({
         padding: theme.spacing(1),
         marginRight: "unset",
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index 305033507d..ebee305a16 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -224,7 +224,7 @@ isCustomValueAllowed.args = {
 
 export const loading = EmptyTemplate.bind({});
 loading.args = {
-  // loading: true,
+  isLoading: true,
 };
 
 export const hasMultipleChoices = Template.bind({});

From 5397b59ce14718678dfb698fffbf9b5270d9c2e4 Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Tue, 18 Apr 2023 12:30:14 -0700
Subject: [PATCH 19/24] chore: add and style isReadOnly state

---
 packages/odyssey-react-mui/src/Autocomplete.tsx           | 8 ++++++++
 packages/odyssey-react-mui/src/theme/components.tsx       | 6 ++++++
 .../odyssey-mui/Autocomplete/Autocomplete.stories.tsx     | 4 +---
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx
index fafbdd0a1b..849c1557f0 100644
--- a/packages/odyssey-react-mui/src/Autocomplete.tsx
+++ b/packages/odyssey-react-mui/src/Autocomplete.tsx
@@ -49,6 +49,12 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["loading"];
+  isReadOnly?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["readOnly"];
   label: string;
   onChange?: MuiAutocompleteProps<
     OptionType,
@@ -79,6 +85,7 @@ const Autocomplete = <
   hasMultipleChoices,
   isDisabled,
   isLoading,
+  isReadOnly,
   hint,
   label,
   onChange,
@@ -113,6 +120,7 @@ const Autocomplete = <
       multiple={hasMultipleChoices}
       onChange={onChange}
       options={options}
+      readOnly={isReadOnly}
       renderInput={renderInput}
       value={value}
     />
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 1b078d28b9..64ef4fd353 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -13,6 +13,7 @@
 import { ThemeOptions } from "@mui/material";
 import type {} from "@mui/lab/themeAugmentation";
 //import radioClasses from "@mui/material";
+import { autocompleteClasses } from "@mui/material/Autocomplete";
 import { buttonClasses } from "@mui/material/Button";
 import { chipClasses } from "@mui/material/Chip";
 import { dialogActionsClasses } from "@mui/material/DialogActions";
@@ -196,6 +197,11 @@ export const components: ThemeOptions["components"] = {
         padding: theme.spacing(1),
         marginRight: "unset",
       }),
+      inputRoot: ({ theme, ownerState }) => ({
+        ...(ownerState.readOnly === true && {
+          backgroundColor: theme.palette.grey[50],
+        }),
+      }),
     },
   },
   MuiBackdrop: {
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index ebee305a16..38b137e1a4 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -213,7 +213,6 @@ Default.args = {};
 export const disabled = Template.bind({});
 disabled.args = {
   isDisabled: true,
-  // value: "The Godfather",
   value: { label: "The Godfather", year: 1972 },
 };
 
@@ -234,7 +233,6 @@ hasMultipleChoices.args = {
 
 export const readOnly = Template.bind({});
 readOnly.args = {
-  // readOnly: true,
-  // value: "The Godfather",
+  isReadOnly: true,
   value: { label: "The Godfather", year: 1972 },
 };

From 5923b59110493d0e07ec77a6ef074aef3d61bf99 Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Tue, 18 Apr 2023 12:32:49 -0700
Subject: [PATCH 20/24] chore: fix border color hover behavior

---
 packages/odyssey-react-mui/src/theme/components.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 64ef4fd353..a83a5a4327 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -200,6 +200,10 @@ export const components: ThemeOptions["components"] = {
       inputRoot: ({ theme, ownerState }) => ({
         ...(ownerState.readOnly === true && {
           backgroundColor: theme.palette.grey[50],
+
+          [`&:not(:hover)`]: {
+            borderColor: "transparent",
+          },
         }),
       }),
     },

From 02540343fb514d06da5cb90d49ee564f98b08785 Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Tue, 18 Apr 2023 12:37:55 -0700
Subject: [PATCH 21/24] chore: remove unnec autocomplete classes

---
 packages/odyssey-react-mui/src/theme/components.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index a83a5a4327..8cc54c9057 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -13,7 +13,6 @@
 import { ThemeOptions } from "@mui/material";
 import type {} from "@mui/lab/themeAugmentation";
 //import radioClasses from "@mui/material";
-import { autocompleteClasses } from "@mui/material/Autocomplete";
 import { buttonClasses } from "@mui/material/Button";
 import { chipClasses } from "@mui/material/Chip";
 import { dialogActionsClasses } from "@mui/material/DialogActions";

From 7680cfe61dc7a4108a6ebf0f4fed314b5b923d2d Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Tue, 18 Apr 2023 15:56:39 -0700
Subject: [PATCH 22/24] chore: add readonly and disabled examples

---
 .../odyssey-mui/Autocomplete/Autocomplete.mdx | 24 +++++++++++++------
 .../Autocomplete/Autocomplete.stories.tsx     | 18 ++++++++++++--
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
index 5ab0eca602..7d8cbcb40c 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
@@ -44,22 +44,32 @@ Default: `false`
   <Story id="mui-components-forms-autocomplete--loading" />
 </Canvas>
 
-### hasMultipleChoices
+### readOnly
 
-If `true`, `value` must be an array and the menu will support multiple selections.
+If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
 
 Default: `false`
 
 <Canvas>
-  <Story id="mui-components-forms-autocomplete--has-multiple-choices" />
+  <Story id="mui-components-forms-autocomplete--read-only" />
 </Canvas>
 
-### readOnly
+### Multi-Select
 
-If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
+#### Enabled
 
-Default: `false`
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--multiple" />
+</Canvas>
+
+#### Disabled
 
 <Canvas>
-  <Story id="mui-components-forms-autocomplete--read-only" />
+  <Story id="mui-components-forms-autocomplete--multiple-disabled" />
+</Canvas>
+
+#### Read-only
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--multiple-read-only" />
 </Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index 38b137e1a4..f0a21f3f43 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -226,11 +226,25 @@ loading.args = {
   isLoading: true,
 };
 
-export const hasMultipleChoices = Template.bind({});
-hasMultipleChoices.args = {
+export const multiple = Template.bind({});
+multiple.args = {
   hasMultipleChoices: true,
 };
 
+export const multipleDisabled = Template.bind({});
+multipleDisabled.args = {
+  hasMultipleChoices: true,
+  isDisabled: true,
+  value: [{ label: "The Godfather", year: 1972 }],
+};
+
+export const multipleReadOnly = Template.bind({});
+multipleReadOnly.args = {
+  hasMultipleChoices: true,
+  isReadOnly: true,
+  value: [{ label: "The Godfather", year: 1972 }],
+};
+
 export const readOnly = Template.bind({});
 readOnly.args = {
   isReadOnly: true,

From 72c40f1699ce05d0d962ba2ba0ea13e7b3334ae9 Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Wed, 19 Apr 2023 13:30:30 -0700
Subject: [PATCH 23/24] chore: tune disabled states for Autocomplete tags

---
 .../src/theme/components.tsx                  | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 8cc54c9057..96d9cf0cf4 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -531,19 +531,6 @@ export const components: ThemeOptions["components"] = {
           paddingInlineEnd: theme.spacing(2),
         }),
 
-        [`& .${chipClasses.deleteIcon}`]: {
-          WebkitTapHighlightColor: "transparent",
-          color: theme.palette.text.secondary,
-          fontSize: "1em",
-          cursor: "pointer",
-          margin: "0",
-          marginInlineStart: theme.spacing(2),
-
-          "&:hover": {
-            color: theme.palette.text.primary,
-          },
-        },
-
         [`&.${chipClasses.disabled}`]: {
           opacity: 1,
           pointerEvents: "none",
@@ -602,10 +589,32 @@ export const components: ThemeOptions["components"] = {
             },
           },
         }),
+
+        [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+          backgroundColor: theme.palette.grey[200],
+        },
       }),
+
       label: {
         padding: 0,
       },
+
+      deleteIcon: ({ theme }) => ({
+        WebkitTapHighlightColor: "transparent",
+        color: theme.palette.text.secondary,
+        fontSize: "1em",
+        cursor: "pointer",
+        margin: "0",
+        marginInlineStart: theme.spacing(2),
+
+        "&:hover": {
+          color: theme.palette.text.primary,
+        },
+
+        [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+          display: "none",
+        },
+      }),
     },
   },
   MuiCircularProgress: {

From 26d732d158da056b52a8852314b2614c32601717 Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Thu, 20 Apr 2023 11:33:26 -0700
Subject: [PATCH 24/24] docs(odyssey-storybook): update Select and Autocomplete
 stories

---
 .../odyssey-mui/Autocomplete/Autocomplete.mdx |  58 ++---
 .../Autocomplete/Autocomplete.stories.tsx     | 214 +++++-------------
 .../components/odyssey-mui/Banner/Banner.mdx  |   4 -
 .../components/odyssey-mui/Select/Select.mdx  |   2 -
 4 files changed, 84 insertions(+), 194 deletions(-)

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
index 7d8cbcb40c..9e1be94692 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.mdx
@@ -4,51 +4,37 @@ import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
 
 # Autocomplete
 
+Similar to <a href="?path=/docs/mui-components-forms-select--default">Select</a>, this input triggers a menu of options a user can select. Country and state Autocompletes are common examples.
+
 <Canvas>
   <Story id="mui-components-forms-autocomplete--default" />
 </Canvas>
 
-## Variant Behaviors
-
-Examples of MUI's variant behaviors to help us decide and style our own offerings.
-
-Note, some of these behaviors may currently be broken or have unsuitable UI.
-
-### disabled
+## Behavior
 
-If `true`, the component is disabled.
+Interacting with an Autocomplete displays a list of values to choose from. Users may filter the options list by typing.
 
-Default: `false`
+## Variants
 
-<Canvas>
-  <Story id="mui-components-forms-autocomplete--disabled" />
-</Canvas>
+Odyssey provides support for both single and multi-value Autocompletes.
 
-### isCustomValueAllowed
+### Single-select
 
-If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
+With the single-select variant, choosing a value will override any previous selection and close the Autocomplete.
 
-Default: `false`
+#### Enabled
 
 <Canvas>
-  <Story id="mui-components-forms-autocomplete--is-custom-value-allowed" />
+  <Story id="mui-components-forms-autocomplete--default" />
 </Canvas>
 
-### loading
-
-If `true`, the component is in a loading state. This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. options are empty).
-
-Default: `false`
+#### Disabled
 
 <Canvas>
-  <Story id="mui-components-forms-autocomplete--loading" />
+  <Story id="mui-components-forms-autocomplete--disabled" />
 </Canvas>
 
-### readOnly
-
-If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
-
-Default: `false`
+#### Read-only
 
 <Canvas>
   <Story id="mui-components-forms-autocomplete--read-only" />
@@ -56,6 +42,8 @@ Default: `false`
 
 ### Multi-Select
 
+The multi-Select variant allows users to select many values.
+
 #### Enabled
 
 <Canvas>
@@ -73,3 +61,19 @@ Default: `false`
 <Canvas>
   <Story id="mui-components-forms-autocomplete--multiple-read-only" />
 </Canvas>
+
+## Loading state
+
+The loading state is displayed when retrieving values from the server or when data is unavailable.
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--loading" />
+</Canvas>
+
+## Custom Values
+
+Autocomplete also supports user-submitted values via the `isCustomValueAllowed` prop.
+
+<Canvas>
+  <Story id="mui-components-forms-autocomplete--is-custom-value-allowed" />
+</Canvas>
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
index f0a21f3f43..e0d9a0a44c 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Autocomplete/Autocomplete.stories.tsx
@@ -25,182 +25,74 @@ const storybookMeta: ComponentMeta<typeof Autocomplete> = {
     },
   },
   argTypes: {
+    label: {
+      control: "text",
+      defaultValue: "Destination",
+    },
+    hint: {
+      control: "text",
+      defaultValue: "Select your destination in the Sol system.",
+    },
     isDisabled: {
       control: "boolean",
-      defaultValue: false,
     },
-    // isCustomValueAllowed: {
-    //   control: "boolean",
-    //   defaultValue: false,
-    // },
-    // includeInputInList: {
-    //   control: "boolean",
-    //   defaultValue: false,
-    // },
-    // loading: {
-    //   control: "boolean",
-    //   defaultValue: false,
-    // },
-    // hasMultipleChoices: {
-    //   control: "boolean",
-    //   defaultValue: false,
-    // },
-    // readOnly: {
-    //   control: "boolean",
-    //   defaultValue: false,
-    // },
+    isCustomValueAllowed: {
+      control: "boolean",
+    },
+    isLoading: {
+      control: "boolean",
+    },
+    hasMultipleChoices: {
+      control: "boolean",
+    },
+    isReadOnly: {
+      control: "boolean",
+    },
   },
   decorators: [MuiThemeDecorator],
 };
 
 export default storybookMeta;
 
-type MovieType = { label: string; year: number };
+type StationType = { label: string };
 
 // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
-const top100Films: ReadonlyArray<MovieType> = [
-  { label: "The Shawshank Redemption", year: 1994 },
-  { label: "The Godfather", year: 1972 },
-  { label: "The Godfather: Part II", year: 1974 },
-  { label: "The Dark Knight", year: 2008 },
-  { label: "12 Angry Men", year: 1957 },
-  { label: "Schindler's List", year: 1993 },
-  { label: "Pulp Fiction", year: 1994 },
-  {
-    label: "The Lord of the Rings: The Return of the King",
-    year: 2003,
-  },
-  { label: "The Good, the Bad and the Ugly", year: 1966 },
-  { label: "Fight Club", year: 1999 },
-  {
-    label: "The Lord of the Rings: The Fellowship of the Ring",
-    year: 2001,
-  },
-  {
-    label: "Star Wars: Episode V - The Empire Strikes Back",
-    year: 1980,
-  },
-  { label: "Forrest Gump", year: 1994 },
-  { label: "Inception", year: 2010 },
-  {
-    label: "The Lord of the Rings: The Two Towers",
-    year: 2002,
-  },
-  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { label: "Goodfellas", year: 1990 },
-  { label: "The Matrix", year: 1999 },
-  { label: "Seven Samurai", year: 1954 },
-  {
-    label: "Star Wars: Episode IV - A New Hope",
-    year: 1977,
-  },
-  { label: "City of God", year: 2002 },
-  { label: "Se7en", year: 1995 },
-  { label: "The Silence of the Lambs", year: 1991 },
-  { label: "It's a Wonderful Life", year: 1946 },
-  { label: "Life Is Beautiful", year: 1997 },
-  { label: "The Usual Suspects", year: 1995 },
-  { label: "Léon: The Professional", year: 1994 },
-  { label: "Spirited Away", year: 2001 },
-  { label: "Saving Private Ryan", year: 1998 },
-  { label: "Once Upon a Time in the West", year: 1968 },
-  { label: "American History X", year: 1998 },
-  { label: "Interstellar", year: 2014 },
-  { label: "Casablanca", year: 1942 },
-  { label: "City Lights", year: 1931 },
-  { label: "Psycho", year: 1960 },
-  { label: "The Green Mile", year: 1999 },
-  { label: "The Intouchables", year: 2011 },
-  { label: "Modern Times", year: 1936 },
-  { label: "Raiders of the Lost Ark", year: 1981 },
-  { label: "Rear Window", year: 1954 },
-  { label: "The Pianist", year: 2002 },
-  { label: "The Departed", year: 2006 },
-  { label: "Terminator 2: Judgment Day", year: 1991 },
-  { label: "Back to the Future", year: 1985 },
-  { label: "Whiplash", year: 2014 },
-  { label: "Gladiator", year: 2000 },
-  { label: "Memento", year: 2000 },
-  { label: "The Prestige", year: 2006 },
-  { label: "The Lion King", year: 1994 },
-  { label: "Apocalypse Now", year: 1979 },
-  { label: "Alien", year: 1979 },
-  { label: "Sunset Boulevard", year: 1950 },
-  {
-    label:
-      "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
-    year: 1964,
-  },
-  { label: "The Great Dictator", year: 1940 },
-  { label: "Cinema Paradiso", year: 1988 },
-  { label: "The Lives of Others", year: 2006 },
-  { label: "Grave of the Fireflies", year: 1988 },
-  { label: "Paths of Glory", year: 1957 },
-  { label: "Django Unchained", year: 2012 },
-  { label: "The Shining", year: 1980 },
-  { label: "WALL·E", year: 2008 },
-  { label: "American Beauty", year: 1999 },
-  { label: "The Dark Knight Rises", year: 2012 },
-  { label: "Princess Mononoke", year: 1997 },
-  { label: "Aliens", year: 1986 },
-  { label: "Oldboy", year: 2003 },
-  { label: "Once Upon a Time in America", year: 1984 },
-  { label: "Witness for the Prosecution", year: 1957 },
-  { label: "Das Boot", year: 1981 },
-  { label: "Citizen Kane", year: 1941 },
-  { label: "North by Northwest", year: 1959 },
-  { label: "Vertigo", year: 1958 },
-  {
-    label: "Star Wars: Episode VI - Return of the Jedi",
-    year: 1983,
-  },
-  { label: "Reservoir Dogs", year: 1992 },
-  { label: "Braveheart", year: 1995 },
-  { label: "M", year: 1931 },
-  { label: "Requiem for a Dream", year: 2000 },
-  { label: "Amélie", year: 2001 },
-  { label: "A Clockwork Orange", year: 1971 },
-  { label: "Like Stars on Earth", year: 2007 },
-  { label: "Taxi Driver", year: 1976 },
-  { label: "Lawrence of Arabia", year: 1962 },
-  { label: "Double Indemnity", year: 1944 },
-  {
-    label: "Eternal Sunshine of the Spotless Mind",
-    year: 2004,
-  },
-  { label: "Amadeus", year: 1984 },
-  { label: "To Kill a Mockingbird", year: 1962 },
-  { label: "Toy Story 3", year: 2010 },
-  { label: "Logan", year: 2017 },
-  { label: "Full Metal Jacket", year: 1987 },
-  { label: "Dangal", year: 2016 },
-  { label: "The Sting", year: 1973 },
-  { label: "2001: A Space Odyssey", year: 1968 },
-  { label: "Singin' in the Rain", year: 1952 },
-  { label: "Toy Story", year: 1995 },
-  { label: "Bicycle Thieves", year: 1948 },
-  { label: "The Kid", year: 1921 },
-  { label: "Inglourious Basterds", year: 2009 },
-  { label: "Snatch", year: 2000 },
-  { label: "3 Idiots", year: 2009 },
-  { label: "Monty Python and the Holy Grail", year: 1975 },
+const stations: ReadonlyArray<StationType> = [
+  { label: "Anderson Station" },
+  { label: "Bara Gaon Complex" },
+  { label: "Ceres" },
+  { label: "Corley Station" },
+  { label: "Deep Transfer Station Three" },
+  { label: "Eros" },
+  { label: "Free Navy Supply Depot" },
+  { label: "Ganymede" },
+  { label: "Gewitter Base" },
+  { label: "Iapetus Station" },
+  { label: "Kelso Station" },
+  { label: "Laconian Transfer Station" },
+  { label: "Mao Station" },
+  { label: "Medina Station" },
+  { label: "Nauvoo" },
+  { label: "Oshima" },
+  { label: "Osiris Station" },
+  { label: "Pallas" },
+  { label: "Phoebe Station" },
+  { label: "Prospero Station" },
+  { label: "Shirazi-Ma Complex" },
+  { label: "Terryon Lock" },
+  { label: "Thoth Station" },
+  { label: "Tycho Station" },
+  { label: "Vesta" },
 ];
 
 type AutocompleteType = AutocompleteProps<
-  MovieType | undefined,
+  StationType | undefined,
   boolean | undefined,
   boolean | undefined
 >;
 
 const Template: Story<AutocompleteType> = (args) => {
-  return (
-    <Autocomplete
-      {...args}
-      hint="Select your favorite movie"
-      label="Movie"
-      options={top100Films}
-    />
-  );
+  return <Autocomplete {...args} options={stations} />;
 };
 
 const EmptyTemplate: Story<AutocompleteType> = (args) => {
@@ -213,7 +105,7 @@ Default.args = {};
 export const disabled = Template.bind({});
 disabled.args = {
   isDisabled: true,
-  value: { label: "The Godfather", year: 1972 },
+  value: { label: "Tycho Station" },
 };
 
 export const isCustomValueAllowed = Template.bind({});
@@ -235,18 +127,18 @@ export const multipleDisabled = Template.bind({});
 multipleDisabled.args = {
   hasMultipleChoices: true,
   isDisabled: true,
-  value: [{ label: "The Godfather", year: 1972 }],
+  value: [{ label: "Tycho Station" }],
 };
 
 export const multipleReadOnly = Template.bind({});
 multipleReadOnly.args = {
   hasMultipleChoices: true,
   isReadOnly: true,
-  value: [{ label: "The Godfather", year: 1972 }],
+  value: [{ label: "Tycho Station" }],
 };
 
 export const readOnly = Template.bind({});
 readOnly.args = {
   isReadOnly: true,
-  value: { label: "The Godfather", year: 1972 },
+  value: { label: "Tycho Station" },
 };
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx
index 01bc475acf..c5a7d9162e 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.mdx
@@ -68,10 +68,6 @@ Banner content should be succinct and direct. If possible, your content should b
 
 When including an action, be sure the link text clearly indicates where it leads.
 
-## Props
-
-<ArgsTable />
-
 ## References
 
 <figure class="ods-table--figure">
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.mdx
index 8aea429d4b..d608b5443f 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.mdx
@@ -16,8 +16,6 @@ Interacting with a Select displays a list of values to choose from. Choosing a v
 
 Odyssey also supports a Multi-Select variant that allows users to select many values.
 
-To support expected functionality and behaviors, Select relies on the Choices.js library. Odyssey provides fallback styling when Choices.js isn't available.
-
 ## Variants
 
 Odyssey provides support for both single and multi-value Selects.