carbon-react 142.12.0 → 142.13.1

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

@@ -1,14 +1,12 @@
 import styled, { css } from "styled-components";
 import StyledIcon from "../../icon/icon.style";
-import StyledButton from "../../button/button.style";
 export const StyledFormSummary = styled.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
@@ -20,27 +18,30 @@ export const StyledFormSummary = styled.div`
     `}
 
   ${({
-  showSummary
+  showSummary,
+  fullWidth
 }) => showSummary && 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 && css`
+        margin: 0 calc(-1 * var(--sizing100));
+      `}
     `}
-  ${StyledButton} {
-    margin-right: 0;
-  }
 `;
 export const StyledMessagePrefix = styled.div`
   &:first-of-type {
-    margin-left: 4px;
+    margin-left: var(--sizing100);
   }
-  margin-right: 4px;
 `;
 export const StyledInternalSummary = styled.div`
   display: flex;
   align-items: center;
-  margin-right: 8px;
-  &:last-of-type {
-    margin-right: 16px;
-  }
+  gap: var(--sizing100);
   ${({
   type
 }) => type === "warning" && css`
@@ -53,7 +54,6 @@ export const StyledInternalSummary = styled.div`
     `}
 
   ${StyledIcon} {
-    margin-right: 4px;
     ${({
   type
 }) => type === "warning" && css`

package/esm/components/form/form.component.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import SidebarContext from "../sidebar/__internal__/sidebar.context";
 import ModalContext from "../modal/__internal__/modal.context";
 import FormSummary from "./__internal__/form-summary.component";
-import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons, StyledFullWidthButtons } from "./form.style";
+import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons } from "./form.style";
 import { formSpacing } from "./form.config";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 export const Form = ({
@@ -54,40 +54,26 @@ export const Form = ({
     tabIndex: -1
   }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
     marginBottom: formSpacing[fieldSpacing]
-  }, children)), !fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
+  }, children)), renderFooter && /*#__PURE__*/React.createElement(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.createElement(StyledLeftButtons, {
     "data-role": "form-left-buttons",
     buttonAlignment: buttonAlignment
   }, leftSideButtons), /*#__PURE__*/React.createElement(FormSummary, {
+    fullWidth: fullWidthButtons,
     errorCount: errorCount,
     warningCount: warningCount
   }, saveButton), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
     "data-role": "form-right-buttons",
     buttonAlignment: buttonAlignment
-  }, rightSideButtons)), fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
-    "data-element": "form-footer",
-    "data-role": "form-footer",
-    className: classNames,
-    ref: formFooterRef,
-    stickyFooter: stickyFooter,
-    buttonAlignment: buttonAlignment,
-    fullWidthButtons: fullWidthButtons
-  }, footerPadding), leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
-    fullWidthButtons: fullWidthButtons
-  }, leftSideButtons), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
-    fullWidthButtons: fullWidthButtons
-  }, rightSideButtons), /*#__PURE__*/React.createElement(StyledFullWidthButtons, null, /*#__PURE__*/React.createElement(FormSummary, {
-    fullWidth: fullWidthButtons,
-    errorCount: errorCount,
-    warningCount: warningCount
-  }, saveButton))));
+  }, rightSideButtons)));
 };
 Form.displayName = "Form";
 export default Form;

package/esm/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/esm/components/form/form.style.js

@@ -1,7 +1,6 @@
 import styled, { css } from "styled-components";
 import { space, padding } from "styled-system";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
-import StyledButton from "../button/button.style";
 import baseTheme from "../../style/themes/base";
 import StyledSearch from "../search/search.style";
 import StyledTextarea from "../textarea/textarea.style";
@@ -20,6 +19,8 @@ export const StyledFormContent = styled.div`
 export const StyledFormFooter = styled.div`
   align-items: center;
   display: flex;
+  flex-wrap: wrap;
+  gap: var(--sizing200);
 
   ${({
   buttonAlignment
@@ -97,34 +98,20 @@ export const StyledForm = styled.form`
 `;
 export const StyledRightButtons = styled.div`
   display: flex;
-  ${({
-  fullWidthButtons
-}) => fullWidthButtons ? `margin-left: 0px;` : `margin-left: 16px;`}
+  gap: var(--sizing200);
+
   ${({
   buttonAlignment
-}) => buttonAlignment === "left" && "flex-grow: 1"};
-
-  ${StyledButton}:last-child {
-    margin-right: 0;
-  }
-`;
-export const StyledFullWidthButtons = styled.div`
-  width: 100%;
-  display: flex;
+}) => buttonAlignment === "left" && "flex-grow: 1;"}
 `;
 export const StyledLeftButtons = styled.div`
   display: flex;
   justify-content: flex-end;
-  ${({
-  fullWidthButtons
-}) => fullWidthButtons ? `margin-right: 0px;` : `margin-right: 16px;`}
+  gap: var(--sizing200);
+
   ${({
   buttonAlignment
-}) => buttonAlignment === "right" && "flex-grow: 1"};
-
-  ${StyledButton}:last-child {
-    margin-right: 0;
-  }
+}) => buttonAlignment === "right" && "flex-grow: 1;"}
 `;
 StyledForm.defaultProps = {
   theme: baseTheme

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