ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Material​Ui React Component Snippet Autocomplete

by Pushpam Kumar ALL

Materialui React Component Snippet and Autocomplete for Sublime Text

Labels material, react, component, snippet, autocomplete

Details

Installs

  • Total 4K
  • Win 3K
  • Mac 590
  • Linux 759
Dec 21 Dec 20 Dec 19 Dec 18 Dec 17 Dec 16 Dec 15 Dec 14 Dec 13 Dec 12 Dec 11 Dec 10 Dec 9 Dec 8 Dec 7 Dec 6 Dec 5 Dec 4 Dec 3 Dec 2 Dec 1 Nov 30 Nov 29 Nov 28 Nov 27 Nov 26 Nov 25 Nov 24 Nov 23 Nov 22 Nov 21 Nov 20 Nov 19 Nov 18 Nov 17 Nov 16 Nov 15 Nov 14 Nov 13 Nov 12 Nov 11 Nov 10 Nov 9 Nov 8 Nov 7 Nov 6
Windows 0 0 1 0 0 0 0 1 0 2 0 1 1 1 0 0 0 0 0 3 1 0 1 1 0 0 0 0 0 2 3 0 0 0 1 0 0 0 0 2 0 0 1 0 1 1
Mac 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1
Linux 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0

Readme

Source
github.​com

<!DOCTYPE html> <html lang=“en”

data-color-mode=“auto” data-light-theme=“light” data-dark-theme=“dark” data-a11y-animated-images=“system” data-a11y-link-underlines=“true”

<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-953961b66e63.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-4430d3c2c150.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-47b8b2ca21ae.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-e72829f5538b.css" />

<script crossorigin=“anonymous” defer=“defer” type=“application/javascript” src=“https://github.githubassets.com/assets/vendors-node_modules_github_auto-complete-element_dist_index_js-node_modules_github_catalyst-8e9f78-a74b4e0a8a6b.js”>

materialui-react-component-snippet-autocomplete/README.md at master · Pushpamk/materialui-react-component-snippet-autocomplete · GitHub 

<meta name="hovercard-subject-tag" content="repository:190377524" data-turbo-transient>


<meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I">


<meta name="user-login" content="">



<meta name="viewport" content="width=device-width">



  <meta name="description" content="Materialui React Component Snippet and Autocomplete for Sublime Text - materialui-react-component-snippet-autocomplete/README.md at master · Pushpamk/materialui-react-component-snippet-autocomplete">

  <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">

<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
<meta property="fb:app_id" content="1401488693436528">
<meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://github.com/Pushpamk/materialui-react-component-snippet-autocomplete/blob/master/README.md" />

  <meta name="twitter:image" content="https://opengraph.githubassets.com/0b4f8b4625784e8456fb1c5de634be2cbee4ea9424c5b42d847ea1ba1f4657b1/Pushpamk/materialui-react-component-snippet-autocomplete" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="materialui-react-component-snippet-autocomplete/README.md at master · Pushpamk/materialui-react-component-snippet-autocomplete" /><meta name="twitter:description" content="Materialui React Component Snippet and Autocomplete for Sublime Text - Pushpamk/materialui-react-component-snippet-autocomplete" />


<meta name="hostname" content="github.com">



    <meta name="expected-hostname" content="github.com">


<meta name="turbo-cache-control" content="no-cache" data-turbo-transient>

<meta data-hydrostats="publish">


<meta name="turbo-body-classes" content="logged-out env-production page-responsive">


<div class="position-relative header-wrapper js-header-wrapper ">
  <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a>

  <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full">
<span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span>


<script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ui-commands_ui-commands_ts-df3b47d86af0.js"></script>

<react-partial partial-name=“keyboard-shortcuts-dialog” data-ssr=“false” data-attempted-ssr=“false”

Navigation Menu

<a class="mr-lg-3 color-fg-inherit flex-order-2 js-prevent-focus-on-mobile-nav"
    href="/"
    aria-label="Homepage"
    data-analytics-event="{&quot;category&quot;:&quot;Marketing nav&quot;,&quot;action&quot;:&quot;click to go to homepage&quot;,&quot;label&quot;:&quot;ref_page:Marketing;ref_cta:Logomark;ref_loc:Header&quot;}">
    <svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github">
<path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path>


<div class="flex-1 flex-order-2 text-right">
      <a
        href="/login?return_to=https%3A%2F%2Fgithub.com%2FPushpamk%2Fmaterialui-react-component-snippet-autocomplete%2Fblob%2Fmaster%2FREADME.md"
        class="HeaderMenu-link HeaderMenu-button d-inline-flex d-lg-none flex-order-1 f5 no-underline border color-border-default rounded-2 px-2 py-1 color-fg-inherit js-prevent-focus-on-mobile-nav"
        data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;originating_url&quot;:&quot;https://github.com/Pushpamk/materialui-react-component-snippet-autocomplete/blob/master/README.md&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="6f4b99d493692802dd7f980721b32af0d674fbd2459cae4cbd886207a867bc1a"
        data-analytics-event="{&quot;category&quot;:&quot;Marketing nav&quot;,&quot;action&quot;:&quot;click to Sign in&quot;,&quot;label&quot;:&quot;ref_page:Marketing;ref_cta:Sign in;ref_loc:Header&quot;}"
      >
        Sign in
      </a>
  </div>
</div>


<div class="HeaderMenu js-header-menu height-fit position-lg-relative d-lg-flex flex-column flex-auto top-0">
  <div class="HeaderMenu-wrapper d-flex flex-column flex-self-start flex-lg-row flex-auto rounded rounded-lg-0">
      <nav class="HeaderMenu-nav" aria-label="Global">
        <ul class="d-lg-flex list-style-none">
            <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item">
  <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false">
    Product
    <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1">
<path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path>

  • GitHub Copilot
    Write better code with AI 

    • <li>


    <li>


    <li>


    <li>


    <li>


    <li>


    <li>


    </ul>
          </div>
      </div>
      <div class="HeaderMenu-column px-lg-4">
          <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0">
                <span class="d-block h4 color-fg-default my-1" id="product-explore-heading">Explore</span>
            <ul class="list-style-none f5" aria-labelledby="product-explore-heading">
                <li>

    All features

    <li>

    Documentation

    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle">
<path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path>


    <li>

    GitHub Skills

    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle">
<path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path>


    <li>

    Blog

    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle">
<path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path>


    </ul>
          </div>
      </div>
  </div>


    <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item">
  <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false">
    Solutions
    <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1">
<path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path>

    By company size
    • Enterprises 

      • <li>

      Small and medium teams

      <li>

      Startups

      </ul>
          </div>
          <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0">
                <span class="d-block h4 color-fg-default my-1" id="solutions-by-use-case-heading">By use case</span>
            <ul class="list-style-none f5" aria-labelledby="solutions-by-use-case-heading">
                <li>

      DevSecOps

      <li>

      DevOps

      <li>

      CI/CD

      <li>

      View all use cases

      </ul>
          </div>
      </div>
      <div class="HeaderMenu-column px-lg-4">
          <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0">
                <span class="d-block h4 color-fg-default my-1" id="solutions-by-industry-heading">By industry</span>
            <ul class="list-style-none f5" aria-labelledby="solutions-by-industry-heading">
                <li>

      Healthcare

      <li>

      Financial services

      <li>

      Manufacturing

      <li>

      Government

      <li>

      View all industries

      </ul>
          </div>
      </div>
     <div class="HeaderMenu-trailing-link rounded-bottom-2 flex-shrink-0 mt-lg-4 px-lg-4 py-4 py-lg-3 f5 text-semibold">
        <a href="/solutions">
          View all solutions
          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-right HeaderMenu-trailing-link-icon">
