@okta/odyssey-react-mui 0.19.0 → 0.21.0

package/dist/theme/components.js

@@ -9,10 +9,15 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
+import { buttonClasses } from "@mui/material/Button";
 import { chipClasses } from "@mui/material/Chip";
 import { dialogActionsClasses } from "@mui/material/DialogActions";
+import { dividerClasses } from "@mui/material/Divider";
 import { inputAdornmentClasses } from "@mui/material/InputAdornment";
 import { inputBaseClasses } from "@mui/material/InputBase";
+import { listItemIconClasses } from "@mui/material/ListItemIcon";
+import { listItemTextClasses } from "@mui/material/ListItemText";
+import { menuItemClasses } from "@mui/material/MenuItem";
 import { svgIconClasses } from "@mui/material/SvgIcon";
 import { tableBodyClasses } from "@mui/material/TableBody";
 import { tableCellClasses } from "@mui/material/TableCell";
@@ -339,7 +344,7 @@ export const components = {
       },
       style: {
         minWidth: "auto",
-        ".MuiButton-startIcon": {
+        [`.${buttonClasses.endIcon}, .${buttonClasses.startIcon}`]: {
           margin: "0"
         }
       }
@@ -380,22 +385,39 @@ export const components = {
             cursor: "not-allowed",
             pointerEvents: "inherit"
           },
-          ".MuiButton-startIcon > *:nth-of-type(1)": {
-            fontSize: `${theme.typography.ui.lineHeight}em`
+          [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: {
+            "& > *:nth-of-type(1)": {
+              fontSize: `${theme.typography.ui.lineHeight}em`
+            }
           }
         };
       },
-      startIcon: _ref15 => {
+      endIcon: _ref15 => {
         let {
-          theme
+          theme,
+          ownerState
         } = _ref15;
+        return {
+          display: "inline-flex",
+          margin: 0,
+          marginInlineStart: theme.spacing(2),
+          ...(ownerState.children === undefined && {
+            marginInlineStart: 0
+          })
+        };
+      },
+      startIcon: _ref16 => {
+        let {
+          theme,
+          ownerState
+        } = _ref16;
         return {
           display: "inline-flex",
           margin: 0,
           marginInlineEnd: theme.spacing(2),
-          "&:only-child": {
-            margin: 0
-          }
+          ...(ownerState.children === undefined && {
+            marginInlineEnd: 0
+          })
         };
       }
     }
@@ -410,10 +432,10 @@ export const components = {
       size: "small"
     },
     styleOverrides: {
-      root: _ref16 => {
+      root: _ref17 => {
         let {
           theme
-        } = _ref16;
+        } = _ref17;
         return {
           borderRadius: "4px",
           "&:hover": {
@@ -446,11 +468,11 @@ export const components = {
       deleteIcon: _jsx(CloseCircleFilledIcon, {})
     },
     styleOverrides: {
-      root: _ref17 => {
+      root: _ref18 => {
         let {
           theme,
           ownerState
-        } = _ref17;
+        } = _ref18;
         return {
           height: "auto",
           paddingBlock: theme.spacing(2),
@@ -541,20 +563,20 @@ export const components = {
       variant: "indeterminate"
     },
     styleOverrides: {
-      root: _ref18 => {
+      root: _ref19 => {
         let {
           theme,
           ownerState
-        } = _ref18;
+        } = _ref19;
         return { ...(ownerState.color !== "inherit" && {
             color: theme.palette.primary.dark
           })
         };
       },
-      circle: _ref19 => {
+      circle: _ref20 => {
         let {
           ownerState
-        } = _ref19;
+        } = _ref20;
         return { ...(ownerState.variant === "indeterminate" && {
             strokeDasharray: "160%, 360%"
           })
@@ -571,10 +593,10 @@ export const components = {
   },
   MuiScopedCssBaseline: {
     styleOverrides: {
-      root: _ref20 => {
+      root: _ref21 => {
         let {
           theme
-        } = _ref20;
+        } = _ref21;
         return {
           abbr: {
             borderBottomWidth: "1px",
@@ -759,7 +781,7 @@ export const components = {
               marginBlockEnd: 0
             }
           },
-          "ul, ol": {
+          "ul:not([class]), ol:not([class])": {
             maxWidth: theme.mixins.maxWidth,
             marginBlockStart: 0,
             marginBlockEnd: theme.spacing(4),
@@ -774,7 +796,7 @@ export const components = {
               marginBlockEnd: 0
             }
           },
-          li: {
+          "li:not([class])": {
             marginBlockEnd: theme.spacing(2),
             paddingInlineStart: theme.spacing(1),
             "ul, ol": {
@@ -840,10 +862,10 @@ export const components = {
       scroll: "paper"
     },
     styleOverrides: {
-      paper: _ref21 => {
+      paper: _ref22 => {
         let {
           theme
-        } = _ref21;
+        } = _ref22;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} + (${theme.spacing(6)} * 2))`,
           boxShadow: "none",
@@ -854,10 +876,10 @@ export const components = {
   },
   MuiDialogActions: {
     styleOverrides: {
-      root: _ref22 => {
+      root: _ref23 => {
         let {
           theme
-        } = _ref22;
+        } = _ref23;
         return {
           paddingBlockStart: theme.spacing(4),
           paddingBlockEnd: theme.spacing(6),
@@ -868,11 +890,11 @@ export const components = {
   },
   MuiDialogContent: {
     styleOverrides: {
-      root: _ref23 => {
+      root: _ref24 => {
         let {
           theme,
           ownerState
-        } = _ref23;
+        } = _ref24;
         return {
           padding: 0,
           paddingBlock: theme.spacing(4),
@@ -891,10 +913,10 @@ export const components = {
       color: "text.primary"
     },
     styleOverrides: {
-      root: _ref24 => {
+      root: _ref25 => {
         let {
           theme
-        } = _ref24;
+        } = _ref25;
         return {
           marginBlockEnd: theme.spacing(5),
           "&:last-child": {
@@ -910,10 +932,10 @@ export const components = {
       variant: "h5"
     },
     styleOverrides: {
-      root: _ref25 => {
+      root: _ref26 => {
         let {
           theme
-        } = _ref25;
+        } = _ref26;
         return {
           display: "flex",
           justifyContent: "space-between",
@@ -932,11 +954,11 @@ export const components = {
       margin: "normal"
     },
     styleOverrides: {
-      root: _ref26 => {
+      root: _ref27 => {
         let {
           ownerState,
           theme
-        } = _ref26;
+        } = _ref27;
         return {
           width: "100%",
           maxWidth: "32rem",
@@ -963,11 +985,11 @@ export const components = {
   },
   MuiFormControlLabel: {
     styleOverrides: {
-      root: _ref27 => {
+      root: _ref28 => {
         let {
           theme,
           ownerState
-        } = _ref27;
+        } = _ref28;
         return {
           gap: theme.spacing(2),
           marginInlineStart: 0,
@@ -1009,10 +1031,10 @@ export const components = {
       variant: "standard"
     },
     styleOverrides: {
-      root: _ref28 => {
+      root: _ref29 => {
         let {
           theme
-        } = _ref28;
+        } = _ref29;
         return {
           fontSize: theme.typography.subtitle1.fontSize,
           lineHeight: "1.33333333",
@@ -1032,10 +1054,10 @@ export const components = {
   },
   MuiFormLabel: {
     styleOverrides: {
-      root: _ref29 => {
+      root: _ref30 => {
         let {
           theme
-        } = _ref29;
+        } = _ref30;
         return {
           color: theme.palette.text.primary,
           lineHeight: theme.typography.ui.lineHeight,
@@ -1051,18 +1073,18 @@ export const components = {
   },
   MuiIconButton: {
     styleOverrides: {
-      edgeEnd: _ref30 => {
+      edgeEnd: _ref31 => {
         let {
           theme
-        } = _ref30;
+        } = _ref31;
         return {
           marginInlineEnd: theme.spacing(1)
         };
       },
-      root: _ref31 => {
+      root: _ref32 => {
         let {
           theme
-        } = _ref31;
+        } = _ref32;
         return {
           padding: theme.spacing(1),
           fontSize: theme.typography.body1.fontSize,
@@ -1107,11 +1129,11 @@ export const components = {
       variant: "outlined"
     },
     styleOverrides: {
-      root: _ref32 => {
+      root: _ref33 => {
         let {
           theme,
           ownerState
-        } = _ref32;
+        } = _ref33;
         return {
           display: "flex",
           minWidth: "1.25em",
@@ -1139,11 +1161,11 @@ export const components = {
       required: true
     },
     styleOverrides: {
-      root: _ref33 => {
+      root: _ref34 => {
         let {
           ownerState,
           theme
-        } = _ref33;
+        } = _ref34;
         return { ...theme.typography.body1,
           flex: "1",
           width: "auto",
@@ -1188,10 +1210,10 @@ export const components = {
           }
         };
       },
-      input: _ref34 => {
+      input: _ref35 => {
         let {
           theme
-        } = _ref34;
+        } = _ref35;
         return {
           boxSizing: "border-box",
           height: "auto",
@@ -1221,10 +1243,10 @@ export const components = {
       shrink: false
     },
     styleOverrides: {
-      root: _ref35 => {
+      root: _ref36 => {
         let {
           ownerState
-        } = _ref35;
+        } = _ref36;
         return {
           display: "flex",
           justifyContent: "space-between",
@@ -1246,10 +1268,10 @@ export const components = {
   },
   MuiLink: {
     styleOverrides: {
-      root: _ref36 => {
+      root: _ref37 => {
         let {
           theme
-        } = _ref36;
+        } = _ref37;
         return {
           color: theme.palette.primary.main,
           textDecoration: "underline",
@@ -1292,10 +1314,10 @@ export const components = {
       props: {
         variant: "monochrome"
       },
-      style: _ref37 => {
+      style: _ref38 => {
         let {
           theme
-        } = _ref37;
+        } = _ref38;
         return {
           color: theme.palette.text.primary,
           textDecoration: "underline",
@@ -1324,14 +1346,15 @@ export const components = {
   },
   MuiListSubheader: {
     styleOverrides: {
-      root: _ref38 => {
+      root: _ref39 => {
         let {
           theme
-        } = _ref38;
+        } = _ref39;
         return {
           paddingBlock: theme.spacing(2),
           paddingInline: theme.spacing(4),
           fontSize: theme.typography.caption.fontSize,
+          fontWeight: theme.typography.fontWeightBold,
           lineHeight: theme.typography.caption.lineHeight,
           color: theme.palette.text.secondary,
           textTransform: "uppercase"
@@ -1341,24 +1364,66 @@ export const components = {
   },
   MuiMenuItem: {
     styleOverrides: {
-      root: _ref39 => {
+      root: _ref40 => {
         let {
-          theme
-        } = _ref39;
+          theme,
+          ownerState
+        } = _ref40;
         return {
-          justifyContent: "space-between",
           gap: theme.spacing(2),
-          "&.Mui-selected": {
+          minHeight: "unset",
+          paddingBlock: theme.spacing(3),
+          "&:hover": {
+            textDecoration: "none",
+            backgroundColor: theme.palette.grey[100],
+            "@media (hover: none)": {
+              backgroundColor: "transparent"
+            }
+          },
+          [`&.${menuItemClasses.root}-destructive`]: {
+            color: theme.palette.error.main
+          },
+          [`&.${menuItemClasses.selected}`]: {
             backgroundColor: "transparent",
             color: theme.palette.primary.main,
             "&:hover": {
-              backgroundColor: theme.palette.primary.lighter
+              backgroundColor: theme.palette.primary.lighter,
+              "@media (hover: none)": {
+                backgroundColor: `rgba(${theme.palette.primary.main} / ${theme.palette.action.selectedOpacity})`
+              }
             }
+          },
+          ...(!ownerState.disableGutters && {
+            paddingInline: theme.spacing(4)
+          }),
+          ...(ownerState.divider && {
+            borderBlockEnd: `1px solid ${theme.palette.divider}`
+          }),
+          [`&.${menuItemClasses.disabled}`]: {
+            opacity: 1,
+            color: theme.palette.text.disabled
+          },
+          [`& + .${dividerClasses.root}`]: {
+            marginBlock: theme.spacing(1)
+          },
+          [`& .${listItemTextClasses.root}`]: {
+            marginBlock: 0
+          },
+          [`& .${listItemIconClasses.root}`]: {
+            minWidth: "unset"
           }
         };
       }
     }
   },
+  MuiListItemIcon: {
+    styleOverrides: {
+      root: {
+        minWidth: "unset",
+        color: "inherit"
+      }
+    }
+  },
   MuiNativeSelect: {
     defaultProps: {
       variant: "standard"
@@ -1369,10 +1434,10 @@ export const components = {
           backgroundColor: "transparent"
         }
       },
-      icon: _ref40 => {
+      icon: _ref41 => {
         let {
           theme
-        } = _ref40;
+        } = _ref41;
         return {
           insetInlineEnd: theme.spacing(3),
           color: theme.palette.text.primary
@@ -1382,12 +1447,15 @@ export const components = {
   },
   MuiPopover: {
     styleOverrides: {
-      paper: _ref41 => {
+      paper: _ref42 => {
         let {
           theme
-        } = _ref41;
+        } = _ref42;
         return {
-          marginBlockStart: theme.spacing(1)
+          marginBlockStart: theme.spacing(1),
+          borderWidth: theme.mixins.borderWidth,
+          borderStyle: theme.mixins.borderStyle,
+          borderColor: theme.palette.grey[200]
         };
       }
     }
@@ -1397,10 +1465,10 @@ export const components = {
       size: "small"
     },
     styleOverrides: {
-      root: _ref42 => {
+      root: _ref43 => {
         let {
           theme
-        } = _ref42;
+        } = _ref43;
         return {
           "&:hover": {
             backgroundColor: "transparent"
@@ -1436,10 +1504,10 @@ export const components = {
       IconComponent: ChevronDownIcon
     },
     styleOverrides: {
-      select: _ref43 => {
+      select: _ref44 => {
         let {
           theme
-        } = _ref43;
+        } = _ref44;
         return {
           paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
           paddingInline: theme.spacing(3),
@@ -1455,10 +1523,10 @@ export const components = {
           }
         };
       },
-      icon: _ref44 => {
+      icon: _ref45 => {
         let {
           theme
-        } = _ref44;
+        } = _ref45;
         return {
           insetInlineEnd: theme.spacing(3),
           color: theme.palette.text.primary
@@ -1472,10 +1540,10 @@ export const components = {
       color: "inherit"
     },
     styleOverrides: {
-      root: _ref45 => {
+      root: _ref46 => {
         let {
           theme
-        } = _ref45;
+        } = _ref46;
         return {
           fontSize: `${theme.typography.ui.lineHeight}rem`
         };
@@ -1487,11 +1555,11 @@ export const components = {
       iconPosition: "start"
     },
     styleOverrides: {
-      root: _ref46 => {
+      root: _ref47 => {
         let {
           theme,
           ownerState
-        } = _ref46;
+        } = _ref47;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
           minWidth: "unset",
@@ -1552,11 +1620,11 @@ export const components = {
   },
   MuiTable: {
     styleOverrides: {
-      root: _ref47 => {
+      root: _ref48 => {
         let {
           theme,
           ownerState
-        } = _ref47;
+        } = _ref48;
         return {
           display: "table",
           width: "auto",
@@ -1588,11 +1656,11 @@ export const components = {
   },
   MuiTableCell: {
     styleOverrides: {
-      root: _ref48 => {
+      root: _ref49 => {
         let {
           theme,
           ownerState
-        } = _ref48;
+        } = _ref49;
         return { ...theme.typography.body1,
           maxWidth: theme.mixins.maxWidth,
           borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
@@ -1671,10 +1739,10 @@ export const components = {
       component: "figure"
     },
     styleOverrides: {
-      root: _ref49 => {
+      root: _ref50 => {
         let {
           theme
-        } = _ref49;
+        } = _ref50;
         return {
           width: "unset",
           maxWidth: "100%",
@@ -1691,10 +1759,10 @@ export const components = {
   },
   MuiTableRow: {
     styleOverrides: {
-      root: _ref50 => {
+      root: _ref51 => {
         let {
           theme
-        } = _ref50;
+        } = _ref51;
         return {
           verticalAlign: "unset",
           [`&.${tableRowClasses.root}:hover`]: {
@@ -1715,10 +1783,10 @@ export const components = {
       IconComponent: ArrowDownIcon
     },
     styleOverrides: {
-      root: _ref51 => {
+      root: _ref52 => {
         let {
           theme
-        } = _ref51;
+        } = _ref52;
         return {
           cursor: "pointer",
           display: "inline-flex",
@@ -1747,11 +1815,11 @@ export const components = {
           }
         };
       },
-      icon: _ref52 => {
+      icon: _ref53 => {
         let {
           theme,
           ownerState
-        } = _ref52;
+        } = _ref53;
         return {
           fontSize: "inherit",
           marginInlineEnd: 0,
@@ -1780,19 +1848,19 @@ export const components = {
   },
   MuiTabs: {
     styleOverrides: {
-      root: _ref53 => {
+      root: _ref54 => {
         let {
           theme
-        } = _ref53;
+        } = _ref54;
         return {
           minHeight: "unset",
           marginBottom: theme.spacing(5)
         };
       },
-      flexContainer: _ref54 => {
+      flexContainer: _ref55 => {
         let {
           theme
-        } = _ref54;
+        } = _ref55;
         return {
           gap: theme.spacing(5),
           borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.divider}`
@@ -1808,11 +1876,11 @@ export const components = {
       placement: "top"
     },
     styleOverrides: {
-      tooltip: _ref55 => {
+      tooltip: _ref56 => {
         let {
           theme,
           ownerState
-        } = _ref55;
+        } = _ref56;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
           paddingBlock: theme.spacing(2),
@@ -1872,10 +1940,10 @@ export const components = {
           }
         };
       },
-      arrow: _ref56 => {
+      arrow: _ref57 => {
         let {
           theme
-        } = _ref56;
+        } = _ref57;
         return {
           color: theme.palette.grey[900],
           "&::before": {
@@ -1914,10 +1982,10 @@ export const components = {
       }
     },
     styleOverrides: {
-      paragraph: _ref57 => {
+      paragraph: _ref58 => {
         let {
           theme
-        } = _ref57;
+        } = _ref58;
         return {
           marginBottom: theme.spacing(4)
         };