baseui 12.1.3 → 13.0.0

package/styles/types.d.ts

@@ -2,8 +2,8 @@ import type { ComponentType } from 'react';
 import type { IconProps } from '../icon';
 import type { ColorTokens, ComponentColorTokens, SemanticColorTokens, Animation, Breakpoints, Border, Borders, Font, Grid, Lighting, MediaQuery, Sizing, Typography, ZIndex } from '../themes';
 export type { Animation, Breakpoints, Border, Borders, Font, Grid, Lighting, MediaQuery, Sizing, Typography, ZIndex, };
-export declare type Colors = {} & ColorTokens & ComponentColorTokens & SemanticColorTokens;
-export declare type Theme = {
+export type Colors = {} & ColorTokens & ComponentColorTokens & SemanticColorTokens;
+export type Theme = {
     name: string;
     animation: Animation;
     borders: Borders;
@@ -18,13 +18,14 @@ export declare type Theme = {
     typography: Typography;
     zIndex: ZIndex;
 };
-export declare type Icon = {
+export type Icon = {
     Alert?: ComponentType<IconProps>;
     ArrowDown?: ComponentType<IconProps>;
     ArrowLeft?: ComponentType<IconProps>;
     ArrowRight?: ComponentType<IconProps>;
     ArrowUp?: ComponentType<IconProps>;
     Blank?: ComponentType<IconProps>;
+    Calendar?: ComponentType<IconProps>;
     CheckIndeterminate?: ComponentType<IconProps>;
     Check?: ComponentType<IconProps>;
     ChevronDown?: ComponentType<IconProps>;

package/styles/types.js.flow

@@ -74,6 +74,7 @@ export type IconT = {
   ArrowRight?: ComponentType<IconPropsT>,
   ArrowUp?: ComponentType<IconPropsT>,
   Blank?: ComponentType<IconPropsT>,
+  Calendar?: ComponentType<IconPropsT>,
   CheckIndeterminate?: ComponentType<IconPropsT>,
   Check?: ComponentType<IconPropsT>,
   ChevronDown?: ComponentType<IconPropsT>,

package/system-banner/index.d.ts

@@ -0,0 +1,2 @@
+export { SystemBanner } from './system-banner';
+export * from './styled-components';

package/system-banner/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  SystemBanner: true
+};
+Object.defineProperty(exports, "SystemBanner", {
+  enumerable: true,
+  get: function get() {
+    return _systemBanner.SystemBanner;
+  }
+});
+
+var _systemBanner = require("./system-banner");
+
+var _styledComponents = require("./styled-components");
+
+Object.keys(_styledComponents).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _styledComponents[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _styledComponents[key];
+    }
+  });
+});

package/system-banner/index.js.flow

@@ -0,0 +1,51 @@
+/*
+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.
+*/
+// @flow
+import * as React from 'react';
+import { type StyletronComponent } from 'styletron-react';
+
+import {
+  typeof StyledRoot as StyledRootType,
+  typeof StyledLeadingContent as StyledLeadingContentType,
+  typeof StyledTrailingIconButton as StyledTrailingIconButtonType,
+  typeof StyledMessageContent as StyledMessageContentType,
+  type OverridesT as BannerOverridesT,
+} from '../banner';
+
+export type SystemBannerOverridesT = BannerOverridesT;
+
+export type SystemBannerPropsT = {
+  artworkIcon?: ({ size: string }) => React.Node,
+  primaryAction?: {
+    icon?: ({ size: string }) => React.Node,
+    label: string,
+    onClick: (SyntheticEvent<HTMLButtonElement>) => mixed,
+  },
+  secondaryAction?: {
+    icon?: ({ size: string }) => React.Node,
+    onClick?: (SyntheticEvent<HTMLButtonElement>) => mixed,
+    label: string,
+  },
+  overrides?: SystemBannerOverridesT,
+};
+
+declare export var StyledRoot: StyletronComponent<
+  StyledRootType,
+  { $isButton: boolean, $backgroundColor: string, $color: string }
+>;
+declare export var StyledLeadingContent: StyletronComponent<
+  StyledLeadingContentType,
+  { $includesArtwork: boolean }
+>;
+declare export var StyledTrailingIconButton: StyletronComponent<StyledTrailingIconButtonType, {}>;
+declare export var StyledMessageContent: StyletronComponent<StyledMessageContentType, {}>;
+
+declare export var SystemBanner: React.ComponentType<SystemBannerPropsT>;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/system-banner/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/system-banner/index.js"
+}

