@okta/odyssey-react-mui 1.6.0 → 1.6.2

package/dist/theme/components.js

@@ -39,7 +39,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 export const components = _ref => {
   let {
     odysseyTokens,
-    shadowRootElement
+    shadowDomElement
   } = _ref;
   return {
     MuiAccordion: {
@@ -274,16 +274,33 @@ export const components = _ref => {
     },
     MuiAlertTitle: {
       styleOverrides: {
-        root: {
-          marginBlockStart: 0,
-          marginBlockEnd: odysseyTokens.Spacing2,
-          lineHeight: odysseyTokens.TypographyLineHeightHeading6,
-          fontSize: odysseyTokens.TypographySizeHeading6,
-          fontWeight: odysseyTokens.TypographyWeightHeading,
-          fontFamily: odysseyTokens.TypographyFamilyHeading,
-          [`&:last-child`]: {
-            marginBlockEnd: 0
-          }
+        root: _ref6 => {
+          let {
+            ownerState
+          } = _ref6;
+          return {
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing2,
+            lineHeight: odysseyTokens.TypographyLineHeightHeading6,
+            fontSize: odysseyTokens.TypographySizeHeading6,
+            fontWeight: odysseyTokens.TypographyWeightHeading,
+            fontFamily: odysseyTokens.TypographyFamilyHeading,
+            ...(ownerState.severity === "info" && {
+              color: odysseyTokens.PalettePrimaryDark
+            }),
+            ...(ownerState.severity === "error" && {
+              color: odysseyTokens.PaletteDangerDarker
+            }),
+            ...(ownerState.severity === "success" && {
+              color: odysseyTokens.PaletteSuccessDarker
+            }),
+            ...(ownerState.severity === "warning" && {
+              color: odysseyTokens.PaletteWarningDarker
+            }),
+            [`&:last-child`]: {
+              marginBlockEnd: 0
+            }
+          };
         }
       }
     },
@@ -317,10 +334,10 @@ export const components = _ref => {
           marginRight: "unset",
           padding: odysseyTokens.Spacing1
         },
-        endAdornment: _ref6 => {
+        endAdornment: _ref7 => {
           let {
             ownerState
-          } = _ref6;
+          } = _ref7;
           return {
             display: "flex",
             gap: odysseyTokens.Spacing1,
@@ -382,10 +399,10 @@ export const components = _ref => {
           background: "transparent",
           paddingBlockStart: odysseyTokens.Spacing1
         },
-        inputRoot: _ref7 => {
+        inputRoot: _ref8 => {
           let {
             ownerState
-          } = _ref7;
+          } = _ref8;
           return {
             ...(ownerState.readOnly === true && {
               backgroundColor: odysseyTokens.HueNeutral50,
@@ -399,10 +416,10 @@ export const components = _ref => {
     },
     MuiBackdrop: {
       styleOverrides: {
-        root: _ref8 => {
+        root: _ref9 => {
           let {
             ownerState
-          } = _ref8;
+          } = _ref9;
           return {
             backgroundColor: "rgba(29,29,33,0.75)",
             ...(ownerState.invisible === true && {
@@ -449,10 +466,10 @@ export const components = _ref => {
         disableElevation: true
       },
       styleOverrides: {
-        root: _ref9 => {
+        root: _ref10 => {
           let {
             ownerState
-          } = _ref9;
+          } = _ref10;
           return {
             minWidth: "unset",
             paddingBlock: odysseyTokens.Spacing3,
@@ -598,10 +615,10 @@ export const components = _ref => {
             })
           };
         },
-        endIcon: _ref10 => {
+        endIcon: _ref11 => {
           let {
             ownerState
-          } = _ref10;
+          } = _ref11;
           return {
             display: "inline-flex",
             margin: 0,
@@ -611,10 +628,10 @@ export const components = _ref => {
             })
           };
         },
-        startIcon: _ref11 => {
+        startIcon: _ref12 => {
           let {
             ownerState
-          } = _ref11;
+          } = _ref12;
           return {
             display: "inline-flex",
             margin: 0,
@@ -639,10 +656,10 @@ export const components = _ref => {
         indeterminateIcon: _jsx(SubtractIcon, {})
       },
       styleOverrides: {
-        root: _ref12 => {
+        root: _ref13 => {
           let {
             theme
-          } = _ref12;
+          } = _ref13;
           return {
             width: `${odysseyTokens.TypographyLineHeightUi}em`,
             height: `${odysseyTokens.TypographyLineHeightUi}em`,
@@ -716,10 +733,10 @@ export const components = _ref => {
         deleteIcon: _jsx(CloseCircleFilledIcon, {})
       },
       styleOverrides: {
-        root: _ref13 => {
+        root: _ref14 => {
           let {
             ownerState
-          } = _ref13;
+          } = _ref14;
           return {
             height: "auto",
             paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
@@ -738,7 +755,7 @@ export const components = _ref => {
             [`&.${chipClasses.disabled}`]: {
               opacity: 1,
               pointerEvents: "none",
-              backgroundColor: odysseyTokens.HueNeutral50,
+              backgroundColor: odysseyTokens.HueNeutral200,
               color: odysseyTokens.TypographyColorDisabled
             },
             ...(ownerState.clickable && {
@@ -841,7 +858,11 @@ export const components = _ref => {
           };
         },
         label: {
-          padding: 0
+          padding: 0,
+          [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+            color: odysseyTokens.TypographyColorDisabled,
+            WebkitTextFillColor: odysseyTokens.TypographyColorDisabled
+          }
         },
         deleteIcon: {
           WebkitTapHighlightColor: "transparent",
@@ -868,20 +889,20 @@ export const components = _ref => {
         variant: "indeterminate"
       },
       styleOverrides: {
-        root: _ref14 => {
+        root: _ref15 => {
           let {
             ownerState
-          } = _ref14;
+          } = _ref15;
           return {
             ...(ownerState.color !== "inherit" && {
               color: odysseyTokens.PalettePrimaryDark
             })
           };
         },
-        circle: _ref15 => {
+        circle: _ref16 => {
           let {
             ownerState
-          } = _ref15;
+          } = _ref16;
           return {
             ...(ownerState.variant === "indeterminate" && {
               strokeDasharray: "160%, 360%"
@@ -1210,10 +1231,10 @@ export const components = _ref => {
     },
     MuiDialogContent: {
       styleOverrides: {
-        root: _ref16 => {
+        root: _ref17 => {
           let {
             ownerState
-          } = _ref16;
+          } = _ref17;
           return {
             paddingBlock: 0,
             paddingInline: odysseyTokens.Spacing6,
@@ -1266,10 +1287,10 @@ export const components = _ref => {
         margin: "normal"
       },
       styleOverrides: {
-        root: _ref17 => {
+        root: _ref18 => {
           let {
             ownerState
-          } = _ref17;
+          } = _ref18;
           return {
             width: "100%",
             maxWidth: odysseyTokens.TypographyLineLengthMax,
@@ -1296,10 +1317,10 @@ export const components = _ref => {
     },
     MuiFormControlLabel: {
       styleOverrides: {
-        root: _ref18 => {
+        root: _ref19 => {
           let {
             ownerState
-          } = _ref18;
+          } = _ref19;
           return {
             gap: odysseyTokens.Spacing2,
             marginInlineStart: 0,
@@ -1404,10 +1425,10 @@ export const components = _ref => {
     },
     MuiInputAdornment: {
       styleOverrides: {
-        root: _ref19 => {
+        root: _ref20 => {
           let {
             ownerState
-          } = _ref19;
+          } = _ref20;
           return {
             display: "flex",
             minWidth: "1.25em",
@@ -1434,11 +1455,11 @@ export const components = _ref => {
         minRows: 3
       },
       styleOverrides: {
-        root: _ref20 => {
+        root: _ref21 => {
           let {
             ownerState,
             theme
-          } = _ref20;
+          } = _ref21;
           return {
             ...theme.typography.body1,
             flex: "1",
@@ -1529,10 +1550,10 @@ export const components = _ref => {
         shrink: false
       },
       styleOverrides: {
-        root: _ref21 => {
+        root: _ref22 => {
           let {
             ownerState
-          } = _ref21;
+          } = _ref22;
           return {
             display: "flex",
             justifyContent: "space-between",
@@ -1654,10 +1675,10 @@ export const components = _ref => {
     },
     MuiMenuItem: {
       styleOverrides: {
-        root: _ref22 => {
+        root: _ref23 => {
           let {
             ownerState
-          } = _ref22;
+          } = _ref23;
           return {
             gap: odysseyTokens.Spacing2,
             minHeight: "unset",
@@ -1722,7 +1743,7 @@ export const components = _ref => {
     },
     MuiModal: {
       defaultProps: {
-        container: shadowRootElement
+        container: shadowDomElement
       }
     },
     MuiNativeSelect: {
@@ -1757,7 +1778,7 @@ export const components = _ref => {
     },
     MuiPopover: {
       defaultProps: {
-        container: shadowRootElement
+        container: shadowDomElement
       },
       styleOverrides: {
         paper: {
@@ -1770,7 +1791,7 @@ export const components = _ref => {
     },
     MuiPopper: {
       defaultProps: {
-        container: shadowRootElement
+        container: shadowDomElement
       }
     },
     MuiRadio: {
@@ -1780,10 +1801,10 @@ export const components = _ref => {
         checkedIcon: _jsx(_Fragment, {})
       },
       styleOverrides: {
-        root: _ref23 => {
+        root: _ref24 => {
           let {
             theme
-          } = _ref23;
+          } = _ref24;
           return {
             width: `${odysseyTokens.TypographyLineHeightUi}em`,
             height: `${odysseyTokens.TypographyLineHeightUi}em`,
@@ -1906,10 +1927,10 @@ export const components = _ref => {
         color: "inherit"
       },
       styleOverrides: {
-        root: _ref24 => {
+        root: _ref25 => {
           let {
             ownerState
-          } = _ref24;
+          } = _ref25;
           return {
             fontSize: `${odysseyTokens.TypographyLineHeightUi}rem`,
             ...(ownerState.fontSize === "small" && {
@@ -1927,25 +1948,24 @@ export const components = _ref => {
         iconPosition: "start"
       },
       styleOverrides: {
-        root: _ref25 => {
+        root: _ref26 => {
           let {
             ownerState
-          } = _ref25;
+          } = _ref26;
           return {
             maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
             minWidth: "unset",
             minHeight: "unset",
-            padding: `${odysseyTokens.Spacing4} 0`,
+            padding: `${odysseyTokens.Spacing4} ${odysseyTokens.Spacing1}`,
+            fontSize: odysseyTokens.TypographySizeHeading6,
             fontFamily: odysseyTokens.TypographyFamilyHeading,
             lineHeight: odysseyTokens.TypographyLineHeightUi,
             overflow: "visible",
-            ...(ownerState.textColor === "inherit" && {
-              color: "inherit",
-              opacity: 1
-            }),
+            color: odysseyTokens.HueNeutral600,
+            opacity: 1,
             ...(ownerState.selected == true && {
               color: odysseyTokens.TypographyColorAction,
-              fontWeight: odysseyTokens.TypographyWeightBodyBold
+              fontWeight: odysseyTokens.TypographyWeightHeading
             }),
             ...(ownerState.disabled && {
               color: odysseyTokens.TypographyColorDisabled
@@ -1985,10 +2005,10 @@ export const components = _ref => {
     },
     MuiTable: {
       styleOverrides: {
-        root: _ref26 => {
+        root: _ref27 => {
           let {
             ownerState
-          } = _ref26;
+          } = _ref27;
           return {
             display: "table",
             width: "auto",
@@ -2020,11 +2040,11 @@ export const components = _ref => {
     },
     MuiTableCell: {
       styleOverrides: {
-        root: _ref27 => {
+        root: _ref28 => {
           let {
             theme,
             ownerState
-          } = _ref27;
+          } = _ref28;
           return {
             ...theme.typography.body1,
             maxWidth: odysseyTokens.TypographyLineLengthMax,
@@ -2165,11 +2185,11 @@ export const components = _ref => {
             }
           }
         },
-        icon: _ref28 => {
+        icon: _ref29 => {
           let {
             theme,
             ownerState
-          } = _ref28;
+          } = _ref29;
           return {
             fontSize: "inherit",
             marginInlineEnd: 0,
@@ -2219,10 +2239,10 @@ export const components = _ref => {
         placement: "top"
       },
       styleOverrides: {
-        tooltip: _ref29 => {
+        tooltip: _ref30 => {
           let {
             ownerState
-          } = _ref29;
+          } = _ref30;
           return {
             maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
             paddingBlock: odysseyTokens.Spacing2,