@okta/odyssey-react-mui 1.15.9 → 1.21.0

package/src/theme/components.tsx

@@ -15,6 +15,7 @@ import type {} from "@mui/lab/themeAugmentation";
 import { alertTitleClasses } from "@mui/material/AlertTitle";
 import { autocompleteClasses } from "@mui/material/Autocomplete";
 import { buttonClasses } from "@mui/material/Button";
+import { buttonBaseClasses } from "@mui/material/ButtonBase";
 import { checkboxClasses } from "@mui/material/Checkbox";
 import { chipClasses } from "@mui/material/Chip";
 import { dividerClasses } from "@mui/material/Divider";
@@ -32,10 +33,11 @@ import { svgIconClasses } from "@mui/material/SvgIcon";
 import { tableBodyClasses } from "@mui/material/TableBody";
 import { tableHeadClasses } from "@mui/material/TableHead";
 import { tableRowClasses } from "@mui/material/TableRow";
+import { tableCellClasses } from "@mui/material/TableCell";
 import { tooltipClasses } from "@mui/material/Tooltip";
 import { typographyClasses } from "@mui/material/Typography";
 
-import { TILE_IMAGE_HEIGHT } from "../Tile";
+import { CARD_IMAGE_HEIGHT } from "../Card";
 
 import {
   CheckCircleFilledIcon,
@@ -99,6 +101,10 @@ export const components = ({
             borderBottomStyle: "solid",
             borderBottomWidth: odysseyTokens.BorderWidthMain,
           },
+          "&.nav-accordion": {
+            border: "0 !important",
+            width: "100%",
+          },
         }),
       },
     },
