@primer/components 33.0.0-rc.dcc047ad → 33.0.0

package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -1,3901 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Autocomplete snapshots renders a custom empty state message 1`] = `
-Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #24292f;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
-  cursor: text;
-  padding: 6px 12px;
-}
-
-.c0 .TextInput-icon {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: #57606a;
-  margin: 0 8px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c0:focus-within {
-  border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-<span
-    className="c0 TextInput-wrapper"
-  >
-    <input
-      aria-autocomplete="both"
-      aria-controls="autocompleteId-listbox"
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-owns="autocompleteId-listbox"
-      className="c1"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      role="combobox"
-      type="text"
-    />
-  </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c1 {
-  padding: 16px;
-}
-
-<div
-    className="c0"
-  >
-    <div>
-      <div
-        className="c1"
-      >
-        No results
-      </div>
-    </div>
-  </div>,
-]
-`;
-
-exports[`Autocomplete snapshots renders a loading state 1`] = `
-Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #24292f;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
-  cursor: text;
-  padding: 6px 12px;
-}
-
-.c0 .TextInput-icon {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: #57606a;
-  margin: 0 8px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c0:focus-within {
-  border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-<span
-    className="c0 TextInput-wrapper"
-  >
-    <input
-      aria-autocomplete="both"
-      aria-controls="autocompleteId-listbox"
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-owns="autocompleteId-listbox"
-      className="c1"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      role="combobox"
-      type="text"
-    />
-  </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c1 {
-  padding: 16px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c2 {
-  -webkit-animation: rotate-keyframes 1s linear infinite;
-  animation: rotate-keyframes 1s linear infinite;
-}
-
-<div
-    className="c0"
-  >
-    <div
-      className="c1"
-      display="flex"
-    >
-      <svg
-        className="c2"
-        fill="none"
-        height="32px"
-        viewBox="0 0 16 16"
-        width="32px"
-      >
-        <circle
-          cx="8"
-          cy="8"
-          r="7"
-          stroke="currentColor"
-          strokeOpacity="0.25"
-          strokeWidth="2"
-          vectorEffect="non-scaling-stroke"
-        />
-        <path
-          d="M15 8a7.002 7.002 0 00-7-7"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeWidth="2"
-          vectorEffect="non-scaling-stroke"
-        />
-      </svg>
-    </div>
-  </div>,
-]
-`;
-
-exports[`Autocomplete snapshots renders a menu that contains an item to add to the menu 1`] = `
-Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #24292f;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
-  cursor: text;
-  padding: 6px 12px;
-}
-
-.c0 .TextInput-icon {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: #57606a;
-  margin: 0 8px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c0:focus-within {
-  border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-<span
-    className="c0 TextInput-wrapper"
-  >
-    <input
-      aria-autocomplete="both"
-      aria-controls="autocompleteId-listbox"
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-owns="autocompleteId-listbox"
-      className="c1"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      role="combobox"
-      type="text"
-    />
-  </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c2 {
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 0;
-  position: relative;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c9 {
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 0;
-  -webkit-flex-direction: var(--main-content-flex-direction);
-  -ms-flex-direction: var(--main-content-flex-direction);
-  flex-direction: var(--main-content-flex-direction);
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c4 {
-  padding: 6px 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border-radius: 6px;
-  color: #24292f;
-  -webkit-transition: background 33.333ms linear;
-  transition: background 33.333ms linear;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-.c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) {
-  margin-top: 0;
-}
-
-.c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) .c7::before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: 100%;
-  top: -7px;
-  border: 0 solid hsla(210,18%,87%,1);
-  border-top-width: 0;
-}
-
-.c4:hover .c7::before,
-.c4:hover + * .c7::before {
-  border-color: var(--item-hover-divider-border-color-override,transparent) !important;
-}
-
-.c4:focus .c7::before,
-.c4:focus + * .c7::before,
-.c4[data-is-active-descendant] .c7::before,
-[data-is-active-descendant] + .c4 .c7::before {
-  border-color: transparent !important;
-}
-
-.c4[data-is-active-descendant='activated-directly'] {
-  background: rgba(208,215,222,0.48);
-}
-
-.c4[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(208,215,222,0.32);
-}
-
-.c4:focus {
-  background: rgba(208,215,222,0.48);
-  outline: none;
-}
-
-.c4:active {
-  background: rgba(208,215,222,0.48);
-}
-
-.c5 {
-  height: 20px;
-  width: 16px;
-  margin-right: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c10 {
-  height: 20px;
-  width: 16px;
-  margin-right: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c10 svg {
-  fill: #57606a;
-  font-size: 12px;
-}
-
-.c6 rect {
-  fill: #ffffff;
-  stroke: #d0d7de;
-  shape-rendering: auto;
-}
-
-.c6 path {
-  fill: #ffffff;
-  opacity: 0;
-}
-
-.c1 {
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.c1[data-has-active-descendant],
-.c1:focus-within {
-  --item-hover-bg-override: none;
-  --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
-}
-
-@media (hover:hover) and (pointer:fine) {
-  .c4:hover {
-    background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
-    cursor: pointer;
-  }
-}
-
-<div
-    className="c0"
-  >
-    <div>
-      <div
-        aria-labelledby="labelId"
-        className="c1"
-        id="autocompleteId-listbox"
-        role="listbox"
-      >
-        <div
-          className="c2"
-        >
-          <div
-            aria-labelledby="react-aria-1"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={0}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-1"
-                >
-                  zero
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-3"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={1}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-3"
-                >
-                  one
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-5"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={2}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-5"
-                >
-                  two
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-7"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={3}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-7"
-                >
-                  three
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-9"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={4}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-9"
-                >
-                  four
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-11"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={5}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-11"
-                >
-                  five
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-13"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={6}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-13"
-                >
-                  six
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-15"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={7}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-15"
-                >
-                  seven
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-17"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={20}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-17"
-                >
-                  twenty
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-19"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={21}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-19"
-                >
-                  twentyone
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-21"
-            className="c3 c4"
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            tabIndex={-1}
-          >
-            <div
-              className="c10"
-            >
-              <svg
-                aria-hidden="true"
-                className="octicon octicon-plus"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<path fill-rule=\\"evenodd\\" d=\\"M7.75 2a.75.75 0 01.75.75V7h4.25a.75.75 0 110 1.5H8.5v4.25a.75.75 0 11-1.5 0V8.5H2.75a.75.75 0 010-1.5H7V2.75A.75.75 0 017.75 2z\\"></path>",
-                  }
-                }
-                fill="currentColor"
-                height={16}
-                role="img"
-                style={
-                  Object {
-                    "display": "inline-block",
-                    "overflow": "visible",
-                    "userSelect": "none",
-                    "verticalAlign": "text-bottom",
-                  }
-                }
-                viewBox="0 0 16 16"
-                width={16}
-              />
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-21"
-                >
-                  Add new item
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
-exports[`Autocomplete snapshots renders a multiselect input 1`] = `
-Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #24292f;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
-  cursor: text;
-  padding: 6px 12px;
-}
-
-.c0 .TextInput-icon {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: #57606a;
-  margin: 0 8px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c0:focus-within {
-  border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-<span
-    className="c0 TextInput-wrapper"
-  >
-    <input
-      aria-autocomplete="both"
-      aria-controls="autocompleteId-listbox"
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-owns="autocompleteId-listbox"
-      className="c1"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      role="combobox"
-      type="text"
-    />
-  </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c2 {
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 0;
-  position: relative;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c9 {
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 0;
-  -webkit-flex-direction: var(--main-content-flex-direction);
-  -ms-flex-direction: var(--main-content-flex-direction);
-  flex-direction: var(--main-content-flex-direction);
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c4 {
-  padding: 6px 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border-radius: 6px;
-  color: #24292f;
-  -webkit-transition: background 33.333ms linear;
-  transition: background 33.333ms linear;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-.c4:not(:first-of-type):not(.c11 + .c3):not(.c10 + .c3) {
-  margin-top: 0;
-}
-
-.c4:not(:first-of-type):not(.c11 + .c3):not(.c10 + .c3) .c7::before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: 100%;
-  top: -7px;
-  border: 0 solid hsla(210,18%,87%,1);
-  border-top-width: 0;
-}
-
-.c4:hover .c7::before,
-.c4:hover + * .c7::before {
-  border-color: var(--item-hover-divider-border-color-override,transparent) !important;
-}
-
-.c4:focus .c7::before,
-.c4:focus + * .c7::before,
-.c4[data-is-active-descendant] .c7::before,
-[data-is-active-descendant] + .c4 .c7::before {
-  border-color: transparent !important;
-}
-
-.c4[data-is-active-descendant='activated-directly'] {
-  background: rgba(208,215,222,0.48);
-}
-
-.c4[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(208,215,222,0.32);
-}
-
-.c4:focus {
-  background: rgba(208,215,222,0.48);
-  outline: none;
-}
-
-.c4:active {
-  background: rgba(208,215,222,0.48);
-}
-
-.c5 {
-  height: 20px;
-  width: 16px;
-  margin-right: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c6 rect {
-  fill: #ffffff;
-  stroke: #d0d7de;
-  shape-rendering: auto;
-}
-
-.c6 path {
-  fill: #ffffff;
-  opacity: 0;
-}
-
-.c1 {
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.c1[data-has-active-descendant],
-.c1:focus-within {
-  --item-hover-bg-override: none;
-  --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
-}
-
-@media (hover:hover) and (pointer:fine) {
-  .c4:hover {
-    background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
-    cursor: pointer;
-  }
-}
-
-<div
-    className="c0"
-  >
-    <div>
-      <div
-        aria-labelledby="labelId"
-        className="c1"
-        id="autocompleteId-listbox"
-        role="listbox"
-      >
-        <div
-          className="c2"
-        >
-          <div
-            aria-labelledby="react-aria-1"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={0}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-1"
-                >
-                  zero
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-3"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={1}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-3"
-                >
-                  one
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-5"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={2}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-5"
-                >
-                  two
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-7"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={3}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-7"
-                >
-                  three
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-9"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={4}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-9"
-                >
-                  four
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-11"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={5}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-11"
-                >
-                  five
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-13"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={6}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-13"
-                >
-                  six
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-15"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={7}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-15"
-                >
-                  seven
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-17"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={20}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-17"
-                >
-                  twenty
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-19"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={21}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-19"
-                >
-                  twentyone
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
-exports[`Autocomplete snapshots renders a multiselect input with selected menu items 1`] = `
-Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #24292f;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
-  cursor: text;
-  padding: 6px 12px;
-}
-
-.c0 .TextInput-icon {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: #57606a;
-  margin: 0 8px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c0:focus-within {
-  border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-<span
-    className="c0 TextInput-wrapper"
-  >
-    <input
-      aria-autocomplete="both"
-      aria-controls="autocompleteId-listbox"
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-owns="autocompleteId-listbox"
-      className="c1"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      role="combobox"
-      type="text"
-    />
-  </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c2 {
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 0;
-  position: relative;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c9 {
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 0;
-  -webkit-flex-direction: var(--main-content-flex-direction);
-  -ms-flex-direction: var(--main-content-flex-direction);
-  flex-direction: var(--main-content-flex-direction);
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c4 {
-  padding: 6px 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border-radius: 6px;
-  color: #24292f;
-  -webkit-transition: background 33.333ms linear;
-  transition: background 33.333ms linear;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-.c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) {
-  margin-top: 0;
-}
-
-.c4:not(:first-of-type):not(.c12 + .c3):not(.c11 + .c3) .c7::before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: 100%;
-  top: -7px;
-  border: 0 solid hsla(210,18%,87%,1);
-  border-top-width: 0;
-}
-
-.c4:hover .c7::before,
-.c4:hover + * .c7::before {
-  border-color: var(--item-hover-divider-border-color-override,transparent) !important;
-}
-
-.c4:focus .c7::before,
-.c4:focus + * .c7::before,
-.c4[data-is-active-descendant] .c7::before,
-[data-is-active-descendant] + .c4 .c7::before {
-  border-color: transparent !important;
-}
-
-.c4[data-is-active-descendant='activated-directly'] {
-  background: rgba(208,215,222,0.48);
-}
-
-.c4[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(208,215,222,0.32);
-}
-
-.c4:focus {
-  background: rgba(208,215,222,0.48);
-  outline: none;
-}
-
-.c4:active {
-  background: rgba(208,215,222,0.48);
-}
-
-.c5 {
-  height: 20px;
-  width: 16px;
-  margin-right: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c10 rect {
-  fill: #ffffff;
-  stroke: #d0d7de;
-  shape-rendering: auto;
-}
-
-.c10 path {
-  fill: #ffffff;
-  opacity: 0;
-}
-
-.c6 rect {
-  fill: #0969da;
-  stroke: #0969da;
-  shape-rendering: auto;
-}
-
-.c6 path {
-  fill: #ffffff;
-  opacity: 1;
-}
-
-.c1 {
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.c1[data-has-active-descendant],
-.c1:focus-within {
-  --item-hover-bg-override: none;
-  --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
-}
-
-@media (hover:hover) and (pointer:fine) {
-  .c4:hover {
-    background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
-    cursor: pointer;
-  }
-}
-
-<div
-    className="c0"
-  >
-    <div>
-      <div
-        aria-labelledby="labelId"
-        className="c1"
-        id="autocompleteId-listbox"
-        role="listbox"
-      >
-        <div
-          className="c2"
-        >
-          <div
-            aria-labelledby="react-aria-1"
-            aria-selected={true}
-            className="c3 c4"
-            data-id={0}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={true}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-1"
-                >
-                  zero
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-3"
-            aria-selected={true}
-            className="c3 c4"
-            data-id={1}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={true}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-3"
-                >
-                  one
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-5"
-            aria-selected={true}
-            className="c3 c4"
-            data-id={2}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c6"
-                height="16"
-                selected={true}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-5"
-                >
-                  two
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-7"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={3}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c10"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-7"
-                >
-                  three
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-9"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={4}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c10"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-9"
-                >
-                  four
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-11"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={5}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c10"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-11"
-                >
-                  five
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-13"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={6}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c10"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-13"
-                >
-                  six
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-15"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={7}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c10"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-15"
-                >
-                  seven
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-17"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={20}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c10"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-17"
-                >
-                  twenty
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-19"
-            aria-selected={false}
-            className="c3 c4"
-            data-id={21}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5"
-            >
-              <svg
-                aria-hidden="true"
-                className="c10"
-                height="16"
-                selected={false}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  height="12"
-                  rx="4"
-                  width="12"
-                  x="2"
-                  y="2"
-                />
-                <path
-                  d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
-                  fillRule="evenodd"
-                  strokeWidth="0"
-                />
-              </svg>
-            </div>
-            <div
-              className="c7 c8"
-            >
-              <div
-                className="c9"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-19"
-                >
-                  twentyone
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
-exports[`Autocomplete snapshots renders a single select input 1`] = `
-Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #24292f;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
-  cursor: text;
-  padding: 6px 12px;
-}
-
-.c0 .TextInput-icon {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: #57606a;
-  margin: 0 8px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c0:focus-within {
-  border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-<span
-    className="c0 TextInput-wrapper"
-  >
-    <input
-      aria-autocomplete="both"
-      aria-controls="autocompleteId-listbox"
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-owns="autocompleteId-listbox"
-      className="c1"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      role="combobox"
-      type="text"
-    />
-  </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c2 {
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 0;
-  position: relative;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c7 {
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 0;
-  -webkit-flex-direction: var(--main-content-flex-direction);
-  -ms-flex-direction: var(--main-content-flex-direction);
-  flex-direction: var(--main-content-flex-direction);
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c4 {
-  padding: 6px 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border-radius: 6px;
-  color: #24292f;
-  -webkit-transition: background 33.333ms linear;
-  transition: background 33.333ms linear;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-.c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) {
-  margin-top: 0;
-}
-
-.c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) .c5::before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: 100%;
-  top: -7px;
-  border: 0 solid hsla(210,18%,87%,1);
-  border-top-width: 0;
-}
-
-.c4:hover .c5::before,
-.c4:hover + * .c5::before {
-  border-color: var(--item-hover-divider-border-color-override,transparent) !important;
-}
-
-.c4:focus .c5::before,
-.c4:focus + * .c5::before,
-.c4[data-is-active-descendant] .c5::before,
-[data-is-active-descendant] + .c4 .c5::before {
-  border-color: transparent !important;
-}
-
-.c4[data-is-active-descendant='activated-directly'] {
-  background: rgba(208,215,222,0.48);
-}
-
-.c4[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(208,215,222,0.32);
-}
-
-.c4:focus {
-  background: rgba(208,215,222,0.48);
-  outline: none;
-}
-
-.c4:active {
-  background: rgba(208,215,222,0.48);
-}
-
-.c1 {
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.c1[data-has-active-descendant],
-.c1:focus-within {
-  --item-hover-bg-override: none;
-  --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
-}
-
-@media (hover:hover) and (pointer:fine) {
-  .c4:hover {
-    background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
-    cursor: pointer;
-  }
-}
-
-<div
-    className="c0"
-  >
-    <div>
-      <div
-        aria-labelledby="labelId"
-        className="c1"
-        id="autocompleteId-listbox"
-        role="listbox"
-      >
-        <div
-          className="c2"
-        >
-          <div
-            aria-labelledby="react-aria-1"
-            className="c3 c4"
-            data-id={0}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-1"
-                >
-                  zero
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-3"
-            className="c3 c4"
-            data-id={1}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-3"
-                >
-                  one
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-5"
-            className="c3 c4"
-            data-id={2}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-5"
-                >
-                  two
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-7"
-            className="c3 c4"
-            data-id={3}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-7"
-                >
-                  three
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-9"
-            className="c3 c4"
-            data-id={4}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-9"
-                >
-                  four
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-11"
-            className="c3 c4"
-            data-id={5}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-11"
-                >
-                  five
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-13"
-            className="c3 c4"
-            data-id={6}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-13"
-                >
-                  six
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-15"
-            className="c3 c4"
-            data-id={7}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-15"
-                >
-                  seven
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-17"
-            className="c3 c4"
-            data-id={20}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-17"
-                >
-                  twenty
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-19"
-            className="c3 c4"
-            data-id={21}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-19"
-                >
-                  twentyone
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
-exports[`Autocomplete snapshots renders with a custom text input component 1`] = `
-Array [
-  <input
-    id="customInput"
-    type="text"
-  />,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c2 {
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 0;
-  position: relative;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c7 {
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 0;
-  -webkit-flex-direction: var(--main-content-flex-direction);
-  -ms-flex-direction: var(--main-content-flex-direction);
-  flex-direction: var(--main-content-flex-direction);
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c4 {
-  padding: 6px 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border-radius: 6px;
-  color: #24292f;
-  -webkit-transition: background 33.333ms linear;
-  transition: background 33.333ms linear;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-.c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) {
-  margin-top: 0;
-}
-
-.c4:not(:first-of-type):not(.c9 + .c3):not(.c8 + .c3) .c5::before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: 100%;
-  top: -7px;
-  border: 0 solid hsla(210,18%,87%,1);
-  border-top-width: 0;
-}
-
-.c4:hover .c5::before,
-.c4:hover + * .c5::before {
-  border-color: var(--item-hover-divider-border-color-override,transparent) !important;
-}
-
-.c4:focus .c5::before,
-.c4:focus + * .c5::before,
-.c4[data-is-active-descendant] .c5::before,
-[data-is-active-descendant] + .c4 .c5::before {
-  border-color: transparent !important;
-}
-
-.c4[data-is-active-descendant='activated-directly'] {
-  background: rgba(208,215,222,0.48);
-}
-
-.c4[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(208,215,222,0.32);
-}
-
-.c4:focus {
-  background: rgba(208,215,222,0.48);
-  outline: none;
-}
-
-.c4:active {
-  background: rgba(208,215,222,0.48);
-}
-
-.c1 {
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.c1[data-has-active-descendant],
-.c1:focus-within {
-  --item-hover-bg-override: none;
-  --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
-}
-
-@media (hover:hover) and (pointer:fine) {
-  .c4:hover {
-    background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
-    cursor: pointer;
-  }
-}
-
-<div
-    className="c0"
-  >
-    <div>
-      <div
-        aria-labelledby="labelId"
-        className="c1"
-        id="autocompleteId-listbox"
-        role="listbox"
-      >
-        <div
-          className="c2"
-        >
-          <div
-            aria-labelledby="react-aria-1"
-            className="c3 c4"
-            data-id={0}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-1"
-                >
-                  zero
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-3"
-            className="c3 c4"
-            data-id={1}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-3"
-                >
-                  one
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-5"
-            className="c3 c4"
-            data-id={2}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-5"
-                >
-                  two
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-7"
-            className="c3 c4"
-            data-id={3}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-7"
-                >
-                  three
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-9"
-            className="c3 c4"
-            data-id={4}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-9"
-                >
-                  four
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-11"
-            className="c3 c4"
-            data-id={5}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-11"
-                >
-                  five
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-13"
-            className="c3 c4"
-            data-id={6}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-13"
-                >
-                  six
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-15"
-            className="c3 c4"
-            data-id={7}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-15"
-                >
-                  seven
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-17"
-            className="c3 c4"
-            data-id={20}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-17"
-                >
-                  twenty
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-labelledby="react-aria-19"
-            className="c3 c4"
-            data-id={21}
-            onClick={[Function]}
-            onKeyPress={[Function]}
-            role="option"
-            tabIndex={-1}
-          >
-            <div
-              className="c5 c6"
-            >
-              <div
-                className="c7"
-                style={
-                  Object {
-                    "--main-content-flex-direction": "row",
-                  }
-                }
-              >
-                <span
-                  className=""
-                  id="react-aria-19"
-                >
-                  twentyone
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
-exports[`Autocomplete snapshots renders with an input value 1`] = `
-Array [
-  .c1 {
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-}
-
-.c1:focus {
-  outline: 0;
-}
-
-.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  min-height: 34px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #24292f;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  outline: none;
-  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
-  cursor: text;
-  padding: 6px 12px;
-}
-
-.c0 .TextInput-icon {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: #57606a;
-  margin: 0 8px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.c0:focus-within {
-  border-color: #0969da;
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
-}
-
-@media (min-width:768px) {
-  .c0 {
-    font-size: 14px;
-  }
-}
-
-<span
-    className="c0 TextInput-wrapper"
-  >
-    <input
-      aria-autocomplete="both"
-      aria-controls="autocompleteId-listbox"
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-owns="autocompleteId-listbox"
-      className="c1"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      role="combobox"
-      type="text"
-    />
-  </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.c1 {
-  padding: 16px;
-}
-
-<div
-    className="c0"
-  >
-    <div>
-      <div
-        className="c1"
-      >
-        No selectable options
-      </div>
-    </div>
-  </div>,
-]
-`;