<path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path>


    <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item">
  <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false">
    Resources
    <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1">
<path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path>

    Topics
    • AI 

      • <li>

      DevOps

      <li>

      Security

      <li>

      Software Development

      <li>

      View all

      </ul>
          </div>
      </div>
      <div class="HeaderMenu-column px-lg-4">
          <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0">
                <span class="d-block h4 color-fg-default my-1" id="resources-explore-heading">Explore</span>
            <ul class="list-style-none f5" aria-labelledby="resources-explore-heading">
                <li>

      Learning Pathways

      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle">
<path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path>


      <li>

      White papers, Ebooks, Webinars

      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle">
<path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path>


      <li>

      Customer Stories

      <li>

      Partners

      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle">
<path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path>


      <li>

      Executive Insights

      </ul>
          </div>
      </div>
  </div>


      <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item">
  <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false">
    Open Source
    <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1">
<path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path>


      • <div>
    <div class="color-fg-default h4">GitHub Sponsors</div>
    Fund open source developers
  </div>


        • </ul>
          </div>
          <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3">
            <ul class="list-style-none f5" >
                <li>


        <div>
    <div class="color-fg-default h4">The ReadME Project</div>
    GitHub community articles
  </div>


        </ul>
          </div>
          <div class="border-bottom pb-3 pb-lg-0 border-bottom-0">
                <span class="d-block h4 color-fg-default my-1" id="open-source-repositories-heading">Repositories</span>
            <ul class="list-style-none f5" aria-labelledby="open-source-repositories-heading">
                <li>

        Topics

        <li>

        Trending

        <li>

        Collections

        </ul>
          </div>
      </div>
  </div>


        <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item">
  <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false">
    Enterprise
    <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1">
<path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path>

        • Enterprise platform
          AI-powered developer platform 

          • </ul>
          </div>
          <div class="border-bottom pb-3 pb-lg-0 border-bottom-0">
                <span class="d-block h4 color-fg-default my-1" id="enterprise-available-add-ons-heading">Available add-ons</span>
            <ul class="list-style-none f5" aria-labelledby="enterprise-available-add-ons-heading">
                <li>


          <li>


          <li>


          </ul>
          </div>
      </div>
  </div>


          <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item">
<a class="HeaderMenu-link no-underline px-0 px-lg-2 py-3 py-lg-2 d-block d-lg-inline-block" data-analytics-event="{&quot;location&quot;:&quot;navbar&quot;,&quot;action&quot;:&quot;pricing&quot;,&quot;context&quot;:&quot;global&quot;,&quot;tag&quot;:&quot;link&quot;,&quot;label&quot;:&quot;pricing_link_global_navbar&quot;}" href="https://github.com/pricing">Pricing</a>


          </ul>
      </nav>

    <div class="d-flex flex-column flex-lg-row width-full flex-justify-end flex-lg-items-center text-center mt-3 mt-lg-0 text-lg-left ml-lg-3">

          <div class=“search-input-container search-with-dialog position-relative d-flex flex-row flex-items-center mr-4 rounded” data-action=“click:qbsearch-input#searchInputContainerClicked”

          <button
    type="button"
    class="header-search-button placeholder  input-button form-control d-flex flex-1 flex-self-stretch flex-items-center no-wrap width-full py-0 pl-2 pr-0 text-left border-0 box-shadow-none"
    data-target="qbsearch-input.inputButton"
    aria-label="Search or jump to…"
    aria-haspopup="dialog"
    placeholder="Search or jump to..."
    data-hotkey=s,/
    autocapitalize="off"
    data-analytics-event="{&quot;location&quot;:&quot;navbar&quot;,&quot;action&quot;:&quot;searchbar&quot;,&quot;context&quot;:&quot;global&quot;,&quot;tag&quot;:&quot;input&quot;,&quot;label&quot;:&quot;searchbar_input_global_navbar&quot;}"
    data-action="click:qbsearch-input#handleExpand"
  >
    <div class="mr-2 color-fg-muted">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search">
<path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>

        Search or jump to… 
        </div>
  </button>

<input type="hidden" name="type" class="js-site-search-type-field">

        Search code, repositories, users, issues, pull requests…

        Clear
          Search syntax tips 
          </div>

          Provide feedback 

          </div>
<div class="Overlay-actionWrap">
  <button data-close-dialog-id="feedback-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>

          We read every piece of feedback, and take your input very seriously.

          <custom-scopes data-target="qbsearch-input.customScopesManager">

          Saved searches

          Use saved searches to filter your results more quickly

          <div hidden class="create-custom-scope-form" data-target="custom-scopes.createCustomScopeForm">
    </option></form><form id="custom-scopes-dialog-form" data-turbo="false" action="/search/custom_scopes" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="1OE9xWn/VimatI/IqUYhF7TVjCq9jhVUMrRCGWY2mIwMKo/1d6EDK5NNaXimhGNKFptyYr6rCfKxPJ41FN1A3A==" />
      <div data-target="custom-scopes.customScopesModalDialogFlash"></div>

      <input type="hidden" id="custom_scope_id" name="custom_scope_id" data-target="custom-scopes.customScopesIdField">

      <div class="form-group">
        <label for="custom_scope_name">Name</label>
        <auto-check src="/search/custom_scopes/check_name" required>
          <input
            type="text"
            name="custom_scope_name"
            id="custom_scope_name"
            data-target="custom-scopes.customScopesNameField"
            class="form-control"
            autocomplete="off"
            placeholder="github-ruby"
            required
            maxlength="50">
          <input type="hidden" data-csrf="true" value="kgPRgje9dvLk9Ltm4eSo/VN31nDf1bVFnYK9pC8qFN9Z5HYgE8xQiRsBjYruCBSIU8THBClEXJZRMlb2eDKVqA==" />
        </auto-check>
      </div>

      <div class="form-group">
        <label for="custom_scope_query">Query</label>
        <input
          type="text"
          name="custom_scope_query"
          id="custom_scope_query"
          data-target="custom-scopes.customScopesQueryField"
          class="form-control"
          autocomplete="off"
          placeholder="(repo:mona/a OR repo:mona/b) AND lang:python"
          required
          maxlength="500">
      </div>

      <p class="text-small color-fg-muted">
        To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>.
      </p>


          <div data-target="custom-scopes.manageCustomScopesForm">
      <div data-target="custom-scopes.list"></div>
    </div>


          <div class="position-relative HeaderMenu-link-wrap d-lg-inline-block">
          <a
            href="/login?return_to=https%3A%2F%2Fgithub.com%2FPushpamk%2Fmaterialui-react-component-snippet-autocomplete%2Fblob%2Fmaster%2FREADME.md"
            class="HeaderMenu-link HeaderMenu-link--sign-in HeaderMenu-button flex-shrink-0 no-underline d-none d-lg-inline-flex border border-lg-0 rounded rounded-lg-0 px-2 py-1"
            style="margin-left: 12px;"
            data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;originating_url&quot;:&quot;https://github.com/Pushpamk/materialui-react-component-snippet-autocomplete/blob/master/README.md&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="6f4b99d493692802dd7f980721b32af0d674fbd2459cae4cbd886207a867bc1a"
            data-analytics-event="{&quot;category&quot;:&quot;Marketing nav&quot;,&quot;action&quot;:&quot;click to go to homepage&quot;,&quot;label&quot;:&quot;ref_page:Marketing;ref_cta:Sign in;ref_loc:Header&quot;}"
          >
            Sign in
          </a>
        </div>

          <a href="/signup?ref_cta=Sign+up&amp;ref_loc=header+logged+out&amp;ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E%2Fblob%2Fshow&amp;source=header-repo&amp;source_repo=Pushpamk%2Fmaterialui-react-component-snippet-autocomplete"
            class="HeaderMenu-link HeaderMenu-link--sign-up HeaderMenu-button flex-shrink-0 d-flex d-lg-inline-flex no-underline border color-border-default rounded px-2 py-1"
            data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;originating_url&quot;:&quot;https://github.com/Pushpamk/materialui-react-component-snippet-autocomplete/blob/master/README.md&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="6f4b99d493692802dd7f980721b32af0d674fbd2459cae4cbd886207a867bc1a"
            data-analytics-event="{&quot;category&quot;:&quot;Sign up&quot;,&quot;action&quot;:&quot;click to sign up for account&quot;,&quot;label&quot;:&quot;ref_page:/&lt;user-name&gt;/&lt;repo-name&gt;/blob/show;ref_cta:Sign up;ref_loc:header logged out&quot;}"
          >
            Sign up
          </a>
      <button type="button" class="sr-only js-header-menu-focus-trap d-block d-lg-none">Reseting focus</button>
    </div>
  </div>
