@sproutsocial/racine 11.3.1-beta-deps.5 → 11.4.1-input-beta.0

package/commonjs/Input/index.js

@@ -7,7 +7,17 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styles = _interopRequireWildcard(require("./styles"));
 
-var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "innerRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance"];
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _utils = require("../utils");
+
+var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance", "size"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -21,6 +31,67 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.crea
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
+var InputContext = /*#__PURE__*/React.createContext({});
+var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "Input__StyledButton",
+  componentId: "sc-1ck1dnm-0"
+})(["&:hover,&:active{color:", ";}"], function (props) {
+  return props.theme.utils.interact(props.theme.colors.icon.base);
+});
+
+var ClearButton = function ClearButton() {
+  var _React$useContext = React.useContext(InputContext),
+      onClear = _React$useContext.onClear,
+      handleClear = _React$useContext.handleClear,
+      clearButtonLabel = _React$useContext.clearButtonLabel,
+      hasValue = _React$useContext.hasValue,
+      inputSize = _React$useContext.size; // Hide the button when there is no text to clear.
+
+
+  if (!hasValue) {
+    return null;
+  } // Log a warning and hide the button when no onClear callback is provided.
+  // If we called handleClear with no onClear prop, all the button would do is focus the Input.
+
+
+  if (!onClear) {
+    console.warn("Warning: No onClear prop provided to Input when using Input.ClearButton. Omitting Input.ClearButton.");
+    return null;
+  } // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
+
+
+  if (!clearButtonLabel) {
+    console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.");
+  } // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
+  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
+
+
+  var py = inputSize === "small" ? 100 : undefined;
+  var px = inputSize === "small" ? 200 : undefined;
+  var buttonSize = inputSize === "small" ? "default" : inputSize;
+  return /*#__PURE__*/React.createElement(StyledButton, {
+    onClick: handleClear,
+    size: buttonSize,
+    py: py,
+    px: px,
+    title: clearButtonLabel || "Clear",
+    ariaLabel: clearButtonLabel || "Clear",
+    color: "icon.base"
+  }, /*#__PURE__*/React.createElement(_Icon.default, {
+    name: "circlex"
+  }));
+}; // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
+// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
+
+
+var isClearButton = function isClearButton(elem) {
+  if (elem != null && elem.type) {
+    return elem.type.displayName === "Input.ClearButton";
+  }
+
+  return false;
+};
+
 var Input = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
