carbon-react 118.1.0 → 118.2.0

package/lib/components/select/utils/get-next-child-by-text.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+/**
+ * Recreates HTML Select element functionality of finding first match based on typed characters
+ * */
+export default function getNextChildByText(textToMatch: string, arrayOfChildren: React.ReactElement[], previousIndex?: number): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/lib/components/select/utils/get-next-child-by-text.js

@@ -5,20 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = getNextChildByText;
 
-/**
- * Recreates HTML Select element functionality of finding first match based on typed characters
- * */
-function getNextChildByText(textToMatch, arrayOfChildren, previousIndex = -1) {
-  const lastCharacter = textToMatch.slice(-1);
-  const isTheSameCharacter = textToMatch.split("").every(character => character === lastCharacter);
-  let indexOfMatch = findElementStartingWithText(textToMatch, arrayOfChildren);
-  const listOfMatches = getListOfMatches(arrayOfChildren, lastCharacter);
-
-  if (isTheSameCharacter && listOfMatches.length > 1) {
-    indexOfMatch = getIndexOfNextElement(listOfMatches, previousIndex);
-  }
+function findElementStartingWithText(textToMatch, list) {
+  return list.findIndex(child => {
+    var _child$props$text;
 
-  return arrayOfChildren[indexOfMatch];
+    return (_child$props$text = child.props.text) === null || _child$props$text === void 0 ? void 0 : _child$props$text.toLowerCase().startsWith(textToMatch.toLowerCase());
+  });
 }
 
 function getListOfMatches(arrayOfChildren, lastCharacter) {
@@ -40,9 +32,20 @@ function getIndexOfNextElement(listOfMatches, previousIndex) {
 
   return listOfMatches[listOfMatches.indexOf(previousIndex) + 1];
 }
+/**
+ * Recreates HTML Select element functionality of finding first match based on typed characters
+ * */
 
-function findElementStartingWithText(textToMatch, list) {
-  return list.findIndex(child => {
-    return child.props.text && child.props.text.toLowerCase().startsWith(textToMatch.toLowerCase());
-  });
+
+function getNextChildByText(textToMatch, arrayOfChildren, previousIndex = -1) {
+  const lastCharacter = textToMatch.slice(-1);
+  const isTheSameCharacter = textToMatch.split("").every(character => character === lastCharacter);
+  let indexOfMatch = findElementStartingWithText(textToMatch, arrayOfChildren);
+  const listOfMatches = getListOfMatches(arrayOfChildren, lastCharacter);
+
+  if (isTheSameCharacter && listOfMatches.length > 1) {
+    indexOfMatch = getIndexOfNextElement(listOfMatches, previousIndex);
+  }
+
+  return arrayOfChildren[indexOfMatch];
 }

package/lib/components/select/utils/get-next-index-by-key.d.ts

@@ -0,0 +1,2 @@
+export declare const PAGE_SIZE = 4;
+export default function getNextIndexByKey(key: string, currentIndex: number, lastIndex: number, isLoading?: boolean): number;

package/lib/components/select/utils/highlight-part-of-text.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function highlightPartOfTextRecursive(child: React.ReactNode, partToHighlight: string): React.ReactNode;

package/lib/components/select/utils/highlight-part-of-text.js

@@ -23,10 +23,11 @@ function highlightPartOfText(text, partToHighlight) {
 
   const precedingText = text.substr(0, indexOfFirstMatch);
   const matchingText = text.substr(indexOfFirstMatch, partToHighlight.length);
-  let followingText = text.substr(indexOfFirstMatch + partToHighlight.length, text.length);
+  const followingText = text.substr(indexOfFirstMatch + partToHighlight.length, text.length);
+  let followingTextNode = followingText;
 
   if (followingText.length >= partToHighlight.length) {
-    followingText = highlightPartOfText(followingText, partToHighlight);
+    followingTextNode = highlightPartOfText(followingText, partToHighlight);
   }
 
   const newValue = [/*#__PURE__*/_react.default.createElement("span", {
@@ -35,7 +36,7 @@ function highlightPartOfText(text, partToHighlight) {
     key: "match"
   }, matchingText), /*#__PURE__*/_react.default.createElement("span", {
     key: "following"
-  }, followingText)];
+  }, followingTextNode)];
   return newValue;
 }
 
@@ -43,6 +44,12 @@ function highlightPartOfTextRecursive(child, partToHighlight) {
   if (typeof child === "string") {
     return highlightPartOfText(child, partToHighlight);
   }
+  /* istanbul ignore if */
+
+
+  if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+    return child;
+  }
 
   const highlightedChildren = _react.default.Children.map(child.props.children, grandChild => highlightPartOfTextRecursive(grandChild, partToHighlight));
 

package/lib/components/select/utils/is-expected-option.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function isExpectedOption(element: React.ReactElement, expectedValue?: string | Record<string, unknown> | null): boolean;

package/lib/components/select/utils/is-expected-option.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = isExpectedOption;
 
-var _option = _interopRequireDefault(require("../option/option.component"));
+var _option = _interopRequireDefault(require("../option"));
 
 var _optionRow = _interopRequireDefault(require("../option-row/option-row.component"));
 

package/lib/components/select/utils/is-expected-value.d.ts

@@ -0,0 +1 @@
+export default function isExpectedValue(currentValue: string | Record<string, unknown>, expectedValue: string | Record<string, unknown>): boolean;

package/lib/components/select/utils/is-expected-value.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = isExpectedValue;
 
 function isExpectedValue(currentValue, expectedValue) {
-  if (typeof currentValue === "object" && currentValue.id !== null && currentValue.id !== undefined) {
+  if (typeof currentValue === "object" && currentValue.id !== null && currentValue.id !== undefined && typeof expectedValue === "object") {
     return currentValue.id === expectedValue.id;
   }
 

package/lib/components/select/utils/is-navigation-key.d.ts

@@ -0,0 +1 @@
+export default function isNavigationKey(key: string): boolean;

package/lib/components/select/utils/matching-text.style.d.ts

@@ -0,0 +1,2 @@
+declare const MatchingText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export default MatchingText;

package/lib/components/select/utils/with-filter.hoc.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface WrappedComponentProps {
+    filterText?: string;
+    isLoading?: boolean;
+    multiColumn?: boolean;
+    tableHeader?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export interface FilteredComponentProps extends WrappedComponentProps {
+    noResultsMessage?: string;
+}
+/** Filters wrapped component children based on provided filter text and highlights matching content */
+declare const withFilter: <T extends WrappedComponentProps>(WrappedComponent: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<FilteredComponentProps & T> & React.RefAttributes<HTMLDivElement>>;
+export default withFilter;

package/lib/components/select/utils/with-filter.hoc.js

@@ -7,15 +7,13 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
 
 var _optionRow = _interopRequireDefault(require("../option-row/option-row.style"));
 
 var _option = _interopRequireDefault(require("../option/option.style"));
 
-var _option2 = _interopRequireDefault(require("../option/option.component"));
+var _option2 = _interopRequireDefault(require("../option"));
 
 var _optionRow2 = _interopRequireDefault(require("../option-row/option-row.component"));
 
@@ -46,6 +44,11 @@ const filterOptionRows = (optionRow, filterText) => {
   const cells = _react.default.Children.toArray(optionRow.props.children);
 
   const hasText = cells.find(cell => {
+    /* istanbul ignore if */
+    if (! /*#__PURE__*/_react.default.isValidElement(cell)) {
+      return false;
+    }
+
     if (typeof cell.props.children === "string") {
       const processedText = cell.props.children.toLowerCase();
       const processedValue = filterText.toLowerCase();
@@ -64,15 +67,23 @@ const filterOptionRows = (optionRow, filterText) => {
 };
 
 const filterChildren = filterText => children => {
-  // eslint-disable-next-line consistent-return
   const filteredChildren = _react.default.Children.map(children, child => {
+    /* istanbul ignore if */
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return null;
+    }
+
     if (child.type === _option2.default) {
       return filterOptions(child, filterText);
     }
+    /* istanbul ignore else */
+
 
     if (child.type === _optionRow2.default) {
       return filterOptionRows(child, filterText);
     }
+    /* istanbul ignore next */
+
 
     return null;
   });
@@ -80,9 +91,40 @@ const filterChildren = filterText => children => {
   if (_react.default.Children.count(filteredChildren)) return filteredChildren;
   return null;
 };
-/** Filters wrapped component children based on provided filter text and highlights matching content */
 
+function addHighlightedContent(filteredElements, filterText) {
+  return _react.default.Children.map(filteredElements, child => {
+    let highlightedContent;
+    /* istanbul ignore if */
+
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
+    }
 
+    if (child.type === _option2.default) {
+      highlightedContent = (0, _highlightPartOfText.default)(child.props.text, filterText);
+    }
+
+    if (child.type === _optionRow2.default) {
+      highlightedContent = _react.default.Children.map(child.props.children, cell => {
+        /* istanbul ignore if */
+        if (! /*#__PURE__*/_react.default.isValidElement(cell)) {
+          return cell;
+        }
+
+        return /*#__PURE__*/_react.default.cloneElement(cell, {
+          children: (0, _highlightPartOfText.default)(cell.props.children, filterText)
+        });
+      });
+    }
+
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      children: highlightedContent
+    });
+  });
+}
+
+/** Filters wrapped component children based on provided filter text and highlights matching content */
 const withFilter = WrappedComponent => {
   const FilteredComponent = /*#__PURE__*/_react.default.forwardRef(({
     children,
@@ -106,8 +148,9 @@ const withFilter = WrappedComponent => {
           if (multiColumn) {
             var _tableHeader$props;
 
-            const colSpan = _react.default.Children.count(tableHeader === null || tableHeader === void 0 ? void 0 : (_tableHeader$props = tableHeader.props) === null || _tableHeader$props === void 0 ? void 0 : _tableHeader$props.children);
-
+            const colSpan = /*#__PURE__*/_react.default.isValidElement(tableHeader) ?
+            /* istanbul ignore next */
+            _react.default.Children.count(tableHeader === null || tableHeader === void 0 ? void 0 : (_tableHeader$props = tableHeader.props) === null || _tableHeader$props === void 0 ? void 0 : _tableHeader$props.children) : 1;
             return /*#__PURE__*/_react.default.createElement(_optionRow.default, null, /*#__PURE__*/_react.default.createElement("td", {
               style: {
                 fontWeight: "normal"
@@ -124,45 +167,19 @@ const withFilter = WrappedComponent => {
 
       return children;
     }, [children, filterText, isLoading, multiColumn, noResultsMessage, tableHeader, l]);
-    return /*#__PURE__*/_react.default.createElement(WrappedComponent, _extends({
-      filterText: filterText,
-      isLoading: isLoading,
-      multiColumn: multiColumn,
-      tableHeader: tableHeader
-    }, props, {
+    const wrappedComponentProps = {
+      filterText,
+      isLoading,
+      multiColumn,
+      tableHeader,
+      ...props
+    };
+    return /*#__PURE__*/_react.default.createElement(WrappedComponent, _extends({}, wrappedComponentProps, {
       ref: forwardedRef
     }), getFilteredChildren());
   });
 
-  function addHighlightedContent(filteredElements, filterText) {
-    return _react.default.Children.map(filteredElements, child => {
-      let highlightedContent;
-
-      if (child.type === _option2.default) {
-        highlightedContent = (0, _highlightPartOfText.default)(child.props.text, filterText);
-      }
-
-      if (child.type === _optionRow2.default) {
-        highlightedContent = _react.default.Children.map(child.props.children, cell => /*#__PURE__*/_react.default.cloneElement(cell, {
-          children: (0, _highlightPartOfText.default)(cell.props.children, filterText)
-        }));
-      }
-
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        children: highlightedContent
-      });
-    });
-  }
-
-  FilteredComponent.propTypes = {
-    forwardedRef: _propTypes.default.object,
-    children: _propTypes.default.node,
-    filterText: _propTypes.default.string,
-    noResultsMessage: _propTypes.default.string,
-    isLoading: _propTypes.default.bool,
-    multiColumn: _propTypes.default.bool,
-    tableHeader: _propTypes.default.node
-  };
+  FilteredComponent.displayName = "FilteredComponent";
   return FilteredComponent;
 };
 

package/lib/components/split-button/split-button-children.style.d.ts

@@ -1,4 +1,5 @@
 import { ThemeObject } from "../../style/themes/base";
+export declare const borderRadiusStyling = "\n  > {\n    &:first-child:last-child {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n";
 declare type StyledSplitButtonChildrenContainerProps = {
     theme: ThemeObject;
     align: "left" | "right";

package/lib/components/split-button/split-button-children.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.borderRadiusStyling = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -17,7 +17,34 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const borderRadiusStyling = `
+  > {
+    &:first-child:last-child {
+      border-radius: var(--borderRadius100);
+    }
+
+    &:first-child:not(:last-child) {
+      border-top-left-radius: var(--borderRadius100);
+      border-top-right-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius000);
+      border-bottom-left-radius: var(--borderRadius000);
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: var(--borderRadius000);
+    }
+
+    &:last-child:not(:first-child) {
+      border-top-right-radius: var(--borderRadius000);
+      border-top-left-radius: var(--borderRadius000);
+      border-bottom-left-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius100);
+    }
+  }
+`;
+exports.borderRadiusStyling = borderRadiusStyling;
 const StyledSplitButtonChildrenContainer = _styledComponents.default.div`
+  border-radius: var(--borderRadius100);
   ${({
   theme,
   align,
@@ -29,6 +56,8 @@ const StyledSplitButtonChildrenContainer = _styledComponents.default.div`
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
 
+    ${borderRadiusStyling}
+
     ${_button.default} {
       border: 1px solid var(--colorsActionMajorTransparent);
       display: block;

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

@@ -29,6 +29,9 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
   displayed,
   size
 }) => (0, _styledComponents.css)`
+    border-top-left-radius: var(--borderRadius000);
+    border-bottom-left-radius: var(--borderRadius000);
+
     ${!disabled && displayed ? (0, _styledComponents.css)`
           background-color: var(--colorsActionMajor500);
           border-color: var(--colorsActionMajor500);
@@ -42,7 +45,8 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
             border-left-color: var(--colorsSemanticFocus500);
           }
         ` : ""}
-    ${!disabled && buttonType === "primary" && `position: relative;
+    ${!disabled && buttonType === "primary" && `
+      position: relative;
       &::before {
         content: '';
         width: 2px;
@@ -53,6 +57,7 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
         z-index: 2;
       }  
     `}
+
     ${buttonType === "secondary" && "border-left-width: 0;"}
     padding: 0 ${horizontalPaddingSizes[size]}px;
 

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

@@ -17,13 +17,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const StyledSplitButton = _styledComponents.default.div`
   ${_styledSystem.margin}
-
   display: inline-block;
   position: relative;
 
+  ${_button.default}:first-of-type {
+    border-top-right-radius: var(--borderRadius000);
+    border-bottom-right-radius: var(--borderRadius000);
+  }
+
   & > ${_button.default} {
     margin: 0;
-
     &:focus {
       border: 3px solid var(--colorsSemanticFocus500);
       outline: none;

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

@@ -38,7 +38,7 @@ const StyledSwitchSlider = _styledComponents.default.span`
     width: 64px;
     min-width: fit-content;
     z-index: 2;
-    border-radius: 90px;
+    border-radius: var(--borderRadius400);
     border-style: solid;
     border-color: var(--colorsActionMinor400);
     border-width: var(--borderWidth200);
@@ -92,7 +92,6 @@ const StyledSwitchSlider = _styledComponents.default.span`
     `}
 
     ${size === "large" && (0, _styledComponents.css)`
-      border-radius: 30px;
       &::before {
         height: 32px;
         width: 32px;

package/lib/components/tabs/__internal__/tab-title/tab-title.component.js

@@ -217,6 +217,7 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     href: href,
     target: "_blank"
   }), titleChildren) : /*#__PURE__*/_react.default.createElement(_tabTitle.StyledTabTitleButton, _extends({}, titleWrapperProps, {
+    type: "button",
     ref: ref
   }), titleChildren);
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {

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

@@ -45,6 +45,17 @@ const StyledTitleContent = _styledComponents.default.span`
       display: flex;
       width: 100%;
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
+      border-top-left-radius: var(--borderRadius100);
+      border-bottom-left-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius000);
+      border-top-right-radius: var(--borderRadius000);
+    `}
+
+    ${position === "top" && (0, _styledComponents.css)`
+      border-top-left-radius: var(--borderRadius100);
+      border-top-right-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius000);
+      border-bottom-left-radius: var(--borderRadius000);
     `}
 
     ${hasHref && (0, _styledComponents.css)`
@@ -105,8 +116,7 @@ const StyledTitleContent = _styledComponents.default.span`
       padding: 10px 16px;
 
       ${borders && `padding-bottom: 9px;`}
-    `}
- 
+    `} 
 
     ${(warning || info) && (0, _styledComponents.css)`
       outline: 1px solid;
@@ -225,6 +235,8 @@ exports.StyledTitleContent = StyledTitleContent;
 const tabTitleStyles = (0, _styledComponents.css)`
   background-color: transparent;
   display: inline-block;
+  border-top-left-radius: var(--borderRadius100);
+  border-top-right-radius: var(--borderRadius100);
   font-weight: bold;
   position: relative;
   border: none;
@@ -238,6 +250,14 @@ const tabTitleStyles = (0, _styledComponents.css)`
   position
 }) => position === "top" && "white-space: nowrap"};
 
+  ${({
+  position
+}) => (0, _styledComponents.css)`
+    ${position === "left" && (0, _styledComponents.css)`
+      border-top-right-radius: var(--borderRadius000);
+    `}
+  `}
+
   a:visited {
     color: inherit;
   }

package/lib/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -25,6 +25,11 @@ const StyledTabsHeaderWrapper = _styledComponents.default.div`
       box-sizing: border-box;
       padding: 3px;
 
+      button[data-element="select-tab"] {
+        border-top-left-radius: var(--borderRadius100);
+        border-bottom-left-radius: var(--borderRadius100);
+      }
+
       ${!isInSidebar && (0, _styledComponents.css)`
         min-width: 20%;
       `}

package/lib/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -19,6 +19,7 @@ const StyledToolbarButton = _styledComponents.default.button.attrs({
   type: "button"
 })`
   background-color: inherit;
+  border-radius: var(--borderRadius050);
   border: none;
   cursor: pointer;
   width: 32px;
@@ -36,10 +37,12 @@ const StyledToolbarButton = _styledComponents.default.button.attrs({
     :active {
       outline: 2px solid var(--colorsSemanticFocus500);
       outline-offset: -2px;
+      border-radius: var(--borderRadius050);
     }
 
     :hover {
       background-color: var(--colorsActionMinor200);
+      border-radius: var(--borderRadius050);
     }
 
     ${isActive && (0, _styledComponents.css)`

package/lib/components/text-editor/text-editor.style.js

@@ -28,6 +28,8 @@ StyledEditorWrapper.defaultProps = {
   theme: _base.default
 };
 const StyledEditorContainer = _styledComponents.default.div`
+  border-radius: var(--borderRadius050);
+
   ${({
   hasError,
   rows,
@@ -79,6 +81,7 @@ const StyledEditorOutline = _styledComponents.default.div`
   isFocused,
   hasError
 }) => (0, _styledComponents.css)`
+    border-radius: var(--borderRadius050);
     outline: none;
     min-width: 320px;
 

package/lib/components/tile/tile.component.d.ts

@@ -24,6 +24,8 @@ export interface TileProps extends SpaceProps, WidthProps {
     borderWidth?: Extract<DesignTokensType, `borderWidth${string}`>;
     /** Sets the border variant that should be used */
     borderVariant?: "default" | "selected" | "positive" | "negative" | "caution" | "info";
+    /** Sets the level of roundness of the corners, "default" is 8px and "large" is 16px */
+    roundness?: "default" | "large";
 }
-export declare const Tile: ({ variant, p, children, orientation, width, ...props }: TileProps) => JSX.Element;
+export declare const Tile: ({ variant, p, children, orientation, width, roundness, ...props }: TileProps) => JSX.Element;
 export default Tile;

package/lib/components/tile/tile.component.js

@@ -21,6 +21,7 @@ const Tile = ({
   children,
   orientation = "horizontal",
   width,
+  roundness = "default",
   ...props
 }) => {
   const isHorizontal = orientation === "horizontal";
@@ -60,7 +61,8 @@ const Tile = ({
     width: width,
     "data-component": "tile",
     isHorizontal: isHorizontal,
-    p: p
+    p: p,
+    roundness: roundness
   }, props), wrappedChildren);
 };
 

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

@@ -6,7 +6,7 @@ interface TileContentProps {
     width?: string | number;
 }
 declare const TileContent: import("styled-components").StyledComponent<"div", any, TileContentProps, never>;
-declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "variant" | "borderWidth" | "borderVariant"> & {
+declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "variant" | "roundness" | "borderWidth" | "borderVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
 export { StyledTile, TileContent };

package/lib/components/tile/tile.style.js

@@ -102,12 +102,15 @@ const StyledTile = _styledComponents.default.div`
   borderWidth = "borderWidth100",
   isHorizontal,
   variant,
-  width
+  width,
+  roundness
 }) => (0, _styledComponents.css)`
     ${_styledSystem.space}
 
     box-sizing: border-box;
     border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
+    border-radius: ${roundness === "default" ? "var(--borderRadius100)" : "var(--borderRadius200)"};
+    overflow: hidden;
 
     ${variant === "tile" && (0, _styledComponents.css)`
       background-color: var(--colorsUtilityYang100);

package/lib/components/tile-select/tile-select.style.d.ts

@@ -8,6 +8,7 @@ declare const StyledDescription: import("styled-components").StyledComponent<"p"
 declare const StyledTileSelect: import("styled-components").StyledComponent<"div", any, {
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
+    hasAccordion?: boolean | undefined;
 }, never>;
 declare const StyledFocusWrapper: import("styled-components").StyledComponent<"div", any, {
     checked?: boolean | undefined;

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

@@ -59,6 +59,7 @@ exports.StyledDescription = StyledDescription;
 const StyledTileSelect = _styledComponents.default.div`
   background: var(--colorsActionMinorYang100);
   padding: 24px;
+
   ${({
   checked
 }) => checked && (0, _styledComponents.css)`
@@ -85,6 +86,9 @@ const StyledFocusWrapper = _styledComponents.default.div`
 }) => (0, _styledComponents.css)`
     position: relative;
     border: 1px solid var(--colorsActionMinor250);
+    border-radius: var(--borderRadius100);
+    overflow: hidden;
+
     ${checked && (0, _styledComponents.css)`
       border-color: var(--colorsActionMajor500);
       z-index: 10;
@@ -102,6 +106,7 @@ const StyledTileSelectContainer = _styledComponents.default.div`
 
   width: 100%;
   position: relative;
+
   & + & ${StyledFocusWrapper} {
     margin-top: -1px;
   }
@@ -127,6 +132,9 @@ const StyledAccordionFooterWrapper = _styledComponents.default.div`
   z-index: 200;
   left: -12px;
 
+  border-bottom-right-radius: var(--borderRadius100);
+  border-bottom-left-radius: var(--borderRadius100);
+
   ${({
   accordionExpanded
 }) => `