@khanacademy/wonder-blocks-search-field 1.0.4 → 1.0.7

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @khanacademy/wonder-blocks-search-field
 
+## 1.0.7
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-icon-button@3.4.9
+
+## 1.0.6
+
+### Patch Changes
+
+-   Updated dependencies [83486dba]
+    -   @khanacademy/wonder-blocks-icon@1.2.29
+    -   @khanacademy/wonder-blocks-icon-button@3.4.8
+
+## 1.0.5
+
+### Patch Changes
+
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-core@4.3.2
+    -   @khanacademy/wonder-blocks-icon@1.2.28
+    -   @khanacademy/wonder-blocks-icon-button@3.4.7
+    -   @khanacademy/wonder-blocks-typography@1.1.32
+
 ## 1.0.4
 
 ### Patch Changes

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 24);
+/******/ 	return __webpack_require__(__webpack_require__.s = 26);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -119,15 +119,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var history__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
-/* harmony import */ var mini_create_react_context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(19);
+/* harmony import */ var mini_create_react_context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(21);
 /* harmony import */ var tiny_invariant__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
 /* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(2);
-/* harmony import */ var path_to_regexp__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(14);
+/* harmony import */ var path_to_regexp__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(15);
 /* harmony import */ var path_to_regexp__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(path_to_regexp__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var react_is__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(32);
+/* harmony import */ var react_is__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(16);
 /* harmony import */ var react_is__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react_is__WEBPACK_IMPORTED_MODULE_8__);
 /* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(7);
-/* harmony import */ var hoist_non_react_statics__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(20);
+/* harmony import */ var hoist_non_react_statics__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(22);
 /* harmony import */ var hoist_non_react_statics__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(hoist_non_react_statics__WEBPACK_IMPORTED_MODULE_10__);
 
 
@@ -776,7 +776,7 @@ if (false) { var secondaryBuildName, initialBuildName, buildNames, key, global;
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _extends; });
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -789,7 +789,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -806,8 +805,8 @@ function _extends() {
 /* unused harmony export parsePath */
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return createPath; });
 /* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var resolve_pathname__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
-/* harmony import */ var value_equal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(22);
+/* harmony import */ var resolve_pathname__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(23);
+/* harmony import */ var value_equal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(24);
 /* harmony import */ var tiny_invariant__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
 
 
@@ -1736,7 +1735,7 @@ function createMemoryHistory(props) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _inheritsLoose; });
-/* harmony import */ var _setPrototypeOf_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(18);
+/* harmony import */ var _setPrototypeOf_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(20);
 
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
@@ -1819,7 +1818,7 @@ module.exports = require("aphrodite");
 if (false) { var throwOnDirectAccess, ReactIs; } else {
   // By explicitly using `prop-types` you are opting into new production behavior.
   // http://fb.me/prop-types-in-prod
-  module.exports = __webpack_require__(28)();
+  module.exports = __webpack_require__(30)();
 }
 
 
@@ -1836,16 +1835,17 @@ module.exports = require("@khanacademy/wonder-blocks-icon");
 module.exports = require("@khanacademy/wonder-blocks-color");
 
 /***/ }),
-/* 13 */
+/* 13 */,
+/* 14 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-typography");
 
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var isarray = __webpack_require__(31)
+var isarray = __webpack_require__(33)
 
 /**
  * Expose `pathToRegexp`.
@@ -2274,7 +2274,19 @@ function pathToRegexp (path, keys, options) {
 
 
 /***/ }),
-/* 15 */
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+if (true) {
+  module.exports = __webpack_require__(34);
+} else {}
+
+
+/***/ }),
+/* 17 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2282,13 +2294,13 @@ function pathToRegexp (path, keys, options) {
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(14);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(16);
+/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(18);
 /* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_form__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(17);
+/* harmony import */ var _khanacademy_wonder_blocks_form__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(19);
 /* harmony import */ var _khanacademy_wonder_blocks_form__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_form__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(11);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6__);
@@ -2296,7 +2308,7 @@ function pathToRegexp (path, keys, options) {
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(6);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(23);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(25);
 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); }
 
 
@@ -2448,13 +2460,13 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 /* harmony default export */ __webpack_exports__["a"] = (SearchField);
 
 /***/ }),
-/* 16 */
+/* 18 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-icon-button");
 
 /***/ }),
-/* 17 */
+/* 19 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports =
@@ -2742,7 +2754,7 @@ function (module, exports) {
 
 /***/
 function (module, exports) {
-  module.exports = __webpack_require__(13);
+  module.exports = __webpack_require__(14);
   /***/
 },
 /* 5 */