@@ -32,41 +103,37 @@ var Input = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.inputRef = /*#__PURE__*/React.createRef();
 
     _this.handleBlur = function (e) {
-      if (_this.props.onBlur) {
-        _this.props.onBlur(e);
-      }
+      return _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
+    };
+
+    _this.handleClear = function (e) {
+      var _this$inputRef, _this$inputRef$curren;
+
+      (_this$inputRef = _this.inputRef) == null ? void 0 : (_this$inputRef$curren = _this$inputRef.current) == null ? void 0 : _this$inputRef$curren.focus();
+      _this.props.onClear == null ? void 0 : _this.props.onClear(e);
     };
 
     _this.handleChange = function (e) {
-      if (_this.props.onChange) {
-        _this.props.onChange(e, e.currentTarget.value);
-      }
+      return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
     };
 
     _this.handleFocus = function (e) {
-      if (_this.props.onFocus) {
-        _this.props.onFocus(e);
-      }
+      return _this.props.onFocus == null ? void 0 : _this.props.onFocus(e);
     };
 
     _this.handleKeyDown = function (e) {
-      if (_this.props.onKeyDown) {
-        _this.props.onKeyDown(e, e.currentTarget.value);
-      }
+      return _this.props.onKeyDown == null ? void 0 : _this.props.onKeyDown(e, e.currentTarget.value);
     };
 
     _this.handleKeyUp = function (e) {
-      if (_this.props.onKeyUp) {
-        _this.props.onKeyUp(e, e.currentTarget.value);
-      }
+      return _this.props.onKeyUp == null ? void 0 : _this.props.onKeyUp(e, e.currentTarget.value);
     };
 
     _this.handlePaste = function (e) {
-      if (_this.props.onPaste) {
-        _this.props.onPaste(e, e.currentTarget.value);
-      }
+      return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
     return _this;
@@ -93,9 +160,11 @@ var Input = /*#__PURE__*/function (_React$Component) {
         maxLength = _this$props.maxLength,
         ariaLabel = _this$props.ariaLabel,
         ariaDescribedby = _this$props.ariaDescribedby,
+        clearButtonLabel = _this$props.clearButtonLabel,
         innerRef = _this$props.innerRef,
         onBlur = _this$props.onBlur,
         onChange = _this$props.onChange,
+        onClear = _this$props.onClear,
         onFocus = _this$props.onFocus,
         onKeyDown = _this$props.onKeyDown,
         onKeyUp = _this$props.onKeyUp,
@@ -105,25 +174,44 @@ var Input = /*#__PURE__*/function (_React$Component) {
         _this$props$qa = _this$props.qa,
         qa = _this$props$qa === void 0 ? {} : _this$props$qa,
         appearance = _this$props.appearance,
-        rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
+        size = _this$props.size,
+        rest = _objectWithoutPropertiesLoose(_this$props, _excluded); // Convert autoComplete from a boolean prop to a string value.
+
 
     var autoCompleteValue = undefined;
 
     if (autoComplete !== undefined) {
       autoCompleteValue = autoComplete ? "on" : "off";
-    }
+    } // Add default elemBefore and elemAfter elements if type is search.
+
 
+    var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(_Icon.default, {
+      name: "search",
+      ariaHidden: true,
+      color: "icon.base"
+    }) : elemBefore; // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
+
+    var elementAfter = type === "search" && onClear && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
     return /*#__PURE__*/React.createElement(_styles.default, _extends({
-      hasBeforeElement: !!elemBefore,
-      hasAfterElement: !!elemAfter,
+      hasBeforeElement: !!elementBefore,
+      hasAfterElement: !!elementAfter,
       disabled: disabled,
       invalid: !!isInvalid,
       warning: hasWarning,
-      appearance: appearance // $FlowIssue - upgrade v0.112.0
+      appearance: appearance,
+      size: size // $FlowIssue - upgrade v0.112.0
 
-    }, rest), elemBefore && /*#__PURE__*/React.createElement(_styles.Accessory, {
+    }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
+      value: {
+        handleClear: this.handleClear,
+        hasValue: !!value,
+        clearButtonLabel: clearButtonLabel,
+        onClear: onClear,
+        size: size
+      }
+    }, elementBefore && /*#__PURE__*/React.createElement(_styles.Accessory, {
       before: true
-    }, elemBefore), /*#__PURE__*/React.createElement("input", _extends({
+    }, elementBefore), /*#__PURE__*/React.createElement("input", _extends({
       "aria-invalid": !!isInvalid,
       "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedby,
@@ -144,23 +232,27 @@ var Input = /*#__PURE__*/function (_React$Component) {
       onKeyDown: this.handleKeyDown,
       onKeyUp: this.handleKeyUp,
       onPaste: this.handlePaste,
-      ref: innerRef,
+      ref: (0, _utils.mergeRefs)([innerRef, this.inputRef]),
       "data-qa-input": name || "",
       "data-qa-input-isdisabled": disabled === true,
       "data-qa-input-isrequired": required === true
-    }, qa, inputProps)), elemAfter && /*#__PURE__*/React.createElement(_styles.Accessory, {
-      after: true
-    }, elemAfter));
+    }, qa, inputProps)), elementAfter && /*#__PURE__*/React.createElement(_styles.Accessory, {
+      after: true,
+      isClearButton: isClearButton(elementAfter)
+    }, elementAfter)));
   };
 
   return Input;
 }(React.Component);
 
