carbon-react 142.12.0 → 142.13.1

package/lib/components/duelling-picklist/duelling-picklist.style.js

@@ -35,7 +35,7 @@ const StyledLabelContainer = exports.StyledLabelContainer = _styledComponents.de
   margin-bottom: 16px;
 `;
 const StyledLabel = exports.StyledLabel = _styledComponents.default.p`
-  font-weight: bold;
+  font-weight: 500;
   font-size: 12px;
   letter-spacing: 1;
   margin: 0;

package/lib/components/fieldset/fieldset.style.js

@@ -36,7 +36,7 @@ const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
   align-items: center;
   margin-bottom: 32px;
   font-size: 20px;
-  font-weight: var(--fontWeights700);
+  font-weight: var(--fontWeights500);
   color: var(--colorsUtilityYin090);
   line-height: 24px;
   margin-right: 4px;
@@ -48,7 +48,7 @@ const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
         content: "*";
         line-height: 24px;
         color: var(--colorsSemanticNegative500);
-        font-weight: var(--fontWeights700);
+        font-weight: var(--fontWeights500);
         margin-left: var(--spacing100);
         position: relative;
         top: 1px;

package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.style.js

@@ -80,7 +80,7 @@ const StyledFileUploadStatus = exports.StyledFileUploadStatus = _styledComponent
       border: var(--${borderWidthToken}) solid var(--${colorToken});
       ${hasError && `&& ${_typography.default} {
         color: var(--${colorToken});
-        font-weight: 500;
+        font-weight: 400;
       }`}
     `;
 }}

package/lib/components/flat-table/flat-table-checkbox/flat-table-checkbox.style.js

@@ -41,7 +41,7 @@ const StyledFlatTableCheckbox = _styledComponents.default.td`
       border-width: 0;
       border-bottom: 1px solid var(--colorsUtilityMajor100);
       box-sizing: border-box;
-      font-weight: 700;
+      font-weight: 500;
       left: auto;
       padding: 0;
       text-align: left;

package/lib/components/flat-table/flat-table-head/flat-table-head.style.js

@@ -16,7 +16,7 @@ const StyledFlatTableHead = _styledComponents.default.thead`
       border-right: none;
     }
     ${_flatTableRowHeader.StyledFlatTableRowHeader}, ${_flatTableCheckbox.default} {
-      font-weight: 700;
+      font-weight: 500;
     }
   }
 `;

package/lib/components/flat-table/flat-table-header/flat-table-header.style.js

@@ -33,7 +33,7 @@ const StyledFlatTableHeader = _styledComponents.default.th`
     background-color: transparent;
     border-width: 0;
     box-sizing: border-box;
-    font-weight: 700;
+    font-weight: 500;
     left: auto;
     text-align: ${align};
     user-select: none;

package/lib/components/form/__internal__/form-summary.style.js

@@ -6,18 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledMessagePrefix = exports.StyledInternalSummary = exports.StyledFormSummary = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
-var _button = _interopRequireDefault(require("../../button/button.style"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledFormSummary = exports.StyledFormSummary = _styledComponents.default.div`
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
-  font-size: 13px;
-  font-weight: 700;
-  margin: -8px;
-  padding: 8px;
-  white-space: nowrap;
+  justify-content: end;
+  font-size: var(--fontSizes100);
+  font-weight: 500;
 
   ${({
   fullWidth
@@ -29,27 +27,30 @@ const StyledFormSummary = exports.StyledFormSummary = _styledComponents.default.
     `}
 
   ${({
-  showSummary
+  showSummary,
+  fullWidth
 }) => showSummary && (0, _styledComponents.css)`
       background-color: var(--colorsUtilityMajor025);
+      border: solid var(--borderWidth100) var(--colorsActionMinor250);
+      border-radius: var(--borderRadius100);
+      margin: calc(-1 * var(--sizing100)) 0;
+      padding: var(--sizing100);
+      gap: var(--sizing125);
+
+      ${fullWidth && (0, _styledComponents.css)`
+        margin: 0 calc(-1 * var(--sizing100));
+      `}
     `}
-  ${_button.default} {
-    margin-right: 0;
-  }
 `;
 const StyledMessagePrefix = exports.StyledMessagePrefix = _styledComponents.default.div`
   &:first-of-type {
-    margin-left: 4px;
+    margin-left: var(--sizing100);
   }
-  margin-right: 4px;
 `;
 const StyledInternalSummary = exports.StyledInternalSummary = _styledComponents.default.div`
   display: flex;
   align-items: center;
-  margin-right: 8px;
-  &:last-of-type {
-    margin-right: 16px;
-  }
+  gap: var(--sizing100);
   ${({
   type
 }) => type === "warning" && (0, _styledComponents.css)`
@@ -62,7 +63,6 @@ const StyledInternalSummary = exports.StyledInternalSummary = _styledComponents.
     `}
 
   ${_icon.default} {
-    margin-right: 4px;
     ${({
   type
 }) => type === "warning" && (0, _styledComponents.css)`

package/lib/components/form/form.component.js

@@ -63,40 +63,26 @@ const Form = ({
     tabIndex: -1
   }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
     marginBottom: _form2.formSpacing[fieldSpacing]
-  }, children)), !fullWidthButtons && renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
+  }, children)), renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
     "data-element": "form-footer",
     "data-role": "form-footer",
     className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
