carbon-react 118.1.0 → 118.2.0

package/esm/components/card/card.component.js

@@ -3,6 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import CardContext from "./__internal__/card-context";
 import StyledCard from "./card.style";
 import Icon from "../icon";
 import { CardRow, CardFooter } from ".";
@@ -27,6 +28,7 @@ const Card = ({
   spacing = "medium",
   boxShadow,
   hoverBoxShadow,
+  roundness = "default",
   ...rest
 }) => {
   if (!isDeprecationWarningTriggered && oldDataRole) {
@@ -66,9 +68,15 @@ const Card = ({
   }, interactive && {
     tabIndex: 0,
     type: "button"
+  }, {
+    roundness: roundness
   }, filterStyledSystemMarginProps(rest)), draggable && /*#__PURE__*/React.createElement(Icon, {
     type: "drag"
-  }), renderChildren());
+  }), /*#__PURE__*/React.createElement(CardContext.Provider, {
+    value: {
+      roundness
+    }
+  }, renderChildren()));
 };
 
 Card.propTypes = {
@@ -237,6 +245,7 @@ Card.propTypes = {
     "toString": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "roundness": PropTypes.oneOf(["default", "large"]),
   "spacing": PropTypes.oneOf(["large", "medium", "small"])
 };
 Card.displayName = "Card";

package/esm/components/card/card.style.d.ts

@@ -1,9 +1,10 @@
 import { MarginProps } from "styled-system";
 import * as DesignTokens from "@sage/design-tokens/js/base/common";
 import { CardSpacing } from "./card.config";
+import { CardContextProps } from "./__internal__/card-context";
 declare type DesignTokensType = keyof typeof DesignTokens;
 export declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
-export interface StyledCardProps extends MarginProps {
+export interface StyledCardProps extends MarginProps, CardContextProps {
     cardWidth: string;
     interactive: boolean;
     draggable: boolean;

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

@@ -14,10 +14,12 @@ const StyledCard = styled.div`
   height,
   spacing,
   boxShadow = "boxShadow050",
-  hoverBoxShadow = "boxShadow100"
+  hoverBoxShadow = "boxShadow100",
+  roundness
 }) => css`
     background-color: var(--colorsUtilityYang100);
     border: none;
+    border-radius: ${roundness === "default" ? "var(--borderRadius100)" : "var(--borderRadius200)"};
     box-shadow: var(--${boxShadow});
     color: var(--colorsUtilityYin090);
     display: flex;

package/esm/components/carousel/carousel.component.js

@@ -39,7 +39,7 @@ const Carousel = ({
     const isTheSameIndex = newIndex === lastSlideIndexProp.current || newIndex === selectedSlideIndex;
     if (isNewIndexUndefined || isTheSameIndex) return;
 
-    if (newIndex > selectedSlideIndex) {
+    if (Number(newIndex) > Number(selectedSlideIndex)) {
       transitionDirection.current = NEXT;
     } else {
       transitionDirection.current = PREVIOUS;

package/esm/components/carousel/carousel.style.js

@@ -5,7 +5,7 @@ import { SlideStyle } from "./slide/slide.style";
 const CarouselNavigationStyle = styled.div`
   margin-top: -32.5px;
   position: absolute;
-  top: 50%;
+  top: 52%;
   z-index: 20;
 `;
 const CarouselPreviousButtonWrapperStyle = styled(CarouselNavigationStyle)`
@@ -35,8 +35,9 @@ const CarouselButtonStyle = styled.button.attrs({
   disabled
 }) => css`
     border: none;
+    border-radius: var(--borderRadius400);
     width: 40px;
-    height: 64px;
+    height: 40px;
     border-width: var(--borderWidth200);
     border-color: var(--colorsActionMajorTransparent);
     background-color: ${disabled ? "var(--colorsActionDisabled500)" : "var(--colorsActionMajor500)"};
@@ -83,6 +84,7 @@ const CarouselSelectorInputStyle = styled.input`
 `;
 const CarouselSelectorLabelStyle = styled.label`
   display: inline-block;
+  border-radius: var(--borderRadius100);
   width: 10px;
   height: 10px;
   background: var(--colorsActionMinor200);

package/esm/components/carousel/slide/slide.style.js

@@ -7,6 +7,8 @@ const SlideStyle = styled.div`
     display: inline-block;
     width: 100%;
     z-index: 10;
+    border-radius: var(--borderRadius200);
+    overflow: hidden;
 
     transition: 0.5s;
     min-width: 80%;

package/esm/components/checkbox/checkbox.style.js

@@ -56,6 +56,8 @@ const StyledCheckbox = styled.div`
       box-sizing: border-box;
       min-width: 16px;
       width: 16px;
+      border-radius: var(--borderRadius025);
+      ${size === "large" && `border-radius: var(--borderRadius050)`};
     }
 
     // prettier-ignore

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

@@ -196,6 +196,7 @@ const StyledDayPicker = styled.div`
     padding: var(--spacing300);
     text-align: center;
     user-select: none;
+    border-radius: var(--borderRadius050);
   }
 
   .DayPicker * {
@@ -215,6 +216,7 @@ const StyledDayPicker = styled.div`
     padding: 0;
     &:focus {
       outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+      border-radius: var(--borderRadius050);
     }
   }
 
@@ -253,6 +255,7 @@ const StyledDayPicker = styled.div`
     font-weight: var(--fontWeights700);
     font-size: var(--fontSizes100);
     line-height: var(--lineHeights500);
+    border-radius: var(--borderRadius400);
 
     &:hover {
       background-color: var(--colorsActionMinor050);
@@ -297,6 +300,7 @@ const StyledDayPicker = styled.div`
   .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
     background-color: var(--colorsActionMajor500);
     color: var(--colorsUtilityYang100);
+    border-radius: var(--borderRadius400);
   }
 
   .DayPicker-Day--selected.DayPicker-Day--disabled:not(.DayPicker-Day--outside) {

package/esm/components/date/__internal__/navbar/button.style.js

@@ -13,6 +13,8 @@ const StyledButton = styled.button.attrs({
   width: var(--sizing500);
   padding: var(--spacing150);
   box-sizing: border-box;
+  border-radius: var(--borderRadius050);
+
   &:focus {
     outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
   }

package/esm/components/dialog/dialog.style.js

@@ -27,6 +27,7 @@ const StyledDialog = styled.div`
   box-shadow: var(--boxShadow300);
   display: flex;
   flex-direction: column;
+  border-radius: var(--borderRadius200);
   position: fixed;
   top: 50%;
   z-index: ${({
@@ -64,6 +65,8 @@ const StyledDialog = styled.div`
   ${StyledFormFooter}.sticky {
     ${calculateWidthValue}
     ${props => calculateFormSpacingValues(props, false)}
+    border-bottom-right-radius: var(--borderRadius200);
+    border-bottom-left-radius: var(--borderRadius200);
   }
 
   > ${StyledIconButton} {
@@ -82,6 +85,8 @@ const StyledDialogTitle = styled.div`
   background-color: var(--colorsUtilityYang100);
   padding: 23px ${HORIZONTAL_PADDING}px 0;
   border-bottom: 1px solid #ccd6db;
+  border-top-right-radius: var(--borderRadius200);
+  border-top-left-radius: var(--borderRadius200);
   ${({
   showCloseIcon
 }) => showCloseIcon && "padding-right: 85px"};

package/esm/components/dismissible-box/dismissible-box.component.d.ts

@@ -13,5 +13,5 @@ export interface DismissibleBoxProps extends SpaceProps, StyledDismissibleBoxPro
      * Please note this component has a minWidth of 600px */
     width?: number | string;
 }
-export declare const DismissibleBox: ({ children, onClose, ...rest }: DismissibleBoxProps) => JSX.Element;
+export declare const DismissibleBox: ({ children, onClose, borderRadius, ...rest }: DismissibleBoxProps) => JSX.Element;
 export default DismissibleBox;

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -9,10 +9,12 @@ import Icon from "../icon";
 const DismissibleBox = ({
   children,
   onClose,
+  borderRadius = "borderRadius100",
   ...rest
 }) => /*#__PURE__*/React.createElement(StyledDismissibleBox, _extends({
   p: "20px 24px 20px 20px",
-  "data-component": "dismissible-box"
+  "data-component": "dismissible-box",
+  borderRadius: borderRadius
 }, rest), children, /*#__PURE__*/React.createElement("span", {
   "data-element": "close-button-wrapper"
 }, /*#__PURE__*/React.createElement(IconButton, {
@@ -364,6 +366,7 @@ DismissibleBox.propTypes = {
     "toString": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "borderRadius": PropTypes.any,
   "bottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,

package/esm/components/drawer/drawer.style.js

@@ -186,6 +186,7 @@ const StyledSidebarToggleButton = styled.button.attrs({
     border: none;
     z-index: 1;
     animation: ${buttonClose} ${animationDuration} ease-in-out;
+    border-radius: var(--borderRadius050);
 
     &:focus {
       outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);

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

@@ -3,6 +3,7 @@ import Button from "../../button";
 import Icon from "../../icon";
 import StyledIcon from "../../icon/icon.style";
 const StyledPicklistItem = styled.li`
+  border-radius: var(--borderRadius100);
   ${({
   locked
 }) => css`
@@ -31,6 +32,25 @@ const StyledPicklistItem = styled.li`
   `}
 `;
 const StyledButton = styled(Button)`
+  border-bottom-right-radius: var(--borderRadius100);
+  border-top-right-radius: var(--borderRadius100);
+  border-bottom-left-radius: var(--borderRadius000);
+  border-top-left-radius: var(--borderRadius000);
+
+  :hover {
+    border-bottom-right-radius: var(--borderRadius100);
+    border-top-right-radius: var(--borderRadius100);
+    border-bottom-left-radius: var(--borderRadius000);
+    border-top-left-radius: var(--borderRadius000);
+  }
+
+  :focus {
+    border-bottom-right-radius: var(--borderRadius100);
+    border-top-right-radius: var(--borderRadius100);
+    border-bottom-left-radius: var(--borderRadius000);
+    border-top-left-radius: var(--borderRadius000);
+  }
+
   ${({
   iconType
 }) => css`

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

@@ -189,6 +189,13 @@ const StyledFlatTableRow = styled.tr`
             pointer-events: none;
           }
 
+          :last-child {
+            :after {
+              border-bottom-left-radius: var(--borderRadius100);
+              border-bottom-right-radius: var(--borderRadius100);
+            }
+          }
+
           :first-child {
             :after {
               top: 0px;

package/esm/components/flat-table/flat-table.component.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledTableContainer } from "./flat-table.style";
@@ -26,6 +26,12 @@ const FlatTable = ({
   width,
   ...rest
 }) => {
+  const wrapperRef = useRef(null);
+  const tableRef = useRef(null);
+  const [hasVerticalScrollbar, setHasVerticalScrollbar] = useState(false);
+  const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = useState(false);
+  const [firstColRowSpanIndex, setFirstColRowSpanIndex] = useState(-1);
+  const [lastColRowSpanIndex, setLastColRowSpanIndex] = useState(-1);
   const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
   const tableStylingProps = {
     caption,
@@ -37,9 +43,50 @@ const FlatTable = ({
     tableStylingProps["aria-describedby"] = ariaDescribedby;
   }
 
+  useLayoutEffect(() => {
+    const findRow = (rows, isFirstCol) => rows.find((row, index) => {
+      const cells = Array.from(row.querySelectorAll("td, th"));
+      const cell = isFirstCol ? cells.shift() : cells.pop();
+      const rowSpan = cell === null || cell === void 0 ? void 0 : cell.getAttribute("rowspan");
+      return rowSpan >= index + 1;
+    });
+
+    if (wrapperRef.current && tableRef.current) {
+      var _tableRef$current;
+
+      const {
+        offsetHeight,
+        offsetWidth
+      } = wrapperRef.current;
+      const {
+        top,
+        bottom,
+        right,
+        left
+      } = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.getBoundingClientRect();
+      setHasVerticalScrollbar(bottom - top > offsetHeight);
+      setHasHorizontalScrollbar(right - left > offsetWidth);
+      const body = tableRef.current.querySelector("tbody");
+      const bodyRows = body ? Array.from(body === null || body === void 0 ? void 0 : body.querySelectorAll("tr")) : [];
+      const {
+        length
+      } = bodyRows;
+      const targetRowFirstCol = findRow(bodyRows.slice(0, length - 1).reverse(), true);
+      const targetRowLastCol = findRow(bodyRows.slice(0, length - 1).reverse());
+
+      if (targetRowFirstCol) {
+        setFirstColRowSpanIndex(bodyRows.indexOf(targetRowFirstCol));
+      }
+
+      if (targetRowLastCol) {
+        setLastColRowSpanIndex(bodyRows.indexOf(targetRowLastCol));
+      }
+    }
+  }, [footer, children, height, minHeight]);
   return /*#__PURE__*/React.createElement(DrawerSidebarContext.Consumer, null, ({
     isInSidebar
   }) => /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
+    ref: wrapperRef,
     "data-component": "flat-table-wrapper",
     isInSidebar: isInSidebar,
     hasStickyHead: hasStickyHead,
@@ -54,11 +101,18 @@ const FlatTable = ({
     tabIndex: "0",
     role: "region",
     overflowX: width ? "hidden" : undefined,
-    width: width
+    width: width,
+    hasStickyFooter: hasStickyFooter,
+    hasVerticalScrollbar: hasVerticalScrollbar,
+    hasHorizontalScrollbar: hasHorizontalScrollbar,
+    hasFooter: !!footer,
+    firstColRowSpanIndex: firstColRowSpanIndex,
+    lastColRowSpanIndex: lastColRowSpanIndex
   }, rest), /*#__PURE__*/React.createElement(StyledTableContainer, {
     overflowX: overflowX,
     width: width
   }, /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
+    ref: tableRef,
     "data-component": "flat-table"
   }, tableStylingProps), caption ? /*#__PURE__*/React.createElement("caption", null, caption) : null, /*#__PURE__*/React.createElement(FlatTableThemeContext.Provider, {
     value: {

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

@@ -8,6 +8,7 @@ import { baseTheme } from "../../style/themes";
 import { StyledFlatTableCell } from "./flat-table-cell/flat-table-cell.style";
 import cellSizes from "./cell-sizes.style";
 import Box from "../box";
+import { StyledPagerContainer } from "../pager/pager.style";
 const HEADER_OVERLAY_INCREMENT = 3;
 const STICKY_FOOTER_OVERLAY_INCREMENT = 1;
 const ROW_HEADER_OVERLAY_INCREMENT = 5;
@@ -26,10 +27,15 @@ const StyledTableContainer = styled.div`
 `;
 const StyledFlatTable = styled.table`
   border-collapse: separate;
-  border-radius: 0px;
   border-spacing: 0;
   width: 100%;
 
+  @-moz-document url-prefix() {
+    overflow: hidden;
+    border-top-left-radius: var(--borderRadius100);
+    border-top-right-radius: var(--borderRadius100);
+  }
+
   ${({
   caption
 }) => caption && css`
@@ -90,6 +96,16 @@ StyledFlatTable.defaultProps = {
   size: "medium"
 };
 const StyledFlatTableWrapper = styled(Box)`
+  border-top-left-radius: var(--borderRadius100);
+  border-top-right-radius: var(--borderRadius100);
+  ${({
+  hasStickyFooter,
+  hasHorizontalScrollbar
+}) => !hasStickyFooter && !hasHorizontalScrollbar && css`
+      border-bottom-left-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius100);
+    `}
+
   ${({
   isInSidebar
 }) => css`
@@ -187,6 +203,9 @@ const StyledFlatTableWrapper = styled(Box)`
   ${({
   isInSidebar
 }) => isInSidebar && css`
+      ${StyledFlatTableHead} {
+        background-color: var(--colorsUtilityMajor040);
+      }
       ${StyledFlatTableHeader}, ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
       ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
         background-color: var(--colorsUtilityMajor040);
@@ -226,6 +245,21 @@ const StyledFlatTableWrapper = styled(Box)`
 }) => theme.zIndex.overlay + HEADER_OVERLAY_INCREMENT};
   }
 
+  thead {
+    ${StyledFlatTableRow}:first-of-type {
+      th:first-of-type {
+        border-top-left-radius: var(--borderRadius100);
+      }
+      ${({
+  hasVerticalScrollbar
+}) => !hasVerticalScrollbar && css`
+          th:last-of-type {
+            border-top-right-radius: var(--borderRadius100);
+          }
+        `}
+    }
+  }
+
   tbody
     ${StyledFlatTableRowHeader},
     ${StyledFlatTableCell}.isSticky,
@@ -235,6 +269,67 @@ const StyledFlatTableWrapper = styled(Box)`
   theme
 }) => theme.zIndex.overlay};
   }
+
+  ${({
+  hasFooter
+}) => hasFooter && css`
+    tr:last-child:focus {
+      :after {
+        border-bottom-left-radius: var(--borderRadius000);
+        border-bottom-right-radius: var(--borderRadius000);
+      }
+  `}
+
+  ${({
+  hasFooter
+}) => !hasFooter && css`
+      tbody {
+        ${({
+  firstColRowSpanIndex
+}) => firstColRowSpanIndex >= 0 && css`
+            ${StyledFlatTableRow}:nth-of-type(${firstColRowSpanIndex + 1}) {
+              th:first-child,
+              td:first-child {
+                border-bottom-left-radius: var(--borderRadius100);
+              }
+            }
+          `}
+
+        ${({
+  lastColRowSpanIndex,
+  hasHorizontalScrollbar
+}) => lastColRowSpanIndex >= 0 && !hasHorizontalScrollbar && css`
+            ${StyledFlatTableRow}:nth-of-type(${lastColRowSpanIndex + 1}) {
+              th:last-child,
+              td:last-child {
+                border-bottom-right-radius: var(--borderRadius100);
+              }
+            }
+          `}
+
+        ${StyledFlatTableRow}:last-of-type {
+          ${({
+  hasHorizontalScrollbar,
+  firstColRowSpanIndex
+}) => !hasHorizontalScrollbar && firstColRowSpanIndex === -1 && css`
+              th:first-child,
+              td:first-child {
+                border-bottom-left-radius: var(--borderRadius100);
+              }
+            `}
+          ${({
+  hasVerticalScrollbar,
+  hasHorizontalScrollbar,
+  lastColRowSpanIndex
+}) => !hasVerticalScrollbar && !hasHorizontalScrollbar && lastColRowSpanIndex === -1 && css`
+              th:last-child,
+              td:last-child {
+                border-bottom-right-radius: var(--borderRadius100);
+              }
+            `}
+        }
+      }
+    `}
 `;
 StyledFlatTableWrapper.defaultProps = {
   theme: baseTheme
@@ -247,6 +342,11 @@ const StyledFlatTableFooter = styled.div`
       position: sticky;
       bottom: 0px;
       z-index: ${theme.zIndex.overlay + STICKY_FOOTER_OVERLAY_INCREMENT};
+
+      ${StyledPagerContainer} {
+        border-bottom-left-radius: var(--borderRadius000);
+        border-bottom-right-radius: var(--borderRadius000);
+      }
     `}
 `;
 StyledFlatTableFooter.defaultProps = {

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

@@ -21,6 +21,7 @@ const StyledSort = styled.div`
 
   :focus {
     outline: 1px solid var(--colorsSemanticFocus500);
+    border-radius: var(--borderRadius025);
   }
 `;
 const StyledSpaceHolder = styled.div`

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

@@ -13,6 +13,7 @@ const StyledIconButton = styled.button.attrs({
     }
     background: transparent;
     border: none;
+    border-radius: var(--borderRadius050);
 
     &:focus {
       background-color: transparent;

package/esm/components/inline-inputs/inline-inputs.style.js

@@ -39,6 +39,24 @@ const StyledContentContainer = styled.div`
         ${StyledInlineInput} + ${StyledInlineInput} ${InputPresentation} {
           border-left: none;
         }
+
+        ${StyledInlineInput}:not(:first-of-type):not(:last-of-type) ${InputPresentation} {
+          border-radius: var(--borderRadius000);
+        }
+
+        ${StyledInlineInput}:first-of-type:not(:last-of-type) ${InputPresentation} {
+          border-top-right-radius: var(--borderRadius000);
+          border-bottom-right-radius: var(--borderRadius000);
+          border-top-left-radius: var(--borderRadius050);
+          border-bottom-left-radius: var(--borderRadius050);
+        }
+
+        ${StyledInlineInput}:last-of-type:not(:first-of-type) ${InputPresentation} {
+          border-top-left-radius: var(--borderRadius000);
+          border-bottom-left-radius: var(--borderRadius000);
+          border-top-right-radius: var(--borderRadius050);
+          border-bottom-right-radius: var(--borderRadius050);
+        }
       `}
     `}
 `;

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

@@ -109,6 +109,7 @@ const StyledLink = styled.span`
 
             &:focus {
               background-color: var(--colorsSemanticFocus250);
+              border-radius: var(--borderRadius050);
             }
           `}
 

package/esm/components/link-preview/__internal__/placeholder.component.d.ts

@@ -1,2 +1,4 @@
+/// <reference types="react" />
+export declare const StyledPlaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Placeholder: () => JSX.Element;
 export default Placeholder;
-declare function Placeholder(): JSX.Element;

package/esm/components/link-preview/__internal__/placeholder.component.js

@@ -1,11 +1,14 @@
 import React from "react";
+import PropTypes from "prop-types";
 import styled from "styled-components";
-const StyledPlaceHolder = styled.div`
+export const StyledPlaceHolder = styled.div`
   overflow: hidden;
   position: relative;
   height: 152px;
   min-width: 152px;
   background-color: var(--colorsUtilityMajor025);
+  border-bottom-left-radius: var(--borderRadius100);
+  border-top-left-radius: var(--borderRadius100);
 `;
 const Circle = styled.div`
   height: 22px;

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

@@ -11,6 +11,7 @@ const StyledLinkPreview = styled.a`
   as
 }) => css`
     border: 1px solid var(--colorsUtilityMajor050);
+    border-radius: var(--borderRadius100);
     background-color: var(--colorsUtilityMajor025);
     color: var(--colorsUtilityYin090);
 

package/esm/components/loader/loader-square.style.js

@@ -13,27 +13,32 @@ const loaderAnimation = keyframes`
 const getDimentions = size => {
   let width;
   let marginRight;
+  let borderRadius;
 
   switch (size) {
     case "medium":
       width = "16px";
       marginRight = "8px";
+      borderRadius = "var(--borderRadiusCircle)";
       break;
 
     case "large":
       width = "20px";
       marginRight = "8px";
+      borderRadius = "var(--borderRadiusCircle)";
       break;
 
     default:
       width = "12px";
       marginRight = "6px";
+      borderRadius = "var(--borderRadiusCircle)";
   }
 
   return css`
     width: ${width};
     height: ${width};
     margin-right: ${marginRight};
+    border-radius: ${borderRadius};
   `;
 };
 

package/esm/components/loader-bar/loader-bar.style.js

@@ -33,6 +33,7 @@ const StyledLoaderBar = styled.div`
   size
 }) => css`
     display: inline-block;
+    border-radius: var(--borderRadius400);
     height: ${getHeight(size)};
     width: 100%;
     background-color: var(--colorsActionMajor150);

package/esm/components/menu/__internal__/submenu/submenu.style.js

@@ -58,6 +58,19 @@ const StyledSubmenu = styled.ul`
       }
     `}
 
+    ${!inFullscreenView && css`
+      border-bottom-right-radius: var(--borderRadius100);
+      border-bottom-left-radius: var(--borderRadius100);
+
+      ${StyledMenuItem}:last-child a,
+      ${StyledMenuItem}:last-child button,
+      ${StyledMenuItem}:last-child > span,
+      ${StyledMenuItem}:last-child > div {
+        border-bottom-left-radius: var(--borderRadius100);
+        border-bottom-right-radius: var(--borderRadius100);
+      }
+    `}
+
     display: block;
     list-style: none;
     margin: 0;