-exports.default = Input;
 Input.defaultProps = {
   autoFocus: false,
   disabled: false,
   type: "text",
   size: "default",
   appearance: "primary"
-};
+};
+Input.ClearButton = ClearButton;
+Input.ClearButton.displayName = "Input.ClearButton";
+var _default = Input;
+exports.default = _default;

package/commonjs/Input/styles.js

@@ -86,7 +86,7 @@ var Accessory = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.before && (0, _styledComponents.css)(["left:", ";"], props.theme.space[350]);
 }, function (props) {
-  return props.after && (0, _styledComponents.css)(["right:", ";"], props.theme.space[350]);
+  return props.after && (0, _styledComponents.css)(["right:", ";"], props.isClearButton ? 0 : props.theme.space[350]);
 });
 
 exports.Accessory = Accessory;

package/commonjs/Message/styles.js

@@ -105,7 +105,7 @@ exports.MessageBody = MessageBody;
 var MessageFooter = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MessageFooter",
   componentId: "sc-1ju6d1v-3"
-})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";> :first-child{margin-left:-", ";}"], function (props) {
+})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";>:first-child{margin-left:-", ";}"], function (props) {
   return props.density === _Message.default.DENSITIES.CONDENSED ? 0 : props.theme.space[300];
 }, function (props) {
   return getContentPadding(props);

package/commonjs/TokenInput/index.js

@@ -302,7 +302,7 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       "aria-invalid": !!isInvalid,
       "aria-label": ariaLabel,
       autoFocus: autoFocus,
-      autocomplete: autocomplete,
+      autoComplete: autocomplete,
       disabled: disabled,
       id: id,
       name: name,

package/commonjs/themes/dark/theme.js

@@ -175,7 +175,10 @@ var colors = _extends({}, _theme.default.colors, {
     subtext: _seedsColor.default.COLOR_NEUTRAL_300,
     body: _seedsColor.default.COLOR_NEUTRAL_100,
     inverse: _seedsColor.default.COLOR_NEUTRAL_900,
-    error: _seedsColor.default.COLOR_RED_400
+    error: _seedsColor.default.COLOR_RED_400,
+    background: {
+      highlight: _seedsColor.default.COLOR_YELLOW_900
+    }
   },
   icon: {
     base: _seedsColor.default.COLOR_NEUTRAL_100,

package/commonjs/themes/light/theme.js

@@ -177,7 +177,10 @@ var colors = _extends({
     subtext: _seedsColor.default.COLOR_NEUTRAL_700,
     body: _seedsColor.default.COLOR_NEUTRAL_800,
     inverse: _seedsColor.default.COLOR_NEUTRAL_0,
-    error: _seedsColor.default.COLOR_RED_800
+    error: _seedsColor.default.COLOR_RED_800,
+    background: {
+      highlight: _seedsColor.default.COLOR_YELLOW_200
+    }
   },
   icon: {
     base: _seedsColor.default.COLOR_NEUTRAL_800,

package/commonjs/utils/index.js

@@ -1,10 +1,37 @@
 "use strict";
 
 exports.__esModule = true;
-exports.canUseDOM = void 0;
+exports.mergeRefs = exports.canUseDOM = void 0;
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate 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; }
 
 var canUseDOM = function canUseDOM() {
   return Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
 };
 
-exports.canUseDOM = canUseDOM;
+exports.canUseDOM = canUseDOM;
+
+// Allows a component to pass its own ref *and* a ref prop to the same element.
+// Via https://www.davedrinks.coffee/how-do-i-use-two-react-refs/
+var mergeRefs = function mergeRefs(refs) {
+  var filteredRefs = refs.filter(Boolean);
+  if (!filteredRefs.length) return null;
+  if (filteredRefs.length === 0) return filteredRefs[0];
+  return function (inst) {
+    for (var _iterator = _createForOfIteratorHelperLoose(filteredRefs), _step; !(_step = _iterator()).done;) {
+      var ref = _step.value;
+
+      if (typeof ref === "function") {
+        ref(inst);
+      } else if (ref) {
+        ref.current = inst;
+      }
+    }
+  };
+};
+
+exports.mergeRefs = mergeRefs;

package/dist/themes/dark/dark.scss

@@ -147,7 +147,10 @@ $dark: (
         subtext: #c8cccc,
         body: #f3f4f4,
         inverse: #273333,
-        error: #ff7f6e
+        error: #ff7f6e,
+        background: (
+          highlight: #944c0c
+        )
       ),
       icon: (
         base: #f3f4f4,

package/dist/themes/light/light.scss

@@ -154,7 +154,10 @@ $light: (
         subtext: #515e5f,
         body: #364141,
         inverse: #FFFFFF,
-        error: #c63434
+        error: #c63434,
+        background: (
+          highlight: #ffe99a
+        )
       ),
       icon: (
         base: #364141,

package/lib/Button/index.js

@@ -53,5 +53,4 @@ var Button = function Button(_ref) {
   }, qa, rest), children);
 };
 
-Button.displayName = "Button";
 export default Button;

package/lib/Button/styles.js

@@ -44,5 +44,4 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.appearance === "pill" && css(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode === "dark" ? "screen" : "multiply", pill);
 }, Icon, LAYOUT, COMMON);
-Container.displayName = "Button-Container";
 export default Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/lib/Input/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "innerRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance"];
