carbon-react 142.12.0 → 142.13.0

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

@@ -14,7 +14,7 @@ const StyledCharacterCount = styled.div`
   ${({
   isOverLimit
 }) => isOverLimit && css`
-      font-weight: var(--fontWeights700);
+      font-weight: var(--fontWeights500);
     `}
 `;
 const VisuallyHiddenCharacterCount = styled.div`

package/esm/__internal__/fieldset/fieldset.style.js

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

package/esm/__internal__/label/label.style.js

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 const StyledLabel = styled.label`
   color: var(--colorsUtilityYin090);
   display: block;
-  font-weight: var(--fontWeights700);
+  font-weight: var(--fontWeights500);
 
   ${({
   isRequired
@@ -10,7 +10,7 @@ const StyledLabel = styled.label`
       ::after {
         content: "*";
         color: var(--colorsSemanticNegative500);
-        font-weight: var(--fontWeights700);
+        font-weight: var(--fontWeights500);
         margin-left: var(--spacing050);
       }
     `}

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

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

package/esm/components/accordion/accordion.style.js

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

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

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

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

@@ -13,7 +13,7 @@ const StyledNavigationItem = styled.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/esm/components/badge/badge.style.js

@@ -19,7 +19,7 @@ const StyledBadgeWrapper = styled.div`
   display: inline-block;
 `;
 const StyledCounter = styled.div`
-  font-weight: 700;
+  font-weight: 500;
   font-size: 12px;
   margin-top: -1px;
 `;

package/esm/components/button/button.style.js

@@ -70,7 +70,7 @@ const StyledButton = styled.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/esm/components/button-toggle/button-toggle.style.js

@@ -46,7 +46,7 @@ const StyledButtonToggle = styled.button`
   box-sizing: border-box;
   max-width: 100%;
 
-  font-weight: 700;
+  font-weight: 500;
   background-color: transparent;
   cursor: pointer;
   text-align: center;

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

@@ -24,7 +24,7 @@ const StyledCardFooter = styled.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" && css`

package/esm/components/content/content.style.js

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

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

@@ -263,7 +263,7 @@ const StyledDayPicker = styled.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/esm/components/definition-list/dd/dd.component.js

@@ -16,6 +16,7 @@ const Dd = ({
   } = useContext(DlContext);
   return /*#__PURE__*/React.createElement(StyledDd, _extends({
     "data-element": "dd",
+    "data-role": "dd",
     asSingleColumn: asSingleColumn,
     ddTextAlign: ddTextAlign,
     mb: mb || 2

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

@@ -29,7 +29,7 @@ StyledDl.defaultProps = {
 export const StyledDt = styled.dt`
   ${space}
   font-size: var(--fontSizes100);
-  font-weight: 700;
+  font-weight: 500;
   color: var(--colorsUtilityYin090);
   ${({
   asSingleColumn

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

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

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

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

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

@@ -27,7 +27,7 @@ const StyledLabelContainer = styled.div`
   margin-bottom: 16px;
 `;
 const StyledLabel = styled.p`
-  font-weight: bold;
+  font-weight: 500;
   font-size: 12px;
   letter-spacing: 1;
   margin: 0;

package/esm/components/fieldset/fieldset.style.js

@@ -27,7 +27,7 @@ const StyledLegend = styled.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;
@@ -39,7 +39,7 @@ const StyledLegend = styled.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/esm/components/file-input/__internal__/file-upload-status/file-upload-status.style.js

@@ -71,7 +71,7 @@ export const StyledFileUploadStatus = styled.div`
       border: var(--${borderWidthToken}) solid var(--${colorToken});
       ${hasError && `&& ${StyledTypography} {
         color: var(--${colorToken});
-        font-weight: 500;
+        font-weight: 400;
       }`}
     `;
 }}

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

@@ -32,7 +32,7 @@ const StyledFlatTableCheckbox = styled.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/esm/components/flat-table/flat-table-head/flat-table-head.style.js

@@ -9,7 +9,7 @@ const StyledFlatTableHead = styled.thead`
       border-right: none;
     }
     ${StyledFlatTableRowHeader}, ${StyledFlatTableCheckbox} {
-      font-weight: 700;
+      font-weight: 500;
     }
   }
 `;

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

@@ -24,7 +24,7 @@ const StyledFlatTableHeader = styled.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/esm/components/form/__internal__/form-summary.style.js

@@ -5,7 +5,7 @@ export const StyledFormSummary = styled.div`
   display: inline-flex;
   align-items: center;
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 500;
   margin: -8px;
   padding: 8px;
   white-space: nowrap;

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

@@ -10,7 +10,7 @@ const StyledIndicatorContainer = styled(Box)`
   ::after {
     content: "*";
     color: var(--colorsSemanticNegative500);
-    font-weight: 700;
+    font-weight: 500;
     margin-left: var(--spacing050);
   }
 `;

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

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

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

@@ -23,7 +23,7 @@ export const LoaderSpinner = ({
   const renderSpinnerLabel = /*#__PURE__*/React.createElement(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/esm/components/loader-star/loader-star.component.js

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

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

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

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

@@ -9,7 +9,7 @@ const StyledTitle = styled.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/esm/components/note/note.style.js

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

package/esm/components/pill/pill.style.js

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

package/esm/components/pod/pod.style.js

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

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;