carbon-react 142.12.0 → 142.13.1

package/esm/components/popover-container/popover-container.component.js

@@ -1,7 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import PropTypes from "prop-types";
-import { Transition } from "react-transition-group";
+import { CSSTransition } from "react-transition-group";
 import { flip, offset } from "@floating-ui/dom";
 import useMediaQuery from "../../hooks/useMediaQuery";
 import { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon } from "./popover-container.style";
@@ -95,15 +95,12 @@ export const PopoverContainer = ({
   const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   const popoverMiddleware = usePopoverMiddleware(shouldCoverButton);
   const closePopover = useCallback(ev => {
-    if (!isControlled) {
-      setIsOpenInternal(false);
-    }
-    if (onClose) {
-      onClose(ev);
-    }
-    if (isOpen && openButtonRef.current) {
-      openButtonRef.current.focus();
-    }
+    /* istanbul ignore else */
+    if (!isControlled) setIsOpenInternal(false);
+    onClose?.(ev);
+
+    /* istanbul ignore else */
+    if (isOpen) openButtonRef.current?.focus();
   }, [isControlled, isOpen, onClose]);
   const handleEscKey = useCallback(ev => {
     const eventIsFromSelectInput = Events.composedPath(ev).find(element => {
@@ -120,12 +117,11 @@ export const PopoverContainer = ({
     };
   }, [handleEscKey]);
   const handleOpenButtonClick = e => {
+    /* istanbul ignore else */
     if (!isControlled) setIsOpenInternal(!isOpen);
 
     // We want the open button to close the popover if it is already open
-    if (!isOpen) {
-      if (onOpen) onOpen(e);
-    } else if (onClose) onClose(e);
+    if (!isOpen) onOpen?.(e);else onClose?.(e);
   };
   const handleCloseButtonClick = e => {
     closePopover(e);
@@ -152,14 +148,13 @@ export const PopoverContainer = ({
   };
   const handleClickAway = e => {
     if (!isControlled) setIsOpenInternal(false);
-    if (onClose && isOpen) onClose(e);
+    if (isOpen) onClose?.(e);
   };
   const handleClick = useClickAwayListener(handleClickAway, "mousedown");
   const [isAnimationComplete, setIsAnimationComplete] = useState(false);
-  const popover = state => /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
+  const popover = () => /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
-    animationState: state,
     "aria-labelledby": popoverContainerId,
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
@@ -171,36 +166,34 @@ export const PopoverContainer = ({
     id: popoverContainerId,
     "data-element": "popover-container-title"
   }, title), renderCloseComponent(renderCloseComponentProps)), children);
-  const childrenToRender = state => shouldCoverButton ? /*#__PURE__*/React.createElement(ModalContext.Provider, {
+  const childrenToRender = () => shouldCoverButton ? /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: {
       isAnimationComplete
     }
   }, /*#__PURE__*/React.createElement(FocusTrap, {
     wrapperRef: popoverContentNodeRef,
     isOpen: isOpen
-  }, popover(state))) : popover(state);
+  }, popover())) : popover();
   return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
     onMouseDown: handleClick
   }, /*#__PURE__*/React.createElement("div", {
     ref: popoverReference
-  }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/React.createElement(Transition, {
-    in: isOpen,
+  }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/React.createElement(CSSTransition, {
+    nodeRef: popoverContentNodeRef,
     timeout: {
-      exit: 300
+      exit: disableAnimation ? 0 : 300
     },
-    appear: true,
-    mountOnEnter: true,
+    in: isOpen,
     unmountOnExit: true,
-    nodeRef: popoverContentNodeRef,
     onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
     onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
-  }, state => isOpen && /*#__PURE__*/React.createElement(Popover, {
+  }, /*#__PURE__*/React.createElement(Popover, {
     reference: popoverReference,
     placement: position === "right" ? "bottom-start" : "bottom-end",
     popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
     middleware: popoverMiddleware,
     childRefOverride: popoverContentNodeRef
-  }, childrenToRender(state))));
+  }, childrenToRender())));
 };
 export default PopoverContainer;