+var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance", "size"];
 
 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); }
 
@@ -10,6 +10,70 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 import * as React from "react";
 import Container, { Accessory } from "./styles";
+import Button from "../Button";
+import Icon from "../Icon";
+import styled from "styled-components";
+import { mergeRefs } from "../utils";
+var InputContext = /*#__PURE__*/React.createContext({});
+var StyledButton = styled(Button).withConfig({
+  displayName: "Input__StyledButton",
+  componentId: "sc-1ck1dnm-0"
+})(["&:hover,&:active{color:", ";}"], function (props) {
+  return props.theme.utils.interact(props.theme.colors.icon.base);
+});
+
+var ClearButton = function ClearButton() {
+  var _React$useContext = React.useContext(InputContext),
+      onClear = _React$useContext.onClear,
+      handleClear = _React$useContext.handleClear,
+      clearButtonLabel = _React$useContext.clearButtonLabel,
+      hasValue = _React$useContext.hasValue,
+      inputSize = _React$useContext.size; // Hide the button when there is no text to clear.
+
+
+  if (!hasValue) {
+    return null;
+  } // Log a warning and hide the button when no onClear callback is provided.
+  // If we called handleClear with no onClear prop, all the button would do is focus the Input.
+
+
+  if (!onClear) {
+    console.warn("Warning: No onClear prop provided to Input when using Input.ClearButton. Omitting Input.ClearButton.");
+    return null;
+  } // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
+
+
+  if (!clearButtonLabel) {
+    console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.");
+  } // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
+  // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
+
+
+  var py = inputSize === "small" ? 100 : undefined;
+  var px = inputSize === "small" ? 200 : undefined;
+  var buttonSize = inputSize === "small" ? "default" : inputSize;
+  return /*#__PURE__*/React.createElement(StyledButton, {
+    onClick: handleClear,
+    size: buttonSize,
+    py: py,
+    px: px,
+    title: clearButtonLabel || "Clear",
+    ariaLabel: clearButtonLabel || "Clear",
+    color: "icon.base"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "circlex"
+  }));
+}; // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
+// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
+
+
+var isClearButton = function isClearButton(elem) {
+  if (elem != null && elem.type) {
+    return elem.type.displayName === "Input.ClearButton";
+  }
+
+  return false;
+};
 
 var Input = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
