baseui 0.0.0-next-03a6fdb → 0.0.0-next-efef314

package/dnd-list/index.js.flow

@@ -5,7 +5,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {arrayMove, arrayRemove} from 'react-movable';
+import {arrayMove, arrayRemove} from 'react-movable';
+export {arrayMove, arrayRemove};
 export {default as StatefulList} from './stateful-list.js';
 export {default as StatefulListContainer} from './stateful-list-container.js';
 export {default as List} from './list.js';

package/es/dnd-list/index.js

@@ -4,7 +4,8 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-export { arrayMove, arrayRemove } from 'react-movable';
+import { arrayMove, arrayRemove } from 'react-movable';
+export { arrayMove, arrayRemove };
 export { default as StatefulList } from './stateful-list.js';
 export { default as StatefulListContainer } from './stateful-list-container.js';
 export { default as List } from './list.js'; // Constants

package/es/select/select-component.js

@@ -105,7 +105,7 @@ class Select extends React.Component {
       isPseudoFocused: false
     });
 
-    _defineProperty(this, "isMounted", false);
+    _defineProperty(this, "isItMounted", false);
 
     _defineProperty(this, "handleTouchOutside", event => {
       if (containsNode(this.dropdown.current, event.target)) return;
@@ -238,7 +238,7 @@ class Select extends React.Component {
         this.props.onBlur(event);
       }
 
-      if (this.isMounted) {
+      if (this.isItMounted) {
         this.setState({
           isFocused: false,
           isOpen: false,
@@ -565,7 +565,7 @@ class Select extends React.Component {
       this.focus();
     }
 
-    this.isMounted = true;
+    this.isItMounted = true;
 
     if (this.props.methodsRef) {
       const {
@@ -601,7 +601,7 @@ class Select extends React.Component {
       document.removeEventListener('click', this.handleClickOutside);
     }
 
-    this.isMounted = false;
+    this.isItMounted = false;
   }
 
   focus() {

package/es/table-semantic/styled-components.js

@@ -67,7 +67,8 @@ StyledTableHeadRow.displayName = "StyledTableHeadRow";
 export const StyledTableHeadCell = styled('th', ({
   $theme,
   $size,
-  $divider
+  $divider,
+  $isNumeric
 }) => {
   const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   const borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
@@ -81,7 +82,7 @@ export const StyledTableHeadCell = styled('th', ({
     paddingLeft: padding,
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
-    textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
+    textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
     verticalAlign: 'top',
     whiteSpace: 'nowrap',
     zIndex: 1,
@@ -170,7 +171,8 @@ export const StyledTableBodyCell = styled('td', ({
   $size,
   $divider,
   $isNumeric,
-  $isLastRow
+  $isLastRow,
+  $isSortable
 }) => {
   const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   const borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
@@ -178,7 +180,7 @@ export const StyledTableBodyCell = styled('td', ({
   const padding = sizeToCellPadding($theme, $size);
   return { ...$theme.typography.font200,
     paddingTop: padding,
-    paddingRight: padding,
+    paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
     paddingBottom: padding,
     paddingLeft: padding,
     color: $theme.colors.contentPrimary,

package/es/table-semantic/table-builder.js

@@ -79,6 +79,7 @@ export default class TableBuilder extends React.Component {
           $col: col,
           $colIndex: colIndex,
           $divider: divider,
+          $isNumeric: col.numeric,
           $size: size
         }, tableHeadCellProps, colTableHeadCellProps), col.header);
       }
@@ -117,6 +118,7 @@ export default class TableBuilder extends React.Component {
         $col: col,
         $colIndex: colIndex,
         $divider: divider,
+        $isNumeric: col.numeric,
         role: "button",
         tabIndex: "0",
         "aria-label": `${col.tableHeadAriaLabel || col.header}, ${sortLabel}`,
@@ -143,6 +145,7 @@ export default class TableBuilder extends React.Component {
         $rowIndex: rowIndex,
         $isNumeric: col.numeric,
         $isLastRow: rowIndex === lastRowindex,
+        $isSortable: col.sortable,
         $size: size
       }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
     }

package/es/tooltip/styled-components.js

@@ -21,6 +21,10 @@ import { getEndPosition } from '../popover/utils.js';
  */
 export const Body = styled('div', props => ({ ...getBodyStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
+  borderTopLeftRadius: props.$theme.borders.radius300,
+  borderTopRightRadius: props.$theme.borders.radius300,
+  borderBottomRightRadius: props.$theme.borders.radius300,
+  borderBottomLeftRadius: props.$theme.borders.radius300,
   boxShadow: props.$theme.lighting.shadow400,
   color: props.$theme.colors.tooltipText,
   // Reset transition property to opacity only, and static transform
@@ -30,6 +34,10 @@ export const Body = styled('div', props => ({ ...getBodyStyles(props),
 Body.displayName = "Body";
 export const Inner = styled('div', props => ({ ...getInnerStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
+  borderTopLeftRadius: props.$theme.borders.radius300,
+  borderTopRightRadius: props.$theme.borders.radius300,
+  borderBottomRightRadius: props.$theme.borders.radius300,
+  borderBottomLeftRadius: props.$theme.borders.radius300,
   paddingTop: props.$theme.sizing.scale300,
   paddingBottom: props.$theme.sizing.scale300,
   paddingLeft: props.$theme.sizing.scale600,

package/esm/dnd-list/index.js

@@ -4,7 +4,8 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-export { arrayMove, arrayRemove } from 'react-movable';
+import { arrayMove, arrayRemove } from 'react-movable';
+export { arrayMove, arrayRemove };
 export { default as StatefulList } from './stateful-list.js';
 export { default as StatefulListContainer } from './stateful-list-container.js';
 export { default as List } from './list.js'; // Constants

package/esm/select/select-component.js

@@ -159,7 +159,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       isPseudoFocused: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
+    _defineProperty(_assertThisInitialized(_this), "isItMounted", false);
 
     _defineProperty(_assertThisInitialized(_this), "handleTouchOutside", function (event) {
       if (containsNode(_this.dropdown.current, event.target)) return;
@@ -307,7 +307,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(event);
       }
 
-      if (_this.isMounted) {
+      if (_this.isItMounted) {
         _this.setState({
           isFocused: false,
           isOpen: false,
@@ -661,7 +661,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         this.focus();
       }
 
-      this.isMounted = true;
+      this.isItMounted = true;
 
       if (this.props.methodsRef) {
         var methodsRef = this.props.methodsRef;
@@ -697,7 +697,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         document.removeEventListener('click', this.handleClickOutside);
       }
 
-      this.isMounted = false;
+      this.isItMounted = false;
     }
   }, {
     key: "focus",

package/esm/table-semantic/styled-components.js

@@ -70,7 +70,8 @@ export var StyledTableHeadCell = styled('th', function (_ref5) {
 
   var $theme = _ref5.$theme,
       $size = _ref5.$size,
-      $divider = _ref5.$divider;
+      $divider = _ref5.$divider,
+      $isNumeric = _ref5.$isNumeric;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
   var padding = sizeToCellPadding($theme, $size);
@@ -83,7 +84,7 @@ export var StyledTableHeadCell = styled('th', function (_ref5) {
     paddingLeft: padding,
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
-    textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
+    textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
     verticalAlign: 'top',
     whiteSpace: 'nowrap',
     zIndex: 1
@@ -164,14 +165,15 @@ export var StyledTableBodyCell = styled('td', function (_ref12) {
       $size = _ref12.$size,
       $divider = _ref12.$divider,
       $isNumeric = _ref12.$isNumeric,
-      $isLastRow = _ref12.$isLastRow;
+      $isLastRow = _ref12.$isLastRow,
+      $isSortable = _ref12.$isSortable;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
   var borderHorizontal = $divider === undefined || $divider === DIVIDER.horizontal || $divider === DIVIDER.grid;
   var padding = sizeToCellPadding($theme, $size);
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
     paddingTop: padding,
-    paddingRight: padding,
+    paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
     paddingBottom: padding,
     paddingLeft: padding,
     color: $theme.colors.contentPrimary,

package/esm/table-semantic/table-builder.js

@@ -200,6 +200,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
             $col: col,
             $colIndex: colIndex,
             $divider: divider,
+            $isNumeric: col.numeric,
             $size: size
           }, tableHeadCellProps, colTableHeadCellProps), col.header);
         }
@@ -242,6 +243,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $col: col,
           $colIndex: colIndex,
           $divider: divider,
+          $isNumeric: col.numeric,
           role: "button",
           tabIndex: "0",
           "aria-label": "".concat(col.tableHeadAriaLabel || col.header, ", ").concat(sortLabel),
@@ -275,6 +277,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $rowIndex: rowIndex,
           $isNumeric: col.numeric,
           $isLastRow: rowIndex === lastRowindex,
+          $isSortable: col.sortable,
           $size: size
         }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
       }

package/esm/tooltip/styled-components.js

@@ -28,6 +28,10 @@ import { getEndPosition } from '../popover/utils.js';
 export var Body = styled('div', function (props) {
   return _objectSpread(_objectSpread({}, getBodyStyles(props)), {}, {
     backgroundColor: props.$theme.colors.tooltipBackground,
+    borderTopLeftRadius: props.$theme.borders.radius300,
+    borderTopRightRadius: props.$theme.borders.radius300,
+    borderBottomRightRadius: props.$theme.borders.radius300,
+    borderBottomLeftRadius: props.$theme.borders.radius300,
     boxShadow: props.$theme.lighting.shadow400,
     color: props.$theme.colors.tooltipText,
     // Reset transition property to opacity only, and static transform
@@ -39,6 +43,10 @@ Body.displayName = "Body";
 export var Inner = styled('div', function (props) {
   return _objectSpread(_objectSpread(_objectSpread({}, getInnerStyles(props)), {}, {
     backgroundColor: props.$theme.colors.tooltipBackground,
+    borderTopLeftRadius: props.$theme.borders.radius300,
+    borderTopRightRadius: props.$theme.borders.radius300,
+    borderBottomRightRadius: props.$theme.borders.radius300,
+    borderBottomLeftRadius: props.$theme.borders.radius300,
     paddingTop: props.$theme.sizing.scale300,
     paddingBottom: props.$theme.sizing.scale300,
     paddingLeft: props.$theme.sizing.scale600,

package/menu/index.d.ts

@@ -123,6 +123,7 @@ export interface OptionListProps extends BaseMenuPropsT {
   item: any;
   getItemLabel: (item: any) => React.ReactNode;
   getChildMenu?: (item: any) => React.ReactNode;
+  onMouseDown?: (event: MouseEvent) => any;
   onMouseEnter?: (event: MouseEvent) => any;
   size?: OPTION_LIST_SIZE[keyof OPTION_LIST_SIZE];
   overrides?: {

package/menu/types.js.flow

@@ -234,6 +234,8 @@ export type OptionListPropsT = {
   getChildMenu?: (item: ItemT) => React.Node,
   onClick?: (event: MouseEvent) => mixed,
   /** Callback used to change highlighted index in stateful menu. */
+  onMouseDown?: (event: MouseEvent) => mixed,
+  /** Callback used to change highlighted index in stateful menu. */
   onMouseEnter?: (event: MouseEvent) => mixed,
   /** Renders UI in defined scale. */
   size?: $Keys<typeof OPTION_LIST_SIZE>,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-03a6fdb",
+  "version": "0.0.0-next-efef314",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -81,7 +81,7 @@
     "@commitlint/config-conventional": "^8.0.0",
     "@date-io/luxon": "^2.7.0",
     "@date-io/moment": "^2.7.0",
-    "@ladle/react": "^0.2.0",
+    "@ladle/react": "^0.3.0",
     "@mdx-js/tag": "^0.20.0",
     "@octokit/rest": "^16.33.1",
     "@svgr/cli": "^4.3.2",

package/select/select-component.js

@@ -180,7 +180,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       isPseudoFocused: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
+    _defineProperty(_assertThisInitialized(_this), "isItMounted", false);
 
     _defineProperty(_assertThisInitialized(_this), "handleTouchOutside", function (event) {
       if (containsNode(_this.dropdown.current, event.target)) return;
@@ -328,7 +328,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(event);
       }
 
-      if (_this.isMounted) {
+      if (_this.isItMounted) {
         _this.setState({
           isFocused: false,
           isOpen: false,
@@ -682,7 +682,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         this.focus();
       }
 
-      this.isMounted = true;
+      this.isItMounted = true;
 
       if (this.props.methodsRef) {
         var methodsRef = this.props.methodsRef;
@@ -718,7 +718,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         document.removeEventListener('click', this.handleClickOutside);
       }
 
-      this.isMounted = false;
+      this.isItMounted = false;
     }
   }, {
     key: "focus",

package/select/select-component.js.flow

@@ -117,13 +117,13 @@ class Select extends React.Component<PropsT, SelectStateT> {
     isPseudoFocused: false,
   };
 
-  isMounted: boolean = false;
+  isItMounted: boolean = false;
 
   componentDidMount() {
     if (this.props.autoFocus) {
       this.focus();
     }
-    this.isMounted = true;
+    this.isItMounted = true;
 
     if (this.props.methodsRef) {
       const {methodsRef} = this.props;
@@ -157,7 +157,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       document.removeEventListener('touchstart', this.handleTouchOutside);
       document.removeEventListener('click', this.handleClickOutside);
     }
-    this.isMounted = false;
+    this.isItMounted = false;
   }
 
   focus() {
@@ -319,7 +319,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       this.props.onBlur(event);
     }
 
-    if (this.isMounted) {
+    if (this.isItMounted) {
       this.setState({
         isFocused: false,
         isOpen: false,

package/table-semantic/styled-components.js

@@ -81,7 +81,8 @@ var StyledTableHeadCell = (0, _index.styled)('th', function (_ref5) {
 
   var $theme = _ref5.$theme,
       $size = _ref5.$size,
-      $divider = _ref5.$divider;
+      $divider = _ref5.$divider,
+      $isNumeric = _ref5.$isNumeric;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === _constants.DIVIDER.grid || $divider === _constants.DIVIDER.vertical;
   var padding = sizeToCellPadding($theme, $size);
@@ -94,7 +95,7 @@ var StyledTableHeadCell = (0, _index.styled)('th', function (_ref5) {
     paddingLeft: padding,
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
-    textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
+    textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
     verticalAlign: 'top',
     whiteSpace: 'nowrap',
     zIndex: 1
@@ -182,14 +183,15 @@ var StyledTableBodyCell = (0, _index.styled)('td', function (_ref12) {
       $size = _ref12.$size,
       $divider = _ref12.$divider,
       $isNumeric = _ref12.$isNumeric,
-      $isLastRow = _ref12.$isLastRow;
+      $isLastRow = _ref12.$isLastRow,
+      $isSortable = _ref12.$isSortable;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === _constants.DIVIDER.vertical || $divider === _constants.DIVIDER.grid;
   var borderHorizontal = $divider === undefined || $divider === _constants.DIVIDER.horizontal || $divider === _constants.DIVIDER.grid;
   var padding = sizeToCellPadding($theme, $size);
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
     paddingTop: padding,
-    paddingRight: padding,
+    paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
     paddingBottom: padding,
     paddingLeft: padding,
     color: $theme.colors.contentPrimary,

package/table-semantic/styled-components.js.flow

@@ -78,12 +78,13 @@ type StyledTableHeadCellPropsT = {
   $col?: {},
   $colIndex?: ?number,
   $divider?: DividerT,
+  $isNumeric?: ?boolean,
   $size?: SizeT,
 };
 
 export const StyledTableHeadCell = styled<StyledTableHeadCellPropsT>(
   'th',
-  ({$theme, $size, $divider}) => {
+  ({$theme, $size, $divider, $isNumeric}) => {
     const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
     const borderVertical =
       $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
@@ -99,7 +100,7 @@ export const StyledTableHeadCell = styled<StyledTableHeadCellPropsT>(
       paddingLeft: padding,
       backgroundColor: $theme.colors.tableHeadBackgroundColor,
       color: $theme.colors.contentPrimary,
-      textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
+      textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
       verticalAlign: 'top',
       whiteSpace: 'nowrap',
       zIndex: 1,
@@ -215,11 +216,12 @@ type StyledTableBodyCellPropsT = {
   $size?: SizeT,
   $isNumeric?: ?boolean,
   $isLastRow?: ?boolean,
+  $isSortable?: ?boolean,
 };
 
 export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
   'td',
-  ({$theme, $size, $divider, $isNumeric, $isLastRow}) => {
+  ({$theme, $size, $divider, $isNumeric, $isLastRow, $isSortable}) => {
     const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
     const borderVertical =
       $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
@@ -232,7 +234,7 @@ export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
     return {
       ...$theme.typography.font200,
       paddingTop: padding,
-      paddingRight: padding,
+      paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
       paddingBottom: padding,
       paddingLeft: padding,
       color: $theme.colors.contentPrimary,

package/table-semantic/table-builder.js

@@ -208,6 +208,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
             $col: col,
             $colIndex: colIndex,
             $divider: divider,
+            $isNumeric: col.numeric,
             $size: size
           }, tableHeadCellProps, colTableHeadCellProps), col.header);
         }
@@ -250,6 +251,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $col: col,
           $colIndex: colIndex,
           $divider: divider,
+          $isNumeric: col.numeric,
           role: "button",
           tabIndex: "0",
           "aria-label": "".concat(col.tableHeadAriaLabel || col.header, ", ").concat(sortLabel),
@@ -283,6 +285,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $rowIndex: rowIndex,
           $isNumeric: col.numeric,
           $isLastRow: rowIndex === lastRowindex,
+          $isSortable: col.sortable,
           $size: size
         }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
       }

package/table-semantic/table-builder.js.flow

@@ -153,6 +153,7 @@ export default class TableBuilder<T> extends React.Component<
             $col={col}
             $colIndex={colIndex}
             $divider={divider}
+            $isNumeric={col.numeric}
             $size={size}
             {...tableHeadCellProps}
             {...colTableHeadCellProps}
@@ -211,6 +212,7 @@ export default class TableBuilder<T> extends React.Component<
           $col={col}
           $colIndex={colIndex}
           $divider={divider}
+          $isNumeric={col.numeric}
           role="button"
           tabIndex="0"
           aria-label={`${col.tableHeadAriaLabel || col.header}, ${sortLabel}`}
@@ -249,6 +251,7 @@ export default class TableBuilder<T> extends React.Component<
           $rowIndex={rowIndex}
           $isNumeric={col.numeric}
           $isLastRow={rowIndex === lastRowindex}
+          $isSortable={col.sortable}
           $size={size}
           {...tableBodyCellProps}
           {...colTableBodyCellProps}

package/tooltip/styled-components.js

@@ -31,6 +31,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Body = (0, _index.styled)('div', function (props) {
   return _objectSpread(_objectSpread({}, (0, _styledComponents.getBodyStyles)(props)), {}, {
     backgroundColor: props.$theme.colors.tooltipBackground,
+    borderTopLeftRadius: props.$theme.borders.radius300,
+    borderTopRightRadius: props.$theme.borders.radius300,
+    borderBottomRightRadius: props.$theme.borders.radius300,
+    borderBottomLeftRadius: props.$theme.borders.radius300,
     boxShadow: props.$theme.lighting.shadow400,
     color: props.$theme.colors.tooltipText,
     // Reset transition property to opacity only, and static transform
@@ -43,6 +47,10 @@ Body.displayName = "Body";
 var Inner = (0, _index.styled)('div', function (props) {
   return _objectSpread(_objectSpread(_objectSpread({}, (0, _styledComponents.getInnerStyles)(props)), {}, {
     backgroundColor: props.$theme.colors.tooltipBackground,
+    borderTopLeftRadius: props.$theme.borders.radius300,
+    borderTopRightRadius: props.$theme.borders.radius300,
+    borderBottomRightRadius: props.$theme.borders.radius300,
+    borderBottomLeftRadius: props.$theme.borders.radius300,
     paddingTop: props.$theme.sizing.scale300,
     paddingBottom: props.$theme.sizing.scale300,
     paddingLeft: props.$theme.sizing.scale600,

package/tooltip/styled-components.js.flow

@@ -28,6 +28,10 @@ import type {SharedStylePropsArgT} from '../popover/types.js';
 export const Body = styled<SharedStylePropsArgT>('div', props => ({
   ...getBodyStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
+  borderTopLeftRadius: props.$theme.borders.radius300,
+  borderTopRightRadius: props.$theme.borders.radius300,
+  borderBottomRightRadius: props.$theme.borders.radius300,
+  borderBottomLeftRadius: props.$theme.borders.radius300,
   boxShadow: props.$theme.lighting.shadow400,
   color: props.$theme.colors.tooltipText,
   // Reset transition property to opacity only, and static transform
@@ -38,6 +42,10 @@ export const Body = styled<SharedStylePropsArgT>('div', props => ({
 export const Inner = styled<SharedStylePropsArgT>('div', props => ({
   ...getInnerStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
+  borderTopLeftRadius: props.$theme.borders.radius300,
+  borderTopRightRadius: props.$theme.borders.radius300,
+  borderBottomRightRadius: props.$theme.borders.radius300,
+  borderBottomLeftRadius: props.$theme.borders.radius300,
   paddingTop: props.$theme.sizing.scale300,
   paddingBottom: props.$theme.sizing.scale300,
   paddingLeft: props.$theme.sizing.scale600,