+    fullWidthButtons: fullWidthButtons,
     isInModal: isInModal
   }, footerPadding), leftSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledLeftButtons, {
     "data-role": "form-left-buttons",
     buttonAlignment: buttonAlignment
   }, leftSideButtons), /*#__PURE__*/_react.default.createElement(_formSummary.default, {
+    fullWidth: fullWidthButtons,
     errorCount: errorCount,
     warningCount: warningCount
   }, saveButton), rightSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledRightButtons, {
     "data-role": "form-right-buttons",
     buttonAlignment: buttonAlignment
-  }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
-    "data-element": "form-footer",
-    "data-role": "form-footer",
-    className: classNames,
-    ref: formFooterRef,
-    stickyFooter: stickyFooter,
-    buttonAlignment: buttonAlignment,
-    fullWidthButtons: fullWidthButtons
-  }, footerPadding), leftSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledLeftButtons, {
-    fullWidthButtons: fullWidthButtons
-  }, leftSideButtons), rightSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledRightButtons, {
-    fullWidthButtons: fullWidthButtons
-  }, rightSideButtons), /*#__PURE__*/_react.default.createElement(_form.StyledFullWidthButtons, null, /*#__PURE__*/_react.default.createElement(_formSummary.default, {
-    fullWidth: fullWidthButtons,
-    errorCount: errorCount,
-    warningCount: warningCount
-  }, saveButton))));
+  }, rightSideButtons)));
 };
 exports.Form = Form;
 Form.displayName = "Form";

package/lib/components/form/form.style.d.ts

@@ -16,6 +16,5 @@ interface StyledFormProps extends StyledFormContentProps {
 }
 export declare const StyledForm: import("styled-components").StyledComponent<"form", any, StyledFormProps, never>;
 export declare const StyledRightButtons: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
-export declare const StyledFullWidthButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledLeftButtons: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
 export {};

package/lib/components/form/form.style.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledRightButtons = exports.StyledLeftButtons = exports.StyledFullWidthButtons = exports.StyledFormFooter = exports.StyledFormContent = exports.StyledForm = void 0;
+exports.StyledRightButtons = exports.StyledLeftButtons = exports.StyledFormFooter = exports.StyledFormContent = exports.StyledForm = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
-var _button = _interopRequireDefault(require("../button/button.style"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _search = _interopRequireDefault(require("../search/search.style"));
 var _textarea = _interopRequireDefault(require("../textarea/textarea.style"));
@@ -29,6 +28,8 @@ const StyledFormContent = exports.StyledFormContent = _styledComponents.default.
 const StyledFormFooter = exports.StyledFormFooter = _styledComponents.default.div`
   align-items: center;
   display: flex;
+  flex-wrap: wrap;
+  gap: var(--sizing200);
 
   ${({
   buttonAlignment
@@ -106,34 +107,20 @@ const StyledForm = exports.StyledForm = _styledComponents.default.form`
 `;
 const StyledRightButtons = exports.StyledRightButtons = _styledComponents.default.div`
   display: flex;
-  ${({
-  fullWidthButtons
-}) => fullWidthButtons ? `margin-left: 0px;` : `margin-left: 16px;`}
+  gap: var(--sizing200);
+
   ${({
   buttonAlignment
-}) => buttonAlignment === "left" && "flex-grow: 1"};
-
-  ${_button.default}:last-child {
-    margin-right: 0;
-  }
-`;
-const StyledFullWidthButtons = exports.StyledFullWidthButtons = _styledComponents.default.div`
-  width: 100%;
-  display: flex;
+}) => buttonAlignment === "left" && "flex-grow: 1;"}
 `;
 const StyledLeftButtons = exports.StyledLeftButtons = _styledComponents.default.div`
   display: flex;
   justify-content: flex-end;