@@ -119,6 +125,20 @@ export const components = ({
             outlineStyle: "solid",
             zIndex: 1,
           },
+          svg: {
+            fontSize: "1.2em",
+            height: "1em",
+            position: "relative",
+            insetBlockStart: "-0.0625em",
+            verticalAlign: "middle",
+            width: "1em",
+          },
+          "&.nav-accordion-summary": {
+            padding: `${odysseyTokens.Spacing2} ${odysseyTokens.Spacing4}`,
+            ".MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
+              transform: "rotate(-90deg) !important",
+            },
+          },
         }),
         content: () => ({
           marginBlock: 0,
@@ -135,6 +155,11 @@ export const components = ({
         root: () => ({
           paddingInline: odysseyTokens.Spacing3,
           paddingBlock: odysseyTokens.Spacing4,
+          "&.nav-accordion-details": {
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: odysseyTokens.Spacing2,
+          },
         }),
       },
     },
@@ -452,11 +477,14 @@ export const components = ({
           padding: odysseyTokens.Spacing1,
           marginRight: "unset",
         },
-        popper: {
+        popper: ({ ownerState }) => ({
           background: "transparent",
           paddingBlockStart: odysseyTokens.Spacing1,
-          height: "100%",
-        },
+          ...(ownerState.ListboxComponent !== undefined && {
+            height: "100%",
+            maxHeight: "40vh",
+          }),
+        }),
         paper: ({ ownerState }) => ({
           /**
            * ListboxComponent is used when `isVirtualized` prop is true.
@@ -645,6 +673,28 @@ export const components = ({
               backgroundColor: odysseyTokens.HueRed100,
             },
           }),
+          ...(ownerState.variant === "dangerSecondary" && {
+            backgroundColor: "transparent",
+            borderColor: odysseyTokens.HueNeutral300,
+            color: odysseyTokens.PaletteDangerMain,
+
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              color: odysseyTokens.PaletteDangerMain,
+            },
+
+            "&:active": {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.PaletteDangerMain,
+              color: odysseyTokens.PaletteDangerMain,
+            },
+
+            "&:disabled": {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.PaletteDangerLight,
+              color: odysseyTokens.PaletteDangerLight,
+            },
+          }),
           ...(ownerState.variant === "floating" && {
             backgroundColor: "transparent",
             color: odysseyTokens.TypographyColorBody,
@@ -662,6 +712,23 @@ export const components = ({
               color: odysseyTokens.TypographyColorDisabled,
             },
           }),
+          ...(ownerState.variant === "floatingAction" && {
+            backgroundColor: "transparent",
+            color: odysseyTokens.TypographyColorAction,
+
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral100,
+            },
+
+            "&:active": {
+              backgroundColor: odysseyTokens.HueNeutral200,
+            },
+
+            "&:disabled": {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorDisabled,
+            },
+          }),
           ...(ownerState.size === "small" && {
             height: odysseyTokens.Spacing6,
             paddingBlock: odysseyTokens.Spacing2,
@@ -741,7 +808,11 @@ export const components = ({
           transition: `all ${odysseyTokens.TransitionDurationMain} ${odysseyTokens.TransitionTimingMain}`,
 
           "& img": {
-            height: TILE_IMAGE_HEIGHT,
+            height: CARD_IMAGE_HEIGHT,
+          },
+
+          "&.hasAccessory": {
+            paddingLeft: odysseyTokens.Spacing4,
           },
 
           "&.isClickable:hover": {
@@ -937,6 +1008,44 @@ export const components = ({
             marginInlineEnd: odysseyTokens.Spacing1,
           },
 
+          ...(ownerState.variant === "lamp" && {
+            paddingBlock: 0,
+            paddingInline: 0,
+            borderRadius: 0,
+            border: 0,
+            backgroundColor: "transparent",
+            color: odysseyTokens.TypographyColorBody,
+
+            "&::before": {
+              content: "''",
+              width: odysseyTokens.Spacing2,
+              height: odysseyTokens.Spacing2,
+              marginInlineEnd: odysseyTokens.Spacing2,
+              borderRadius: "100%",
+              backgroundColor: odysseyTokens.HueNeutral600,
+            },
+
+            [`&.${chipClasses.colorError}`]: {
+              "&::before": {
+                border: 0,
+                backgroundColor: odysseyTokens.PaletteDangerMain,
+              },
+            },
+
+            [`&.${chipClasses.colorSuccess}`]: {
+              "&::before": {
+                border: 0,
+                backgroundColor: odysseyTokens.PaletteSuccessMain,
+              },
+            },
+
+            [`&.${chipClasses.colorWarning}`]: {
+              "&::before": {
+                border: 0,
+                backgroundColor: odysseyTokens.HueYellow200,
+              },
+            },
+          }),
           ...(ownerState.variant === "pill" && {
             paddingBlock: odysseyTokens.Spacing1,
             paddingInline: odysseyTokens.Spacing2,
@@ -949,40 +1058,24 @@ export const components = ({
             fontSize: "0.71428571rem",
             textTransform: "uppercase",
 
-            "&::before": {
-              content: "''",
-              width: "0.42857143rem",
-              height: "0.42857143rem",
-              marginInlineEnd: odysseyTokens.Spacing2,
-              borderRadius: "100%",
-              backgroundColor: odysseyTokens.HueNeutral400,
-            },
-
             [`&.${chipClasses.colorError}`]: {
               backgroundColor: odysseyTokens.PaletteDangerLighter,
               color: odysseyTokens.TypographyColorDanger,
+            },
 
-              "&::before": {
-                backgroundColor: odysseyTokens.PaletteDangerMain,
-              },
+            [`&.${chipClasses.colorInfo}`]: {
+              backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              color: odysseyTokens.PalettePrimaryText,
             },
 
             [`&.${chipClasses.colorSuccess}`]: {
               backgroundColor: odysseyTokens.PaletteSuccessLighter,
               color: odysseyTokens.TypographyColorSuccess,
-
-              "&::before": {
-                backgroundColor: odysseyTokens.PaletteSuccessMain,
-              },
             },
 
             [`&.${chipClasses.colorWarning}`]: {
               backgroundColor: odysseyTokens.PaletteWarningLighter,
               color: odysseyTokens.TypographyColorWarning,
-
-              "&::before": {
-                backgroundColor: odysseyTokens.HueYellow200,
-              },
             },
           }),
 
@@ -1046,30 +1139,30 @@ export const components = ({
       }
 
       :not(code) &, :not(pre) & {
-          :lang(el) {
-            font-family: 'Noto Sans', sans-serif;
-          }
+        :lang(el) {
+          font-family: 'Noto Sans', sans-serif;
+        }
 
-          :lang(ja) {
-            font-family: 'Noto Sans JP', sans-serif;
-          }
+        :lang(ja) {
+          font-family: 'Noto Sans JP', sans-serif;
+        }
 
-          :lang(ko) {
-            font-family: 'Noto Sans KR', sans-serif;
-          }
+        :lang(ko) {
+          font-family: 'Noto Sans KR', sans-serif;
+        }
 
-          :lang(th) {
-            font-family: 'Noto Sans Thai', sans-serif;
-          }
+        :lang(th) {
+          font-family: 'Noto Sans Thai', sans-serif;
+        }
 
-          :lang(zh-CN) {
-            font-family: 'Noto Sans SC', sans-serif;
-          }
+        :lang(zh-CN) {
+          font-family: 'Noto Sans SC', sans-serif;
+        }
 
-          :lang(zh-TW) {
-            font-family: 'Noto Sans TC', sans-serif;
-          }
+        :lang(zh-TW) {
+          font-family: 'Noto Sans TC', sans-serif;
         }
+      }
     `,
     },
     MuiDrawer: {
@@ -1441,62 +1534,6 @@ export const components = ({
         },
       },
     },
-    MuiSwitch: {
-      styleOverrides: {
-        root: {
-          position: "relative",
-          padding: `${odysseyTokens.Spacing0} 0`,
-          width: odysseyTokens.Spacing7,
-          height: odysseyTokens.Spacing5,
-          overflow: "visible",
-        },
-        switchBase: ({ ownerState }) => ({
-          top: odysseyTokens.Spacing1,
-          left: odysseyTokens.Spacing1,
-          padding: `${odysseyTokens.Spacing0} 0`,
-
-          ...(ownerState.checked === true && {
-            color: `${odysseyTokens.HueNeutralWhite} !important`,
-            transform: `translateX(${odysseyTokens.Spacing4}) !important`,
-          }),
-
-          "&:hover": {
-            backgroundColor: "transparent",
-
-            ...(ownerState.checked === true && {
-              backgroundColor: "transparent !important",
-            }),
-          },
-          // Had to use `Mui-focusVisible` class here. `:focus-visible` was not being triggered correctly.
-          "&.Mui-focusVisible": {
-            // Focus styles applied this way due to MUI not applying `Mui-focusVisible` class to the correct element see: https://github.com/mui/material-ui/issues/34986
-            " + .MuiSwitch-track": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-            },
-          },
-        }),
-        thumb: {
-          width: odysseyTokens.Spacing4,
-          height: odysseyTokens.Spacing4,
-          boxShadow: "none",
-        },
-        track: ({ ownerState }) => ({
-          borderRadius: odysseyTokens.BorderRadiusRound,
-          backgroundColor: `${odysseyTokens.HueNeutral300}`,
-          opacity: 1,
-
-          ...(ownerState.checked === true && {
-            // !important used to override more specific .Mui-checked class
-            opacity: "1 !important",
-            backgroundColor: `${odysseyTokens.PaletteSuccessLight} !important`,
-          }),
-        }),
-        input: {
-          height: "44px",
-          top: "-14px",
-        },
-      },
-    },
     MuiDialog: {
       defaultProps: {
         scroll: "paper",
@@ -1588,17 +1625,17 @@ export const components = ({
           width: "100%",
           maxWidth: odysseyTokens.TypographyLineLengthMax,
           ...(ownerState.margin === "normal" && {
-            marginTop: 0,
-            marginBottom: odysseyTokens.Spacing4,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
             "&:last-child": {
-              marginBottom: 0,
+              marginBlockEnd: 0,
             },
           }),
           ...(ownerState.margin === "dense" && {
-            marginTop: 0,
-            marginBottom: odysseyTokens.Spacing5,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing5,
             "&:last-child": {
-              marginBottom: 0,
+              marginBlockEnd: 0,
             },
           }),
           ...(ownerState.fullWidth && {
@@ -1607,6 +1644,9 @@ export const components = ({
           [`& .${formGroupClasses.root}`]: {
             marginBlockStart: odysseyTokens.Spacing1,
           },
+          [`&:has(+ [data-file-preview-container])`]: {
+            marginBlockEnd: 0,
+          },
         }),
       },
     },
@@ -1631,6 +1671,7 @@ export const components = ({
           },
           "&.Mui-disabled": {
             pointerEvents: "none",
+            color: odysseyTokens.TypographyColorDisabled,
           },
           [`:has(> .${radioClasses.root})`]: {
             alignItems: "flex-start",
@@ -1651,10 +1692,14 @@ export const components = ({
               color: odysseyTokens.PaletteDangerDark,
             },
         }),
-        label: {
+        label: ({ ownerState }) => ({
           gap: odysseyTokens.Spacing1,
           lineHeight: odysseyTokens.TypographyLineHeightUi,
-        },
+          // !important used to override more specific .Mui-disabled class
+          ...(ownerState.disabled && {
+            color: `${odysseyTokens.TypographyColorDisabled} !important`,
+          }),
+        }),
         asterisk: () => ({
           display: "none",
         }),
@@ -1685,6 +1730,14 @@ export const components = ({
           ".field-hint-link-component": {
             marginInlineStart: odysseyTokens.Spacing1,
           },
+
+          ".Mui-disabled &": {
+            color: odysseyTokens.TypographyColorDisabled,
+
+            a: {
+              color: odysseyTokens.TypographyColorDisabled,
+            },
+          },
         },
       },
     },
@@ -1880,11 +1933,6 @@ export const components = ({
             WebkitAppearance: "none",
           } satisfies CSSProperties,
 
-          [`&::-moz-search-cancel-button`]: {
-            display: "none",
-            MozAppearance: "none",
-          } satisfies CSSProperties,
-
           [`&::-ms-clear`]: {
             display: "none",
           },
@@ -1950,6 +1998,9 @@ export const components = ({
             display: "inline-block",
             height: "1em",
             lineHeight: 1,
+            "& svg": {
+              fontSize: "1em",
+            },
           },
 
           ".Link-indicator": {
@@ -1960,7 +2011,7 @@ export const components = ({
             marginInlineEnd: odysseyTokens.Spacing1,
           },
           svg: {
-            fontSize: "1em",
+            fontSize: "1.2em",
             height: "1em",
             position: "relative",
             insetBlockStart: "-0.0625em",
@@ -2194,6 +2245,9 @@ export const components = ({
       },
       styleOverrides: {
         root: ({ theme }) => ({
+          position: "relative",
+          // to visually align input with label
+          insetBlockStart: `${2 / theme.typography.fontSize}rem`,
           width: `${odysseyTokens.TypographyLineHeightUi}em`,
           minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
           height: `${odysseyTokens.TypographyLineHeightUi}em`,
@@ -2499,38 +2553,34 @@ export const components = ({
       styleOverrides: {
         root: ({ theme, ownerState }) => ({
           ...theme.typography.body1,
-          borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
           textAlign: "start",
           verticalAlign: "baseline",
-          padding: odysseyTokens.Spacing3,
+          padding: `0 ${odysseyTokens.Spacing3} !important`,
+          overflow: "visible !important",
+          position: "relative",
           overflowWrap: "break-word",
 
-          [`.MuiTable-root.narrow &:last-child`]: {
-            width: "auto",
+          [`&.${tableCellClasses.root}`]: {
+            borderTop: `none !important`,
+            borderBottom: `none !important`,
+            borderLeft: `none !important`,
           },
 
-          [`.${tableRowClasses.root}:hover &[rowspan]`]: {
-            backgroundColor: odysseyTokens.HueNeutralWhite,
+          [`.${tableBodyClasses.root} &.${tableCellClasses.root}`]: {
+            borderRight: `none !important`,
           },
 
-          [`.${tableBodyClasses.root} .${tableRowClasses.root}:last-of-type &`]:
-            {
-              borderBottom: 0,
-            },
-
-          [`.${tableBodyClasses.root} .${tableRowClasses.root}:first-of-type &`]:
-            {
-              borderTopColor: odysseyTokens.HueNeutralWhite,
-              borderTopStyle: "solid",
-              borderTopWidth: odysseyTokens.BorderWidthMain,
-            },
-
-          [`.${tableRowClasses.selected} &`]: {
-            borderBottomColor: odysseyTokens.PalettePrimaryLight,
+          [`&.${tableCellClasses.root}.isResizing::after`]: {
+            borderRightColor: odysseyTokens.BorderColorPrimaryControl,
+            borderRightStyle: odysseyTokens.BorderStyleMain,
+            borderRightWidth: 2,
+            content: '""',
+            position: "absolute",
+            right: 0,
           },
 
-          [`.${tableRowClasses.selected}:hover &`]: {
-            borderBottomColor: odysseyTokens.PalettePrimaryMain,
+          [`.MuiTable-root.narrow &:last-child`]: {
+            width: "auto",
           },
 
           ...(ownerState.variant === "action" && {
@@ -2553,14 +2603,15 @@ export const components = ({
 
           [`.${tableHeadClasses.root} &`]: {
             color: odysseyTokens.TypographyColorHeading,
-            fontSize: `0.71428571rem`,
-            lineHeight: odysseyTokens.TypographyLineHeightBody,
             fontWeight: odysseyTokens.TypographyWeightBodyBold,
             textTransform: "uppercase",
             backgroundColor: odysseyTokens.HueNeutral50,
             borderBottom: 0,
             height: `${odysseyTokens.Spacing7} !important`,
             paddingBlock: `${odysseyTokens.Spacing3} !important`,
+            fontSize: odysseyTokens.TypographySizeOverline,
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+            letterSpacing: 1.3,
           },
 
           [`.${tableHeadClasses.root} &:first-of-type`]: {
@@ -2578,7 +2629,25 @@ export const components = ({
               flexGrow: 0,
               width: odysseyTokens.Spacing2,
             },
+          [`.ods-hide-spacer-column .${tableHeadClasses.root} &:last-of-type, .ods-hide-spacer-column .${tableBodyClasses.root} &:last-of-type`]:
+            {
+              display: "none",
+            },
+
+          [`.ods-hide-spacer-column .${tableHeadClasses.root} &:nth-last-of-type(2), .ods-hide-spacer-column .${tableBodyClasses.root} &:nth-last-of-type(2)`]:
+            {
+              borderTopRightRadius: odysseyTokens.Spacing2,
+              borderBottomRightRadius: odysseyTokens.Spacing2,
+              flexGrow: 1,
+
+              [`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: {
+                display: "none",
+              },
+            },
 
+          [`&::after`]: {
+            display: "none",
+          },
           ...(ownerState.variant === "number" && {
             textAlign: "end",
             fontFeatureSettings: '"lnum", "tnum"',
@@ -2586,7 +2655,6 @@ export const components = ({
 
           ...(ownerState.padding === "checkbox" && {
             width: 48, // prevent the checkbox column from growing
-            padding: "0 0 0 4px",
           }),
 
           ...(ownerState.padding === "none" && {
@@ -2610,28 +2678,25 @@ export const components = ({
             textAlign: "justify",
           }),
 
-          ...(ownerState.variant !== "head" && {
-            ["&.MuiTableCell-compact"]: {
-              // TODO: Find a way to tokenize these values.
-              // We can't currently because these are between existing token
-              // values, but we need these precise values to match design.
-              // We use rems so this can scale with the text size.
-              padding: "0.4285714286rem",
-              height: "2.5714285714rem",
-            },
-
-            ["&.MuiTableCell-spacious"]: {
-              padding: odysseyTokens.Spacing4,
-              height: odysseyTokens.Spacing9,
-            },
-          }),
-
           [`& .${checkboxClasses.root}`]: {
             width: `${odysseyTokens.TypographyLineHeightUi}rem`,
             height: `${odysseyTokens.TypographyLineHeightUi}rem`,
             margin: 0,
           },
 
+          [`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: {
+            marginInlineEnd: `-${odysseyTokens.Spacing3}`,
+
+            [`&:active .${dividerClasses.vertical}`]: {
+              borderColor: odysseyTokens.HueNeutral400,
+              opacity: 1,
+            },
+          },
+
+          [`& .Mui-TableHeadCell-Content-Wrapper`]: {
+            flexShrink: 0,
+          },
+
           [`& .${dividerClasses.vertical}`]: {
             borderStyle: "none none none solid",
             borderWidth: 1,
@@ -2644,6 +2709,10 @@ export const components = ({
           ["&.ods-drag-handle svg"]: {
             color: odysseyTokens.HueNeutral500,
           },
+
+          [`& .${buttonBaseClasses.root}`]: {
+            marginBlock: `-${odysseyTokens.Spacing2}`,
+          },
         }),
       },
     },
@@ -2670,50 +2739,84 @@ export const components = ({
     MuiTableRow: {
       styleOverrides: {
         root: () => ({
+          borderTop: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
+          transition: "none !important",
           verticalAlign: "unset",
+
+          [`&:hover`]: {
+            backgroundColor: `${odysseyTokens.HueNeutral50} !important`,
+          },
+
+          [`&:first-of-type`]: {
+            borderTopColor: odysseyTokens.HueNeutralWhite,
+          },
+
           [`&.${tableRowClasses.selected}`]: {
-            backgroundColor: odysseyTokens.PalettePrimaryLighter,
+            backgroundColor: `${odysseyTokens.PalettePrimaryLighter} !important`,
+
             "&:hover": {
-              backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              backgroundColor: `${odysseyTokens.PalettePrimaryLighter} !important`,
+            },
+
+            [`&:hover + .${tableRowClasses.root}`]: {
+              borderTopColor: odysseyTokens.PalettePrimaryMain,
             },
           },
+          [`.${tableRowClasses.selected} + &`]: {
+            borderTopColor: odysseyTokens.PalettePrimaryLight,
+          },
           [`&.${tableRowClasses.head}`]: {
             boxShadow: "none !important",
+            borderBottom: 0,
 
             "&:hover, &:focus-within": {
               backgroundColor: "transparent !important",
             },
           },
 
-          "&.isDragTarget": {
-            opacity: 1,
-            position: "relative",
+          [`.${tableBodyClasses.root} &`]: {
+            // Target is 48px height
+            paddingBlock: odysseyTokens.Spacing3,
 
-            "&::after": {
-              content: '""',
-              width: "100%",
-              position: "absolute",
-              left: 0,
-              right: 0,
-              bottom: 0,
-              height: odysseyTokens.Spacing1,
-              backgroundColor: odysseyTokens.PalettePrimaryMain,
+            [`& .${tableCellClasses.root}::after`]: {
+              top: `-${odysseyTokens.Spacing3} !important`,
+              bottom: `-${odysseyTokens.Spacing3} !important`,
             },
+          },
 
-            "& td": {
-              borderTop: "0 !important",
-              borderLeft: "0 !important",
-              borderRight: "0 !important",
-              borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100} !important`,
+          [`.${tableBodyClasses.root}.MuiTableBody-compact &`]: {
+            // Target is 36px height
+            paddingBlock: odysseyTokens.Spacing2,
+
+            [`& .${tableCellClasses.root}::after`]: {
+              top: `-${odysseyTokens.Spacing2} !important`,
+              bottom: `-${odysseyTokens.Spacing2} !important`,
             },
           },
 
-          "&.isDragging, &.isDragging.isDragTarget": {
-            border: "0 !important",
-            position: "relative",
+          [`.${tableBodyClasses.root}.MuiTableBody-spacious &`]: {
+            // Target is 56px height
+            paddingBlock: odysseyTokens.Spacing4,
+
+            [`& .${tableCellClasses.root}::after`]: {
+              top: `-${odysseyTokens.Spacing4} !important`,
+              bottom: `-${odysseyTokens.Spacing4} !important`,
+            },
+          },
+
+          "&.isDragTarget": {
             opacity: 1,
+            position: "relative",
+            backgroundColor: odysseyTokens.PalettePrimaryMain,
             borderRadius: odysseyTokens.BorderRadiusOuter,
 
+            [`& td.${tableCellClasses.root}`]: {
+              borderTop: "0 !important",
+              borderRight: "0 !important",
+              borderBottom: "0 !important",
+              borderLeft: "0 !important",
+            },
+
             "&::after": {
               content: '""',
               position: "absolute",
@@ -2721,26 +2824,46 @@ export const components = ({
               right: 0,
               top: 0,
               bottom: 0,
-              height: "auto",
-              borderRadius: odysseyTokens.BorderRadiusOuter,
               borderColor: odysseyTokens.PalettePrimaryLight,
-              borderStyle: "solid",
-              borderWidth: odysseyTokens.Spacing1,
-              backgroundColor: "transparent",
+              borderStyle: "dashed",
+              borderWidth: 2,
+              borderRadius: odysseyTokens.BorderRadiusOuter,
             },
+          },
 
-            "& td": {
-              borderTop: "0 !important",
-              borderLeft: "0 !important",
-              borderRight: "0 !important",
-              borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100} !important`,
-              opacity: 0.5,
-            },
+          "&.isDragging": {
+            borderRadius: odysseyTokens.BorderRadiusOuter,
+          },
+
+          "&.isDragging::after": {
+            content: '""',
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            borderColor: odysseyTokens.HueNeutral200,
+            borderStyle: "dashed",
+            borderWidth: 2,
+            borderRadius: odysseyTokens.BorderRadiusOuter,
+          },
+
+          "&.isDragging, &.isDragging.isDragTarget": {
+            position: "relative",
+            opacity: 1,
+            backgroundColor: "transparent",
           },
 
           "&.isDragging.isDragTarget::after": {
-            borderColor: odysseyTokens.PalettePrimaryMain,
+            borderColor: odysseyTokens.PalettePrimaryLight,
+            left: 0,
+            right: 0,
           },
+
+          [`&.isDragging + .${tableRowClasses.root}, &.isDragTarget + .${tableRowClasses.root}`]:
+            {
+              borderTopColor: "transparent",
+            },
         }),
       },
     },
@@ -2752,6 +2875,7 @@ export const components = ({
           justifyContent: "flex-start",
           flexDirection: "inherit",
           alignItems: "center",
+          marginInlineEnd: odysseyTokens.Spacing3,
           "&:focus-visible": {
             color: odysseyTokens.TypographyColorBody,
             outlineOffset: odysseyTokens.Spacing4,