baseui 10.5.0 → 10.7.2

package/popover/stateful-container.js.flow

@@ -52,6 +52,9 @@ class StatefulContainer extends React.Component<
     if (this.props.onBlur) {
       this.props.onBlur(e);
     }
+    if (this.props.focusLock || this.props.autoFocus) {
+      return;
+    }
     this.close();
   };
 
@@ -168,6 +171,7 @@ class StatefulContainer extends React.Component<
       showArrow,
       triggerType,
       popoverMargin,
+      focusOptions,
     } = this.props;
 
     const popoverProps: PopoverPropsWithoutChildrenT = {
@@ -193,6 +197,7 @@ class StatefulContainer extends React.Component<
       showArrow,
       triggerType,
       popoverMargin,
+      focusOptions,
     };
 
     if (dismissOnClickOutside) {

package/popover/types.js.flow

@@ -83,6 +83,8 @@ export type BasePopoverPropsT = {
   onClick?: (e: Event) => mixed,
   /** Handler for 'Esc' keypress events */
   onFocus?: (e: Event) => mixed,
+  /** Pass FocusOptions for focusing (used as `HtmlElement.focus(focusOptions)`) */
+  focusOptions?: FocusOptions,
   /** Handler for mouseenter events on trigger element. */
   onMouseEnter?: (e: Event) => mixed,
   /** Number of milliseconds to wait before showing the popover after mouse enters the trigger element (for triggerType `hover`). */
@@ -104,7 +106,10 @@ export type BasePopoverPropsT = {
   /** If true, focus will shift back to the original element that triggered the popover
    * Be careful with elements that open the popover on focus (e.g. input) this will cause the popover to reopen on close!
    */
-  returnFocus?: boolean,
+  returnFocus?:
+    | boolean
+    | FocusOptions
+    | ((returnTo: Element) => boolean | FocusOptions),
   /** Whether or not to show the arrow pointing from the popover to the trigger. */
   showArrow?: boolean,
   /** Whether to toggle the popover when trigger is clicked or hovered. */

package/rating/emoticon-rating.js

@@ -222,8 +222,8 @@ var EmoticonRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "emoticon-rating",
         role: "radiogroup",
-        onBlur: function onBlur() {
-          return _this2.updatePreview(undefined);
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
         },
         onMouseLeave: function onMouseLeave() {
           return _this2.updatePreview(undefined);

package/rating/emoticon-rating.js.flow

@@ -135,7 +135,10 @@ class EmoticonRating extends React.Component<
       <Root
         data-baseweb="emoticon-rating"
         role="radiogroup"
-        onBlur={() => this.updatePreview(undefined)}
+        onBlur={e => {
+          if (!e.currentTarget.contains(e.relatedTarget))
+            this.updatePreview(undefined);
+        }}
         onMouseLeave={() => this.updatePreview(undefined)}
         {...rootProps}
       >

package/rating/star-rating.js

@@ -225,8 +225,8 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "star-rating",
         role: "radiogroup",
-        onBlur: function onBlur() {
-          return _this2.updatePreview(undefined);
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
         },
         onMouseLeave: function onMouseLeave() {
           return _this2.updatePreview(undefined);

package/rating/star-rating.js.flow

@@ -133,7 +133,10 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
       <Root
         data-baseweb="star-rating"
         role="radiogroup"
-        onBlur={() => this.updatePreview(undefined)}
+        onBlur={e => {
+          if (!e.currentTarget.contains(e.relatedTarget))
+            this.updatePreview(undefined);
+        }}
         onMouseLeave={() => this.updatePreview(undefined)}
         {...rootProps}
       >

package/select/select-component.js

@@ -180,7 +180,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       isPseudoFocused: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
+    _defineProperty(_assertThisInitialized(_this), "isItMounted", false);
 
     _defineProperty(_assertThisInitialized(_this), "handleTouchOutside", function (event) {
       if (containsNode(_this.dropdown.current, event.target)) return;
@@ -328,7 +328,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(event);
       }
 
-      if (_this.isMounted) {
+      if (_this.isItMounted) {
         _this.setState({
           isFocused: false,
           isOpen: false,
@@ -682,7 +682,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         this.focus();
       }
 
-      this.isMounted = true;
+      this.isItMounted = true;
 
       if (this.props.methodsRef) {
         var methodsRef = this.props.methodsRef;
@@ -718,7 +718,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         document.removeEventListener('click', this.handleClickOutside);
       }
 
-      this.isMounted = false;
+      this.isItMounted = false;
     }
   }, {
     key: "focus",
@@ -947,7 +947,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
       return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-        size: 16,
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,
@@ -1169,6 +1168,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
               if (!ref) return;
               _this6.anchor = ref.anchorRef;
             },
+            autoFocus: false,
             focusLock: false,
             mountNode: _this6.props.mountNode,
             onEsc: function onEsc() {

package/select/select-component.js.flow

@@ -117,13 +117,13 @@ class Select extends React.Component<PropsT, SelectStateT> {
     isPseudoFocused: false,
   };
 
-  isMounted: boolean = false;
+  isItMounted: boolean = false;
 
   componentDidMount() {
     if (this.props.autoFocus) {
       this.focus();
     }
-    this.isMounted = true;
+    this.isItMounted = true;
 
     if (this.props.methodsRef) {
       const {methodsRef} = this.props;
@@ -157,7 +157,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       document.removeEventListener('touchstart', this.handleTouchOutside);
       document.removeEventListener('click', this.handleClickOutside);
     }
-    this.isMounted = false;
+    this.isItMounted = false;
   }
 
   focus() {
@@ -319,7 +319,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       this.props.onBlur(event);
     }
 
-    if (this.isMounted) {
+    if (this.isItMounted) {
       this.setState({
         isFocused: false,
         isOpen: false,
@@ -793,7 +793,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
 
     return (
       <ClearIcon
-        size={16}
         title={ariaLabel}
         aria-label={ariaLabel}
         onClick={this.clearValue}
@@ -1026,6 +1025,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
                   if (!ref) return;
                   this.anchor = ref.anchorRef;
                 }}
+                autoFocus={false}
                 focusLock={false}
                 mountNode={this.props.mountNode}
                 onEsc={() => this.closeMenu()}

package/select/styled-components.js

@@ -342,26 +342,50 @@ function getSvgStyles(_ref4) {
 }
 
 var StyledSelectArrow = (0, _index.styled)('svg', function (props) {
+  var _sizes;
+
   var $theme = props.$theme,
-      $disabled = props.$disabled;
+      $disabled = props.$disabled,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes = {}, _defineProperty(_sizes, _constants.SIZE.mini, 16), _defineProperty(_sizes, _constants.SIZE.compact, 16), _defineProperty(_sizes, _constants.SIZE.default, 20), _defineProperty(_sizes, _constants.SIZE.large, 24), _sizes);
+  var size = sizes[_constants.SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-    cursor: $disabled ? 'not-allowed' : 'pointer'
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 exports.StyledSelectArrow = StyledSelectArrow;
 StyledSelectArrow.displayName = "StyledSelectArrow";
 var StyledClearIcon = (0, _index.styled)('svg', function (props) {
-  var $theme = props.$theme;
+  var _sizes2;
+
+  var $theme = props.$theme,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes2 = {}, _defineProperty(_sizes2, _constants.SIZE.mini, 15), _defineProperty(_sizes2, _constants.SIZE.compact, 15), _defineProperty(_sizes2, _constants.SIZE.default, 18), _defineProperty(_sizes2, _constants.SIZE.large, 22), _sizes2);
+  var size = sizes[_constants.SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: colors.contentPrimary,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 exports.StyledClearIcon = StyledClearIcon;

package/select/styled-components.js.flow

@@ -425,22 +425,50 @@ function getSvgStyles({$theme}) {
 }
 
 export const StyledSelectArrow = styled<SharedStylePropsArgT>('svg', props => {
-  const {$theme, $disabled} = props;
+  const {$theme, $disabled, $size} = props;
   const {colors} = $theme;
+
+  const sizes = {
+    [SIZE.mini]: 16,
+    [SIZE.compact]: 16,
+    [SIZE.default]: 20,
+    [SIZE.large]: 24,
+  };
+  let size = sizes[SIZE.default];
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return {
     ...getSvgStyles({$theme}),
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
     cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: `${size}px`,
+    width: `${size}px`,
   };
 });
 
 export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', props => {
-  const {$theme} = props;
+  const {$theme, $size} = props;
   const {colors} = $theme;
+
+  const sizes = {
+    [SIZE.mini]: 15,
+    [SIZE.compact]: 15,
+    [SIZE.default]: 18,
+    [SIZE.large]: 22,
+  };
+  let size = sizes[SIZE.default];
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return {
     ...getSvgStyles({$theme}),
     color: colors.contentPrimary,
     cursor: 'pointer',
+    height: `${size}px`,
+    width: `${size}px`,
   };
 });
 

package/snackbar/index.d.ts

@@ -1,22 +1,27 @@
 import * as React from 'react';
 
 import {Override} from '../overrides';
-import {DURATION, PLACEMENT} from './constants.js';
-export {DURATION, PLACEMENT} from './constants.js';
-
-export type DurationT =
-  | typeof DURATION.infinite
-  | typeof DURATION.short
-  | typeof DURATION.medium
-  | typeof DURATION.long;
-
-export type PlacementT =
-  | typeof PLACEMENT.topLeft
-  | typeof PLACEMENT.top
-  | typeof PLACEMENT.topRight
-  | typeof PLACEMENT.bottomLeft
-  | typeof PLACEMENT.bottom
-  | typeof PLACEMENT.bottomRight;
+
+declare const DURATION: {
+  infinite: number;
+  short: number;
+  medium: number;
+  long: number;
+};
+
+declare const PLACEMENT: {
+  topLeft: 'topLeft';
+  top: 'top';
+  topRight: 'topRight';
+  bottomRight: 'bottomRight';
+  bottom: 'bottom';
+  bottomLeft: 'bottomLeft';
+};
+export {DURATION, PLACEMENT};
+
+export type DurationT = (typeof DURATION)[keyof typeof DURATION];
+
+export type PlacementT = (typeof PLACEMENT)[keyof typeof PLACEMENT];
 
 export type SnackbarElementOverridesT = {
   Root?: Override<any>;

package/snackbar/snackbar-context.js

@@ -81,6 +81,14 @@ function useSnackbar() {
   };
 }
 
+function usePrevious(value) {
+  var ref = React.useRef();
+  React.useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 function SnackbarProvider(_ref) {
   var children = _ref.children,
       _ref$overrides = _ref.overrides,
@@ -115,10 +123,6 @@ function SnackbarProvider(_ref) {
   function enqueue(elementProps) {
     var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDuration;
     setSnackbars(function (prev) {
-      if (prev.length === 0) {
-        enter(duration);
-      }
-
       return [].concat(_toConsumableArray(prev), [{
         elementProps: elementProps,
         duration: duration
@@ -126,6 +130,13 @@ function SnackbarProvider(_ref) {
     });
   }
 
+  var prevSnackbars = usePrevious(snackbars) || [];
+  React.useEffect(function () {
+    if (prevSnackbars.length === 0 && snackbars.length >= 1) {
+      enter(snackbars[0].duration);
+    }
+  }, [snackbars, prevSnackbars]);
+
   function dequeue() {
     setContainerHeight(0);
     setSnackbars(function (prev) {

package/snackbar/snackbar-context.js.flow

@@ -43,6 +43,14 @@ export function useSnackbar() {
   return {enqueue: context.enqueue, dequeue: context.dequeue};
 }
 
+function usePrevious(value) {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 export default function SnackbarProvider({
   children,
   overrides = {},
@@ -61,13 +69,17 @@ export default function SnackbarProvider({
 
   function enqueue(elementProps, duration = defaultDuration) {
     setSnackbars(prev => {
-      if (prev.length === 0) {
-        enter(duration);
-      }
       return [...prev, {elementProps, duration}];
     });
   }
 
+  const prevSnackbars = usePrevious(snackbars) || [];
+  React.useEffect(() => {
+    if (prevSnackbars.length === 0 && snackbars.length >= 1) {
+      enter(snackbars[0].duration);
+    }
+  }, [snackbars, prevSnackbars]);
+
   function dequeue() {
     setContainerHeight(0);
 

package/table-semantic/styled-components.js

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

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

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

package/table-semantic/table-builder.js

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

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

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

package/themes/dark-theme/color-component-tokens.js

@@ -103,7 +103,7 @@ var _default = function _default() {
     linkActive: themePrimitives.primary300,
     // List
     listHeaderFill: themePrimitives.mono600,
-    listBodyFill: themePrimitives.mono700,
+    listBodyFill: themePrimitives.mono800,
     listIconFill: themePrimitives.mono100,
     listBorder: themePrimitives.mono500,
     // ProgressSteps

package/themes/dark-theme/color-component-tokens.js.flow

@@ -107,7 +107,7 @@ export default (
 
   // List
   listHeaderFill: themePrimitives.mono600,
-  listBodyFill: themePrimitives.mono700,
+  listBodyFill: themePrimitives.mono800,
   listIconFill: themePrimitives.mono100,
   listBorder: themePrimitives.mono500,
 

package/themes/light-theme/color-component-tokens.js

@@ -32,32 +32,32 @@ var _default = function _default() {
     buttonPrimaryActive: themePrimitives.primary600,
     buttonPrimarySelectedFill: themePrimitives.primary600,
     buttonPrimarySelectedText: themePrimitives.white,
-    buttonPrimarySpinnerForeground: themePrimitives.primary50,
-    buttonPrimarySpinnerBackground: themePrimitives.primary500,
+    buttonPrimarySpinnerForeground: themePrimitives.accent,
+    buttonPrimarySpinnerBackground: themePrimitives.primaryB,
     buttonSecondaryFill: themePrimitives.primary100,
     buttonSecondaryText: themePrimitives.primary,
     buttonSecondaryHover: themePrimitives.primary200,
     buttonSecondaryActive: themePrimitives.primary300,
     buttonSecondarySelectedFill: themePrimitives.primary300,
     buttonSecondarySelectedText: themePrimitives.primary,
-    buttonSecondarySpinnerForeground: themePrimitives.primary700,
-    buttonSecondarySpinnerBackground: themePrimitives.primary300,
+    buttonSecondarySpinnerForeground: themePrimitives.accent,
+    buttonSecondarySpinnerBackground: themePrimitives.primaryB,
     buttonTertiaryFill: 'transparent',
     buttonTertiaryText: themePrimitives.primary,
     buttonTertiaryHover: themePrimitives.primary50,
     buttonTertiaryActive: themePrimitives.primary100,
     buttonTertiarySelectedFill: themePrimitives.primary100,
     buttonTertiarySelectedText: themePrimitives.primary,
-    buttonTertiarySpinnerForeground: themePrimitives.primary700,
-    buttonTertiarySpinnerBackground: themePrimitives.primary300,
+    buttonTertiarySpinnerForeground: themePrimitives.accent,
+    buttonTertiarySpinnerBackground: themePrimitives.primary100,
     buttonMinimalFill: 'transparent',
     buttonMinimalText: themePrimitives.primary,
     buttonMinimalHover: themePrimitives.primary50,
     buttonMinimalActive: themePrimitives.primary100,
     buttonMinimalSelectedFill: themePrimitives.primary100,
     buttonMinimalSelectedText: themePrimitives.primary,
-    buttonMinimalSpinnerForeground: themePrimitives.primary700,
-    buttonMinimalSpinnerBackground: themePrimitives.primary300,
+    buttonMinimalSpinnerForeground: themePrimitives.accent,
+    buttonMinimalSpinnerBackground: themePrimitives.primary100,
     buttonDisabledFill: themePrimitives.mono200,
     buttonDisabledText: themePrimitives.mono600,
     buttonDisabledSpinnerForeground: themePrimitives.mono600,
@@ -103,7 +103,7 @@ var _default = function _default() {
     linkActive: themePrimitives.primary500,
     // List
     listHeaderFill: themePrimitives.white,
-    listBodyFill: themePrimitives.mono200,
+    listBodyFill: themePrimitives.white,
     listIconFill: themePrimitives.mono500,
     listBorder: themePrimitives.mono500,
     // ProgressSteps