FilterPicker:Custom Trigger Styling

This story threw an error after it finished rendering which means interactions may not have been executed fully.

TestingLibraryElementError: Found multiple elements with the role "button"

Here are the matching elements:

Ignored nodes: comments, script, style
<button
  aria-expanded="false"
  aria-label="Custom Trigger Styling"
  class="sc-jTQCzO fWtrcn"
  data-is-placeholder=""
  data-is-right-icon=""
  data-is-with-icons=""
  data-qa="FilterPickerTrigger"
  data-size="medium"
  data-theme="default"
  data-type="outline"
  type="button"
>
  <span
    class="sc-iuOOrT iMTxAH"
    data-is-ellipsis=""
    data-qa="Text"
    style="opacity: var(--disabled-opacity);"
  >
    Dashed Border Style
  </span>
  <span
    aria-hidden="true"
    class="sc-dmyCSP ixyYhe"
    data-direction="bottom"
    data-element="ButtonIcon"
    data-qa="UpIcon"
    style="rotate: 180deg; scale: 1;"
  >
    <svg
      class="tabler-icon tabler-icon-chevron-up "
      fill="none"
      height="24"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6 15l6 -6l6 6"
      />
    </svg>
  </span>
</button>

Ignored nodes: comments, script, style
<button
  aria-expanded="false"
  aria-label="Custom Trigger Styling"
  class="sc-jTQCzO fWtrcn"
  data-is-placeholder=""
  data-is-right-icon=""
  data-is-with-icons=""
  data-qa="FilterPickerTrigger"
  data-size="medium"
  data-theme="default"
  data-type="outline"
  type="button"
>
  <span
    class="sc-iuOOrT iMTxAH"
    data-is-ellipsis=""
    data-qa="Text"
    style="opacity: var(--disabled-opacity);"
  >
    Rounded Accent Style
  </span>
  <span
    aria-hidden="true"
    class="sc-dmyCSP ixyYhe"
    data-direction="bottom"
    data-element="ButtonIcon"
    data-qa="UpIcon"
    style="rotate: 180deg; scale: 1;"
  >
    <svg
      class="tabler-icon tabler-icon-chevron-up "
      fill="none"
      height="24"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6 15l6 -6l6 6"
      />
    </svg>
  </span>
</button>

Ignored nodes: comments, script, style
<button
  aria-expanded="false"
  aria-label="Custom Trigger Styling"
  class="sc-iBdnpw dVKxiD"
  data-is-placeholder=""
  data-is-right-icon=""
  data-is-with-icons=""
  data-qa="FilterPickerTrigger"
  data-size="medium"
  data-theme="default"
  data-type="clear"
  type="button"
>
  <span
    class="sc-iuOOrT iMTxAH"
    data-is-ellipsis=""
    data-qa="Text"
    style="opacity: var(--disabled-opacity);"
  >
    Minimal Border Style
  </span>
  <span
    aria-hidden="true"
    class="sc-dmyCSP ixyYhe"
    data-direction="bottom"
    data-element="ButtonIcon"
    data-qa="UpIcon"
    style="rotate: 180deg; scale: 1;"
  >
    <svg
      class="tabler-icon tabler-icon-chevron-up "
      fill="none"
      height="24"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6 15l6 -6l6 6"
      />
    </svg>
  </span>
</button>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

    at Object.getElementError (https://626ee6db91d1c8004a912249-zrllkqkxyk.capture-loopback.chromatic.com/assets/index-B_aYfNYG.js:190:284)
    at ka (https://626ee6db91d1c8004a912249-zrllkqkxyk.capture-loopback.chromatic.com/assets/index-B_aYfNYG.js:204:3474)
    at La (https://626ee6db91d1c8004a912249-zrllkqkxyk.capture-loopback.chromatic.com/assets/index-B_aYfNYG.js:204:3519)
    at https://626ee6db91d1c8004a912249-zrllkqkxyk.capture-loopback.chromatic.com/assets/index-B_aYfNYG.js:206:10
    at https://626ee6db91d1c8004a912249-zrllkqkxyk.capture-loopback.chromatic.com/assets/index-B_aYfNYG.js:212:386
    at d_.invoke (https://626ee6db91d1c8004a912249-zrllkqkxyk.capture-loopback.chromatic.com/assets/index-B_aYfNYG.js:48:8882)
    at d_.track (https://626ee6db91d1c8004a912249-zrllkqkxyk.capture-loopback.chromatic.com/assets/index-B_aYfNYG.js:48:5990)
    at Object.getByRole (https://626ee6db91d1c8004a912249-zrllkqkxyk.capture-loopback.chromatic.com/assets/index-B_aYfNYG.js:48:5262)
    at play (https://626ee6db91d1c8004a912249-zrllkqkxyk.capture-loopback.chromatic.com/assets/FilterPicker.stories-CmsJrbc4.js:228:29662)
    at https://626ee6db91d1c8004a912249-zrllkqkxyk.capture-loopback.chromatic.com/assets/iframe-CMFoQj4v.js:199:3793