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

exports[`preferences - closing-preferences given accessing preferences directly renders 1`] = `
<div>
  <div
    class="topBar"
  >
    <div
      class="items"
    >
      <i
        class="Icon material interactive focusable"
        data-testid="home-button"
        tabindex="0"
      >
        <span
          class="icon"
          data-icon-name="home"
        >
          home
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-back"
      >
        <span
          class="icon"
          data-icon-name="arrow_back"
        >
          arrow_back
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-forward"
      >
        <span
          class="icon"
          data-icon-name="arrow_forward"
        >
          arrow_forward
        </span>
      </i>
    </div>
    <div
      class="items"
    />
  </div>
  <div
    class="StatusBar"
  >
    <div
      class="leftSide"
    >
      <div
        class="item"
      >
        <div>
          No new updates available
        </div>
      </div>
    </div>
    <div
      class="rightSide"
    />
  </div>
  <div
    class="SettingLayout showNavigation Preferences"
    data-testid="application-preferences-page"
  >
    <nav
      class="sidebarRegion"
    >
      <div
        class="sidebar"
      >
        <div
          class="Tabs flex column"
        >
          <div
            class="header"
          >
            Preferences
          </div>
          <div
            class="Tab flex gaps align-center active"
            data-testid="tab-link-for-application"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              App
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-proxy"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Proxy
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-kubernetes"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Kubernetes
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-editor"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Editor
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-terminal"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Terminal
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-some-test-preference-navigation-item-id"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Some preference navigation item
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div
      class="contentRegion"
      id="ScrollSpyRoot"
    >
      <div
        class="content"
      >
        <section
          id="application"
        >
          <h2
            data-testid="application-header"
          >
            Application
          </h2>
          <section
            id="appearance"
          >
            <div
              class="SubTitle"
            >
              Theme
               
            </div>
            <div
              class="Select theme-lens css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-theme-input-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
              />
              <div
                class="Select__control css-1s2u09g-control"
              >
                <div
                  class="Select__value-container css-319lph-ValueContainer"
                >
                  <div
                    class="Select__placeholder css-14el2xx-placeholder"
                    id="react-select-theme-input-placeholder"
                  >
                    Select...
                  </div>
                  <div
                    class="Select__input-container css-6j8wv5-Input"
                    data-value=""
                  >
                    <input
                      aria-autocomplete="list"
                      aria-describedby="react-select-theme-input-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class="Select__input"
                      id="theme-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="Select__indicators css-1hb7zxy-IndicatorsContainer"
                >
                  <span
                    class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                  />
                  <div
                    aria-hidden="true"
                    class="Select__indicator Select__dropdown-indicator css-tlfecz-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>
          </section>
          <hr />
          <section
            id="extensionRegistryUrl"
          >
            <div
              class="SubTitle"
            >
              Extension Install Registry
               
            </div>
            <div
              class="Select theme-lens css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-extension-install-registry-input-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
              />
              <div
                class="Select__control css-1s2u09g-control"
              >
                <div
                  class="Select__value-container css-319lph-ValueContainer"
                >
                  <div
                    class="Select__placeholder css-14el2xx-placeholder"
                    id="react-select-extension-install-registry-input-placeholder"
                  >
                    Select...
                  </div>
                  <div
                    class="Select__input-container css-6j8wv5-Input"
                    data-value=""
                  >
                    <input
                      aria-autocomplete="list"
                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class="Select__input"
                      id="extension-install-registry-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="Select__indicators css-1hb7zxy-IndicatorsContainer"
                >
                  <span
                    class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                  />
                  <div
                    aria-hidden="true"
                    class="Select__indicator Select__dropdown-indicator css-tlfecz-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>
            <p
              class="mt-4 mb-5 leading-relaxed"
            >
              This setting is to change the registry URL for installing extensions by name. 
              If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your 
              <b>
                .npmrc
              </b>
               file or in the input below.
            </p>
            <div
              class="Input theme round black disabled invalid"
            >
              <label
                class="input-area flex gaps align-center"
                id=""
              >
                <input
                  class="input box grow"
                  disabled=""
                  placeholder="Custom Extension Registry URL..."
                  spellcheck="false"
                  value="some-custom-url"
                />
              </label>
              <div
                class="input-info flex gaps"
              />
            </div>
          </section>
          <hr />
          <section
            id="other"
          >
            <div
              class="SubTitle"
            >
              Start-up
               
            </div>
            <label
              class="Switch"
              data-testid="switch"
            >
              Automatically start Lens on login
              <input
                role="switch"
                type="checkbox"
              />
            </label>
          </section>
          <hr />
          <section
            id="update-channel"
          >
            <div
              class="SubTitle"
            >
              Update Channel
               
            </div>
            <div
              class="Select theme-lens css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-update-channel-input-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
              />
              <div
                class="Select__control css-1s2u09g-control"
              >
                <div
                  class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
                >
                  <div
                    class="Select__single-value css-qc6sy-singleValue"
                  >
                    Stable
                  </div>
                  <div
                    class="Select__input-container css-6j8wv5-Input"
                    data-value=""
                  >
                    <input
                      aria-autocomplete="list"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class="Select__input"
                      id="update-channel-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="Select__indicators css-1hb7zxy-IndicatorsContainer"
                >
                  <span
                    class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                  />
                  <div
                    aria-hidden="true"
                    class="Select__indicator Select__dropdown-indicator css-tlfecz-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>
          </section>
          <hr />
          <section
            id="locale"
          >
            <div
              class="SubTitle"
            >
              Locale Timezone
               
            </div>
            <div
              class="Select theme-lens css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-timezone-input-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
              />
              <div
                class="Select__control css-1s2u09g-control"
              >
                <div
                  class="Select__value-container css-319lph-ValueContainer"
                >
                  <div
                    class="Select__placeholder css-14el2xx-placeholder"
                    id="react-select-timezone-input-placeholder"
                  >
                    Select...
                  </div>
                  <div
                    class="Select__input-container css-6j8wv5-Input"
                    data-value=""
                  >
                    <input
                      aria-autocomplete="list"
                      aria-describedby="react-select-timezone-input-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class="Select__input"
                      id="timezone-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="Select__indicators css-1hb7zxy-IndicatorsContainer"
                >
                  <span
                    class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                  />
                  <div
                    aria-hidden="true"
                    class="Select__indicator Select__dropdown-indicator css-tlfecz-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>
          </section>
        </section>
      </div>
      <div
        class="toolsRegion"
      >
        <div
          class="fixed top-[60px]"
        >
          <div
            data-testid="close-preferences"
          >
            <div
              aria-label="Close"
              class="closeButton"
              role="button"
            >
              <i
                class="Icon icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="close"
                >
                  close
                </span>
              </i>
            </div>
            <div
              aria-hidden="true"
              class="esc"
            >
              ESC
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;

exports[`preferences - closing-preferences given accessing preferences directly when navigating to a tab in preferences renders 1`] = `
<div>
  <div
    class="topBar"
  >
    <div
      class="items"
    >
      <i
        class="Icon material interactive focusable"
        data-testid="home-button"
        tabindex="0"
      >
        <span
          class="icon"
          data-icon-name="home"
        >
          home
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-back"
      >
        <span
          class="icon"
          data-icon-name="arrow_back"
        >
          arrow_back
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-forward"
      >
        <span
          class="icon"
          data-icon-name="arrow_forward"
        >
          arrow_forward
        </span>
      </i>
    </div>
    <div
      class="items"
    />
  </div>
  <div
    class="StatusBar"
  >
    <div
      class="leftSide"
    >
      <div
        class="item"
      >
        <div>
          No new updates available
        </div>
      </div>
    </div>
    <div
      class="rightSide"
    />
  </div>
  <div
    class="SettingLayout showNavigation Preferences"
  >
    <nav
      class="sidebarRegion"
    >
      <div
        class="sidebar"
      >
        <div
          class="Tabs flex column"
        >
          <div
            class="header"
          >
            Preferences
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-application"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              App
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-proxy"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Proxy
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-kubernetes"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Kubernetes
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-editor"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Editor
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-terminal"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Terminal
            </div>
          </div>
          <div
            class="Tab flex gaps align-center active"
            data-testid="tab-link-for-some-test-preference-navigation-item-id"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Some preference navigation item
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div
      class="contentRegion"
      id="ScrollSpyRoot"
    >
      <div
        class="content"
      >
        Some test page
      </div>
      <div
        class="toolsRegion"
      >
        <div
          class="fixed top-[60px]"
        >
          <div
            data-testid="close-preferences"
          >
            <div
              aria-label="Close"
              class="closeButton"
              role="button"
            >
              <i
                class="Icon icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="close"
                >
                  close
                </span>
              </i>
            </div>
            <div
              aria-hidden="true"
              class="esc"
            >
              ESC
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;