@@ -22,41 +86,37 @@ var Input = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.inputRef = /*#__PURE__*/React.createRef();
 
     _this.handleBlur = function (e) {
-      if (_this.props.onBlur) {
-        _this.props.onBlur(e);
-      }
+      return _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
+    };
+
+    _this.handleClear = function (e) {
+      var _this$inputRef, _this$inputRef$curren;
+
+      (_this$inputRef = _this.inputRef) == null ? void 0 : (_this$inputRef$curren = _this$inputRef.current) == null ? void 0 : _this$inputRef$curren.focus();
+      _this.props.onClear == null ? void 0 : _this.props.onClear(e);
     };
 
     _this.handleChange = function (e) {
-      if (_this.props.onChange) {
-        _this.props.onChange(e, e.currentTarget.value);
-      }
+      return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
     };
 
     _this.handleFocus = function (e) {
-      if (_this.props.onFocus) {
-        _this.props.onFocus(e);
-      }
+      return _this.props.onFocus == null ? void 0 : _this.props.onFocus(e);
     };
 
     _this.handleKeyDown = function (e) {
-      if (_this.props.onKeyDown) {
-        _this.props.onKeyDown(e, e.currentTarget.value);
-      }
+      return _this.props.onKeyDown == null ? void 0 : _this.props.onKeyDown(e, e.currentTarget.value);
     };
 
     _this.handleKeyUp = function (e) {
-      if (_this.props.onKeyUp) {
-        _this.props.onKeyUp(e, e.currentTarget.value);
-      }
+      return _this.props.onKeyUp == null ? void 0 : _this.props.onKeyUp(e, e.currentTarget.value);
     };
 
     _this.handlePaste = function (e) {
-      if (_this.props.onPaste) {
-        _this.props.onPaste(e, e.currentTarget.value);
-      }
+      return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
     return _this;
@@ -83,9 +143,11 @@ var Input = /*#__PURE__*/function (_React$Component) {
         maxLength = _this$props.maxLength,
         ariaLabel = _this$props.ariaLabel,
         ariaDescribedby = _this$props.ariaDescribedby,
+        clearButtonLabel = _this$props.clearButtonLabel,
         innerRef = _this$props.innerRef,
         onBlur = _this$props.onBlur,
         onChange = _this$props.onChange,
+        onClear = _this$props.onClear,
         onFocus = _this$props.onFocus,
         onKeyDown = _this$props.onKeyDown,
         onKeyUp = _this$props.onKeyUp,
@@ -95,25 +157,44 @@ var Input = /*#__PURE__*/function (_React$Component) {
         _this$props$qa = _this$props.qa,
         qa = _this$props$qa === void 0 ? {} : _this$props$qa,
         appearance = _this$props.appearance,
-        rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
+        size = _this$props.size,
+        rest = _objectWithoutPropertiesLoose(_this$props, _excluded); // Convert autoComplete from a boolean prop to a string value.
+
 
     var autoCompleteValue = undefined;
 
     if (autoComplete !== undefined) {
       autoCompleteValue = autoComplete ? "on" : "off";
-    }
+    } // Add default elemBefore and elemAfter elements if type is search.
 
+
+    var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(Icon, {
+      name: "search",
+      ariaHidden: true,
+      color: "icon.base"
+    }) : elemBefore; // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
+
+    var elementAfter = type === "search" && onClear && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
     return /*#__PURE__*/React.createElement(Container, _extends({
-      hasBeforeElement: !!elemBefore,
-      hasAfterElement: !!elemAfter,
+      hasBeforeElement: !!elementBefore,
+      hasAfterElement: !!elementAfter,
       disabled: disabled,
       invalid: !!isInvalid,
       warning: hasWarning,
-      appearance: appearance // $FlowIssue - upgrade v0.112.0
-
-    }, rest), elemBefore && /*#__PURE__*/React.createElement(Accessory, {
+      appearance: appearance,
+      size: size // $FlowIssue - upgrade v0.112.0
+
+    }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
+      value: {
+        handleClear: this.handleClear,
+        hasValue: !!value,
+        clearButtonLabel: clearButtonLabel,
+        onClear: onClear,
+        size: size
+      }
+    }, elementBefore && /*#__PURE__*/React.createElement(Accessory, {
       before: true
-    }, elemBefore), /*#__PURE__*/React.createElement("input", _extends({
+    }, elementBefore), /*#__PURE__*/React.createElement("input", _extends({
       "aria-invalid": !!isInvalid,
       "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedby,
@@ -134,13 +215,14 @@ var Input = /*#__PURE__*/function (_React$Component) {
       onKeyDown: this.handleKeyDown,
       onKeyUp: this.handleKeyUp,
       onPaste: this.handlePaste,
-      ref: innerRef,
+      ref: mergeRefs([innerRef, this.inputRef]),
       "data-qa-input": name || "",
       "data-qa-input-isdisabled": disabled === true,
       "data-qa-input-isrequired": required === true
-    }, qa, inputProps)), elemAfter && /*#__PURE__*/React.createElement(Accessory, {
-      after: true
-    }, elemAfter));
+    }, qa, inputProps)), elementAfter && /*#__PURE__*/React.createElement(Accessory, {
+      after: true,
+      isClearButton: isClearButton(elementAfter)
+    }, elementAfter)));
   };
 
   return Input;
