pankod/refine

View on GitHub
packages/inferencer/src/inferencers/mui/__tests__/__snapshots__/create.test.tsx.snap

Summary

Maintainability
Test Coverage
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`MuiCreateInferencer should match the snapshot 1`] = `
<DocumentFragment>
  <div>
    <div
      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-bhp9pd-MuiPaper-root-MuiCard-root"
    >
      <div
        class="MuiCardHeader-root css-94f51d-MuiCardHeader-root"
      >
        <div
          class="MuiCardHeader-avatar css-1ssile9-MuiCardHeader-avatar"
        >
          <button
            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
            tabindex="0"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
              data-testid="ArrowBackIcon"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"
              />
            </svg>
            <span
              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
            />
          </button>
        </div>
        <div
          class="MuiCardHeader-content css-1qbkelo-MuiCardHeader-content"
        >
          <h5
            class="MuiTypography-root MuiTypography-h5 refine-pageHeader-title css-ag7rrr-MuiTypography-root"
          >
            Create Post
          </h5>
        </div>
      </div>
      <div
        class="MuiCardContent-root css-46bh2p-MuiCardContent-root"
      >
        <form
          autocomplete="off"
          class="MuiBox-root css-j7qwjs"
        >
          <div
            class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
          >
            <label
              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
              data-shrink="true"
              for=":r0:"
              id=":r0:-label"
            >
              Title
            </label>
            <div
              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
                id=":r0:"
                name="title"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
              >
                <legend
                  class="css-14lo706"
                >
                  <span>
                    Title
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
          >
            <label
              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
              data-shrink="true"
              for=":r1:"
              id=":r1:-label"
            >
              Slug
            </label>
            <div
              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
                id=":r1:"
                name="slug"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
              >
                <legend
                  class="css-14lo706"
                >
                  <span>
                    Slug
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
          >
            <label
              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
              data-shrink="true"
              for=":r2:"
              id=":r2:-label"
            >
              Content
            </label>
            <div
              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline css-8ewcdo-MuiInputBase-root-MuiOutlinedInput-root"
            >
              <textarea
                aria-invalid="false"
                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input"
                id=":r2:"
                name="content"
                style="height: 0px; overflow: hidden;"
              />
              <textarea
                aria-hidden="true"
                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input"
                readonly=""
                style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding-top: 0px; padding-bottom: 0px; width: 100%;"
                tabindex="-1"
              />
              <fieldset
                aria-hidden="true"
                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
              >
                <legend
                  class="css-14lo706"
                >
                  <span>
                    Content
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
          >
            <label
              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
              data-shrink="true"
              for=":r3:"
              id=":r3:-label"
            >
              Hit
            </label>
            <div
              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
                id=":r3:"
                name="hit"
                type="number"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
              >
                <legend
                  class="css-14lo706"
                >
                  <span>
                    Hit
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
            name="category"
          >
            <div
              class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
            >
              <label
                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-required MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
                data-shrink="false"
                for=":r4:"
                id=":r4:-label"
              >
                Category
                <span
                  aria-hidden="true"
                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk css-wgai2y-MuiFormLabel-asterisk"
                >
                   *
                </span>
              </label>
              <div
                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
              >
                <input
                  aria-autocomplete="list"
                  aria-expanded="false"
                  aria-invalid="false"
                  autocapitalize="none"
                  autocomplete="off"
                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
                  id=":r4:"
                  required=""
                  role="combobox"
                  spellcheck="false"
                  type="text"
                  value=""
                />
                <div
                  class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
                >
                  <button
                    aria-label="Open"
                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
                    tabindex="-1"
                    title="Open"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
                      data-testid="ArrowDropDownIcon"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                    <span
                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                    />
                  </button>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                >
                  <legend
                    class="css-yjsfm1"
                  >
                    <span>
                      Category *
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
            name="user"
          >
            <div
              class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
            >
              <label
                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-required MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
                data-shrink="false"
                for=":r6:"
                id=":r6:-label"
              >
                User
                <span
                  aria-hidden="true"
                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk css-wgai2y-MuiFormLabel-asterisk"
                >
                   *
                </span>
              </label>
              <div
                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
              >
                <input
                  aria-autocomplete="list"
                  aria-expanded="false"
                  aria-invalid="false"
                  autocapitalize="none"
                  autocomplete="off"
                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
                  id=":r6:"
                  required=""
                  role="combobox"
                  spellcheck="false"
                  type="text"
                  value=""
                />
                <div
                  class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
                >
                  <button
                    aria-label="Open"
                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
                    tabindex="-1"
                    title="Open"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
                      data-testid="ArrowDropDownIcon"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                    <span
                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                    />
                  </button>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                >
                  <legend
                    class="css-yjsfm1"
                  >
                    <span>
                      User *
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
          >
            <label
              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
              data-shrink="true"
              for=":r8:"
              id=":r8:-label"
            >
              Status
            </label>
            <div
              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
                id=":r8:"
                name="status"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
              >
                <legend
                  class="css-14lo706"
                >
                  <span>
                    Status
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
          >
            <label
              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
              data-shrink="true"
              for=":r9:"
              id=":r9:-label"
            >
              Status Color
            </label>
            <div
              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
                id=":r9:"
                name="status_color"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
              >
                <legend
                  class="css-14lo706"
                >
                  <span>
                    Status Color
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
          >
            <label
              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
              data-shrink="true"
              for=":ra:"
              id=":ra:-label"
            >
              Created At
            </label>
            <div
              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
                id=":ra:"
                name="createdAt"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
              >
                <legend
                  class="css-14lo706"
                >
                  <span>
                    Created At
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
          >
            <label
              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
              data-shrink="true"
              for=":rb:"
              id=":rb:-label"
            >
              Published At
            </label>
            <div
              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
                id=":rb:"
                name="publishedAt"
                type="text"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
              >
                <legend
                  class="css-14lo706"
                >
                  <span>
                    Published At
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
          <div
            class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
            name="tags"
          >
            <div
              class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
            >
              <label
                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-required MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
                data-shrink="false"
                for=":rc:"
                id=":rc:-label"
              >
                Tags
                <span
                  aria-hidden="true"
                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk css-wgai2y-MuiFormLabel-asterisk"
                >
                   *
                </span>
              </label>
              <div
                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
              >
                <input
                  aria-autocomplete="list"
                  aria-expanded="false"
                  aria-invalid="false"
                  autocapitalize="none"
                  autocomplete="off"
                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
                  id=":rc:"
                  required=""
                  role="combobox"
                  spellcheck="false"
                  type="text"
                  value=""
                />
                <div
                  class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
                >
                  <button
                    aria-label="Open"
                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-qzbt6i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
                    tabindex="-1"
                    title="Open"
                    type="button"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
                      data-testid="ArrowDropDownIcon"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                    <span
                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                    />
                  </button>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                >
                  <legend
                    class="css-yjsfm1"
                  >
                    <span>
                      Tags *
                    </span>
                  </legend>
                </fieldset>
              </div>
            </div>
          </div>
          <div
            class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root"
          >
            <label
              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
              data-shrink="true"
              for=":re:"
              id=":re:-label"
            >
              Language
            </label>
            <div
              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
            >
              <input
                aria-invalid="false"
                class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
                id=":re:"
                name="language"
                type="number"
                value=""
              />
              <fieldset
                aria-hidden="true"
                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
              >
                <legend
                  class="css-14lo706"
                >
                  <span>
                    Language
                  </span>
                </legend>
              </fieldset>
            </div>
          </div>
        </form>
      </div>
      <div
        class="MuiCardActions-root MuiCardActions-spacing css-77lrgg-MuiCardActions-root"
      >
        <button
          class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary refine-save-button css-1jmqb42-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
          id=":rf:"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
              data-testid="SaveOutlinedIcon"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7zm2 16H5V5h11.17L19 7.83zm-7-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3M6 6h9v4H6z"
              />
            </svg>
          </span>
          Save
          <span
            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
          />
        </button>
      </div>
    </div>
  </div>
  <div
    class="refine-inferencer--code-viewer"
    style="position: sticky; bottom: 24px; padding-top: 24px; left: 0px; right: 0px; width: 100%; z-index: 10; display: flex; justify-content: center; transition: all 0.2s ease; opacity: 1; transform: translateY(0);"
  >
    <div
      style="max-width: 1080px; padding: 20px; background-color: rgb(26, 26, 26); box-shadow: 0px 4px 16px -4px rgba(0, 0, 0, 0.5), 0px 8px 32px -8px rgba(0, 0, 0, 0.35); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: 12px;"
    >
      <div
        style="display: flex; align-items: flex-start; gap: 8px;"
      >
        <div>
          <svg
            fill="none"
            height="20"
            width="20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              clip-rule="evenodd"
              d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10Zm0-15a1.25 1.25 0 1 0 0 2.5A1.25 1.25 0 0 0 10 5Zm0 10c.69 0 1.25-.56 1.25-1.25V10a1.25 1.25 0 1 0-2.5 0v3.75c0 .69.56 1.25 1.25 1.25Z"
              fill="#0080FF"
              fill-rule="evenodd"
            />
          </svg>
        </div>
        <div
          style="font-size: 14px; line-height: 20px; color: rgb(255, 255, 255);"
        >
          <p
            style="padding: 0px; margin: 0px;"
          >
            Most of the page code is auto-generated by the 
            <span
              style="text-decoration: underline;"
            >
              Inferencer
            </span>
             feature, based on your backend data structure.
          </p>
          <p
            style="padding: 0px; margin: 0px;"
          >
            While this is an excellent way to experiment with refine, 
            <span
              style="font-weight: 600;"
            >
              it's not intended to be used on production.
            </span>
          </p>
        </div>
      </div>
      <div>
        <button
          style="appearance: none; padding: 10px 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: rgb(0, 128, 255); color: rgb(255, 255, 255); font-size: 14px; line-height: 20px; font-weight: 600; gap: 8px; cursor: pointer; transition: all 0.2s ease;"
        >
          <svg
            fill="none"
            height="16"
            style="flex-shrink: 0;"
            width="16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M5 2a1 1 0 0 1 0 2H4v8h8v-1a1 1 0 1 1 2 0v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h1Z"
              fill="currentColor"
            />
            <path
              d="M9 2a1 1 0 0 0 0 2h1.586L6.293 8.293a1 1 0 0 0 1.414 1.414L12 5.414V7a1 1 0 1 0 2 0V3a1 1 0 0 0-1-1H9Z"
              fill="currentColor"
            />
          </svg>
          <span>
            Show the auto-generated code
          </span>
        </button>
      </div>
    </div>
  </div>
  <div
    class="refine-inferencer--code-viewer-modal"
    style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); transition: all 0.2s ease; opacity: 0; pointer-events: none; display: flex; justify-content: center; align-items: center;"
  >
    <div
      style="transform: scale(0) translateY(-200px); transition: all 0.25s cubic-bezier(.35,1.29,.81,1.08); transition-delay: 0.25; background-color: rgb(255, 255, 255); max-width: 640px; max-height: 720px; border-radius: 8px; padding: 16px;"
    >
      <div
        style="display: flex; flex-direction: column; height: 100%; width: 100%; gap: 16px;"
      >
        <div
          style="display: flex; justify-content: space-between; align-items: center;"
        >
          <div
            style="font-weight: 700; font-size: 20px; line-height: 32px; color: rgb(13, 13, 13);"
          >
            Auto-generated code by Inferencer
          </div>
          <button
            style="flex-shrink: 0; appearance: none; background: none; padding: 0px; margin: 0px; outline: none; border-radius: 50px; width: 32px; height: 32px; cursor: pointer; transition: all 0.15s ease;"
          >
            <svg
              fill="none"
              height="32"
              width="32"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16Zm-2.586-21.414a2 2 0 1 0-2.828 2.828L13.172 16l-2.586 2.586a2 2 0 1 0 2.828 2.828L16 18.828l2.586 2.586a2 2 0 1 0 2.828-2.828L18.828 16l2.586-2.586a2 2 0 1 0-2.828-2.828L16 13.172l-2.586-2.586Z"
                fill="#A6A6A6"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
        <div
          style="font-size: 13px; border-radius: 8px; flex: 1; overflow: scroll; background: rgb(30, 30, 30);"
        >
          <pre
            class="prism-code language-tsx"
            style="color: rgb(156, 220, 254); background-color: rgb(30, 30, 30); padding: 14px 14px 14px 14px; margin: 0px; width: 100%; box-sizing: border-box;"
          >
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                import
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token imports"
              >
                 
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Create
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              >
                 useAutocomplete 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                from
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "@refinedev/mui"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                import
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token imports"
              >
                 
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Box
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              >
                 
              </span>
              <span
                class="token imports maybe-class-name"
              >
                TextField
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token imports"
              >
                 
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Autocomplete
              </span>
              <span
                class="token imports"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                from
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "@mui/material"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                import
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token imports"
              >
                 useForm 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                from
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "@refinedev/react-hook-form"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                import
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token imports"
              >
                 
              </span>
              <span
                class="token imports maybe-class-name"
              >
                Controller
              </span>
              <span
                class="token imports"
              >
                 
              </span>
              <span
                class="token imports punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                from
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "react-hook-form"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                export
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function-variable function"
                style="color: rgb(220, 220, 170);"
              >
                PostCreate
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        saveButtonProps
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        refineCore
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 formLoading 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        register
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        control
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        formState
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 errors 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                useForm
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 autocompleteProps
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 categoryAutocompleteProps 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                useAutocomplete
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        resource
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "categories"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 autocompleteProps
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 userAutocompleteProps 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                useAutocomplete
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        resource
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "users"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                const
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              >
                 autocompleteProps
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 tagsAutocompleteProps 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token function"
                style="color: rgb(220, 220, 170);"
              >
                useAutocomplete
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        resource
              </span>
              <span
                class="token operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token string"
                style="color: rgb(206, 145, 120);"
              >
                "tags"
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token plain"
              >
                 
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Create
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                isLoading
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                formLoading
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                saveButtonProps
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                saveButtonProps
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Box
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                component
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                form
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                sx
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 display
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                "flex"
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 flexDirection
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                "column"
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                autoComplete
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                off
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TextField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag spread method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                register
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "title"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                        required
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "This field is required"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                error
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                title
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                helperText
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                title
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                message
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                margin
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                normal
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                fullWidth
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                InputLabelProps
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 shrink
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript boolean"
                style="color: rgb(78, 201, 176);"
              >
                true
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                type
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                text
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                label
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                Title
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                name
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                title
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TextField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag spread method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                register
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "slug"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                        required
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "This field is required"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                error
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                slug
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                helperText
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                slug
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                message
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                margin
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                normal
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                fullWidth
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                InputLabelProps
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 shrink
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript boolean"
                style="color: rgb(78, 201, 176);"
              >
                true
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                type
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                text
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                label
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                Slug
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                name
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                slug
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TextField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag spread method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                register
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "content"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                        required
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "This field is required"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                error
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                content
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                helperText
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                content
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                message
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                margin
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                normal
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                fullWidth
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                InputLabelProps
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 shrink
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript boolean"
                style="color: rgb(78, 201, 176);"
              >
                true
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                multiline
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                label
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                Content
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                name
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                content
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TextField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag spread method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                register
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "hit"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                        required
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "This field is required"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                        valueAsNumber
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread boolean"
                style="color: rgb(78, 201, 176);"
              >
                true
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                error
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                hit
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                helperText
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                hit
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                message
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                margin
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                normal
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                fullWidth
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                InputLabelProps
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 shrink
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript boolean"
                style="color: rgb(78, 201, 176);"
              >
                true
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                type
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                number
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                label
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                Hit
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                name
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                hit
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Controller
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                control
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                control
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                name
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                category
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                rules
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 required
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                "This field is required"
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag comment"
                style="color: rgb(106, 153, 85);"
              >
                // eslint-disable-next-line
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                defaultValue
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                null
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                render
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 field 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag script language-javascript tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag script language-javascript tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Autocomplete
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag script language-javascript tag spread"
                style="color: rgb(78, 201, 176);"
              >
                categoryAutocompleteProps
              </span>
              <span
                class="token tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag script language-javascript tag spread"
                style="color: rgb(78, 201, 176);"
              >
                field
              </span>
              <span
                class="token tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                onChange
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                _
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                field
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                onChange
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                getOptionLabel
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                item
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                    categoryAutocompleteProps
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                options
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                find
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                        
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                p
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                            p
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                toString
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ===
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                            item
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                toString
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                title 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ??
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                ""
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                isOptionEqualToValue
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                option
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                value 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ===
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                undefined
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ||
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                option
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                toString
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ===
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                toString
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                renderInput
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                params
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TextField
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag spread"
                style="color: rgb(78, 201, 176);"
              >
                params
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                label
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                Category
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                margin
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                normal
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                variant
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                outlined
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                error
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                category
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                helperText
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                        
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                category
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                message
              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                required
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag script language-javascript tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Controller
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                control
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                control
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                name
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                user
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                rules
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 required
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                "This field is required"
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag comment"
                style="color: rgb(106, 153, 85);"
              >
                // eslint-disable-next-line
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                defaultValue
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                null
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                render
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 field 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag script language-javascript tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag script language-javascript tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Autocomplete
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag script language-javascript tag spread"
                style="color: rgb(78, 201, 176);"
              >
                userAutocompleteProps
              </span>
              <span
                class="token tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag script language-javascript tag spread"
                style="color: rgb(78, 201, 176);"
              >
                field
              </span>
              <span
                class="token tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                onChange
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                _
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                field
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                onChange
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                getOptionLabel
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                item
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                    userAutocompleteProps
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                options
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                find
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                        
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                p
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                            p
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                toString
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ===
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                            item
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                toString
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                firstName 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ??
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                ""
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                isOptionEqualToValue
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                option
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                value 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ===
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                undefined
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ||
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                option
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                toString
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ===
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                toString
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                renderInput
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                params
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TextField
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag spread"
                style="color: rgb(78, 201, 176);"
              >
                params
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                label
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                User
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                margin
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                normal
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                variant
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                outlined
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                error
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                user
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                helperText
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                        
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                user
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                message
              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                required
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag script language-javascript tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TextField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag spread method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                register
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "status"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                        required
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "This field is required"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                error
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                status
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                helperText
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                status
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                message
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                margin
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                normal
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                fullWidth
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                InputLabelProps
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 shrink
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript boolean"
                style="color: rgb(78, 201, 176);"
              >
                true
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                type
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                text
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                label
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                Status
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                name
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                status
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TextField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag spread method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                register
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "status_color"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                        required
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "This field is required"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                error
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                status_color
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                helperText
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                status_color
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                message
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                margin
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                normal
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                fullWidth
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                InputLabelProps
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 shrink
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript boolean"
                style="color: rgb(78, 201, 176);"
              >
                true
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                type
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                text
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                label
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                Status Color
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                name
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                status_color
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token comment"
                style="color: rgb(106, 153, 85);"
              >
                /*
              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token comment"
                style="color: rgb(106, 153, 85);"
              >
                                    DatePicker component is not included in "@refinedev/mui" package.
              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token comment"
                style="color: rgb(106, 153, 85);"
              >
                                    To use a &lt;DatePicker&gt; component, you can follow the official documentation for Material UI.
              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token comment"
                style="display: inline-block; color: rgb(106, 153, 85);"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token comment"
                style="color: rgb(106, 153, 85);"
              >
                                    Docs: https://mui.com/x/react-date-pickers/date-picker/#basic-usage
              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token comment"
                style="color: rgb(106, 153, 85);"
              >
                                */
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TextField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag spread method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                register
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "createdAt"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                        required
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "This field is required"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                error
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                createdAt
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                helperText
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                createdAt
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                message
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                margin
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                normal
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                fullWidth
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                InputLabelProps
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 shrink
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript boolean"
                style="color: rgb(78, 201, 176);"
              >
                true
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                label
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                Created At
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                name
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                createdAt
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
                style="display: inline-block;"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token comment"
                style="color: rgb(106, 153, 85);"
              >
                /*
              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token comment"
                style="color: rgb(106, 153, 85);"
              >
                                    DatePicker component is not included in "@refinedev/mui" package.
              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token comment"
                style="color: rgb(106, 153, 85);"
              >
                                    To use a &lt;DatePicker&gt; component, you can follow the official documentation for Material UI.
              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token comment"
                style="display: inline-block; color: rgb(106, 153, 85);"
              >
                

              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token comment"
                style="color: rgb(106, 153, 85);"
              >
                                    Docs: https://mui.com/x/react-date-pickers/date-picker/#basic-usage
              </span>
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token comment"
                style="color: rgb(106, 153, 85);"
              >
                                */
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TextField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag spread method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                register
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "publishedAt"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                        required
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "This field is required"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                error
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                publishedAt
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                helperText
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                publishedAt
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                message
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                margin
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                normal
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                fullWidth
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                InputLabelProps
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 shrink
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript boolean"
                style="color: rgb(78, 201, 176);"
              >
                true
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                label
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                Published At
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                name
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                publishedAt
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Controller
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                control
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                control
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                name
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                tags
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                rules
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 required
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                "This field is required"
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag comment"
                style="color: rgb(106, 153, 85);"
              >
                // eslint-disable-next-line
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                defaultValue
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                [
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ]
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                render
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 field 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag script language-javascript tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag script language-javascript tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Autocomplete
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag script language-javascript tag spread"
                style="color: rgb(78, 201, 176);"
              >
                tagsAutocompleteProps
              </span>
              <span
                class="token tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag script language-javascript tag spread"
                style="color: rgb(78, 201, 176);"
              >
                field
              </span>
              <span
                class="token tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                multiple
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                onChange
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                _
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                field
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                .
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                onChange
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                    value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                map
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                item
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 item
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ??
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 item
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                getOptionLabel
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                item
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                return
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                    tagsAutocompleteProps
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                options
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                find
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                        
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                p
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                            p
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                toString
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ===
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                item
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ??
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 item
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                toString
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                title 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ??
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript string"
                style="color: rgb(206, 145, 120);"
              >
                ""
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                isOptionEqualToValue
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                option
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                value 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ===
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                undefined
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ||
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                option
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                toString
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ===
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                id 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ??
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 value
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                toString
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                renderInput
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                params
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript arrow operator"
                style="color: rgb(212, 212, 212);"
              >
                =&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TextField
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag spread"
                style="color: rgb(78, 201, 176);"
              >
                params
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                label
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                Tags
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                margin
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                normal
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                variant
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                outlined
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                error
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                tags
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                helperText
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                tags
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                message
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                    
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                required
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                                
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                            
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript tag"
                style="color: rgb(78, 201, 176);"
              >
                                        
              </span>
              <span
                class="token tag script language-javascript tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                TextField
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                ...
              </span>
              <span
                class="token tag spread method function property-access"
                style="color: rgb(220, 220, 170);"
              >
                register
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "language"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                        required
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread string"
                style="color: rgb(206, 145, 120);"
              >
                "This field is required"
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                        valueAsNumber
              </span>
              <span
                class="token tag spread operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag spread boolean"
                style="color: rgb(78, 201, 176);"
              >
                true
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ,
              </span>
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag spread"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag spread punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                error
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                !
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                language
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                helperText
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                (
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                errors 
              </span>
              <span
                class="token tag script language-javascript keyword"
                style="color: rgb(86, 156, 214);"
              >
                as
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript builtin"
                style="color: rgb(86, 156, 214);"
              >
                any
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                language
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                ?.
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                message
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                margin
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                normal
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                fullWidth
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                InputLabelProps
              </span>
              <span
                class="token tag script language-javascript script-punctuation punctuation"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                {
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 shrink
              </span>
              <span
                class="token tag script language-javascript operator"
                style="color: rgb(212, 212, 212);"
              >
                :
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript boolean"
                style="color: rgb(78, 201, 176);"
              >
                true
              </span>
              <span
                class="token tag script language-javascript"
                style="color: rgb(78, 201, 176);"
              >
                 
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag script language-javascript punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                type
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                number
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                label
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                Language
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                    
              </span>
              <span
                class="token tag attr-name"
                style="color: rgb(156, 220, 254);"
              >
                name
              </span>
              <span
                class="token tag attr-value punctuation attr-equals"
                style="color: rgb(212, 212, 212);"
              >
                =
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag attr-value"
                style="color: rgb(206, 145, 120);"
              >
                language
              </span>
              <span
                class="token tag attr-value punctuation"
                style="color: rgb(212, 212, 212);"
              >
                "
              </span>
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token tag"
                style="color: rgb(78, 201, 176);"
              >
                                
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                /&gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                            
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Box
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain-text"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain-text"
              >
                        
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &lt;/
              </span>
              <span
                class="token tag class-name"
                style="color: rgb(78, 201, 176);"
              >
                Create
              </span>
              <span
                class="token tag punctuation"
                style="color: rgb(212, 212, 212);"
              >
                &gt;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              >
                    
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                )
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
              />
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                }
              </span>
              <span
                class="token punctuation"
                style="color: rgb(212, 212, 212);"
              >
                ;
              </span>
              <span
                class="token plain"
              />
            </div>
            <div
              class="token-line"
              style="color: rgb(156, 220, 254);"
            >
              <span
                class="token plain"
                style="display: inline-block;"
              >
                

              </span>
            </div>
          </pre>
        </div>
        <div
          style="display: flex; justify-content: flex-start; align-items: flex-end; gap: 16px;"
        >
          <button
            style="appearance: none; height: 40px; padding: 10px 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: rgb(0, 128, 255); color: rgb(255, 255, 255); font-size: 14px; line-height: 20px; font-weight: 600; gap: 8px; cursor: pointer; position: relative; overflow: hidden; transition: filter 0.2s ease; transform: scale(1);"
          >
            <svg
              fill="none"
              height="20"
              style="flex-shrink: 0; margin-top: -2px; margin-bottom: -2px;"
              viewBox="0 0 24 24"
              width="20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                clip-rule="evenodd"
                d="M8 5a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h1Zm0 7a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2H9Z"
                fill="currentColor"
                fill-rule="evenodd"
              />
              <path
                d="M13 4a1 1 0 1 1 0 2h-2a1 1 0 1 1 0-2h2Z"
                fill="currentColor"
              />
            </svg>
            <span>
              Copy Generated Code
            </span>
            <div
              style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center; background: rgb(0, 128, 255); transition: all 0.2s ease; transform: translateY(40px);"
            >
              <svg
                fill="none"
                height="20"
                style="flex-shrink: 0; margin-top: -2px; margin-bottom: -2px;"
                viewBox="0 0 24 24"
                width="20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M8 5a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h1Zm0 7a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2H9Z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
                <path
                  d="M13 4a1 1 0 1 1 0 2h-2a1 1 0 1 1 0-2h2Z"
                  fill="currentColor"
                />
              </svg>
              <span>
                Copied!
              </span>
            </div>
          </button>
          <a
            href="https://refine.dev/docs/packages/documentation/inferencer"
            rel="noreferrer"
            style="appearance: none; text-decoration: none; padding: 10px 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: rgba(0, 128, 255, 0.1); color: rgb(0, 128, 255); font-size: 14px; line-height: 20px; font-weight: 600; gap: 8px; cursor: pointer; transition: all 0.2s ease;"
            target="_blank"
          >
            <svg
              fill="none"
              height="16"
              style="flex-shrink: 0;"
              width="16"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M5 2a1 1 0 0 1 0 2H4v8h8v-1a1 1 0 1 1 2 0v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h1Z"
                fill="currentColor"
              />
              <path
                d="M9 2a1 1 0 0 0 0 2h1.586L6.293 8.293a1 1 0 0 0 1.414 1.414L12 5.414V7a1 1 0 1 0 2 0V3a1 1 0 0 0-1-1H9Z"
                fill="currentColor"
              />
            </svg>
            <span>
              Learn more about inferencer
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;