// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`properties/person not readOnly, show firstname 1`] = `
<div>
  <div
    class="Person octo-propertyvalue css-b62m3t-container"
  >
    <span
      class="css-1f43avz-a11yText-A11yText"
      id="react-select-3-live-region"
    />
    <span
      aria-atomic="false"
      aria-live="polite"
      aria-relevant="additions text"
      class="css-1f43avz-a11yText-A11yText"
      role="log"
    />
    <div
      class="react-select__control css-18140j1-Control"
    >
      <div
        class="react-select__value-container react-select__value-container--has-value css-1gbdvdc-ValueContainer"
      >
        <div
          class="react-select__single-value css-qosd1h-singleValue"
        >
          <div
            class="Person-item"
          >
            test user
          </div>
        </div>
        <div
          class="react-select__input-container css-1p5v8kp-Input"
          data-value=""
        >
          <input
            aria-activedescendant=""
            aria-autocomplete="list"
            aria-expanded="false"
            aria-haspopup="true"
            autocapitalize="none"
            autocomplete="off"
            autocorrect="off"
            class="react-select__input"
            id="react-select-3-input"
            role="combobox"
            spellcheck="false"
            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
            tabindex="0"
            type="text"
            value=""
          />
        </div>
      </div>
      <div
        class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
      >
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__clear-indicator css-31haax-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
            />
          </svg>
        </div>
        <span
          class="react-select__indicator-separator css-1uei4ir-indicatorSeparator"
        />
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__dropdown-indicator css-uycnsi-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`properties/person not readOnly, show me 1`] = `
<div>
  <div
    class="Person octo-propertyvalue css-b62m3t-container"
  >
    <span
      class="css-1f43avz-a11yText-A11yText"
      id="react-select-7-live-region"
    />
    <span
      aria-atomic="false"
      aria-live="polite"
      aria-relevant="additions text"
      class="css-1f43avz-a11yText-A11yText"
      role="log"
    >
      <span
        id="aria-selection"
      />
      <span
        id="aria-focused"
      />
      <span
        id="aria-results"
      >
        4 results available.
      </span>
      <span
        id="aria-guidance"
      >
        Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
      </span>
    </span>
    <div
      class="react-select__control react-select__control--is-focused react-select__control--menu-is-open css-18140j1-Control"
    >
      <div
        class="react-select__value-container css-1gbdvdc-ValueContainer"
      >
        <div
          class="react-select__placeholder css-1jqq78o-placeholder"
          id="react-select-7-placeholder"
        >
          Empty
        </div>
        <div
          class="react-select__input-container css-1p5v8kp-Input"
          data-value=""
        >
          <input
            aria-activedescendant="react-select-7-option-0"
            aria-autocomplete="list"
            aria-controls="react-select-7-listbox"
            aria-describedby="react-select-7-placeholder"
            aria-expanded="true"
            aria-haspopup="true"
            autocapitalize="none"
            autocomplete="off"
            autocorrect="off"
            class="react-select__input"
            id="react-select-7-input"
            role="combobox"
            spellcheck="false"
            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
            tabindex="0"
            type="text"
            value=""
          />
        </div>
      </div>
      <div
        class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
      >
        <span
          class="react-select__indicator-separator css-1uei4ir-indicatorSeparator"
        />
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__dropdown-indicator css-zngtjc-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
            />
          </svg>
        </div>
      </div>
    </div>
    <div
      class="react-select__menu css-1slvcut-menu"
    >
      <div
        aria-multiselectable="false"
        class="react-select__menu-list css-1d1qzc4-MenuList"
        id="react-select-7-listbox"
        role="listbox"
      >
        <div
          aria-disabled="false"
          aria-selected="false"
          class="react-select__option react-select__option--is-focused css-63bi6m-option"
          id="react-select-7-option-0"
          role="option"
          tabindex="-1"
        >
          <div
            class="Person-item"
          >
            Me
          </div>
        </div>
        <div
          aria-disabled="false"
          aria-selected="false"
          class="react-select__option css-1uk8033-option"
          id="react-select-7-option-1"
          role="option"
          tabindex="-1"
        >
          <div
            class="Person-item"
          >
            username-1
          </div>
        </div>
        <div
          aria-disabled="false"
          aria-selected="false"
          class="react-select__option css-1uk8033-option"
          id="react-select-7-option-2"
          role="option"
          tabindex="-1"
        >
          <div
            class="Person-item"
          >
            username-2
          </div>
        </div>
        <div
          aria-disabled="false"
          aria-selected="false"
          class="react-select__option css-1uk8033-option"
          id="react-select-7-option-3"
          role="option"
          tabindex="-1"
        >
          <div
            class="Person-item"
          >
            username-3
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`properties/person not readOnly, show me 2`] = `
<div>
  <div
    class="Person octo-propertyvalue css-b62m3t-container"
  >
    <span
      class="css-1f43avz-a11yText-A11yText"
      id="react-select-7-live-region"
    />
    <span
      aria-atomic="false"
      aria-live="polite"
      aria-relevant="additions text"
      class="css-1f43avz-a11yText-A11yText"
      role="log"
    >
      <span
        id="aria-selection"
      />
      <span
        id="aria-focused"
      />
      <span
        id="aria-results"
      >
        4 results available.
      </span>
      <span
        id="aria-guidance"
      >
        Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
      </span>
    </span>
    <div
      class="react-select__control react-select__control--is-focused react-select__control--menu-is-open css-18140j1-Control"
    >
      <div
        class="react-select__value-container css-1gbdvdc-ValueContainer"
      >
        <div
          class="react-select__placeholder css-1jqq78o-placeholder"
          id="react-select-7-placeholder"
        >
          Empty
        </div>
        <div
          class="react-select__input-container css-1p5v8kp-Input"
          data-value=""
        >
          <input
            aria-activedescendant="react-select-7-option-0"
            aria-autocomplete="list"
            aria-controls="react-select-7-listbox"
            aria-describedby="react-select-7-placeholder"
            aria-expanded="true"
            aria-haspopup="true"
            autocapitalize="none"
            autocomplete="off"
            autocorrect="off"
            class="react-select__input"
            id="react-select-7-input"
            role="combobox"
            spellcheck="false"
            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
            tabindex="0"
            type="text"
            value=""
          />
        </div>
      </div>
      <div
        class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
      >
        <span
          class="react-select__indicator-separator css-1uei4ir-indicatorSeparator"
        />
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__dropdown-indicator css-zngtjc-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
            />
          </svg>
        </div>
      </div>
    </div>
    <div
      class="react-select__menu css-1slvcut-menu"
    >
      <div
        aria-multiselectable="false"
        class="react-select__menu-list css-1d1qzc4-MenuList"
        id="react-select-7-listbox"
        role="listbox"
      >
        <div
          aria-disabled="false"
          aria-selected="false"
          class="react-select__option react-select__option--is-focused css-63bi6m-option"
          id="react-select-7-option-0"
          role="option"
          tabindex="-1"
        >
          <div
            class="Person-item"
          >
            Me
          </div>
        </div>
        <div
          aria-disabled="false"
          aria-selected="false"
          class="react-select__option css-1uk8033-option"
          id="react-select-7-option-1"
          role="option"
          tabindex="-1"
        >
          <div
            class="Person-item"
          >
            username-1
          </div>
        </div>
        <div
          aria-disabled="false"
          aria-selected="false"
          class="react-select__option css-1uk8033-option"
          id="react-select-7-option-2"
          role="option"
          tabindex="-1"
        >
          <div
            class="Person-item"
          >
            username-2
          </div>
        </div>
        <div
          aria-disabled="false"
          aria-selected="false"
          class="react-select__option css-1uk8033-option"
          id="react-select-7-option-3"
          role="option"
          tabindex="-1"
        >
          <div
            class="Person-item"
          >
            username-3
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`properties/person not readOnly, show modal 1`] = `
<div>
  <div
    class="Person octo-propertyvalue css-b62m3t-container"
  >
    <span
      class="css-1f43avz-a11yText-A11yText"
      id="react-select-4-live-region"
    />
    <span
      aria-atomic="false"
      aria-live="polite"
      aria-relevant="additions text"
      class="css-1f43avz-a11yText-A11yText"
      role="log"
    />
    <div
      class="react-select__control css-18140j1-Control"
    >
      <div
        class="react-select__value-container css-1gbdvdc-ValueContainer"
      >
        <div
          class="react-select__placeholder css-1jqq78o-placeholder"
          id="react-select-4-placeholder"
        >
          Empty
        </div>
        <div
          class="react-select__input-container css-1p5v8kp-Input"
          data-value=""
        >
          <input
            aria-activedescendant=""
            aria-autocomplete="list"
            aria-describedby="react-select-4-placeholder"
            aria-expanded="false"
            aria-haspopup="true"
            autocapitalize="none"
            autocomplete="off"
            autocorrect="off"
            class="react-select__input"
            id="react-select-4-input"
            role="combobox"
            spellcheck="false"
            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
            tabindex="0"
            type="text"
            value=""
          />
        </div>
      </div>
      <div
        class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
      >
        <span
          class="react-select__indicator-separator css-1uei4ir-indicatorSeparator"
        />
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__dropdown-indicator css-uycnsi-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`properties/person not readOnly, show modal 2`] = `
<div>
  <div
    class="Person octo-propertyvalue css-b62m3t-container"
  >
    <span
      class="css-1f43avz-a11yText-A11yText"
      id="react-select-4-live-region"
    />
    <span
      aria-atomic="false"
      aria-live="polite"
      aria-relevant="additions text"
      class="css-1f43avz-a11yText-A11yText"
      role="log"
    >
      <span
        id="aria-selection"
      />
      <span
        id="aria-focused"
      />
      <span
        id="aria-results"
      >
        3 results available.
      </span>
      <span
        id="aria-guidance"
      >
        Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
      </span>
    </span>
    <div
      class="react-select__control react-select__control--is-focused react-select__control--menu-is-open css-18140j1-Control"
    >
      <div
        class="react-select__value-container css-1gbdvdc-ValueContainer"
      >
        <div
          class="react-select__placeholder css-1jqq78o-placeholder"
          id="react-select-4-placeholder"
        >
          Empty
        </div>
        <div
          class="react-select__input-container css-1p5v8kp-Input"
          data-value=""
        >
          <input
            aria-activedescendant="react-select-4-option-0"
            aria-autocomplete="list"
            aria-controls="react-select-4-listbox"
            aria-describedby="react-select-4-placeholder"
            aria-expanded="true"
            aria-haspopup="true"
            autocapitalize="none"
            autocomplete="off"
            autocorrect="off"
            class="react-select__input"
            id="react-select-4-input"
            role="combobox"
            spellcheck="false"
            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
            tabindex="0"
            type="text"
            value=""
          />
        </div>
      </div>
      <div
        class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
      >
        <span
          class="react-select__indicator-separator css-1uei4ir-indicatorSeparator"
        />
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__dropdown-indicator css-zngtjc-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
            />
          </svg>
        </div>
      </div>
    </div>
    <div
      class="react-select__menu css-1slvcut-menu"
    >
      <div
        aria-multiselectable="false"
        class="react-select__menu-list css-1d1qzc4-MenuList"
        id="react-select-4-listbox"
        role="listbox"
      >
        <div
          aria-disabled="false"
          aria-selected="false"
          class="react-select__option react-select__option--is-focused css-63bi6m-option"
          id="react-select-4-option-0"
          role="option"
          tabindex="-1"
        >
          <div
            class="Person-item"
          >
            username-1
          </div>
        </div>
        <div
          aria-disabled="false"
          aria-selected="false"
          class="react-select__option css-1uk8033-option"
          id="react-select-4-option-1"
          role="option"
          tabindex="-1"
        >
          <div
            class="Person-item"
          >
            username-2
          </div>
        </div>
        <div
          aria-disabled="false"
          aria-selected="false"
          class="react-select__option css-1uk8033-option"
          id="react-select-4-option-2"
          role="option"
          tabindex="-1"
        >
          <div
            class="Person-item"
          >
            username-3
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`properties/person not readOnly, show username 1`] = `
<div>
  <div
    class="Person octo-propertyvalue css-b62m3t-container"
  >
    <span
      class="css-1f43avz-a11yText-A11yText"
      id="react-select-2-live-region"
    />
    <span
      aria-atomic="false"
      aria-live="polite"
      aria-relevant="additions text"
      class="css-1f43avz-a11yText-A11yText"
      role="log"
    />
    <div
      class="react-select__control css-18140j1-Control"
    >
      <div
        class="react-select__value-container react-select__value-container--has-value css-1gbdvdc-ValueContainer"
      >
        <div
          class="react-select__single-value css-qosd1h-singleValue"
        >
          <div
            class="Person-item"
          >
            username-1
          </div>
        </div>
        <div
          class="react-select__input-container css-1p5v8kp-Input"
          data-value=""
        >
          <input
            aria-activedescendant=""
            aria-autocomplete="list"
            aria-expanded="false"
            aria-haspopup="true"
            autocapitalize="none"
            autocomplete="off"
            autocorrect="off"
            class="react-select__input"
            id="react-select-2-input"
            role="combobox"
            spellcheck="false"
            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
            tabindex="0"
            type="text"
            value=""
          />
        </div>
      </div>
      <div
        class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
      >
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__clear-indicator css-31haax-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
            />
          </svg>
        </div>
        <span
          class="react-select__indicator-separator css-1uei4ir-indicatorSeparator"
        />
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__dropdown-indicator css-uycnsi-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`properties/person readOnly view 1`] = `
<div>
  <div
    class="Person octo-propertyvalue octo-propertyvalue--readonly"
  >
    <div
      class="Person-item"
    >
      username-1
    </div>
  </div>