exports[`preferences - closing-preferences given accessing preferences directly when navigating to a tab in preferences when preferences are closed renders 1`] = `
<div>
  <div
    class="topBar"
  >
    <div
      class="items"
    >
      <i
        class="Icon material interactive focusable"
        data-testid="home-button"
        tabindex="0"
      >
        <span
          class="icon"
          data-icon-name="home"
        >
          home
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-back"
      >
        <span
          class="icon"
          data-icon-name="arrow_back"
        >
          arrow_back
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-forward"
      >
        <span
          class="icon"
          data-icon-name="arrow_forward"
        >
          arrow_forward
        </span>
      </i>
    </div>
    <div
      class="items"
    />
  </div>
  <div
    class="StatusBar"
  >
    <div
      class="leftSide"
    >
      <div
        class="item"
      >
        <div>
          No new updates available
        </div>
      </div>
    </div>
    <div
      class="rightSide"
    />
  </div>
  <div>
    Some front page
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;

exports[`preferences - closing-preferences given accessing preferences directly when preferences are closed renders 1`] = `
<div>
  <div
    class="topBar"
  >
    <div
      class="items"
    >
      <i
        class="Icon material interactive focusable"
        data-testid="home-button"
        tabindex="0"
      >
        <span
          class="icon"
          data-icon-name="home"
        >
          home
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-back"
      >
        <span
          class="icon"
          data-icon-name="arrow_back"
        >
          arrow_back
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-forward"
      >
        <span
          class="icon"
          data-icon-name="arrow_forward"
        >
          arrow_forward
        </span>
      </i>
    </div>
    <div
      class="items"
    />
  </div>
  <div
    class="StatusBar"
  >
    <div
      class="leftSide"
    >
      <div
        class="item"
      >
        <div>
          No new updates available
        </div>
      </div>
    </div>
    <div
      class="rightSide"
    />
  </div>
  <div>
    Some front page
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;

