@okta/odyssey-react-mui 1.0.1 → 1.1.1

package/dist/theme/components.js

@@ -11,6 +11,7 @@
  */
 
 import { alertTitleClasses } from "@mui/material/AlertTitle";
+import { autocompleteClasses } from "@mui/material/Autocomplete";
 import { buttonClasses } from "@mui/material/Button";
 import { checkboxClasses } from "@mui/material/Checkbox";
 import { chipClasses } from "@mui/material/Chip";
@@ -253,16 +254,34 @@ export const components = odysseyTokens => {
         listbox: {
           paddingBlock: odysseyTokens.Spacing2,
           paddingInline: odysseyTokens.Spacing2,
-          borderRadius: odysseyTokens.BorderRadiusMain
+          borderRadius: odysseyTokens.BorderRadiusMain,
+          [`& .${autocompleteClasses.option}`]: {
+            minHeight: "unset",
+            paddingBlock: odysseyTokens.Spacing3,
+            paddingInline: odysseyTokens.Spacing4,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            [`&:hover`]: {
+              backgroundColor: odysseyTokens.HueNeutral100
+            },
+            [`&.${autocompleteClasses.focused}`]: {
+              backgroundColor: odysseyTokens.HueNeutral100
+            },
+            [`&[aria-selected="true"]`]: {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorAction,
+              [`&:hover`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter
+              },
+              [`&.${autocompleteClasses.focused}`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter
+              }
+            }
+          }
         },
         loading: {
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4
         },
-        option: {
-          paddingBlock: odysseyTokens.Spacing3,
-          borderRadius: odysseyTokens.BorderRadiusTight
-        },
         popupIndicator: {
           padding: odysseyTokens.Spacing1,
           marginRight: "unset"
@@ -1053,8 +1072,8 @@ export const components = odysseyTokens => {
         root: {
           flexWrap: "wrap",
           gap: odysseyTokens.Spacing2,
-          paddingBlockStart: odysseyTokens.Spacing6,
-          paddingBlockEnd: odysseyTokens.Spacing6,
+          paddingBlockStart: odysseyTokens.Spacing5,
+          paddingBlockEnd: odysseyTokens.Spacing5,
           paddingInline: odysseyTokens.Spacing6,
           "& > .${ buttonClasses.root }": {
             margin: "0 !important"
@@ -1237,6 +1256,13 @@ export const components = odysseyTokens => {
         }
       }
     },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          padding: odysseyTokens.Spacing1
+        }
+      }
+    },
     MuiInput: {
       defaultProps: {
         disableUnderline: true
@@ -1278,8 +1304,7 @@ export const components = odysseyTokens => {
     },
     MuiInputBase: {
       defaultProps: {
-        minRows: 3,
-        required: true
+        minRows: 3
       },
       styleOverrides: {
         root: _ref19 => {
@@ -1358,12 +1383,12 @@ export const components = odysseyTokens => {
           },
           [`&::-webkit-search-cancel-button`]: {
             display: "none",
-            "-webkit-appearance": "none",
-            "-moz-appearance": "none"
+            MozAppearance: "none",
+            WebkitAppearance: "none"
           },
           [`&::-moz-search-cancel-button`]: {
             display: "none",
-            "-moz-appearance": "none"
+            MozAppearance: "none"
           },
           [`&::-ms-clear`]: {
             display: "none"
@@ -1502,6 +1527,7 @@ export const components = odysseyTokens => {
             gap: odysseyTokens.Spacing2,
             minHeight: "unset",
             paddingBlock: odysseyTokens.Spacing3,
+            paddingInline: odysseyTokens.Spacing4,
             borderRadius: odysseyTokens.BorderRadiusTight,
             [`& .${formControlLabelClasses.root}`]: {
               gap: "unset"
@@ -1513,6 +1539,9 @@ export const components = odysseyTokens => {
                 backgroundColor: "transparent"
               }
             },
+            [`:focus-visible`]: {
+              backgroundColor: odysseyTokens.HueNeutral100
+            },
             [`&.${menuItemClasses.root}-destructive`]: {
               color: odysseyTokens.TypographyColorDanger
             },
@@ -2107,7 +2136,6 @@ export const components = odysseyTokens => {
     },
     MuiTypography: {
       defaultProps: {
-        fontFamily: "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
         variantMapping: {
           h1: "h1",
           h2: "h2",