@@ -2811,7 +2823,7 @@ function (module, __webpack_exports__, __webpack_require__) {
 
 /***/
 function (module, exports) {
-  module.exports = __webpack_require__(25);
+  module.exports = __webpack_require__(27);
   /***/
 },
 /* 8 */
@@ -2859,8 +2871,22 @@ function (module, __webpack_exports__, __webpack_require__) {
    * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
    * label and description props.
    *
+   * If used by itself, a checkbox provides two options - checked and unchecked.
+   * A group of checkboxes can be used to allow a user to select multiple values
+   * from a list of options.
+   *
    * If you want a whole group of Checkbox[es] that are related, see the Choice
    * and CheckboxGroup components.
+   *
+   * ### Usage
+   *
+   * ```jsx
+   * import {Checkbox} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [checked, setChecked] = React.useState(false);
+   *
+   * <Checkbox checked={checked} onChange={setChecked} />
+   * ```
    */
 
 
@@ -3206,6 +3232,24 @@ function (module, __webpack_exports__, __webpack_require__) {
       boxShadow: `0px 0px 0px 1px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.red}, 0px 0px 0px 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.white}`
     }
   });
+  /**
+   * A TextField is an element used to accept a single line of text from the user.
+   *
+   * ### Usage
+   *
+   * ```jsx
+   * import {TextField} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [value, setValue] = React.useState("");
+   *
+   * <TextField
+   *     id="some-unique-text-field-id"
+   *     value={value}
+   *     onChange={setValue}
+   * />
+   * ```
+   */
+
   const TextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](TextFieldInternal, _extends({}, props, {
     forwardedRef: ref
   })));
@@ -3494,6 +3538,63 @@ function (module, __webpack_exports__, __webpack_require__) {
    *
    * If you wish to use just a single field, use Checkbox or Radio with the
    * optional label and description props.
+   *
+   * ### Checkbox Usage
+   *
+   * ```jsx
+   * import {Choice, CheckboxGroup} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [selectedValues, setSelectedValues] = React.useState([]);
+   *
+   * // Checkbox usage
+   * <CheckboxGroup
+   *     label="some-label"
+   *     description="some-description"
+   *     groupName="some-group-name"
+   *     onChange={setSelectedValues}
+   *     selectedValues={selectedValues}
+   * />
+   *     // Add as many choices as necessary
+   *     <Choice
+   *        label="Choice 1"
+   *        value="some-choice-value"
+   *        description="Some choice description."
+   *     />
+   *     <Choice
+   *        label="Choice 2"
+   *        value="some-choice-value-2"
+   *        description="Some choice description."
+   *     />
+   * </CheckboxGroup>
+   * ```
+   *
+   * ### Radio Usage
+   *
+   * ```jsx
+   * import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [selectedValue, setSelectedValue] = React.useState("");
+   *
+   * <RadioGroup
+   *     label="some-label"
+   *     description="some-description"
+   *     groupName="some-group-name"
+   *     onChange={setSelectedValue}>
+   *     selectedValues={selectedValue}
+   * />
+   *     // Add as many choices as necessary
+   *     <Choice
+   *        label="Choice 1"
+   *        value="some-choice-value"
+   *        description="Some choice description."
+   *     />
+   *     <Choice
+   *        label="Choice 2"
+   *        value="some-choice-value-2"
+   *        description="Some choice description."
+   *     />
+   * </RadioGroup>
+   * ```
    */
 
 
@@ -3593,6 +3694,33 @@ function (module, __webpack_exports__, __webpack_require__) {
    * many props for its children Choice components. The Choice component is
    * exposed for the user to apply custom styles or to indicate which choices are
    * disabled.
+   *
+   * ### Usage
+   *
+   * ```jsx
+   * import {Choice, CheckboxGroup} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [selectedValues, setSelectedValues] = React.useState([]);
+   *
+   * <CheckboxGroup
+   *     label="some-label"
+   *     description="some-description"
+   *     groupName="some-group-name"
+   *     onChange={setSelectedValues}
+   *     selectedValues={selectedValues}
+   * />
+   *     // Add as many choices as necessary
+   *     <Choice
+   *        label="Choice 1"
+   *        value="some-choice-value"
+   *     />
+   *     <Choice
+   *        label="Choice 2"
+   *        value="some-choice-value-2"
+   *        description="Some choice description."
+   *     />
+   * </CheckboxGroup>
+   * ```
    */
 
   class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
@@ -3732,6 +3860,33 @@ function (module, __webpack_exports__, __webpack_require__) {
    * indicate which choices are disabled. The use of the groupName prop is
    * important to maintain expected keyboard navigation behavior for
    * accessibility.
+   *
+   * ### Usage
+   *
+   * ```jsx
+   * import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [selectedValue, setSelectedValue] = React.useState([]);
+   *
+   * <RadioGroup
+   *     label="some-label"
+   *     description="some-description"
+   *     groupName="some-group-name"
+   *     onChange={setSelectedValue}
+   *     selectedValue={selectedValue}
+   * />
+   *     // Add as many choices as necessary
+   *     <Choice
+   *        label="Choice 1"
+   *        value="some-choice-value"
+   *     />
+   *     <Choice
+   *        label="Choice 2"
+   *        value="some-choice-value-2"
+   *        description="Some choice description."
+   *     />
+   * </RadioGroup>
+   * ```
    */
 
   class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
@@ -3966,6 +4121,27 @@ function (module, __webpack_exports__, __webpack_require__) {
     disabled: false,
     light: false
   };
+  /**
+   * A LabeledTextField is an element used to accept a single line of text
+   * from the user paired with a label, description, and error field elements.
+   *
+   * ### Usage
+   *
+   * ```jsx
+   * import {LabeledTextField} from "@khanacademy/wonder-blocks-form";
+   *
+   * const [value, setValue] = React.useState("");
+   *
+   * <LabeledTextField
+   *     label="Label"
+   *     description="Hello, this is the description for this field"
+   *     placeholder="Placeholder"
+   *     value={value}
+   *     onChange={setValue}
+   * />
+   * ```
+   */
+
   const LabeledTextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](LabeledTextFieldInternal, _extends({}, props, {
     forwardedRef: ref
   })));
@@ -3978,7 +4154,7 @@ function (module, __webpack_exports__, __webpack_require__) {
 
 /***/
 function (module, exports) {
-  module.exports = __webpack_require__(26);
+  module.exports = __webpack_require__(28);
   /***/
 },
 /* 17 */
@@ -4703,22 +4879,21 @@ function (module, __webpack_exports__, __webpack_require__) {
 ]);
 
 /***/ }),