package/system-banner/styled-components.d.ts

@@ -0,0 +1,16 @@
+export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", {
+    $isButton: boolean;
+} & {
+    $backgroundColor: string;
+    $color: string;
+    $nested: boolean;
+}>;
+export declare const StyledLeadingContent: import("styletron-react").StyletronComponent<"div", {
+    $includesArtwork: boolean;
+}>;
+export declare const StyledTrailingIconButton: import("styletron-react").StyletronComponent<"button", {
+    $nested: boolean;
+}>;
+export declare const StyledMessageContent: import("styletron-react").StyletronComponent<"div", {
+    $actionPosition: import("../banner").ActionPosition;
+}>;

package/system-banner/styled-components.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTrailingIconButton = exports.StyledRoot = exports.StyledMessageContent = exports.StyledLeadingContent = void 0;
+
+var _styles = require("../styles");
+
+var _banner = require("../banner");
+
+var _responsiveHelpers = require("../helpers/responsive-helpers");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var StyledRoot = (0, _styles.withStyle)(_banner.StyledRoot, function (_ref) {
+  var $isButton = _ref.$isButton,
+      $theme = _ref.$theme;
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, $isButton ? {
+    ':hover': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+    },
+    ':active': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+    },
+    // button style reset
+    '-webkit-appearance': 'none',
+    textAlign: 'inherit',
+    boxShadow: 'none',
+    cursor: 'pointer',
+    border: 'none',
+    alignItems: 'center'
+  } : {}), (0, _responsiveHelpers.getMediaQueryPageMargins)($theme)), (0, _responsiveHelpers.getMinimumPageMargins)($theme.grid.margins)), {}, {
+    borderRadius: 0,
+    margin: 0
+  });
+});
+exports.StyledRoot = StyledRoot;
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+var StyledLeadingContent = (0, _styles.withStyle)(_banner.StyledLeadingContent, function () {
+  return {
+    padding: 0
+  };
+});
+exports.StyledLeadingContent = StyledLeadingContent;
+StyledLeadingContent.displayName = "StyledLeadingContent";
+StyledLeadingContent.displayName = 'StyledLeadingContent';
+var StyledTrailingIconButton = (0, _styles.withStyle)(_banner.StyledTrailingIconButton, function () {
+  return {
+    ':hover': {
+      boxShadow: 'none'
+    },
+    ':active': {
+      boxShadow: 'none'
+    }
+  };
+});
+exports.StyledTrailingIconButton = StyledTrailingIconButton;
+StyledTrailingIconButton.displayName = "StyledTrailingIconButton";
+StyledTrailingIconButton.displayName = 'StyledTrailingIconButton';
+var StyledMessageContent = (0, _styles.withStyle)(_banner.StyledMessageContent, function () {
+  return {
+    // button styles reset
+    backgroundColor: 'transparent',
+    borderBottomWidth: 0,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopWidth: 0,
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontStyle: 'inherit',
+    fontWeight: 'inherit',
+    lineHeight: 'inherit',
+    cursor: 'pointer',
+    ':hover': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+    },
+    ':active': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+    }
+  };
+});
+exports.StyledMessageContent = StyledMessageContent;
+StyledMessageContent.displayName = "StyledMessageContent";
+StyledMessageContent.displayName = 'StyledMessageContent';

package/system-banner/system-banner.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SystemBannerProps } from './types';
+export declare function SystemBanner(props: SystemBannerProps): JSX.Element;

package/system-banner/system-banner.js

