@okta/odyssey-react-mui 0.15.2 → 0.16.1

package/dist/{themes/odyssey → theme}/components.js

@@ -9,14 +9,15 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { outlinedInputClasses } from "@mui/material/OutlinedInput";
+import { dialogActionsClasses } from "@mui/material/DialogActions";
+import { inputBaseClasses } from "@mui/material/InputBase";
 import { tableBodyClasses } from "@mui/material/TableBody";
 import { tableCellClasses } from "@mui/material/TableCell";
 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, CheckCircleFilledIcon, InformationCircleFilledIcon } from "../../components/Icon/index.js";
+import { AlertTriangleFilledIcon, ArrowDownIcon, CheckCircleFilledIcon, InformationCircleFilledIcon } from "../iconDictionary/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const components = {
   MuiAlert: {
@@ -145,6 +146,13 @@ export const components = {
       }
     }
   },
+  MuiBackdrop: {
+    styleOverrides: {
+      root: {
+        backgroundColor: "rgba(29,29,33,0.75)"
+      }
+    }
+  },
   MuiButton: {
     defaultProps: {
       variant: "primary",
@@ -443,16 +451,108 @@ export const components = {
       }
     }
   },
+  MuiDialog: {
+    defaultProps: {
+      scroll: "paper"
+    },
+    styleOverrides: {
+      paper: _ref17 => {
+        let {
+          theme
+        } = _ref17;
+        return {
+          maxWidth: `calc(${theme.mixins.maxWidth} + (${theme.spacing(6)} * 2))`,
+          boxShadow: "none",
+          filter: "drop-shadow(0px 1px 4px rgba(29, 29, 33, 0.08)) drop-shadow(0px 4px 10px rgba(29, 29, 33, 0.08)) drop-shadow(0px 8px 30px rgba(29, 29, 33, 0.1))"
+        };
+      }
+    }
+  },
+  MuiDialogActions: {
+    styleOverrides: {
+      root: _ref18 => {
+        let {
+          theme
+        } = _ref18;
+        return {
+          paddingBlockStart: theme.spacing(4),
+          paddingBlockEnd: theme.spacing(6),
+          paddingInline: theme.spacing(6)
+        };
+      }
+    }
+  },
+  MuiDialogContent: {
+    styleOverrides: {
+      root: _ref19 => {
+        let {
+          theme,
+          ownerState
+        } = _ref19;
+        return {
+          padding: 0,
+          paddingBlock: theme.spacing(4),
+          paddingInline: theme.spacing(6),
+          ...(ownerState.dividers === false && {
+            [`& + .${dialogActionsClasses.root}`]: {
+              paddingBlockStart: theme.spacing(4)
+            }
+          })
+        };
+      }
+    }
+  },
+  MuiDialogContentText: {
+    defaultProps: {
+      color: "text.primary"
+    },
+    styleOverrides: {
+      root: _ref20 => {
+        let {
+          theme
+        } = _ref20;
+        return {
+          marginBlockEnd: theme.spacing(5),
+          "&:last-child": {
+            marginBlockEnd: "0"
+          }
+        };
+      }
+    }
+  },
+  MuiDialogTitle: {
+    defaultProps: {
+      component: "h1",
+      variant: "h5"
+    },
+    styleOverrides: {
+      root: _ref21 => {
+        let {
+          theme
+        } = _ref21;
+        return {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBlockEnd: 0,
+          padding: 0,
+          paddingBlockStart: theme.spacing(5),
+          paddingBlockEnd: theme.spacing(4),
+          paddingInline: theme.spacing(6)
+        };
+      }
+    }
+  },
   MuiFormControl: {
     defaultProps: {
       margin: "normal"
     },
     styleOverrides: {
-      root: _ref17 => {
+      root: _ref22 => {
         let {
           ownerState,
           theme
-        } = _ref17;
+        } = _ref22;
         return {
           width: "100%",
           maxWidth: "32rem",
@@ -479,11 +579,11 @@ export const components = {
   },
   MuiFormControlLabel: {
     styleOverrides: {
-      root: _ref18 => {
+      root: _ref23 => {
         let {
           theme,
           ownerState
-        } = _ref18;
+        } = _ref23;
         return {
           gap: theme.spacing(2),
           marginLeft: 0,
@@ -525,11 +625,12 @@ export const components = {
       variant: "standard"
     },
     styleOverrides: {
-      root: _ref19 => {
+      root: _ref24 => {
         let {
           theme
-        } = _ref19;
+        } = _ref24;
         return {
+          fontSize: theme.typography.subtitle1.fontSize,
           lineHeight: "1.33333333",
           marginTop: theme.spacing(2),
           ".MuiFormLabel-root + &": {
@@ -546,10 +647,10 @@ export const components = {
   },
   MuiFormLabel: {
     styleOverrides: {
-      root: _ref20 => {
+      root: _ref25 => {
         let {
           theme
-        } = _ref20;
+        } = _ref25;
         return {
           color: theme.palette.text.primary,
           lineHeight: "1.14285714",
@@ -565,10 +666,10 @@ export const components = {
   },
   MuiIconButton: {
     styleOverrides: {
-      root: _ref21 => {
+      root: _ref26 => {
         let {
           theme
-        } = _ref21;
+        } = _ref26;
         return {
           padding: theme.spacing(1),
           fontSize: theme.typography.body1.fontSize,
@@ -596,44 +697,133 @@ export const components = {
       }
     }
   },
+  MuiInput: {
+    defaultProps: {
+      disableUnderline: true
+    },
+    styleOverrides: {
+      root: {
+        "label + &": {
+          marginTop: 0
+        }
+      }
+    }
+  },
   MuiInputAdornment: {
     defaultProps: {
       variant: "outlined"
     },
     styleOverrides: {
-      root: _ref22 => {
+      root: _ref27 => {
         let {
+          theme,
           ownerState
-        } = _ref22;
+        } = _ref27;
         return {
           display: "flex",
+          minWidth: "1em",
+          maxHeight: "unset",
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          color: theme.palette.action.active,
           ...(ownerState.position === "start" && {
-            marginRight: 0
+            marginInlineEnd: theme.spacing(2)
           }),
           ...(ownerState.position === "end" && {
-            marginLeft: 0
+            marginInlineStart: theme.spacing(2)
+          }),
+          ...(ownerState.disablePointerEvents === true && {
+            pointerEvents: "none"
           })
         };
       }
     }
   },
   MuiInputBase: {
+    defaultProps: {
+      minRows: 3,
+      required: true
+    },
     styleOverrides: {
-      root: _ref23 => {
+      root: _ref28 => {
         let {
           ownerState,
           theme
-        } = _ref23;
-        return {
+        } = _ref28;
+        return { ...theme.typography.body1,
+          flex: "1",
+          width: "auto",
+          color: theme.palette.text.primary,
           lineHeight: "1.14285714",
+          borderWidth: theme.mixins.borderWidth,
+          borderStyle: theme.mixins.borderStyle,
+          borderRadius: theme.mixins.borderRadius,
+          borderColor: theme.palette.grey[500],
+          paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
+          paddingInline: theme.spacing(3),
+          ...(ownerState.multiline && {
+            paddingBlock: theme.spacing(3),
+            paddingInline: theme.spacing(3),
+            ...(ownerState.size === "small" && {
+              paddingBlock: theme.spacing(3),
+              paddingInline: theme.spacing(3)
+            })
+          }),
+          ...(ownerState.fullWidth && {
+            width: "100%"
+          }),
           ...(ownerState.readOnly === true && {
             backgroundColor: theme.palette.grey[50]
-          })
+          }),
+          [`&:hover`]: {
+            borderColor: theme.palette.grey[900]
+          },
+          [`&.${inputBaseClasses.focused}`]: {
+            borderColor: theme.palette.primary.main,
+            outlineColor: theme.palette.primary.main,
+            outlineOffset: 0,
+            outlineStyle: "solid",
+            outlineWidth: "1px"
+          },
+          [`&.${inputBaseClasses.error}`]: {
+            borderColor: theme.palette.error.main
+          },
+          [`&.${inputBaseClasses.error}:hover`]: {
+            borderColor: theme.palette.error.dark
+          },
+          [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: {
+            borderColor: theme.palette.error.main,
+            outlineColor: theme.palette.error.main
+          },
+          [`&.${inputBaseClasses.disabled}`]: {
+            color: theme.palette.text.disabled,
+            borderColor: theme.palette.action.disabled,
+            pointerEvents: "auto",
+            backgroundColor: theme.palette.grey[50],
+            cursor: "not-allowed"
+          }
         };
       },
-      input: {
-        boxSizing: "border-box",
-        height: "auto"
+      input: _ref29 => {
+        let {
+          theme
+        } = _ref29;
+        return {
+          boxSizing: "border-box",
+          height: "auto",
+          paddingBlock: 0,
+          paddingInline: 0,
+          [`.${inputBaseClasses.disabled} &`]: {
+            pointerEvents: "auto",
+            cursor: "not-allowed"
+          },
+          [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: {
+            "&::placeholder": {
+              color: theme.palette.text.secondary,
+              opacity: "1 !important"
+            }
+          }
+        };
       }
     }
   },
@@ -643,11 +833,14 @@ export const components = {
       shrink: false
     },
     styleOverrides: {
-      root: _ref24 => {
+      root: _ref30 => {
         let {
           ownerState
-        } = _ref24;
-        return { ...(ownerState.formControl && {
+        } = _ref30;
+        return {
+          display: "flex",
+          justifyContent: "space-between",
+          ...(ownerState.formControl && {
             position: "initial",
             transform: "none"
           }),
@@ -665,10 +858,10 @@ export const components = {
   },
   MuiLink: {
     styleOverrides: {
-      root: _ref25 => {
+      root: _ref31 => {
         let {
           theme
-        } = _ref25;
+        } = _ref31;
         return {
           color: theme.palette.primary.main,
           textDecoration: "none",
@@ -711,10 +904,10 @@ export const components = {
       props: {
         variant: "monochrome"
       },
-      style: _ref26 => {
+      style: _ref32 => {
         let {
           theme
-        } = _ref26;
+        } = _ref32;
         return {
           color: theme.palette.text.primary,
           textDecoration: "underline",
@@ -736,99 +929,28 @@ export const components = {
   },
   MuiNativeSelect: {
     defaultProps: {
-      variant: "outlined"
+      variant: "standard"
     },
     styleOverrides: {
-      icon: _ref27 => {
+      icon: _ref33 => {
         let {
           theme
-        } = _ref27;
+        } = _ref33;
         return {
           color: theme.palette.text.primary
         };
       }
     }
   },
-  MuiOutlinedInput: {
-    defaultProps: {
-      notched: false,
-      minRows: 3
-    },
-    styleOverrides: {
-      root: _ref28 => {
-        let {
-          ownerState,
-          theme
-        } = _ref28;
-        return {
-          [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-            borderColor: theme.palette.text.primary
-          },
-          [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
-            borderColor: theme.palette.primary.main,
-            borderWidth: 2
-          },
-          [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
-            borderColor: theme.palette.error.main
-          },
-          [`&.${outlinedInputClasses.error}:hover .${outlinedInputClasses.notchedOutline}`]: {
-            borderColor: theme.palette.error.dark
-          },
-          [`&.${outlinedInputClasses.error}.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
-            borderColor: theme.palette.error.main
-          },
-          [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
-            borderColor: theme.palette.action.disabled,
-            pointerEvents: "auto"
-          },
-          [`&.${outlinedInputClasses.disabled}`]: {
-            backgroundColor: theme.palette.grey[50],
-            cursor: "not-allowed"
-          },
-          ...(ownerState.startAdornment && {
-            paddingLeft: theme.spacing(3)
-          }),
-          ...(ownerState.endAdornment && {
-            paddingRight: theme.spacing(3)
-          }),
-          ...(ownerState.multiline && {
-            padding: "0",
-            ...(ownerState.size === "small" && {
-              padding: "0"
-            })
-          })
-        };
-      },
-      input: _ref29 => {
-        let {
-          theme
-        } = _ref29;
-        return {
-          padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
-          borderWidth: theme.mixins.borderWidth,
-          borderStyle: theme.mixins.borderStyle,
-          borderColor: "transparent"
-        };
-      },
-      notchedOutline: _ref30 => {
-        let {
-          theme
-        } = _ref30;
-        return {
-          borderColor: theme.palette.grey[500]
-        };
-      }
-    }
-  },
   MuiRadio: {
     defaultProps: {
       size: "small"
     },
     styleOverrides: {
-      root: _ref31 => {
+      root: _ref34 => {
         let {
           theme
-        } = _ref31;
+        } = _ref34;
         return {
           "&:hover": {
             backgroundColor: "transparent"
@@ -858,6 +980,21 @@ export const components = {
       }
     }
   },
+  MuiSelect: {
+    defaultProps: {
+      variant: "standard"
+    },
+    styleOverrides: {
+      icon: _ref35 => {
+        let {
+          theme
+        } = _ref35;
+        return {
+          color: theme.palette.text.primary
+        };
+      }
+    }
+  },
   MuiSvgIcon: {
     defaultProps: {
       fontSize: "inherit",
@@ -869,11 +1006,11 @@ export const components = {
       iconPosition: "start"
     },
     styleOverrides: {
-      root: _ref32 => {
+      root: _ref36 => {
         let {
           theme,
           ownerState
-        } = _ref32;
+        } = _ref36;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
           minWidth: "unset",
@@ -934,11 +1071,11 @@ export const components = {
   },
   MuiTable: {
     styleOverrides: {
-      root: _ref33 => {
+      root: _ref37 => {
         let {
           theme,
           ownerState
-        } = _ref33;
+        } = _ref37;
         return {
           display: "table",
           width: "auto",
@@ -961,11 +1098,11 @@ export const components = {
   },
   MuiTableCell: {
     styleOverrides: {
-      root: _ref34 => {
+      root: _ref38 => {
         let {
           theme,
           ownerState
-        } = _ref34;
+        } = _ref38;
         return { ...theme.typography.body1,
           maxWidth: theme.mixins.maxWidth,
           borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
@@ -1041,10 +1178,10 @@ export const components = {
   },
   MuiTableContainer: {
     styleOverrides: {
-      root: _ref35 => {
+      root: _ref39 => {
         let {
           theme
-        } = _ref35;
+        } = _ref39;
         return {
           width: "unset",
           maxWidth: "100%",
@@ -1061,10 +1198,10 @@ export const components = {
   },
   MuiTableRow: {
     styleOverrides: {
-      root: _ref36 => {
+      root: _ref40 => {
         let {
           theme
-        } = _ref36;
+        } = _ref40;
         return {
           verticalAlign: "unset",
           [`&.${tableRowClasses.root}:hover`]: {
@@ -1085,10 +1222,10 @@ export const components = {
       IconComponent: ArrowDownIcon
     },
     styleOverrides: {
-      root: _ref37 => {
+      root: _ref41 => {
         let {
           theme
-        } = _ref37;
+        } = _ref41;
         return {
           cursor: "pointer",
           display: "inline-flex",
@@ -1117,11 +1254,11 @@ export const components = {
           }
         };
       },
-      icon: _ref38 => {
+      icon: _ref42 => {
         let {
           theme,
           ownerState
-        } = _ref38;
+        } = _ref42;
         return {
           fontSize: "inherit",
           marginRight: 0,
@@ -1150,19 +1287,19 @@ export const components = {
   },
   MuiTabs: {
     styleOverrides: {
-      root: _ref39 => {
+      root: _ref43 => {
         let {
           theme
-        } = _ref39;
+        } = _ref43;
         return {
           minHeight: "unset",
           marginBottom: theme.spacing(5)
         };
       },
-      flexContainer: _ref40 => {
+      flexContainer: _ref44 => {
         let {
           theme
-        } = _ref40;
+        } = _ref44;
         return {
           gap: theme.spacing(5),
           borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.divider}`
@@ -1178,11 +1315,11 @@ export const components = {
       placement: "top"
     },
     styleOverrides: {
-      tooltip: _ref41 => {
+      tooltip: _ref45 => {
         let {
           theme,
           ownerState
-        } = _ref41;
+        } = _ref45;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
           paddingBlock: theme.spacing(2),
@@ -1242,10 +1379,10 @@ export const components = {
           }
         };
       },
-      arrow: _ref42 => {
+      arrow: _ref46 => {
         let {
           theme
-        } = _ref42;
+        } = _ref46;
         return {
           color: theme.palette.grey[900],
           "&::before": {
@@ -1285,19 +1422,19 @@ export const components = {
       }
     },
     styleOverrides: {
-      paragraph: _ref43 => {
+      paragraph: _ref47 => {
         let {
           theme
-        } = _ref43;
+        } = _ref47;
         return {
           marginBottom: theme.spacing(4)
         };
       },
-      root: _ref44 => {
+      root: _ref48 => {
         let {
           theme,
           ownerState
-        } = _ref44;
+        } = _ref48;
         return { ...(ownerState.variant === "kbd" && {
             display: "inline-block",
             minWidth: `calc(${theme.typography.subtitle1.fontSize} * ${theme.typography.h5.lineHeight})`,