baseui 0.0.0-next-1805760 → 0.0.0-next-1788bcc

package/es/list/index.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as ListItem } from './list-item.js';
 export { default as ListItemLabel } from './list-item-label.js';
+export { default as ListHeading } from './list-heading.js';
 export { default as MenuAdapter } from './menu-adapter.js';
 export { ARTWORK_SIZES, SHAPE } from './constants.js';
 export * from './styled-components.js';

package/es/list/list-heading.js

@@ -0,0 +1,77 @@
+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); }
+
+/*
+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.
+*/
+import React from 'react';
+import ReactIs from 'react-is';
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledHeadingRoot, StyledHeadingContent, StyledHeadingContentRow, StyledHeadingEndEnhancerContainer, StyledHeadingEndEnhancerDescriptionContainer, StyledHeadingMainHeading, StyledHeadingSubHeading } from './styled-components.js';
+
+function RenderNode(props) {
+  const {
+    component,
+    ...restProps
+  } = props;
+  const Component = component;
+
+  if (!Component) {
+    return null;
+  }
+
+  if (typeof Component === 'string') {
+    return Component;
+  }
+
+  if (ReactIs.isValidElementType(Component)) {
+    // $FlowFixMe
+    return /*#__PURE__*/React.createElement(Component, restProps);
+  } // $FlowFixMe
+
+
+  return Component;
+}
+
+const ListHeading = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    overrides = {}
+  } = props;
+  const EndEnhancer = props.endEnhancer;
+  const EndEnhancerDescription = props.endEnhancerDescription;
+  const SubHeading = props.subHeading;
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledHeadingRoot);
+  const [Content, contentProps] = getOverrides(overrides.Content, StyledHeadingContent);
+  const [HeadingContainer, headingContainerProps] = getOverrides(overrides.HeadingContainer, StyledHeadingMainHeading);
+  const [SubHeadingContainer, subHeadingContainerProps] = getOverrides(overrides.SubHeadingContainer, StyledHeadingSubHeading);
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(overrides.EndEnhancerContainer, StyledHeadingEndEnhancerContainer);
+  const [EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps] = getOverrides(overrides.EndEnhancerDescriptionContainer, StyledHeadingEndEnhancerDescriptionContainer);
+  const isEndEnhancerString = typeof EndEnhancer === 'string';
+
+  if (isEndEnhancerString && EndEnhancerDescription) {
+    console.warn('endEnhancerDescription will not be rendered if endEnhancer is not a string');
+  }
+
+  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
+  , _extends({
+    ref: ref
+  }, rootProps), /*#__PURE__*/React.createElement(Content, contentProps, /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(HeadingContainer, _extends({
+    $maxLines: props.maxLines
+  }, headingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: props.heading
+  })), EndEnhancer && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({
+    $isText: isEndEnhancerString
+  }, endEnhancerContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: EndEnhancer
+  }))), (SubHeading || EndEnhancerDescription) && /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(SubHeadingContainer, _extends({
+    $maxLines: props.maxLines
+  }, subHeadingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: SubHeading
+  })), EndEnhancerDescription && isEndEnhancerString && /*#__PURE__*/React.createElement(EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps, /*#__PURE__*/React.createElement(RenderNode, {
+    component: EndEnhancerDescription
+  })))));
+});
+ListHeading.displayName = 'ListHeading';
+export default ListHeading;