@@ -0,0 +1,104 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SystemBanner = SystemBanner;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _banner = require("../banner");
+
+var _styledComponents = require("./styled-components");
+
+var _overrides = require("../helpers/overrides");
+
+var _excluded = ["artworkIcon", "primaryAction", "secondaryAction", "overrides"],
+    _excluded2 = ["Root", "LeadingContent", "TrailingIconButton", "MessageContent"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function SystemBanner(props) {
+  var artworkIcon = props.artworkIcon,
+      primaryAction = props.primaryAction,
+      secondaryAction = props.secondaryAction,
+      _props$overrides = props.overrides,
+      overrides = _props$overrides === void 0 ? {} : _props$overrides,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var Root = overrides.Root,
+      LeadingContent = overrides.LeadingContent,
+      TrailingIconButton = overrides.TrailingIconButton,
+      MessageContent = overrides.MessageContent,
+      restOverrides = _objectWithoutProperties(overrides, _excluded2);
+
+  var hasSinglePrimaryAction = (primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.onClick) && !secondaryAction;
+  var hasTwoActions = (primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.onClick) && (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.onClick);
+  var hasTrailingIcon = hasSinglePrimaryAction && primaryAction.icon;
+  var systemBannerRootOverrides = {
+    component: _styledComponents.StyledRoot,
+    props: hasSinglePrimaryAction ? {
+      $isButton: true,
+      $as: 'button',
+      onClick: primaryAction.onClick,
+      'aria-label': primaryAction.label
+    } : {}
+  };
+  var systemBannerLeadingContentOverrides = {
+    component: _styledComponents.StyledLeadingContent
+  };
+  var styledTrailingIconButtonOverrides = {
+    component: _styledComponents.StyledTrailingIconButton,
+    props: {
+      $as: 'div'
+    }
+  };
+  var systemBannerMessageContentOverrides = {
+    component: _styledComponents.StyledMessageContent,
+    props: {
+      $as: 'button',
+      onClick: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.onClick,
+      'aria-label': primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.label
+    }
+  };
+
+  var systemBannerOverrides = _objectSpread({
+    Root: (0, _overrides.mergeOverride)(systemBannerRootOverrides, Root || {}),
+    LeadingContent: (0, _overrides.mergeOverride)(systemBannerLeadingContentOverrides, LeadingContent || {}),
+    TrailingIconButton: hasTrailingIcon ? (0, _overrides.mergeOverride)(styledTrailingIconButtonOverrides, TrailingIconButton || {}) : {},
+    MessageContent: hasTwoActions ? (0, _overrides.mergeOverride)(systemBannerMessageContentOverrides, MessageContent || {}) : {}
+  }, restOverrides);
+
+  return /*#__PURE__*/React.createElement(_banner.Banner, _extends({
+    action: secondaryAction ? _objectSpread({
+      onClick: null
+    }, secondaryAction) : hasTrailingIcon ? {
+      icon: primaryAction.icon,
+      onClick: null,
+      label: null
+    } : null,
+    hierarchy: _banner.HIERARCHY.high,
+    overrides: systemBannerOverrides
+  }, artworkIcon ? {
+    artwork: {
+      icon: artworkIcon,
+      type: _banner.ARTWORK_TYPE.icon
+    }
+  } : {}, restProps));
+}

package/system-banner/types.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { ArtworkIcon, BannerProps, BannerOverrides } from '../banner';
+export type SystemBannerOverrides = BannerOverrides;
+export type SystemBannerProps = Omit<BannerProps, 'artwork' | 'hierarchy' | 'action'> & {
+    artworkIcon?: ArtworkIcon;
+    primaryAction?: {
+        icon?: ArtworkIcon;
+        onClick: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
+        label: string;
+    };
+    secondaryAction?: {
+        icon?: ArtworkIcon;
+        onClick?: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
+        label: string;
+    };
+    overrides?: SystemBannerOverrides;
+};

package/system-banner/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/table/styled-components.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledTable: import("styletron-react").StyletronComponent<"div", {}>;
-declare type HorizontalStyleProps = {
+type HorizontalStyleProps = {
     $width?: string;
     $cursor?: string;
 };
@@ -8,7 +8,7 @@ export declare const StyledHeadCell: import("styletron-react").StyletronComponen
 export declare const StyledSortableLabel: import("styletron-react").StyletronComponent<"button", {}>;
 export declare const StyledBody: import("styletron-react").StyletronComponent<"div", HorizontalStyleProps>;
 export declare const StyledRow: import("styletron-react").StyletronComponent<"div", {}>;
-declare type CellStyledProps = {
+type CellStyledProps = {
     $striped?: boolean;
 };
 export declare const StyledCell: import("styletron-react").StyletronComponent<"div", CellStyledProps>;

package/table/styled-components.js

@@ -156,6 +156,7 @@ var StyledRow = (0, _styles.withWrapper)(StyledRowElement, function (StyledCompo
   };
 });
 exports.StyledRow = StyledRow;
+// @ts-ignore
 var StyledCellElement = (0, _styles.styled)('div', function (_ref6) {
   var $theme = _ref6.$theme,
       $striped = _ref6.$striped;

package/table/table.js

@@ -95,7 +95,9 @@ var Table = /*#__PURE__*/function (_React$Component) {
 exports.default = Table;
 
 _defineProperty(Table, "defaultProps", {
+  // @ts-ignore
   columns: [],
+  // @ts-ignore
   data: [[]],
   isLoading: false
 });

package/table/types.d.ts

@@ -1,12 +1,12 @@
 import type * as React from 'react';
 import type { SORT_DIRECTION } from './constants';
 import type { Override } from '../helpers/overrides';
-export declare type SortDirection = keyof typeof SORT_DIRECTION | undefined | null;
-export declare type HeadCellOverrides = {
+export type SortDirection = keyof typeof SORT_DIRECTION | undefined | null;
+export type HeadCellOverrides = {
     HeadCell?: Override;
     SortableLabel?: Override;
 };
-export declare type HeadCellProps = {
+export type HeadCellProps = {
     /** Aria label applied to the sort button. */
     ariaLabel?: string;
     'aria-label'?: string;
@@ -24,7 +24,7 @@ export declare type HeadCellProps = {
     /** FillClickTarget enable click to sort on whitespace in a header cell. */
     fillClickTarget?: boolean;
 };
-export declare type TableProps = {
+export type TableProps = {
     /** Table columns. Data passed to each header cell. */
     columns: Array<string | React.ReactNode>;
     /** Table rows. Data passed to each row and cell */
@@ -34,13 +34,13 @@ export declare type TableProps = {
     /** Renders the table in a loading state. Not implemented, yet. */
     isLoading?: boolean;
 };
-export declare type FilterOverrides = {
+export type FilterOverrides = {
     MenuButton?: Override;
     Content?: Override;
     Heading?: Override;
     Footer?: Override;
 };
-export declare type FilterProps = {
+export type FilterProps = {
     /** Displays the filter icon in an active state. */
     active?: boolean;
     /** Arbitrary content to display in the filter popover. You will likely want to add checkboxes

package/table-semantic/styled-components.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
 import type { Size, Divider } from './types';
-declare type StyledRootProps = {
+type StyledRootProps = {
     $divider?: Divider;
 };
 export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", StyledRootProps>;
-declare type StyledTableProps = {
+type StyledTableProps = {
     $width?: string | null;
 };
 export declare const StyledTable: import("styletron-react").StyletronComponent<"table", StyledTableProps>;
 export declare const StyledTableHead: import("styletron-react").StyletronComponent<"thead", {}>;
 export declare const StyledTableHeadRow: import("styletron-react").StyletronComponent<"tr", {}>;
-declare type StyledTableHeadCellProps = {
+type StyledTableHeadCellProps = {
     $col?: {};
     $colIndex?: number | null;
     $divider?: Divider;
@@ -44,13 +44,13 @@ export declare const StyledSortNoneIcon: import("styletron-react").StyletronComp
     overrides?: import("../icon").IconOverrides;
 } & import("../icon").StyledComponentArgs & import("react").RefAttributes<SVGSVGElement>>, {}>;
 export declare const StyledTableBody: import("styletron-react").StyletronComponent<"tbody", {}>;
-declare type StyledTableBodyRowProps = {
+type StyledTableBodyRowProps = {
     $col?: {};
     $colIndex?: number | null;
     $divider?: Divider;
 };
 export declare const StyledTableBodyRow: import("styletron-react").StyletronComponent<"tr", StyledTableBodyRowProps>;
-declare type StyledTableBodyCellProps = {
+type StyledTableBodyCellProps = {
     $col?: {};
     $colIndex?: number | null;
     $divider?: Divider;

package/table-semantic/styled-components.js

@@ -23,6 +23,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+// @ts-ignore
 function sizeToCellPadding($theme, $size) {
   if ($size === _constants.SIZE.compact) {
     return $theme.sizing.scale500;
@@ -55,6 +56,7 @@ exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
 var StyledTable = (0, _styles.styled)('table', function (_ref2) {
   var $theme = _ref2.$theme,
       $width = _ref2.$width;
@@ -89,8 +91,7 @@ var StyledTableHeadCell = (0, _styles.styled)('th', function (_ref5) {
 
   var $theme = _ref5.$theme,
       $size = _ref5.$size,
-      $divider = _ref5.$divider,
-      $isNumeric = _ref5.$isNumeric;
+      $divider = _ref5.$divider;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === _constants.DIVIDER.grid || $divider === _constants.DIVIDER.vertical;
   var padding = sizeToCellPadding($theme, $size);
@@ -103,7 +104,7 @@ var StyledTableHeadCell = (0, _styles.styled)('th', function (_ref5) {
     paddingLeft: padding,
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
-    textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
+    textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
     whiteSpace: 'nowrap',
     zIndex: 1
   }, $divider === _constants.DIVIDER.clean ? {} : {
@@ -122,7 +123,6 @@ var StyledTableHeadCellSortable = (0, _styles.withStyle)(StyledTableHeadCell, fu
       $isFocusVisible = _ref6.$isFocusVisible;
   return {
     cursor: 'pointer',
-    paddingRight: $theme.sizing.scale1000,
     outline: 'none',
     ':focus': {
       outline: $isFocusVisible ? "3px solid ".concat($theme.colors.accent) : 'none',
@@ -206,22 +206,22 @@ var StyledTableBodyRow = (0, _styles.styled)('tr', function (_ref12) {
 exports.StyledTableBodyRow = StyledTableBodyRow;
 StyledTableBodyRow.displayName = "StyledTableBodyRow";
 StyledTableBodyRow.displayName = 'StyledTableBodyRow';
-var StyledTableBodyCell = (0, _styles.styled)('td', function (_ref13) {
+var StyledTableBodyCell = (0, _styles.styled)('td', // @ts-ignore
+function (_ref13) {
   var _notLastChild2;
 
   var $theme = _ref13.$theme,
       $size = _ref13.$size,
       $divider = _ref13.$divider,
       $isNumeric = _ref13.$isNumeric,
-      $isLastRow = _ref13.$isLastRow,
-      $isSortable = _ref13.$isSortable;
+      $isLastRow = _ref13.$isLastRow;
   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: !$isSortable ? padding : $theme.sizing.scale1000,
+    paddingRight: padding,
     paddingBottom: padding,
     paddingLeft: padding,
     color: $theme.colors.contentPrimary,

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

@@ -81,7 +81,7 @@ type StyledTableHeadCellPropsT = {
 
 export const StyledTableHeadCell = styled<StyledTableHeadCellPropsT>(
   'th',
-  ({ $theme, $size, $divider, $isNumeric }) => {
+  ({ $theme, $size, $divider }) => {
     const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
     const borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
     const padding = sizeToCellPadding($theme, $size);
@@ -96,7 +96,7 @@ export const StyledTableHeadCell = styled<StyledTableHeadCellPropsT>(
       paddingLeft: padding,
       backgroundColor: $theme.colors.tableHeadBackgroundColor,
       color: $theme.colors.contentPrimary,
-      textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
+      textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
       verticalAlign: 'top',
       whiteSpace: 'nowrap',
       zIndex: 1,
@@ -128,7 +128,6 @@ export const StyledTableHeadCellSortable = withStyle<
 >(StyledTableHeadCell, ({ $theme, $isFocusVisible }) => {
   return {
     cursor: 'pointer',
-    paddingRight: $theme.sizing.scale1000,
     outline: 'none',
     ':focus': {
       outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
@@ -211,7 +210,7 @@ type StyledTableBodyCellPropsT = {
 
 export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
   'td',
-  ({ $theme, $size, $divider, $isNumeric, $isLastRow, $isSortable }) => {
+  ({ $theme, $size, $divider, $isNumeric, $isLastRow }) => {
     const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
     const borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
     const borderHorizontal =
@@ -221,7 +220,7 @@ export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
     return {
       ...$theme.typography.font200,
       paddingTop: padding,
-      paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
+      paddingRight: padding,
       paddingBottom: padding,
       paddingLeft: padding,
       color: $theme.colors.contentPrimary,