element-web/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap

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

exports[`<ExportDialog /> renders export dialog 1`] = `
[
  <BaseDialog
    className="mx_ExportDialog false"
    contentId="mx_Dialog_content"
    fixedWidth={true}
    hasCancel={true}
    onFinished={[MockFunction]}
    title="Export Chat"
  >
    <PosthogScreenTracker />
    <ForwardRef(FocusLockUICombination)
      className="mx_ExportDialog false mx_Dialog_fixedWidth"
      lockProps={
        {
          "aria-describedby": "mx_Dialog_content",
          "aria-labelledby": "mx_BaseDialog_title",
          "onKeyDown": [Function],
          "role": "dialog",
        }
      }
      returnFocus={true}
    >
      <ForwardRef(FocusLockUI)
        as="div"
        autoFocus={true}
        className="mx_ExportDialog false mx_Dialog_fixedWidth"
        crossFrame={true}
        disabled={false}
        lockProps={
          {
            "aria-describedby": "mx_Dialog_content",
            "aria-labelledby": "mx_BaseDialog_title",
            "onKeyDown": [Function],
            "role": "dialog",
          }
        }
        noFocusGuards={false}
        persistentFocus={false}
        returnFocus={true}
        sideCar={[Function]}
      >
        <div
          data-focus-guard={true}
          key="guard-first"
          style={
            {
              "height": "0px",
              "left": "1px",
              "overflow": "hidden",
              "padding": 0,
              "position": "fixed",
              "top": "1px",
              "width": "1px",
            }
          }
          tabIndex={0}
        />
        <SideEffect(FocusWatcher)
          autoFocus={true}
          crossFrame={true}
          disabled={false}
          id={{}}
          observed={
            <div
              aria-describedby="mx_Dialog_content"
              aria-labelledby="mx_BaseDialog_title"
              class="mx_ExportDialog false mx_Dialog_fixedWidth"
              data-focus-lock-disabled="false"
              role="dialog"
            >
              <div
                class="mx_Dialog_header mx_Dialog_headerWithCancel"
              >
                <h2
                  class="mx_Heading_h2 mx_Dialog_title"
                  id="mx_BaseDialog_title"
                >
                  Export Chat
                </h2>
                <div
                  aria-label="Close dialog"
                  class="mx_AccessibleButton mx_Dialog_cancelButton"
                  role="button"
                  tabindex="0"
                />
              </div>
              <p>
                Select from the options below to export chats from your timeline
              </p>
              <div
                class="mx_ExportDialog_options"
              >
                <span
                  class="mx_ExportDialog_subheading"
                >
                  Format
                </span>
                <label
                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
                >
                  <input
                    checked=""
                    id="exportFormat-Html"
                    name="exportFormat"
                    type="radio"
                    value="Html"
                  />
                  <div>
                    <div />
                  </div>
                  <div
                    class="mx_StyledRadioButton_content"
                  >
                    HTML
                  </div>
                  <div
                    class="mx_StyledRadioButton_spacer"
                  />
                </label>
                <label
                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
                >
                  <input
                    id="exportFormat-PlainText"
                    name="exportFormat"
                    type="radio"
                    value="PlainText"
                  />
                  <div>
                    <div />
                  </div>
                  <div
                    class="mx_StyledRadioButton_content"
                  >
                    Plain Text
                  </div>
                  <div
                    class="mx_StyledRadioButton_spacer"
                  />
                </label>
                <label
                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
                >
                  <input
                    id="exportFormat-Json"
                    name="exportFormat"
                    type="radio"
                    value="Json"
                  />
                  <div>
                    <div />
                  </div>
                  <div
                    class="mx_StyledRadioButton_content"
                  >
                    JSON
                  </div>
                  <div
                    class="mx_StyledRadioButton_spacer"
                  />
                </label>
                <span
                  class="mx_ExportDialog_subheading"
                >
                  Messages
                </span>
                <div
                  class="mx_Field mx_Field_select"
                >
                  <select
                    id="export-type"
                    type="text"
                  >
                    <option
                      value="Timeline"
                    >
                      Current Timeline
                    </option>
                    <option
                      value="Beginning"
                    >
                      From the beginning
                    </option>
                    <option
                      value="LastNMessages"
                    >
                      Specify a number of messages
                    </option>
                  </select>
                  <label
                    for="export-type"
                  />
                </div>
                <span
                  class="mx_ExportDialog_subheading"
                >
                  Size Limit
                </span>
                <div
                  class="mx_Field mx_Field_input"
                >
                  <input
                    autocomplete="off"
                    id="size-limit"
                    type="number"
                    value="8"
                  />
                  <label
                    for="size-limit"
                  />
                  <span
                    class="mx_Field_postfix"
                  >
                    <span>
                      MB
                    </span>
                  </span>
                </div>
                <span
                  class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
                >
                  <input
                    id="include-attachments"
                    type="checkbox"
                  />
                  <label
                    for="include-attachments"
                  >
                    <div
                      class="mx_Checkbox_background"
                    >
                      <div
                        class="mx_Checkbox_checkmark"
                      />
                    </div>
                    <div>
                      Include Attachments
                    </div>
                  </label>
                </span>
              </div>
              <div
                class="mx_Dialog_buttons"
              >
                <span
                  class="mx_Dialog_buttons_row"
                >
                  <button
                    data-testid="dialog-cancel-button"
                    type="button"
                  >
                    Cancel
                  </button>
                  <button
                    class="mx_Dialog_primary"
                    data-testid="dialog-primary-button"
                    type="button"
                  >
                    Export
                  </button>
                </span>
              </div>
            </div>
          }
          onActivation={[Function]}
          onDeactivation={[Function]}
          persistentFocus={false}
          returnFocus={[Function]}
          shards={[]}
          sideCar={
            {
              "assignMedium": [Function],
              "assignSyncMedium": [Function],
              "options": {
                "async": true,
                "ssr": false,
              },
              "read": [Function],
              "useMedium": [Function],
            }
          }
        >
          <FocusWatcher
            autoFocus={true}
            crossFrame={true}
            disabled={false}
            id={{}}
            observed={
              <div
                aria-describedby="mx_Dialog_content"
                aria-labelledby="mx_BaseDialog_title"
                class="mx_ExportDialog false mx_Dialog_fixedWidth"
                data-focus-lock-disabled="false"
                role="dialog"
              >
                <div
                  class="mx_Dialog_header mx_Dialog_headerWithCancel"
                >
                  <h2
                    class="mx_Heading_h2 mx_Dialog_title"
                    id="mx_BaseDialog_title"
                  >
                    Export Chat
                  </h2>
                  <div
                    aria-label="Close dialog"
                    class="mx_AccessibleButton mx_Dialog_cancelButton"
                    role="button"
                    tabindex="0"
                  />
                </div>
                <p>
                  Select from the options below to export chats from your timeline
                </p>
                <div
                  class="mx_ExportDialog_options"
                >
                  <span
                    class="mx_ExportDialog_subheading"
                  >
                    Format
                  </span>
                  <label
                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
                  >
                    <input
                      checked=""
                      id="exportFormat-Html"
                      name="exportFormat"
                      type="radio"
                      value="Html"
                    />
                    <div>
                      <div />
                    </div>
                    <div
                      class="mx_StyledRadioButton_content"
                    >
                      HTML
                    </div>
                    <div
                      class="mx_StyledRadioButton_spacer"
                    />
                  </label>
                  <label
                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
                  >
                    <input
                      id="exportFormat-PlainText"
                      name="exportFormat"
                      type="radio"
                      value="PlainText"
                    />
                    <div>
                      <div />
                    </div>
                    <div
                      class="mx_StyledRadioButton_content"
                    >
                      Plain Text
                    </div>
                    <div
                      class="mx_StyledRadioButton_spacer"
                    />
                  </label>
                  <label
                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
                  >
                    <input
                      id="exportFormat-Json"
                      name="exportFormat"
                      type="radio"
                      value="Json"
                    />
                    <div>
                      <div />
                    </div>
                    <div
                      class="mx_StyledRadioButton_content"
                    >
                      JSON
                    </div>
                    <div
                      class="mx_StyledRadioButton_spacer"
                    />
                  </label>
                  <span
                    class="mx_ExportDialog_subheading"
                  >
                    Messages
                  </span>
                  <div
                    class="mx_Field mx_Field_select"
                  >
                    <select
                      id="export-type"
                      type="text"
                    >
                      <option
                        value="Timeline"
                      >
                        Current Timeline
                      </option>
                      <option
                        value="Beginning"
                      >
                        From the beginning
                      </option>
                      <option
                        value="LastNMessages"
                      >
                        Specify a number of messages
                      </option>
                    </select>
                    <label
                      for="export-type"
                    />
                  </div>
                  <span
                    class="mx_ExportDialog_subheading"
                  >
                    Size Limit
                  </span>
                  <div
                    class="mx_Field mx_Field_input"
                  >
                    <input
                      autocomplete="off"
                      id="size-limit"
                      type="number"
                      value="8"
                    />
                    <label
                      for="size-limit"
                    />
                    <span
                      class="mx_Field_postfix"
                    >
                      <span>
                        MB
                      </span>
                    </span>
                  </div>
                  <span
                    class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
                  >
                    <input
                      id="include-attachments"
                      type="checkbox"
                    />
                    <label
                      for="include-attachments"
                    >
                      <div
                        class="mx_Checkbox_background"
                      >
                        <div
                          class="mx_Checkbox_checkmark"
                        />
                      </div>
                      <div>
                        Include Attachments
                      </div>
                    </label>
                  </span>
                </div>
                <div
                  class="mx_Dialog_buttons"
                >
                  <span
                    class="mx_Dialog_buttons_row"
                  >
                    <button
                      data-testid="dialog-cancel-button"
                      type="button"
                    >
                      Cancel
                    </button>
                    <button
                      class="mx_Dialog_primary"
                      data-testid="dialog-primary-button"
                      type="button"
                    >
                      Export
                    </button>
                  </span>
                </div>
              </div>
            }
            onActivation={[Function]}
            onDeactivation={[Function]}
            persistentFocus={false}
            returnFocus={[Function]}
            shards={[]}
            sideCar={
              {
                "assignMedium": [Function],
                "assignSyncMedium": [Function],
                "options": {
                  "async": true,
                  "ssr": false,
                },
                "read": [Function],
                "useMedium": [Function],
              }
            }
          />
        </SideEffect(FocusWatcher)>
        <div
          aria-describedby="mx_Dialog_content"
          aria-labelledby="mx_BaseDialog_title"
          className="mx_ExportDialog false mx_Dialog_fixedWidth"
          data-focus-lock-disabled={false}
          onBlur={[Function]}
          onFocus={[Function]}
          onKeyDown={[Function]}
          role="dialog"
        >
          <div
            className="mx_Dialog_header mx_Dialog_headerWithCancel"
          >
            <Heading
              className="mx_Dialog_title"
              id="mx_BaseDialog_title"
              size="h2"
            >
              <h2
                className="mx_Heading_h2 mx_Dialog_title"
                id="mx_BaseDialog_title"
              >
                Export Chat
              </h2>
            </Heading>
            <AccessibleButton
              aria-label="Close dialog"
              className="mx_Dialog_cancelButton"
              element="div"
              onClick={[Function]}
              role="button"
              tabIndex={0}
            >
              <div
                aria-label="Close dialog"
                className="mx_AccessibleButton mx_Dialog_cancelButton"
                onClick={[Function]}
                onKeyDown={[Function]}
                onKeyUp={[Function]}
                role="button"
                tabIndex={0}
              />
            </AccessibleButton>
          </div>
          <p>
            Select from the options below to export chats from your timeline
          </p>
          <div
            className="mx_ExportDialog_options"
          >
            <span
              className="mx_ExportDialog_subheading"
            >
              Format
            </span>
            <StyledRadioGroup
              definitions={
                [
                  {
                    "label": "HTML",
                    "value": "Html",
                  },
                  {
                    "label": "Plain Text",
                    "value": "PlainText",
                  },
                  {
                    "label": "JSON",
                    "value": "Json",
                  },
                ]
              }
              name="exportFormat"
              onChange={[Function]}
              value="Html"
            >
              <StyledRadioButton
                checked={true}
                childrenInLabel={true}
                className=""
                id="exportFormat-Html"
                name="exportFormat"
                onChange={[Function]}
                value="Html"
              >
                <label
                  className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
                >
                  <input
                    checked={true}
                    id="exportFormat-Html"
                    name="exportFormat"
                    onChange={[Function]}
                    type="radio"
                    value="Html"
                  />
                  <div>
                    <div />
                  </div>
                  <div
                    className="mx_StyledRadioButton_content"
                  >
                    HTML
                  </div>
                  <div
                    className="mx_StyledRadioButton_spacer"
                  />
                </label>
              </StyledRadioButton>
              <StyledRadioButton
                checked={false}
                childrenInLabel={true}
                className=""
                id="exportFormat-PlainText"
                name="exportFormat"
                onChange={[Function]}
                value="PlainText"
              >
                <label
                  className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
                >
                  <input
                    checked={false}
                    id="exportFormat-PlainText"
                    name="exportFormat"
                    onChange={[Function]}
                    type="radio"
                    value="PlainText"
                  />
                  <div>
                    <div />
                  </div>
                  <div
                    className="mx_StyledRadioButton_content"
                  >
                    Plain Text
                  </div>
                  <div
                    className="mx_StyledRadioButton_spacer"
                  />
                </label>
              </StyledRadioButton>
              <StyledRadioButton
                checked={false}
                childrenInLabel={true}
                className=""
                id="exportFormat-Json"
                name="exportFormat"
                onChange={[Function]}
                value="Json"
              >
                <label
                  className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
                >
                  <input
                    checked={false}
                    id="exportFormat-Json"
                    name="exportFormat"
                    onChange={[Function]}
                    type="radio"
                    value="Json"
                  />
                  <div>
                    <div />
                  </div>
                  <div
                    className="mx_StyledRadioButton_content"
                  >
                    JSON
                  </div>
                  <div
                    className="mx_StyledRadioButton_spacer"
                  />
                </label>
              </StyledRadioButton>
            </StyledRadioGroup>
            <span
              className="mx_ExportDialog_subheading"
            >
              Messages
            </span>
            <Field
              element="select"
              id="export-type"
              onChange={[Function]}
              type="text"
              validateOnBlur={true}
              validateOnChange={true}
              validateOnFocus={true}
              value="Timeline"
            >
              <div
                className="mx_Field mx_Field_select"
              >
                <select
                  id="export-type"
                  onBlur={[Function]}
                  onChange={[Function]}
                  onFocus={[Function]}
                  type="text"
                  value="Timeline"
                >
                  <option
                    key="Timeline"
                    value="Timeline"
                  >
                    Current Timeline
                  </option>
                  <option
                    key="Beginning"
                    value="Beginning"
                  >
                    From the beginning
                  </option>
                  <option
                    key="LastNMessages"
                    value="LastNMessages"
                  >
                    Specify a number of messages
                  </option>
                </select>
                <label
                  htmlFor="export-type"
                />
              </div>
            </Field>
            <span
              className="mx_ExportDialog_subheading"
            >
              Size Limit
            </span>
            <Field
              autoComplete="off"
              element="input"
              id="size-limit"
              onChange={[Function]}
              onValidate={[Function]}
              postfixComponent={
                <span>
                  MB
                </span>
              }
              type="number"
              validateOnBlur={true}
              validateOnChange={true}
              validateOnFocus={true}
              value="8"
            >
              <div
                className="mx_Field mx_Field_input"
              >
                <input
                  autoComplete="off"
                  id="size-limit"
                  onBlur={[Function]}
                  onChange={[Function]}
                  onFocus={[Function]}
                  type="number"
                  value="8"
                />
                <label
                  htmlFor="size-limit"
                />
                <span
                  className="mx_Field_postfix"
                >
                  <span>
                    MB
                  </span>
                </span>
              </div>
            </Field>
            <StyledCheckbox
              checked={false}
              className="mx_ExportDialog_attachments-checkbox"
              id="include-attachments"
              onChange={[Function]}
            >
              <span
                className="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
              >
                <input
                  checked={false}
                  id="include-attachments"
                  onChange={[Function]}
                  type="checkbox"
                />
                <label
                  htmlFor="include-attachments"
                >
                  <div
                    className="mx_Checkbox_background"
                  >
                    <div
                      className="mx_Checkbox_checkmark"
                    />
                  </div>
                  <div>
                    Include Attachments
                  </div>
                </label>
              </span>
            </StyledCheckbox>
          </div>
          <DialogButtons
            disabled={false}
            hasCancel={true}
            onCancel={[Function]}
            onPrimaryButtonClick={[Function]}
            primaryButton="Export"
          >
            <div
              className="mx_Dialog_buttons"
            >
              <span
                className="mx_Dialog_buttons_row"
              >
                <button
                  data-testid="dialog-cancel-button"
                  disabled={false}
                  onClick={[Function]}
                  type="button"
                >
                  Cancel
                </button>
                <button
                  className="mx_Dialog_primary"
                  data-testid="dialog-primary-button"
                  onClick={[Function]}
                  type="button"
                >
                  Export
                </button>
              </span>
            </div>
          </DialogButtons>
        </div>
        <div
          data-focus-guard={true}
          style={
            {
              "height": "0px",
              "left": "1px",
              "overflow": "hidden",
              "padding": 0,
              "position": "fixed",
              "top": "1px",
              "width": "1px",
            }
          }
          tabIndex={0}
        />
      </ForwardRef(FocusLockUI)>
    </ForwardRef(FocusLockUICombination)>
  </BaseDialog>,
  <ForwardRef(FocusLockUICombination)
    className="mx_ExportDialog false mx_Dialog_fixedWidth"
    lockProps={
      {
        "aria-describedby": "mx_Dialog_content",
        "aria-labelledby": "mx_BaseDialog_title",
        "onKeyDown": [Function],
        "role": "dialog",
      }
    }
    returnFocus={true}
  >
    <ForwardRef(FocusLockUI)
      as="div"
      autoFocus={true}
      className="mx_ExportDialog false mx_Dialog_fixedWidth"
      crossFrame={true}
      disabled={false}
      lockProps={
        {
          "aria-describedby": "mx_Dialog_content",
          "aria-labelledby": "mx_BaseDialog_title",
          "onKeyDown": [Function],
          "role": "dialog",
        }
      }
      noFocusGuards={false}
      persistentFocus={false}
      returnFocus={true}
      sideCar={[Function]}
    >
      <div
        data-focus-guard={true}
        key="guard-first"
        style={
          {
            "height": "0px",
            "left": "1px",
            "overflow": "hidden",
            "padding": 0,
            "position": "fixed",
            "top": "1px",
            "width": "1px",
          }
        }
        tabIndex={0}
      />
      <SideEffect(FocusWatcher)
        autoFocus={true}
        crossFrame={true}
        disabled={false}
        id={{}}
        observed={
          <div
            aria-describedby="mx_Dialog_content"
            aria-labelledby="mx_BaseDialog_title"
            class="mx_ExportDialog false mx_Dialog_fixedWidth"
            data-focus-lock-disabled="false"
            role="dialog"
          >
            <div
              class="mx_Dialog_header mx_Dialog_headerWithCancel"
            >
              <h2
                class="mx_Heading_h2 mx_Dialog_title"
                id="mx_BaseDialog_title"
              >
                Export Chat
              </h2>
              <div
                aria-label="Close dialog"
                class="mx_AccessibleButton mx_Dialog_cancelButton"
                role="button"
                tabindex="0"
              />
            </div>
            <p>
              Select from the options below to export chats from your timeline
            </p>
            <div
              class="mx_ExportDialog_options"
            >
              <span
                class="mx_ExportDialog_subheading"
              >
                Format
              </span>
              <label
                class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
              >
                <input
                  checked=""
                  id="exportFormat-Html"
                  name="exportFormat"
                  type="radio"
                  value="Html"
                />
                <div>
                  <div />
                </div>
                <div
                  class="mx_StyledRadioButton_content"
                >
                  HTML
                </div>
                <div
                  class="mx_StyledRadioButton_spacer"
                />
              </label>
              <label
                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
              >
                <input
                  id="exportFormat-PlainText"
                  name="exportFormat"
                  type="radio"
                  value="PlainText"
                />
                <div>
                  <div />
                </div>
                <div
                  class="mx_StyledRadioButton_content"
                >
                  Plain Text
                </div>
                <div
                  class="mx_StyledRadioButton_spacer"
                />
              </label>
              <label
                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
              >
                <input
                  id="exportFormat-Json"
                  name="exportFormat"
                  type="radio"
                  value="Json"
                />
                <div>
                  <div />
                </div>
                <div
                  class="mx_StyledRadioButton_content"
                >
                  JSON
                </div>
                <div
                  class="mx_StyledRadioButton_spacer"
                />
              </label>
              <span
                class="mx_ExportDialog_subheading"
              >
                Messages
              </span>
              <div
                class="mx_Field mx_Field_select"
              >
                <select
                  id="export-type"
                  type="text"
                >
                  <option
                    value="Timeline"
                  >
                    Current Timeline
                  </option>
                  <option
                    value="Beginning"
                  >
                    From the beginning
                  </option>
                  <option
                    value="LastNMessages"
                  >
                    Specify a number of messages
                  </option>
                </select>
                <label
                  for="export-type"
                />
              </div>
              <span
                class="mx_ExportDialog_subheading"
              >
                Size Limit
              </span>
              <div
                class="mx_Field mx_Field_input"
              >
                <input
                  autocomplete="off"
                  id="size-limit"
                  type="number"
                  value="8"
                />
                <label
                  for="size-limit"
                />
                <span
                  class="mx_Field_postfix"
                >
                  <span>
                    MB
                  </span>
                </span>
              </div>
              <span
                class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
              >
                <input
                  id="include-attachments"
                  type="checkbox"
                />
                <label
                  for="include-attachments"
                >
                  <div
                    class="mx_Checkbox_background"
                  >
                    <div
                      class="mx_Checkbox_checkmark"
                    />
                  </div>
                  <div>
                    Include Attachments
                  </div>
                </label>
              </span>
            </div>
            <div
              class="mx_Dialog_buttons"
            >
              <span
                class="mx_Dialog_buttons_row"
              >
                <button
                  data-testid="dialog-cancel-button"
                  type="button"
                >
                  Cancel
                </button>
                <button
                  class="mx_Dialog_primary"
                  data-testid="dialog-primary-button"
                  type="button"
                >
                  Export
                </button>
              </span>
            </div>
          </div>
        }
        onActivation={[Function]}
        onDeactivation={[Function]}
        persistentFocus={false}
        returnFocus={[Function]}
        shards={[]}
        sideCar={
          {
            "assignMedium": [Function],
            "assignSyncMedium": [Function],
            "options": {
              "async": true,
              "ssr": false,
            },
            "read": [Function],
            "useMedium": [Function],
          }
        }
      >
        <FocusWatcher
          autoFocus={true}
          crossFrame={true}
          disabled={false}
          id={{}}
          observed={
            <div
              aria-describedby="mx_Dialog_content"
              aria-labelledby="mx_BaseDialog_title"
              class="mx_ExportDialog false mx_Dialog_fixedWidth"
              data-focus-lock-disabled="false"
              role="dialog"
            >
              <div
                class="mx_Dialog_header mx_Dialog_headerWithCancel"
              >
                <h2
                  class="mx_Heading_h2 mx_Dialog_title"
                  id="mx_BaseDialog_title"
                >
                  Export Chat
                </h2>
                <div
                  aria-label="Close dialog"
                  class="mx_AccessibleButton mx_Dialog_cancelButton"
                  role="button"
                  tabindex="0"
                />
              </div>
              <p>
                Select from the options below to export chats from your timeline
              </p>
              <div
                class="mx_ExportDialog_options"
              >
                <span
                  class="mx_ExportDialog_subheading"
                >
                  Format
                </span>
                <label
                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
                >
                  <input
                    checked=""
                    id="exportFormat-Html"
                    name="exportFormat"
                    type="radio"
                    value="Html"
                  />
                  <div>
                    <div />
                  </div>
                  <div
                    class="mx_StyledRadioButton_content"
                  >
                    HTML
                  </div>
                  <div
                    class="mx_StyledRadioButton_spacer"
                  />
                </label>
                <label
                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
                >
                  <input
                    id="exportFormat-PlainText"
                    name="exportFormat"
                    type="radio"
                    value="PlainText"
                  />
                  <div>
                    <div />
                  </div>
                  <div
                    class="mx_StyledRadioButton_content"
                  >
                    Plain Text
                  </div>
                  <div
                    class="mx_StyledRadioButton_spacer"
                  />
                </label>
                <label
                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
                >
                  <input
                    id="exportFormat-Json"
                    name="exportFormat"
                    type="radio"
                    value="Json"
                  />
                  <div>
                    <div />
                  </div>
                  <div
                    class="mx_StyledRadioButton_content"
                  >
                    JSON
                  </div>
                  <div
                    class="mx_StyledRadioButton_spacer"
                  />
                </label>
                <span
                  class="mx_ExportDialog_subheading"
                >
                  Messages
                </span>
                <div
                  class="mx_Field mx_Field_select"
                >
                  <select
                    id="export-type"
                    type="text"
                  >
                    <option
                      value="Timeline"
                    >
                      Current Timeline
                    </option>
                    <option
                      value="Beginning"
                    >
                      From the beginning
                    </option>
                    <option
                      value="LastNMessages"
                    >
                      Specify a number of messages
                    </option>
                  </select>
                  <label
                    for="export-type"
                  />
                </div>
                <span
                  class="mx_ExportDialog_subheading"
                >
                  Size Limit
                </span>
                <div
                  class="mx_Field mx_Field_input"
                >
                  <input
                    autocomplete="off"
                    id="size-limit"
                    type="number"
                    value="8"
                  />
                  <label
                    for="size-limit"
                  />
                  <span
                    class="mx_Field_postfix"
                  >
                    <span>
                      MB
                    </span>
                  </span>
                </div>
                <span
                  class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
                >
                  <input
                    id="include-attachments"
                    type="checkbox"
                  />
                  <label
                    for="include-attachments"
                  >
                    <div
                      class="mx_Checkbox_background"
                    >
                      <div
                        class="mx_Checkbox_checkmark"
                      />
                    </div>
                    <div>
                      Include Attachments
                    </div>
                  </label>
                </span>
              </div>
              <div
                class="mx_Dialog_buttons"
              >
                <span
                  class="mx_Dialog_buttons_row"
                >
                  <button
                    data-testid="dialog-cancel-button"
                    type="button"
                  >
                    Cancel
                  </button>
                  <button
                    class="mx_Dialog_primary"
                    data-testid="dialog-primary-button"
                    type="button"
                  >
                    Export
                  </button>
                </span>
              </div>
            </div>
          }
          onActivation={[Function]}
          onDeactivation={[Function]}
          persistentFocus={false}
          returnFocus={[Function]}
          shards={[]}
          sideCar={
            {
              "assignMedium": [Function],
              "assignSyncMedium": [Function],
              "options": {
                "async": true,
                "ssr": false,
              },
              "read": [Function],
              "useMedium": [Function],
            }
          }
        />
      </SideEffect(FocusWatcher)>
      <div
        aria-describedby="mx_Dialog_content"
        aria-labelledby="mx_BaseDialog_title"
        className="mx_ExportDialog false mx_Dialog_fixedWidth"
        data-focus-lock-disabled={false}
        onBlur={[Function]}
        onFocus={[Function]}
        onKeyDown={[Function]}
        role="dialog"
      >
        <div
          className="mx_Dialog_header mx_Dialog_headerWithCancel"
        >
          <Heading
            className="mx_Dialog_title"
            id="mx_BaseDialog_title"
            size="h2"
          >
            <h2
              className="mx_Heading_h2 mx_Dialog_title"
              id="mx_BaseDialog_title"
            >
              Export Chat
            </h2>
          </Heading>
          <AccessibleButton
            aria-label="Close dialog"
            className="mx_Dialog_cancelButton"
            element="div"
            onClick={[Function]}
            role="button"
            tabIndex={0}
          >
            <div
              aria-label="Close dialog"
              className="mx_AccessibleButton mx_Dialog_cancelButton"
              onClick={[Function]}
              onKeyDown={[Function]}
              onKeyUp={[Function]}
              role="button"
              tabIndex={0}
            />
          </AccessibleButton>
        </div>
        <p>
          Select from the options below to export chats from your timeline
        </p>
        <div
          className="mx_ExportDialog_options"
        >
          <span
            className="mx_ExportDialog_subheading"
          >
            Format
          </span>
          <StyledRadioGroup
            definitions={
              [
                {
                  "label": "HTML",
                  "value": "Html",
                },
                {
                  "label": "Plain Text",
                  "value": "PlainText",
                },
                {
                  "label": "JSON",
                  "value": "Json",
                },
              ]
            }
            name="exportFormat"
            onChange={[Function]}
            value="Html"
          >
            <StyledRadioButton
              checked={true}
              childrenInLabel={true}
              className=""
              id="exportFormat-Html"
              name="exportFormat"
              onChange={[Function]}
              value="Html"
            >
              <label
                className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
              >
                <input
                  checked={true}
                  id="exportFormat-Html"
                  name="exportFormat"
                  onChange={[Function]}
                  type="radio"
                  value="Html"
                />
                <div>
                  <div />
                </div>
                <div
                  className="mx_StyledRadioButton_content"
                >
                  HTML
                </div>
                <div
                  className="mx_StyledRadioButton_spacer"
                />
              </label>
            </StyledRadioButton>
            <StyledRadioButton
              checked={false}
              childrenInLabel={true}
              className=""
              id="exportFormat-PlainText"
              name="exportFormat"
              onChange={[Function]}
              value="PlainText"
            >
              <label
                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
              >
                <input
                  checked={false}
                  id="exportFormat-PlainText"
                  name="exportFormat"
                  onChange={[Function]}
                  type="radio"
                  value="PlainText"
                />
                <div>
                  <div />
                </div>
                <div
                  className="mx_StyledRadioButton_content"
                >
                  Plain Text
                </div>
                <div
                  className="mx_StyledRadioButton_spacer"
                />
              </label>
            </StyledRadioButton>
            <StyledRadioButton
              checked={false}
              childrenInLabel={true}
              className=""
              id="exportFormat-Json"
              name="exportFormat"
              onChange={[Function]}
              value="Json"
            >
              <label
                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
              >
                <input
                  checked={false}
                  id="exportFormat-Json"
                  name="exportFormat"
                  onChange={[Function]}
                  type="radio"
                  value="Json"
                />
                <div>
                  <div />
                </div>
                <div
                  className="mx_StyledRadioButton_content"
                >
                  JSON
                </div>
                <div
                  className="mx_StyledRadioButton_spacer"
                />
              </label>
            </StyledRadioButton>
          </StyledRadioGroup>
          <span
            className="mx_ExportDialog_subheading"
          >
            Messages
          </span>
          <Field
            element="select"
            id="export-type"
            onChange={[Function]}
            type="text"
            validateOnBlur={true}
            validateOnChange={true}
            validateOnFocus={true}
            value="Timeline"
          >
            <div
              className="mx_Field mx_Field_select"
            >
              <select
                id="export-type"
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}
                type="text"
                value="Timeline"
              >
                <option
                  key="Timeline"
                  value="Timeline"
                >
                  Current Timeline
                </option>
                <option
                  key="Beginning"
                  value="Beginning"
                >
                  From the beginning
                </option>
                <option
                  key="LastNMessages"
                  value="LastNMessages"
                >
                  Specify a number of messages
                </option>
              </select>
              <label
                htmlFor="export-type"
              />
            </div>
          </Field>
          <span
            className="mx_ExportDialog_subheading"
          >
            Size Limit
          </span>
          <Field
            autoComplete="off"
            element="input"
            id="size-limit"
            onChange={[Function]}
            onValidate={[Function]}
            postfixComponent={
              <span>
                MB
              </span>
            }
            type="number"
            validateOnBlur={true}
            validateOnChange={true}
            validateOnFocus={true}
            value="8"
          >
            <div
              className="mx_Field mx_Field_input"
            >
              <input
                autoComplete="off"
                id="size-limit"
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}
                type="number"
                value="8"
              />
              <label
                htmlFor="size-limit"
              />
              <span
                className="mx_Field_postfix"
              >
                <span>
                  MB
                </span>
              </span>
            </div>
          </Field>
          <StyledCheckbox
            checked={false}
            className="mx_ExportDialog_attachments-checkbox"
            id="include-attachments"
            onChange={[Function]}
          >
            <span
              className="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
            >
              <input
                checked={false}
                id="include-attachments"
                onChange={[Function]}
                type="checkbox"
              />
              <label
                htmlFor="include-attachments"
              >
                <div
                  className="mx_Checkbox_background"
                >
                  <div
                    className="mx_Checkbox_checkmark"
                  />
                </div>
                <div>
                  Include Attachments
                </div>
              </label>
            </span>
          </StyledCheckbox>
        </div>
        <DialogButtons
          disabled={false}
          hasCancel={true}
          onCancel={[Function]}
          onPrimaryButtonClick={[Function]}
          primaryButton="Export"
        >
          <div
            className="mx_Dialog_buttons"
          >
            <span
              className="mx_Dialog_buttons_row"
            >
              <button
                data-testid="dialog-cancel-button"
                disabled={false}
                onClick={[Function]}
                type="button"
              >
                Cancel
              </button>
              <button
                className="mx_Dialog_primary"
                data-testid="dialog-primary-button"
                onClick={[Function]}
                type="button"
              >
                Export
              </button>
            </span>
          </div>
        </DialogButtons>
      </div>
      <div
        data-focus-guard={true}
        style={
          {
            "height": "0px",
            "left": "1px",
            "overflow": "hidden",
            "padding": 0,
            "position": "fixed",
            "top": "1px",
            "width": "1px",
          }
        }
        tabIndex={0}
      />
    </ForwardRef(FocusLockUI)>
  </ForwardRef(FocusLockUICombination)>,
  <ForwardRef(FocusLockUI)
    as="div"
    autoFocus={true}
    className="mx_ExportDialog false mx_Dialog_fixedWidth"
    crossFrame={true}
    disabled={false}
    lockProps={
      {
        "aria-describedby": "mx_Dialog_content",
        "aria-labelledby": "mx_BaseDialog_title",
        "onKeyDown": [Function],
        "role": "dialog",
      }
    }
    noFocusGuards={false}
    persistentFocus={false}
    returnFocus={true}
    sideCar={[Function]}
  >
    <div
      data-focus-guard={true}
      key="guard-first"
      style={
        {
          "height": "0px",
          "left": "1px",
          "overflow": "hidden",
          "padding": 0,
          "position": "fixed",
          "top": "1px",
          "width": "1px",
        }
      }
      tabIndex={0}
    />
    <SideEffect(FocusWatcher)
      autoFocus={true}
      crossFrame={true}
      disabled={false}
      id={{}}
      observed={
        <div
          aria-describedby="mx_Dialog_content"
          aria-labelledby="mx_BaseDialog_title"
          class="mx_ExportDialog false mx_Dialog_fixedWidth"
          data-focus-lock-disabled="false"
          role="dialog"
        >
          <div
            class="mx_Dialog_header mx_Dialog_headerWithCancel"
          >
            <h2
              class="mx_Heading_h2 mx_Dialog_title"
              id="mx_BaseDialog_title"
            >
              Export Chat
            </h2>
            <div
              aria-label="Close dialog"
              class="mx_AccessibleButton mx_Dialog_cancelButton"
              role="button"
              tabindex="0"
            />
          </div>
          <p>
            Select from the options below to export chats from your timeline
          </p>
          <div
            class="mx_ExportDialog_options"
          >
            <span
              class="mx_ExportDialog_subheading"
            >
              Format
            </span>
            <label
              class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
            >
              <input
                checked=""
                id="exportFormat-Html"
                name="exportFormat"
                type="radio"
                value="Html"
              />
              <div>
                <div />
              </div>
              <div
                class="mx_StyledRadioButton_content"
              >
                HTML
              </div>
              <div
                class="mx_StyledRadioButton_spacer"
              />
            </label>
            <label
              class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
            >
              <input
                id="exportFormat-PlainText"
                name="exportFormat"
                type="radio"
                value="PlainText"
              />
              <div>
                <div />
              </div>
              <div
                class="mx_StyledRadioButton_content"
              >
                Plain Text
              </div>
              <div
                class="mx_StyledRadioButton_spacer"
              />
            </label>
            <label
              class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
            >
              <input
                id="exportFormat-Json"
                name="exportFormat"
                type="radio"
                value="Json"
              />
              <div>
                <div />
              </div>
              <div
                class="mx_StyledRadioButton_content"
              >
                JSON
              </div>
              <div
                class="mx_StyledRadioButton_spacer"
              />
            </label>
            <span
              class="mx_ExportDialog_subheading"
            >
              Messages
            </span>
            <div
              class="mx_Field mx_Field_select"
            >
              <select
                id="export-type"
                type="text"
              >
                <option
                  value="Timeline"
                >
                  Current Timeline
                </option>
                <option
                  value="Beginning"
                >
                  From the beginning
                </option>
                <option
                  value="LastNMessages"
                >
                  Specify a number of messages
                </option>
              </select>
              <label
                for="export-type"
              />
            </div>
            <span
              class="mx_ExportDialog_subheading"
            >
              Size Limit
            </span>
            <div
              class="mx_Field mx_Field_input"
            >
              <input
                autocomplete="off"
                id="size-limit"
                type="number"
                value="8"
              />
              <label
                for="size-limit"
              />
              <span
                class="mx_Field_postfix"
              >
                <span>
                  MB
                </span>
              </span>
            </div>
            <span
              class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
            >
              <input
                id="include-attachments"
                type="checkbox"
              />
              <label
                for="include-attachments"
              >
                <div
                  class="mx_Checkbox_background"
                >
                  <div
                    class="mx_Checkbox_checkmark"
                  />
                </div>
                <div>
                  Include Attachments
                </div>
              </label>
            </span>
          </div>
          <div
            class="mx_Dialog_buttons"
          >
            <span
              class="mx_Dialog_buttons_row"
            >
              <button
                data-testid="dialog-cancel-button"
                type="button"
              >
                Cancel
              </button>
              <button
                class="mx_Dialog_primary"
                data-testid="dialog-primary-button"
                type="button"
              >
                Export
              </button>
            </span>
          </div>
        </div>
      }
      onActivation={[Function]}
      onDeactivation={[Function]}
      persistentFocus={false}
      returnFocus={[Function]}
      shards={[]}
      sideCar={
        {
          "assignMedium": [Function],
          "assignSyncMedium": [Function],
          "options": {
            "async": true,
            "ssr": false,
          },
          "read": [Function],
          "useMedium": [Function],
        }
      }
    >
      <FocusWatcher
        autoFocus={true}
        crossFrame={true}
        disabled={false}
        id={{}}
        observed={
          <div
            aria-describedby="mx_Dialog_content"
            aria-labelledby="mx_BaseDialog_title"
            class="mx_ExportDialog false mx_Dialog_fixedWidth"
            data-focus-lock-disabled="false"
            role="dialog"
          >
            <div
              class="mx_Dialog_header mx_Dialog_headerWithCancel"
            >
              <h2
                class="mx_Heading_h2 mx_Dialog_title"
                id="mx_BaseDialog_title"
              >
                Export Chat
              </h2>
              <div
                aria-label="Close dialog"
                class="mx_AccessibleButton mx_Dialog_cancelButton"
                role="button"
                tabindex="0"
              />
            </div>
            <p>
              Select from the options below to export chats from your timeline
            </p>
            <div
              class="mx_ExportDialog_options"
            >
              <span
                class="mx_ExportDialog_subheading"
              >
                Format
              </span>
              <label
                class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
              >
                <input
                  checked=""
                  id="exportFormat-Html"
                  name="exportFormat"
                  type="radio"
                  value="Html"
                />
                <div>
                  <div />
                </div>
                <div
                  class="mx_StyledRadioButton_content"
                >
                  HTML
                </div>
                <div
                  class="mx_StyledRadioButton_spacer"
                />
              </label>
              <label
                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
              >
                <input
                  id="exportFormat-PlainText"
                  name="exportFormat"
                  type="radio"
                  value="PlainText"
                />
                <div>
                  <div />
                </div>
                <div
                  class="mx_StyledRadioButton_content"
                >
                  Plain Text
                </div>
                <div
                  class="mx_StyledRadioButton_spacer"
                />
              </label>
              <label
                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
              >
                <input
                  id="exportFormat-Json"
                  name="exportFormat"
                  type="radio"
                  value="Json"
                />
                <div>
                  <div />
                </div>
                <div
                  class="mx_StyledRadioButton_content"
                >
                  JSON
                </div>
                <div
                  class="mx_StyledRadioButton_spacer"
                />
              </label>
              <span
                class="mx_ExportDialog_subheading"
              >
                Messages
              </span>
              <div
                class="mx_Field mx_Field_select"
              >
                <select
                  id="export-type"
                  type="text"
                >
                  <option
                    value="Timeline"
                  >
                    Current Timeline
                  </option>
                  <option
                    value="Beginning"
                  >
                    From the beginning
                  </option>
                  <option
                    value="LastNMessages"
                  >
                    Specify a number of messages
                  </option>
                </select>
                <label
                  for="export-type"
                />
              </div>
              <span
                class="mx_ExportDialog_subheading"
              >
                Size Limit
              </span>
              <div
                class="mx_Field mx_Field_input"
              >
                <input
                  autocomplete="off"
                  id="size-limit"
                  type="number"
                  value="8"
                />
                <label
                  for="size-limit"
                />
                <span
                  class="mx_Field_postfix"
                >
                  <span>
                    MB
                  </span>
                </span>
              </div>
              <span
                class="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
              >
                <input
                  id="include-attachments"
                  type="checkbox"
                />
                <label
                  for="include-attachments"
                >
                  <div
                    class="mx_Checkbox_background"
                  >
                    <div
                      class="mx_Checkbox_checkmark"
                    />
                  </div>
                  <div>
                    Include Attachments
                  </div>
                </label>
              </span>
            </div>
            <div
              class="mx_Dialog_buttons"
            >
              <span
                class="mx_Dialog_buttons_row"
              >
                <button
                  data-testid="dialog-cancel-button"
                  type="button"
                >
                  Cancel
                </button>
                <button
                  class="mx_Dialog_primary"
                  data-testid="dialog-primary-button"
                  type="button"
                >
                  Export
                </button>
              </span>
            </div>
          </div>
        }
        onActivation={[Function]}
        onDeactivation={[Function]}
        persistentFocus={false}
        returnFocus={[Function]}
        shards={[]}
        sideCar={
          {
            "assignMedium": [Function],
            "assignSyncMedium": [Function],
            "options": {
              "async": true,
              "ssr": false,
            },
            "read": [Function],
            "useMedium": [Function],
          }
        }
      />
    </SideEffect(FocusWatcher)>
    <div
      aria-describedby="mx_Dialog_content"
      aria-labelledby="mx_BaseDialog_title"
      className="mx_ExportDialog false mx_Dialog_fixedWidth"
      data-focus-lock-disabled={false}
      onBlur={[Function]}
      onFocus={[Function]}
      onKeyDown={[Function]}
      role="dialog"
    >
      <div
        className="mx_Dialog_header mx_Dialog_headerWithCancel"
      >
        <Heading
          className="mx_Dialog_title"
          id="mx_BaseDialog_title"
          size="h2"
        >
          <h2
            className="mx_Heading_h2 mx_Dialog_title"
            id="mx_BaseDialog_title"
          >
            Export Chat
          </h2>
        </Heading>
        <AccessibleButton
          aria-label="Close dialog"
          className="mx_Dialog_cancelButton"
          element="div"
          onClick={[Function]}
          role="button"
          tabIndex={0}
        >
          <div
            aria-label="Close dialog"
            className="mx_AccessibleButton mx_Dialog_cancelButton"
            onClick={[Function]}
            onKeyDown={[Function]}
            onKeyUp={[Function]}
            role="button"
            tabIndex={0}
          />
        </AccessibleButton>
      </div>
      <p>
        Select from the options below to export chats from your timeline
      </p>
      <div
        className="mx_ExportDialog_options"
      >
        <span
          className="mx_ExportDialog_subheading"
        >
          Format
        </span>
        <StyledRadioGroup
          definitions={
            [
              {
                "label": "HTML",
                "value": "Html",
              },
              {
                "label": "Plain Text",
                "value": "PlainText",
              },
              {
                "label": "JSON",
                "value": "Json",
              },
            ]
          }
          name="exportFormat"
          onChange={[Function]}
          value="Html"
        >
          <StyledRadioButton
            checked={true}
            childrenInLabel={true}
            className=""
            id="exportFormat-Html"
            name="exportFormat"
            onChange={[Function]}
            value="Html"
          >
            <label
              className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
            >
              <input
                checked={true}
                id="exportFormat-Html"
                name="exportFormat"
                onChange={[Function]}
                type="radio"
                value="Html"
              />
              <div>
                <div />
              </div>
              <div
                className="mx_StyledRadioButton_content"
              >
                HTML
              </div>
              <div
                className="mx_StyledRadioButton_spacer"
              />
            </label>
          </StyledRadioButton>
          <StyledRadioButton
            checked={false}
            childrenInLabel={true}
            className=""
            id="exportFormat-PlainText"
            name="exportFormat"
            onChange={[Function]}
            value="PlainText"
          >
            <label
              className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
            >
              <input
                checked={false}
                id="exportFormat-PlainText"
                name="exportFormat"
                onChange={[Function]}
                type="radio"
                value="PlainText"
              />
              <div>
                <div />
              </div>
              <div
                className="mx_StyledRadioButton_content"
              >
                Plain Text
              </div>
              <div
                className="mx_StyledRadioButton_spacer"
              />
            </label>
          </StyledRadioButton>
          <StyledRadioButton
            checked={false}
            childrenInLabel={true}
            className=""
            id="exportFormat-Json"
            name="exportFormat"
            onChange={[Function]}
            value="Json"
          >
            <label
              className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
            >
              <input
                checked={false}
                id="exportFormat-Json"
                name="exportFormat"
                onChange={[Function]}
                type="radio"
                value="Json"
              />
              <div>
                <div />
              </div>
              <div
                className="mx_StyledRadioButton_content"
              >
                JSON
              </div>
              <div
                className="mx_StyledRadioButton_spacer"
              />
            </label>
          </StyledRadioButton>
        </StyledRadioGroup>
        <span
          className="mx_ExportDialog_subheading"
        >
          Messages
        </span>
        <Field
          element="select"
          id="export-type"
          onChange={[Function]}
          type="text"
          validateOnBlur={true}
          validateOnChange={true}
          validateOnFocus={true}
          value="Timeline"
        >
          <div
            className="mx_Field mx_Field_select"
          >
            <select
              id="export-type"
              onBlur={[Function]}
              onChange={[Function]}
              onFocus={[Function]}
              type="text"
              value="Timeline"
            >
              <option
                key="Timeline"
                value="Timeline"
              >
                Current Timeline
              </option>
              <option
                key="Beginning"
                value="Beginning"
              >
                From the beginning
              </option>
              <option
                key="LastNMessages"
                value="LastNMessages"
              >
                Specify a number of messages
              </option>
            </select>
            <label
              htmlFor="export-type"
            />
          </div>
        </Field>
        <span
          className="mx_ExportDialog_subheading"
        >
          Size Limit
        </span>
        <Field
          autoComplete="off"
          element="input"
          id="size-limit"
          onChange={[Function]}
          onValidate={[Function]}
          postfixComponent={
            <span>
              MB
            </span>
          }
          type="number"
          validateOnBlur={true}
          validateOnChange={true}
          validateOnFocus={true}
          value="8"
        >
          <div
            className="mx_Field mx_Field_input"
          >
            <input
              autoComplete="off"
              id="size-limit"
              onBlur={[Function]}
              onChange={[Function]}
              onFocus={[Function]}
              type="number"
              value="8"
            />
            <label
              htmlFor="size-limit"
            />
            <span
              className="mx_Field_postfix"
            >
              <span>
                MB
              </span>
            </span>
          </div>
        </Field>
        <StyledCheckbox
          checked={false}
          className="mx_ExportDialog_attachments-checkbox"
          id="include-attachments"
          onChange={[Function]}
        >
          <span
            className="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
          >
            <input
              checked={false}
              id="include-attachments"
              onChange={[Function]}
              type="checkbox"
            />
            <label
              htmlFor="include-attachments"
            >
              <div
                className="mx_Checkbox_background"
              >
                <div
                  className="mx_Checkbox_checkmark"
                />
              </div>
              <div>
                Include Attachments
              </div>
            </label>
          </span>
        </StyledCheckbox>
      </div>
      <DialogButtons
        disabled={false}
        hasCancel={true}
        onCancel={[Function]}
        onPrimaryButtonClick={[Function]}
        primaryButton="Export"
      >
        <div
          className="mx_Dialog_buttons"
        >
          <span
            className="mx_Dialog_buttons_row"
          >
            <button
              data-testid="dialog-cancel-button"
              disabled={false}
              onClick={[Function]}
              type="button"
            >
              Cancel
            </button>
            <button
              className="mx_Dialog_primary"
              data-testid="dialog-primary-button"
              onClick={[Function]}
              type="button"
            >
              Export
            </button>
          </span>
        </div>
      </DialogButtons>
    </div>
    <div
      data-focus-guard={true}
      style={
        {
          "height": "0px",
          "left": "1px",
          "overflow": "hidden",
          "padding": 0,
          "position": "fixed",
          "top": "1px",
          "width": "1px",
        }
      }
      tabIndex={0}
    />
  </ForwardRef(FocusLockUI)>,
  <div
    aria-describedby="mx_Dialog_content"
    aria-labelledby="mx_BaseDialog_title"
    className="mx_ExportDialog false mx_Dialog_fixedWidth"
    data-focus-lock-disabled={false}
    onBlur={[Function]}
    onFocus={[Function]}
    onKeyDown={[Function]}
    role="dialog"
  >
    <div
      className="mx_Dialog_header mx_Dialog_headerWithCancel"
    >
      <Heading
        className="mx_Dialog_title"
        id="mx_BaseDialog_title"
        size="h2"
      >
        <h2
          className="mx_Heading_h2 mx_Dialog_title"
          id="mx_BaseDialog_title"
        >
          Export Chat
        </h2>
      </Heading>
      <AccessibleButton
        aria-label="Close dialog"
        className="mx_Dialog_cancelButton"
        element="div"
        onClick={[Function]}
        role="button"
        tabIndex={0}
      >
        <div
          aria-label="Close dialog"
          className="mx_AccessibleButton mx_Dialog_cancelButton"
          onClick={[Function]}
          onKeyDown={[Function]}
          onKeyUp={[Function]}
          role="button"
          tabIndex={0}
        />
      </AccessibleButton>
    </div>
    <p>
      Select from the options below to export chats from your timeline
    </p>
    <div
      className="mx_ExportDialog_options"
    >
      <span
        className="mx_ExportDialog_subheading"
      >
        Format
      </span>
      <StyledRadioGroup
        definitions={
          [
            {
              "label": "HTML",
              "value": "Html",
            },
            {
              "label": "Plain Text",
              "value": "PlainText",
            },
            {
              "label": "JSON",
              "value": "Json",
            },
          ]
        }
        name="exportFormat"
        onChange={[Function]}
        value="Html"
      >
        <StyledRadioButton
          checked={true}
          childrenInLabel={true}
          className=""
          id="exportFormat-Html"
          name="exportFormat"
          onChange={[Function]}
          value="Html"
        >
          <label
            className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
          >
            <input
              checked={true}
              id="exportFormat-Html"
              name="exportFormat"
              onChange={[Function]}
              type="radio"
              value="Html"
            />
            <div>
              <div />
            </div>
            <div
              className="mx_StyledRadioButton_content"
            >
              HTML
            </div>
            <div
              className="mx_StyledRadioButton_spacer"
            />
          </label>
        </StyledRadioButton>
        <StyledRadioButton
          checked={false}
          childrenInLabel={true}
          className=""
          id="exportFormat-PlainText"
          name="exportFormat"
          onChange={[Function]}
          value="PlainText"
        >
          <label
            className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
          >
            <input
              checked={false}
              id="exportFormat-PlainText"
              name="exportFormat"
              onChange={[Function]}
              type="radio"
              value="PlainText"
            />
            <div>
              <div />
            </div>
            <div
              className="mx_StyledRadioButton_content"
            >
              Plain Text
            </div>
            <div
              className="mx_StyledRadioButton_spacer"
            />
          </label>
        </StyledRadioButton>
        <StyledRadioButton
          checked={false}
          childrenInLabel={true}
          className=""
          id="exportFormat-Json"
          name="exportFormat"
          onChange={[Function]}
          value="Json"
        >
          <label
            className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
          >
            <input
              checked={false}
              id="exportFormat-Json"
              name="exportFormat"
              onChange={[Function]}
              type="radio"
              value="Json"
            />
            <div>
              <div />
            </div>
            <div
              className="mx_StyledRadioButton_content"
            >
              JSON
            </div>
            <div
              className="mx_StyledRadioButton_spacer"
            />
          </label>
        </StyledRadioButton>
      </StyledRadioGroup>
      <span
        className="mx_ExportDialog_subheading"
      >
        Messages
      </span>
      <Field
        element="select"
        id="export-type"
        onChange={[Function]}
        type="text"
        validateOnBlur={true}
        validateOnChange={true}
        validateOnFocus={true}
        value="Timeline"
      >
        <div
          className="mx_Field mx_Field_select"
        >
          <select
            id="export-type"
            onBlur={[Function]}
            onChange={[Function]}
            onFocus={[Function]}
            type="text"
            value="Timeline"
          >
            <option
              key="Timeline"
              value="Timeline"
            >
              Current Timeline
            </option>
            <option
              key="Beginning"
              value="Beginning"
            >
              From the beginning
            </option>
            <option
              key="LastNMessages"
              value="LastNMessages"
            >
              Specify a number of messages
            </option>
          </select>
          <label
            htmlFor="export-type"
          />
        </div>
      </Field>
      <span
        className="mx_ExportDialog_subheading"
      >
        Size Limit
      </span>
      <Field
        autoComplete="off"
        element="input"
        id="size-limit"
        onChange={[Function]}
        onValidate={[Function]}
        postfixComponent={
          <span>
            MB
          </span>
        }
        type="number"
        validateOnBlur={true}
        validateOnChange={true}
        validateOnFocus={true}
        value="8"
      >
        <div
          className="mx_Field mx_Field_input"
        >
          <input
            autoComplete="off"
            id="size-limit"
            onBlur={[Function]}
            onChange={[Function]}
            onFocus={[Function]}
            type="number"
            value="8"
          />
          <label
            htmlFor="size-limit"
          />
          <span
            className="mx_Field_postfix"
          >
            <span>
              MB
            </span>
          </span>
        </div>
      </Field>
      <StyledCheckbox
        checked={false}
        className="mx_ExportDialog_attachments-checkbox"
        id="include-attachments"
        onChange={[Function]}
      >
        <span
          className="mx_Checkbox mx_ExportDialog_attachments-checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
        >
          <input
            checked={false}
            id="include-attachments"
            onChange={[Function]}
            type="checkbox"
          />
          <label
            htmlFor="include-attachments"
          >
            <div
              className="mx_Checkbox_background"
            >
              <div
                className="mx_Checkbox_checkmark"
              />
            </div>
            <div>
              Include Attachments
            </div>
          </label>
        </span>
      </StyledCheckbox>
    </div>
    <DialogButtons
      disabled={false}
      hasCancel={true}
      onCancel={[Function]}
      onPrimaryButtonClick={[Function]}
      primaryButton="Export"
    >
      <div
        className="mx_Dialog_buttons"
      >
        <span
          className="mx_Dialog_buttons_row"
        >
          <button
            data-testid="dialog-cancel-button"
            disabled={false}
            onClick={[Function]}
            type="button"
          >
            Cancel
          </button>
          <button
            className="mx_Dialog_primary"
            data-testid="dialog-primary-button"
            onClick={[Function]}
            type="button"
          >
            Export
          </button>
        </span>
      </div>
    </DialogButtons>
  </div>,
]
`;

exports[`<ExportDialog /> renders success screen when export is finished 1`] = `
<div
  className="mx_Dialog_content"
  id="mx_Dialog_content"
>
  Your export was successful. Find it in your Downloads folder.
</div>
`;