baseui 10.12.1 → 11.0.0

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

@@ -40,14 +40,6 @@ export default ((themePrimitives = colorTokens) => ({
   buttonTertiaryDisabledActiveText: themePrimitives.mono300,
   buttonTertiarySpinnerForeground: themePrimitives.primary50,
   buttonTertiarySpinnerBackground: themePrimitives.primary500,
-  buttonMinimalFill: 'transparent',
-  buttonMinimalText: themePrimitives.primary,
-  buttonMinimalHover: themePrimitives.primary700,
-  buttonMinimalActive: themePrimitives.primary600,
-  buttonMinimalSelectedText: themePrimitives.primary,
-  buttonMinimalSelectedFill: themePrimitives.primary600,
-  buttonMinimalSpinnerForeground: themePrimitives.primary50,
-  buttonMinimalSpinnerBackground: themePrimitives.primary500,
   buttonDisabledFill: themePrimitives.mono600,
   buttonDisabledText: themePrimitives.mono300,
   buttonDisabledActiveFill: themePrimitives.mono200,
@@ -58,12 +50,6 @@ export default ((themePrimitives = colorTokens) => ({
   breadcrumbsText: themePrimitives.mono100,
   breadcrumbsSeparatorFill: themePrimitives.mono200,
   // Datepicker
-  datepickerBackground: themePrimitives.mono600,
-  datepickerDayFont: themePrimitives.white,
-  datepickerDayFontDisabled: themePrimitives.mono100,
-  datepickerDayPseudoSelected: themePrimitives.mono500,
-  datepickerDayPseudoHighlighted: themePrimitives.mono600,
-  // Calendar
   calendarBackground: themePrimitives.mono800,
   calendarForeground: themePrimitives.white,
   calendarForegroundDisabled: themePrimitives.mono300,
@@ -71,7 +57,6 @@ export default ((themePrimitives = colorTokens) => ({
   calendarHeaderForeground: themePrimitives.primary,
   calendarHeaderBackgroundActive: themePrimitives.primary600,
   calendarHeaderForegroundDisabled: themePrimitives.primary500,
-  calendarDayBackgroundPseudoSelected: themePrimitives.primary700,
   calendarDayForegroundPseudoSelected: themePrimitives.primary,
   calendarDayBackgroundPseudoSelectedHighlighted: themePrimitives.primary600,
   calendarDayForegroundPseudoSelectedHighlighted: themePrimitives.primary,
@@ -96,21 +81,16 @@ export default ((themePrimitives = colorTokens) => ({
   // List
   listHeaderFill: themePrimitives.mono600,
   listBodyFill: themePrimitives.mono800,
-  listIconFill: themePrimitives.mono100,
-  listBorder: themePrimitives.mono500,
   // ProgressSteps
   progressStepsCompletedText: themePrimitives.black,
   progressStepsCompletedFill: themePrimitives.primary,
   progressStepsActiveText: themePrimitives.black,
   progressStepsActiveFill: themePrimitives.primary,
-  progressStepsIconActiveFill: themePrimitives.primary,
   // Modal
   modalCloseColor: themePrimitives.mono300,
   modalCloseColorHover: themePrimitives.mono400,
   modalCloseColorFocus: themePrimitives.mono400,
   // Notification
-  notificationPrimaryBackground: themePrimitives.primary700,
-  notificationPrimaryText: themePrimitives.primaryA,
   notificationInfoBackground: themePrimitives.accent700,
   notificationInfoText: themePrimitives.primaryA,
   notificationPositiveBackground: themePrimitives.positive700,
@@ -122,7 +102,6 @@ export default ((themePrimitives = colorTokens) => ({
   // Tag
   // Custom ramps
   tagFontDisabledRampUnit: '600',
-  tagOutlinedDisabledRampUnit: '700',
   tagSolidFontRampUnit: '0',
   tagSolidRampUnit: '500',
   tagOutlinedFontRampUnit: '500',
@@ -135,7 +114,6 @@ export default ((themePrimitives = colorTokens) => ({
   tagLightRampUnit: '700',
   tagLightHoverRampUnit: '700',
   tagLightActiveRampUnit: '600',
-  tagLightDisabledRampUnit: '700',
   tagLightFontRampUnit: '100',
   tagLightFontHoverRampUnit: '100',
   tagOutlinedActiveRampUnit: '300',
@@ -278,7 +256,6 @@ export default ((themePrimitives = colorTokens) => ({
   tableFilterFooterBackground: themePrimitives.mono800,
   // Toast
   toastText: themePrimitives.white,
-  toastPrimaryBackground: themePrimitives.primary400,
   toastPrimaryText: themePrimitives.white,
   toastInfoBackground: themePrimitives.accent400,
   toastInfoText: themePrimitives.white,
@@ -318,23 +295,12 @@ export default ((themePrimitives = colorTokens) => ({
   sliderHandleFill: themePrimitives.primaryA,
   sliderHandleFillDisabled: themePrimitives.primary500,
   sliderHandleInnerFill: themePrimitives.primaryA,
-  sliderHandleFillHover: themePrimitives.mono300,
-  sliderHandleFillActive: themePrimitives.mono300,
-  sliderHandleFillSelected: themePrimitives.primary500,
-  sliderHandleFillSelectedHover: themePrimitives.primary600,
-  sliderHandleFillSelectedActive: themePrimitives.primary700,
   sliderTrackFillHover: themePrimitives.mono500,
   sliderTrackFillActive: themePrimitives.mono400,
-  sliderTrackFillSelected: themePrimitives.primary500,
-  sliderTrackFillSelectedActive: themePrimitives.primary600,
-  sliderTrackFillSelectedHover: themePrimitives.primary700,
   sliderTrackFillDisabled: themePrimitives.mono700,
   sliderHandleInnerFillDisabled: themePrimitives.mono500,
   sliderHandleInnerFillSelectedHover: themePrimitives.primary600,
   sliderHandleInnerFillSelectedActive: themePrimitives.primary700,
-  sliderBorder: themePrimitives.white,
-  sliderBorderHover: themePrimitives.white,
-  sliderBorderDisabled: themePrimitives.mono400,
   // Input
   inputBorder: themePrimitives.mono600,
   inputFill: themePrimitives.mono600,
@@ -357,10 +323,6 @@ export default ((themePrimitives = colorTokens) => ({
   menuFontDisabled: themePrimitives.mono400,
   menuFontHighlighted: themePrimitives.white,
   menuFontSelected: themePrimitives.white,
-  // Pagination
-  paginationTriangleDown: themePrimitives.mono100,
-  // Header navigation
-  headerNavigationFill: themePrimitives.mono700,
   // Tab
   tabBarFill: themePrimitives.mono1000,
   tabColor: themePrimitives.mono300,

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

@@ -74,8 +74,6 @@ export const darkColorTokens = {
   mono900: '#111111',
   mono1000: colors.black,
   // Rating Palette,
-  rating200: colors.yellow200,
-  rating400: colors.yellow400,
   ratingInactiveFill: colors.gray500,
   ratingStroke: colors.gray700
 };

package/es/themes/dark-theme/create-dark-theme.js

@@ -10,7 +10,6 @@ import breakpoints from '../shared/breakpoints.js';
 import deepMerge from '../../utils/deep-merge.js';
 import defaultColorTokens from './color-tokens.js';
 import getComponentColorTokens from './color-component-tokens.js';
-import getDeprecatedSemanticColorTokens from './color-deprecated-semantic-tokens.js';
 import getSemanticColorTokens from './color-semantic-tokens.js';
 import getTypography from '../shared/typography.js';
 import grid from '../shared/grid.js';
@@ -35,7 +34,6 @@ overrides) {
     breakpoints,
     colors: { ...colorTokens,
       ...getComponentColorTokens(colorTokens),
-      ...getDeprecatedSemanticColorTokens(colorTokens),
       ...getSemanticColorTokens(colorTokens)
     },
     direction: 'auto',

package/es/themes/dark-theme/dark-theme.js

@@ -7,7 +7,6 @@ LICENSE file in the root directory of this source tree.
 import colorTokens from './color-tokens.js';
 import getSemanticColorTokens from './color-semantic-tokens.js';
 import getComponentColorTokens from './color-component-tokens.js';
-import getDeprecatedSemanticColorTokens from './color-deprecated-semantic-tokens.js';
 import borders from './borders.js';
 import lighting from '../shared/lighting.js';
 import getTypography from '../shared/typography.js';
@@ -20,7 +19,6 @@ export const DarkTheme = {
   name: 'dark-theme',
   colors: { ...colorTokens,
     ...getComponentColorTokens(),
-    ...getDeprecatedSemanticColorTokens(),
     ...getSemanticColorTokens()
   },
   animation,

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

@@ -40,14 +40,6 @@ export default ((themePrimitives = colorTokens) => ({
   buttonTertiaryDisabledActiveText: themePrimitives.mono600,
   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.accent,
-  buttonMinimalSpinnerBackground: themePrimitives.primary100,
   buttonDisabledFill: themePrimitives.mono200,
   buttonDisabledText: themePrimitives.mono600,
   buttonDisabledActiveFill: themePrimitives.mono700,
@@ -58,12 +50,6 @@ export default ((themePrimitives = colorTokens) => ({
   breadcrumbsText: themePrimitives.mono900,
   breadcrumbsSeparatorFill: themePrimitives.mono700,
   // Datepicker
-  datepickerBackground: themePrimitives.mono100,
-  datepickerDayFont: themePrimitives.mono1000,
-  datepickerDayFontDisabled: themePrimitives.mono500,
-  datepickerDayPseudoSelected: themePrimitives.primary100,
-  datepickerDayPseudoHighlighted: themePrimitives.primary200,
-  // Calendar
   calendarBackground: themePrimitives.mono100,
   calendarForeground: themePrimitives.mono1000,
   calendarForegroundDisabled: themePrimitives.mono500,
@@ -71,7 +57,6 @@ export default ((themePrimitives = colorTokens) => ({
   calendarHeaderForeground: themePrimitives.primary,
   calendarHeaderBackgroundActive: themePrimitives.primary700,
   calendarHeaderForegroundDisabled: themePrimitives.primary500,
-  calendarDayBackgroundPseudoSelected: themePrimitives.primary100,
   calendarDayForegroundPseudoSelected: themePrimitives.mono1000,
   calendarDayBackgroundPseudoSelectedHighlighted: themePrimitives.primary200,
   calendarDayForegroundPseudoSelectedHighlighted: themePrimitives.mono1000,
@@ -96,14 +81,11 @@ export default ((themePrimitives = colorTokens) => ({
   // List
   listHeaderFill: themePrimitives.white,
   listBodyFill: themePrimitives.white,
-  listIconFill: themePrimitives.mono500,
-  listBorder: themePrimitives.mono500,
   // ProgressSteps
   progressStepsCompletedText: themePrimitives.white,
   progressStepsCompletedFill: themePrimitives.primary,
   progressStepsActiveText: themePrimitives.white,
   progressStepsActiveFill: themePrimitives.primary,
-  progressStepsIconActiveFill: themePrimitives.primary,
   // Toggle
   toggleFill: themePrimitives.white,
   toggleFillChecked: themePrimitives.primary,
@@ -136,21 +118,10 @@ export default ((themePrimitives = colorTokens) => ({
   sliderHandleInnerFill: themePrimitives.primaryA,
   sliderTrackFillHover: themePrimitives.mono500,
   sliderTrackFillActive: themePrimitives.mono600,
-  sliderTrackFillSelected: themePrimitives.primary,
-  sliderTrackFillSelectedHover: themePrimitives.primary,
-  sliderTrackFillSelectedActive: themePrimitives.primary500,
   sliderTrackFillDisabled: themePrimitives.mono300,
-  sliderHandleFillHover: themePrimitives.white,
-  sliderHandleFillActive: themePrimitives.white,
-  sliderHandleFillSelected: themePrimitives.white,
-  sliderHandleFillSelectedHover: themePrimitives.white,
-  sliderHandleFillSelectedActive: themePrimitives.white,
   sliderHandleInnerFillDisabled: themePrimitives.mono400,
   sliderHandleInnerFillSelectedHover: themePrimitives.primary,
   sliderHandleInnerFillSelectedActive: themePrimitives.primary500,
-  sliderBorder: themePrimitives.mono500,
-  sliderBorderHover: themePrimitives.primary,
-  sliderBorderDisabled: themePrimitives.mono600,
   // Inputs
   inputBorder: themePrimitives.mono300,
   inputFill: themePrimitives.mono300,
@@ -177,16 +148,10 @@ export default ((themePrimitives = colorTokens) => ({
   modalCloseColor: themePrimitives.mono1000,
   modalCloseColorHover: themePrimitives.mono800,
   modalCloseColorFocus: themePrimitives.mono800,
-  // Pagination
-  paginationTriangleDown: themePrimitives.mono800,
-  // Header navigation
-  headerNavigationFill: 'transparent',
   // Tab
   tabBarFill: themePrimitives.mono200,
   tabColor: themePrimitives.mono800,
   // Notification
-  notificationPrimaryBackground: themePrimitives.primary50,
-  notificationPrimaryText: themePrimitives.primaryA,
   notificationInfoBackground: themePrimitives.accent50,
   notificationInfoText: themePrimitives.primaryA,
   notificationPositiveBackground: themePrimitives.positive50,
@@ -198,7 +163,6 @@ export default ((themePrimitives = colorTokens) => ({
   // Tag
   // Custom ramps
   tagFontDisabledRampUnit: '100',
-  tagOutlinedDisabledRampUnit: '200',
   tagSolidFontRampUnit: '0',
   tagSolidRampUnit: '400',
   tagOutlinedFontRampUnit: '400',
@@ -211,7 +175,6 @@ export default ((themePrimitives = colorTokens) => ({
   tagLightRampUnit: '50',
   tagLightHoverRampUnit: '100',
   tagLightActiveRampUnit: '100',
-  tagLightDisabledRampUnit: '50',
   tagLightFontRampUnit: '500',
   tagLightFontHoverRampUnit: '500',
   tagOutlinedHoverRampUnit: '50',
@@ -353,7 +316,6 @@ export default ((themePrimitives = colorTokens) => ({
   tableFilterFooterBackground: themePrimitives.mono200,
   // Toast
   toastText: themePrimitives.white,
-  toastPrimaryBackground: themePrimitives.primary400,
   toastPrimaryText: themePrimitives.white,
   toastInfoBackground: themePrimitives.accent400,
   toastInfoText: themePrimitives.white,

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

@@ -73,8 +73,6 @@ const lightColorTokens = {
   mono900: colors.gray700,
   mono1000: colors.black,
   // Rating Palette,
-  rating200: colors.yellow200,
-  rating400: colors.yellow400,
   ratingInactiveFill: colors.gray100,
   ratingStroke: colors.gray300
 };

package/es/themes/light-theme/create-light-theme.js

@@ -10,7 +10,6 @@ import breakpoints from '../shared/breakpoints.js';
 import deepMerge from '../../utils/deep-merge.js';
 import defaultColorTokens from './color-tokens.js';
 import getComponentColorTokens from './color-component-tokens.js';
-import getDeprecatedSemanticColorTokens from './color-deprecated-semantic-tokens.js';
 import getSemanticColorTokens from './color-semantic-tokens.js';
 import getTypography from '../shared/typography.js';
 import grid from '../shared/grid.js';
@@ -35,7 +34,6 @@ overrides) {
     breakpoints,
     colors: { ...colorTokens,
       ...getComponentColorTokens(colorTokens),
-      ...getDeprecatedSemanticColorTokens(colorTokens),
       ...getSemanticColorTokens(colorTokens)
     },
     direction: 'auto',

package/es/themes/light-theme/light-theme.js

@@ -7,7 +7,6 @@ LICENSE file in the root directory of this source tree.
 import colorTokens from './color-tokens.js';
 import getSemanticColorTokens from './color-semantic-tokens.js';
 import getComponentColorTokens from './color-component-tokens.js';
-import getDeprecatedSemanticColorTokens from './color-deprecated-semantic-tokens.js';
 import borders from '../shared/borders.js';
 import lighting from '../shared/lighting.js';
 import getTypography from '../shared/typography.js';
@@ -20,7 +19,6 @@ export const LightTheme = {
   name: 'light-theme',
   colors: { ...colorTokens,
     ...getComponentColorTokens(),
-    ...getDeprecatedSemanticColorTokens(),
     ...getSemanticColorTokens()
   },
   animation,

package/es/timepicker/timepicker.js

@@ -303,14 +303,7 @@ class TimePicker extends React.Component {
     }, selectProps.overrides);
     const value = this.props.value && adapter.isValid(this.props.value) ? this.buildSelectedOption(this.props.value, this.props.format) : this.state.value;
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => {
-      let ariaLabel;
-
-      if (locale.datepicker.timePickerAriaLabel) {
-        ariaLabel = locale.datepicker.timePickerAriaLabel;
-      } else {
-        ariaLabel = format === '12' ? locale.datepicker.timePickerAriaLabel12Hour : locale.datepicker.timePickerAriaLabel24Hour;
-      }
-
+      const ariaLabel = format === '12' ? locale.datepicker.timePickerAriaLabel12Hour : locale.datepicker.timePickerAriaLabel24Hour;
       return /*#__PURE__*/React.createElement(OverriddenSelect, _extends({
         "aria-label": ariaLabel,
         disabled: this.props.disabled,

package/es/typography/index.js

@@ -423,34 +423,4 @@ React.createElement(Block, _extends({
   color: props.color || 'contentPrimary',
   ref: ref
 })));
-MonoParagraphXSmall.displayName = 'MonoParagraphXSmall'; // TODO(v11): remove
-// Aliases for backwards compatibility
-
-export const Display = DisplayLarge;
-export const Display1 = DisplayLarge;
-export const Display2 = DisplayMedium;
-export const Display3 = DisplaySmall;
-export const Display4 = DisplayXSmall;
-export const H1 = HeadingXXLarge;
-export const H2 = HeadingXLarge;
-export const H3 = HeadingLarge;
-export const H4 = HeadingMedium;
-export const H5 = HeadingSmall;
-export const H6 = HeadingXSmall;
-export const Paragraph1 = ParagraphLarge;
-export const Paragraph2 = ParagraphMedium;
-export const Paragraph3 = ParagraphSmall;
-export const Paragraph4 = ParagraphXSmall;
-export const Label1 = LabelLarge;
-export const Label2 = LabelMedium;
-export const Label3 = LabelSmall;
-export const Label4 = LabelXSmall;
-export const Caption1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Paragraph4, _extends({}, props, {
-  color: props.color || 'contentSecondary',
-  ref: ref
-})));
-Caption1.displayName = 'Caption1';
-export const Caption2 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Label4, _extends({}, props, {
-  color: props.color || 'contentSecondary'
-})));
-Caption2.displayName = 'Caption2';
+MonoParagraphXSmall.displayName = 'MonoParagraphXSmall';

package/esm/accordion/accordion.js

@@ -81,6 +81,8 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
       expanded: []
     }, _this.props.initialState));
 
+    _defineProperty(_assertThisInitialized(_this), "itemRefs", []);
+
     return _this;
   }
 
@@ -127,6 +129,56 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
       this.setState(newState);
       typeof onChange === 'function' && onChange(newState);
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      if (this.props.disabled) {
+        return;
+      }
+
+      var itemRefs = this.itemRefs;
+      var HOME = 36;
+      var END = 35;
+      var ARROW_UP = 38;
+      var ARROW_DOWN = 40;
+
+      if (e.keyCode === HOME) {
+        e.preventDefault();
+        var firstItem = itemRefs[0];
+        firstItem.current && firstItem.current.focus();
+      }
+
+      if (e.keyCode === END) {
+        e.preventDefault();
+        var lastItem = itemRefs[itemRefs.length - 1];
+        lastItem.current && lastItem.current.focus();
+      }
+
+      if (e.keyCode === ARROW_UP) {
+        e.preventDefault();
+        var activeItemIdx = itemRefs.findIndex(function (item) {
+          return item.current === document.activeElement;
+        });
+
+        if (activeItemIdx > 0) {
+          var prevItem = itemRefs[activeItemIdx - 1];
+          prevItem.current && prevItem.current.focus();
+        }
+      }
+
+      if (e.keyCode === ARROW_DOWN) {
+        e.preventDefault();
+
+        var _activeItemIdx = itemRefs.findIndex(function (item) {
+          return item.current === document.activeElement;
+        });
+
+        if (_activeItemIdx < itemRefs.length - 1) {
+          var nextItem = itemRefs[_activeItemIdx + 1];
+          nextItem.current && nextItem.current.focus();
+        }
+      }
+    }
   }, {
     key: "getItems",
     value: function getItems() {
@@ -137,12 +189,15 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           accordion = _this$props2.accordion,
           disabled = _this$props2.disabled,
           children = _this$props2.children,
-          renderPanelContent = _this$props2.renderPanelContent,
           renderAll = _this$props2.renderAll,
           overrides = _this$props2.overrides; // flowlint-next-line unclear-type:off
 
       return React.Children.map(children, function (child, index) {
-        if (!child) return; // If there is no key provided use the panel order as a default key
+        if (!child) return;
+        var itemRef = /*#__PURE__*/React.createRef();
+
+        _this2.itemRefs.push(itemRef); // If there is no key provided use the panel order as a default key
+
 
         var key = child.key || String(index);
         var isExpanded = false;
@@ -155,9 +210,9 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
 
         var props = {
           key: key,
+          ref: itemRef,
           expanded: isExpanded || child.props.expanded,
           accordion: accordion,
-          renderPanelContent: renderPanelContent,
           renderAll: renderAll,
           overrides: child.props.overrides || overrides,
           disabled: child.props.disabled || disabled,
@@ -172,14 +227,6 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.cloneElement(child, props);
       });
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // TODO(v11)
-      if (process.env.NODE_ENV !== "production" && this.props.renderPanelContent) {
-        console.warn('baseui:Accordion The `renderPanelContent` prop is deprecated. Please update your code to use `renderAll`.');
-      }
-    }
   }, {
     key: "render",
     value: function render() {
@@ -195,7 +242,8 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "accordion",
         $disabled: this.props.disabled,
-        $isFocusVisible: false
+        $isFocusVisible: false,
+        onKeyDown: this.handleKeyDown.bind(this)
       }, rootProps), this.getItems());
     }
   }]);
@@ -212,7 +260,6 @@ _defineProperty(Accordion, "defaultProps", {
   onChange: function onChange() {},
   overrides: {},
   renderAll: false,
-  renderPanelContent: false,
   stateReducer: function stateReducer(type, newState) {
     return newState;
   }

package/esm/accordion/panel.js

@@ -30,7 +30,7 @@ import { getOverrides } from '../helpers/overrides.js';
 import { PanelContainer as StyledPanelContainer, Header as StyledHeader, Content as StyledContent, ToggleIcon as StyledToggleIcon, ToggleIconGroup as StyledToggleIconGroup, ContentAnimationContainer as StyledContentAnimationContainer } from './styled-components.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
-var Panel = function Panel(_ref) {
+var Panel = function Panel(_ref, ref) {
   var ariaControls = _ref['aria-controls'],
       children = _ref.children,
       _ref$disabled = _ref.disabled,
@@ -47,8 +47,6 @@ var Panel = function Panel(_ref) {
       overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? '' : _ref$title,
-      _ref$renderPanelConte = _ref.renderPanelContent,
-      renderPanelContent = _ref$renderPanelConte === void 0 ? false : _ref$renderPanelConte,
       _ref$renderAll = _ref.renderAll,
       renderAll = _ref$renderAll === void 0 ? false : _ref$renderAll;
 
@@ -203,7 +201,8 @@ var Panel = function Panel(_ref) {
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       onFocus: forkFocus(headerProps, handleFocus),
-      onBlur: forkBlur(headerProps, handleBlur)
+      onBlur: forkBlur(headerProps, handleBlur),
+      ref: ref
     }), title, /*#__PURE__*/React.createElement(ToggleIcon, _extends({
       viewBox: "0 0 24 24",
       title: localState.expanded ? locale.accordion.collapse : locale.accordion.expand,
@@ -229,8 +228,10 @@ var Panel = function Panel(_ref) {
       ref: _animateRef
     }, sharedProps, contentProps, ariaControls ? {
       id: ariaControls
-    } : {}), localState.expanded || renderAll || renderPanelContent || localState.animationInProgress ? children : null)));
+    } : {}), localState.expanded || renderAll || localState.animationInProgress ? children : null)));
   });
 };
 
-export default Panel;
+var ForwardedPanel = /*#__PURE__*/React.forwardRef(Panel);
+ForwardedPanel.displayName = 'Panel';
+export default ForwardedPanel;

package/esm/accordion/stateless-accordion.js

@@ -43,8 +43,7 @@ function StatelessAccordion(_ref) {
       onChange = _ref.onChange,
       _ref$overrides = _ref.overrides,
       overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
-      renderAll = _ref.renderAll,
-      renderPanelContent = _ref.renderPanelContent;
+      renderAll = _ref.renderAll;
 
   var RootOverrides = overrides.Root,
       PanelOverrides = _objectWithoutProperties(overrides, ["Root"]);
@@ -88,8 +87,7 @@ function StatelessAccordion(_ref) {
         });
       } : onChange,
       overrides: child.props.overrides || PanelOverrides,
-      renderAll: renderAll,
-      renderPanelContent: renderPanelContent
+      renderAll: renderAll
     });
   }));
 }

package/esm/button/constants.js

@@ -7,8 +7,7 @@ LICENSE file in the root directory of this source tree.
 export var KIND = {
   primary: 'primary',
   secondary: 'secondary',
-  tertiary: 'tertiary',
-  minimal: 'minimal'
+  tertiary: 'tertiary'
 };
 export var SHAPE = {
   default: 'default',

package/esm/button/styled-components.js

@@ -207,14 +207,6 @@ function getLoadingSpinnerColors(_ref8) {
         };
       }
 
-    case KIND.minimal:
-      {
-        return {
-          foreground: $theme.colors.buttonMinimalSpinnerForeground,
-          background: $theme.colors.buttonMinimalSpinnerBackground
-        };
-      }
-
     case KIND.primary:
     default:
       {
@@ -283,7 +275,7 @@ function getDisabledStyles(_ref11) {
         color: $theme.colors.buttonDisabledActiveText,
         backgroundColor: $theme.colors.buttonDisabledActiveFill
       };
-    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+    } else if ($kind === KIND.tertiary) {
       return {
         backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
         color: $theme.colors.buttonTertiaryDisabledActiveText
@@ -292,7 +284,7 @@ function getDisabledStyles(_ref11) {
   }
 
   return {
-    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    backgroundColor: $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText
   };
 }
@@ -421,25 +413,6 @@ function getColorStyles(_ref13) {
         }
       };
 
-    case KIND.minimal:
-      if ($isSelected) {
-        return {
-          color: $theme.colors.buttonMinimalSelectedText,
-          backgroundColor: $theme.colors.buttonMinimalSelectedFill
-        };
-      }
-
-      return {
-        color: $theme.colors.buttonMinimalText,
-        backgroundColor: $theme.colors.buttonMinimalFill,
-        ':hover': {
-          backgroundColor: $isLoading ? $theme.colors.buttonMinimalActive : $theme.colors.buttonMinimalHover
-        },
-        ':active': {
-          backgroundColor: $theme.colors.buttonMinimalActive
-        }
-      };
-
     default:
       return Object.freeze({});
   }