exports[`preferences - closing-preferences given already in a page and then navigated to preferences renders 1`] = `
<div>
  <div
    class="topBar"
  >
    <div
      class="items"
    >
      <i
        class="Icon material interactive focusable"
        data-testid="home-button"
        tabindex="0"
      >
        <span
          class="icon"
          data-icon-name="home"
        >
          home
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-back"
      >
        <span
          class="icon"
          data-icon-name="arrow_back"
        >
          arrow_back
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-forward"
      >
        <span
          class="icon"
          data-icon-name="arrow_forward"
        >
          arrow_forward
        </span>
      </i>
    </div>
    <div
      class="items"
    />
  </div>
  <div
    class="StatusBar"
  >
    <div
      class="leftSide"
    >
      <div
        class="item"
      >
        <div>
          No new updates available
        </div>
      </div>
    </div>
    <div
      class="rightSide"
    />
  </div>
  <div
    class="SettingLayout showNavigation Preferences"
    data-testid="application-preferences-page"
  >
    <nav
      class="sidebarRegion"
    >
      <div
        class="sidebar"
      >
        <div
          class="Tabs flex column"
        >
          <div
            class="header"
          >
            Preferences
          </div>
          <div
            class="Tab flex gaps align-center active"
            data-testid="tab-link-for-application"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              App
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-proxy"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Proxy
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-kubernetes"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Kubernetes
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-editor"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Editor
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-terminal"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Terminal
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-some-test-preference-navigation-item-id"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Some preference navigation item
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div
      class="contentRegion"
      id="ScrollSpyRoot"
    >
      <div
        class="content"
      >
        <section
          id="application"
        >
          <h2
            data-testid="application-header"
          >
            Application
          </h2>
          <section
            id="appearance"
          >
            <div
              class="SubTitle"
            >
              Theme
               
            </div>
            <div
              class="Select theme-lens css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-theme-input-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
              />
              <div
                class="Select__control css-1s2u09g-control"
              >
                <div
                  class="Select__value-container css-319lph-ValueContainer"
                >
                  <div
                    class="Select__placeholder css-14el2xx-placeholder"
                    id="react-select-theme-input-placeholder"
                  >
                    Select...
                  </div>
                  <div
                    class="Select__input-container css-6j8wv5-Input"
                    data-value=""
                  >
                    <input
                      aria-autocomplete="list"
                      aria-describedby="react-select-theme-input-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class="Select__input"
                      id="theme-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="Select__indicators css-1hb7zxy-IndicatorsContainer"
                >
                  <span
                    class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                  />
                  <div
                    aria-hidden="true"
                    class="Select__indicator Select__dropdown-indicator css-tlfecz-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>
          </section>
          <hr />
          <section
            id="extensionRegistryUrl"
          >
            <div
              class="SubTitle"
            >
              Extension Install Registry
               
            </div>
            <div
              class="Select theme-lens css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-extension-install-registry-input-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
              />
              <div
                class="Select__control css-1s2u09g-control"
              >
                <div
                  class="Select__value-container css-319lph-ValueContainer"
                >
                  <div
                    class="Select__placeholder css-14el2xx-placeholder"
                    id="react-select-extension-install-registry-input-placeholder"
                  >
                    Select...
                  </div>
                  <div
                    class="Select__input-container css-6j8wv5-Input"
                    data-value=""
                  >
                    <input
                      aria-autocomplete="list"
                      aria-describedby="react-select-extension-install-registry-input-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class="Select__input"
                      id="extension-install-registry-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="Select__indicators css-1hb7zxy-IndicatorsContainer"
                >
                  <span
                    class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                  />
                  <div
                    aria-hidden="true"
                    class="Select__indicator Select__dropdown-indicator css-tlfecz-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>
            <p
              class="mt-4 mb-5 leading-relaxed"
            >
              This setting is to change the registry URL for installing extensions by name. 
              If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your 
              <b>
                .npmrc
              </b>
               file or in the input below.
            </p>
            <div
              class="Input theme round black disabled invalid"
            >
              <label
                class="input-area flex gaps align-center"
                id=""
              >
                <input
                  class="input box grow"
                  disabled=""
                  placeholder="Custom Extension Registry URL..."
                  spellcheck="false"
                  value="some-custom-url"
                />
              </label>
              <div
                class="input-info flex gaps"
              />
            </div>
          </section>
          <hr />
          <section
            id="other"
          >
            <div
              class="SubTitle"
            >
              Start-up
               
            </div>
            <label
              class="Switch"
              data-testid="switch"
            >
              Automatically start Lens on login
              <input
                role="switch"
                type="checkbox"
              />
            </label>
          </section>
          <hr />
          <section
            id="update-channel"
          >
            <div
              class="SubTitle"
            >
              Update Channel
               
            </div>
            <div
              class="Select theme-lens css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-update-channel-input-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
              />
              <div
                class="Select__control css-1s2u09g-control"
              >
                <div
                  class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
                >
                  <div
                    class="Select__single-value css-qc6sy-singleValue"
                  >
                    Stable
                  </div>
                  <div
                    class="Select__input-container css-6j8wv5-Input"
                    data-value=""
                  >
                    <input
                      aria-autocomplete="list"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class="Select__input"
                      id="update-channel-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="Select__indicators css-1hb7zxy-IndicatorsContainer"
                >
                  <span
                    class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                  />
                  <div
                    aria-hidden="true"
                    class="Select__indicator Select__dropdown-indicator css-tlfecz-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>
          </section>
          <hr />
          <section
            id="locale"
          >
            <div
              class="SubTitle"
            >
              Locale Timezone
               
            </div>
            <div
              class="Select theme-lens css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-timezone-input-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
              />
              <div
                class="Select__control css-1s2u09g-control"
              >
                <div
                  class="Select__value-container css-319lph-ValueContainer"
                >
                  <div
                    class="Select__placeholder css-14el2xx-placeholder"
                    id="react-select-timezone-input-placeholder"
                  >
                    Select...
                  </div>
                  <div
                    class="Select__input-container css-6j8wv5-Input"
                    data-value=""
                  >
                    <input
                      aria-autocomplete="list"
                      aria-describedby="react-select-timezone-input-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class="Select__input"
                      id="timezone-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="Select__indicators css-1hb7zxy-IndicatorsContainer"
                >
                  <span
                    class="Select__indicator-separator css-1okebmr-indicatorSeparator"
                  />
                  <div
                    aria-hidden="true"
                    class="Select__indicator Select__dropdown-indicator css-tlfecz-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>
          </section>
        </section>
      </div>
      <div
        class="toolsRegion"
      >
        <div
          class="fixed top-[60px]"
        >
          <div
            data-testid="close-preferences"
          >
            <div
              aria-label="Close"
              class="closeButton"
              role="button"
            >
              <i
                class="Icon icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="close"
                >
                  close
                </span>
              </i>
            </div>
            <div
              aria-hidden="true"
              class="esc"
            >
              ESC
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;

exports[`preferences - closing-preferences given already in a page and then navigated to preferences when navigating to a tab in preferences renders 1`] = `
<div>
  <div
    class="topBar"
  >
    <div
      class="items"
    >
      <i
        class="Icon material interactive focusable"
        data-testid="home-button"
        tabindex="0"
      >
        <span
          class="icon"
          data-icon-name="home"
        >
          home
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-back"
      >
        <span
          class="icon"
          data-icon-name="arrow_back"
        >
          arrow_back
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-forward"
      >
        <span
          class="icon"
          data-icon-name="arrow_forward"
        >
          arrow_forward
        </span>
      </i>
    </div>
    <div
      class="items"
    />
  </div>
  <div
    class="StatusBar"
  >
    <div
      class="leftSide"
    >
      <div
        class="item"
      >
        <div>
          No new updates available
        </div>
      </div>
    </div>
    <div
      class="rightSide"
    />
  </div>
  <div
    class="SettingLayout showNavigation Preferences"
  >
    <nav
      class="sidebarRegion"
    >
      <div
        class="sidebar"
      >
        <div
          class="Tabs flex column"
        >
          <div
            class="header"
          >
            Preferences
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-application"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              App
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-proxy"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Proxy
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-kubernetes"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Kubernetes
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-editor"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Editor
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-terminal"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Terminal
            </div>
          </div>
          <div
            class="Tab flex gaps align-center active"
            data-testid="tab-link-for-some-test-preference-navigation-item-id"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Some preference navigation item
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div
      class="contentRegion"
      id="ScrollSpyRoot"
    >
      <div
        class="content"
      >
        Some test page
      </div>
      <div
        class="toolsRegion"
      >
        <div
          class="fixed top-[60px]"
        >
          <div
            data-testid="close-preferences"
          >
            <div
              aria-label="Close"
              class="closeButton"
              role="button"
            >
              <i
                class="Icon icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="close"
                >
                  close
                </span>
              </i>
            </div>
            <div
              aria-hidden="true"
              class="esc"
            >
              ESC
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;