-  ${({
-  fullWidthButtons
-}) => fullWidthButtons ? `margin-right: 0px;` : `margin-right: 16px;`}
+  gap: var(--sizing200);
+
   ${({
   buttonAlignment
-}) => buttonAlignment === "right" && "flex-grow: 1"};
-
-  ${_button.default}:last-child {
-    margin-right: 0;
-  }
+}) => buttonAlignment === "right" && "flex-grow: 1;"}
 `;
 StyledForm.defaultProps = {
   theme: _base.default

package/lib/components/form/required-fields-indicator/required-fields-indicator.component.js

@@ -17,7 +17,7 @@ const StyledIndicatorContainer = (0, _styledComponents.default)(_box.default)`
   ::after {
     content: "*";
     color: var(--colorsSemanticNegative500);
-    font-weight: 700;
+    font-weight: 500;
     margin-left: var(--spacing050);
   }
 `;

package/lib/components/link-preview/link-preview.style.js

@@ -74,7 +74,7 @@ const StyledPreviewWrapper = exports.StyledPreviewWrapper = _styledComponents.de
 const StyledTitle = exports.StyledTitle = _styledComponents.default.div`
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-weight: 700;
+  font-weight: 500;
   font-size: 14px;
   line-height: 21px;
 `;

package/lib/components/loader-spinner/loader-spinner.component.js

@@ -30,7 +30,7 @@ const LoaderSpinner = ({
   const renderSpinnerLabel = /*#__PURE__*/_react.default.createElement(_loaderSpinner.StyledLabel, {
     "data-role": "visible-label",
     variant: "span",
-    fontWeight: "500",
+    fontWeight: "400",
     size: size,
     color: isLabelDark ? "var(--colorsUtilityYin090);" : "var(--colorsActionMajorYang100);",
     fontSize: size === "extra-large" ? "var(--sizing200)" : "var(--sizing175)",

package/lib/components/loader-star/loader-star.component.js

@@ -23,7 +23,7 @@ const LoaderStar = ({
   const label = /*#__PURE__*/_react.default.createElement(_loaderStar.StyledLabel, {
     "data-role": "visible-label",
     variant: "span",
-    fontWeight: "500"
+    fontWeight: "400"
   }, loaderStarLabel || locale.loaderStar.loading());
   return /*#__PURE__*/_react.default.createElement(_loaderStar.StyledLoaderStarWrapper, _extends({
     role: "status"

package/lib/components/menu/menu-item/menu-item.style.js

@@ -108,7 +108,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
     display: flex;
     align-items: center;
     font-size: 14px;
-    font-weight: 700;
+    font-weight: 500;
     min-height: 40px;
     position: relative;
     box-shadow: none;
@@ -259,7 +259,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       ${_link.StyledLink} a,
       ${_link.StyledLink} button,
       ${_link.StyledLink} [data-component="icon"] {
-        font-weight: 700;
+        font-weight: 500;
         text-decoration: none;
         ${!hasInput && `color: ${_menu.default[menuType].color};`}
       }

package/lib/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -18,7 +18,7 @@ const StyledTitle = exports.StyledTitle = _styledComponents.default.h2`
     margin: 0px;
     padding: 16px 16px 8px;
     font-size: 12px;
-    font-weight: 700;
+    font-weight: 500;
     text-transform: uppercase;
     line-height: 14px;
     cursor: default;

package/lib/components/note/note.style.js

@@ -50,7 +50,7 @@ const StyledInlineControl = exports.StyledInlineControl = _styledComponents.defa
   min-width: fit-content;
 `;
 const StyledTitle = exports.StyledTitle = _styledComponents.default.header`
-  font-weight: 900;
+  font-weight: 700;
   font-size: 16px;
   line-height: 21px;
   padding-bottom: 16px;
@@ -58,7 +58,7 @@ const StyledTitle = exports.StyledTitle = _styledComponents.default.header`
 const StyledFooterContent = exports.StyledFooterContent = _styledComponents.default.div`
   line-height: 21px;
   align-items: baseline;
