@okta/odyssey-react-mui 1.1.1 → 1.4.0

package/dist/theme/components.js

@@ -36,7 +36,11 @@ import { typographyClasses } from "@mui/material/Typography";
 import { ArrowDownIcon, CheckCircleFilledIcon, CheckIcon, ChevronDownIcon, CloseCircleFilledIcon, CloseIcon, DangerDiamondFilledIcon, InformationCircleFilledIcon, SubtractIcon, WarningFilledIcon } from "../icons.generated/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-export const components = odysseyTokens => {
+export const components = _ref => {
+  let {
+    odysseyTokens,
+    shadowRootElement
+  } = _ref;
   return {
     MuiAlert: {
       defaultProps: {
@@ -48,10 +52,10 @@ export const components = odysseyTokens => {
         }
       },
       styleOverrides: {
-        root: _ref => {
+        root: _ref2 => {
           let {
             ownerState
-          } = _ref;
+          } = _ref2;
           return {
             padding: odysseyTokens.Spacing4,
             gap: odysseyTokens.Spacing4,
@@ -122,10 +126,10 @@ export const components = odysseyTokens => {
             })
           };
         },
-        action: _ref2 => {
+        action: _ref3 => {
           let {
             ownerState
-          } = _ref2;
+          } = _ref3;
           return {
             ...(ownerState.variant === "banner" && {
               padding: 0,
@@ -142,10 +146,10 @@ export const components = odysseyTokens => {
             })
           };
         },
-        icon: _ref3 => {
+        icon: _ref4 => {
           let {
             ownerState
-          } = _ref3;
+          } = _ref4;
           return {
             marginInlineEnd: 0,
             padding: 0,
@@ -169,10 +173,10 @@ export const components = odysseyTokens => {
             }
           };
         },
-        message: _ref4 => {
+        message: _ref5 => {
           let {
             ownerState
-          } = _ref4;
+          } = _ref5;
           return {
             padding: 0,
             overflow: "visible",
@@ -228,10 +232,10 @@ export const components = odysseyTokens => {
           marginRight: "unset",
           padding: odysseyTokens.Spacing1
         },
-        endAdornment: _ref5 => {
+        endAdornment: _ref6 => {
           let {
             ownerState
-          } = _ref5;
+          } = _ref6;
           return {
             display: "flex",
             gap: odysseyTokens.Spacing1,
@@ -286,10 +290,10 @@ export const components = odysseyTokens => {
           padding: odysseyTokens.Spacing1,
           marginRight: "unset"
         },
-        inputRoot: _ref6 => {
+        inputRoot: _ref7 => {
           let {
             ownerState
-          } = _ref6;
+          } = _ref7;
           return {
             ...(ownerState.readOnly === true && {
               backgroundColor: odysseyTokens.HueNeutral50,
@@ -303,10 +307,10 @@ export const components = odysseyTokens => {
     },
     MuiBackdrop: {
       styleOverrides: {
-        root: _ref7 => {
+        root: _ref8 => {
           let {
             ownerState
-          } = _ref7;
+          } = _ref8;
           return {
             backgroundColor: "rgba(29,29,33,0.75)",
             ...(ownerState.invisible === true && {
@@ -316,16 +320,47 @@ export const components = odysseyTokens => {
         }
       }
     },
+    MuiBreadcrumbs: {
+      styleOverrides: {
+        li: {
+          fontSize: odysseyTokens.TypographySizeBody,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          "& > a, & > button": {
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            color: odysseyTokens.TypographyColorSubordinate,
+            display: "flex",
+            gap: odysseyTokens.Spacing1,
+            padding: odysseyTokens.Spacing1,
+            transitionProperty: "color, background-color",
+            transitionDuration: "100ms",
+            transitionTimingFunction: "linear",
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral200,
+              color: odysseyTokens.TypographyColorBody
+            },
+            "&:focus-visible": {
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px"
+            }
+          }
+        },
+        separator: {
+          color: odysseyTokens.BorderColorDisplay,
+          marginInline: odysseyTokens.Spacing1
+        }
+      }
+    },
     MuiButton: {
       defaultProps: {
         variant: "primary",
         disableElevation: true
       },
       styleOverrides: {
-        root: _ref8 => {
+        root: _ref9 => {
           let {
             ownerState
-          } = _ref8;
+          } = _ref9;
           return {
             minWidth: "unset",
             paddingBlock: odysseyTokens.Spacing3,
@@ -469,10 +504,10 @@ export const components = odysseyTokens => {
             })
           };
         },
-        endIcon: _ref9 => {
+        endIcon: _ref10 => {
           let {
             ownerState
-          } = _ref9;
+          } = _ref10;
           return {
             display: "inline-flex",
             margin: 0,
@@ -482,10 +517,10 @@ export const components = odysseyTokens => {
             })
           };
         },
-        startIcon: _ref10 => {
+        startIcon: _ref11 => {
           let {
             ownerState
-          } = _ref10;
+          } = _ref11;
           return {
             display: "inline-flex",
             margin: 0,
@@ -510,10 +545,10 @@ export const components = odysseyTokens => {
         indeterminateIcon: _jsx(SubtractIcon, {})
       },
       styleOverrides: {
-        root: _ref11 => {
+        root: _ref12 => {
           let {
             theme
-          } = _ref11;
+          } = _ref12;
           return {
             width: `${odysseyTokens.TypographyLineHeightUi}em`,
             height: `${odysseyTokens.TypographyLineHeightUi}em`,
@@ -587,10 +622,10 @@ export const components = odysseyTokens => {
         deleteIcon: _jsx(CloseCircleFilledIcon, {})
       },
       styleOverrides: {
-        root: _ref12 => {
+        root: _ref13 => {
           let {
             ownerState
-          } = _ref12;
+          } = _ref13;
           return {
             height: "auto",
             paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
@@ -645,10 +680,7 @@ export const components = odysseyTokens => {
                 height: ".64em",
                 marginInlineEnd: odysseyTokens.Spacing2,
                 borderRadius: "100%",
-                backgroundColor: "transparent",
-                borderColor: odysseyTokens.TypographyColorBody,
-                borderWidth: odysseyTokens.BorderWidthHeavy,
-                borderStyle: odysseyTokens.BorderStyleMain
+                backgroundColor: odysseyTokens.HueNeutral600
               },
               [`&.${chipClasses.colorError}`]: {
                 "&::before": {
@@ -742,20 +774,20 @@ export const components = odysseyTokens => {
         variant: "indeterminate"
       },
       styleOverrides: {
-        root: _ref13 => {
+        root: _ref14 => {
           let {
             ownerState
-          } = _ref13;
+          } = _ref14;
           return {
             ...(ownerState.color !== "inherit" && {
               color: odysseyTokens.PalettePrimaryDark
             })
           };
         },
-        circle: _ref14 => {
+        circle: _ref15 => {
           let {
             ownerState
-          } = _ref14;
+          } = _ref15;
           return {
             ...(ownerState.variant === "indeterminate" && {
               strokeDasharray: "160%, 360%"
@@ -1083,10 +1115,10 @@ export const components = odysseyTokens => {
     },
     MuiDialogContent: {
       styleOverrides: {
-        root: _ref15 => {
+        root: _ref16 => {
           let {
             ownerState
-          } = _ref15;
+          } = _ref16;
           return {
             paddingBlock: 0,
             paddingInline: odysseyTokens.Spacing6,
@@ -1139,10 +1171,10 @@ export const components = odysseyTokens => {
         margin: "normal"
       },
       styleOverrides: {
-        root: _ref16 => {
+        root: _ref17 => {
           let {
             ownerState
-          } = _ref16;
+          } = _ref17;
           return {
             width: "100%",
             maxWidth: odysseyTokens.TypographyLineLengthMax,
@@ -1169,10 +1201,10 @@ export const components = odysseyTokens => {
     },
     MuiFormControlLabel: {
       styleOverrides: {
-        root: _ref17 => {
+        root: _ref18 => {
           let {
             ownerState
-          } = _ref17;
+          } = _ref18;
           return {
             gap: odysseyTokens.Spacing2,
             marginInlineStart: 0,
@@ -1277,10 +1309,10 @@ export const components = odysseyTokens => {
     },
     MuiInputAdornment: {
       styleOverrides: {
-        root: _ref18 => {
+        root: _ref19 => {
           let {
             ownerState
-          } = _ref18;
+          } = _ref19;
           return {
             display: "flex",
             minWidth: "1.25em",
@@ -1307,11 +1339,11 @@ export const components = odysseyTokens => {
         minRows: 3
       },
       styleOverrides: {
-        root: _ref19 => {
+        root: _ref20 => {
           let {
             ownerState,
             theme
-          } = _ref19;
+          } = _ref20;
           return {
             ...theme.typography.body1,
             flex: "1",
@@ -1402,10 +1434,10 @@ export const components = odysseyTokens => {
         shrink: false
       },
       styleOverrides: {
-        root: _ref20 => {
+        root: _ref21 => {
           let {
             ownerState
-          } = _ref20;
+          } = _ref21;
           return {
             display: "flex",
             justifyContent: "space-between",
@@ -1495,6 +1527,14 @@ export const components = odysseyTokens => {
         }
       }
     },
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: "unset",
+          color: "inherit"
+        }
+      }
+    },
     MuiListSubheader: {
       styleOverrides: {
         root: {
@@ -1519,10 +1559,10 @@ export const components = odysseyTokens => {
     },
     MuiMenuItem: {
       styleOverrides: {
-        root: _ref21 => {
+        root: _ref22 => {
           let {
             ownerState
-          } = _ref21;
+          } = _ref22;
           return {
             gap: odysseyTokens.Spacing2,
             minHeight: "unset",
@@ -1578,12 +1618,9 @@ export const components = odysseyTokens => {
         }
       }
     },
-    MuiListItemIcon: {
-      styleOverrides: {
-        root: {
-          minWidth: "unset",
-          color: "inherit"
-        }
+    MuiModal: {
+      defaultProps: {
+        container: shadowRootElement
       }
     },
     MuiNativeSelect: {
@@ -1604,6 +1641,9 @@ export const components = odysseyTokens => {
       }
     },
     MuiPopover: {
+      defaultProps: {
+        container: shadowRootElement
+      },
       styleOverrides: {
         paper: {
           marginBlockStart: odysseyTokens.Spacing1,
@@ -1613,6 +1653,11 @@ export const components = odysseyTokens => {
         }
       }
     },
+    MuiPopper: {
+      defaultProps: {
+        container: shadowRootElement
+      }
+    },
     MuiRadio: {
       defaultProps: {
         size: "small",
@@ -1620,10 +1665,10 @@ export const components = odysseyTokens => {
         checkedIcon: _jsx(_Fragment, {})
       },
       styleOverrides: {
-        root: _ref22 => {
+        root: _ref23 => {
           let {
             theme
-          } = _ref22;
+          } = _ref23;
           return {
             width: `${odysseyTokens.TypographyLineHeightUi}em`,
             height: `${odysseyTokens.TypographyLineHeightUi}em`,
@@ -1738,10 +1783,10 @@ export const components = odysseyTokens => {
         color: "inherit"
       },
       styleOverrides: {
-        root: _ref23 => {
+        root: _ref24 => {
           let {
             ownerState
-          } = _ref23;
+          } = _ref24;
           return {
             fontSize: `${odysseyTokens.TypographyLineHeightUi}rem`,
             ...(ownerState.fontSize === "small" && {
@@ -1759,10 +1804,10 @@ export const components = odysseyTokens => {
         iconPosition: "start"
       },
       styleOverrides: {
-        root: _ref24 => {
+        root: _ref25 => {
           let {
             ownerState
-          } = _ref24;
+          } = _ref25;
           return {
             maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
             minWidth: "unset",
@@ -1817,10 +1862,10 @@ export const components = odysseyTokens => {
     },
     MuiTable: {
       styleOverrides: {
-        root: _ref25 => {
+        root: _ref26 => {
           let {
             ownerState
-          } = _ref25;
+          } = _ref26;
           return {
             display: "table",
             width: "auto",
@@ -1852,11 +1897,11 @@ export const components = odysseyTokens => {
     },
     MuiTableCell: {
       styleOverrides: {
-        root: _ref26 => {
+        root: _ref27 => {
           let {
             theme,
             ownerState
-          } = _ref26;
+          } = _ref27;
           return {
             ...theme.typography.body1,
             maxWidth: odysseyTokens.TypographyLineLengthMax,
@@ -1997,11 +2042,11 @@ export const components = odysseyTokens => {
             }
           }
         },
-        icon: _ref27 => {
+        icon: _ref28 => {
           let {
             theme,
             ownerState
-          } = _ref27;
+          } = _ref28;
           return {
             fontSize: "inherit",
             marginInlineEnd: 0,
@@ -2051,10 +2096,10 @@ export const components = odysseyTokens => {
         placement: "top"
       },
       styleOverrides: {
-        tooltip: _ref28 => {
+        tooltip: _ref29 => {
           let {
             ownerState
-          } = _ref28;
+          } = _ref29;
           return {
             maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
             paddingBlock: odysseyTokens.Spacing2,