exports[`preferences - closing-preferences given already in a page and then navigated to preferences when navigating to a tab in preferences when preferences are closed renders 1`] = `
<div>
  <div
    class="topBar"
  >
    <div
      class="items"
    >
      <i
        class="Icon material interactive focusable"
        data-testid="home-button"
        tabindex="0"
      >
        <span
          class="icon"
          data-icon-name="home"
        >
          home
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-back"
      >
        <span
          class="icon"
          data-icon-name="arrow_back"
        >
          arrow_back
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-forward"
      >
        <span
          class="icon"
          data-icon-name="arrow_forward"
        >
          arrow_forward
        </span>
      </i>
    </div>
    <div
      class="items"
    />
  </div>
  <div
    class="StatusBar"
  >
    <div
      class="leftSide"
    >
      <div
        class="item"
      >
        <div>
          No new updates available
        </div>
      </div>
    </div>
    <div
      class="rightSide"
    />
  </div>
  <div
    class="SettingLayout showNavigation Preferences"
  >
    <nav
      class="sidebarRegion"
    >
      <div
        class="sidebar"
      >
        <div
          class="Tabs flex column"
        >
          <div
            class="header"
          >
            Preferences
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-application"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              App
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-proxy"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Proxy
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-kubernetes"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Kubernetes
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-editor"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Editor
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-terminal"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Terminal
            </div>
          </div>
          <div
            class="Tab flex gaps align-center active"
            data-testid="tab-link-for-some-test-preference-navigation-item-id"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Some preference navigation item
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div
      class="contentRegion"
      id="ScrollSpyRoot"
    >
      <div
        class="content"
      >
        Some test page
      </div>
      <div
        class="toolsRegion"
      >
        <div
          class="fixed top-[60px]"
        >
          <div
            data-testid="close-preferences"
          >
            <div
              aria-label="Close"
              class="closeButton"
              role="button"
            >
              <i
                class="Icon icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="close"
                >
                  close
                </span>
              </i>
            </div>
            <div
              aria-hidden="true"
              class="esc"
            >
              ESC
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;

exports[`preferences - closing-preferences given already in a page and then navigated to preferences when preferences are closed renders 1`] = `
<div>
  <div
    class="topBar"
  >
    <div
      class="items"
    >
      <i
        class="Icon material interactive focusable"
        data-testid="home-button"
        tabindex="0"
      >
        <span
          class="icon"
          data-icon-name="home"
        >
          home
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-back"
      >
        <span
          class="icon"
          data-icon-name="arrow_back"
        >
          arrow_back
        </span>
      </i>
      <i
        class="Icon material interactive disabled focusable"
        data-testid="history-forward"
      >
        <span
          class="icon"
          data-icon-name="arrow_forward"
        >
          arrow_forward
        </span>
      </i>
    </div>
    <div
      class="items"
    />
  </div>
  <div
    class="StatusBar"
  >
    <div
      class="leftSide"
    >
      <div
        class="item"
      >
        <div>
          No new updates available
        </div>
      </div>
    </div>
    <div
      class="rightSide"
    />
  </div>
  <div
    class="SettingLayout showNavigation Preferences"
  >
    <nav
      class="sidebarRegion"
    >
      <div
        class="sidebar"
      >
        <div
          class="Tabs flex column"
        >
          <div
            class="header"
          >
            Preferences
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-application"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              App
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-proxy"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Proxy
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-kubernetes"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Kubernetes
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-editor"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Editor
            </div>
          </div>
          <div
            class="Tab flex gaps align-center"
            data-testid="tab-link-for-terminal"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Terminal
            </div>
          </div>
          <div
            class="Tab flex gaps align-center active"
            data-testid="tab-link-for-some-test-preference-navigation-item-id"
            role="tab"
            tabindex="0"
          >
            <div
              class="label"
            >
              Some preference navigation item
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div
      class="contentRegion"
      id="ScrollSpyRoot"
    >
      <div
        class="content"
      >
        Some test page
      </div>
      <div
        class="toolsRegion"
      >
        <div
          class="fixed top-[60px]"
        >
          <div
            data-testid="close-preferences"
          >
            <div
              aria-label="Close"
              class="closeButton"
              role="button"
            >
              <i
                class="Icon icon material focusable"
              >
                <span
                  class="icon"
                  data-icon-name="close"
                >
                  close
                </span>
              </i>
            </div>
            <div
              aria-hidden="true"
              class="esc"
            >
              ESC
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;