package/esm/components/popover-container/popover-container.style.js

@@ -1,35 +1,8 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { padding } from "styled-system";
 import { baseTheme } from "../../style/themes";
 import IconButton from "../icon-button";
 import StyledIcon from "../icon/icon.style";
-function animationToRender({
-  animationState,
-  disableAnimation
-}) {
-  if (disableAnimation) return "opacity: 1;";
-  switch (animationState) {
-    case "entering":
-      return `
-        opacity: 0;
-        transform: translateY(-8px);
-      `;
-    case "entered":
-      return `
-        opacity: 1; 
-        transform: translateY(0);
-        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
-      `;
-    case "exiting":
-      return `
-        opacity: 0; 
-        transform: translateY(-8px);
-        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
-      `;
-    default:
-      return "opacity: 0;";
-  }
-}
 const PopoverContainerWrapperStyle = styled.div`
   position: relative;
   display: inline-block;
@@ -53,7 +26,38 @@ const PopoverContainerContentStyle = styled.div`
   theme
 }) => theme.zIndex.popover};
 
-  ${animationToRender}
+  ${({
+  disableAnimation
+}) => disableAnimation ? css`
+          opacity: 1;
+          transform: none;
+        ` : css`
+          &.enter {
+            opacity: 0;
+            transform: translateY(-8px);
+          }
+
+          &.enter-done {
+            opacity: 1;
+            transform: translateY(0);
+            transition-property: opacity, transform;
+            transition-duration: 0.3s;
+            transition-timing-function: cubic-bezier(0.25, 0.25, 0, 1.5);
+          }
+
+          &.exit {
+            opacity: 0;
+            transform: translateY(-8px);
+            transition-property: opacity, transform;
+            transition-duration: 0.3s;
+            transition-timing-function: cubic-bezier(0.25, 0.25, 0, 1.5);
+          }
+
+          &.exit-done {
+            opacity: 0;
+            transform: translateY(0);
+          }
+        `}
 
   :focus {
     outline: none;
@@ -75,7 +79,7 @@ const PopoverContainerCloseIcon = styled(IconButton)`
 `;
 const PopoverContainerTitleStyle = styled.div`
   font-size: 16px;
-  font-weight: bold;
+  font-weight: 500;
 `;
 PopoverContainerContentStyle.defaultProps = {
   theme: baseTheme

package/esm/components/portrait/portrait.style.js

@@ -5,7 +5,7 @@ import Icon from "../icon";
 import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
 import profileConfigSizes from "../profile/profile.config";
 export const StyledPortraitInitials = styled.div`
-  font-weight: bold;
+  font-weight: 500;
   font-size: ${({
   size
 }) => profileConfigSizes[size].initialSize};

package/esm/components/profile/profile.style.js

@@ -6,7 +6,7 @@ import profileConfigSizes from "./profile.config";
 import Link from "../link";
 import { StyledPortraitContainer } from "../portrait/portrait.style";
 const ProfileNameStyle = styled.span`
-  font-weight: bold;
+  font-weight: 500;
   font-size: ${({
   size = "M"
 }) => profileConfigSizes[size].nameSize};

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -71,7 +71,7 @@ const fontSizes = {
 };
 const StyledValue = styled.span`
   display: inline-block;
-  font-weight: bold;
+  font-weight: 500;
 `;
 const StyledDescription = styled.span`
   color: var(--colorsUtilityYin055);

package/esm/components/search/search.style.js

@@ -26,7 +26,7 @@ const StyledSearch = styled.div`
       background-color: transparent;
       display: inline-flex;
       font-size: var(--fontSize100);
-      font-weight: 700;
+      font-weight: 500;
 
       ${!showSearchButton && css`
         border-bottom: var(--spacing025) solid ${variantColor};
@@ -107,7 +107,7 @@ const StyledSearch = styled.div`
 
         flex: 1;
         font-size: var(--fontSize100);
-        font-weight: 700;
+        font-weight: 500;
         padding-bottom: var(--spacing025);
         padding-top: 1px;
         cursor: pointer;

package/esm/components/select/__internal__/select-list/select-list.style.js

@@ -63,7 +63,7 @@ const StyledSelectListTableHeader = styled.thead`
     padding: var(--spacing200);
     background-color: white;
     text-align: left;
-    font-weight: 900;
+    font-weight: 500;
     font-size: 12px;
     text-transform: uppercase;
     color: var(--colorsUtilityYin055);

package/esm/components/select/__internal__/select-textbox/select-textbox.style.js

@@ -19,7 +19,7 @@ const StyledSelectText = styled.span`
     padding-left: ${sizes[size].horizontalPadding};
 
     ${transparent && css`
-      font-weight: 900;
+      font-weight: 500;
       text-align: right;
       flex-direction: row-reverse;
     `}

package/esm/components/select/__internal__/utils/matching-text.style.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 const MatchingText = styled.span`
-  font-weight: 700;
+  font-weight: 500;
   text-decoration: underline;
 `;
 export default MatchingText;

package/esm/components/select/option-row/option-row.style.js

@@ -25,7 +25,7 @@ const StyledOptionRow = styled.tr`
     padding: 12px 16px;
 
     &:first-child {
-      font-weight: 700;
+      font-weight: 500;
     }
   }
 

package/esm/components/step-flow/step-flow-title/step-flow-title.component.js

@@ -26,7 +26,7 @@ export const StepFlowTitle = ({
     variant: titleVariant || titleVariantContext || "h1",
     "data-element": "title-text"
   }, /*#__PURE__*/React.createElement(Typography, {
-    fontWeight: "900",
+    fontWeight: "700",
     fontSize: "var(--fontSizes600)",
     lineHeight: "var(--sizing375)",
     variant: "span",

package/esm/components/step-flow/step-flow.component.js

@@ -90,7 +90,7 @@ const StepFlow = /*#__PURE__*/forwardRef(({
     "aria-hidden": "true"
   }, locale.stepFlow.stepLabel(validatedCurrentStep, totalSteps));
   return /*#__PURE__*/React.createElement(StyledStepFlow, _extends({}, rest, tagComponent("step-flow", rest)), /*#__PURE__*/React.createElement(StyledStepContent, null, category ? /*#__PURE__*/React.createElement(StyledStepContentText, null, /*#__PURE__*/React.createElement(Typography, {
-    fontWeight: "500",
+    fontWeight: "400",
     fontSize: "var(--fontSizes100)",
     lineHeight: "var(--sizing250)",
     variant: "span",

package/esm/components/switch/__internal__/switch-slider.style.js

@@ -14,7 +14,7 @@ const StyledSwitchSlider = styled.div`
 }) => css`
     display: flex;
     font-size: 12px;
-    font-weight: bold;
+    font-weight: 500;
     height: 28px;
     left: 0;
     letter-spacing: 1px;

package/esm/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -227,7 +227,7 @@ const tabTitleStyles = css`
   display: inline-block;
   border-top-left-radius: var(--borderRadius100);
   border-top-right-radius: var(--borderRadius100);
-  font-weight: bold;
+  font-weight: 500;
   position: relative;
   border: none;
   cursor: pointer;

package/esm/components/text-editor/__internal__/editor-link/editor-link.style.js

@@ -5,7 +5,7 @@ const StyledEditorLink = styled(Link)`
 
   a {
     max-width: 100% span span span {
-      font-weight: 700;
+      font-weight: 500;
       font-style: normal;
     }
   }

package/esm/components/textbox/__internal__/prefix.style.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import InputSizes from "../../../__internal__/input/input-sizes.style";
 const StyledPrefix = styled.span`
   align-self: center;
-  font-weight: 900;
+  font-weight: 700;
   margin-left: ${({
   size
 }) => InputSizes[size].horizontalPadding}; // margin must match the original component padding

package/esm/components/tile-select/tile-select.style.js

@@ -8,7 +8,7 @@ import { baseTheme } from "../../style/themes";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 const StyledTitle = styled.h3`
   font-size: 16px;
-  font-weight: 900;
+  font-weight: 700;
   margin: 0;
   margin-right: 16px;
   margin-bottom: 8px;
@@ -16,7 +16,7 @@ const StyledTitle = styled.h3`
 `;
 const StyledSubtitle = styled.h4`
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 500;
   margin: 0;
   margin-right: 16px;
   margin-bottom: 8px;

package/esm/components/time/time.style.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import Label from "../../__internal__/label";
 export const StyledLabel = styled(Label)`
   label {
-    font-weight: var(--fontWeights500);
+    font-weight: var(--fontWeights400);
   }
 `;
 export const StyledHintText = styled.div`

package/esm/components/typography/typography.style.js

@@ -88,7 +88,7 @@ const getWeight = variant => {
     case "h1":
     case "segment-header":
     case "segment-header-small":
-      return "900";
+      return "700";
     case "h2":
     case "h3":
     case "segment-subheader":
@@ -96,7 +96,7 @@ const getWeight = variant => {
     case "b":
     case "em":
     case "strong":
-      return "700";
+      return "500";
     case "h4":
     case "h5":
     case "p":

package/esm/components/vertical-menu/vertical-menu.style.js

@@ -22,7 +22,7 @@ export const StyledVerticalMenuItem = styled.div`
   display: flex;
   border: none;
   align-items: center;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 14px;
   cursor: pointer;
   color: var(--colorsComponentsLeftnavWinterStandardContent);
@@ -73,7 +73,7 @@ StyledVerticalMenuItem.defaultProps = {
   theme: baseTheme
 };
 export const StyledTitle = styled.h3`
-  font-weight: 600;
+  font-weight: 500;
   font-size: 14px;
   line-height: 21px;
   margin: 0;

package/esm/style/fonts.css

@@ -19,7 +19,7 @@
 @font-face {
   font-family: "Sage UI";
   font-style: normal;
-  font-weight: 700;
+  font-weight: 500;
   src: url("~@sage/design-tokens/assets/fonts/sageui-medium.woff2") format("woff2"),
     url("~@sage/design-tokens/assets/fonts/sageui-medium.woff") format("woff"),
     url("~@sage/design-tokens/assets/fonts/sageui-medium.ttf") format("truetype"),
@@ -29,7 +29,7 @@
 @font-face {
   font-family: "Sage UI";
   font-style: normal;
-  font-weight: 900;
+  font-weight: 700;
   src: url("~@sage/design-tokens/assets/fonts/sageui-bold.woff2") format("woff2"),
     url("~@sage/design-tokens/assets/fonts/sageui-bold.woff") format("woff"),
     url("~@sage/design-tokens/assets/fonts/sageui-bold.ttf") format("truetype"),

package/esm/style/global-style.js

@@ -15,12 +15,12 @@ const GlobalStyle = createGlobalStyle`
     font-family: inherit;
   }
 
