@okta/odyssey-react-mui 1.23.0 → 1.24.0

package/src/theme/components.tsx

@@ -253,6 +253,8 @@ export const components = ({
             justifyContent: "center",
             alignItems: "center",
             borderRadius: 0,
+            borderWidth: 0,
+            borderBottomWidth: "1px",
 
             ...(ownerState.onClose !== undefined && {
               paddingInline: odysseyTokens.Spacing6,
@@ -575,207 +577,164 @@ export const components = ({
         disableElevation: true,
       },
       styleOverrides: {
-        root: ({ ownerState }) => ({
-          minWidth: "unset",
-          paddingBlock: odysseyTokens.Spacing3,
-          paddingInline: odysseyTokens.Spacing4,
-          display: "inline-flex",
-          height: odysseyTokens.Spacing7,
-          position: "relative",
-          marginBlock: "0",
-          marginInline: "0",
-          transitionProperty:
-            "color, background-color, border-color, box-shadow",
-          transitionDuration: "100ms",
-          transitionTimingFunction: "linear",
-          borderWidth: odysseyTokens.BorderWidthMain,
-          borderStyle: odysseyTokens.BorderStyleMain,
-          borderRadius: odysseyTokens.BorderRadiusMain,
-          borderColor: "transparent",
-          fontSize: odysseyTokens.TypographySizeBody,
-          fontWeight: odysseyTokens.TypographyWeightHeading,
-          fontFamily: odysseyTokens.TypographyFamilyButton,
-          lineHeight: odysseyTokens.TypographyLineHeightUi,
-          whiteSpace: "nowrap",
-
-          [`.${buttonClasses.root} + &`]: {
-            marginInlineStart: odysseyTokens.Spacing2,
-          },
-
-          "&:focus-visible": {
-            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-            outline: "2px solid transparent",
-            outlineOffset: "1px",
-          },
-
-          "&:disabled": {
-            pointerEvents: "none",
-          },
-
-          [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: {
-            "& > *:nth-of-type(1)": {
-              fontSize: `${odysseyTokens.TypographyLineHeightUi}em`,
-            },
-          },
+        root: ({ ownerState, theme }) => {
+          const contrastMode = theme.odysseyContrastMode;
 
-          ...(ownerState.variant === "primary" && {
-            color: odysseyTokens.HueNeutralWhite,
-            backgroundColor: odysseyTokens.PalettePrimaryMain,
+          return {
+            minWidth: "unset",
+            paddingBlock: odysseyTokens.Spacing3,
+            paddingInline: odysseyTokens.Spacing4,
+            display: "inline-flex",
+            height: odysseyTokens.Spacing7,
+            position: "relative",
+            marginBlock: "0",
+            marginInline: "0",
+            transitionProperty:
+              "color, background-color, border-color, box-shadow",
+            transitionDuration: "100ms",
+            transitionTimingFunction: "linear",
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            borderColor: "transparent",
+            fontSize: odysseyTokens.TypographySizeBody,
+            fontWeight: odysseyTokens.TypographyWeightHeading,
+            fontFamily: odysseyTokens.TypographyFamilyButton,
+            lineHeight: odysseyTokens.TypographyLineHeightUi,
+            whiteSpace: "nowrap",
 
-            "&:hover": {
-              backgroundColor: odysseyTokens.PalettePrimaryDark,
+            [`.${buttonClasses.root} + &`]: {
+              marginInlineStart: odysseyTokens.Spacing2,
             },
 
-            "&:active": {
-              backgroundColor: odysseyTokens.PalettePrimaryDarker,
+            "&:focus-visible": {
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px",
             },
 
             "&:disabled": {
-              color: odysseyTokens.PalettePrimaryLight,
-              backgroundColor: odysseyTokens.HueBlue100,
-            },
-          }),
-
-          ...(ownerState.variant === "secondary" && {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.HueNeutral300,
-            color: odysseyTokens.TypographyColorBody,
-
-            "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral100,
+              pointerEvents: "none",
             },
 
-            "&:active": {
-              backgroundColor: "transparent",
-              borderColor: odysseyTokens.BorderColorPrimaryControl,
-              color: odysseyTokens.TypographyColorAction,
+            [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: {
+              "& > *:nth-of-type(1)": {
+                fontSize: `${odysseyTokens.TypographyLineHeightUi}em`,
+              },
             },
 
-            "&:disabled": {
-              backgroundColor: odysseyTokens.HueNeutral100,
-              borderColor: "transparent",
-              color: odysseyTokens.TypographyColorDisabled,
-            },
-          }),
+            ...(ownerState.variant === "primary" && {
+              color: odysseyTokens.HueNeutralWhite,
+              backgroundColor: odysseyTokens.PalettePrimaryMain,
 
-          ...(ownerState.variant === "danger" && {
-            backgroundColor: odysseyTokens.PaletteDangerMain,
-            color: odysseyTokens.HueNeutralWhite,
+              "&:hover": {
+                backgroundColor: odysseyTokens.PalettePrimaryDark,
+              },
 
-            "&:hover": {
-              backgroundColor: odysseyTokens.PaletteDangerDark,
-            },
+              "&:active": {
+                backgroundColor: odysseyTokens.PalettePrimaryDarker,
+              },
 
-            "&:focus-visible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
-            },
+              "&:disabled": {
+                color: odysseyTokens.PalettePrimaryLight,
+                backgroundColor: odysseyTokens.HueBlue100,
+              },
+            }),
 
-            "&:active": {
-              backgroundColor: odysseyTokens.PaletteDangerDarker,
-            },
+            ...(ownerState.variant === "secondary" && {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral300,
+              color: odysseyTokens.TypographyColorBody,
 
-            "&:disabled": {
-              color: odysseyTokens.PaletteDangerLight,
-              backgroundColor: odysseyTokens.HueRed100,
-            },
-          }),
-          ...(ownerState.variant === "dangerSecondary" && {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.HueNeutral300,
-            color: odysseyTokens.PaletteDangerMain,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral100,
+              },
 
-            "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral100,
-              color: odysseyTokens.PaletteDangerMain,
-            },
+              "&:active": {
+                backgroundColor: "transparent",
+                borderColor: odysseyTokens.BorderColorPrimaryControl,
+                color: odysseyTokens.TypographyColorAction,
+              },
 
-            "&:active": {
-              backgroundColor: "transparent",
-              borderColor: odysseyTokens.PaletteDangerMain,
-              color: odysseyTokens.PaletteDangerMain,
-            },
+              "&:disabled": {
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.HueNeutral200,
+                  borderColor: "transparent",
+                  color: odysseyTokens.TypographyColorDisabled,
+                }),
 
-            "&:disabled": {
-              backgroundColor: "transparent",
-              borderColor: odysseyTokens.PaletteDangerLight,
-              color: odysseyTokens.PaletteDangerLight,
-            },
-          }),
-          ...(ownerState.variant === "floating" && {
-            backgroundColor: "transparent",
-            color: odysseyTokens.TypographyColorBody,
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.HueNeutral100,
+                  borderColor: "transparent",
+                  color: odysseyTokens.TypographyColorDisabled,
+                }),
+              },
+            }),
 
-            "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral100,
-            },
+            ...(ownerState.variant === "danger" && {
+              backgroundColor: odysseyTokens.PaletteDangerMain,
+              color: odysseyTokens.HueNeutralWhite,
 
-            "&:active": {
-              backgroundColor: odysseyTokens.HueNeutral200,
-            },
+              "&:hover": {
+                backgroundColor: odysseyTokens.PaletteDangerDark,
+              },
 
-            "&:disabled": {
-              backgroundColor: "transparent",
-              color: odysseyTokens.TypographyColorDisabled,
-            },
-          }),
-          ...(ownerState.variant === "floatingAction" && {
-            backgroundColor: "transparent",
-            color: odysseyTokens.TypographyColorAction,
+              "&:focus-visible": {
+                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`,
+              },
 
-            "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral100,
-            },
+              "&:active": {
+                backgroundColor: odysseyTokens.PaletteDangerDarker,
+              },
 
-            "&:active": {
-              backgroundColor: odysseyTokens.HueNeutral200,
-            },
+              "&:disabled": {
+                color: odysseyTokens.PaletteDangerLight,
+                backgroundColor: odysseyTokens.HueRed100,
+              },
+            }),
 
-            "&:disabled": {
+            ...(ownerState.variant === "dangerSecondary" && {
               backgroundColor: "transparent",
-              color: odysseyTokens.TypographyColorDisabled,
-            },
-          }),
-          ...(ownerState.size === "small" && {
-            height: odysseyTokens.Spacing6,
-            paddingBlock: odysseyTokens.Spacing2,
-            paddingInline: odysseyTokens.Spacing3,
-            fontSize: odysseyTokens.TypographySizeBody,
-          }),
-          ...(ownerState.size === "large" && {
-            height: odysseyTokens.Spacing8,
-            paddingBlock: odysseyTokens.Spacing4,
-            paddingInline: odysseyTokens.Spacing4,
-          }),
-          ...(ownerState.fullWidth === true && {
-            width: "100%",
-            marginBlock: "0",
-            marginInline: "0",
+              borderColor: odysseyTokens.HueNeutral300,
+              color: odysseyTokens.PaletteDangerMain,
 
-            "&:not(:last-child)": {
-              marginBlockEnd: odysseyTokens.Spacing4,
-            },
-          }),
-          ...(ownerState.children === "" && {
-            minWidth: "auto",
-            padding: odysseyTokens.Spacing3,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                color: odysseyTokens.PaletteDangerMain,
+              },
 
-            [`.${buttonClasses.endIcon}, .${buttonClasses.startIcon}`]: {
-              margin: "0",
-            },
+              "&:active": {
+                backgroundColor: "transparent",
+                borderColor: odysseyTokens.PaletteDangerMain,
+                color: odysseyTokens.PaletteDangerMain,
+              },
 
-            ...(ownerState.size === "large" && {
-              padding: odysseyTokens.Spacing4,
+              "&:disabled": {
+                backgroundColor: "transparent",
+                borderColor: odysseyTokens.PaletteDangerLight,
+                color: odysseyTokens.PaletteDangerLight,
+              },
             }),
 
-            ...(ownerState.size === "small" && {
-              padding: odysseyTokens.Spacing2,
-            }),
+            ...(ownerState.variant === "floating" && {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorBody,
+
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral100,
+              },
+
+              "&:active": {
+                backgroundColor: odysseyTokens.HueNeutral200,
+              },
 
-            ...(ownerState.size === "large" && {
-              padding: odysseyTokens.Spacing4,
+              "&:disabled": {
+                backgroundColor: "transparent",
+                color: odysseyTokens.TypographyColorDisabled,
+              },
             }),
-          }),
-        }),
+          };
+        },
 
         endIcon: ({ ownerState }) => ({
           display: "inline-flex",
@@ -988,136 +947,172 @@ export const components = ({
         },
       },
     },
+
     MuiChip: {
       defaultProps: {
         deleteIcon: <CloseCircleFilledIcon />,
       },
       styleOverrides: {
-        root: ({ ownerState }) => ({
-          height: "auto",
-          paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
-          paddingInline: odysseyTokens.Spacing3,
-          fontSize: odysseyTokens.TypographySizeBody,
-          lineHeight: odysseyTokens.TypographyLineHeightUi,
-          borderRadius: odysseyTokens.BorderRadiusRound,
-          backgroundColor: odysseyTokens.HueNeutral100,
-          borderWidth: odysseyTokens.BorderWidthMain,
-          borderColor: odysseyTokens.HueNeutral200,
-          borderStyle: odysseyTokens.BorderStyleMain,
-          color: odysseyTokens.HueNeutral700,
+        root: ({ ownerState, theme }) => {
+          const contrastMode = theme.odysseyContrastMode;
+          return {
+            height: "auto",
+            paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
+            paddingInline: odysseyTokens.Spacing3,
+            fontSize: odysseyTokens.TypographySizeBody,
+            lineHeight: odysseyTokens.TypographyLineHeightUi,
+            borderRadius: odysseyTokens.BorderRadiusRound,
+            backgroundColor: odysseyTokens.HueNeutral100,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderColor: odysseyTokens.HueNeutral200,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            color: odysseyTokens.HueNeutral700,
 
-          ...(ownerState.onDelete && {
-            paddingInlineEnd: odysseyTokens.Spacing2,
-          }),
+            ...(ownerState.onDelete && {
+              paddingInlineEnd: odysseyTokens.Spacing2,
+            }),
 
-          [`&.${chipClasses.disabled}`]: {
-            opacity: 1,
-            pointerEvents: "none",
-            borderColor: odysseyTokens.BorderColorDisabled,
-            color: odysseyTokens.TypographyColorDisabled,
+            [`&.${chipClasses.disabled}`]: {
+              opacity: 1,
+              pointerEvents: "none",
+              borderColor: odysseyTokens.BorderColorDisabled,
+              color: odysseyTokens.TypographyColorDisabled,
 
-            [`& .${chipClasses.deleteIcon}`]: {
-              color: odysseyTokens.HueNeutral300,
+              [`& .${chipClasses.deleteIcon}`]: {
+                color: odysseyTokens.HueNeutral300,
+              },
             },
-          },
 
-          ...(ownerState.clickable && {
-            "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral200,
-            },
-            [`&.${chipClasses.focusVisible}`]: {
-              backgroundColor: odysseyTokens.HueNeutral200,
-              outlineColor: odysseyTokens.FocusOutlineColorPrimary,
-              outlineOffset: odysseyTokens.FocusOutlineOffsetTight,
-              outlineStyle: odysseyTokens.FocusOutlineStyle,
-              outlineWidth: odysseyTokens.FocusOutlineWidthMain,
-            },
-            "&:active": {
-              boxShadow: "none",
-              backgroundColor: odysseyTokens.HueNeutral300,
+            ...(ownerState.clickable && {
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral200,
+              },
+              [`&.${chipClasses.focusVisible}`]: {
+                backgroundColor: odysseyTokens.HueNeutral200,
+                outlineColor: odysseyTokens.FocusOutlineColorPrimary,
+                outlineOffset: odysseyTokens.FocusOutlineOffsetTight,
+                outlineStyle: odysseyTokens.FocusOutlineStyle,
+                outlineWidth: odysseyTokens.FocusOutlineWidthMain,
+              },
+              "&:active": {
+                boxShadow: "none",
+                backgroundColor: odysseyTokens.HueNeutral300,
+              },
+            }),
+
+            [`& .${chipClasses.icon}`]: {
+              margin: 0,
+              marginInlineEnd: odysseyTokens.Spacing1,
             },
-          }),
 
-          [`& .${chipClasses.icon}`]: {
-            margin: 0,
-            marginInlineEnd: odysseyTokens.Spacing1,
-          },
+            ...(ownerState.variant === "lamp" && {
+              paddingBlock: 0,
+              paddingInline: 0,
+              borderRadius: 0,
+              border: 0,
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorBody,
 
-          ...(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,
+              },
 
-            "&::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.colorError}`]: {
-              "&::before": {
-                border: 0,
-                backgroundColor: odysseyTokens.PaletteDangerMain,
+              [`&.${chipClasses.colorSuccess}`]: {
+                "&::before": {
+                  border: 0,
+                  backgroundColor: odysseyTokens.PaletteSuccessMain,
+                },
               },
-            },
 
-            [`&.${chipClasses.colorSuccess}`]: {
-              "&::before": {
-                border: 0,
-                backgroundColor: odysseyTokens.PaletteSuccessMain,
+              [`&.${chipClasses.colorWarning}`]: {
+                "&::before": {
+                  border: 0,
+                  backgroundColor: odysseyTokens.HueYellow200,
+                },
               },
-            },
+            }),
 
-            [`&.${chipClasses.colorWarning}`]: {
-              "&::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,
+              fontSize: "0.71428571rem",
+              textTransform: "uppercase",
+
+              ...(contrastMode === "lowContrast" && {
+                backgroundColor: odysseyTokens.HueNeutral200,
+                color: odysseyTokens.HueNeutral700,
+              }),
+              ...(contrastMode === "highContrast" && {
+                backgroundColor: odysseyTokens.HueNeutral50,
+                color: odysseyTokens.TypographyColorSubordinate,
+              }),
+
+              [`&.${chipClasses.colorError}`]: {
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.HueRed100,
+                  color: odysseyTokens.HueRed700,
+                }),
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.PaletteDangerLighter,
+                  color: odysseyTokens.TypographyColorDanger,
+                }),
               },
-            },
-          }),
-          ...(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}`]: {
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.HueBlue100,
+                  color: odysseyTokens.HueBlue700,
+                }),
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.PalettePrimaryLighter,
+                  color: odysseyTokens.PalettePrimaryText,
+                }),
+              },
 
-            [`&.${chipClasses.colorInfo}`]: {
-              backgroundColor: odysseyTokens.PalettePrimaryLighter,
-              color: odysseyTokens.PalettePrimaryText,
-            },
+              [`&.${chipClasses.colorSuccess}`]: {
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.HueGreen200,
+                  color: odysseyTokens.HueGreen700,
+                }),
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.PaletteSuccessLighter,
+                  color: odysseyTokens.TypographyColorSuccess,
+                }),
+              },
 
-            [`&.${chipClasses.colorSuccess}`]: {
-              backgroundColor: odysseyTokens.PaletteSuccessLighter,
-              color: odysseyTokens.TypographyColorSuccess,
-            },
+              [`&.${chipClasses.colorWarning}`]: {
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.HueYellow100,
+                  color: odysseyTokens.HueYellow700,
+                }),
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.PaletteWarningLighter,
+                  color: odysseyTokens.TypographyColorWarning,
+                }),
+              },
+            }),
 
-            [`&.${chipClasses.colorWarning}`]: {
-              backgroundColor: odysseyTokens.PaletteWarningLighter,
-              color: odysseyTokens.TypographyColorWarning,
+            [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+              backgroundColor: odysseyTokens.HueNeutral200,
             },
-          }),
-
-          [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
-            backgroundColor: odysseyTokens.HueNeutral200,
-          },
-        }),
+          };
+        },
 
         label: {
           padding: 0,
@@ -1125,7 +1120,7 @@ export const components = ({
           [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
             color: odysseyTokens.TypographyColorDisabled,
             WebkitTextFillColor: odysseyTokens.TypographyColorDisabled,
-          } satisfies CSSProperties,
+          } as CSSProperties,
         },
 
         deleteIcon: {
@@ -1746,25 +1741,20 @@ export const components = ({
       },
       styleOverrides: {
         root: {
-          display: "flex",
-          justifyContent: "flex-start",
-          alignItems: "center",
           fontSize: odysseyTokens.TypographySizeSubordinate,
           lineHeight: odysseyTokens.TypographyLineHeightBody,
+          marginBlockEnd: odysseyTokens.Spacing2,
           marginBlockStart: odysseyTokens.Spacing1,
+          textAlign: "start",
+
           [`.${formLabelClasses.root} + &`]: {
             marginBlockStart: `-${odysseyTokens.Spacing1}`,
             color: odysseyTokens.TypographyColorSubordinate,
           },
-          marginBlockEnd: odysseyTokens.Spacing2,
+
           "&:last-child": {
             marginBlockEnd: 0,
           },
-          textAlign: "start",
-
-          ".field-hint-link-component": {
-            marginInlineStart: odysseyTokens.Spacing1,
-          },
 
           ".Mui-disabled &": {
             color: odysseyTokens.TypographyColorDisabled,
@@ -3109,6 +3099,7 @@ export const components = ({
           body1: "p",
           inherit: "p",
           legend: "legend",
+          overline: "p",
         },
       },
       styleOverrides: {
@@ -3119,6 +3110,17 @@ export const components = ({
             marginBlockEnd: 0,
           },
         },
+        overline: {
+          fontSize: odysseyTokens.TypographySizeOverline,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          lineHeight: odysseyTokens.TypographyLineHeightOverline,
+          letterSpacing: odysseyTokens.TypographyLetterSpacingOverline,
+          textTransform: "none",
+
+          ":is(:lang(en-*), :lang(en))": {
+            textTransform: "uppercase",
+          },
+        },
       },
     },
   };