baseui 0.0.0-next-913cc0e → 0.0.0-next-ea133a6

package/breadcrumbs/breadcrumbs.js

@@ -95,7 +95,11 @@ function Breadcrumbs(props) {
     }, baseListItemProps), child, (showTrailingSeparator || index !== childrenArray.length - 1) && /*#__PURE__*/_react.default.createElement(Separator, _extends({}, baseSeparatorProps, {
       key: "separator-".concat(index)
     }), /*#__PURE__*/_react.default.createElement(_themeProvider.ThemeContext.Consumer, null, function (theme) {
-      return theme.direction === 'rtl' ? /*#__PURE__*/_react.default.createElement(Left, baseIconProps) : /*#__PURE__*/_react.default.createElement(Right, baseIconProps);
+      return theme.direction === 'rtl' ? /*#__PURE__*/_react.default.createElement(Left, _extends({
+        size: 16
+      }, baseIconProps)) : /*#__PURE__*/_react.default.createElement(Right, _extends({
+        size: 16
+      }, baseIconProps));
     }))));
   });
   return /*#__PURE__*/_react.default.createElement(_index.LocaleContext.Consumer, null, function (locale) {

package/breadcrumbs/breadcrumbs.js.flow

@@ -43,9 +43,9 @@ export function Breadcrumbs(props: BreadcrumbsPropsT) {
             <ThemeContext.Consumer>
               {(theme) =>
                 theme.direction === 'rtl' ? (
-                  <Left {...baseIconProps} />
+                  <Left size={16} {...baseIconProps} />
                 ) : (
-                  <Right {...baseIconProps} />
+                  <Right size={16} {...baseIconProps} />
                 )
               }
             </ThemeContext.Consumer>

package/datepicker/utils/date-helpers.js

@@ -93,7 +93,7 @@ var DateHelpers = function DateHelpers(_adapter) {
     var UtilsClass = adapter.constructor;
     var className = adapter.constructor.name; // This ensures that if the adapter class isn't
     // supported it just falls back the default formats
-    // NOTE: in e2e tests puppeteer seems to add
+    // NOTE: in e2e tests playwright seems to add
     // a JSHandle wrapping class to all objects
     // so className always resolves to JSHandle:e
     // and if falls back to the default

package/datepicker/utils/date-helpers.js.flow

@@ -68,7 +68,7 @@ class DateHelpers<T> {
     // This ensures that if the adapter class isn't
     // supported it just falls back the default formats
 
-    // NOTE: in e2e tests puppeteer seems to add
+    // NOTE: in e2e tests playwright seems to add
     // a JSHandle wrapping class to all objects
     // so className always resolves to JSHandle:e
     // and if falls back to the default

package/es/breadcrumbs/breadcrumbs.js

@@ -39,7 +39,11 @@ export function Breadcrumbs(props) {
       $itemIndex: index
     }, baseListItemProps), child, (showTrailingSeparator || index !== childrenArray.length - 1) && /*#__PURE__*/React.createElement(Separator, _extends({}, baseSeparatorProps, {
       key: `separator-${index}`
-    }), /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, baseIconProps) : /*#__PURE__*/React.createElement(Right, baseIconProps)))));
+    }), /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, _extends({
+      size: 16
+    }, baseIconProps)) : /*#__PURE__*/React.createElement(Right, _extends({
+      size: 16
+    }, baseIconProps))))));
   });
   return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
     "aria-label": props['aria-label'] || props.ariaLabel || locale.breadcrumbs.ariaLabel,

package/es/datepicker/utils/date-helpers.js

