@okta/odyssey-react-mui 1.15.9 → 1.20.0

package/dist/theme/components.js

@@ -13,6 +13,7 @@
 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";
@@ -30,9 +31,10 @@ 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.js";
+import { CARD_IMAGE_HEIGHT } from "../Card.js";
 import { 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";
@@ -74,6 +76,10 @@ export const components = ({
             borderBottomColor: odysseyTokens.BorderColorDisplay,
             borderBottomStyle: "solid",
             borderBottomWidth: odysseyTokens.BorderWidthMain
+          },
+          "&.nav-accordion": {
+            border: "0 !important",
+            width: "100%"
           }
         })
       }
@@ -92,6 +98,20 @@ export const components = ({
             outlineWidth: 2,
             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: () => ({
@@ -107,7 +127,12 @@ export const components = ({
       styleOverrides: {
         root: () => ({
           paddingInline: odysseyTokens.Spacing3,
-          paddingBlock: odysseyTokens.Spacing4
+          paddingBlock: odysseyTokens.Spacing4,
+          "&.nav-accordion-details": {
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: odysseyTokens.Spacing2
+          }
         })
       }
     },
@@ -400,11 +425,16 @@ 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
         }) => ({
@@ -571,6 +601,25 @@ 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,
@@ -585,6 +634,20 @@ 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,
@@ -658,7 +721,10 @@ export const components = ({
           position: "relative",
           transition: `all ${odysseyTokens.TransitionDurationMain} ${odysseyTokens.TransitionTimingMain}`,
           "& img": {
-            height: TILE_IMAGE_HEIGHT
+            height: CARD_IMAGE_HEIGHT
+          },
+          "&.hasAccessory": {
+            paddingLeft: odysseyTokens.Spacing4
           },
           "&.isClickable:hover": {
             backgroundColor: odysseyTokens.HueNeutral50,
@@ -835,47 +901,68 @@ export const components = ({
             margin: 0,
             marginInlineEnd: odysseyTokens.Spacing1
           },
-          ...(ownerState.variant === "pill" && {
-            paddingBlock: odysseyTokens.Spacing1,
-            paddingInline: odysseyTokens.Spacing2,
-            borderRadius: odysseyTokens.BorderRadiusMain,
+          ...(ownerState.variant === "lamp" && {
+            paddingBlock: 0,
+            paddingInline: 0,
+            borderRadius: 0,
             border: 0,
-            fontWeight: odysseyTokens.TypographyWeightHeadingBold,
-            lineHeight: odysseyTokens.TypographyLineHeightOverline,
-            backgroundColor: odysseyTokens.HueNeutral50,
-            color: odysseyTokens.TypographyColorSubordinate,
-            fontSize: "0.71428571rem",
-            textTransform: "uppercase",
+            backgroundColor: "transparent",
+            color: odysseyTokens.TypographyColorBody,
             "&::before": {
               content: "''",
-              width: "0.42857143rem",
-              height: "0.42857143rem",
+              width: odysseyTokens.Spacing2,
+              height: odysseyTokens.Spacing2,
               marginInlineEnd: odysseyTokens.Spacing2,
               borderRadius: "100%",
-              backgroundColor: odysseyTokens.HueNeutral400
+              backgroundColor: odysseyTokens.HueNeutral600
             },
             [`&.${chipClasses.colorError}`]: {
-              backgroundColor: odysseyTokens.PaletteDangerLighter,
-              color: odysseyTokens.TypographyColorDanger,
               "&::before": {
+                border: 0,
                 backgroundColor: odysseyTokens.PaletteDangerMain
               }
             },
             [`&.${chipClasses.colorSuccess}`]: {
-              backgroundColor: odysseyTokens.PaletteSuccessLighter,
-              color: odysseyTokens.TypographyColorSuccess,
               "&::before": {
+                border: 0,
                 backgroundColor: odysseyTokens.PaletteSuccessMain
               }
             },
             [`&.${chipClasses.colorWarning}`]: {
-              backgroundColor: odysseyTokens.PaletteWarningLighter,
-              color: odysseyTokens.TypographyColorWarning,
               "&::before": {
+                border: 0,
                 backgroundColor: odysseyTokens.HueYellow200
               }
             }
           }),
+          ...(ownerState.variant === "pill" && {
+            paddingBlock: odysseyTokens.Spacing1,
+            paddingInline: odysseyTokens.Spacing2,
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            border: 0,
+            fontWeight: odysseyTokens.TypographyWeightHeadingBold,
+            lineHeight: odysseyTokens.TypographyLineHeightOverline,
+            backgroundColor: odysseyTokens.HueNeutral50,
+            color: odysseyTokens.TypographyColorSubordinate,
+            fontSize: "0.71428571rem",
+            textTransform: "uppercase",
+            [`&.${chipClasses.colorError}`]: {
+              backgroundColor: odysseyTokens.PaletteDangerLighter,
+              color: odysseyTokens.TypographyColorDanger
+            },
+            [`&.${chipClasses.colorInfo}`]: {
+              backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              color: odysseyTokens.PalettePrimaryText
+            },
+            [`&.${chipClasses.colorSuccess}`]: {
+              backgroundColor: odysseyTokens.PaletteSuccessLighter,
+              color: odysseyTokens.TypographyColorSuccess
+            },
+            [`&.${chipClasses.colorWarning}`]: {
+              backgroundColor: odysseyTokens.PaletteWarningLighter,
+              color: odysseyTokens.TypographyColorWarning
+            }
+          }),
           [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
             backgroundColor: odysseyTokens.HueNeutral200
           }
@@ -935,30 +1022,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: {
@@ -1271,59 +1358,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"
-            })
-          },
-          "&.Mui-focusVisible": {
-            " + .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 && {
-            opacity: "1 !important",
-            backgroundColor: `${odysseyTokens.PaletteSuccessLight} !important`
-          })
-        }),
-        input: {
-          height: "44px",
-          top: "-14px"
-        }
-      }
-    },
     MuiDialog: {
       defaultProps: {
         scroll: "paper"
@@ -1412,17 +1446,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 && {
@@ -1430,6 +1464,9 @@ export const components = ({
           }),
           [`& .${formGroupClasses.root}`]: {
             marginBlockStart: odysseyTokens.Spacing1
+          },
+          [`&:has(+ [data-file-preview-container])`]: {
+            marginBlockEnd: 0
           }
         })
       }
@@ -1456,7 +1493,8 @@ export const components = ({
             marginBottom: odysseyTokens.Spacing2
           },
           "&.Mui-disabled": {
-            pointerEvents: "none"
+            pointerEvents: "none",
+            color: odysseyTokens.TypographyColorDisabled
           },
           [`:has(> .${radioClasses.root})`]: {
             alignItems: "flex-start"
@@ -1474,10 +1512,15 @@ export const components = ({
             color: odysseyTokens.PaletteDangerDark
           }
         }),
-        label: {
+        label: ({
+          ownerState
+        }) => ({
           gap: odysseyTokens.Spacing1,
-          lineHeight: odysseyTokens.TypographyLineHeightUi
-        },
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          ...(ownerState.disabled && {
+            color: `${odysseyTokens.TypographyColorDisabled} !important`
+          })
+        }),
         asterisk: () => ({
           display: "none"
         })
@@ -1506,6 +1549,12 @@ export const components = ({
           textAlign: "start",
           ".field-hint-link-component": {
             marginInlineStart: odysseyTokens.Spacing1
+          },
+          ".Mui-disabled &": {
+            color: odysseyTokens.TypographyColorDisabled,
+            a: {
+              color: odysseyTokens.TypographyColorDisabled
+            }
           }
         }
       }
@@ -1745,7 +1794,10 @@ export const components = ({
           ".Link-indicator, .Link-icon": {
             display: "inline-block",
             height: "1em",
-            lineHeight: 1
+            lineHeight: 1,
+            "& svg": {
+              fontSize: "1em"
+            }
           },
           ".Link-indicator": {
             marginInlineStart: odysseyTokens.Spacing1
@@ -1754,7 +1806,7 @@ export const components = ({
             marginInlineEnd: odysseyTokens.Spacing1
           },
           svg: {
-            fontSize: "1em",
+            fontSize: "1.2em",
             height: "1em",
             position: "relative",
             insetBlockStart: "-0.0625em",
@@ -1966,6 +2018,8 @@ export const components = ({
         root: ({
           theme
         }) => ({
+          position: "relative",
+          insetBlockStart: `${2 / theme.typography.fontSize}rem`,
           width: `${odysseyTokens.TypographyLineHeightUi}em`,
           minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
           height: `${odysseyTokens.TypographyLineHeightUi}em`,
@@ -2244,31 +2298,19 @@ export const components = ({
           ownerState
         }) => ({
           ...theme.typography.body1,
-          borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
           textAlign: "start",
           verticalAlign: "baseline",
-          padding: odysseyTokens.Spacing3,
+          padding: `0 ${odysseyTokens.Spacing3} !important`,
           overflowWrap: "break-word",
+          [`&.${tableCellClasses.root}`]: {
+            borderTop: `none !important`,
+            borderRight: `none !important`,
+            borderBottom: `none !important`,
+            borderLeft: `none !important`
+          },
           [`.MuiTable-root.narrow &:last-child`]: {
             width: "auto"
           },
-          [`.${tableRowClasses.root}:hover &[rowspan]`]: {
-            backgroundColor: odysseyTokens.HueNeutralWhite
-          },
-          [`.${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
-          },
-          [`.${tableRowClasses.selected}:hover &`]: {
-            borderBottomColor: odysseyTokens.PalettePrimaryMain
-          },
           ...(ownerState.variant === "action" && {
             paddingBlock: 0
           }),
@@ -2285,14 +2327,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`
+            paddingBlock: `${odysseyTokens.Spacing3} !important`,
+            fontSize: odysseyTokens.TypographySizeOverline,
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+            letterSpacing: 1.3
           },
           [`.${tableHeadClasses.root} &:first-of-type`]: {
             borderTopLeftRadius: odysseyTokens.Spacing2,
@@ -2306,13 +2349,15 @@ export const components = ({
             flexGrow: 0,
             width: odysseyTokens.Spacing2
           },
+          [`&::after`]: {
+            display: "none"
+          },
           ...(ownerState.variant === "number" && {
             textAlign: "end",
             fontFeatureSettings: '"lnum", "tnum"'
           }),
           ...(ownerState.padding === "checkbox" && {
-            width: 48,
-            padding: "0 0 0 4px"
+            width: 48
           }),
           ...(ownerState.padding === "none" && {
             padding: 0
@@ -2330,21 +2375,17 @@ export const components = ({
           ...(ownerState.align === "justify" && {
             textAlign: "justify"
           }),
-          ...(ownerState.variant !== "head" && {
-            ["&.MuiTableCell-compact"]: {
-              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}`
+          },
+          [`& .Mui-TableHeadCell-Content-Wrapper`]: {
+            flexShrink: 0
+          },
           [`& .${dividerClasses.vertical}`]: {
             borderStyle: "none none none solid",
             borderWidth: 1,
@@ -2355,6 +2396,9 @@ export const components = ({
           },
           ["&.ods-drag-handle svg"]: {
             color: odysseyTokens.HueNeutral500
+          },
+          [`& .${buttonBaseClasses.root}`]: {
+            marginBlock: `-${odysseyTokens.Spacing2}`
           }
         })
       }
@@ -2381,44 +2425,54 @@ 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"
             }
           },
+          [`.${tableBodyClasses.root} &`]: {
+            paddingBlock: odysseyTokens.Spacing3
+          },
+          [`.${tableBodyClasses.root}.MuiTableBody-compact &`]: {
+            paddingBlock: odysseyTokens.Spacing2
+          },
+          [`.${tableBodyClasses.root}.MuiTableBody-spacious &`]: {
+            paddingBlock: odysseyTokens.Spacing4
+          },
           "&.isDragTarget": {
             opacity: 1,
             position: "relative",
-            "&::after": {
-              content: '""',
-              width: "100%",
-              position: "absolute",
-              left: 0,
-              right: 0,
-              bottom: 0,
-              height: odysseyTokens.Spacing1,
-              backgroundColor: odysseyTokens.PalettePrimaryMain
-            },
-            "& td": {
+            backgroundColor: odysseyTokens.PalettePrimaryMain,
+            borderRadius: odysseyTokens.BorderRadiusOuter,
+            [`& td.${tableCellClasses.root}`]: {
               borderTop: "0 !important",
-              borderLeft: "0 !important",
               borderRight: "0 !important",
-              borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100} !important`
-            }
-          },
-          "&.isDragging, &.isDragging.isDragTarget": {
-            border: "0 !important",
-            position: "relative",
-            opacity: 1,
-            borderRadius: odysseyTokens.BorderRadiusOuter,
+              borderBottom: "0 !important",
+              borderLeft: "0 !important"
+            },
             "&::after": {
               content: '""',
               position: "absolute",
@@ -2426,23 +2480,39 @@ export const components = ({
               right: 0,
               top: 0,
               bottom: 0,
-              height: "auto",
-              borderRadius: odysseyTokens.BorderRadiusOuter,
               borderColor: odysseyTokens.PalettePrimaryLight,
-              borderStyle: "solid",
-              borderWidth: odysseyTokens.Spacing1,
-              backgroundColor: "transparent"
-            },
-            "& td": {
-              borderTop: "0 !important",
-              borderLeft: "0 !important",
-              borderRight: "0 !important",
-              borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100} !important`,
-              opacity: 0.5
+              borderStyle: "dashed",
+              borderWidth: 2,
+              borderRadius: odysseyTokens.BorderRadiusOuter
             }
           },
+          "&.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"
           }
         })
       }
@@ -2455,6 +2525,7 @@ export const components = ({
           justifyContent: "flex-start",
           flexDirection: "inherit",
           alignItems: "center",
+          marginInlineEnd: odysseyTokens.Spacing3,
           "&:focus-visible": {
             color: odysseyTokens.TypographyColorBody,
             outlineOffset: odysseyTokens.Spacing4,