</div>


          <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full">

    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert">
<path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>

          You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

          <button id="icon-button-16225c96-b31a-43e2-8f0c-f71dfa2de5a7" aria-labelledby="tooltip-f1792e43-03d4-4180-80d1-36f37e65ca24" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual">
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>

          Dismiss alert

        <div id="js-flash-container" class="flash-container" data-turbo-replace>

        {{ message }}

        <div class=“application-main ” data-commit-hovercards-enabled data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled data-project-hovercards-enabled

        <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class="">
<main id="js-repo-pjax-container" >


        <div class="d-flex flex-nowrap flex-justify-end mb-3  px-3 px-lg-5" style="gap: 1rem;">

    <div class="flex-auto min-width-0 width-fit">


        <span class="author flex-self-stretch" itemprop="author">
  <a class="url fn" rel="author" data-hovercard-type="user" data-hovercard-url="/users/Pushpamk/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Pushpamk">
    Pushpamk

        / materialui-react-component-snippet-autocomplete 

        <span></span><span class="Label Label--secondary v-align-middle mr-1">Public</span>


        </div>

    <div id="repository-details-container" class="flex-shrink-0" data-turbo-replace style="max-width: 70%;">
        <ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;">

      • Notifications You must be signed in to change notification settings

      • Fork 1

      • Star 5 

        • </div>
  </div>

    <div id="responsive-meta-container" data-turbo-replace>


        <nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 px-md-4 px-lg-5">

        Additional navigation options 

        <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone">          <action-list>


        • <a tabindex="-1" id="item-92f63885-e7c9-4401-b1dd-c81edc98cf8e" href="/Pushpamk/materialui-react-component-snippet-autocomplete" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code">
<path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path>


          <span data-view-component="true" class="ActionListItem-label">
      Code



        • <a tabindex="-1" id="item-1a2d5de5-63a7-4883-a646-00aade1fa599" href="/Pushpamk/materialui-react-component-snippet-autocomplete/issues" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened">
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>


          <span data-view-component="true" class="ActionListItem-label">
      Issues



        • <a tabindex="-1" id="item-94f1f1d9-1a9c-4b4c-9acf-68bc3e5c851d" href="/Pushpamk/materialui-react-component-snippet-autocomplete/pulls" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request">
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path>


          <span data-view-component="true" class="ActionListItem-label">
      Pull requests



        • <a tabindex="-1" id="item-08c7bd6e-42c5-401b-85c9-8e55ece38909" href="/Pushpamk/materialui-react-component-snippet-autocomplete/actions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play">
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path>


          <span data-view-component="true" class="ActionListItem-label">
      Actions



        • <a tabindex="-1" id="item-f23d2888-8155-48dd-a82c-847adf4d595b" href="/Pushpamk/materialui-react-component-snippet-autocomplete/projects" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table">
<path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path>


          <span data-view-component="true" class="ActionListItem-label">
      Projects



        • <a tabindex="-1" id="item-78ef56bf-f8c0-400f-8018-24aefef999a8" href="/Pushpamk/materialui-react-component-snippet-autocomplete/security" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield">
<path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>


          <span data-view-component="true" class="ActionListItem-label">
      Security



        • <a tabindex="-1" id="item-572361b6-7022-43dc-95d2-a14d35b2b08a" href="/Pushpamk/materialui-react-component-snippet-autocomplete/pulse" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
    <span class="ActionListItem-visual ActionListItem-visual--leading">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph">