@@ -63,7 +63,7 @@ class DateHelpers {
       const UtilsClass = adapter.constructor;
       const className = adapter.constructor.name; // This ensures that if the adapter class isn't
       // supported it just falls back the default formats
-      // NOTE: in e2e tests puppeteer seems to add
+      // NOTE: in e2e tests playwright seems to add
       // a JSHandle wrapping class to all objects
       // so className always resolves to JSHandle:e
       // and if falls back to the default

package/es/helper/helper-steps.js

@@ -5,7 +5,9 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { ArrowLeft, ArrowRight, Check } from '../icon/index.js';
+import ArrowLeft from '../icon/arrow-left.js';
+import ArrowRight from '../icon/arrow-right.js';
+import Check from '../icon/check.js';
 import { Button, KIND, SHAPE } from '../button/index.js';
 import { useStyletron } from '../styles/index.js';
 export function HelperSteps({

package/es/progress-steps/numbered-step.js

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides.js';
 import { StyledNumberStep, StyledNumberIcon, StyledContent, StyledContentTitle, StyledNumberContentTail, StyledContentDescription } from './styled-components.js';
-import StyledCheckIcon from '../icon/check.js';
+import Check from '../icon/check.js';
 
 function NumberedStep({
   overrides = {},
@@ -26,7 +26,7 @@ function NumberedStep({
   const [Content, contentProps] = getOverrides(overrides.Content, StyledContent);
   const [Title, titleProps] = getOverrides(overrides.Title, StyledContentTitle);
   const [Description, descriptionProps] = getOverrides(overrides.Description, StyledContentDescription);
-  const [CheckIcon, checkIconProps] = getOverrides(overrides.Icon, StyledCheckIcon);
+  const [CheckIcon, checkIconProps] = getOverrides(overrides.Icon, Check);
   const sharedProps = {
     $isCompleted: isCompleted,
     $isActive: isActive

package/es/select/select-component.js

@@ -11,7 +11,7 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import { getOverrides } from '../helpers/overrides.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import DeleteAlt from '../icon/delete-alt.js';
 import TriangleDownIcon from '../icon/triangle-down.js';
 import SearchIconComponent from '../icon/search.js';
@@ -19,10 +19,10 @@ import { LocaleContext } from '../locale/index.js';
 import { Popover, PLACEMENT } from '../popover/index.js';
 import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input.js';
-import { TYPE, STATE_CHANGE_TYPE } from './constants.js';
+import { TYPE, STATE_CHANGE_TYPE, SIZE } from './constants.js';
 import defaultProps from './default-props.js';
 import SelectDropdown from './dropdown.js';
-import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSelectArrow, StyledClearIcon, StyledSearchIconContainer, StyledLoadingIndicator } from './styled-components.js';
+import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSearchIconContainer, StyledLoadingIndicator } from './styled-components.js';
 import { expandValue, normalizeOptions } from './utils/index.js';
 
 function Noop() {
@@ -812,24 +812,27 @@ class Select extends React.Component {
       return;
     }
 
-    const sharedProps = this.getSharedProps();
+    const {
+      $size,
+      ...sharedProps
+    } = this.getSharedProps();
     const {
       overrides = {}
     } = this.props;
     const [ClearIcon, clearIconProps] = getOverrides(overrides.ClearIcon, DeleteAlt);
     const ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
+    const sizes = {
+      [SIZE.mini]: 15,
+      [SIZE.compact]: 15,
+      [SIZE.default]: 18,
+      [SIZE.large]: 22
+    };
     return /*#__PURE__*/React.createElement(ClearIcon, _extends({
       title: ariaLabel,
       "aria-label": ariaLabel,
       onClick: this.clearValue,
       role: "button",
-      overrides: {
-        Svg: {
-          component: StyledClearIcon,
-          props: overrides.ClearIcon && overrides.ClearIcon.props ? overrides.ClearIcon.props : {},
-          style: overrides.ClearIcon && overrides.ClearIcon.style ? overrides.ClearIcon.style : {}
-        }
-      }
+      size: sizes[this.props.size] || sizes[SIZE.default]
     }, sharedProps, clearIconProps));
   }
 
@@ -838,21 +841,35 @@ class Select extends React.Component {
       return null;
     }
 
+    const {
+      $size,
+      ...sharedProps
+    } = this.getSharedProps();
     const {
       overrides = {}
     } = this.props;
     const [SelectArrow, selectArrowProps] = getOverrides(overrides.SelectArrow, TriangleDownIcon);
-    const sharedProps = this.getSharedProps();
-    return /*#__PURE__*/React.createElement(SelectArrow, _extends({
-      size: 16,
-      title: 'open',
-      overrides: {
-        Svg: {
-          component: StyledSelectArrow,
-          props: overrides.SelectArrow && overrides.SelectArrow.props ? overrides.SelectArrow.props : {},
-          style: overrides.SelectArrow && overrides.SelectArrow.style ? overrides.SelectArrow.style : {}
+    selectArrowProps.overrides = mergeOverrides({
+      Svg: {
+        style: ({
+          $theme,
+          $disabled
+        }) => {
+          return {
+            color: $disabled ? $theme.colors.inputTextDisabled : $theme.colors.contentPrimary
+          };
         }
       }
+    }, selectArrowProps.overrides);
+    const sizes = {
+      [SIZE.mini]: 16,
+      [SIZE.compact]: 16,
+      [SIZE.default]: 20,
+      [SIZE.large]: 24
+    };
+    return /*#__PURE__*/React.createElement(SelectArrow, _extends({
+      size: sizes[this.props.size] || sizes[SIZE.default],
+      title: 'open'
     }, sharedProps, selectArrowProps));
   }
 

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

@@ -118,6 +118,20 @@ export const StyledTableHeadCellSortable = withStyle(StyledTableHeadCell, ({
   };
 });
 StyledTableHeadCellSortable.displayName = "StyledTableHeadCellSortable";
+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
+
+StyledSortIconContainer.displayName = "StyledSortIconContainer";
 export const StyledSortAscIcon = styled(ChevronUp, ({
   $theme
 }) => {

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

@@ -9,8 +9,11 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { StyledRoot, StyledTable, StyledTableHead, StyledTableHeadRow, StyledTableHeadCell, StyledTableHeadCellSortable, StyledTableBody, StyledTableBodyRow, StyledTableBodyCell, StyledTableLoadingMessage, StyledTableEmptyMessage, StyledSortAscIcon, StyledSortDescIcon, StyledSortNoneIcon } from './styled-components.js';
+import { StyledRoot, StyledTable, StyledTableHead, StyledTableHeadRow, StyledTableHeadCell, StyledTableHeadCellSortable, StyledTableBody, StyledTableBodyRow, StyledTableBodyCell, StyledTableLoadingMessage, StyledTableEmptyMessage, StyledSortIconContainer } from './styled-components.js';
 import { getOverrides } from '../helpers/overrides.js';
+import Blank from '../icon/blank.js';
+import ChevronDown from '../icon/chevron-down.js';
+import ChevronUp from '../icon/chevron-up.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 export default class TableBuilder extends React.Component {
   constructor(...args) {
@@ -64,9 +67,10 @@ export default class TableBuilder extends React.Component {
     const [TableBodyCell, tableBodyCellProps] = getOverrides(overrides.TableBodyCell, StyledTableBodyCell);
     const [TableLoadingMessage, tableLoadingMessageProps] = getOverrides(overrides.TableLoadingMessage, StyledTableLoadingMessage);
     const [TableEmptyMessage, tableEmptyMessageProps] = getOverrides(overrides.TableEmptyMessage, StyledTableEmptyMessage);
-    const [SortAscIcon, sortAscIconProps] = getOverrides(overrides.SortAscIcon, StyledSortAscIcon);
-    const [SortDescIcon, sortDescIconProps] = getOverrides(overrides.SortDescIcon, StyledSortDescIcon);
-    const [SortNoneIcon, sortNoneIconProps] = getOverrides(overrides.SortNoneIcon, StyledSortNoneIcon);
+    const [SortIconContainer, sortIconContainerProps] = getOverrides(overrides.SortIconContainer, StyledSortIconContainer);
+    const [SortAscIcon, sortAscIconProps] = getOverrides(overrides.SortAscIcon, ChevronUp);
+    const [SortDescIcon, sortDescIconProps] = getOverrides(overrides.SortDescIcon, ChevronDown);
+    const [SortNoneIcon, sortNoneIconProps] = getOverrides(overrides.SortNoneIcon, Blank);
     const columns = React.Children.toArray(children).filter(Boolean).map(child => child.props);
 
     function renderHeader(col, colIndex, isFocusVisible) {
@@ -91,6 +95,7 @@ export default class TableBuilder extends React.Component {
       switch (col.id === sortColumn && sortOrder) {
         case 'ASC':
           sortIcon = /*#__PURE__*/React.createElement(SortAscIcon, _extends({
+            size: "16px",
             "aria-hidden": true,
             role: "presentation"
           }, sortAscIconProps));
@@ -99,6 +104,7 @@ export default class TableBuilder extends React.Component {
 
         case 'DESC':
           sortIcon = /*#__PURE__*/React.createElement(SortDescIcon, _extends({
+            size: "16px",
             "aria-hidden": true,
             role: "presentation"
           }, sortDescIconProps));
@@ -107,6 +113,7 @@ export default class TableBuilder extends React.Component {
 
         default:
           sortIcon = /*#__PURE__*/React.createElement(SortNoneIcon, _extends({
+            size: "16px",
             "aria-hidden": true,
             role: "presentation"
           }, sortNoneIconProps));
@@ -130,7 +137,7 @@ export default class TableBuilder extends 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) {

package/es/tree-view/tree-label.js

@@ -49,7 +49,15 @@ const TreeLabel = ({
   return (
     /*#__PURE__*/
     // $FlowExpectedError[cannot-spread-inexact]
-    React.createElement(TreeItemContent, _extends({}, sharedProps, props), hasChildren && /*#__PURE__*/React.createElement(IconContainer, _extends({}, sharedProps, getOverrideProps(IconContainerOverride)), !isExpanded ? /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, _extends({}, sharedProps, LeftProps)) : /*#__PURE__*/React.createElement(Right, _extends({}, sharedProps, RightProps))) : /*#__PURE__*/React.createElement(CollapseIcon, _extends({}, sharedProps, getOverrideProps(CollapseIconOverride)))), !hasChildren && LeafIcon && /*#__PURE__*/React.createElement(LeafIconContainer, _extends({}, sharedProps, getOverrideProps(LeafIconContainerOverride)), /*#__PURE__*/React.createElement(LeafIcon, _extends({}, sharedProps, getOverrideProps(LeafIconOverride)))), typeof label === 'function' ? label(node) : label)
+    React.createElement(TreeItemContent, _extends({}, sharedProps, props), hasChildren && /*#__PURE__*/React.createElement(IconContainer, _extends({}, sharedProps, getOverrideProps(IconContainerOverride)), !isExpanded ? /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, _extends({
+      size: 16
+    }, sharedProps, LeftProps)) : /*#__PURE__*/React.createElement(Right, _extends({
+      size: 16
+    }, sharedProps, RightProps))) : /*#__PURE__*/React.createElement(CollapseIcon, _extends({
+      size: 16
+    }, sharedProps, getOverrideProps(CollapseIconOverride)))), !hasChildren && LeafIcon && /*#__PURE__*/React.createElement(LeafIconContainer, _extends({}, sharedProps, getOverrideProps(LeafIconContainerOverride)), /*#__PURE__*/React.createElement(LeafIcon, _extends({
+      size: 16
+    }, sharedProps, getOverrideProps(LeafIconOverride)))), typeof label === 'function' ? label(node) : label)
   );
 };
 

package/esm/breadcrumbs/breadcrumbs.js

@@ -76,7 +76,11 @@ export function Breadcrumbs(props) {
     }, baseListItemProps), child, (showTrailingSeparator || index !== childrenArray.length - 1) && /*#__PURE__*/React.createElement(Separator, _extends({}, baseSeparatorProps, {
       key: "separator-".concat(index)
     }), /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      return theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, baseIconProps) : /*#__PURE__*/React.createElement(Right, baseIconProps);
+      return theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, _extends({
+        size: 16
+      }, baseIconProps)) : /*#__PURE__*/React.createElement(Right, _extends({
+        size: 16
+      }, baseIconProps));
     }))));
   });
   return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {

package/esm/datepicker/utils/date-helpers.js

@@ -86,7 +86,7 @@ var DateHelpers = function DateHelpers(_adapter) {
     var UtilsClass = adapter.constructor;
     var className = adapter.constructor.name; // This ensures that if the adapter class isn't
     // supported it just falls back the default formats
-    // NOTE: in e2e tests puppeteer seems to add
+    // NOTE: in e2e tests playwright seems to add
     // a JSHandle wrapping class to all objects
     // so className always resolves to JSHandle:e
     // and if falls back to the default

package/esm/helper/helper-steps.js

@@ -17,7 +17,9 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { ArrowLeft, ArrowRight, Check } from '../icon/index.js';
+import ArrowLeft from '../icon/arrow-left.js';
+import ArrowRight from '../icon/arrow-right.js';
+import Check from '../icon/check.js';
 import { Button, KIND, SHAPE } from '../button/index.js';
 import { useStyletron } from '../styles/index.js';
 export function HelperSteps(_ref) {

package/esm/progress-steps/numbered-step.js

@@ -21,7 +21,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides.js';
 import { StyledNumberStep, StyledNumberIcon, StyledContent, StyledContentTitle, StyledNumberContentTail, StyledContentDescription } from './styled-components.js';
-import StyledCheckIcon from '../icon/check.js';
+import Check from '../icon/check.js';
 
 function NumberedStep(_ref) {
   var _ref$overrides = _ref.overrides,
@@ -63,7 +63,7 @@ function NumberedStep(_ref) {
       Description = _getOverrides12[0],
       descriptionProps = _getOverrides12[1];
 
-  var _getOverrides13 = getOverrides(overrides.Icon, StyledCheckIcon),
+  var _getOverrides13 = getOverrides(overrides.Icon, Check),
       _getOverrides14 = _slicedToArray(_getOverrides13, 2),
       CheckIcon = _getOverrides14[0],
       checkIconProps = _getOverrides14[1];

package/esm/select/select-component.js

@@ -1,5 +1,9 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(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 _extends() { _extends = Object.assign || 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -53,7 +57,7 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import { getOverrides } from '../helpers/overrides.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import DeleteAlt from '../icon/delete-alt.js';
 import TriangleDownIcon from '../icon/triangle-down.js';
 import SearchIconComponent from '../icon/search.js';
@@ -61,10 +65,10 @@ import { LocaleContext } from '../locale/index.js';
 import { Popover, PLACEMENT } from '../popover/index.js';
 import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input.js';
-import { TYPE, STATE_CHANGE_TYPE } from './constants.js';
+import { TYPE, STATE_CHANGE_TYPE, SIZE } from './constants.js';
 import defaultProps from './default-props.js';
 import SelectDropdown from './dropdown.js';
-import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSelectArrow, StyledClearIcon, StyledSearchIconContainer, StyledLoadingIndicator } from './styled-components.js';
+import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSearchIconContainer, StyledLoadingIndicator } from './styled-components.js';
 import { expandValue, normalizeOptions } from './utils/index.js';
 
 function Noop() {
@@ -933,13 +937,18 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderClear",
     value: function renderClear() {
+      var _sizes;
+
       var isValueEntered = Boolean(this.props.value && this.props.value.length || this.state.inputValue);
 
       if (!this.props.clearable || this.props.disabled || this.props.isLoading || !isValueEntered) {
         return;
       }
 
-      var sharedProps = this.getSharedProps();
+      var _this$getSharedProps = this.getSharedProps(),
+          $size = _this$getSharedProps.$size,
+          sharedProps = _objectWithoutProperties(_this$getSharedProps, ["$size"]);
+
       var _this$props$overrides4 = this.props.overrides,
           overrides = _this$props$overrides4 === void 0 ? {} : _this$props$overrides4;
 
@@ -949,27 +958,28 @@ var Select = /*#__PURE__*/function (_React$Component) {
           clearIconProps = _getOverrides6[1];
 
       var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
+      var sizes = (_sizes = {}, _defineProperty(_sizes, SIZE.mini, 15), _defineProperty(_sizes, SIZE.compact, 15), _defineProperty(_sizes, SIZE.default, 18), _defineProperty(_sizes, SIZE.large, 22), _sizes);
       return /*#__PURE__*/React.createElement(ClearIcon, _extends({
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,
         role: "button",
-        overrides: {
-          Svg: {
-            component: StyledClearIcon,
-            props: overrides.ClearIcon && overrides.ClearIcon.props ? overrides.ClearIcon.props : {},
-            style: overrides.ClearIcon && overrides.ClearIcon.style ? overrides.ClearIcon.style : {}
-          }
-        }
+        size: sizes[this.props.size] || sizes[SIZE.default]
       }, sharedProps, clearIconProps));
     }
   }, {
     key: "renderArrow",
     value: function renderArrow() {
+      var _sizes2;
+
       if (this.props.type !== TYPE.select) {
         return null;
       }
 
+      var _this$getSharedProps2 = this.getSharedProps(),
+          $size = _this$getSharedProps2.$size,
+          sharedProps = _objectWithoutProperties(_this$getSharedProps2, ["$size"]);
+
       var _this$props$overrides5 = this.props.overrides,
           overrides = _this$props$overrides5 === void 0 ? {} : _this$props$overrides5;
 
@@ -978,17 +988,21 @@ var Select = /*#__PURE__*/function (_React$Component) {
           SelectArrow = _getOverrides8[0],
           selectArrowProps = _getOverrides8[1];
 
-      var sharedProps = this.getSharedProps();
-      return /*#__PURE__*/React.createElement(SelectArrow, _extends({
-        size: 16,
-        title: 'open',
-        overrides: {
-          Svg: {
-            component: StyledSelectArrow,
-            props: overrides.SelectArrow && overrides.SelectArrow.props ? overrides.SelectArrow.props : {},
-            style: overrides.SelectArrow && overrides.SelectArrow.style ? overrides.SelectArrow.style : {}
+      selectArrowProps.overrides = mergeOverrides({
+        Svg: {
+          style: function style(_ref4) {
+            var $theme = _ref4.$theme,
+                $disabled = _ref4.$disabled;
+            return {
+              color: $disabled ? $theme.colors.inputTextDisabled : $theme.colors.contentPrimary
+            };
           }
         }
+      }, selectArrowProps.overrides);
+      var sizes = (_sizes2 = {}, _defineProperty(_sizes2, SIZE.mini, 16), _defineProperty(_sizes2, SIZE.compact, 16), _defineProperty(_sizes2, SIZE.default, 20), _defineProperty(_sizes2, SIZE.large, 24), _sizes2);
+      return /*#__PURE__*/React.createElement(SelectArrow, _extends({
+        size: sizes[this.props.size] || sizes[SIZE.default],
+        title: 'open'
       }, sharedProps, selectArrowProps));
     }
   }, {

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

@@ -115,8 +115,21 @@ export var StyledTableHeadCellSortable = withStyle(StyledTableHeadCell, function
   };
 });
 StyledTableHeadCellSortable.displayName = "StyledTableHeadCellSortable";
-export var StyledSortAscIcon = styled(ChevronUp, function (_ref7) {
+export var StyledSortIconContainer = 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
+
+StyledSortIconContainer.displayName = "StyledSortIconContainer";
+export var StyledSortAscIcon = styled(ChevronUp, function (_ref8) {
+  var $theme = _ref8.$theme;
   return {
     position: 'absolute',
     top: '50%',
@@ -125,8 +138,8 @@ export var StyledSortAscIcon = styled(ChevronUp, function (_ref7) {
   };
 });
 StyledSortAscIcon.displayName = "StyledSortAscIcon";
-export var StyledSortDescIcon = styled(ChevronDown, function (_ref8) {
-  var $theme = _ref8.$theme;
+export var StyledSortDescIcon = styled(ChevronDown, function (_ref9) {
+  var $theme = _ref9.$theme;
   return {
     position: 'absolute',
     top: '50%',
@@ -135,8 +148,8 @@ export var StyledSortDescIcon = styled(ChevronDown, function (_ref8) {
   };
 });
 StyledSortDescIcon.displayName = "StyledSortDescIcon";
-export var StyledSortNoneIcon = styled(Blank, function (_ref9) {
-  var $theme = _ref9.$theme;
+export var StyledSortNoneIcon = styled(Blank, function (_ref10) {
+  var $theme = _ref10.$theme;
   return {
     position: 'absolute',
     top: '50%',
@@ -145,13 +158,13 @@ export var StyledSortNoneIcon = styled(Blank, function (_ref9) {
   };
 });
 StyledSortNoneIcon.displayName = "StyledSortNoneIcon";
-export var StyledTableBody = styled('tbody', function (_ref10) {
-  var $theme = _ref10.$theme;
+export var StyledTableBody = styled('tbody', function (_ref11) {
+  var $theme = _ref11.$theme;
   return {};
 });
 StyledTableBody.displayName = "StyledTableBody";
-export var StyledTableBodyRow = styled('tr', function (_ref11) {
-  var $theme = _ref11.$theme;
+export var StyledTableBodyRow = styled('tr', function (_ref12) {
+  var $theme = _ref12.$theme;
   return {
     ':hover': {
       backgroundColor: $theme.colors.tableStripedBackground
@@ -159,15 +172,15 @@ export var StyledTableBodyRow = styled('tr', function (_ref11) {
   };
 });
 StyledTableBodyRow.displayName = "StyledTableBodyRow";
-export var StyledTableBodyCell = styled('td', function (_ref12) {
+export var StyledTableBodyCell = 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 === DIVIDER.vertical || $divider === DIVIDER.grid;
   var borderHorizontal = $divider === undefined || $divider === DIVIDER.horizontal || $divider === DIVIDER.grid;
@@ -187,8 +200,8 @@ export var StyledTableBodyCell = styled('td', function (_ref12) {
   });
 });
 StyledTableBodyCell.displayName = "StyledTableBodyCell";
-export var StyledTableLoadingMessage = styled('div', function (_ref13) {
-  var $theme = _ref13.$theme;
+export var StyledTableLoadingMessage = styled('div', function (_ref14) {
+  var $theme = _ref14.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.ParagraphSmall), {}, {
     color: $theme.colors.contentPrimary,
     padding: $theme.sizing.scale600