-  font-weight: bold;
+  font-weight: 500;
 
   ${({
   hasName

package/lib/components/pill/pill.style.js

@@ -60,7 +60,7 @@ const StyledPill = _styledComponents.default.span`
   return (0, _styledComponents.css)`
       font-size: 12px;
       letter-spacing: 0.7px;
-      font-weight: 700;
+      font-weight: 500;
       position: relative;
       display: inline-flex;
       text-align: center;

package/lib/components/pod/pod.style.js

@@ -349,7 +349,7 @@ const StyledSubtitle = exports.StyledSubtitle = _styledComponents.default.h5`
 const StyledTitle = exports.StyledTitle = _styledComponents.default.h4`
   display: inline;
   font-size: 18px;
-  font-weight: 600;
+  font-weight: 500;
 `;
 StyledPod.defaultProps = {
   theme: _themes.baseTheme

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

@@ -106,15 +106,12 @@ const PopoverContainer = ({
   const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   const popoverMiddleware = usePopoverMiddleware(shouldCoverButton);
   const closePopover = (0, _react.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 = (0, _react.useCallback)(ev => {
     const eventIsFromSelectInput = _events.default.composedPath(ev).find(element => {
@@ -131,12 +128,11 @@ 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);
@@ -163,14 +159,13 @@ const PopoverContainer = ({
   };
   const handleClickAway = e => {
     if (!isControlled) setIsOpenInternal(false);
-    if (onClose && isOpen) onClose(e);
+    if (isOpen) onClose?.(e);
   };
   const handleClick = (0, _useClickAwayListener.default)(handleClickAway, "mousedown");
   const [isAnimationComplete, setIsAnimationComplete] = (0, _react.useState)(false);
-  const popover = state => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
+  const popover = () => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
-    animationState: state,
     "aria-labelledby": popoverContainerId,
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
@@ -182,37 +177,35 @@ const PopoverContainer = ({
     id: popoverContainerId,
     "data-element": "popover-container-title"
   }, title), renderCloseComponent(renderCloseComponentProps)), children);
-  const childrenToRender = state => shouldCoverButton ? /*#__PURE__*/_react.default.createElement(_modal.default.Provider, {
+  const childrenToRender = () => shouldCoverButton ? /*#__PURE__*/_react.default.createElement(_modal.default.Provider, {
     value: {
       isAnimationComplete
     }
   }, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     wrapperRef: popoverContentNodeRef,
     isOpen: isOpen
-  }, popover(state))) : popover(state);
+  }, popover())) : popover();
   return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
     onMouseDown: handleClick
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: popoverReference
-  }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
-    in: isOpen,
+  }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.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.default.createElement(_popover.default, {
+  }, /*#__PURE__*/_react.default.createElement(_popover.default, {
     reference: popoverReference,
     placement: position === "right" ? "bottom-start" : "bottom-end",
     popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
     middleware: popoverMiddleware,
     childRefOverride: popoverContentNodeRef
-  }, childrenToRender(state))));
+  }, childrenToRender())));
 };
 exports.PopoverContainer = PopoverContainer;
 var _default = exports.default = PopoverContainer;

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

@@ -4,39 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopoverContainerWrapperStyle = exports.PopoverContainerTitleStyle = exports.PopoverContainerOpenIcon = exports.PopoverContainerHeaderStyle = exports.PopoverContainerContentStyle = exports.PopoverContainerCloseIcon = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _themes = require("../../style/themes");
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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;";
-  }
-}
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const PopoverContainerWrapperStyle = exports.PopoverContainerWrapperStyle = _styledComponents.default.div`
   position: relative;
   display: inline-block;
@@ -60,7 +35,38 @@ const PopoverContainerContentStyle = exports.PopoverContainerContentStyle = _sty
   theme
 }) => theme.zIndex.popover};
 
-  ${animationToRender}
+  ${({
+  disableAnimation
+}) => disableAnimation ? (0, _styledComponents.css)`
+          opacity: 1;
+          transform: none;
+        ` : (0, _styledComponents.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;
@@ -82,7 +88,7 @@ const PopoverContainerCloseIcon = exports.PopoverContainerCloseIcon = (0, _style
 `;
 const PopoverContainerTitleStyle = exports.PopoverContainerTitleStyle = _styledComponents.default.div`
   font-size: 16px;
-  font-weight: bold;
+  font-weight: 500;
 `;
 PopoverContainerContentStyle.defaultProps = {
   theme: _themes.baseTheme

package/lib/components/portrait/portrait.style.js

@@ -12,7 +12,7 @@ var _portrait = require("./portrait.config");
 var _profile = _interopRequireDefault(require("../profile/profile.config"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledPortraitInitials = exports.StyledPortraitInitials = _styledComponents.default.div`
-  font-weight: bold;
+  font-weight: 500;
   font-size: ${({
   size
 }) => _profile.default[size].initialSize};

package/lib/components/profile/profile.style.js

@@ -13,7 +13,7 @@ var _link = _interopRequireDefault(require("../link"));
 var _portrait2 = require("../portrait/portrait.style");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ProfileNameStyle = exports.ProfileNameStyle = _styledComponents.default.span`
-  font-weight: bold;
+  font-weight: 500;
   font-size: ${({
   size = "M"
 }) => _profile.default[size].nameSize};

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

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

package/lib/components/search/search.style.js

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

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

@@ -71,7 +71,7 @@ const StyledSelectListTableHeader = exports.StyledSelectListTableHeader = _style
     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/lib/components/select/__internal__/select-textbox/select-textbox.style.js

@@ -28,7 +28,7 @@ const StyledSelectText = exports.StyledSelectText = _styledComponents.default.sp
     padding-left: ${_inputSizes.default[size].horizontalPadding};
 
     ${transparent && (0, _styledComponents.css)`
-      font-weight: 900;
+      font-weight: 500;
       text-align: right;
       flex-direction: row-reverse;
     `}

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MatchingText = _styledComponents.default.span`
-  font-weight: 700;
+  font-weight: 500;
   text-decoration: underline;
 `;
 var _default = exports.default = MatchingText;

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

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