package/es/list/menu-adapter.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import ListItem from './list-item.js';
+import { mergeOverrides } from '../helpers/overrides.js';
 const MenuAdapter = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(ListItem, {
     ref: ref,
@@ -13,7 +14,8 @@ const MenuAdapter = /*#__PURE__*/React.forwardRef((props, ref) => {
     artwork: props.artwork,
     artworkSize: props.artworkSize,
     endEnhancer: props.endEnhancer,
-    overrides: {
+    overrides: // $FlowFixMe
+    mergeOverrides({
       Root: {
         props: {
           onMouseEnter: props.onMouseEnter,
@@ -26,7 +28,7 @@ const MenuAdapter = /*#__PURE__*/React.forwardRef((props, ref) => {
           cursor: props.$disabled ? 'not-allowed' : 'pointer'
         })
       }
-    }
+    }, props.overrides)
   }, props.children);
 });
 MenuAdapter.displayName = 'MenuAdapter';

package/es/list/styled-components.js

@@ -37,7 +37,7 @@ export const StyledContent = styled('div', ({
     borderLeftStyle: 'none',
     display: 'flex',
     flexGrow: 1,
-    minHeight: $sublist ? 'initial' : '64px',
+    minHeight: $sublist ? 'initial' : $theme.sizing.scale1600,
     justifyContent: 'space-between',
     ...($theme.direction === 'rtl' ? {
       paddingLeft: $theme.sizing.scale600,
@@ -103,8 +103,103 @@ export const StyledLabelSublistContent = styled('p', ({
 }) => {
   return { ...$theme.typography.LabelMedium,
     color: $theme.colors.contentPrimary,
-    marginTop: '12px',
-    marginBottom: '12px'
+    marginTop: $theme.sizing.scale500,
+    marginBottom: $theme.sizing.scale500
   };
 });
-StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+export const StyledHeadingRoot = styled('div', ({
+  $theme
+}) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    backgroundColor: $theme.colors.backgroundPrimary,
+    overflow: 'hidden',
+    minHeight: $theme.sizing.scale1600
+  };
+});
+StyledHeadingRoot.displayName = "StyledHeadingRoot";
+export const StyledHeadingContent = styled('div', ({
+  $theme
+}) => {
+  return {
+    flexGrow: 1,
+    width: '100%',
+    minWidth: 0,
+    paddingTop: $theme.sizing.scale600,
+    paddingBottom: $theme.sizing.scale300,
+    ...($theme.direction === 'rtl' ? {
+      paddingLeft: $theme.sizing.scale600,
+      marginRight: $theme.sizing.scale600
+    } : {
+      paddingRight: $theme.sizing.scale600,
+      marginLeft: $theme.sizing.scale600
+    })
+  };
+});
+StyledHeadingContent.displayName = "StyledHeadingContent";
+export const StyledHeadingContentRow = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%'
+});
+StyledHeadingContentRow.displayName = "StyledHeadingContentRow";
+export const StyledHeadingMainHeading = styled('p', // $FlowFixMe - suppressing due to webkit properties
+({
+  $maxLines = 1,
+  $theme
+}) => {
+  return { ...$theme.typography.HeadingSmall,
+    color: $theme.colors.contentPrimary,
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: $theme.sizing.scale600,
+    display: '-webkit-box',
+    '-webkit-line-clamp': $maxLines,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  };
+});
+StyledHeadingMainHeading.displayName = "StyledHeadingMainHeading";
+export const StyledHeadingSubHeading = styled('p', // $FlowFixMe - suppressing due to webkit properties
+({
+  $maxLines = 1,
+  $theme
+}) => {
+  return { ...$theme.typography.ParagraphLarge,
+    color: $theme.colors.contentPrimary,
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: $theme.sizing.scale600,
+    display: '-webkit-box',
+    '-webkit-line-clamp': $maxLines,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  };
+});
+StyledHeadingSubHeading.displayName = "StyledHeadingSubHeading";
+export const StyledHeadingEndEnhancerContainer = styled('div', ({
+  $isText,
+  $theme
+}) => ({ ...$theme.typography.LabelMedium,
+  display: 'flex',
+  alignItems: $isText ? 'flex-end' : 'center',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+}));
+StyledHeadingEndEnhancerContainer.displayName = "StyledHeadingEndEnhancerContainer";
+export const StyledHeadingEndEnhancerDescriptionContainer = styled('p', ({
+  $theme
+}) => ({ ...$theme.typography.ParagraphMedium,
+  marginTop: 0,
+  marginBottom: 0,
+  display: 'flex',
+  alignItems: 'flex-start',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+}));
+StyledHeadingEndEnhancerDescriptionContainer.displayName = "StyledHeadingEndEnhancerDescriptionContainer";

package/es/select/select-component.js

@@ -845,7 +845,7 @@ class Select extends React.Component {
   }
 
   filterOptions(excludeOptions) {
-    const filterValue = this.state.inputValue; // apply filter function
+    const filterValue = this.state.inputValue.trim(); // apply filter function
 
     if (this.props.filterOptions) {
       this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {

package/es/textarea/textarea.js

@@ -81,8 +81,7 @@ _defineProperty(Textarea, "defaultProps", {
   placeholder: '',
   required: false,
   rows: 3,
-  size: SIZE.default,
-  value: ''
+  size: SIZE.default
 });
 
 export default Textarea;

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

@@ -39,7 +39,7 @@ foundation = colorTokens) => {
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
-    backgroundPositive: foundation.positive,
+    backgroundPositive: colors.green500,
     backgroundLightAccent: colors.blue700,
     backgroundLightPositive: colors.green700,
     backgroundLightNegative: colors.red700,
@@ -60,7 +60,16 @@ foundation = colorTokens) => {
     borderAccentLight: colors.blue500,
     borderNegative: colors.red500,
     borderWarning: colors.yellow500,
-    borderPositive: colors.green500
+    borderPositive: colors.green500,
+    // Programs
+    safety: colors.blue400,
+    eatsGreen400: colors.green400,
+    freightBlue400: colors.cobalt400,
+    jumpRed400: colors.red400,
+    rewardsTier1: colors.blue400,
+    rewardsTier2: colors.yellow400,
+    rewardsTier3: colors.platinum400,
+    rewardsTier4: colors.gray200
   };
   return { ...core,
     ...coreExtensions

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

@@ -39,7 +39,7 @@ foundation = colorTokens) => {
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
-    backgroundPositive: foundation.positive,
+    backgroundPositive: colors.green400,
     backgroundLightAccent: colors.blue50,
     backgroundLightNegative: colors.red50,
     backgroundLightWarning: colors.yellow50,
@@ -53,14 +53,23 @@ foundation = colorTokens) => {
     contentOnColorInverse: colors.black,
     contentNegative: foundation.negative,
     contentWarning: colors.yellow700,
-    contentPositive: foundation.positive,
+    contentPositive: colors.green400,
     // Border
     borderStateDisabled: colors.gray50,
     borderAccent: colors.blue400,
     borderAccentLight: colors.blue200,
     borderNegative: colors.red200,
     borderWarning: colors.yellow200,
-    borderPositive: colors.green200
+    borderPositive: colors.green200,
+    // Programs
+    safety: colors.blue400,
+    eatsGreen400: colors.green400,
+    freightBlue400: colors.cobalt400,
+    jumpRed400: colors.red400,
+    rewardsTier1: colors.blue400,
+    rewardsTier2: colors.yellow400,
+    rewardsTier3: colors.platinum400,
+    rewardsTier4: colors.black
   };
   return { ...core,
     ...coreExtensions

package/es/tokens/colors.js

@@ -54,7 +54,7 @@ const colors = {
   green100: '#ADDEC9',
   green200: '#66D19E',
   green300: '#06C167',
-  green400: '#05944F',
+  green400: '#048848',
   green500: '#03703C',
   green600: '#03582F',
   green700: '#10462D',

package/esm/list/index.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as ListItem } from './list-item.js';
 export { default as ListItemLabel } from './list-item-label.js';
+export { default as ListHeading } from './list-heading.js';
 export { default as MenuAdapter } from './menu-adapter.js';
 export { ARTWORK_SIZES, SHAPE } from './constants.js';
 export * from './styled-components.js';

package/esm/list/list-heading.js

@@ -0,0 +1,116 @@
+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(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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; }
+
+/*
+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.
+*/
+import React from 'react';
+import ReactIs from 'react-is';
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledHeadingRoot, StyledHeadingContent, StyledHeadingContentRow, StyledHeadingEndEnhancerContainer, StyledHeadingEndEnhancerDescriptionContainer, StyledHeadingMainHeading, StyledHeadingSubHeading } from './styled-components.js';
+
+function RenderNode(props) {
+  var component = props.component,
+      restProps = _objectWithoutProperties(props, ["component"]);
+
+  var Component = component;
+
+  if (!Component) {
+    return null;
+  }
+
+  if (typeof Component === 'string') {
+    return Component;
+  }
+
+  if (ReactIs.isValidElementType(Component)) {
+    // $FlowFixMe
+    return /*#__PURE__*/React.createElement(Component, restProps);
+  } // $FlowFixMe
+
+
+  return Component;
+}
+
+var ListHeading = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$overrides = props.overrides,
+      overrides = _props$overrides === void 0 ? {} : _props$overrides;
+  var EndEnhancer = props.endEnhancer;
+  var EndEnhancerDescription = props.endEnhancerDescription;
+  var SubHeading = props.subHeading;
+
+  var _getOverrides = getOverrides(overrides.Root, StyledHeadingRoot),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Root = _getOverrides2[0],
+      rootProps = _getOverrides2[1];
+
+  var _getOverrides3 = getOverrides(overrides.Content, StyledHeadingContent),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      Content = _getOverrides4[0],
+      contentProps = _getOverrides4[1];
+
+  var _getOverrides5 = getOverrides(overrides.HeadingContainer, StyledHeadingMainHeading),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      HeadingContainer = _getOverrides6[0],
+      headingContainerProps = _getOverrides6[1];
+
+  var _getOverrides7 = getOverrides(overrides.SubHeadingContainer, StyledHeadingSubHeading),
+      _getOverrides8 = _slicedToArray(_getOverrides7, 2),
+      SubHeadingContainer = _getOverrides8[0],
+      subHeadingContainerProps = _getOverrides8[1];
+
+  var _getOverrides9 = getOverrides(overrides.EndEnhancerContainer, StyledHeadingEndEnhancerContainer),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      EndEnhancerContainer = _getOverrides10[0],
+      endEnhancerContainerProps = _getOverrides10[1];
+
+  var _getOverrides11 = getOverrides(overrides.EndEnhancerDescriptionContainer, StyledHeadingEndEnhancerDescriptionContainer),
+      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+      EndEnhancerDescriptionContainer = _getOverrides12[0],
+      endEnhancerDescriptionContainerProps = _getOverrides12[1];
+
+  var isEndEnhancerString = typeof EndEnhancer === 'string';
+
+  if (isEndEnhancerString && EndEnhancerDescription) {
+    console.warn('endEnhancerDescription will not be rendered if endEnhancer is not a string');
+  }
+
+  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
+  , _extends({
+    ref: ref
+  }, rootProps), /*#__PURE__*/React.createElement(Content, contentProps, /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(HeadingContainer, _extends({
+    $maxLines: props.maxLines
+  }, headingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: props.heading
+  })), EndEnhancer && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({
+    $isText: isEndEnhancerString
+  }, endEnhancerContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: EndEnhancer
+  }))), (SubHeading || EndEnhancerDescription) && /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(SubHeadingContainer, _extends({
+    $maxLines: props.maxLines
+  }, subHeadingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: SubHeading
+  })), EndEnhancerDescription && isEndEnhancerString && /*#__PURE__*/React.createElement(EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps, /*#__PURE__*/React.createElement(RenderNode, {
+    component: EndEnhancerDescription
+  })))));
+});
+ListHeading.displayName = 'ListHeading';
+export default ListHeading;