-/* 18 */
+/* 20 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _setPrototypeOf; });
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 
 /***/ }),
-/* 19 */
+/* 21 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4902,16 +5077,16 @@ var index = react__WEBPACK_IMPORTED_MODULE_0___default.a.createContext || create
 
 /* harmony default export */ __webpack_exports__["a"] = (index);
 
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(30)))
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(32)))
 
 /***/ }),
-/* 20 */
+/* 22 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var reactIs = __webpack_require__(34);
+var reactIs = __webpack_require__(16);
 
 /**
  * Copyright 2015, Yahoo! Inc.
@@ -5015,7 +5190,7 @@ module.exports = hoistNonReactStatics;
 
 
 /***/ }),
-/* 21 */
+/* 23 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5097,7 +5272,7 @@ function resolvePathname(to, from) {
 
 
 /***/ }),
-/* 22 */
+/* 24 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5140,7 +5315,7 @@ function valueEqual(a, b) {
 
 
 /***/ }),
-/* 23 */
+/* 25 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -5151,17 +5326,17 @@ const defaultLabels = {
 };
 
 /***/ }),
-/* 24 */
+/* 26 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _components_search_field_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(15);
+/* harmony import */ var _components_search_field_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(17);
 
 /* harmony default export */ __webpack_exports__["default"] = (_components_search_field_js__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
 
 /***/ }),
-/* 25 */
+/* 27 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports =
@@ -5607,7 +5782,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   "b"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_2__[
   /* MEDIA_MODAL_SPEC */
   "c"]).map(spec => spec.query));
-  const mediaQueryLists = {}; // eslint-disable-next-line flowtype/require-exact-type
+  const mediaQueryLists = {}; // eslint-disable-next-line ft-flow/require-exact-type
   // If for some reason we're not able to resolve the current media size we
   // fall back to this state.
 
@@ -5761,6 +5936,32 @@ function (module, __webpack_exports__, __webpack_require__) {
 
   } // gen-snapshot-tests.js only understands `export default class ...`
 
+  /**
+   * ***NOTE: The MediaLayout component is being deprecated. Do not use this!!***
+   *
+   * MediaLayout is a container component that accepts a `styleSheets` object,
+   * whose keys are media sizes. It listens for changes to the current media
+   * size and passes the current `mediaSize`, `mediaSpec`, and `styles` to
+   * `children`, which is a render function taking those three values as an
+   * object.
+   *
+   * Valid keys for the `styleSheets` object are (in order of precedence):
+   * - `small`, `medium`, `large`
+   * - `mdOrSmaller`, `mdOrLarger`
+   * - `all`
+   *
+   * `MediaLayout` will merge style rules from multiple styles that match the
+   * current media query, e.g. `"(min-width: 1024px)"`.
+   *
+   * The `mediaSpec` is an object with one or more of the following keys:
+   * `small`, `medium`, or `large`. Each value contains the following data:
+   * - `query: string` e.g. "(min-width: 1024px)"
+   * - `totalColumns: number`
+   * - `gutterWidth: number`
+   * - `marginWidth: number`
+   * - `maxWidth: number`
+   */
+
 
   class MediaLayout extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     render() {
@@ -6053,7 +6254,7 @@ function (module, __webpack_exports__, __webpack_require__) {
 ]);
 
 /***/ }),