-  h1, .h1 { font-size: 24px; font-weight: 900; line-height: 32px; }
-  h2, .h2 { font-size: 22px; font-weight: 700; margin-bottom: 26px; }
-  h3, .h3 { font-size: 20px; font-weight: 700; margin-bottom: 24px; }
-  h4, .h4 { font-size: 18px; font-weight: 700; margin-bottom: 22px; }
-  h5, .h5 { font-size: 16px; font-weight: 700; margin-bottom: 20px; }
-  h6, .h6 { font-size: 14px; font-weight: 700; margin-bottom: 18px; }
+  h1, .h1 { font-size: 24px; font-weight: 700; line-height: 32px; }
+  h2, .h2 { font-size: 22px; font-weight: 500; margin-bottom: 26px; }
+  h3, .h3 { font-size: 20px; font-weight: 500; margin-bottom: 24px; }
+  h4, .h4 { font-size: 18px; font-weight: 500; margin-bottom: 22px; }
+  h5, .h5 { font-size: 16px; font-weight: 500; margin-bottom: 20px; }
+  h6, .h6 { font-size: 14px; font-weight: 500; margin-bottom: 18px; }
 
   [data-element=${TAB_GUARD_TOP}], [data-element=${TAB_GUARD_BOTTOM}] {
     position: fixed;

package/lib/__internal__/character-count/character-count.style.js

@@ -23,7 +23,7 @@ const StyledCharacterCount = exports.StyledCharacterCount = _styledComponents.de
   ${({
   isOverLimit
 }) => isOverLimit && (0, _styledComponents.css)`
-      font-weight: var(--fontWeights700);
+      font-weight: var(--fontWeights500);
     `}
 `;
 const VisuallyHiddenCharacterCount = exports.VisuallyHiddenCharacterCount = _styledComponents.default.div`

package/lib/__internal__/fieldset/fieldset.style.js

@@ -35,7 +35,7 @@ const StyledLegendContent = exports.StyledLegendContent = _styledComponents.defa
         content: "*";
         line-height: 24px;
         color: var(--colorsSemanticNegative500);
-        font-weight: var(--fontWeights700);
+        font-weight: var(--fontWeights500);
         margin-left: var(--spacing050);
         position: relative;
         top: 1px;
@@ -67,7 +67,7 @@ const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
   align-items: center;
   margin-bottom: var(--spacing100);
   padding: 0;
-  font-weight: var(--fontWeights700);
+  font-weight: var(--fontWeights500);
   color: var(--colorsUtilityYin090);
   ${({
   inline,

package/lib/__internal__/label/label.style.js

@@ -10,7 +10,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const StyledLabel = _styledComponents.default.label`
   color: var(--colorsUtilityYin090);
   display: block;
-  font-weight: var(--fontWeights700);
+  font-weight: var(--fontWeights500);
 
   ${({
   isRequired
@@ -18,7 +18,7 @@ const StyledLabel = _styledComponents.default.label`
       ::after {
         content: "*";
         color: var(--colorsSemanticNegative500);
-        font-weight: var(--fontWeights700);
+        font-weight: var(--fontWeights500);
         margin-left: var(--spacing050);
       }
     `}

package/lib/__internal__/validation-message/validation-message.style.js

@@ -12,7 +12,7 @@ const StyledValidationMessage = _styledComponents.default.p`
   isWarning
 }) => (0, _styledComponents.css)`
     color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
-    font-weight: ${isWarning ? "normal" : "bold"};
+    font-weight: ${isWarning ? "normal" : "500"};
     margin-top: 0px;
     margin-bottom: 8px;
   `}

package/lib/components/accordion/accordion.style.js

@@ -62,7 +62,7 @@ const StyledAccordionTitle = exports.StyledAccordionTitle = _styledComponents.de
   size,
   variant
 }) => size === "small" || variant === "subtle" ? "var(--fontSizes200)" : "var(--fontSizes400)"};
