baseui 11.0.1 → 11.1.0

package/side-navigation/index.d.ts

@@ -1,10 +1,10 @@
 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 Item {
   title: React.ReactNode;
@@ -25,7 +25,7 @@ export interface NavigationProps {
   activeItemId: string;
   activePredicate?: (item: any, activeItemId: string) => boolean;
   items?: Item[];
-  onChange?: (args: {item: any; event: React.SyntheticEvent<any>}) => any;
+  onChange?: (args: { item: any; event: React.SyntheticEvent<any> }) => any;
   overrides?: NavigationOverrides;
   mapItem?: (item: Item) => Item;
 }
@@ -44,7 +44,7 @@ export interface NavItemProps {
   $level?: number;
   $selectable?: boolean;
   item: Item;
-  onSelect?: (args: {item: any; event: Event | KeyboardEvent}) => any;
+  onSelect?: (args: { item: any; event: Event | KeyboardEvent }) => any;
   overrides?: NavItemOverrides;
 }
 
@@ -53,10 +53,8 @@ export class NavItem extends React.Component<NavItemProps> {
   handleKeyDown(event: React.KeyboardEvent): void;
 }
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledNavItemContainer: StyletronComponent<any>;
-export const StyledNavLink: StyletronComponent<any>;
-export const StyledNavItem: StyletronComponent<any>;
-export const StyledSubNavContainer: StyletronComponent<any>;
-
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledNavItemContainer: StyletronComponent<any>;
+export declare const StyledNavLink: StyletronComponent<any>;
+export declare const StyledNavItem: StyletronComponent<any>;
+export declare const StyledSubNavContainer: StyletronComponent<any>;

package/skeleton/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Override} from '../overrides';
+import { Override } from '../overrides';
 
 export type SkeletonOverrides = {
   Root?: Override<any>;

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/snackbar/snackbar-context.js

@@ -155,7 +155,7 @@ function SnackbarProvider(_ref) {
     setTimeout(function () {
       setAnimating(false);
       display(duration);
-    }, 1000);
+    }, 0);
   }
 
   function exit() {

package/snackbar/snackbar-context.js.flow

@@ -93,7 +93,7 @@ export default function SnackbarProvider({
     setTimeout(() => {
       setAnimating(false);
       display(duration);
-    }, 1000);
+    }, 0);
   }
 
   function exit() {

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',