-/* 26 */
+/* 28 */
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports =
@@ -6377,7 +6578,6 @@ function (module, __webpack_exports__, __webpack_require__) {
       case "checkbox":
       case "radio":
       case "listbox":
-      case "option":
         return {
           triggerOnEnter: false,
           triggerOnSpace: true
@@ -6387,6 +6587,7 @@ function (module, __webpack_exports__, __webpack_require__) {
       case "button":
       case "menuitem":
       case "menu":
+      case "option":
       default:
         return {
           triggerOnEnter: true,
@@ -7402,7 +7603,7 @@ function (module, __webpack_exports__, __webpack_require__) {
 
 /***/
 function (module, exports) {
-  module.exports = __webpack_require__(27);
+  module.exports = __webpack_require__(29);
   /***/
 },
 /* 6 */
@@ -7755,7 +7956,7 @@ function (module, __webpack_exports__, __webpack_require__) {
 ]);
 
 /***/ }),
-/* 27 */
+/* 29 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -8071,7 +8272,7 @@ if (false) { var ariaCurrentType; }
 
 
 /***/ }),
-/* 28 */
+/* 30 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -8084,7 +8285,7 @@ if (false) { var ariaCurrentType; }
 
 
 
-var ReactPropTypesSecret = __webpack_require__(29);
+var ReactPropTypesSecret = __webpack_require__(31);
 
 function emptyFunction() {}
 function emptyFunctionWithReset() {}
@@ -8142,7 +8343,7 @@ module.exports = function() {
 
 
 /***/ }),
-/* 29 */
+/* 31 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -8161,7 +8362,7 @@ module.exports = ReactPropTypesSecret;
 
 
 /***/ }),
-/* 30 */
+/* 32 */
 /***/ (function(module, exports) {
 
 var g;
@@ -8187,7 +8388,7 @@ module.exports = g;
 
 
 /***/ }),
-/* 31 */
+/* 33 */
 /***/ (function(module, exports) {
 
 module.exports = Array.isArray || function (arr) {
@@ -8196,19 +8397,7 @@ module.exports = Array.isArray || function (arr) {
 
 
 /***/ }),
-/* 32 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-if (true) {
-  module.exports = __webpack_require__(33);
-} else {}
-
-
-/***/ }),
-/* 33 */
+/* 34 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -8229,39 +8418,5 @@ exports.isMemo=function(a){return z(a)===r};exports.isPortal=function(a){return
 exports.isValidElementType=function(a){return"string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};exports.typeOf=z;
 
 
-/***/ }),
-/* 34 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-if (true) {
-  module.exports = __webpack_require__(35);
-} else {}
-
-
-/***/ }),
-/* 35 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/** @license React v16.12.0
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-Object.defineProperty(exports,"__esModule",{value:!0});
-var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?Symbol.for("react.suspense_list"):
-60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.fundamental"):60117,w=b?Symbol.for("react.responder"):60118,x=b?Symbol.for("react.scope"):60119;function y(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function z(a){return y(a)===m}
-exports.typeOf=y;exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d;exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;
-exports.isValidElementType=function(a){return"string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===v||a.$$typeof===w||a.$$typeof===x)};exports.isAsyncMode=function(a){return z(a)||y(a)===l};exports.isConcurrentMode=z;exports.isContextConsumer=function(a){return y(a)===k};exports.isContextProvider=function(a){return y(a)===h};
-exports.isElement=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return y(a)===n};exports.isFragment=function(a){return y(a)===e};exports.isLazy=function(a){return y(a)===t};exports.isMemo=function(a){return y(a)===r};exports.isPortal=function(a){return y(a)===d};exports.isProfiler=function(a){return y(a)===g};exports.isStrictMode=function(a){return y(a)===f};exports.isSuspense=function(a){return y(a)===p};
-
-
 /***/ })
 /******/ ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-search-field",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "design": "v1",
   "description": "Search Field components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -15,13 +15,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
+    "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.1",
-    "@khanacademy/wonder-blocks-icon": "^1.2.27",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.6",
+    "@khanacademy/wonder-blocks-core": "^4.3.2",
+    "@khanacademy/wonder-blocks-icon": "^1.2.29",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.9",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.31"
+    "@khanacademy/wonder-blocks-typography": "^1.1.32"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",