package/esm/list/menu-adapter.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import ListItem from './list-item.js';
+import { mergeOverrides } from '../helpers/overrides.js';
 var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(ListItem, {
     ref: ref,
@@ -13,7 +14,8 @@ var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
     artwork: props.artwork,
     artworkSize: props.artworkSize,
     endEnhancer: props.endEnhancer,
-    overrides: {
+    overrides: // $FlowFixMe
+    mergeOverrides({
       Root: {
         props: {
           onMouseEnter: props.onMouseEnter,
@@ -27,7 +29,7 @@ var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
           };
         }
       }
-    }
+    }, props.overrides)
   }, props.children);
 });
 MenuAdapter.displayName = 'MenuAdapter';

package/esm/list/styled-components.js

@@ -41,7 +41,7 @@ export var StyledContent = styled('div', function (_ref2) {
     borderLeftStyle: 'none',
     display: 'flex',
     flexGrow: 1,
-    minHeight: $sublist ? 'initial' : '64px',
+    minHeight: $sublist ? 'initial' : $theme.sizing.scale1600,
     justifyContent: 'space-between'
   }, $theme.direction === 'rtl' ? {
     paddingLeft: $theme.sizing.scale600,
@@ -102,8 +102,102 @@ export var StyledLabelSublistContent = styled('p', function (_ref6) {
   var $theme = _ref6.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.LabelMedium), {}, {
     color: $theme.colors.contentPrimary,
-    marginTop: '12px',
-    marginBottom: '12px'
+    marginTop: $theme.sizing.scale500,
+    marginBottom: $theme.sizing.scale500
   });
 });
-StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+export var StyledHeadingRoot = styled('div', function (_ref7) {
+  var $theme = _ref7.$theme;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    backgroundColor: $theme.colors.backgroundPrimary,
+    overflow: 'hidden',
+    minHeight: $theme.sizing.scale1600
+  };
+});
+StyledHeadingRoot.displayName = "StyledHeadingRoot";
+export var StyledHeadingContent = styled('div', function (_ref8) {
+  var $theme = _ref8.$theme;
+  return _objectSpread({
+    flexGrow: 1,
+    width: '100%',
+    minWidth: 0,
+    paddingTop: $theme.sizing.scale600,
+    paddingBottom: $theme.sizing.scale300
+  }, $theme.direction === 'rtl' ? {
+    paddingLeft: $theme.sizing.scale600,
+    marginRight: $theme.sizing.scale600
+  } : {
+    paddingRight: $theme.sizing.scale600,
+    marginLeft: $theme.sizing.scale600
+  });
+});
+StyledHeadingContent.displayName = "StyledHeadingContent";
+export var StyledHeadingContentRow = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%'
+});
+StyledHeadingContentRow.displayName = "StyledHeadingContentRow";
+export var StyledHeadingMainHeading = styled('p', // $FlowFixMe - suppressing due to webkit properties
+function (_ref9) {
+  var _ref9$$maxLines = _ref9.$maxLines,
+      $maxLines = _ref9$$maxLines === void 0 ? 1 : _ref9$$maxLines,
+      $theme = _ref9.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.HeadingSmall), {}, {
+    color: $theme.colors.contentPrimary,
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: $theme.sizing.scale600,
+    display: '-webkit-box',
+    '-webkit-line-clamp': $maxLines,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  });
+});
+StyledHeadingMainHeading.displayName = "StyledHeadingMainHeading";
+export var StyledHeadingSubHeading = styled('p', // $FlowFixMe - suppressing due to webkit properties
+function (_ref10) {
+  var _ref10$$maxLines = _ref10.$maxLines,
+      $maxLines = _ref10$$maxLines === void 0 ? 1 : _ref10$$maxLines,
+      $theme = _ref10.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.ParagraphLarge), {}, {
+    color: $theme.colors.contentPrimary,
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: $theme.sizing.scale600,
+    display: '-webkit-box',
+    '-webkit-line-clamp': $maxLines,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  });
+});
+StyledHeadingSubHeading.displayName = "StyledHeadingSubHeading";
+export var StyledHeadingEndEnhancerContainer = styled('div', function (_ref11) {
+  var $isText = _ref11.$isText,
+      $theme = _ref11.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.LabelMedium), {}, {
+    display: 'flex',
+    alignItems: $isText ? 'flex-end' : 'center',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  });
+});
+StyledHeadingEndEnhancerContainer.displayName = "StyledHeadingEndEnhancerContainer";
+export var StyledHeadingEndEnhancerDescriptionContainer = styled('p', function (_ref12) {
+  var $theme = _ref12.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.ParagraphMedium), {}, {
+    marginTop: 0,
+    marginBottom: 0,
+    display: 'flex',
+    alignItems: 'flex-start',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  });
+});
+StyledHeadingEndEnhancerDescriptionContainer.displayName = "StyledHeadingEndEnhancerDescriptionContainer";

