@okta/odyssey-react-mui 0.21.3 → 0.22.0

package/dist/theme/components.js

@@ -25,7 +25,7 @@ import { tableHeadClasses } from "@mui/material/TableHead";
 import { tableRowClasses } from "@mui/material/TableRow";
 import { tableSortLabelClasses } from "@mui/material/TableSortLabel";
 import { tooltipClasses } from "@mui/material/Tooltip";
-import { AlertTriangleFilledIcon, ArrowDownIcon, CheckIcon, CheckCircleFilledIcon, ChevronDownIcon, CloseCircleFilledIcon, InformationCircleFilledIcon, SubtractIcon } from "../iconDictionary/index.js";
+import { AlertTriangleFilledIcon, ArrowDownIcon, CheckIcon, CheckCircleFilledIcon, ChevronDownIcon, CloseCircleFilledIcon, CloseIcon, InformationCircleFilledIcon, SubtractIcon } from "../iconDictionary/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 export const components = {
@@ -158,12 +158,97 @@ export const components = {
       }
     }
   },
+  MuiAutocomplete: {
+    defaultProps: {
+      autoHighlight: true,
+      autoSelect: false,
+      blurOnSelect: false,
+      clearIcon: _jsx(CloseIcon, {}),
+      clearOnEscape: true,
+      disableClearable: false,
+      disabledItemsFocusable: false,
+      disableListWrap: false,
+      disablePortal: false,
+      filterSelectedOptions: false,
+      fullWidth: false,
+      handleHomeEndKeys: true,
+      includeInputInList: true,
+      limitTags: -1,
+      openOnFocus: false,
+      popupIcon: _jsx(ChevronDownIcon, {}),
+      selectOnFocus: true
+    },
+    styleOverrides: {
+      clearIndicator: _ref6 => {
+        let {
+          theme
+        } = _ref6;
+        return {
+          marginRight: "unset",
+          padding: theme.spacing(1)
+        };
+      },
+      endAdornment: _ref7 => {
+        let {
+          theme,
+          ownerState
+        } = _ref7;
+        return {
+          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"
+          })
+        };
+      },
+      loading: _ref8 => {
+        let {
+          theme
+        } = _ref8;
+        return {
+          paddingBlock: theme.spacing(3),
+          paddingInline: theme.spacing(4)
+        };
+      },
+      popupIndicator: _ref9 => {
+        let {
+          theme
+        } = _ref9;
+        return {
+          padding: theme.spacing(1),
+          marginRight: "unset"
+        };
+      },
+      inputRoot: _ref10 => {
+        let {
+          theme,
+          ownerState
+        } = _ref10;
+        return { ...(ownerState.readOnly === true && {
+            backgroundColor: theme.palette.grey[50],
+            [`&:not(:hover)`]: {
+              borderColor: "transparent"
+            }
+          })
+        };
+      }
+    }
+  },
   MuiBackdrop: {
     styleOverrides: {
-      root: _ref6 => {
+      root: _ref11 => {
         let {
           ownerState
-        } = _ref6;
+        } = _ref11;
         return {
           backgroundColor: "rgba(29,29,33,0.75)",
           ...(ownerState.invisible === true && {
@@ -182,10 +267,10 @@ export const components = {
       props: {
         variant: "primary"
       },
-      style: _ref7 => {
+      style: _ref12 => {
         let {
           theme
-        } = _ref7;
+        } = _ref12;
         return {
           fontWeight: 600,
           color: theme.palette.common.white,
@@ -207,10 +292,10 @@ export const components = {
       props: {
         variant: "secondary"
       },
-      style: _ref8 => {
+      style: _ref13 => {
         let {
           theme
-        } = _ref8;
+        } = _ref13;
         return {
           backgroundColor: theme.palette.grey[50],
           borderColor: theme.palette.grey[200],
@@ -234,10 +319,10 @@ export const components = {
       props: {
         variant: "danger"
       },
-      style: _ref9 => {
+      style: _ref14 => {
         let {
           theme
-        } = _ref9;
+        } = _ref14;
         return {
           backgroundColor: theme.palette.error.main,
           color: theme.palette.common.white,
@@ -262,10 +347,10 @@ export const components = {
       props: {
         variant: "floating"
       },
-      style: _ref10 => {
+      style: _ref15 => {
         let {
           theme
-        } = _ref10;
+        } = _ref15;
         return {
           backgroundColor: "transparent",
           color: theme.palette.text.primary,
@@ -287,12 +372,12 @@ export const components = {
       }
     }, {
       props: {
-        size: "s"
+        size: "small"
       },
-      style: _ref11 => {
+      style: _ref16 => {
         let {
           theme
-        } = _ref11;
+        } = _ref16;
         return {
           paddingBlock: `calc(${theme.spacing(2)} - 1px)`,
           paddingInline: `calc(${theme.spacing(2)} - 1px)`,
@@ -301,12 +386,12 @@ export const components = {
       }
     }, {
       props: {
-        size: "l"
+        size: "large"
       },
-      style: _ref12 => {
+      style: _ref17 => {
         let {
           theme
-        } = _ref12;
+        } = _ref17;
         return {
           paddingBlock: `calc(${theme.spacing(4)} - 1px)`,
           paddingInline: `calc(${theme.spacing(4)} - 1px)`
@@ -316,10 +401,10 @@ export const components = {
       props: {
         fullWidth: true
       },
-      style: _ref13 => {
+      style: _ref18 => {
         let {
           theme
-        } = _ref13;
+        } = _ref18;
         return {
           display: "block",
           width: "100%",
@@ -342,10 +427,10 @@ export const components = {
       }
     }],
     styleOverrides: {
-      root: _ref14 => {
+      root: _ref19 => {
         let {
           theme
-        } = _ref14;
+        } = _ref19;
         return {
           fontWeight: 600,
           minWidth: "unset",
@@ -382,11 +467,11 @@ export const components = {
           }
         };
       },
-      endIcon: _ref15 => {
+      endIcon: _ref20 => {
         let {
           theme,
           ownerState
-        } = _ref15;
+        } = _ref20;
         return {
           display: "inline-flex",
           margin: 0,
@@ -396,11 +481,11 @@ export const components = {
           })
         };
       },
-      startIcon: _ref16 => {
+      startIcon: _ref21 => {
         let {
           theme,
           ownerState
-        } = _ref16;
+        } = _ref21;
         return {
           display: "inline-flex",
           margin: 0,
@@ -425,10 +510,10 @@ export const components = {
       indeterminateIcon: _jsx(SubtractIcon, {})
     },
     styleOverrides: {
-      root: _ref17 => {
+      root: _ref22 => {
         let {
           theme
-        } = _ref17;
+        } = _ref22;
         return {
           width: `${theme.typography.ui.lineHeight}em`,
           height: `${theme.typography.ui.lineHeight}em`,
@@ -504,11 +589,11 @@ export const components = {
       deleteIcon: _jsx(CloseCircleFilledIcon, {})
     },
     styleOverrides: {
-      root: _ref18 => {
+      root: _ref23 => {
         let {
           theme,
           ownerState
-        } = _ref18;
+        } = _ref23;
         return {
           height: "auto",
           paddingBlock: theme.spacing(2),
@@ -520,17 +605,6 @@ export const components = {
           ...(ownerState.onDelete && {
             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",
@@ -582,11 +656,33 @@ export const components = {
                 backgroundColor: theme.palette.warning.main
               }
             }
-          })
+          }),
+          [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+            backgroundColor: theme.palette.grey[200]
+          }
         };
       },
       label: {
         padding: 0
+      },
+      deleteIcon: _ref24 => {
+        let {
+          theme
+        } = _ref24;
+        return {
+          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"
+          }
+        };
       }
     }
   },
@@ -599,20 +695,20 @@ export const components = {
       variant: "indeterminate"
     },
     styleOverrides: {
-      root: _ref19 => {
+      root: _ref25 => {
         let {
           theme,
           ownerState
-        } = _ref19;
+        } = _ref25;
         return { ...(ownerState.color !== "inherit" && {
             color: theme.palette.primary.dark
           })
         };
       },
-      circle: _ref20 => {
+      circle: _ref26 => {
         let {
           ownerState
-        } = _ref20;
+        } = _ref26;
         return { ...(ownerState.variant === "indeterminate" && {
             strokeDasharray: "160%, 360%"
           })
@@ -629,10 +725,10 @@ export const components = {
   },
   MuiScopedCssBaseline: {
     styleOverrides: {
-      root: _ref21 => {
+      root: _ref27 => {
         let {
           theme
-        } = _ref21;
+        } = _ref27;
         return {
           abbr: {
             borderBottomWidth: "1px",
@@ -898,10 +994,10 @@ export const components = {
       scroll: "paper"
     },
     styleOverrides: {
-      paper: _ref22 => {
+      paper: _ref28 => {
         let {
           theme
-        } = _ref22;
+        } = _ref28;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} + (${theme.spacing(6)} * 2))`,
           boxShadow: "none",
@@ -912,10 +1008,10 @@ export const components = {
   },
   MuiDialogActions: {
     styleOverrides: {
-      root: _ref23 => {
+      root: _ref29 => {
         let {
           theme
-        } = _ref23;
+        } = _ref29;
         return {
           paddingBlockStart: theme.spacing(4),
           paddingBlockEnd: theme.spacing(6),
@@ -926,11 +1022,11 @@ export const components = {
   },
   MuiDialogContent: {
     styleOverrides: {
-      root: _ref24 => {
+      root: _ref30 => {
         let {
           theme,
           ownerState
-        } = _ref24;
+        } = _ref30;
         return {
           padding: 0,
           paddingBlock: theme.spacing(4),
@@ -949,10 +1045,10 @@ export const components = {
       color: "text.primary"
     },
     styleOverrides: {
-      root: _ref25 => {
+      root: _ref31 => {
         let {
           theme
-        } = _ref25;
+        } = _ref31;
         return {
           marginBlockEnd: theme.spacing(5),
           "&:last-child": {
@@ -968,10 +1064,10 @@ export const components = {
       variant: "h5"
     },
     styleOverrides: {
-      root: _ref26 => {
+      root: _ref32 => {
         let {
           theme
-        } = _ref26;
+        } = _ref32;
         return {
           display: "flex",
           justifyContent: "space-between",
@@ -990,11 +1086,11 @@ export const components = {
       margin: "normal"
     },
     styleOverrides: {
-      root: _ref27 => {
+      root: _ref33 => {
         let {
           ownerState,
           theme
-        } = _ref27;
+        } = _ref33;
         return {
           width: "100%",
           maxWidth: "32rem",
@@ -1021,11 +1117,11 @@ export const components = {
   },
   MuiFormControlLabel: {
     styleOverrides: {
-      root: _ref28 => {
+      root: _ref34 => {
         let {
           theme,
           ownerState
-        } = _ref28;
+        } = _ref34;
         return {
           gap: theme.spacing(2),
           marginInlineStart: 0,
@@ -1067,10 +1163,10 @@ export const components = {
       variant: "standard"
     },
     styleOverrides: {
-      root: _ref29 => {
+      root: _ref35 => {
         let {
           theme
-        } = _ref29;
+        } = _ref35;
         return {
           fontSize: theme.typography.subtitle1.fontSize,
           lineHeight: "1.33333333",
@@ -1090,10 +1186,10 @@ export const components = {
   },
   MuiFormLabel: {
     styleOverrides: {
-      root: _ref30 => {
+      root: _ref36 => {
         let {
           theme
-        } = _ref30;
+        } = _ref36;
         return {
           color: theme.palette.text.primary,
           lineHeight: theme.typography.ui.lineHeight,
@@ -1109,18 +1205,18 @@ export const components = {
   },
   MuiIconButton: {
     styleOverrides: {
-      edgeEnd: _ref31 => {
+      edgeEnd: _ref37 => {
         let {
           theme
-        } = _ref31;
+        } = _ref37;
         return {
           marginInlineEnd: theme.spacing(1)
         };
       },
-      root: _ref32 => {
+      root: _ref38 => {
         let {
           theme
-        } = _ref32;
+        } = _ref38;
         return {
           padding: theme.spacing(1),
           fontSize: theme.typography.body1.fontSize,
@@ -1161,15 +1257,12 @@ export const components = {
     }
   },
   MuiInputAdornment: {
-    defaultProps: {
-      variant: "outlined"
-    },
     styleOverrides: {
-      root: _ref33 => {
+      root: _ref39 => {
         let {
           theme,
           ownerState
-        } = _ref33;
+        } = _ref39;
         return {
           display: "flex",
           minWidth: "1.25em",
@@ -1197,11 +1290,11 @@ export const components = {
       required: true
     },
     styleOverrides: {
-      root: _ref34 => {
+      root: _ref40 => {
         let {
           ownerState,
           theme
-        } = _ref34;
+        } = _ref40;
         return { ...theme.typography.body1,
           flex: "1",
           width: "auto",
@@ -1251,10 +1344,10 @@ export const components = {
           }
         };
       },
-      input: _ref35 => {
+      input: _ref41 => {
         let {
           theme
-        } = _ref35;
+        } = _ref41;
         return {
           boxSizing: "border-box",
           height: "auto",
@@ -1284,10 +1377,10 @@ export const components = {
       shrink: false
     },
     styleOverrides: {
-      root: _ref36 => {
+      root: _ref42 => {
         let {
           ownerState
-        } = _ref36;
+        } = _ref42;
         return {
           display: "flex",
           justifyContent: "space-between",
@@ -1309,10 +1402,10 @@ export const components = {
   },
   MuiLink: {
     styleOverrides: {
-      root: _ref37 => {
+      root: _ref43 => {
         let {
           theme
-        } = _ref37;
+        } = _ref43;
         return {
           color: theme.palette.primary.main,
           textDecoration: "underline",
@@ -1355,10 +1448,10 @@ export const components = {
       props: {
         variant: "monochrome"
       },
-      style: _ref38 => {
+      style: _ref44 => {
         let {
           theme
-        } = _ref38;
+        } = _ref44;
         return {
           color: theme.palette.text.primary,
           textDecoration: "underline",
@@ -1387,10 +1480,10 @@ export const components = {
   },
   MuiListSubheader: {
     styleOverrides: {
-      root: _ref39 => {
+      root: _ref45 => {
         let {
           theme
-        } = _ref39;
+        } = _ref45;
         return {
           paddingBlock: theme.spacing(2),
           paddingInline: theme.spacing(4),
@@ -1405,11 +1498,11 @@ export const components = {
   },
   MuiMenuItem: {
     styleOverrides: {
-      root: _ref40 => {
+      root: _ref46 => {
         let {
           theme,
           ownerState
-        } = _ref40;
+        } = _ref46;
         return {
           gap: theme.spacing(2),
           minHeight: "unset",
@@ -1475,10 +1568,10 @@ export const components = {
           backgroundColor: "transparent"
         }
       },
-      icon: _ref41 => {
+      icon: _ref47 => {
         let {
           theme
-        } = _ref41;
+        } = _ref47;
         return {
           insetInlineEnd: theme.spacing(3),
           color: theme.palette.text.primary
@@ -1488,10 +1581,10 @@ export const components = {
   },
   MuiPopover: {
     styleOverrides: {
-      paper: _ref42 => {
+      paper: _ref48 => {
         let {
           theme
-        } = _ref42;
+        } = _ref48;
         return {
           marginBlockStart: theme.spacing(1),
           borderWidth: theme.mixins.borderWidth,
@@ -1508,10 +1601,10 @@ export const components = {
       checkedIcon: _jsx(_Fragment, {})
     },
     styleOverrides: {
-      root: _ref43 => {
+      root: _ref49 => {
         let {
           theme
-        } = _ref43;
+        } = _ref49;
         return {
           width: `${theme.typography.ui.lineHeight}em`,
           height: `${theme.typography.ui.lineHeight}em`,
@@ -1595,10 +1688,10 @@ export const components = {
       IconComponent: ChevronDownIcon
     },
     styleOverrides: {
-      select: _ref44 => {
+      select: _ref50 => {
         let {
           theme
-        } = _ref44;
+        } = _ref50;
         return {
           paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
           paddingInline: theme.spacing(3),
@@ -1614,10 +1707,10 @@ export const components = {
           }
         };
       },
-      icon: _ref45 => {
+      icon: _ref51 => {
         let {
           theme
-        } = _ref45;
+        } = _ref51;
         return {
           insetInlineEnd: theme.spacing(3),
           color: theme.palette.text.primary
@@ -1631,10 +1724,10 @@ export const components = {
       color: "inherit"
     },
     styleOverrides: {
-      root: _ref46 => {
+      root: _ref52 => {
         let {
           theme
-        } = _ref46;
+        } = _ref52;
         return {
           fontSize: `${theme.typography.ui.lineHeight}rem`
         };
@@ -1646,11 +1739,11 @@ export const components = {
       iconPosition: "start"
     },
     styleOverrides: {
-      root: _ref47 => {
+      root: _ref53 => {
         let {
           theme,
           ownerState
-        } = _ref47;
+        } = _ref53;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
           minWidth: "unset",
@@ -1711,11 +1804,11 @@ export const components = {
   },
   MuiTable: {
     styleOverrides: {
-      root: _ref48 => {
+      root: _ref54 => {
         let {
           theme,
           ownerState
-        } = _ref48;
+        } = _ref54;
         return {
           display: "table",
           width: "auto",
@@ -1747,11 +1840,11 @@ export const components = {
   },
   MuiTableCell: {
     styleOverrides: {
-      root: _ref49 => {
+      root: _ref55 => {
         let {
           theme,
           ownerState
-        } = _ref49;
+        } = _ref55;
         return { ...theme.typography.body1,
           maxWidth: theme.mixins.maxWidth,
           borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
@@ -1830,10 +1923,10 @@ export const components = {
       component: "figure"
     },
     styleOverrides: {
-      root: _ref50 => {
+      root: _ref56 => {
         let {
           theme
-        } = _ref50;
+        } = _ref56;
         return {
           width: "unset",
           maxWidth: "100%",
@@ -1850,10 +1943,10 @@ export const components = {
   },
   MuiTableRow: {
     styleOverrides: {
-      root: _ref51 => {
+      root: _ref57 => {
         let {
           theme
-        } = _ref51;
+        } = _ref57;
         return {
           verticalAlign: "unset",
           [`&.${tableRowClasses.root}:hover`]: {
@@ -1874,10 +1967,10 @@ export const components = {
       IconComponent: ArrowDownIcon
     },
     styleOverrides: {
-      root: _ref52 => {
+      root: _ref58 => {
         let {
           theme
-        } = _ref52;
+        } = _ref58;
         return {
           cursor: "pointer",
           display: "inline-flex",
@@ -1906,11 +1999,11 @@ export const components = {
           }
         };
       },
-      icon: _ref53 => {
+      icon: _ref59 => {
         let {
           theme,
           ownerState
-        } = _ref53;
+        } = _ref59;
         return {
           fontSize: "inherit",
           marginInlineEnd: 0,
@@ -1939,19 +2032,19 @@ export const components = {
   },
   MuiTabs: {
     styleOverrides: {
-      root: _ref54 => {
+      root: _ref60 => {
         let {
           theme
-        } = _ref54;
+        } = _ref60;
         return {
           minHeight: "unset",
           marginBottom: theme.spacing(5)
         };
       },
-      flexContainer: _ref55 => {
+      flexContainer: _ref61 => {
         let {
           theme
-        } = _ref55;
+        } = _ref61;
         return {
           gap: theme.spacing(5),
           borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.divider}`
@@ -1967,11 +2060,11 @@ export const components = {
       placement: "top"
     },
     styleOverrides: {
-      tooltip: _ref56 => {
+      tooltip: _ref62 => {
         let {
           theme,
           ownerState
-        } = _ref56;
+        } = _ref62;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
           paddingBlock: theme.spacing(2),
@@ -2031,10 +2124,10 @@ export const components = {
           }
         };
       },
-      arrow: _ref57 => {
+      arrow: _ref63 => {
         let {
           theme
-        } = _ref57;
+        } = _ref63;
         return {
           color: theme.palette.grey[900],
           "&::before": {
@@ -2073,10 +2166,10 @@ export const components = {
       }
     },
     styleOverrides: {
-      paragraph: _ref58 => {
+      paragraph: _ref64 => {
         let {
           theme
-        } = _ref58;
+        } = _ref64;
         return {
           marginBottom: theme.spacing(4)
         };