<path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path>


          <span data-view-component="true" class="ActionListItem-label">
      Insights



      <react-app app-name=“react-code-view” initial-path=“/Pushpamk/materialui-react-component-snippet-autocomplete/blob/master/README.md” style=“display: block; min-height: calc(100vh - 64px);” data-attempted-ssr=“true” data-ssr=“true” data-lazy=“false” data-alternate=“false”

      .hOfjFo{padding:0;}/!sc/ .oDGAe{max-width:100%;margin-left:auto;margin-right:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}/!sc/ .kowOcT{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;}/!sc/ .gISSDQ{width:100%;}/!sc/ @media screen and (min-width:544px){.gISSDQ{width:100%;}}/!sc/ @media screen and (min-width:768px){.gISSDQ{width:auto;}}/!sc/ .cEmWSE{display:none;-webkit-order:1;-ms-flex-order:1;order:1;width:100%;margin-left:0;margin-right:0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;margin-bottom:0;min-width:0;}/!sc/ @media screen and (min-width:768px){.cEmWSE{width:auto;margin-top:0 !important;margin-bottom:0 !important;position:-webkit-sticky;position:sticky;top:0px;max-height:100vh !important;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-right:0;height:100vh;}}/!sc/ @media print,screen and (max-width:1011px) and (min-width:768px){.cEmWSE{display:none;}}/!sc/ .hPvFuC{margin-left:0;margin-right:0;display:none;margin-top:0;}/!sc/ @media screen and (min-width:768px){.hPvFuC{margin-left:0 !important;margin-right:0 !important;}}/!sc/ .fFSoPl{–pane-min-width:256px;–pane-max-width-diff:511px;–pane-max-width:calc(100vw - var(–pane-max-width-diff));width:100%;padding:0;}/!sc/ @media screen and (min-width:544px){}/!sc/ @media screen and (min-width:768px){.fFSoPl{width:clamp(var(–pane-min-width),var(–pane-width),var(–pane-max-width));overflow:auto;}}/!sc/ @media screen and (min-width:1280px){.fFSoPl{–pane-max-width-diff:959px;}}/!sc/ .bTBnTW{height:100%;position:relative;display:none;margin-left:0;}/!sc/ .bHLmSv{position:absolute;inset:0 -2px;cursor:col-resize;background-color:transparent;-webkit-transition-delay:0.1s;transition-delay:0.1s;}/!sc/ .bHLmSv:hover{background-color:var(–bgColor-neutral-muted,var(–color-neutral-muted,rgba(175,184,193,0.2)));}/!sc/ .iKqMNA{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-order:2;-ms-flex-order:2;order:2;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;min-width:1px;margin-right:auto;}/!sc/ @media print{.iKqMNA{display:-webkit-box !important;display:-webkit-flex !important;display:-ms-flexbox !important;display:flex !important;}}/!sc/ .FxAyp{width:100%;max-width:100%;margin-left:auto;margin-right:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:0;}/!sc/ .leYMvG{margin-left:auto;margin-right:auto;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-bottom:40px;max-width:100%;margin-top:0;}/!sc/ .KMPzq{display:inherit;}/!sc/ .hfKjHv{width:100%;}/!sc/ .gZWyZE{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:8px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}/!sc/ .dwYKDk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;gap:8px;}/!sc/ .ibcGmb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;min-width:0;}/!sc/ .hKaEJF{display:block;margin-right:8px;}/!sc/ @media screen and (min-width:1360px){.hKaEJF{display:block;}}/!sc/ .XosP{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:14px;}/!sc/ .bCKfWo[data-size=“medium”]{color:var(–fgColor-muted,var(–color-fg-muted,#656d76));padding-left:8px;padding-right:8px;display:none;}/!sc/ @media screen and (max-width:768px){.bCKfWo[data-size=“medium”]{display:block;}}/!sc/ .gUkoLg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}/!sc/ .dmxRgG[data-size=“medium”]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/!sc/ .dmxRgG[data-size=“medium”] svg{color:var(–fgColor-muted,var(–color-fg-muted,#656d76));}/!sc/ .dmxRgG[data-size=“medium”] > span{width:inherit;}/!sc/ .bZBlpz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}/!sc/ .lhTYNA{margin-right:4px;color:var(–fgColor-muted,var(–color-fg-muted,#656d76));}/!sc/ .dbrgmi{font-size:14px;min-width:0;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/!sc/ .dHJiml{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;padding-right:8px;min-width:0;}/!sc/ .cEytCf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;font-size:16px;min-width:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/!sc/ .fzFXnm{max-width:100%;}/!sc/ .iMnkmv{max-width:100%;list-style:none;display:inline-block;}/!sc/ .ghzDag{display:inline-block;max-width:100%;}/!sc/ .kHuKdh{font-weight:600;}/!sc/ .jGhzSQ{font-weight:600;display:inline-block;max-width:100%;font-size:16px;}/!sc/ .faNtbn{min-height:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}/!sc/ .fmQaBv{margin-left:4px;margin-right:4px;}/!sc/ .dwNhzn[data-size=“medium”][data-no-visuals]{border-top-left-radius:0;border-bottom-left-radius:0;display:none;}/!sc/ .fGwBZA[data-size=“medium”][data-no-visuals]{color:var(–fgColor-muted,var(–color-fg-muted,#656d76));}/!sc/ .dJxjrT{margin-left:16px;margin-right:16px;}/!sc/ .eFxKDQ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}/!sc/ .dzCJzi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;min-width:273px;padding:8px;}/!sc/ @media screen and (min-width:544px){.dzCJzi{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}}/!sc/ .ldRxiI{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}/!sc/ .fVkfyA{width:100%;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;min-width:0;margin-right:0;}/!sc/ .gNAmSV{height:40px;padding-left:4px;padding-bottom:16px;}/!sc/ .jNEwzY{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/!sc/ .bsDwxw{font-size:12px;-webkit-flex:auto;-ms-flex:auto;flex:auto;padding-right:16px;color:var(–fgColor-muted,var(–color-fg-muted,#656d76));min-width:0;}/!sc/ .jdLMhu{top:0px;z-index:4;background:var(–bgColor-default,var(–color-canvas-default));position:-webkit-sticky;position:sticky;}/!sc/ .tOISc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;position:absolute;}/!sc/ .hqwSEx{display:none;min-width:0;padding-top:8px;padding-bottom:8px;}/!sc/ .bDVoEr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;margin-left:8px;margin-right:8px;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;width:100%;}/!sc/ .kYLlPM{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/!sc/ .gYjEmn{margin-left:4px;margin-right:8px;}/!sc/ .kGqOLL{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/!sc/ .fHind{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;font-size:14px;min-width:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/!sc/ .dnZoUW{font-weight:600;display:inline-block;max-width:100%;font-size:14px;}/!sc/ .jRZWlf[data-size=“small”]{color:var(–fgColor-default,var(–color-fg-default,#1F2328));margin-left:8px;}/!sc/ .kTvpNk{padding-left:8px;padding-top:8px;padding-bottom:8px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:var(–bgColor-muted,var(–color-canvas-subtle,#f6f8fa));border:1px solid var(–borderColor-default,var(–color-border-default));border-radius:6px 6px 0px 0px;}/!sc/ .iNMjfP{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;min-width:0;}/!sc/ .fefCSX{display:block;position:relative;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-top:-1px;margin-bottom:-1px;–separator-color:transparent;}/!sc/ .fefCSX:not(:last-child){margin-right:1px;}/!sc/ .fefCSX:not(:last-child):after{background-color:var(–separator-color);content:“”;position:absolute;right:-2px;top:8px;bottom:8px;width:1px;}/!sc/ .fefCSX:focus-within:has(:focus-visible){–separator-color:transparent;}/!sc/ .fefCSX:first-child{margin-left:-1px;}/!sc/ .fefCSX:last-child{margin-right:-1px;}/!sc/ .idgUkN{display:block;position:relative;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-top:-1px;margin-bottom:-1px;–separator-color:var(–borderColor-default,var(–color-border-default,#d0d7de));}/!sc/ .idgUkN:not(:last-child){margin-right:1px;}/!sc/ .idgUkN:not(:last-child):after{background-color:var(–separator-color);content:“”;position:absolute;right:-2px;top:8px;bottom:8px;width:1px;}/!sc/ .idgUkN:focus-within:has(:focus-visible){–separator-color:transparent;}/!sc/ .idgUkN:first-child{margin-left:-1px;}/!sc/ .idgUkN:last-child{margin-right:-1px;}/!sc/ .kcLCKF{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;margin-right:8px;}/!sc/ .kVWtTz{gap:8px;}/!sc/ .gWqxTd{padding-left:8px;padding-right:8px;}/!sc/ .gWqxTd linkButtonSx:hover:not([disabled]){-webkit-text-decoration:none;text-decoration:none;}/!sc/ .gWqxTd linkButtonSx:focus:not([disabled]){-webkit-text-decoration:none;text-decoration:none;}/!sc/ .gWqxTd linkButtonSx:active:not([disabled]){-webkit-text-decoration:none;text-decoration:none;}/!sc/ .ivobqY[data-size=“small”][data-no-visuals]{border-top-left-radius:0;border-bottom-left-radius:0;}/!sc/ .iNRSob[data-size=“small”][data-no-visuals]{color:var(–fgColor-muted,var(–color-fg-muted));margin-right:8px;}/!sc/ .ffkqe[data-size=“small”][data-no-visuals]{color:var(–fgColor-muted,var(–color-fg-muted,#656d76));}/!sc/ .hGyMdv{border:1px solid;border-top:none;border-color:var(–borderColor-default,var(–color-border-default,#d0d7de));border-radius:0px 0px 6px 6px;min-width:273px;}/!sc/ .fGqKFv{background-color:var(–bgColor-default,var(–color-canvas-default));border:0px;border-width:0;border-radius:0px 0px 6px 6px;padding:0;min-width:0;margin-top:46px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}/!sc/ .eoaCFS{border-bottom-left-radius:6px;border-bottom-right-radius:6px;padding:32px;min-width:0;}/!sc/ .cCoXib{position:fixed;top:0;right:0;height:100%;width:15px;-webkit-transition:-webkit-transform 0.3s;-webkit-transition:transform 0.3s;transition:transform 0.3s;z-index:1;}/!sc/ .cCoXib:hover{-webkit-transform:scaleX(1.5);-ms-transform:scaleX(1.5);transform:scaleX(1.5);}/!sc/ data-styled.g1[id=“Box-sc-g0xbh4-0”]{content:“hOfjFo,oDGAe,kowOcT,gISSDQ,cEmWSE,hPvFuC,fFSoPl,bTBnTW,bHLmSv,iKqMNA,FxAyp,leYMvG,KMPzq,hfKjHv,gZWyZE,dwYKDk,ibcGmb,hKaEJF,XosP,bCKfWo,gUkoLg,dmxRgG,bZBlpz,lhTYNA,dbrgmi,dHJiml,cEytCf,fzFXnm,iMnkmv,ghzDag,kHuKdh,jGhzSQ,faNtbn,fmQaBv,dwNhzn,fGwBZA,dJxjrT,eFxKDQ,dzCJzi,ldRxiI,fVkfyA,gNAmSV,jNEwzY,bsDwxw,jdLMhu,tOISc,hqwSEx,bDVoEr,kYLlPM,gYjEmn,kGqOLL,fHind,dnZoUW,jRZWlf,kTvpNk,iNMjfP,fefCSX,idgUkN,kcLCKF,kVWtTz,gWqxTd,ivobqY,iNRSob,ffkqe,hGyMdv,fGqKFv,eoaCFS,cCoXib,”}/!sc/ .eMMFM{min-width:0;}/!sc/ .eMMFM:where([data-size='small']){font-size:var(–text-body-size-small,0.75rem);line-height:var(–text-body-lineHeight-small,1.6666);}/!sc/ .eMMFM:where([data-size='medium']){font-size:var(–text-body-size-medium,0.875rem);line-height:var(–text-body-lineHeight-medium,1.4285);}/!sc/ .eMMFM:where([data-size='large']){font-size:var(–text-body-size-large,1rem);line-height:var(–text-body-lineHeight-large,1.5);}/!sc/ .eMMFM:where([data-weight='light']){font-weight:var(–base-text-weight-light,300);}/!sc/ .eMMFM:where([data-weight='normal']){font-weight:var(–base-text-weight-normal,400);}/!sc/ .eMMFM:where([data-weight='medium']){font-weight:var(–base-text-weight-medium,500);}/!sc/ .eMMFM:where([data-weight='semibold']){font-weight:var(–base-text-weight-semibold,600);}/!sc/ .HlHVj{padding-left:4px;padding-right:4px;font-weight:400;color:var(–fgColor-muted,var(–color-fg-muted,#656d76));font-size:16px;}/!sc/ .HlHVj:where([data-size='small']){font-size:var(–text-body-size-small,0.75rem);line-height:var(–text-body-lineHeight-small,1.6666);}/!sc/ .HlHVj:where([data-size='medium']){font-size:var(–text-body-size-medium,0.875rem);line-height:var(–text-body-lineHeight-medium,1.4285);}/!sc/ .HlHVj:where([data-size='large']){font-size:var(–text-body-size-large,1rem);line-height:var(–text-body-lineHeight-large,1.5);}/!sc/ .HlHVj:where([data-weight='light']){font-weight:var(–base-text-weight-light,300);}/!sc/ .HlHVj:where([data-weight='normal']){font-weight:var(–base-text-weight-normal,400);}/!sc/ .HlHVj:where([data-weight='medium']){font-weight:var(–base-text-weight-medium,500);}/!sc/ .HlHVj:where([data-weight='semibold']){font-weight:var(–base-text-weight-semibold,600);}/!sc/ .lauzFl{padding-left:4px;padding-right:4px;font-weight:400;color:var(–fgColor-muted,var(–color-fg-muted,#656d76));font-size:14px;}/!sc/ .lauzFl:where([data-size='small']){font-size:var(–text-body-size-small,0.75rem);line-height:var(–text-body-lineHeight-small,1.6666);}/!sc/ .lauzFl:where([data-size='medium']){font-size:var(–text-body-size-medium,0.875rem);line-height:var(–text-body-lineHeight-medium,1.4285);}/!sc/ .lauzFl:where([data-size='large']){font-size:var(–text-body-size-large,1rem);line-height:var(–text-body-lineHeight-large,1.5);}/!sc/ .lauzFl:where([data-weight='light']){font-weight:var(–base-text-weight-light,300);}/!sc/ .lauzFl:where([data-weight='normal']){font-weight:var(–base-text-weight-normal,400);}/!sc/ .lauzFl:where([data-weight='medium']){font-weight:var(–base-text-weight-medium,500);}/!sc/ .lauzFl:where([data-weight='semibold']){font-weight:var(–base-text-weight-semibold,600);}/!sc/ data-styled.g3[id=“TextStyledText-sc-17v1xeu-0”]{content:“eMMFM,HlHVj,lauzFl,”}/!sc/ .jkNcAv{border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;}/!sc/ .jkNcAv:focus{outline:0;}/!sc/ data-styled.g14[id=“UnstyledTextInputToggledUnstyledTextInput-sc-14ypya-0”]{content:“jkNcAv,”}/!sc/ .hLzFvi{font-size:14px;line-height:var(–base-size-20);color:var(–fgColor-default,var(–color-fg-default,#1F2328));vertical-align:middle;background-color:var(–bgColor-default,var(–color-canvas-default,#ffffff));border:1px solid var(–control-borderColor-rest,var(–borderColor-default,var(–color-border-default,#d0d7de)));border-radius:6px;outline:none;box-shadow:var(–shadow-inset,var(–color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-height:var(–base-size-32);overflow:hidden;–inner-action-size:var(–base-size-24);}/!sc/ .hLzFvi input,.hLzFvi textarea{cursor:text;}/!sc/ .hLzFvi select{cursor:pointer;}/!sc/ .hLzFvi input::-webkit-input-placeholder,.hLzFvi textarea::-webkit-input-placeholder,.hLzFvi select::-webkit-input-placeholder{color:var(—control-fgColor-placeholder,var(–fgColor-muted,var(–color-fg-muted,#656d76)));}/!sc/ .hLzFvi input::-moz-placeholder,.hLzFvi textarea::-moz-placeholder,.hLzFvi select::-moz-placeholder{color:var(—control-fgColor-placeholder,var(–fgColor-muted,var(–color-fg-muted,#656d76)));}/!sc/ .hLzFvi input:-ms-input-placeholder,.hLzFvi textarea:-ms-input-placeholder,.hLzFvi select:-ms-input-placeholder{color:var(—control-fgColor-placeholder,var(–fgColor-muted,var(–color-fg-muted,#656d76)));}/!sc/ .hLzFvi input::placeholder,.hLzFvi textarea::placeholder,.hLzFvi select::placeholder{color:var(—control-fgColor-placeholder,var(–fgColor-muted,var(–color-fg-muted,#656d76)));}/!sc/ .hLzFvi:where([data-trailing-action][data-focused]),.hLzFvi:where(:not([data-trailing-action]):focus-within){border-color:var(–fgColor-accent,var(–color-accent-fg,#0969da));outline:2px solid var(–fgColor-accent,var(–color-accent-fg,#0969da));outline-offset:-1px;}/!sc/ .hLzFvi > textarea{padding:var(–base-size-12);}/!sc/ .hLzFvi:where([data-contrast]){background-color:var(–bgColor-inset,var(–color-canvas-inset,#f6f8fa));}/!sc/ .hLzFvi:where([data-disabled]){color:var(–fgColor-disabled,var(–color-primer-fg-disabled,#8c959f));background-color:var(–control-bgColor-disabled,var(–color-input-disabled-bg,rgba(175,184,193,0.2)));box-shadow:none;border-color:var(–control-borderColor-disabled,var(–borderColor-default,var(–color-border-default,#d0d7de)));}/!sc/ .hLzFvi:where([data-disabled]) input,.hLzFvi:where([data-disabled]) textarea,.hLzFvi:where([data-disabled]) select{cursor:not-allowed;}/!sc/ .hLzFvi:where([data-monospace]){font-family:var(–fontStack-monospace,SFMono-Regular,Consolas,“Liberation Mono”,Menlo,Courier,monospace);}/!sc/ .hLzFvi:where([data-validation='error']){border-color:var(–borderColor-danger-emphasis,var(–color-danger-emphasis,#cf222e));}/!sc/ .hLzFvi:where([data-validation='error']):where([data-trailing-action][data-focused]),.hLzFvi:where([data-validation='error']):where(:not([data-trailing-action])):focus-within{border-color:var(–fgColor-accent,var(–color-accent-fg,#0969da));outline:2px solid var(–fgColor-accent,var(–color-accent-fg,#0969da));outline-offset:-1px;}/!sc/ .hLzFvi:where([data-validation='success']){border-color:var(–bgColor-success-emphasis,var(–color-success-emphasis,#1f883d));}/!sc/ .hLzFvi:where([data-block]){width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}/!sc/ @media (min-width:768px){.hLzFvi{font-size:var(–text-body-size-medium);}}/!sc/ .hLzFvi:where([data-size='small']){–inner-action-size:var(–base-size-20);min-height:var(–base-size-28);padding-top:3px;padding-right:var(–base-size-8);padding-bottom:3px;padding-left:var(–base-size-8);font-size:var(–text-body-size-small);line-height:var(–base-size-20);}/!sc/ .hLzFvi:where([data-size='large']){–inner-action-size:var(–base-size-28);height:var(–base-size-40);padding-top:10px;padding-right:var(–base-size-8);padding-bottom:10px;padding-left:var(–base-size-8);}/!sc/ .hLzFvi:where([data-variant='small']){min-height:28px;padding-top:3px;padding-right:var(–base-size-8);padding-bottom:3px;padding-left:var(–base-size-8);font-size:(–text-body-size-small);line-height:var(–base-size-20);}/!sc/ .hLzFvi:where([data-variant='large']){padding-top:10px;padding-right:var(–base-size-8);padding-bottom:10px;padding-left:var(–base-size-8);font-size:var(–text-title-size-medium);}/!sc/ .hLzFvi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:160px;}/!sc/ data-styled.g15[id=“TextInputWrapperStyledTextInputBaseWrapper-sc-1mqhpbi-0”]{content:“hLzFvi,”}/!sc/ .iHYdQq{background-repeat:no-repeat;background-position:right 8px center;padding-right:0;padding-left:0;}/!sc/ .iHYdQq > :not(:last-child){margin-right:8px;}/!sc/ .iHYdQq .TextInput-icon,.iHYdQq .TextInput-action{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;color:var(–fgColor-muted,var(–color-fg-muted,#656d76));-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}/!sc/ .iHYdQq > input,.iHYdQq > select{padding-right:0;padding-left:0;}/!sc/ .iHYdQq:where([data-leading-visual]){padding-left:var(–base-size-12);}/!sc/ .iHYdQq:where([data-trailing-visual]:not([data-trailing-action])){padding-right:var(–base-size-12);}/!sc/ .iHYdQq:where(:not([data-leading-visual])) > input,.iHYdQq:where(:not([data-leading-visual])) > select{padding-left:var(–base-size-12);}/!sc/ .iHYdQq:where(:not([data-trailing-visual]):not([data-trailing-action])) > input,.iHYdQq:where(:not([data-trailing-visual]):not([data-trailing-action])) > select{padding-right:var(–base-size-12);}/!sc/ .iHYdQq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:160px;}/!sc/ data-styled.g16[id=“TextInputWrapperStyledTextInputWrapper-sc-1mqhpbi-1”]{content:“iHYdQq,”}/!sc/ .hWlpPn{position:relative;display:inline-block;}/!sc/ .hWlpPn::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,“Segoe UI”,“Noto Sans”,Helvetica,Arial,sans-serif,“Apple Color Emoji”,“Segoe UI Emoji”;-webkit-font-smoothing:subpixel-antialiased;color:var(–tooltip-fgColor,var(–fgColor-onEmphasis,var(–color-fg-on-emphasis,#ffffff)));text-align:center;-webkit-text-decoration:none;text-decoration:none;text-shadow:none;text-transform:none;-webkit-letter-spacing:normal;-moz-letter-spacing:normal;-ms-letter-spacing:normal;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(–tooltip-bgColor,var(–bgColor-emphasis,var(–color-neutral-emphasis-plus,#24292f)));border-radius:6px;opacity:0;}/!sc/ @-webkit-keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/!sc/ @keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/!sc/ .hWlpPn:hover::after,.hWlpPn:active::after,.hWlpPn:focus::after,.hWlpPn:focus-within::after{display:inline-block;-webkit-text-decoration:none;text-decoration:none;-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/!sc/ .hWlpPn.tooltipped-no-delay:hover::after,.hWlpPn.tooltipped-no-delay:active::after,.hWlpPn.tooltipped-no-delay:focus::after,.hWlpPn.tooltipped-no-delay:focus-within::after{-webkit-animation-delay:0s;animation-delay:0s;}/!sc/ .hWlpPn.tooltipped-multiline:hover::after,.hWlpPn.tooltipped-multiline:active::after,.hWlpPn.tooltipped-multiline:focus::after,.hWlpPn.tooltipped-multiline:focus-within::after{display:table-cell;}/!sc/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-se::after,.hWlpPn.tooltipped-sw::after{top:100%;right:50%;margin-top:6px;}/!sc/ .hWlpPn.tooltipped-se::after{right:auto;left:50%;margin-left:-16px;}/!sc/ .hWlpPn.tooltipped-sw::after{margin-right:-16px;}/!sc/ .hWlpPn.tooltipped-n::after,.hWlpPn.tooltipped-ne::after,.hWlpPn.tooltipped-nw::after{right:50%;bottom:100%;margin-bottom:6px;}/!sc/ .hWlpPn.tooltipped-ne::after{right:auto;left:50%;margin-left:-16px;}/!sc/ .hWlpPn.tooltipped-nw::after{margin-right:-16px;}/!sc/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-n::after{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}/!sc/ .hWlpPn.tooltipped-w::after{right:100%;bottom:50%;margin-right:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/!sc/ .hWlpPn.tooltipped-e::after{bottom:50%;left:100%;margin-left:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/!sc/ .hWlpPn.tooltipped-multiline::after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}/!sc/ .hWlpPn.tooltipped-multiline.tooltipped-s::after,.hWlpPn.tooltipped-multiline.tooltipped-n::after{right:auto;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}/!sc/ .hWlpPn.tooltipped-multiline.tooltipped-w::after,.hWlpPn.tooltipped-multiline.tooltipped-e::after{right:100%;}/!sc/ .hWlpPn.tooltipped-align-right-2::after{right:0;margin-right:0;}/!sc/ .hWlpPn.tooltipped-align-left-2::after{left:0;margin-left:0;}/!sc/ data-styled.g18[id=“TooltipTooltipBase-sc-17tf59c-0”]{content:“hWlpPn,”}/!sc/ .eAtkQz{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap;max-width:125px;max-width:100%;}/!sc/ data-styled.g20[id=“TruncateStyledTruncate-sc-23o1d2-0”]{content:“eAtkQz,”}/!sc/ body[data-page-layout-dragging=“true”]{cursor:col-resize;}/!sc/ body[data-page-layout-dragging=“true”] {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}/!sc/ data-styled.g102[id=“sc-global-gbKrvU1”]{content:“sc-global-gbKrvU1,”}/!sc/ .lirRhW{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;isolation:isolate;}/!sc/ .lirRhW.lirRhW > *:not([data-loading-wrapper]){margin-inline-end:-1px;position:relative;border-radius:0;}/!sc/ .lirRhW.lirRhW > *:not([data-loading-wrapper]):first-child{border-top-left-radius:6px;border-bottom-left-radius:6px;}/!sc/ .lirRhW.lirRhW > *:not([data-loading-wrapper]):last-child{border-top-right-radius:6px;border-bottom-right-radius:6px;}/!sc/ .lirRhW.lirRhW > *:not([data-loading-wrapper]):focus,.lirRhW.lirRhW > *:not([data-loading-wrapper]):active,.lirRhW.lirRhW > *:not([data-loading-wrapper]):hover{z-index:1;}/!sc/ .lirRhW [data-loading-wrapper]:first-child button,.lirRhW [data-loading-wrapper]:first-child a{border-top-left-radius:6px;border-bottom-left-radius:6px;}/!sc/ .lirRhW [data-loading-wrapper]:last-child button,.lirRhW [data-loading-wrapper]:last-child a{border-top-right-radius:6px;border-bottom-right-radius:6px;}/!sc/ .lirRhW [data-loading-wrapper] > *{margin-inline-end:-1px;position:relative;border-radius:0;}/!sc/ .lirRhW [data-loading-wrapper] > *:focus,.lirRhW [data-loading-wrapper] > *:active,.lirRhW [data-loading-wrapper] > *:hover{z-index:1;}/!sc*/ data-styled.g107[id=“ButtonGroupStyledButtonGroup-sc-1gxhls1-0”]{content:“lirRhW,”}/!sc/ .dwImxt{–segmented-control-button-inner-padding:12px;–segmented-control-button-bg-inset:4px;–segmented-control-outer-radius:6px;background-color:transparent;border-color:transparent;border-radius:var(–segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:600;padding:0;height:100%;width:100%;}/!sc/ .dwImxt:focus:not(:disabled){box-shadow:none;outline:2px solid var(–fgColor-accent,var(–color-accent-fg,#0969da));outline-offset:-1px;}/!sc/ .dwImxt:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/!sc/ .dwImxt:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(–fgColor-accent,var(–color-accent-fg,#0969da));outline-offset:-1px;}/!sc/ .dwImxt .segmentedControl-content{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(–controlKnob-bgColor-rest,var(–color-segmented-control-button-bg,#ffffff));border-color:var(–controlKnob-borderColor-rest,var(–color-segmented-control-button-hover-active-selected-border,#8c959f));border-style:solid;border-width:1px;border-radius:var(–segmented-control-outer-radius);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-left:var(–segmented-control-button-inner-padding);padding-right:var(–segmented-control-button-inner-padding);}/!sc/ .dwImxt svg{fill:var(–fgColor-muted,var(–color-fg-muted,#656d76));}/!sc/ .dwImxt:focus:focus-visible:not(:last-child):after{width:0;}/!sc/ .dwImxt .segmentedControl-text:after{content:“Preview”;display:block;font-weight:600;height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;}/!sc/ @media (pointer:coarse){.dwImxt:before{content:“”;position:absolute;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:50%;min-height:44px;}}/!sc/ .iFTkun{–segmented-control-button-inner-padding:12px;–segmented-control-button-bg-inset:4px;–segmented-control-outer-radius:6px;background-color:transparent;border-color:transparent;border-radius:var(–segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:400;padding:var(–segmented-control-button-bg-inset);height:100%;width:100%;}/!sc/ .iFTkun:focus:not(:disabled){box-shadow:none;outline:2px solid var(–fgColor-accent,var(–color-accent-fg,#0969da));outline-offset:-1px;}/!sc/ .iFTkun:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/!sc/ .iFTkun:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(–fgColor-accent,var(–color-accent-fg,#0969da));outline-offset:-1px;}/!sc/ .iFTkun .segmentedControl-content{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border-color:transparent;border-style:solid;border-width:1px;border-radius:calc(var(–segmented-control-outer-radius) - var(–segmented-control-button-bg-inset) / 2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-left:calc(var(–segmented-control-button-inner-padding) - var(–segmented-control-button-bg-inset));padding-right:calc(var(–segmented-control-button-inner-padding) - var(–segmented-control-button-bg-inset));}/!sc/ .iFTkun svg{fill:var(–fgColor-muted,var(–color-fg-muted,#656d76));}/!sc/ .iFTkun:hover .segmentedControl-content{background-color:var(–controlTrack-bgColor-hover,var(–color-segmented-control-button-hover-bg,rgba(175,184,193,0.2)));}/!sc/ .iFTkun:active .segmentedControl-content{background-color:var(–controlTrack-bgColor-active,var(–color-segmented-control-button-hover-active-bg,rgba(175,184,193,0.4)));}/!sc/ .iFTkun:focus:focus-visible:not(:last-child):after{width:0;}/!sc/ .iFTkun .segmentedControl-text:after{content:“Code”;display:block;font-weight:600;height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;}/!sc/ @media (pointer:coarse){.iFTkun:before{content:“”;position:absolute;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:50%;min-height:44px;}}/!sc/ .bHmvop{–segmented-control-button-inner-padding:12px;–segmented-control-button-bg-inset:4px;–segmented-control-outer-radius:6px;background-color:transparent;border-color:transparent;border-radius:var(–segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:400;padding:var(–segmented-control-button-bg-inset);height:100%;width:100%;}/!sc/ .bHmvop:focus:not(:disabled){box-shadow:none;outline:2px solid var(–fgColor-accent,var(–color-accent-fg,#0969da));outline-offset:-1px;}/!sc/ .bHmvop:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/!sc/ .bHmvop:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(–fgColor-accent,var(–color-accent-fg,#0969da));outline-offset:-1px;}/!sc/ .bHmvop .segmentedControl-content{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border-color:transparent;border-style:solid;border-width:1px;border-radius:calc(var(–segmented-control-outer-radius) - var(–segmented-control-button-bg-inset) / 2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-left:calc(var(–segmented-control-button-inner-padding) - var(–segmented-control-button-bg-inset));padding-right:calc(var(–segmented-control-button-inner-padding) - var(–segmented-control-button-bg-inset));}/!sc/ .bHmvop svg{fill:var(–fgColor-muted,var(–color-fg-muted,#656d76));}/!sc/ .bHmvop:hover .segmentedControl-content{background-color:var(–controlTrack-bgColor-hover,var(–color-segmented-control-button-hover-bg,rgba(175,184,193,0.2)));}/!sc/ .bHmvop:active .segmentedControl-content{background-color:var(–controlTrack-bgColor-active,var(–color-segmented-control-button-hover-active-bg,rgba(175,184,193,0.4)));}/!sc/ .bHmvop:focus:focus-visible:not(:last-child):after{width:0;}/!sc/ .bHmvop .segmentedControl-text:after{content:“Blame”;display:block;font-weight:600;height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;}/!sc/ @media (pointer:coarse){.bHmvop:before{content:“”;position:absolute;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:50%;min-height:44px;}}/!sc/ data-styled.g109[id=“SegmentedControlButtonSegmentedControlButtonStyled-sc-8lkgxl-0”]{content:“dwImxt,iFTkun,bHmvop,”}/!sc/ .lawgDG{background-color:var(–controlTrack-bgColor-rest,var(–color-segmented-control-bg,#eaeef2));border-radius:6px;border:1px solid;border-color:var(–controlTrack-borderColor-rest,transparent);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;font-size:14px;height:28px;margin:0;padding:0;}/!sc/ data-styled.g111[id=“SegmentedControlSegmentedControlList-sc-1rzig82-0”]{content:“lawgDG,”}/!sc/

      Latest commit

       

      History

      <a href=“/Pushpamk/materialui-react-component-snippet-autocomplete/commits/master/README.md” class=“prc-Button-ButtonBase-c50BI d-none d-lg-flex LinkButton-modulecode-view-link-button–xvCGA flex-items-center fgColor-default” data-loading=“false” data-size=“small” data-variant=“invisible” aria-describedby=“:R5dlal9lab:-loading-announcement”>History
      <span role=“tooltip” aria-label=“History” id=“history-icon-button-tooltip” class=“TooltipTooltipBase-sc-17tf59c-0 hWlpPn tooltipped-n”><a href=“/Pushpamk/materialui-react-component-snippet-autocomplete/commits/master/README.md” class=“prc-Button-ButtonBase-c50BI LinkButton-modulecode-view-link-button–xvCGA flex-items-center fgColor-default” data-loading=“false” data-size=“small” data-variant=“invisible” aria-describedby=“:Rpdlal9lab:-loading-announcement history-icon-button-tooltip”>
      <div title=“2.07 KB” data-testid=“blob-size” class=“TruncateStyledTruncate-sc-23o1d2-0 eAtkQz”>62 lines (34 loc) · 2.07 KB
      <span class=“TextStyledText-sc-17v1xeu-0 lauzFl” aria-hidden=“true”>/

      README.md

      File metadata and controls

      <ul aria-label=“File view” class=“SegmentedControlSegmentedControlList-sc-1rzig82-0 lawgDG” data-size=“small”>
    • <button aria-current=“true” class=“SegmentedControlButton
      • SegmentedControlButtonStyled-sc-8lkgxl-0 dwImxt” type=“button”>
      Preview
    • <button aria-current=“false” class=“SegmentedControlButton
      • SegmentedControlButtonStyled-sc-8lkgxl-0 iFTkun” type=“button”>
      Code
    • <button aria-current=“false” class=“SegmentedControlButton
      • SegmentedControlButtonStyled-sc-8lkgxl-0 bHmvop” type=“button”>
      Blame
      <div title=“2.07 KB” data-testid=“blob-size” class=“TruncateStyledTruncate-sc-23o1d2-0 eAtkQz”>62 lines (34 loc) · 2.07 KB
      <div class=“ButtonGroupStyledButtonGroup-sc-1gxhls1-0 lirRhW”>Raw<span role=“tooltip” aria-label=“Download raw file” id=“:Rdcsptal9lab:” class=“TooltipTooltipBase-sc-17tf59c-0 hWlpPn tooltipped-n”>

      MaterialUi-React-Component Snippet-Autocomplete Release

      MaterialUi-React-Component Snippet-Autocomplete Sublime Plugin

      Auto-complete plugin for MaterialUi Component props .

      Installation

      With Package Control:

      1. Run “Package Control: Install Package” command, find and install MaterialUi React Component Snippet Autocomplete plugin.
      2. Restart ST editor (if required)

      Manually:

      You can clone this repository to the Packages directory of your Sublime installation.

      git clone https://github.com/Pushpamk/materialui-react-component-snippet-autocomplete.git

      Configuration

      Go to Preference > Setting add "auto_complete_selector": true

      Or

      Go to Preference > Setting add "auto_complete_triggers": [{"selector": "source.js", "characters": "mui"},{"selector": "source.js", "characters": "api"}]

      MaterialUi

      MaterialUi is a React components for faster and easier web development. Build your own design system, or start with Material Design.

      Usage

      guide-1

      Import MaterialUi Packages

      guide-2

      MaterialUi React Component Snippet

      guide-3

      more info: Components

      Props name and value autocompletion: When inside components tag (<CardMedia [HERE] />) and (variant="[HERE]"), suggestions will appear.

      guide-4 guide-5

      Note: In order for the suggestions to appear, your document needs to have the syntax set to JS. You can set the syntax from the menu View > Syntax or via the Command Palette.

      To make a new version of the plugin available via package control, a new version tag needs to be created.

      Copyright and license

      Licensed under the MIT License

      <script type=“application/json” id=“PRIMER_DATA:R0:__”>{“resolvedServerColorMode”:“day”}

      </main>


    <footer class="footer pt-8 pb-6 f6 color-fg-muted p-responsive" role="contentinfo" >

    Footer

    © 2024 GitHub, Inc. 
    <nav aria-label="Footer">
  <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3>

  <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading">

      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to Terms&quot;,&quot;label&quot;:&quot;text:terms&quot;}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a>
      </li>

      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to privacy&quot;,&quot;label&quot;:&quot;text:privacy&quot;}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a>
      </li>

      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to security&quot;,&quot;label&quot;:&quot;text:security&quot;}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a>
      </li>

      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to status&quot;,&quot;label&quot;:&quot;text:status&quot;}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a>
      </li>

      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to docs&quot;,&quot;label&quot;:&quot;text:docs&quot;}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a>
      </li>

      <li class="mx-2">
        <a data-analytics-event="{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to contact&quot;,&quot;label&quot;:&quot;text:contact&quot;}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a>
      </li>

      <li class="mx-2" >


    • </ul>
</nav>


    <ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999" data-initial-cookie-consent-allowed="" data-cookie-consent-required="false"></ghcc-consent>

    You can’t perform that action at this time. 
    <template id="site-details-dialog">


    <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;">


    <template id="snippet-clipboard-copy-button">


    </div>

<div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div>
<div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div>