npm - @sproutsocial/racine - Versions diffs - 11.0.0-mixin-beta.0 → 11.0.1 - Mend

@sproutsocial/racine 11.0.0-mixin-beta.0 → 11.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/CHANGELOG.md +33 -0
package/__flow__/Listbox/index.test.js +0 -18
package/__flow__/Menu/__snapshots__/index.test.js.snap +4 -273
package/__flow__/Menu/index.js +11 -3
package/__flow__/Menu/index.stories.js +19 -1
package/__flow__/Menu/index.test.js +0 -4
package/__flow__/Menu/styles.js +11 -9
package/commonjs/Menu/index.js +20 -10
package/commonjs/Menu/styles.js +5 -5
package/lib/Menu/index.js +20 -10
package/lib/Menu/styles.js +6 -6
package/package.json +1 -1
package/__flow__/Listbox/__snapshots__/index.test.js.snap +0 -1316

package/__flow__/Listbox/__snapshots__/index.test.js.snap DELETED Viewed

@@ -1,1316 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Listbox AsListbox multiselect should match snapshot 1`] = `
-<body>
-  .c5 {
-  display: inline-block;
-  color: inherit;
-  vertical-align: middle;
-  line-height: 16px;
-}
-.c5,
-.c5 .Icon-svg {
-  height: 16px;
-  fill: currentColor;
-}
-.c5,
-.c5 .Icon-svg {
-  width: 16px;
-}
-_:-ms-fullscreen .c5,
-html .c5 {
-  width: 16px;
-}
-.pdf-page .c5 {
-  width: 16px;
-}
-.c1 {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  border-style: solid;
-  background: transparent;
-  color: #515e5f;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: 16px;
-  white-space: nowrap;
-  font-weight: 700;
-  -webkit-transition: all .15s linear;
-  transition: all .15s linear;
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-  min-width: 150px;
-}
-.c1:visited {
-  color: #515e5f;
-}
-.c1:hover {
-  color: #273333;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  box-shadow: none;
-}
-.c1:active {
-  color: #273333;
-  -webkit-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px);
-}
-.c1:focus {
-  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-  outline: none;
-}
-.c1:focus::-moz-focus-inner {
-  border: 0;
-}
-.c1:focus:active {
-  box-shadow: none;
-}
-.c1 .c4 {
-  vertical-align: text-bottom;
-}
-.c0 {
-  display: inline-block;
-}
-.c3 {
-  position: absolute;
-  top: 48%;
-  right: 12px;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-  color: #364141;
-  pointer-events: none;
-}
-.c2 {
-  position: relative;
-  width: 100%;
-  border: 1px solid #b0b6b7;
-  border-radius: 6px;
-  background-color: #FFFFFF;
-  color: #364141;
-  cursor: pointer;
-  outline: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-transition: border-color .15s cubic-bezier(.4,0,.7,.2),box-shadow .15s cubic-bezier(.4,0,.7,.2);
-  transition: border-color .15s cubic-bezier(.4,0,.7,.2),box-shadow .15s cubic-bezier(.4,0,.7,.2);
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  font-weight: 400;
-  text-align: left;
-  margin: 0;
-  padding: 8px 32px 8px 8px;
-  font-size: 13px;
-}
-.c2:active {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-<div>
-    <div
-      class="c0"
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-label="Favorite Fruit Select a fruit"
-        class="c1 c2"
-        data-qa-button=""
-        data-qa-button-isdisabled="false"
-        id="MenuButton-20"
-        type="button"
-      >
-        Select a fruit
-        <span
-          class="c3"
-        >
-          <span
-            class="c4 c5 Icon"
-            data-qa-icon="chevron-down"
-          >
-            <svg
-              class="Icon-svg"
-              focusable="false"
-              viewBox="0 0 16 18"
-            >
-              <use
-                xlink:href="#ssiconsvg-chevron-down"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              />
-            </svg>
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>
-</body>
-`;
-exports[`Listbox AsListbox should match snapshot 1`] = `
-.c6 {
-  display: inline-block;
-  color: inherit;
-  vertical-align: middle;
-  line-height: 16px;
-}
-.c6,
-.c6 .Icon-svg {
-  height: 16px;
-  fill: currentColor;
-}
-_:-ms-fullscreen .c6,
-html .c6 {
-  width: 16px;
-}
-.pdf-page .c6 {
-  width: 16px;
-}
-.c0 {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  border-style: solid;
-  background: #2079c3;
-  color: #FFFFFF;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: 16px;
-  white-space: nowrap;
-  font-weight: 700;
-  -webkit-transition: all .15s linear;
-  transition: all .15s linear;
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-  min-width: 100px;
-}
-.c0:visited {
-  color: #FFFFFF;
-}
-.c0:hover {
-  color: #FFFFFF;
-  background: #116daa;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  box-shadow: none;
-}
-.c0:active {
-  color: #FFFFFF;
-  background: #0c5689;
-  -webkit-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px);
-}
-.c0:focus {
-  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-  outline: none;
-}
-.c0:focus::-moz-focus-inner {
-  border: 0;
-}
-.c0:focus:active {
-  box-shadow: none;
-}
-.c0 .c5 {
-  vertical-align: text-bottom;
-}
-.c3 {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  border-style: solid;
-  background: #2079c3;
-  color: #FFFFFF;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: 16px;
-  white-space: nowrap;
-  font-weight: 700;
-  -webkit-transition: all .15s linear;
-  transition: all .15s linear;
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-}
-.c3:visited {
-  color: #FFFFFF;
-}
-.c3:hover {
-  color: #FFFFFF;
-  background: #116daa;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  box-shadow: none;
-}
-.c3:active {
-  color: #FFFFFF;
-  background: #0c5689;
-  -webkit-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px);
-}
-.c3:focus {
-  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-  outline: none;
-}
-.c3:focus::-moz-focus-inner {
-  border: 0;
-}
-.c3:focus:active {
-  box-shadow: none;
-}
-.c3 .c5 {
-  vertical-align: text-bottom;
-}
-.c2 {
-  display: inline-block;
-}
-.c1 {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 1px solid white;
-}
-.c4 {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-<body>
-  <div>
-    <button
-      class="c0 c1"
-      data-qa-button=""
-      data-qa-button-isdisabled="false"
-      type="button"
-    >
-      Select a fruit
-    </button>
-    <div
-      class="c2"
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-label="Select a fruit"
-        class="c3 c4"
-        data-qa-button=""
-        data-qa-button-isdisabled="false"
-        id="MenuButton-1"
-        type="button"
-      >
-        <span
-          class="c5 c6 Icon"
-          data-qa-icon="chevron-down"
-        >
-          <svg
-            class="Icon-svg"
-            focusable="false"
-            viewBox="0 0 16 18"
-          >
-            <use
-              xlink:href="#ssiconsvg-chevron-down"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-</body>
-`;
-exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
-<body>
-  .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  margin: 0px;
-  padding: 0px;
-  width: 200px;
-  overflow: hidden;
-}
-.c2 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  margin: 8px;
-  padding: 8px;
-}
-.c3 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-}
-.c6 {
-  display: block;
-  width: 100%;
-  border-radius: 6px;
-  background-color: transparent;
-  border: none;
-  text-align: left;
-  color: #364141;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  font-weight: 400;
-  padding: 6px 8px;
-  list-style-type: none;
-  outline: 0;
-  font-size: 13px;
-  line-height: 21.333333333333332px;
-}
-.c6:focus,
-.c6:hover {
-  color: #364141;
-  background-color: #f3f4f4;
-}
-.c6:focus .Icon-svg,
-.c6:hover .Icon-svg {
-  color: unset;
-}
-.c6:hover {
-  cursor: pointer;
-}
-.c4 {
-  display: block;
-  width: 100%;
-  border-radius: 6px;
-  background-color: transparent;
-  border: none;
-  text-align: left;
-  color: #364141;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  font-weight: 400;
-  padding: 6px 8px;
-  list-style-type: none;
-  outline: 0;
-  font-size: 13px;
-  line-height: 21.333333333333332px;
-  color: #FFFFFF;
-  background-color: #364141;
-}
-.c4 .Icon-svg {
-  color: #FFFFFF;
-}
-.c4:focus,
-.c4:hover {
-  color: #364141;
-  background-color: #f3f4f4;
-}
-.c4:focus .Icon-svg,
-.c4:hover .Icon-svg {
-  color: unset;
-}
-.c4:hover {
-  cursor: pointer;
-}
-.c1 {
-  list-style-type: none;
-  outline: 0;
-}
-.c5 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: border-box;
-  position: relative;
-  -webkit-transition: all .15s cubic-bezier(.4,0,.7,.2);
-  transition: all .15s cubic-bezier(.4,0,.7,.2);
-  margin-right: 8px;
-}
-@supports (-webkit-appearance:none) {
-  .c5:before {
-    content: url("data:image/svg+xml;utf8,<svg width='14' height='14' xmlns='http://www.w3.org/2000/svg'><path d='M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46' fill='%23b0b6b7'/></svg>");
-    opacity: 0;
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    text-align: center;
-    -webkit-transform: translateY(1px);
-    -ms-transform: translateY(1px);
-    transform: translateY(1px);
-    line-height: 1;
-    margin: auto;
-    pointer-events: none;
-    -webkit-transition: .15s cubic-bezier(.4,0,.2,1);
-    transition: .15s cubic-bezier(.4,0,.2,1);
-  }
-  .c5:hover:before {
-    opacity: 1;
-  }
-  .c5 input[type='checkbox'] {
-    box-sizing: border-box;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    margin: 0;
-    padding: 0;
-    width: 16px;
-    height: 16px;
-    border: 1px solid #b0b6b7;
-    border-radius: 4px;
-    background-color: #FFFFFF;
-    -webkit-transition: all .15s cubic-bezier(.4,0,.7,.2);
-    transition: all .15s cubic-bezier(.4,0,.7,.2);
-    cursor: pointer;
-    -webkit-flex-shrink: 0;
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-  }
-  .c5 input[type='checkbox']:not(:checked) {
-    border-color: #c8cccc !important;
-    background-color: #FFFFFF;
-  }
-  .c5 input[type='checkbox']:checked {
-    border-color: #364141;
-    background-color: #364141;
-  }
-  .c5 input[type='checkbox']:focus {
-    box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-    outline: none;
-  }
-  .c5 input[type='checkbox']:focus::-moz-focus-inner {
-    border: 0;
-  }
-}
-<div>
-    <ul
-      aria-activedescendant="MenuItem-28"
-      aria-multiselectable="true"
-      class="c0 c1"
-      overflow="hidden"
-      role="listbox"
-      tabindex="0"
-      width="200px"
-    >
-      <div
-        class="c2"
-        role="group"
-      >
-        <li
-          aria-checked="false"
-          class="c3 c4"
-          data-qa-menu-item="Apple"
-          data-value="Apple"
-          id="MenuItem-28"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Apple"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c5"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-28"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-28"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Apple
-            </div>
-          </div>
-        </li>
-        <li
-          aria-checked="false"
-          class="c3 c6"
-          data-qa-menu-item="Banana"
-          data-value="Banana"
-          id="MenuItem-29"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Banana"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c5"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-29"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-29"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Banana
-            </div>
-          </div>
-        </li>
-        <li
-          aria-checked="false"
-          class="c3 c6"
-          data-qa-menu-item="Orange"
-          data-value="Orange"
-          id="MenuItem-30"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Orange"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c5"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-30"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-30"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Orange
-            </div>
-          </div>
-        </li>
-      </div>
-    </ul>
-  </div>
-</body>
-`;
-exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
-<body>
-  .c0 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  margin: 0px;
-  padding: 0px;
-  width: 200px;
-  overflow: hidden;
-}
-.c2 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  margin: 8px;
-  padding: 8px;
-}
-.c4 {
-  box-sizing: border-box;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-}
-.c7 {
-  display: block;
-  width: 100%;
-  border-radius: 6px;
-  background-color: transparent;
-  border: none;
-  text-align: left;
-  color: #364141;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  font-weight: 400;
-  padding: 6px 8px;
-  list-style-type: none;
-  outline: 0;
-  font-size: 13px;
-  line-height: 21.333333333333332px;
-}
-.c7:focus,
-.c7:hover {
-  color: #364141;
-  background-color: #f3f4f4;
-}
-.c7:focus .Icon-svg,
-.c7:hover .Icon-svg {
-  color: unset;
-}
-.c7:hover {
-  cursor: pointer;
-}
-.c5 {
-  display: block;
-  width: 100%;
-  border-radius: 6px;
-  background-color: transparent;
-  border: none;
-  text-align: left;
-  color: #364141;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  font-weight: 400;
-  padding: 6px 8px;
-  list-style-type: none;
-  outline: 0;
-  font-size: 13px;
-  line-height: 21.333333333333332px;
-  color: #FFFFFF;
-  background-color: #364141;
-}
-.c5 .Icon-svg {
-  color: #FFFFFF;
-}
-.c5:focus,
-.c5:hover {
-  color: #364141;
-  background-color: #f3f4f4;
-}
-.c5:focus .Icon-svg,
-.c5:hover .Icon-svg {
-  color: unset;
-}
-.c5:hover {
-  cursor: pointer;
-}
-.c1 {
-  list-style-type: none;
-  outline: 0;
-}
-.c6 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: border-box;
-  position: relative;
-  -webkit-transition: all .15s cubic-bezier(.4,0,.7,.2);
-  transition: all .15s cubic-bezier(.4,0,.7,.2);
-  margin-right: 8px;
-}
-.c3 {
-  box-sizing: border-box;
-  position: relative;
-}
-.c3 input {
-  box-sizing: border-box;
-  width: 100%;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background-color: #FFFFFF;
-  color: #364141;
-  outline: none;
-  -webkit-transition: border-color .15s cubic-bezier(.4,0,.7,.2),box-shadow .15s cubic-bezier(.4,0,.7,.2);
-  transition: border-color .15s cubic-bezier(.4,0,.7,.2),box-shadow .15s cubic-bezier(.4,0,.7,.2);
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  font-weight: 400;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  line-height: 16px;
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-}
-.c3 input::-ms-clear {
-  display: none;
-}
-.c3 input::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-.c3 input:focus {
-  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-  outline: none;
-}
-.c3 input:focus::-moz-focus-inner {
-  border: 0;
-}
-.c3 input:not(output):not(:focus):-moz-ui-invalid {
-  box-shadow: none;
-}
-.c3 input:placeholder {
-  color: #6e797a;
-}
-.c3 input {
-  border: 1px solid #b0b6b7;
-}
-@supports (-webkit-appearance:none) {
-  .c6:before {
-    content: url("data:image/svg+xml;utf8,<svg width='14' height='14' xmlns='http://www.w3.org/2000/svg'><path d='M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46' fill='%23b0b6b7'/></svg>");
-    opacity: 0;
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    text-align: center;
-    -webkit-transform: translateY(1px);
-    -ms-transform: translateY(1px);
-    transform: translateY(1px);
-    line-height: 1;
-    margin: auto;
-    pointer-events: none;
-    -webkit-transition: .15s cubic-bezier(.4,0,.2,1);
-    transition: .15s cubic-bezier(.4,0,.2,1);
-  }
-  .c6:hover:before {
-    opacity: 1;
-  }
-  .c6 input[type='checkbox'] {
-    box-sizing: border-box;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    margin: 0;
-    padding: 0;
-    width: 16px;
-    height: 16px;
-    border: 1px solid #b0b6b7;
-    border-radius: 4px;
-    background-color: #FFFFFF;
-    -webkit-transition: all .15s cubic-bezier(.4,0,.7,.2);
-    transition: all .15s cubic-bezier(.4,0,.7,.2);
-    cursor: pointer;
-    -webkit-flex-shrink: 0;
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-  }
-  .c6 input[type='checkbox']:not(:checked) {
-    border-color: #c8cccc !important;
-    background-color: #FFFFFF;
-  }
-  .c6 input[type='checkbox']:checked {
-    border-color: #364141;
-    background-color: #364141;
-  }
-  .c6 input[type='checkbox']:focus {
-    box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-    outline: none;
-  }
-  .c6 input[type='checkbox']:focus::-moz-focus-inner {
-    border: 0;
-  }
-}
-<div>
-    <ul
-      aria-activedescendant="MenuItem-34"
-      aria-multiselectable="true"
-      class="c0 c1"
-      overflow="hidden"
-      role="listbox"
-      tabindex="0"
-      width="200px"
-    >
-      <div
-        class="c2"
-        role="group"
-      >
-        <div
-          class="c3"
-        >
-          <input
-            aria-invalid="false"
-            aria-label="Search fruit..."
-            data-qa-input="refineFruit"
-            data-qa-input-isdisabled="false"
-            data-qa-input-isrequired="false"
-            id="refineFruit"
-            name="refineFruit"
-            placeholder="Search fruit..."
-            type="text"
-            value=""
-          />
-        </div>
-        <li
-          aria-checked="false"
-          class="c4 c5"
-          data-qa-menu-item="Apple"
-          data-value="Apple"
-          id="MenuItem-34"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Apple"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c6"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-34"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-34"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Apple
-            </div>
-          </div>
-        </li>
-        <li
-          aria-checked="false"
-          class="c4 c7"
-          data-qa-menu-item="Banana"
-          data-value="Banana"
-          id="MenuItem-35"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Banana"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c6"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-35"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-35"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Banana
-            </div>
-          </div>
-        </li>
-        <li
-          aria-checked="false"
-          class="c4 c7"
-          data-qa-menu-item="Orange"
-          data-value="Orange"
-          id="MenuItem-36"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Orange"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c6"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-36"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-36"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Orange
-            </div>
-          </div>
-        </li>
-        <li
-          aria-checked="false"
-          class="c4 c7"
-          data-qa-menu-item="Tomato"
-          data-value="Tomato"
-          id="MenuItem-37"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Tomato"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c6"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-37"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-37"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Tomato
-            </div>
-          </div>
-        </li>
-        <li
-          aria-checked="false"
-          class="c4 c7"
-          data-qa-menu-item="Cucumber"
-          data-value="Cucumber"
-          id="MenuItem-38"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Cucumber"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c6"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-38"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-38"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Cucumber
-            </div>
-          </div>
-        </li>
-        <li
-          aria-checked="false"
-          class="c4 c7"
-          data-qa-menu-item="Squash"
-          data-value="Squash"
-          id="MenuItem-39"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Squash"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c6"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-39"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-39"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Squash
-            </div>
-          </div>
-        </li>
-        <li
-          aria-checked="false"
-          class="c4 c7"
-          data-qa-menu-item="Cantaloupe"
-          data-value="Cantaloupe"
-          id="MenuItem-40"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Cantaloupe"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c6"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-40"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-40"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Cantaloupe
-            </div>
-          </div>
-        </li>
-        <li
-          aria-checked="false"
-          class="c4 c7"
-          data-qa-menu-item="Jackalope"
-          data-value="Jackalope"
-          id="MenuItem-41"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Jackalope"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c6"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-41"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-41"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Jackalope
-            </div>
-          </div>
-        </li>
-        <li
-          aria-checked="false"
-          class="c4 c7"
-          data-qa-menu-item="Lingonberry"
-          data-value="Lingonberry"
-          id="MenuItem-42"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Lingonberry"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c6"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-42"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-42"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Lingonberry
-            </div>
-          </div>
-        </li>
-        <li
-          aria-checked="false"
-          class="c4 c7"
-          data-qa-menu-item="Dingleberry"
-          data-value="Dingleberry"
-          id="MenuItem-43"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Dingleberry"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c6"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-43"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-43"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Dingleberry
-            </div>
-          </div>
-        </li>
-        <li
-          aria-checked="false"
-          class="c4 c7"
-          data-qa-menu-item="Kaffir Lime"
-          data-value="Kaffir Lime"
-          id="MenuItem-44"
-          role="menuitemcheckbox"
-          tabindex="-1"
-          value="Kaffir Lime"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <span
-              aria-hidden="true"
-              class="c6"
-            >
-              <input
-                data-qa-checkbox="Checkbox-MenuItem-44"
-                data-qa-checkbox-ischecked="false"
-                data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-44"
-                tabindex="-1"
-                type="checkbox"
-                value=""
-              />
-            </span>
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Kaffir Lime
-            </div>
-          </div>
-        </li>
-      </div>
-    </ul>
-  </div>
-</body>
-`;