@okta/odyssey-react-mui 0.14.6 → 0.15.1

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"names":["oid","useOid"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;SAESA,G,EAAKC,M","sourcesContent":["/*!\n * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport { oid, useOid } from \"./oid\";\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["oid","useOid"],"sources":["../../src/utils/index.ts"],"sourcesContent":["/*!\n * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport { oid, useOid } from \"./oid\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;SAESA,G,EAAKC,M"}

package/dist/utils/oid.d.ts

@@ -11,5 +11,5 @@
  */
 export declare const length = 6;
 export declare const oid: () => string;
-export declare const useOid: (id?: string | undefined) => string;
+export declare const useOid: (id?: string) => string;
 //# sourceMappingURL=oid.d.ts.map

package/dist/utils/oid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oid.d.ts","sourceRoot":"","sources":["../../src/utils/oid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,eAAO,MAAM,MAAM,IAAI,CAAC;AAExB,eAAO,MAAM,GAAG,QAAO,MAAmD,CAAC;AAE3E,eAAO,MAAM,MAAM,+BAAkB,MAGpC,CAAC"}
+{"version":3,"file":"oid.d.ts","sourceRoot":"","sources":["../../src/utils/oid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,eAAO,MAAM,MAAM,IAAI,CAAC;AAExB,eAAO,MAAM,GAAG,QAAO,MAAmD,CAAC;AAE3E,eAAO,MAAM,MAAM,QAAS,MAAM,KAAG,MAGpC,CAAC"}

package/dist/utils/oid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/oid.ts"],"names":["useMemo","length","oid","Math","random","toString","slice","useOid","id","_oid"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,OAAT,QAAwB,OAAxB;AAEA,OAAO,MAAMC,MAAM,GAAG,CAAf;AAEP,OAAO,MAAMC,GAAG,GAAG,MAAcC,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAACL,MAAlC,CAA1B;AAEP,OAAO,MAAMM,MAAM,GAAIC,EAAD,IAAyB;AAC7C,QAAMC,IAAI,GAAGT,OAAO,CAACE,GAAD,EAAM,CAACA,GAAD,CAAN,CAApB;;AACA,SAAOM,EAAE,IAAIC,IAAb;AACD,CAHM","sourcesContent":["/*!\n * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMemo } from \"react\";\n\nexport const length = 6;\n\nexport const oid = (): string => Math.random().toString(36).slice(-length);\n\nexport const useOid = (id?: string): string => {\n  const _oid = useMemo(oid, [oid]);\n  return id || _oid;\n};\n"],"file":"oid.js"}
+{"version":3,"file":"oid.js","names":["useMemo","length","oid","Math","random","toString","slice","useOid","id","_oid"],"sources":["../../src/utils/oid.ts"],"sourcesContent":["/*!\n * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMemo } from \"react\";\n\nexport const length = 6;\n\nexport const oid = (): string => Math.random().toString(36).slice(-length);\n\nexport const useOid = (id?: string): string => {\n  const _oid = useMemo(oid, [oid]);\n  return id || _oid;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,OAAT,QAAwB,OAAxB;AAEA,OAAO,MAAMC,MAAM,GAAG,CAAf;AAEP,OAAO,MAAMC,GAAG,GAAG,MAAcC,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAACL,MAAlC,CAA1B;AAEP,OAAO,MAAMM,MAAM,GAAIC,EAAD,IAAyB;EAC7C,MAAMC,IAAI,GAAGT,OAAO,CAACE,GAAD,EAAM,CAACA,GAAD,CAAN,CAApB;;EACA,OAAOM,EAAE,IAAIC,IAAb;AACD,CAHM"}

package/jest.config.cjs

@@ -12,4 +12,5 @@
 
 module.exports = {
   setupFilesAfterEnv: ["./jest.setup.js"],
+  testEnvironment: "jsdom",
 };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.14.6",
+  "version": "0.15.1",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "type": "module",
   "exports": {
     ".": {
       "default": "./dist/index.js"
@@ -19,7 +19,7 @@
     "directory": "packages/odyssey-react-mui"
   },
   "dependencies": {
-    "@okta/odyssey-design-tokens": "^0.14.6"
+    "@okta/odyssey-design-tokens": "^0.15.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -29,5 +29,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "bc451562d0c3345c720d93a7d65b1774a155a150"
+  "gitHead": "ae87e24beead8b4eaafb35d9fd0e3597c50104dc"
 }

package/src/components/Icon/ArrowUpDown.tsx

@@ -0,0 +1,44 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+// Code automatically generated by svgr; DO NOT EDIT.
+
+import { forwardRef } from "react";
+import { SvgIcon } from "./SvgIcon";
+import type { SvgIconNoChildrenProps } from "./types";
+
+export type ArrowUpDownIconProps = SvgIconNoChildrenProps;
+
+export const ArrowUpDownIcon = forwardRef<SVGSVGElement, ArrowUpDownIconProps>(
+  (props, ref) => {
+    return (
+      <SvgIcon
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        ref={ref}
+        {...props}
+      >
+        <>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.00001 12V3.70711L7.64645 6.35355L8.35356 5.64645L4.85356 2.14645C4.6583 1.95118 4.34172 1.95118 4.14646 2.14645L0.646454 5.64645L1.35356 6.35355L4.00001 3.70711L4.00001 12H5.00001ZM11 4L11 12.2929L8.35357 9.64644L7.64647 10.3536L11.1465 13.8536C11.3417 14.0488 11.6583 14.0488 11.8536 13.8536L15.3536 10.3536L14.6465 9.64644L12 12.2929L12 4L11 4Z"
+            fill="currentColor"
+          />
+        </>
+      </SvgIcon>
+    );
+  }
+);
+
+ArrowUpDownIcon.displayName = "ArrowUpDownIcon";

package/src/components/Icon/UserGroup.tsx

@@ -0,0 +1,44 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+// Code automatically generated by svgr; DO NOT EDIT.
+
+import { forwardRef } from "react";
+import { SvgIcon } from "./SvgIcon";
+import type { SvgIconNoChildrenProps } from "./types";
+
+export type UserGroupIconProps = SvgIconNoChildrenProps;
+
+export const UserGroupIcon = forwardRef<SVGSVGElement, UserGroupIconProps>(
+  (props, ref) => {
+    return (
+      <SvgIcon
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        ref={ref}
+        {...props}
+      >
+        <>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 4V3C12 2.44772 11.5523 2 11 2C10.4477 2 10 2.44772 10 3V4C10 4.55228 10.4477 5 11 5C11.5523 5 12 4.55228 12 4ZM11 1C9.89543 1 9 1.89543 9 3V4C9 5.10457 9.89543 6 11 6C12.1046 6 13 5.10457 13 4V3C13 1.89543 12.1046 1 11 1ZM13.4507 9.70979C13.3461 9.25176 13.2788 8.96046 13.2112 8.74017C13.1473 8.53193 13.1019 8.45367 13.0716 8.41204L13.8805 7.82408C14.1212 8.15524 14.2227 8.59915 14.4256 9.48696L14.7714 11L15 12H13.9742H8.31292C8.34765 12.146 8.38455 12.3074 8.42559 12.487L8.77143 14L9 15H7.97421H2.02579H1L1.22857 14L1.57441 12.487C1.77734 11.5991 1.8788 11.1552 2.11952 10.8241C2.33185 10.532 2.61932 10.3028 2.95142 10.1609C3.32789 10 3.78325 10 4.69396 10H5.30604C6.21675 10 6.67211 10 7.04858 10.1609C7.16471 10.2105 7.27538 10.2708 7.37928 10.3407L7.57443 9.48696C7.77735 8.59915 7.87882 8.15524 8.11953 7.82408C8.33187 7.53195 8.61934 7.30278 8.95143 7.16087C9.32791 7 9.78326 7 10.694 7H11.3061C12.2168 7 12.6721 7 13.0486 7.16087C13.3807 7.30278 13.6682 7.53195 13.8805 7.82408L13.0716 8.41204C12.9654 8.26598 12.8217 8.15139 12.6557 8.08044C12.6083 8.06021 12.5219 8.03334 12.3047 8.01744C12.0748 8.00062 11.7759 8 11.3061 8H10.694C10.2241 8 9.92519 8.00062 9.69536 8.01744C9.47812 8.03334 9.3917 8.06021 9.34437 8.08044C9.17833 8.15139 9.03459 8.26598 8.92842 8.41204C8.89816 8.45367 8.85271 8.53193 8.7888 8.74017C8.72119 8.96047 8.65397 9.25177 8.54928 9.70979L8.25438 11H13.7457L13.4681 9.78588L13.4507 9.70979ZM6 7V6C6 5.44772 5.55228 5 5 5C4.44772 5 4 5.44772 4 6V7C4 7.55228 4.44772 8 5 8C5.55228 8 6 7.55228 6 7ZM5 4C3.89543 4 3 4.89543 3 6V7C3 8.10457 3.89543 9 5 9C6.10457 9 7 8.10457 7 7V6C7 4.89543 6.10457 4 5 4ZM5.30604 11H4.69396C4.22413 11 3.92517 11.0006 3.69534 11.0174C3.4781 11.0333 3.39168 11.0602 3.34436 11.0804C3.17831 11.1514 3.03457 11.266 2.92841 11.412C2.89815 11.4537 2.85269 11.5319 2.78879 11.7402C2.72118 11.9605 2.65396 12.2518 2.54927 12.7098L2.25436 14H7.74564L7.45073 12.7098C7.34604 12.2518 7.27882 11.9605 7.21122 11.7402C7.14731 11.5319 7.10185 11.4537 7.0716 11.412C6.96543 11.266 6.82169 11.1514 6.65565 11.0804C6.60832 11.0602 6.5219 11.0333 6.30466 11.0174C6.07483 11.0006 5.77587 11 5.30604 11Z"
+            fill="currentColor"
+          />
+        </>
+      </SvgIcon>
+    );
+  }
+);
+
+UserGroupIcon.displayName = "UserGroupIcon";

package/src/components/Icon/index.tsx

@@ -41,6 +41,9 @@ export * from "./ArrowLeft";
 import { ArrowRightIcon } from "./ArrowRight";
 export * from "./ArrowRight";
 
+import { ArrowUpDownIcon } from "./ArrowUpDown";
+export * from "./ArrowUpDown";
+
 import { ArrowUpIcon } from "./ArrowUp";
 export * from "./ArrowUp";
 
@@ -125,6 +128,9 @@ export * from "./Settings";
 import { SubtractIcon } from "./Subtract";
 export * from "./Subtract";
 
+import { UserGroupIcon } from "./UserGroup";
+export * from "./UserGroup";
+
 import { UserIcon } from "./User";
 export * from "./User";
 
@@ -138,6 +144,7 @@ export const iconDictionary = {
   "arrow-down": ArrowDownIcon,
   "arrow-left": ArrowLeftIcon,
   "arrow-right": ArrowRightIcon,
+  "arrow-up-down": ArrowUpDownIcon,
   "arrow-up": ArrowUpIcon,
   calendar: CalendarIcon,
   "check-circle-filled": CheckCircleFilledIcon,
@@ -166,5 +173,6 @@ export const iconDictionary = {
   search: SearchIcon,
   settings: SettingsIcon,
   subtract: SubtractIcon,
+  "user-group": UserGroupIcon,
   user: UserIcon,
 };

package/src/themes/odyssey/{components.ts → components.tsx}

@@ -13,9 +13,28 @@
 import type { ThemeOptions } from "@mui/material";
 //import radioClasses from "@mui/material";
 import { outlinedInputClasses } from "@mui/material/OutlinedInput";
+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 {
+  AlertTriangleFilledIcon,
+  ArrowDownIcon,
+  CheckCircleFilledIcon,
+  InformationCircleFilledIcon,
+} from "../../components/Icon";
 
 export const components: ThemeOptions["components"] = {
   MuiAlert: {
+    defaultProps: {
+      iconMapping: {
+        error: <AlertTriangleFilledIcon />,
+        info: <InformationCircleFilledIcon />,
+        success: <CheckCircleFilledIcon />,
+        warning: <AlertTriangleFilledIcon />,
+      },
+    },
     styleOverrides: {
       root: ({ ownerState, theme }) => ({
         padding: theme.spacing(4),
@@ -82,7 +101,8 @@ export const components: ThemeOptions["components"] = {
       }),
       message: ({ ownerState, theme }) => ({
         padding: 0,
-        lineHeight: theme.typography.body.lineHeight,
+        lineHeight: theme.typography.body1.lineHeight,
+        overflow: "visible",
         ...(ownerState.variant === "banner" && {
           display: "flex",
           justifyContent: "space-between",
@@ -90,9 +110,6 @@ export const components: ThemeOptions["components"] = {
         }),
         ...(ownerState.variant === "toast" && {
           flexGrow: 1,
-          paddingRight: `calc((${theme.spacing(1)} * 2) + ${
-            theme.typography.body.fontSize
-          } + ${theme.spacing(4)})`,
         }),
       }),
     },
@@ -260,6 +277,7 @@ export const components: ThemeOptions["components"] = {
     styleOverrides: {
       root: ({ theme }) => ({
         fontWeight: 600,
+        minWidth: "unset",
         padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
         display: "inline-block",
         position: "relative",
@@ -269,15 +287,15 @@ export const components: ThemeOptions["components"] = {
           "color, background-color, border-color, outline-offset, outline-color",
         transitionDuration: "100ms",
         transitionTimingFunction: "linear",
-        borderWidth: "1px",
-        borderStyle: "solid",
+        borderWidth: theme.mixins.borderWidth,
+        borderStyle: theme.mixins.borderStyle,
         outlineColor: "transparent",
         outlineOffset: "0",
-        fontSize: "1rem",
+        fontSize: theme.typography.body1.fontSize,
         lineHeight: "1.14285714",
         whiteSpace: "nowrap",
 
-        "& + &": {
+        ".MuiButton-root + &": {
           marginInlineStart: theme.spacing(2),
         },
 
@@ -364,17 +382,26 @@ export const components: ThemeOptions["components"] = {
     },
   },
   MuiFormControl: {
+    defaultProps: {
+      margin: "normal",
+    },
     styleOverrides: {
       root: ({ ownerState, theme }) => ({
         width: "100%",
         maxWidth: "32rem",
         ...(ownerState.margin === "normal" && {
           marginTop: 0,
-          marginBottom: theme.spacing(4),
+          marginBottom: theme.spacing(5),
+          "&:last-child": {
+            marginBottom: 0,
+          },
         }),
         ...(ownerState.margin === "dense" && {
           marginTop: 0,
-          marginBottom: theme.spacing(4),
+          marginBottom: theme.spacing(5),
+          "&:last-child": {
+            marginBottom: 0,
+          },
         }),
         ...(ownerState.fullWidth && {
           maxWidth: "100%",
@@ -462,7 +489,28 @@ export const components: ThemeOptions["components"] = {
     styleOverrides: {
       root: ({ theme }) => ({
         padding: theme.spacing(1),
-        fontSize: theme.typography.body.fontSize,
+        fontSize: theme.typography.body1.fontSize,
+        backgroundColor: "transparent",
+        color: theme.palette.text.primary,
+        borderColor: "transparent",
+        borderRadius: theme.mixins.borderRadius,
+
+        "&:hover, &:focus-visible": {
+          backgroundColor: "rgba(29, 29, 33, 0.1)",
+          borderColor: "transparent",
+        },
+        "&:focus-visible": {
+          outlineColor: theme.palette.primary.main,
+        },
+        "&:active": {
+          backgroundColor: "rgba(29, 29, 33, 0.2)",
+          borderColor: "transparent",
+        },
+        "&:disabled": {
+          backgroundColor: "rgba(235, 235, 237, 0.6)",
+          color: theme.palette.text.secondary,
+          borderColor: "transparent",
+        },
       }),
     },
   },
@@ -484,9 +532,13 @@ export const components: ThemeOptions["components"] = {
   },
   MuiInputBase: {
     styleOverrides: {
-      root: {
+      root: ({ ownerState, theme }) => ({
         lineHeight: "1.14285714",
-      },
+
+        ...(ownerState.readOnly === true && {
+          backgroundColor: theme.palette.grey[50],
+        }),
+      }),
       input: {
         boxSizing: "border-box",
         height: "auto",
@@ -626,10 +678,11 @@ export const components: ThemeOptions["components"] = {
         [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]:
           {
             borderColor: theme.palette.action.disabled,
+            pointerEvents: "auto",
           },
         [`&.${outlinedInputClasses.disabled}`]: {
           backgroundColor: theme.palette.grey[50],
-          pointerEvents: "none",
+          cursor: "not-allowed",
         },
         ...(ownerState.startAdornment && {
           paddingLeft: theme.spacing(3),
@@ -688,6 +741,12 @@ export const components: ThemeOptions["components"] = {
       },
     },
   },
+  MuiSvgIcon: {
+    defaultProps: {
+      fontSize: "inherit",
+      color: "inherit",
+    },
+  },
   MuiTab: {
     defaultProps: {
       iconPosition: "start",
@@ -698,7 +757,7 @@ export const components: ThemeOptions["components"] = {
         minWidth: "unset",
         minHeight: "unset",
         padding: `${theme.spacing(4)} 0`,
-        lineHeight: theme.typography.body.lineHeight,
+        lineHeight: theme.typography.body1.lineHeight,
         overflow: "visible",
         ...(ownerState.selected == true && {
           color: theme.palette.text.primary,
@@ -708,8 +767,8 @@ export const components: ThemeOptions["components"] = {
           opacity: 1,
         }),
         ...(ownerState.wrapped && {
-          fontSize: theme.typography.caption.fontSize,
-          lineHeight: theme.typography.caption.lineHeight,
+          fontSize: theme.typography.subtitle1.fontSize,
+          lineHeight: theme.typography.subtitle1.lineHeight,
         }),
         "&:hover": {
           color: theme.palette.primary.main,
@@ -743,6 +802,209 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiTable: {
+    styleOverrides: {
+      root: ({ theme, ownerState }) => ({
+        display: "table",
+        width: "auto",
+        borderCollapse: "separate",
+        borderSpacing: 0,
+        border: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
+        borderRadius: theme.mixins.borderRadius,
+        marginBlock: theme.spacing(0),
+        marginInline: theme.spacing(0),
+        lineHeight: "1.14285714",
+
+        "&:only-child": {
+          marginBlockEnd: 0,
+        },
+
+        ...(ownerState.stickyHeader && {
+          borderCollapse: "separate",
+        }),
+      }),
+    },
+  },
+  MuiTableCell: {
+    styleOverrides: {
+      root: ({ theme, ownerState }) => ({
+        ...theme.typography.body1,
+        maxWidth: theme.mixins.maxWidth,
+        borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
+        textAlign: "start",
+        verticalAlign: "baseline",
+        padding: "unset",
+        paddingBlock: theme.spacing(4),
+        paddingInline: theme.spacing(4),
+        overflowWrap: "break-word",
+
+        [`.${tableBodyClasses.root} .${tableRowClasses.root}:last-of-type &`]: {
+          borderBottom: 0,
+        },
+
+        [`.${tableRowClasses.selected} &`]: {
+          borderBottomColor: theme.palette.primary.light,
+        },
+
+        [`.${tableRowClasses.selected}:hover &`]: {
+          borderBottomColor: theme.palette.primary.main,
+        },
+
+        ...(ownerState.variant === "action" && {
+          paddingBlock: 0,
+        }),
+
+        ...(ownerState.variant === "body" && {
+          color: theme.palette.text.primary,
+        }),
+
+        ...(ownerState.variant === "date" && {
+          whiteSpace: "nowrap",
+        }),
+
+        ...(ownerState.variant === "footer" && {
+          color: theme.palette.text.secondary,
+          lineHeight: theme.typography.body1.lineHeight,
+          fontSize: theme.typography.body1.fontSize,
+        }),
+
+        [`.${tableHeadClasses.root} &`]: {
+          color: theme.palette.text.secondary,
+          lineHeight: theme.typography.body1.lineHeight,
+          fontWeight: theme.typography.fontWeightBold,
+          backgroundColor: theme.palette.grey[50],
+        },
+
+        ...(ownerState.variant === "head" && {
+          lineHeight: theme.typography.body1.lineHeight,
+          fontWeight: theme.typography.fontWeightBold,
+        }),
+
+        ...(ownerState.variant === "number" && {
+          textAlign: "right",
+          fontFeatureSettings: '"lnum", "tnum"',
+        }),
+
+        ...(ownerState.padding === "checkbox" && {
+          width: 48, // prevent the checkbox column from growing
+          padding: "0 0 0 4px",
+        }),
+
+        ...(ownerState.padding === "none" && {
+          padding: 0,
+        }),
+
+        ...(ownerState.align === "left" && {
+          textAlign: "left",
+        }),
+
+        ...(ownerState.align === "center" && {
+          textAlign: "center",
+        }),
+
+        ...(ownerState.align === "right" && {
+          textAlign: "right",
+          flexDirection: "row-reverse",
+        }),
+
+        ...(ownerState.align === "justify" && {
+          textAlign: "justify",
+        }),
+      }),
+    },
+  },
+  MuiTableContainer: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        width: "unset",
+        maxWidth: "100%",
+        marginBlockStart: theme.spacing(0),
+        marginBlockEnd: theme.spacing(4),
+        marginInline: 0,
+        overflowX: "auto",
+
+        "&:last-child": {
+          marginBlock: 0,
+        },
+      }),
+    },
+  },
+  MuiTableRow: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        verticalAlign: "unset",
+        [`&.${tableRowClasses.hover}:hover`]: {
+          backgroundColor: theme.palette.grey[50],
+        },
+        [`&.${tableRowClasses.selected}`]: {
+          backgroundColor: theme.palette.primary.lighter,
+          "&:hover": {
+            backgroundColor: theme.palette.primary.lighter,
+          },
+        },
+      }),
+    },
+  },
+  MuiTableSortLabel: {
+    defaultProps: {
+      IconComponent: ArrowDownIcon,
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        cursor: "pointer",
+        display: "inline-flex",
+        justifyContent: "flex-start",
+        flexDirection: "inherit",
+        alignItems: "center",
+        "&:focus-visible": {
+          color: theme.palette.text.primary,
+          outlineOffset: theme.spacing(4),
+          outlineStyle: "solid",
+          outlineWidth: "2px",
+          outlineColor: theme.palette.primary.main,
+        },
+        "&:hover": {
+          color: theme.palette.text.primary,
+          [`& .${tableSortLabelClasses.icon}`]: {
+            opacity: 1,
+          },
+        },
+        [`&.${tableSortLabelClasses.active}`]: {
+          color: theme.palette.text.secondary,
+          [`& .${tableSortLabelClasses.icon}`]: {
+            opacity: 1,
+            color: "inherit",
+          },
+        },
+      }),
+      icon: ({ theme, ownerState }) => ({
+        fontSize: "inherit",
+        marginRight: 0,
+        marginLeft: 0,
+        opacity: 0,
+        color: "inherit",
+        transition: theme.transitions.create(["opacity", "transform"], {
+          duration: theme.transitions.duration.shorter,
+        }),
+        userSelect: "none",
+
+        [`.${tableCellClasses.alignRight} &`]: {
+          marginInlineEnd: theme.spacing(2),
+        },
+
+        [`.${tableCellClasses.alignLeft} &`]: {
+          marginInlineStart: theme.spacing(2),
+        },
+
+        ...(ownerState.direction === "desc" && {
+          transform: "rotate(0deg)",
+        }),
+        ...(ownerState.direction === "asc" && {
+          transform: "rotate(180deg)",
+        }),
+      }),
+    },
+  },
   MuiTabs: {
     styleOverrides: {
       root: ({ theme }) => ({
@@ -759,11 +1021,40 @@ export const components: ThemeOptions["components"] = {
     defaultProps: {
       fontFamily:
         "'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
+      variantMapping: {
+        h1: "h1",
+        h2: "h2",
+        h3: "h3",
+        h4: "h4",
+        h5: "h5",
+        h6: "h6",
+        subtitle1: "p",
+        body1: "p",
+        inherit: "p",
+        kbd: "kbd",
+        legend: "legend",
+      },
     },
     styleOverrides: {
       paragraph: ({ theme }) => ({
         marginBottom: theme.spacing(4),
       }),
+      root: ({ theme, ownerState }) => ({
+        ...(ownerState.variant === "kbd" && {
+          display: "inline-block",
+          minWidth: `calc(${theme.typography.subtitle1.fontSize} * ${theme.typography.h5.lineHeight})`,
+          borderStyle: theme.mixins.borderStyle,
+          borderWidth: theme.mixins.borderWidth,
+          borderRadius: theme.mixins.borderRadius,
+          borderColor: theme.palette.grey[200],
+          backgroundColor: theme.palette.grey[50],
+          padding: `calc(${theme.spacing(1)} / 2) ${theme.spacing(1)}`,
+          fontSize: theme.typography.subtitle1.fontSize,
+          fontWeight: theme.typography.fontWeightRegular,
+          lineHeight: theme.typography.h5.lineHeight,
+          boxShadow: `0 1px 1px 0 hsla(240, 6%, 12%, 0.05)`,
+        }),
+      }),
     },
   },
 };

package/src/themes/odyssey/components.types.ts

@@ -59,7 +59,6 @@ declare module "@mui/material/Link" {
     body1: false;
     body2: false;
     button: false;
-    caption: false;
     h1: false;
     h2: false;
     h3: false;
@@ -89,4 +88,15 @@ declare module "@mui/material/Link" {
   }
 }
 
+declare module "@mui/material/TableCell" {
+  interface TableCellPropsVariantOverrides {
+    action: true;
+    body: true;
+    date: true;
+    footer: true;
+    head: true;
+    number: true;
+  }
+}
+
 export {};