-  font-weight: 700;
+  font-weight: 500;
   line-height: 1;
   user-select: none;
   margin: 0;
@@ -170,7 +170,7 @@ const StyledAccordionTitleContainer = exports.StyledAccordionTitleContainer = _s
 
     ${buttonHeading && (0, _styledComponents.css)`
       box-sizing: border-box;
-      font-weight: 600;
+      font-weight: 500;
       text-decoration: none;
       font-size: var(--fontSizes100);
       min-height: var(--spacing500);

package/lib/components/action-popover/action-popover.style.js

@@ -125,7 +125,7 @@ const StyledMenuItem = exports.StyledMenuItem = _styledComponents.default.button
   width: 100%;
   color: var(--colorsUtilityYin090);
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 500;
 
   &:focus {
     ${({

package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -22,7 +22,7 @@ const StyledNavigationItem = _styledComponents.default.li`
     color: var(--colorsUtilityYin090);
     background-color: transparent;
     border-left: var(--sizing050) solid var(--colorsActionMinor100);
-    font-weight: 700;
+    font-weight: 500;
     padding: 12px 24px;
     border-top-right-radius: var(--borderRadius100);
     border-bottom-right-radius: var(--borderRadius100);

package/lib/components/badge/badge.style.js

@@ -28,7 +28,7 @@ const StyledBadgeWrapper = exports.StyledBadgeWrapper = _styledComponents.defaul
   display: inline-block;
 `;
 const StyledCounter = exports.StyledCounter = _styledComponents.default.div`
-  font-weight: 700;
+  font-weight: 500;
   font-size: 12px;
   margin-top: -1px;
 `;

package/lib/components/button/button.style.js

@@ -79,7 +79,7 @@ const StyledButton = _styledComponents.default.button`
     outline-offset: 0;
     border: 2px solid transparent;
     box-sizing: border-box;
-    font-weight: 600;
+    font-weight: 500;
     text-decoration: none;
     border-radius: var(--borderRadius400);
 

package/lib/components/button-toggle/button-toggle.style.js

@@ -55,7 +55,7 @@ const StyledButtonToggle = exports.StyledButtonToggle = _styledComponents.defaul
   box-sizing: border-box;
   max-width: 100%;
 
-  font-weight: 700;
+  font-weight: 500;
   background-color: transparent;
   cursor: pointer;
   text-align: center;

package/lib/components/card/card-footer/card-footer.style.js

@@ -33,7 +33,7 @@ const StyledCardFooter = _styledComponents.default.div`
     border-top-width: 1px;
     border-top-style: solid;
     font-size: 14px;
-    font-weight: 700;
+    font-weight: 500;
     margin: ${marginSizes[spacing]};
     display: flex;
     ${roundness === "default" && (0, _styledComponents.css)`

package/lib/components/content/content.style.js

@@ -40,7 +40,7 @@ const StyledContentTitle = exports.StyledContentTitle = _styledComponents.defaul
 }) => {
   return (0, _styledComponents.css)`
       display: ${inline ? "inline-block" : "block"};
-      font-weight: bold;
+      font-weight: 500;
       width: ${titleWidth && `calc(${titleWidth}% - 30px)`};
       text-align: ${!inline && align};
 

package/lib/components/date/__internal__/date-picker/day-picker.style.js

@@ -272,7 +272,7 @@ const StyledDayPicker = _styledComponents.default.div`
     border: none;
     //font-family: var(--fontFamiliesDefault); font assets to be updated part of FE-4975
     //font: var(--typographyDatePickerCalendarDateM); font assets to be updated part of FE-4975
-    font-weight: var(--fontWeights700);
+    font-weight: var(--fontWeights500);
     font-size: var(--fontSizes100);
     line-height: var(--lineHeights500);
     border-radius: var(--borderRadius400);

package/lib/components/definition-list/dd/dd.component.js

@@ -25,6 +25,7 @@ const Dd = ({
   } = (0, _react.useContext)(_dl.default);
   return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDd, _extends({
     "data-element": "dd",
+    "data-role": "dd",
     asSingleColumn: asSingleColumn,
     ddTextAlign: ddTextAlign,
     mb: mb || 2

package/lib/components/definition-list/definition-list.style.js

@@ -38,7 +38,7 @@ StyledDl.defaultProps = {
 const StyledDt = exports.StyledDt = _styledComponents.default.dt`
   ${_styledSystem.space}
   font-size: var(--fontSizes100);
-  font-weight: 700;
+  font-weight: 500;
   color: var(--colorsUtilityYin090);
   ${({
   asSingleColumn

package/lib/components/definition-list/dl.component.js

@@ -21,6 +21,7 @@ const Dl = ({
   return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDl, _extends({
     w: w,
     "data-component": "dl",
+    "data-role": "dl",
     asSingleColumn: asSingleColumn
   }, rest), /*#__PURE__*/_react.default.createElement(_dl.default.Provider, {
     value: {

package/lib/components/definition-list/dt/dt.component.js

@@ -26,6 +26,7 @@ const Dt = ({
   } = rest;
   return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDt, _extends({
     "data-element": "dt",
+    "data-role": "dt",
     mb: mb || asSingleColumn ? undefined : 2,
     pr: pr || asSingleColumn ? undefined : 3,
     dtTextAlign: dtTextAlign,