@@ -153,4 +235,6 @@ Input.defaultProps = {
   size: "default",
   appearance: "primary"
 };
-export { Input as default };
+Input.ClearButton = ClearButton;
+Input.ClearButton.displayName = "Input.ClearButton";
+export default Input;

package/lib/Input/styles.js

@@ -73,7 +73,7 @@ export var Accessory = styled.div.withConfig({
 }, function (props) {
   return props.before && css(["left:", ";"], props.theme.space[350]);
 }, function (props) {
-  return props.after && css(["right:", ";"], props.theme.space[350]);
+  return props.after && css(["right:", ";"], props.isClearButton ? 0 : props.theme.space[350]);
 });
 Container.displayName = "InputContainer";
 Accessory.displayName = "InputAccessory";

package/lib/Message/styles.js

@@ -91,7 +91,7 @@ export var MessageBody = styled(Box).withConfig({
 export var MessageFooter = styled(Box).withConfig({
   displayName: "styles__MessageFooter",
   componentId: "sc-1ju6d1v-3"
-})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";> :first-child{margin-left:-", ";}"], function (props) {
+})(["padding-bottom:", ";padding-left:", ";padding-right:", ";border-radius:0 0 ", " ", ";display:flex;justify-content:space-between;align-items:center;flex-wrap:", ";>:first-child{margin-left:-", ";}"], function (props) {
   return props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.space[300];
 }, function (props) {
   return getContentPadding(props);

package/lib/TokenInput/index.js

@@ -284,7 +284,7 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
       "aria-invalid": !!isInvalid,
       "aria-label": ariaLabel,
       autoFocus: autoFocus,
-      autocomplete: autocomplete,
+      autoComplete: autocomplete,
       disabled: disabled,
       id: id,
       name: name,

package/lib/themes/dark/theme.js

@@ -159,7 +159,10 @@ var colors = _extends({}, lightTheme.colors, {
     subtext: COLORS.COLOR_NEUTRAL_300,
     body: COLORS.COLOR_NEUTRAL_100,
     inverse: COLORS.COLOR_NEUTRAL_900,
-    error: COLORS.COLOR_RED_400
+    error: COLORS.COLOR_RED_400,
+    background: {
+      highlight: COLORS.COLOR_YELLOW_900
+    }
   },
   icon: {
     base: COLORS.COLOR_NEUTRAL_100,

package/lib/themes/light/theme.js

@@ -157,7 +157,10 @@ var colors = _extends({
     subtext: COLORS.COLOR_NEUTRAL_700,
     body: COLORS.COLOR_NEUTRAL_800,
     inverse: COLORS.COLOR_NEUTRAL_0,
-    error: COLORS.COLOR_RED_800
+    error: COLORS.COLOR_RED_800,
+    background: {
+      highlight: COLORS.COLOR_YELLOW_200
+    }
   },
   icon: {
     base: COLORS.COLOR_NEUTRAL_800,