</div>
`;

exports[`properties/person show multiple 1`] = `
<div>
  <div
    class="MultiPerson octo-propertyvalue css-b62m3t-container"
  >
    <span
      class="css-1f43avz-a11yText-A11yText"
      id="react-select-5-live-region"
    />
    <span
      aria-atomic="false"
      aria-live="polite"
      aria-relevant="additions text"
      class="css-1f43avz-a11yText-A11yText"
      role="log"
    />
    <div
      class="react-select__control css-18140j1-Control"
    >
      <div
        class="react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-pcwdi-ValueContainer"
      >
        <div
          class="react-select__multi-value css-1p3m7a8-multiValue"
        >
          <div
            class="react-select__multi-value__label css-wsp0cs-MultiValueGeneric"
          >
            <div
              class="MultiPerson-item"
            >
              username-1
            </div>
          </div>
          <div
            aria-label="Remove [object Object]"
            class="react-select__multi-value__remove css-12a83d4-MultiValueRemove"
            role="button"
          >
            <svg
              aria-hidden="true"
              class="css-tj5bde-Svg"
              focusable="false"
              height="14"
              viewBox="0 0 20 20"
              width="14"
            >
              <path
                d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
              />
            </svg>
          </div>
        </div>
        <div
          class="react-select__multi-value css-1p3m7a8-multiValue"
        >
          <div
            class="react-select__multi-value__label css-wsp0cs-MultiValueGeneric"
          >
            <div
              class="MultiPerson-item"
            >
              username-2
            </div>
          </div>
          <div
            aria-label="Remove [object Object]"
            class="react-select__multi-value__remove css-12a83d4-MultiValueRemove"
            role="button"
          >
            <svg
              aria-hidden="true"
              class="css-tj5bde-Svg"
              focusable="false"
              height="14"
              viewBox="0 0 20 20"
              width="14"
            >
              <path
                d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
              />
            </svg>
          </div>
        </div>
        <div
          class="react-select__input-container css-1p5v8kp-Input"
          data-value=""
        >
          <input
            aria-activedescendant=""
            aria-autocomplete="list"
            aria-expanded="false"
            aria-haspopup="true"
            autocapitalize="none"
            autocomplete="off"
            autocorrect="off"
            class="react-select__input"
            id="react-select-5-input"
            role="combobox"
            spellcheck="false"
            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
            tabindex="0"
            type="text"
            value=""
          />
        </div>
      </div>
      <div
        class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
      >
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__clear-indicator css-31haax-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
            />
          </svg>
        </div>
        <span
          class="react-select__indicator-separator css-1uei4ir-indicatorSeparator"
        />
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__dropdown-indicator css-uycnsi-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`properties/person show multiple, display modal 1`] = `
<div>
  <div
    class="MultiPerson octo-propertyvalue css-b62m3t-container"
  >
    <span
      class="css-1f43avz-a11yText-A11yText"
      id="react-select-6-live-region"
    />
    <span
      aria-atomic="false"
      aria-live="polite"
      aria-relevant="additions text"
      class="css-1f43avz-a11yText-A11yText"
      role="log"
    />
    <div
      class="react-select__control css-18140j1-Control"
    >
      <div
        class="react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-pcwdi-ValueContainer"
      >
        <div
          class="react-select__multi-value css-1p3m7a8-multiValue"
        >
          <div
            class="react-select__multi-value__label css-wsp0cs-MultiValueGeneric"
          >
            <div
              class="MultiPerson-item"
            >
              username-1
            </div>
          </div>
          <div
            aria-label="Remove [object Object]"
            class="react-select__multi-value__remove css-12a83d4-MultiValueRemove"
            role="button"
          >
            <svg
              aria-hidden="true"
              class="css-tj5bde-Svg"
              focusable="false"
              height="14"
              viewBox="0 0 20 20"
              width="14"
            >
              <path
                d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
              />
            </svg>
          </div>
        </div>
        <div
          class="react-select__multi-value css-1p3m7a8-multiValue"
        >
          <div
            class="react-select__multi-value__label css-wsp0cs-MultiValueGeneric"
          >
            <div
              class="MultiPerson-item"
            >
              username-2
            </div>
          </div>
          <div
            aria-label="Remove [object Object]"
            class="react-select__multi-value__remove css-12a83d4-MultiValueRemove"
            role="button"
          >
            <svg
              aria-hidden="true"
              class="css-tj5bde-Svg"
              focusable="false"
              height="14"
              viewBox="0 0 20 20"
              width="14"
            >
              <path
                d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
              />
            </svg>
          </div>
        </div>
        <div
          class="react-select__input-container css-1p5v8kp-Input"
          data-value=""
        >
          <input
            aria-activedescendant=""
            aria-autocomplete="list"
            aria-expanded="false"
            aria-haspopup="true"
            autocapitalize="none"
            autocomplete="off"
            autocorrect="off"
            class="react-select__input"
            id="react-select-6-input"
            role="combobox"
            spellcheck="false"
            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
            tabindex="0"
            type="text"
            value=""
          />
        </div>
      </div>
      <div
        class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
      >
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__clear-indicator css-31haax-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
            />
          </svg>
        </div>
        <span
          class="react-select__indicator-separator css-1uei4ir-indicatorSeparator"
        />
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__dropdown-indicator css-uycnsi-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`properties/person show multiple, display modal 2`] = `
<div>
  <div
    class="MultiPerson octo-propertyvalue css-b62m3t-container"
  >
    <span
      class="css-1f43avz-a11yText-A11yText"
      id="react-select-6-live-region"
    />
    <span
      aria-atomic="false"
      aria-live="polite"
      aria-relevant="additions text"
      class="css-1f43avz-a11yText-A11yText"
      role="log"
    >
      <span
        id="aria-selection"
      />
      <span
        id="aria-focused"
      />
      <span
        id="aria-results"
      >
        1 result available.
      </span>
      <span
        id="aria-guidance"
      >
        Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
      </span>
    </span>
    <div
      class="react-select__control react-select__control--is-focused react-select__control--menu-is-open css-18140j1-Control"
    >
      <div
        class="react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-pcwdi-ValueContainer"
      >
        <div
          class="react-select__multi-value css-1p3m7a8-multiValue"
        >
          <div
            class="react-select__multi-value__label css-wsp0cs-MultiValueGeneric"
          >
            <div
              class="MultiPerson-item"
            >
              username-1
            </div>
          </div>
          <div
            aria-label="Remove [object Object]"
            class="react-select__multi-value__remove css-12a83d4-MultiValueRemove"
            role="button"
          >
            <svg
              aria-hidden="true"
              class="css-tj5bde-Svg"
              focusable="false"
              height="14"
              viewBox="0 0 20 20"
              width="14"
            >
              <path
                d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
              />
            </svg>
          </div>
        </div>
        <div
          class="react-select__multi-value css-1p3m7a8-multiValue"
        >
          <div
            class="react-select__multi-value__label css-wsp0cs-MultiValueGeneric"
          >
            <div
              class="MultiPerson-item"
            >
              username-2
            </div>
          </div>
          <div
            aria-label="Remove [object Object]"
            class="react-select__multi-value__remove css-12a83d4-MultiValueRemove"
            role="button"
          >
            <svg
              aria-hidden="true"
              class="css-tj5bde-Svg"
              focusable="false"
              height="14"
              viewBox="0 0 20 20"
              width="14"
            >
              <path
                d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
              />
            </svg>
          </div>
        </div>
        <div
          class="react-select__input-container css-1p5v8kp-Input"
          data-value=""
        >
          <input
            aria-activedescendant="react-select-6-option-2"
            aria-autocomplete="list"
            aria-controls="react-select-6-listbox"
            aria-expanded="true"
            aria-haspopup="true"
            autocapitalize="none"
            autocomplete="off"
            autocorrect="off"
            class="react-select__input"
            id="react-select-6-input"
            role="combobox"
            spellcheck="false"
            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
            tabindex="0"
            type="text"
            value=""
          />
        </div>
      </div>
      <div
        class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
      >
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__clear-indicator css-3pqe01-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
            />
          </svg>
        </div>
        <span
          class="react-select__indicator-separator css-1uei4ir-indicatorSeparator"
        />
        <div
          aria-hidden="true"
          class="react-select__indicator react-select__dropdown-indicator css-zngtjc-indicatorContainer"
        >
          <svg
            aria-hidden="true"
            class="css-tj5bde-Svg"
            focusable="false"
            height="20"
            viewBox="0 0 20 20"
            width="20"
          >
            <path
              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
            />
          </svg>
        </div>
      </div>
    </div>
    <div
      class="react-select__menu css-1slvcut-menu"
    >
      <div
        aria-multiselectable="true"
        class="react-select__menu-list react-select__menu-list--is-multi css-1d1qzc4-MenuList"
        id="react-select-6-listbox"
        role="listbox"
      >
        <div
          aria-disabled="false"
          aria-selected="false"
          class="react-select__option react-select__option--is-focused css-63bi6m-option"
          id="react-select-6-option-2"
          role="option"
          tabindex="-1"
        >
          <div
            class="MultiPerson-item"
          >
            username-3
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
