baseui 11.0.2 → 11.1.1

package/slider/index.d.ts

@@ -1,20 +1,16 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
-export interface STATE_CHANGE_TYPE {
+export declare const STATE_CHANGE_TYPE: {
   change: 'change';
-}
+};
 
 export interface State {
   value: number[];
 }
 
-export type StateReducer = (
-  stateType: string,
-  nextState: State,
-  currentState: State,
-) => State;
+export type StateReducer = (stateType: string, nextState: State, currentState: State) => State;
 
 export interface SliderOverrides {
   Root?: Override<SharedProps>;
@@ -78,24 +74,19 @@ export type SharedProps = {
   $marks: boolean;
 };
 
-export const Slider: React.FC<SliderProps>;
-export const StatefulSlider: React.FC<StatefulSliderProps>;
-export class StatefulContainer extends React.Component<
-  StatefulContainerProps,
-  State
-> {
+export declare const Slider: React.FC<SliderProps>;
+export declare const StatefulSlider: React.FC<StatefulSliderProps>;
+export class StatefulContainer extends React.Component<StatefulContainerProps, State> {
   onChange(params: State): any;
   onFinalChange?: (params: State) => any;
-  internalSetState(type: 'change', {value}: State): void;
+  internalSetState(type: 'change', { value }: State): void;
 }
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledTrack: StyletronComponent<any>;
-export const StyledInnerTrack: StyletronComponent<any>;
-export const StyledThumb: StyletronComponent<any>;
-export const StyledInnerThumb: StyletronComponent<any>;
-export const StyledTick: StyletronComponent<any>;
-export const StyledTickBar: StyletronComponent<any>;
-export const StyledMark: StyletronComponent<any>;
-
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledTrack: StyletronComponent<any>;
+export declare const StyledInnerTrack: StyletronComponent<any>;
+export declare const StyledThumb: StyletronComponent<any>;
+export declare const StyledInnerThumb: StyletronComponent<any>;
+export declare const StyledTick: StyletronComponent<any>;
+export declare const StyledTickBar: StyletronComponent<any>;
+export declare const StyledMark: StyletronComponent<any>;

package/snackbar/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {Override} from '../overrides';
+import { Override } from '../overrides';
 
 declare const DURATION: {
   infinite: number;
@@ -17,11 +17,11 @@ declare const PLACEMENT: {
   bottom: 'bottom';
   bottomLeft: 'bottomLeft';
 };
-export {DURATION, PLACEMENT};
+export { DURATION, PLACEMENT };
 
-export type DurationT = (typeof DURATION)[keyof typeof DURATION];
+export type DurationT = typeof DURATION[keyof typeof DURATION];
 
-export type PlacementT = (typeof PLACEMENT)[keyof typeof PLACEMENT];
+export type PlacementT = typeof PLACEMENT[keyof typeof PLACEMENT];
 
 export type SnackbarElementOverridesT = {
   Root?: Override<any>;
@@ -40,7 +40,7 @@ export type SnackbarElementPropsT = {
   message: React.ReactNode;
   overrides?: SnackbarElementOverridesT;
   progress?: boolean;
-  startEnhancer?: React.FC<{size: number}>;
+  startEnhancer?: React.FC<{ size: number }>;
 };
 
 export type SnackbarProviderPropsT = {
@@ -52,9 +52,9 @@ export type SnackbarProviderPropsT = {
   defaultDuration?: DurationT;
 };
 
-export const SnackbarElement: React.FC<SnackbarElementPropsT>;
-export const SnackbarProvider: React.FC<SnackbarProviderPropsT>;
-export const useSnackbar: () => {
+export declare const SnackbarElement: React.FC<SnackbarElementPropsT>;
+export declare const SnackbarProvider: React.FC<SnackbarProviderPropsT>;
+export declare const useSnackbar: () => {
   enqueue: (elementProps: SnackbarElementPropsT, duration?: DurationT) => any;
   dequeue: () => any;
 };

package/spinner/index.d.ts

@@ -1,5 +1,5 @@
-import {StyletronComponent} from 'styletron-react';
-import {Sizing} from '../theme.ts';
+import { StyletronComponent } from 'styletron-react';
+import { Sizing } from '../theme';
 
 export enum SIZE {
   small = 'small',
@@ -8,9 +8,10 @@ export enum SIZE {
 }
 
 export interface SpinnerProps {
+  [key: string]: any;
   $color?: string;
   $borderWidth?: number | string | SIZE | Sizing;
   $size?: number | string | SIZE | Sizing;
 }
 
-export const Spinner: StyletronComponent<SpinnerProps>;
+export declare const Spinner: StyletronComponent<SpinnerProps>;

package/styles/index.d.ts

@@ -1,4 +1,84 @@
-import {Border} from '../theme';
-import {StyleObject} from 'styletron-react';
+import type {
+  Animation,
+  Border,
+  Borders,
+  Breakpoints,
+  Colors,
+  Grid,
+  Lighting,
+  MediaQuery,
+  Sizing,
+  Typography,
+  ZIndex,
+} from '../theme';
+import type { StyleObject, StyletronComponent } from 'styletron-react';
+import * as React from 'react';
+
+type StyletronStyledFn = typeof import('styletron-react').styled;
+type StyletronWithStyleFn = typeof import('styletron-react').withStyle;
 
 export function expandBorderStyles(borderStyles: Border): StyleObject;
+
+export interface Theme {
+  name: string;
+  direction: 'auto' | 'rtl' | 'ltr';
+  breakpoints: Breakpoints;
+  mediaQuery: MediaQuery;
+  grid: Grid;
+  colors: Colors;
+  typography: Typography;
+  sizing: Sizing;
+  lighting: Lighting;
+  animation: Animation;
+  borders: Borders;
+  zIndex: ZIndex;
+}
+
+type UseStyletronFn<Theme> = () => [(arg: StyleObject) => string, Theme];
+export function createThemedUseStyletron<Theme>(): UseStyletronFn<Theme>;
+export declare const useStyletron: UseStyletronFn<Theme>;
+export function withWrapper<C extends StyletronComponent<any>, P extends object>(
+  component: C,
+  wrapper: (component: C) => React.ComponentType<P>
+): StyletronComponent<React.ComponentProps<C> & P>;
+
+export function styled<
+  P extends object,
+  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  T = Theme
+>(
+  component: C,
+  styledFn: StyleObject | ((props: { $theme: T } & P) => StyleObject)
+): StyletronComponent<
+  Pick<React.ComponentProps<C>, Exclude<keyof React.ComponentProps<C>, { className: string }>> & P
+>;
+export function withStyle<C extends StyletronComponent<any>, P extends object, T = Theme>(
+  component: C,
+  styledFn: StyleObject | ((props: { $theme: T } & P) => StyleObject)
+): StyletronComponent<React.ComponentProps<C> & P>;
+
+export interface StyledFn<T> extends StyletronStyledFn {
+  <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>, P extends object>(
+    component: C,
+    style: (props: { $theme: T } & P) => StyleObject
+  ): StyletronComponent<
+    Pick<React.ComponentProps<C>, Exclude<keyof React.ComponentProps<C>, { className: string }>> & P
+  >;
+}
+
+export function createThemedStyled<Theme>(): StyledFn<Theme>;
+
+export interface WithStyleFn<T = Theme> extends StyletronWithStyleFn {
+  <C extends StyletronComponent<any>, P extends object, T1 = T>(
+    component: C,
+    style: (props: P & { $theme: T1 }) => StyleObject
+  ): StyletronComponent<React.ComponentProps<C> & P>;
+}
+
+export function createThemedWithStyle<Theme>(): WithStyleFn<Theme>;
+
+export interface ThemeProviderProps {
+  theme: Theme;
+  children?: React.ReactNode;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/table/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export enum SORT_DIRECTION {
   ASC = 'ASC',
@@ -23,7 +23,7 @@ export interface SortableHeadCellProps {
   title: React.ReactNode;
   fillClickTarget?: boolean;
 }
-export const SortableHeadCell: React.FC<SortableHeadCellProps>;
+export declare const SortableHeadCell: React.FC<SortableHeadCellProps>;
 
 export interface TableProps {
   columns: Array<string | React.ReactNode>;
@@ -52,17 +52,17 @@ export interface FilterProps {
   overrides?: FilterOverrides;
   returnFocus?: boolean;
 }
-export const Filter: React.FC<FilterProps>;
+export declare const Filter: React.FC<FilterProps>;
 
-export const StyledTable: StyletronComponent<any>;
-export const StyledFilterButton: StyletronComponent<any>;
-export const StyledFilterContent: StyletronComponent<any>;
-export const StyledFilterHeading: StyletronComponent<any>;
-export const StyledFilterFooter: StyletronComponent<any>;
-export const StyledHead: StyletronComponent<any>;
-export const StyledHeadCell: StyletronComponent<any>;
-export const StyledBody: StyletronComponent<any>;
-export const StyledRow: StyletronComponent<any>;
-export const StyledCell: StyletronComponent<any>;
-export const StyledAction: StyletronComponent<any>;
-export const StyledSortableLabel: StyletronComponent<any>;
+export declare const StyledTable: StyletronComponent<any>;
+export declare const StyledFilterButton: StyletronComponent<any>;
+export declare const StyledFilterContent: StyletronComponent<any>;
+export declare const StyledFilterHeading: StyletronComponent<any>;
+export declare const StyledFilterFooter: StyletronComponent<any>;
+export declare const StyledHead: StyletronComponent<any>;
+export declare const StyledHeadCell: StyletronComponent<any>;
+export declare const StyledBody: StyletronComponent<any>;
+export declare const StyledRow: StyletronComponent<any>;
+export declare const StyledCell: StyletronComponent<any>;
+export declare const StyledAction: StyletronComponent<any>;
+export declare const StyledSortableLabel: StyletronComponent<any>;

package/table-grid/index.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
-import {Override} from '../overrides';
-import {StyletronComponent} from 'styletron-react';
-import {SORT_DIRECTION, SortableHeadCell} from '../table/';
+import { StyletronComponent } from 'styletron-react';
+import { SORT_DIRECTION, SortableHeadCell } from '../table/';
 
-export const StyledTable: StyletronComponent<any>;
-export const StyledHeadCell: StyletronComponent<any>;
-export const StyledBodyCell: StyletronComponent<any>;
-export {SORT_DIRECTION, SortableHeadCell};
+export declare const StyledTable: StyletronComponent<any>;
+export declare const StyledHeadCell: StyletronComponent<any>;
+export declare const StyledBodyCell: StyletronComponent<any>;
+export { SORT_DIRECTION, SortableHeadCell };

package/table-semantic/index.d.ts

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
-export interface DIVIDER {
+export declare const DIVIDER: {
   horizontal: 'horizontal';
   vertical: 'vertical';
   grid: 'grid';
   clean: 'clean';
-}
+};
 
-export interface SIZE {
+export declare const SIZE: {
   compact: 'compact';
   default: 'default';
   spacious: 'spacious';
-}
+};
 
 export interface TableOverrides {
   Root?: Override<any>;
@@ -31,17 +31,18 @@ export interface TableProps {
   overrides?: TableOverrides;
   columns: Array<React.ReactNode>;
   data: React.ReactNode[][];
-  divider?: DIVIDER[keyof DIVIDER];
+  divider?: typeof DIVIDER[keyof typeof DIVIDER];
   horizontalScrollWidth?: string;
   isLoading?: boolean;
   loadingMessage?: React.ReactNode | (() => React.ReactNode);
   emptyMessage?: React.ReactNode | (() => React.ReactNode);
-  size?: SIZE[keyof SIZE];
+  size?: typeof SIZE[keyof typeof SIZE];
 }
 export class Table extends React.Component<TableProps> {}
 
 export interface BuilderOverrides extends TableOverrides {
   TableHeadCellSortable?: Override<any>;
+  SortIconContainer?: Override<any>;
   SortAscIcon?: Override<any>;
   SortDescIcon?: Override<any>;
   SortNoneIcon?: Override<any>;
@@ -57,11 +58,9 @@ export interface TableBuilderProps<RowT> {
   isLoading?: boolean;
   loadingMessage?: React.ReactNode | (() => React.ReactNode);
   emptyMessage?: React.ReactNode | (() => React.ReactNode);
-  size?: SIZE[keyof SIZE];
+  size?: typeof SIZE[keyof typeof SIZE];
 }
-export class TableBuilder<RowT> extends React.Component<
-  TableBuilderProps<RowT>
-> {}
+export class TableBuilder<RowT> extends React.Component<TableBuilderProps<RowT>> {}
 
 export interface ColumnOverrides {
   TableHeadCell?: Override<any>;
@@ -80,24 +79,19 @@ export interface TableBuilderColumnProps<RowT> {
   sortable?: boolean;
   tableHeadAriaLabel?: string;
 }
-export class TableBuilderColumn<RowT> extends React.Component<
-  TableBuilderColumnProps<RowT>
-> {}
-
-export const StyledRoot: StyletronComponent<any>;
-export const StyledTable: StyletronComponent<any>;
-export const StyledTableHead: StyletronComponent<any>;
-export const StyledTableHeadRow: StyletronComponent<any>;
-export const StyledTableHeadCell: StyletronComponent<any>;
-export const StyledTableHeadCellSortable: StyletronComponent<any>;
-export const StyledTableBody: StyletronComponent<any>;
-export const StyledTableBodyRow: StyletronComponent<any>;
-export const StyledTableBodyCell: StyletronComponent<any>;
-export const StyledTableLoadingMessage: StyletronComponent<any>;
-export const StyledTableEmptyMessage: StyletronComponent<any>;
-export const StyledSortAscIcon: StyletronComponent<any>;
-export const StyledSortDescIcon: StyletronComponent<any>;
-export const StyledSortNoneIcon: StyletronComponent<any>;
+export class TableBuilderColumn<RowT> extends React.Component<TableBuilderColumnProps<RowT>> {}
 
-export const DIVIDER: DIVIDER;
-export const SIZE: SIZE;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledTable: StyletronComponent<any>;
+export declare const StyledTableHead: StyletronComponent<any>;
+export declare const StyledTableHeadRow: StyletronComponent<any>;
+export declare const StyledTableHeadCell: StyletronComponent<any>;
+export declare const StyledTableHeadCellSortable: StyletronComponent<any>;
+export declare const StyledTableBody: StyletronComponent<any>;
+export declare const StyledTableBodyRow: StyletronComponent<any>;
+export declare const StyledTableBodyCell: StyletronComponent<any>;
+export declare const StyledTableLoadingMessage: StyletronComponent<any>;
+export declare const StyledTableEmptyMessage: StyletronComponent<any>;
+export declare const StyledSortAscIcon: StyletronComponent<any>;
+export declare const StyledSortDescIcon: StyletronComponent<any>;
+export declare const StyledSortNoneIcon: StyletronComponent<any>;

package/table-semantic/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTableEmptyMessage = exports.StyledTableLoadingMessage = exports.StyledTableBodyCell = exports.StyledTableBodyRow = exports.StyledTableBody = exports.StyledSortNoneIcon = exports.StyledSortDescIcon = exports.StyledSortAscIcon = exports.StyledTableHeadCellSortable = exports.StyledTableHeadCell = exports.StyledTableHeadRow = exports.StyledTableHead = exports.StyledTable = exports.StyledRoot = void 0;
+exports.StyledTableEmptyMessage = exports.StyledTableLoadingMessage = exports.StyledTableBodyCell = exports.StyledTableBodyRow = exports.StyledTableBody = exports.StyledSortNoneIcon = exports.StyledSortDescIcon = exports.StyledSortAscIcon = exports.StyledSortIconContainer = exports.StyledTableHeadCellSortable = exports.StyledTableHeadCell = exports.StyledTableHeadRow = exports.StyledTableHead = exports.StyledTable = exports.StyledRoot = void 0;
 
 var _blank = _interopRequireDefault(require("../icon/blank.js"));
 
@@ -128,8 +128,22 @@ var StyledTableHeadCellSortable = (0, _index.withStyle)(StyledTableHeadCell, fun
 });
 exports.StyledTableHeadCellSortable = StyledTableHeadCellSortable;
 StyledTableHeadCellSortable.displayName = "StyledTableHeadCellSortable";
-var StyledSortAscIcon = (0, _index.styled)(_chevronUp.default, function (_ref7) {
+var StyledSortIconContainer = (0, _index.styled)('span', function (_ref7) {
   var $theme = _ref7.$theme;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'absolute',
+    top: '50%',
+    right: $theme.sizing.scale500,
+    transform: 'translateY(-50%)'
+  };
+}); // No longer used, but will maintain for some time to support existing usage
+
+exports.StyledSortIconContainer = StyledSortIconContainer;
+StyledSortIconContainer.displayName = "StyledSortIconContainer";
+var StyledSortAscIcon = (0, _index.styled)(_chevronUp.default, function (_ref8) {
+  var $theme = _ref8.$theme;
   return {
     position: 'absolute',
     top: '50%',
@@ -139,8 +153,8 @@ var StyledSortAscIcon = (0, _index.styled)(_chevronUp.default, function (_ref7)
 });
 exports.StyledSortAscIcon = StyledSortAscIcon;
 StyledSortAscIcon.displayName = "StyledSortAscIcon";
-var StyledSortDescIcon = (0, _index.styled)(_chevronDown.default, function (_ref8) {
-  var $theme = _ref8.$theme;
+var StyledSortDescIcon = (0, _index.styled)(_chevronDown.default, function (_ref9) {
+  var $theme = _ref9.$theme;
   return {
     position: 'absolute',
     top: '50%',
@@ -150,8 +164,8 @@ var StyledSortDescIcon = (0, _index.styled)(_chevronDown.default, function (_ref
 });
 exports.StyledSortDescIcon = StyledSortDescIcon;
 StyledSortDescIcon.displayName = "StyledSortDescIcon";
-var StyledSortNoneIcon = (0, _index.styled)(_blank.default, function (_ref9) {
-  var $theme = _ref9.$theme;
+var StyledSortNoneIcon = (0, _index.styled)(_blank.default, function (_ref10) {
+  var $theme = _ref10.$theme;
   return {
     position: 'absolute',
     top: '50%',
@@ -161,14 +175,14 @@ var StyledSortNoneIcon = (0, _index.styled)(_blank.default, function (_ref9) {
 });
 exports.StyledSortNoneIcon = StyledSortNoneIcon;
 StyledSortNoneIcon.displayName = "StyledSortNoneIcon";
-var StyledTableBody = (0, _index.styled)('tbody', function (_ref10) {
-  var $theme = _ref10.$theme;
+var StyledTableBody = (0, _index.styled)('tbody', function (_ref11) {
+  var $theme = _ref11.$theme;
   return {};
 });
 exports.StyledTableBody = StyledTableBody;
 StyledTableBody.displayName = "StyledTableBody";
-var StyledTableBodyRow = (0, _index.styled)('tr', function (_ref11) {
-  var $theme = _ref11.$theme;
+var StyledTableBodyRow = (0, _index.styled)('tr', function (_ref12) {
+  var $theme = _ref12.$theme;
   return {
     ':hover': {
       backgroundColor: $theme.colors.tableStripedBackground
@@ -177,15 +191,15 @@ var StyledTableBodyRow = (0, _index.styled)('tr', function (_ref11) {
 });
 exports.StyledTableBodyRow = StyledTableBodyRow;
 StyledTableBodyRow.displayName = "StyledTableBodyRow";
-var StyledTableBodyCell = (0, _index.styled)('td', function (_ref12) {
+var StyledTableBodyCell = (0, _index.styled)('td', function (_ref13) {
   var _notLastChild2;
 
-  var $theme = _ref12.$theme,
-      $size = _ref12.$size,
-      $divider = _ref12.$divider,
-      $isNumeric = _ref12.$isNumeric,
-      $isLastRow = _ref12.$isLastRow,
-      $isSortable = _ref12.$isSortable;
+  var $theme = _ref13.$theme,
+      $size = _ref13.$size,
+      $divider = _ref13.$divider,
+      $isNumeric = _ref13.$isNumeric,
+      $isLastRow = _ref13.$isLastRow,
+      $isSortable = _ref13.$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;
@@ -206,8 +220,8 @@ var StyledTableBodyCell = (0, _index.styled)('td', function (_ref12) {
 });
 exports.StyledTableBodyCell = StyledTableBodyCell;
 StyledTableBodyCell.displayName = "StyledTableBodyCell";
-var StyledTableLoadingMessage = (0, _index.styled)('div', function (_ref13) {
-  var $theme = _ref13.$theme;
+var StyledTableLoadingMessage = (0, _index.styled)('div', function (_ref14) {
+  var $theme = _ref14.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.ParagraphSmall), {}, {
     color: $theme.colors.contentPrimary,
     padding: $theme.sizing.scale600

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

@@ -140,6 +140,18 @@ export const StyledTableHeadCellSortable = withStyle<
   };
 });
 
+export const StyledSortIconContainer = styled<{}>('span', ({ $theme }) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'absolute',
+    top: '50%',
+    right: $theme.sizing.scale500,
+    transform: 'translateY(-50%)',
+  };
+});
+
+// No longer used, but will maintain for some time to support existing usage
 export const StyledSortAscIcon = styled<typeof ChevronUp, {}>(ChevronUp, ({ $theme }) => {
   return {
     position: 'absolute',

package/table-semantic/table-builder.js

@@ -13,8 +13,16 @@ var _styledComponents = require("./styled-components.js");
 
 var _overrides = require("../helpers/overrides.js");
 
+var _blank = _interopRequireDefault(require("../icon/blank.js"));
+
+var _chevronDown = _interopRequireDefault(require("../icon/chevron-down.js"));
+
+var _chevronUp = _interopRequireDefault(require("../icon/chevron-up.js"));
+
 var _focusVisible = require("../utils/focusVisible.js");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 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; }
@@ -175,20 +183,25 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           TableEmptyMessage = _getOverrides22[0],
           tableEmptyMessageProps = _getOverrides22[1];
 
-      var _getOverrides23 = (0, _overrides.getOverrides)(overrides.SortAscIcon, _styledComponents.StyledSortAscIcon),
+      var _getOverrides23 = (0, _overrides.getOverrides)(overrides.SortIconContainer, _styledComponents.StyledSortIconContainer),
           _getOverrides24 = _slicedToArray(_getOverrides23, 2),
-          SortAscIcon = _getOverrides24[0],
-          sortAscIconProps = _getOverrides24[1];
+          SortIconContainer = _getOverrides24[0],
+          sortIconContainerProps = _getOverrides24[1];
 
-      var _getOverrides25 = (0, _overrides.getOverrides)(overrides.SortDescIcon, _styledComponents.StyledSortDescIcon),
+      var _getOverrides25 = (0, _overrides.getOverrides)(overrides.SortAscIcon, _chevronUp.default),
           _getOverrides26 = _slicedToArray(_getOverrides25, 2),
-          SortDescIcon = _getOverrides26[0],
-          sortDescIconProps = _getOverrides26[1];
+          SortAscIcon = _getOverrides26[0],
+          sortAscIconProps = _getOverrides26[1];
 
-      var _getOverrides27 = (0, _overrides.getOverrides)(overrides.SortNoneIcon, _styledComponents.StyledSortNoneIcon),
+      var _getOverrides27 = (0, _overrides.getOverrides)(overrides.SortDescIcon, _chevronDown.default),
           _getOverrides28 = _slicedToArray(_getOverrides27, 2),
-          SortNoneIcon = _getOverrides28[0],
-          sortNoneIconProps = _getOverrides28[1];
+          SortDescIcon = _getOverrides28[0],
+          sortDescIconProps = _getOverrides28[1];
+
+      var _getOverrides29 = (0, _overrides.getOverrides)(overrides.SortNoneIcon, _blank.default),
+          _getOverrides30 = _slicedToArray(_getOverrides29, 2),
+          SortNoneIcon = _getOverrides30[0],
+          sortNoneIconProps = _getOverrides30[1];
 
       var columns = React.Children.toArray(children).filter(Boolean).map(function (child) {
         return child.props;
@@ -198,10 +211,10 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
         var colOverrides = col.overrides || {};
 
         if (!col.sortable) {
-          var _getOverrides29 = (0, _overrides.getOverrides)(colOverrides.TableHeadCell, TableHeadCell),
-              _getOverrides30 = _slicedToArray(_getOverrides29, 2),
-              ColTableHeadCell = _getOverrides30[0],
-              colTableHeadCellProps = _getOverrides30[1];
+          var _getOverrides31 = (0, _overrides.getOverrides)(colOverrides.TableHeadCell, TableHeadCell),
+              _getOverrides32 = _slicedToArray(_getOverrides31, 2),
+              ColTableHeadCell = _getOverrides32[0],
+              colTableHeadCellProps = _getOverrides32[1];
 
           return /*#__PURE__*/React.createElement(ColTableHeadCell, _extends({
             key: colIndex,
@@ -213,10 +226,10 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           }, tableHeadCellProps, colTableHeadCellProps), col.header);
         }
 
-        var _getOverrides31 = (0, _overrides.getOverrides)(colOverrides.TableHeadCellSortable, TableHeadCellSortable),
-            _getOverrides32 = _slicedToArray(_getOverrides31, 2),
-            ColTableHeadCellSortable = _getOverrides32[0],
-            colTableHeadCellSortableProps = _getOverrides32[1];
+        var _getOverrides33 = (0, _overrides.getOverrides)(colOverrides.TableHeadCellSortable, TableHeadCellSortable),
+            _getOverrides34 = _slicedToArray(_getOverrides33, 2),
+            ColTableHeadCellSortable = _getOverrides34[0],
+            colTableHeadCellSortableProps = _getOverrides34[1];
 
         var sortIcon = null;
         var sortLabel = 'not sorted';
@@ -224,6 +237,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
         switch (col.id === sortColumn && sortOrder) {
           case 'ASC':
             sortIcon = /*#__PURE__*/React.createElement(SortAscIcon, _extends({
+              size: "16px",
               "aria-hidden": true,
               role: "presentation"
             }, sortAscIconProps));
@@ -232,6 +246,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
 
           case 'DESC':
             sortIcon = /*#__PURE__*/React.createElement(SortDescIcon, _extends({
+              size: "16px",
               "aria-hidden": true,
               role: "presentation"
             }, sortDescIconProps));
@@ -240,6 +255,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
 
           default:
             sortIcon = /*#__PURE__*/React.createElement(SortNoneIcon, _extends({
+              size: "16px",
               "aria-hidden": true,
               role: "presentation"
             }, sortNoneIconProps));
@@ -265,16 +281,16 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
               onSort && onSort(col.id);
             }
           }
-        }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, sortIcon);
+        }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, /*#__PURE__*/React.createElement(SortIconContainer, sortIconContainerProps, sortIcon));
       }
 
       function renderCell(col, colIndex, row, rowIndex, lastRowindex) {
         var colOverrides = col.overrides || {};
 
-        var _getOverrides33 = (0, _overrides.getOverrides)(colOverrides.TableBodyCell, TableBodyCell),
-            _getOverrides34 = _slicedToArray(_getOverrides33, 2),
-            ColTableBodyCell = _getOverrides34[0],
-            colTableBodyCellProps = _getOverrides34[1];
+        var _getOverrides35 = (0, _overrides.getOverrides)(colOverrides.TableBodyCell, TableBodyCell),
+            _getOverrides36 = _slicedToArray(_getOverrides35, 2),
+            ColTableBodyCell = _getOverrides36[0],
+            colTableBodyCellProps = _getOverrides36[1];
 
         return /*#__PURE__*/React.createElement(ColTableBodyCell, _extends({
           key: colIndex,