package/esm/select/select-component.js

@@ -992,7 +992,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     value: function filterOptions(excludeOptions) {
       var _this5 = this;
 
-      var filterValue = this.state.inputValue; // apply filter function
+      var filterValue = this.state.inputValue.trim(); // apply filter function
 
       if (this.props.filterOptions) {
         this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {

package/esm/textarea/textarea.js

@@ -139,8 +139,7 @@ _defineProperty(Textarea, "defaultProps", {
   placeholder: '',
   required: false,
   rows: 3,
-  size: SIZE.default,
-  value: ''
+  size: SIZE.default
 });
 
 export default Textarea;

package/esm/themes/dark-theme/color-semantic-tokens.js

@@ -45,7 +45,7 @@ export default (function () {
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
-    backgroundPositive: foundation.positive,
+    backgroundPositive: colors.green500,
     backgroundLightAccent: colors.blue700,
     backgroundLightPositive: colors.green700,
     backgroundLightNegative: colors.red700,
@@ -66,7 +66,16 @@ export default (function () {
     borderAccentLight: colors.blue500,
     borderNegative: colors.red500,
     borderWarning: colors.yellow500,
-    borderPositive: colors.green500
+    borderPositive: colors.green500,
+    // Programs
+    safety: colors.blue400,
+    eatsGreen400: colors.green400,
+    freightBlue400: colors.cobalt400,
+    jumpRed400: colors.red400,
+    rewardsTier1: colors.blue400,
+    rewardsTier2: colors.yellow400,
+    rewardsTier3: colors.platinum400,
+    rewardsTier4: colors.gray200
   };
   return _objectSpread(_objectSpread({}, core), coreExtensions);
 });