@okta/odyssey-react-mui 0.14.1 → 0.14.4

package/dist/themes/odyssey/components.js

@@ -10,129 +10,63 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 export const components = {
-  MuiCssBaseline: {
-    styleOverrides: {
-      boxSizing: "border-box"
-    }
-  },
-  MuiCircularProgress: {
-    defaultProps: {
-      size: "1.14285714rem",
-      thickness: 8,
-      color: "primary",
-      disableShrink: false,
-      variant: "indeterminate"
-    },
+  MuiAlert: {
     styleOverrides: {
       root: ({
-        ownerState
-      }) => ({ ...(ownerState.color !== "inherit" && {
-          color: "#00297a"
+        ownerState,
+        theme
+      }) => ({
+        padding: theme.spacing(4),
+        color: theme.palette.text.primary,
+        ...(ownerState.severity && {
+          backgroundColor: theme.palette[ownerState.severity].lighter,
+          borderColor: theme.palette[ownerState.severity].light
+        }),
+        ...(ownerState.variant === "infobox" && {
+          borderStyle: "solid",
+          borderWidth: 1,
+          "&:not(:last-child)": {
+            marginBottom: theme.spacing(4)
+          }
+        }),
+        ...(ownerState.variant === "banner" && {
+          borderWidth: 0
         })
       }),
-      circle: ({
-        ownerState
-      }) => ({ ...(ownerState.variant === "indeterminate" && {
-          strokeDasharray: "160%, 360%"
+      icon: ({
+        ownerState,
+        theme
+      }) => ({
+        marginRight: theme.spacing(4),
+        padding: 0,
+        fontSize: "1.429rem",
+        opacity: 1,
+        ...(ownerState.severity && {
+          color: theme.palette[ownerState.severity].main
+        }),
+        ...(ownerState.severity === "warning" && {
+          color: theme.palette[ownerState.severity].dark
         })
+      }),
+      message: ({
+        theme
+      }) => ({
+        padding: 0,
+        lineHeight: theme.typography.body.lineHeight
       })
     }
   },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: {
-        color: "#1d1d21",
-        lineHeight: "1.42857143",
-        fontSize: "1rem",
-        fontWeight: 600
-      }
-    }
-  },
-  MuiInputBase: {
+  MuiAlertTitle: {
     styleOverrides: {
-      root: {
-        lineHeight: "1.14285714"
-      },
-      input: {
-        boxSizing: "border-box",
-        height: "auto"
-      }
-    }
-  },
-  MuiTypography: {
-    defaultProps: {
-      fontFamily: "'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif"
-    },
-    styleOverrides: {
-      paragraph: {
-        marginBottom: "1.14285714rem"
-      }
-    }
-  },
-  MuiLink: {
-    styleOverrides: {
-      root: {
-        color: "#1662dd",
-        textDecoration: "none",
-        "&:hover": {
-          color: "#1662dd",
-          textDecoration: "underline"
-        },
-        "&:focus-visible": {
-          outlineColor: "#1662dd",
-          outlineOffset: "2px",
-          outlineStyle: "solid",
-          outlineWidth: "1px"
-        },
-        "&:visited": {
-          color: "#1662dd"
-        },
-        ".Link-indicator, .Link-icon": {
-          display: "inline-block",
-          height: "1em",
-          lineHeight: 1
-        },
-        ".Link-indicator": {
-          marginInlineStart: "0.57142857rem"
-        },
-        ".Link-icon": {
-          marginInlineEnd: "0.57142857rem"
-        },
-        svg: {
-          fontSize: "1rem",
-          height: "1em",
-          position: "relative",
-          top: "-0.0625em",
-          verticalAlign: "middle",
-          width: "1em"
-        }
-      }
-    },
-    variants: [{
-      props: {
-        variant: "monochrome"
-      },
-      style: {
-        color: "#1d1d21",
-        textDecoration: "underline",
-        "&:hover": {
-          color: "#6e6e78"
-        },
-        "&:focus-visible": {
-          outlineColor: "#1662dd",
-          outlineOffset: "2px",
-          outlineStyle: "solid",
-          outlineWidth: "1px"
-        },
-        "&:visited": {
-          color: "#1d1d21"
-        }
-      }
-    }]
-  },
-  MuiButtonBase: {
-    defaultProps: {
-      disableRipple: true
+      root: ({
+        theme
+      }) => ({
+        marginTop: 0,
+        marginBottom: theme.spacing(1),
+        lineHeight: theme.typography.h6.lineHeight,
+        fontSize: theme.typography.h6.fontSize,
+        fontWeight: theme.typography.fontWeightBold
+      })
     }
   },
   MuiButton: {
@@ -143,80 +77,86 @@ export const components = {
       props: {
         variant: "primary"
       },
-      style: {
+      style: ({
+        theme
+      }) => ({
         fontWeight: 600,
-        color: "#ffffff",
+        color: theme.palette.common.white,
         borderColor: "transparent",
-        backgroundColor: "#1662dd",
+        backgroundColor: theme.palette.primary.main,
         "&:hover, &:focus-visible": {
-          backgroundColor: "#00297a"
+          backgroundColor: theme.palette.primary.dark
         },
         "&:active": {
-          backgroundColor: "#1662dd"
+          backgroundColor: theme.palette.primary.main
         },
         "&:disabled": {
-          color: "#ffffff",
-          backgroundColor: "#a7b5ec"
+          color: theme.palette.common.white,
+          backgroundColor: theme.palette.primary.light
         }
-      }
+      })
     }, {
       props: {
         variant: "secondary"
       },
-      style: {
-        backgroundColor: "#f5f5f6",
-        borderColor: "#d7d7dc",
-        color: "#1d1d21",
+      style: ({
+        theme
+      }) => ({
+        backgroundColor: theme.palette.grey[50],
+        borderColor: theme.palette.grey[200],
+        color: theme.palette.text.primary,
         "&:hover": {
-          background: "#f2f5ff",
-          borderColor: "#a7b5ec",
-          color: "#1662dd"
+          background: theme.palette.primary.lighter,
+          borderColor: theme.palette.primary.light,
+          color: theme.palette.primary.main
         },
         "&:focus-visible": {
-          backgroundColor: "#1662dd",
-          color: "#1662dd"
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.primary.main
         },
         "&:active": {
-          borderColor: "#1662dd"
+          borderColor: theme.palette.primary.main
         },
         "&:disabled": {
-          borderColor: "#ebebed",
-          backgroundColor: "#ebebed",
-          color: "#8c8c96"
+          borderColor: theme.palette.grey[100],
+          backgroundColor: theme.palette.grey[100],
+          color: theme.palette.grey[500]
         }
-      }
+      })
     }, {
       props: {
         variant: "danger"
       },
-      style: {
-        backgroundColor: "#da372c",
-        color: "#ffffff",
+      style: ({
+        theme
+      }) => ({
+        backgroundColor: theme.palette.error.main,
+        color: theme.palette.common.white,
+        borderColor: "transparent",
         "&:hover": {
-          borderColor: "transparent",
-          backgroundColor: "#640019"
+          backgroundColor: theme.palette.error.dark
         },
         "&:focus-visible": {
-          outlineColor: "#f88c90",
-          backgroundColor: "#640019"
+          outlineColor: theme.palette.error.light,
+          backgroundColor: theme.palette.error.dark
         },
         "&:active": {
-          borderColor: "transparent",
-          backgroundColor: "#da372c"
+          backgroundColor: theme.palette.error.main
         },
         "&:disabled": {
-          color: "#ffffff",
-          borderColor: "#f88c90",
-          backgroundColor: "#f88c90"
+          color: theme.palette.common.white,
+          backgroundColor: theme.palette.error.light
         }
-      }
+      })
     }, {
       props: {
         variant: "floating"
       },
-      style: {
-        backgroundColor: "#ffffff",
-        color: "#1d1d21",
+      style: ({
+        theme
+      }) => ({
+        backgroundColor: theme.palette.common.white,
+        color: theme.palette.text.primary,
         borderColor: "transparent",
         "&:hover, &:focus-visible": {
           backgroundColor: "rgba(29, 29, 33, 0.1)",
@@ -228,48 +168,63 @@ export const components = {
         },
         "&:disabled": {
           backgroundColor: "rgba(235, 235, 237, 0.6)",
-          color: "#6e6e78",
+          color: theme.palette.text.secondary,
           borderColor: "transparent"
         }
-      }
+      })
     }, {
       props: {
         size: "s"
       },
-      style: {
-        paddingBlock: "calc(0.57142857rem - 1px)",
-        paddingInline: "calc(0.85714286rem - - 1px)",
+      style: ({
+        theme
+      }) => ({
+        paddingBlock: `calc(${theme.spacing(2)} - 1px)`,
+        paddingInline: `calc(${theme.spacing(3)} - 1px)`,
         fontSize: "1rem"
-      }
+      })
     }, {
       props: {
         size: "l"
       },
-      style: {
-        paddingBlock: "calc(1.14285714rem - 1px)",
-        paddingInline: "calc(1.14285714rem - 1px)"
-      }
+      style: ({
+        theme
+      }) => ({
+        paddingBlock: `calc(${theme.spacing(4)} - 1px)`,
+        paddingInline: `calc(${theme.spacing(4)} - 1px)`
+      })
     }, {
       props: {
         fullWidth: true
       },
-      style: {
+      style: ({
+        theme
+      }) => ({
         display: "block",
         width: "100%",
         marginBlock: "0",
         marginInline: "0",
         "&:not(:last-child)": {
-          marginBlockEnd: "1.14285714rem"
+          marginBlockEnd: theme.spacing(4)
+        }
+      })
+    }, {
+      props: {
+        children: ""
+      },
+      style: {
+        minWidth: "auto",
+        ".MuiButton-startIcon": {
+          margin: "0"
         }
       }
     }],
     styleOverrides: {
       root: ({
-        ownerState
-      }) => ({ ...ownerState,
+        theme
+      }) => ({
         fontWeight: 600,
-        paddingBlock: "0.85714286rem",
-        paddingInline: "0.85714286rem",
+        padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
         display: "inline-block",
         position: "relative",
         marginBlock: "0",
@@ -285,7 +240,7 @@ export const components = {
         lineHeight: "1.14285714",
         whiteSpace: "nowrap",
         "& + &": {
-          marginInlineStart: "0.57142857rem"
+          marginInlineStart: theme.spacing(2)
         },
         "&:focus-visible": {
           outlineOffset: "2px",
@@ -295,9 +250,386 @@ export const components = {
         "&:disabled": {
           cursor: "not-allowed",
           pointerEvents: "inherit"
+        },
+        ".MuiButton-startIcon > *:nth-of-type(1)": {
+          fontSize: "inherit"
         }
       })
     }
+  },
+  MuiButtonBase: {
+    defaultProps: {
+      disableRipple: true
+    }
+  },
+  MuiCssBaseline: {
+    styleOverrides: {
+      boxSizing: "border-box",
+      fontFeatureSettings: "'lnum','pnum'",
+      fontVariant: "normal"
+    }
+  },
+  MuiCheckbox: {
+    defaultProps: {
+      size: "small"
+    },
+    styleOverrides: {
+      root: ({
+        theme
+      }) => ({
+        borderRadius: "4px",
+        "&:hover": {
+          backgroundColor: "transparent"
+        },
+        padding: 0,
+        ".Mui-error > &": {
+          color: theme.palette.error.main,
+          "&:hover": {
+            color: theme.palette.error.dark
+          }
+        },
+        ".Mui-error > &.Mui-checked": {
+          "&:hover": {
+            color: theme.palette.error.dark
+          }
+        },
+        "&.Mui-focusVisible": {
+          outlineColor: theme.palette.primary.main,
+          outlineOffset: 0,
+          outlineStyle: "solid",
+          outlineWidth: "2px"
+        }
+      })
+    }
+  },
+  MuiCircularProgress: {
+    defaultProps: {
+      size: "1.14285714rem",
+      thickness: 8,
+      color: "primary",
+      disableShrink: false,
+      variant: "indeterminate"
+    },
+    styleOverrides: {
+      root: ({
+        theme,
+        ownerState
+      }) => ({ ...(ownerState.color !== "inherit" && {
+          color: theme.palette.primary.dark
+        })
+      }),
+      circle: ({
+        ownerState
+      }) => ({ ...(ownerState.variant === "indeterminate" && {
+          strokeDasharray: "160%, 360%"
+        })
+      })
+    }
+  },
+  MuiFormControl: {
+    styleOverrides: {
+      root: ({
+        ownerState,
+        theme
+      }) => ({
+        width: "100%",
+        maxWidth: "32rem",
+        ...(ownerState.margin === "normal" && {
+          marginTop: 0,
+          marginBottom: theme.spacing(4)
+        }),
+        ...(ownerState.margin === "dense" && {
+          marginTop: 0,
+          marginBottom: theme.spacing(4)
+        }),
+        ...(ownerState.fullWidth && {
+          maxWidth: "100%"
+        })
+      })
+    }
+  },
+  MuiFormControlLabel: {
+    styleOverrides: {
+      root: ({
+        theme,
+        ownerState
+      }) => ({
+        gap: theme.spacing(2),
+        marginLeft: 0,
+        marginRight: 0,
+        ...(ownerState.labelPlacement === "start" && {
+          marginLeft: 0,
+          marginRight: 0
+        }),
+        ...(ownerState.labelPlacement === "top" && {
+          marginLeft: 0
+        }),
+        ...(ownerState.labelPlacement === "bottom" && {
+          marginLeft: 0
+        }),
+        "&:not(:last-child)": {
+          marginBottom: theme.spacing(2)
+        },
+        "&.Mui-disabled": {
+          pointerEvents: "none"
+        },
+        "&:hover .MuiRadio-root, &:hover .MuiCheckbox-root": {
+          color: theme.palette.text.primary
+        },
+        "&:hover .MuiRadio-root.Mui-checked, &:hover .MuiCheckbox-root.Mui-checked": {
+          color: theme.palette.primary.dark
+        },
+        "&.Mui-error:hover .MuiRadio-root, &.Mui-error:hover .MuiCheckbox-root": {
+          color: theme.palette.error.dark
+        },
+        "&.Mui-error:hover .MuiRadio-root.Mui-checked, &.Mui-error:hover .MuiCheckbox-root.Mui-checked": {
+          color: theme.palette.error.dark
+        }
+      })
+    }
+  },
+  MuiFormHelperText: {
+    defaultProps: {
+      variant: "standard"
+    },
+    styleOverrides: {
+      root: ({
+        theme
+      }) => ({
+        lineHeight: "1.33333333",
+        marginTop: theme.spacing(2),
+        ".MuiFormLabel-root + &": {
+          marginTop: `-${theme.spacing(1)}`,
+          color: theme.palette.text.secondary
+        },
+        marginBottom: theme.spacing(2),
+        "&:last-child": {
+          marginBottom: 0
+        }
+      })
+    }
+  },
+  MuiFormLabel: {
+    styleOverrides: {
+      root: ({
+        theme
+      }) => ({
+        color: theme.palette.text.primary,
+        lineHeight: "1.14285714",
+        fontSize: "1rem",
+        fontWeight: 600,
+        marginBottom: theme.spacing(2),
+        "&.Mui-focused, &.Mui-error, &.Mui-disabled": {
+          color: theme.palette.text.primary
+        }
+      })
+    }
+  },
+  MuiInputAdornment: {
+    defaultProps: {
+      variant: "outlined"
+    },
+    styleOverrides: {
+      root: ({
+        ownerState
+      }) => ({
+        display: "flex",
+        ...(ownerState.position === "start" && {
+          marginRight: 0
+        }),
+        ...(ownerState.position === "end" && {
+          marginLeft: 0
+        })
+      })
+    }
+  },
+  MuiInputBase: {
+    styleOverrides: {
+      root: {
+        lineHeight: "1.14285714"
+      },
+      input: {
+        boxSizing: "border-box",
+        height: "auto"
+      }
+    }
+  },
+  MuiInputLabel: {
+    defaultProps: {
+      disableAnimation: true,
+      shrink: false
+    },
+    styleOverrides: {
+      root: ({
+        ownerState
+      }) => ({ ...(ownerState.formControl && {
+          position: "initial",
+          transform: "none"
+        }),
+        ...(ownerState.variant === "outlined" && {
+          pointerEvents: "initial",
+          transform: "none",
+          maxWidth: "100%",
+          ...(ownerState.size === "small" && {
+            transform: "none"
+          })
+        })
+      })
+    }
+  },
+  MuiLink: {
+    styleOverrides: {
+      root: ({
+        theme
+      }) => ({
+        color: theme.palette.primary.main,
+        textDecoration: "none",
+        "&:hover": {
+          color: theme.palette.primary.main,
+          textDecoration: "underline"
+        },
+        "&:focus-visible": {
+          outlineColor: theme.palette.primary.main,
+          outlineOffset: "2px",
+          outlineStyle: "solid",
+          outlineWidth: "1px"
+        },
+        "&:visited": {
+          color: theme.palette.primary.main
+        },
+        ".Link-indicator, .Link-icon": {
+          display: "inline-block",
+          height: "1em",
+          lineHeight: 1
+        },
+        ".Link-indicator": {
+          marginInlineStart: theme.spacing(2)
+        },
+        ".Link-icon": {
+          marginInlineEnd: theme.spacing(2)
+        },
+        svg: {
+          fontSize: "1rem",
+          height: "1em",
+          position: "relative",
+          top: "-0.0625em",
+          verticalAlign: "middle",
+          width: "1em"
+        }
+      })
+    },
+    variants: [{
+      props: {
+        variant: "monochrome"
+      },
+      style: ({
+        theme
+      }) => ({
+        color: theme.palette.text.primary,
+        textDecoration: "underline",
+        "&:hover": {
+          color: theme.palette.text.secondary
+        },
+        "&:focus-visible": {
+          outlineColor: theme.palette.primary.main,
+          outlineOffset: "2px",
+          outlineStyle: "solid",
+          outlineWidth: "1px"
+        },
+        "&:visited": {
+          color: theme.palette.text.primary
+        }
+      })
+    }]
+  },
+  MuiNativeSelect: {
+    defaultProps: {
+      variant: "outlined"
+    },
+    styleOverrides: {
+      icon: ({
+        theme
+      }) => ({
+        color: theme.palette.text.primary
+      })
+    }
+  },
+  MuiOutlinedInput: {
+    defaultProps: {
+      notched: false
+    },
+    styleOverrides: {
+      root: ({
+        ownerState,
+        theme
+      }) => ({
+        "&.Mui-disabled": {
+          pointerEvents: "none"
+        },
+        ...(ownerState.startAdornment && {
+          paddingLeft: theme.spacing(3)
+        }),
+        ...(ownerState.endAdornment && {
+          paddingRight: theme.spacing(3)
+        })
+      }),
+      input: ({
+        theme
+      }) => ({
+        padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
+        border: "1px solid transparent"
+      }),
+      notchedOutline: ({
+        theme
+      }) => ({
+        borderColor: theme.palette.grey[500],
+        ".MuiOutlinedInput-root:hover &": {
+          borderColor: theme.palette.primary.main
+        },
+        ".MuiOutlinedInput-root.Mui-error:hover &": {
+          borderColor: theme.palette.error.dark
+        }
+      })
+    }
+  },
+  MuiRadio: {
+    defaultProps: {
+      size: "small"
+    },
+    styleOverrides: {
+      root: ({
+        theme
+      }) => ({
+        "&:hover": {
+          backgroundColor: "transparent"
+        },
+        padding: 0,
+        ".Mui-error > &": {
+          color: theme.palette.error.main,
+          "&:hover": {
+            color: theme.palette.error.dark
+          }
+        },
+        "&.Mui-focusVisible": {
+          outlineColor: theme.palette.primary.main,
+          outlineOffset: 0,
+          outlineStyle: "solid",
+          outlineWidth: "2px"
+        }
+      })
+    }
+  },
+  MuiTypography: {
+    defaultProps: {
+      fontFamily: "'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif"
+    },
+    styleOverrides: {
+      paragraph: ({
+        theme
+      }) => ({
+        marginBottom: theme.spacing(4)
+      })
+    }
   }
 };
 //# sourceMappingURL=components.js.map